feat: adapt AttachmentSelector contents to Thread

docusaurus/docs/React/components/contexts/message-input-context.mdx

@@ -229,6 +229,14 @@ Function to insert text into the value of the underlying `textarea` component.
 | ------------------------------ |
 | (textToInsert: string) => void |
 
+### isThreadInput
+
+Signals that the MessageInput is rendered in a message thread (Thread component).
+
+| Type    |
+| ------- |
+| boolean |
+
 ### isUploadEnabled
 
 If true, file uploads are enabled in the currently active channel.

docusaurus/docs/React/components/message-input-components/message-input.mdx

@@ -131,6 +131,14 @@ Custom UI component handling how the message input is rendered.
 | --------- | ------------------------------------------------------------------------------------------------------------------------------- |
 | component | [MessageInputFlat](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx) |
 
+### isThreadInput
+
+Signals that the MessageInput is rendered in a message thread (Thread component).
+
+| Type    |
+| ------- |
+| boolean |
+
 ### maxRows
 
 Max number of rows the underlying `textarea` component is allowed to grow.

src/components/MessageInput/AttachmentSelector.tsx

@@ -7,7 +7,12 @@ import { Portal } from '../Portal/Portal';
 import { UploadFileInput } from '../ReactFileUtilities';
 import { DialogAnchor, useDialog, useDialogIsOpen } from '../Dialog';
 import { DialogMenuButton } from '../Dialog/DialogMenu';
-import { useChannelStateContext, useComponentContext, useTranslationContext } from '../../context';
+import {
+  useChannelStateContext,
+  useComponentContext,
+  useMessageInputContext,
+  useTranslationContext,
+} from '../../context';
 import { CHANNEL_CONTAINER_ID } from '../Channel/constants';
 import type { DefaultStreamChatGenerics } from '../../types';
 
@@ -45,12 +50,12 @@ export const AttachmentSelector = <
 >() => {
   const { t } = useTranslationContext('AttachmentSelectorActionsMenu');
   const { channelCapabilities } = useChannelStateContext<StreamChatGenerics>();
-
+  const { isThreadInput } = useMessageInputContext();
   const [fileInput, setFileInput] = useState<HTMLInputElement | null>(null);
 
   const menuButtonRef = useRef<ElementRef<'button'>>(null);
 
-  const menuDialogId = 'attachment-actions-menu';
+  const menuDialogId = `attachment-actions-menu${isThreadInput ? '-thread' : ''}`;
   const menuDialog = useDialog({ id: menuDialogId });
   const menuDialogIsOpen = useDialogIsOpen(menuDialogId);
 
@@ -80,7 +85,7 @@ export const AttachmentSelector = <
       </button>
       <DialogAnchor
         id={menuDialogId}
-        placement='top-end'
+        placement='top-start'
         referenceElement={menuButtonRef.current}
         trapFocus
       >
@@ -96,7 +101,7 @@ export const AttachmentSelector = <
               {t<string>('File')}
             </DialogMenuButton>
           )}
-          {channelCapabilities['send-poll'] && (
+          {!isThreadInput && channelCapabilities['send-poll'] && (
             <DialogMenuButton
               className='str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__create-poll-button'
               onClick={() => {

src/components/MessageInput/MessageInput.tsx

@@ -87,6 +87,8 @@ export type MessageInputProps<
   hideSendButton?: boolean;
   /** Custom UI component handling how the message input is rendered, defaults to and accepts the same props as [MessageInputFlat](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx) */
   Input?: React.ComponentType<MessageInputProps<StreamChatGenerics, V>>;
+  /** Signals that the MessageInput is rendered in a message thread (Thread component) */
+  isThreadInput?: boolean;
   /** Max number of rows the underlying `textarea` component is allowed to grow */
   maxRows?: number;
   /** If true, the suggestion list will search all app users for an @mention, not just current channel members/watchers. Default: false. */
@@ -165,18 +167,21 @@ const UnMemoizedMessageInput = <
   >('MessageInput');
 
   const Input = PropInput || ContextInput || MessageInputFlat;
+  const dialogManagerId = props.isThreadInput
+    ? 'message-input-dialog-manager-thread'
+    : 'message-input-dialog-manager';
 
   if (dragAndDropWindow)
     return (
-      <DialogManagerProvider id='message-input-dialog-manager'>
+      <DialogManagerProvider id={dialogManagerId}>
         <TriggerProvider>
           <Input />
         </TriggerProvider>
       </DialogManagerProvider>
     );
 
   return (
-    <DialogManagerProvider id='message-input-dialog-manager'>
+    <DialogManagerProvider id={dialogManagerId}>
       <MessageInputProvider {...props}>
         <TriggerProvider>
           <Input />

src/components/MessageInput/hooks/useCreateMessageInputContext.ts

@@ -35,6 +35,7 @@ export const useCreateMessageInputContext = <
     handleSubmit,
     hideSendButton,
     insertText,
+    isThreadInput,
     isUploadEnabled,
     linkPreviews,
     maxFilesLeft,
@@ -100,6 +101,7 @@ export const useCreateMessageInputContext = <
       handleSubmit,
       hideSendButton,
       insertText,
+      isThreadInput,
       isUploadEnabled,
       linkPreviews,
       maxFilesLeft,
@@ -147,6 +149,7 @@ export const useCreateMessageInputContext = <
       handleSubmit,
       hideSendButton,
       isUploadEnabled,
+      isThreadInput,
       linkPreviewsValue,
       mentionedUsersLength,
       minRows,

src/components/Thread/Thread.tsx

@@ -198,6 +198,7 @@ const ThreadInner = <
       <MessageInput
         focus={autoFocus}
         Input={ThreadInput}
+        isThreadInput
         parent={thread ?? parentMessage}
         publishTypingEvent={false}
         {...additionalMessageInputProps}