feat: input redesign structure (#3489)

## 🎯 Goal

This PR implements the new design for the `Also send to channel` button
within the `Thread` version of `MessageInput`. Additionally, it solves
an issue with duplicate `overlay` IDs (i.e a message sent in both a
thread and a channel, or a duplicate channel in the navigation stack
perhaps) which caused the context menu to work improperly.

It also aligns various other design decisions across SDKs.

## 🛠 Implementation details

<!-- Provide a description of the implementation -->

## 🎨 UI Changes

<!-- Add relevant screenshots -->

<details>
<summary>iOS</summary>


<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>


<details>
<summary>Android</summary>

<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>

## 🧪 Testing

<!-- Explain how this change can be tested (or why it can't be tested)
-->

## ☑️ 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: isekovanic

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -252,6 +252,7 @@ const useStyles = () => {
         paddingLeft: 16,
         paddingVertical: 12,
         textAlignVertical: 'center', // for android vertical text centering
+        alignSelf: 'center',
       },
     });
   }, [semantics]);

package/src/components/AutoCompleteInput/InputView.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { AutoCompleteInput } from './AutoCompleteInput';
+
+import { CommandChip } from '../MessageInput/CommandChip';
+import { ShowThreadMessageInChannelButton } from '../MessageInput/ShowThreadMessageInChannelButton';
+
+export type InputViewProps = React.ComponentProps<typeof AutoCompleteInput>;
+
+export const InputView = (props: InputViewProps) => (
+  <View style={styles.container}>
+    <View style={styles.inputRow}>
+      <CommandChip />
+      <AutoCompleteInput {...props} />
+    </View>
+    <ShowThreadMessageInChannelButton />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  inputRow: {
+    flexDirection: 'row',
+  },
+});

package/src/components/Channel/Channel.tsx

@@ -131,6 +131,7 @@ import { ImageOverlaySelectedComponent as DefaultImageOverlaySelectedComponent }
 import { AutoCompleteSuggestionHeader as AutoCompleteSuggestionHeaderDefault } from '../AutoCompleteInput/AutoCompleteSuggestionHeader';
 import { AutoCompleteSuggestionItem as AutoCompleteSuggestionItemDefault } from '../AutoCompleteInput/AutoCompleteSuggestionItem';
 import { AutoCompleteSuggestionList as AutoCompleteSuggestionListDefault } from '../AutoCompleteInput/AutoCompleteSuggestionList';
+import { InputView as InputViewDefault } from '../AutoCompleteInput/InputView';
 import { EmptyStateIndicator as EmptyStateIndicatorDefault } from '../Indicators/EmptyStateIndicator';
 import {
   LoadingErrorIndicator as LoadingErrorIndicatorDefault,
@@ -190,6 +191,7 @@ import { CooldownTimer as CooldownTimerDefault } from '../MessageInput/component
 import { SendButton as SendButtonDefault } from '../MessageInput/components/OutputButtons/SendButton';
 import { MessageComposerLeadingView as MessageComposerLeadingViewDefault } from '../MessageInput/MessageComposerLeadingView';
 import { MessageComposerTrailingView as MessageComposerTrailingViewDefault } from '../MessageInput/MessageComposerTrailingView';
+import { MessageInputFooterView as MessageInputFooterViewDefault } from '../MessageInput/MessageInputFooterView';
 import { MessageInputHeaderView as MessageInputHeaderViewDefault } from '../MessageInput/MessageInputHeaderView';
 import { MessageInputLeadingView as MessageInputLeadingViewDefault } from '../MessageInput/MessageInputLeadingView';
 import { MessageInputTrailingView as MessageInputTrailingViewDefault } from '../MessageInput/MessageInputTrailingView';
@@ -666,6 +668,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     InlineDateSeparator = InlineDateSeparatorDefault,
     InlineUnreadIndicator = InlineUnreadIndicatorDefault,
     Input,
+    InputView = InputViewDefault,
     InputButtons = InputButtonsDefault,
     MessageComposerLeadingView = MessageComposerLeadingViewDefault,
     MessageComposerTrailingView = MessageComposerTrailingViewDefault,
@@ -702,6 +705,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     MessageDeleted = MessageDeletedDefault,
     MessageError = MessageErrorDefault,
     messageInputFloating = false,
+    MessageInputFooterView = MessageInputFooterViewDefault,
     MessageInputHeaderView = MessageInputHeaderViewDefault,
     MessageInputLeadingView = MessageInputLeadingViewDefault,
     MessageInputTrailingView = MessageInputTrailingViewDefault,
@@ -1884,11 +1888,13 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     hasImagePicker,
     ImageAttachmentUploadPreview,
     Input,
+    InputView,
     InputButtons,
     MessageComposerLeadingView,
     MessageComposerTrailingView,
     messageInputFloating,
     messageInputHeightStore,
+    MessageInputFooterView,
     MessageInputHeaderView,
     MessageInputLeadingView,
     MessageInputTrailingView,

package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts

@@ -45,11 +45,13 @@ export const useCreateInputMessageInputContext = ({
   hasImagePicker,
   ImageAttachmentUploadPreview,
   Input,
+  InputView,
   InputButtons,
   MessageComposerLeadingView,
   MessageComposerTrailingView,
   messageInputFloating,
   messageInputHeightStore,
+  MessageInputFooterView,
   MessageInputHeaderView,
   MessageInputLeadingView,
   MessageInputTrailingView,
@@ -112,11 +114,13 @@ export const useCreateInputMessageInputContext = ({
       hasImagePicker,
       ImageAttachmentUploadPreview,
       Input,
+      InputView,
       InputButtons,
       MessageComposerLeadingView,
       MessageComposerTrailingView,
       messageInputFloating,
       messageInputHeightStore,
+      MessageInputFooterView,
       MessageInputHeaderView,
       MessageInputLeadingView,
       MessageInputTrailingView,

package/src/components/Message/Message.tsx

@@ -62,6 +62,7 @@ import {
 import { FileTypes } from '../../types/types';
 import {
   checkMessageEquality,
+  generateRandomId,
   hasOnlyEmojis,
   isBlockedMessage,
   isBouncedMessage,
@@ -71,6 +72,9 @@ import type { Thumbnail } from '../Attachment/utils/buildGallery/types';
 import { dismissKeyboard } from '../KeyboardCompatibleView/KeyboardControllerAvoidingView';
 import { BottomSheetModal } from '../UIComponents';
 
+const createMessageOverlayId = (messageId?: string) =>
+  `message-overlay-${messageId ?? 'unknown'}-${generateRandomId()}`;
+
 export type TouchableEmitter =
   | 'failed-image'
   | 'fileAttachment'
@@ -325,6 +329,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     () => isMessageAIGenerated(message),
     [message, isMessageAIGenerated],
   );
+  const messageOverlayId = useMemo(() => createMessageOverlayId(message.id), [message.id]);
   const isMessageTypeDeleted = message.type === 'deleted';
   const { client } = chatContext;
 
@@ -339,7 +344,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
       const layout = await measureInWindow(messageWrapperRef, insets);
       setRect(layout);
       setOverlayMessageH(layout);
-      openOverlay(message.id);
+      openOverlay({ id: messageOverlayId, messageId: message.id });
     } catch (e) {
       console.error(e);
     }
@@ -685,7 +690,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
   };
 
   const frozenMessage = useRef(message);
-  const { active: overlayActive } = useIsOverlayActive(message.id);
+  const { active: overlayActive } = useIsOverlayActive(messageOverlayId);
 
   const messageHasOnlySingleAttachment =
     !message.text && !message.quoted_message && message.attachments?.length === 1;
@@ -709,6 +714,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     lastGroupMessage: groupStyles?.[0] === 'single' || groupStyles?.[0] === 'bottom',
     members,
     message: overlayActive ? frozenMessage.current : message,
+    messageOverlayId,
     messageContentOrder,
     messageHasOnlySingleAttachment,
     myMessageTheme: messagesContext.myMessageTheme,

package/src/components/Message/hooks/__tests__/useShouldUseOverlayStyles.test.tsx

@@ -0,0 +1,122 @@
+import React, { PropsWithChildren } from 'react';
+
+import { act, cleanup, renderHook } from '@testing-library/react-native';
+
+import {
+  MessageContextValue,
+  MessageProvider,
+} from '../../../../contexts/messageContext/MessageContext';
+import { generateMessage } from '../../../../mock-builders/generator/message';
+import { finalizeCloseOverlay, openOverlay, overlayStore } from '../../../../state-store';
+
+import { useShouldUseOverlayStyles } from '../useShouldUseOverlayStyles';
+
+const createMessageContextValue = (overrides: Partial<MessageContextValue>): MessageContextValue =>
+  ({
+    actionsEnabled: false,
+    alignment: 'left',
+    channel: {} as MessageContextValue['channel'],
+    deliveredToCount: 0,
+    dismissOverlay: jest.fn(),
+    files: [],
+    groupStyles: [],
+    handleAction: jest.fn(),
+    handleToggleReaction: jest.fn(),
+    hasReactions: false,
+    images: [],
+    isMessageAIGenerated: jest.fn(),
+    isMyMessage: false,
+    lastGroupMessage: false,
+    members: {},
+    message: generateMessage({ id: 'shared-message-id' }),
+    messageContentOrder: [],
+    messageHasOnlySingleAttachment: false,
+    messageOverlayId: 'message-overlay-default',
+    onLongPress: jest.fn(),
+    onlyEmojis: false,
+    onOpenThread: jest.fn(),
+    onPress: jest.fn(),
+    onPressIn: null,
+    otherAttachments: [],
+    reactions: [],
+    readBy: false,
+    setQuotedMessage: jest.fn(),
+    showAvatar: false,
+    showMessageOverlay: jest.fn(),
+    showReactionsOverlay: jest.fn(),
+    showMessageStatus: false,
+    threadList: false,
+    videos: [],
+    ...overrides,
+  }) as MessageContextValue;
+
+const createWrapper = (value: MessageContextValue) => {
+  const Wrapper = ({ children }: PropsWithChildren) => (
+    <MessageProvider value={value}>{children}</MessageProvider>
+  );
+
+  return Wrapper;
+};
+
+describe('useShouldUseOverlayStyles', () => {
+  beforeEach(() => {
+    act(() => {
+      finalizeCloseOverlay();
+      overlayStore.next({
+        closing: false,
+        closingPortalHostBlacklist: [],
+        id: undefined,
+        messageId: undefined,
+      });
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+
+    act(() => {
+      finalizeCloseOverlay();
+      overlayStore.next({
+        closing: false,
+        closingPortalHostBlacklist: [],
+        id: undefined,
+        messageId: undefined,
+      });
+    });
+  });
+
+  it('tracks overlay activity by messageOverlayId instead of message.id', () => {
+    const sharedMessage = generateMessage({ id: 'same-message-id' });
+
+    const first = renderHook(() => useShouldUseOverlayStyles(), {
+      wrapper: createWrapper(
+        createMessageContextValue({
+          message: sharedMessage,
+          messageOverlayId: 'message-overlay-first',
+        }),
+      ),
+    });
+
+    const second = renderHook(() => useShouldUseOverlayStyles(), {
+      wrapper: createWrapper(
+        createMessageContextValue({
+          message: sharedMessage,
+          messageOverlayId: 'message-overlay-second',
+        }),
+      ),
+    });
+
+    expect(first.result.current).toBe(false);
+    expect(second.result.current).toBe(false);
+
+    act(() => {
+      openOverlay('message-overlay-first');
+    });
+
+    expect(first.result.current).toBe(true);
+    expect(second.result.current).toBe(false);
+
+    first.unmount();
+    second.unmount();
+  });
+});

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -34,6 +34,7 @@ export const useCreateMessageContext = ({
   lastGroupMessage,
   members,
   message,
+  messageOverlayId,
   messageContentOrder,
   myMessageTheme,
   onLongPress,
@@ -86,6 +87,7 @@ export const useCreateMessageContext = ({
       lastGroupMessage,
       members,
       message,
+      messageOverlayId,
       messageContentOrder,
       myMessageTheme,
       onLongPress,
@@ -117,6 +119,7 @@ export const useCreateMessageContext = ({
       lastGroupMessage,
       membersValue,
       myMessageThemeString,
+      messageOverlayId,
       reactionsValue,
       stringifiedMessage,
       stringifiedQuotedMessage,

package/src/components/Message/hooks/useShouldUseOverlayStyles.ts

@@ -2,8 +2,8 @@ import { useMessageContext } from '../../../contexts';
 import { useIsOverlayActive } from '../../../state-store';
 
 export const useShouldUseOverlayStyles = () => {
-  const { message } = useMessageContext();
-  const { active, closing } = useIsOverlayActive(message?.id);
+  const { messageOverlayId } = useMessageContext();
+  const { active, closing } = useIsOverlayActive(messageOverlayId);
 
   return active && !closing;
 };

package/src/components/MessageInput/CommandChip.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect } from 'react';
+import { StyleSheet } from 'react-native';
+
+import Animated, { LinearTransition, ZoomIn, ZoomOut } from 'react-native-reanimated';
+
+import { textComposerStateSelector } from './utils/messageComposerSelectors';
+
+import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
+import { useStateStore } from '../../hooks/useStateStore';
+import { primitives } from '../../theme';
+import { GiphyChip } from '../ui/GiphyChip';
+
+export const CommandChip = () => {
+  const messageComposer = useMessageComposer();
+  const { textComposer, attachmentManager } = messageComposer;
+  const { command } = useStateStore(textComposer.state, textComposerStateSelector);
+
+  useEffect(() => {
+    if (attachmentManager.state.getLatestValue().attachments.length > 0) {
+      textComposer.clearCommand();
+    }
+  }, [textComposer, attachmentManager]);
+
+  return command ? (
+    <Animated.View
+      entering={ZoomIn.duration(200)}
+      exiting={ZoomOut.duration(200)}
+      layout={LinearTransition.duration(200)}
+      style={styles.giphyContainer}
+    >
+      <GiphyChip />
+    </Animated.View>
+  ) : null;
+};
+
+const styles = StyleSheet.create({
+  giphyContainer: {
+    padding: primitives.spacingSm,
+    alignSelf: 'flex-end',
+  },
+});