fix: allow moving text inside message content (#3723)

## 🎯 Goal

Even though we had for reordering message content (text, gallery, poll
etc) text had a fixed position. This PR enables updating text's position
too.

https://github.com/GetStream/docs-content/pull/1417/changes 

## 🛠 Implementation details

## 🎨 UI Changes

No UI changes, the following URL contains before-after shots verifying
no change:


https://claude.ai/code/artifact/c071bb00-30f3-48ba-ac12-708204549007?via=auto_preview
(if the link doesn't work, try the attached screenshots)

[message-content-ordering-report.zip](https://github.com/user-attachments/files/29860209/message-content-ordering-report.zip)

## 🧪 Testing

Tested manually on android and ios too

## ☑️ Checklist

- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required)
- [ ] PR targets the `develop` branch
- [ ] Documentation is updated
- [ ] New code is tested in main example apps, including all possible
scenarios
  - [ ] SampleApp iOS and Android
  - [ ] Expo iOS and Android

Author: szuperaz

package/src/components/Channel/Channel.tsx

@@ -468,8 +468,8 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
       'poll',
       'ai_text',
       'attachments',
-      'text',
       'location',
+      'text',
     ],
     messageOverlayTargetId,
     messageInputFloating = false,

package/src/components/Message/MessageItemView/MessageContent.tsx

@@ -220,12 +220,25 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
 
   const { setNativeScrollability } = useMessageListItemContext();
   const hasContentSideViews = !!(MessageContentLeadingView || MessageContentTrailingView);
+  const gap = primitives.spacingXs;
+
+  const messageTextContainerStyles = useMemo(() => {
+    return {
+      textContainer: {
+        // Cancel the container's 8px inter-item gap so only the caption's own
+        // paragraph marginTop shows. Skip for the first item: there is no gap to
+        // cancel
+        marginTop: -gap,
+      },
+    };
+  }, [gap]);
+
   const contentBody = (
     <>
       <View
         style={[
           {
-            gap: primitives.spacingXs,
+            gap,
             paddingTop: hidePaddingTop ? 0 : primitives.spacingXs,
             paddingHorizontal: hidePaddingHorizontal ? 0 : primitives.spacingXs,
             paddingBottom: hidePaddingBottom ? 0 : primitives.spacingXs,
@@ -313,14 +326,21 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
                   key={`ai_message_text_container_${messageContentOrderIndex}`}
                 />
               ) : null;
+            case 'text': {
+              const suppressed =
+                (otherAttachments.length && otherAttachments[0].actions) || isAIGenerated;
+              return suppressed ? null : (
+                <MessageTextContainer
+                  key={`message_text_container_${messageContentOrderIndex}`}
+                  styles={messageContentOrderIndex === 0 ? undefined : messageTextContainerStyles}
+                />
+              );
+            }
             default:
               return null;
           }
         })}
       </View>
-      {(otherAttachments.length && otherAttachments[0].actions) || isAIGenerated ? null : (
-        <MessageTextContainer />
-      )}
     </>
   );
   const a11yPressableLabel = useMemo(() => {

package/src/components/Message/MessageItemView/MessageTextContainer.tsx

@@ -21,7 +21,7 @@ import { useTranslatedMessage } from '../../../hooks/useTranslatedMessage';
 import { primitives } from '../../../theme';
 
 const styles = StyleSheet.create({
-  textContainer: { maxWidth: 256, paddingHorizontal: primitives.spacingSm },
+  textContainer: { maxWidth: 256, paddingHorizontal: primitives.spacingXxs },
 });
 
 export type MessageTextProps = MessageTextContainerProps & {

package/src/components/Message/MessageItemView/__tests__/MessageContent.test.tsx

@@ -445,6 +445,122 @@ describe('MessageContent', () => {
     });
   });
 
+  // Collects the given testIDs in the order they appear in the rendered tree.
+  const collectOrderedTestIDs = (
+    root: ReturnType<typeof screen.getByTestId>,
+    targets: string[],
+  ) => {
+    const found: string[] = [];
+    const walk = (node: typeof root | string | null) => {
+      if (!node || typeof node === 'string') {
+        return;
+      }
+      const testID = node.props?.testID;
+      if (testID && targets.includes(testID) && !found.includes(testID)) {
+        found.push(testID);
+      }
+      (node.children ?? []).forEach((child) => walk(child as typeof root | string));
+    };
+    walk(root);
+    return found;
+  };
+
+  it('renders text after attachments with the default messageContentOrder', async () => {
+    const user = generateUser();
+    const message = generateMessage({
+      attachments: [
+        { image_url: 'https://i.imgur.com/SLx06PP.png', type: 'image' },
+        { image_url: 'https://i.imgur.com/iNaC3K7.jpg', type: 'image' },
+      ],
+      text: 'a caption',
+      user,
+    });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('gallery-container')).toBeTruthy();
+      expect(screen.getByTestId('message-text-container')).toBeTruthy();
+    });
+
+    expect(
+      collectOrderedTestIDs(screen.getByTestId('message-content-wrapper'), [
+        'gallery-container',
+        'message-text-container',
+      ]),
+    ).toEqual(['gallery-container', 'message-text-container']);
+  });
+
+  it('renders text before attachments when messageContentOrder puts text first', async () => {
+    const user = generateUser();
+    const message = generateMessage({
+      attachments: [
+        { image_url: 'https://i.imgur.com/SLx06PP.png', type: 'image' },
+        { image_url: 'https://i.imgur.com/iNaC3K7.jpg', type: 'image' },
+      ],
+      text: 'a caption',
+      user,
+    });
+
+    render(
+      <Chat client={chatClient}>
+        <Channel
+          channel={channel}
+          messageContentOrder={[
+            'text',
+            'quoted_reply',
+            'gallery',
+            'files',
+            'poll',
+            'ai_text',
+            'attachments',
+            'location',
+          ]}
+        >
+          <Message groupStyles={['bottom']} message={message} />
+        </Channel>
+      </Chat>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('gallery-container')).toBeTruthy();
+      expect(screen.getByTestId('message-text-container')).toBeTruthy();
+    });
+
+    expect(
+      collectOrderedTestIDs(screen.getByTestId('message-content-wrapper'), [
+        'gallery-container',
+        'message-text-container',
+      ]),
+    ).toEqual(['message-text-container', 'gallery-container']);
+  });
+
+  it('suppresses the text container for an ephemeral giphy preview with actions', async () => {
+    const user = generateUser();
+    const message = generateMessage({
+      attachments: [
+        {
+          ...generateGiphyAttachment(),
+          actions: [
+            generateAttachmentAction(),
+            generateAttachmentAction(),
+            generateAttachmentAction(),
+          ],
+        },
+      ],
+      text: '/giphy hello',
+      user,
+    });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('giphy-action-attachment')).toBeTruthy();
+    });
+
+    expect(screen.queryByTestId('message-text-container')).toBeFalsy();
+  });
+
   it('renders the ReactionList when the message has reactions', async () => {
     const user = generateUser();
     const reaction = generateReaction();

package/src/components/Message/MessageItemView/__tests__/__snapshots__/MessageTextContainer.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`MessageTextContainer should render message text container 1`] = `
     [
       {
         "maxWidth": 256,
-        "paddingHorizontal": 12,
+        "paddingHorizontal": 4,
       },
       {},
       undefined,