fix(FR-791): Add drop container to sender (#3469)

resolves #3468 (FR-791)

# Fix ChatInput component's drop container reference

This PR fixes an issue in the `ChatInput` component by correctly passing the `dropContainerRef` to both the parent `Flex` component and the `ChatSender` component. Previously, the reference was created but not properly attached to the container element, which could affect file drop functionality.

**Changes:**
- Renamed `cardRef` to `dropContainerRef` for better semantic clarity
- Added the ref to the parent `Flex` component
- Passed the same ref to the `ChatSender` component

Author: ragingwind

react/src/components/Chat/ChatCard.tsx

@@ -165,6 +165,7 @@ const ChatCard: React.FC<ChatCardProps> = ({
     styles: { chatCard: chatCardStyle, alert: alertStyle, ...chatCardStyles },
   } = useStyles();
   const formRef = useRef<FormInstance>(null);
+  const dropContainerRef = useRef<HTMLDivElement>(null);
   const [fetchKey, updateFetchKey] = useUpdatableState('first');
   const [startTime, setStartTime] = useState<number | null>(null);
 
@@ -265,6 +266,7 @@ const ChatCard: React.FC<ChatCardProps> = ({
           setMessages={setMessages}
         />
       }
+      ref={dropContainerRef}
     >
       <CustomModelForm
         modelId={modelId}
@@ -299,6 +301,7 @@ const ChatCard: React.FC<ChatCardProps> = ({
         stop={stop}
         append={append}
         isLoading={isLoading}
+        dropContainerRef={dropContainerRef}
       />
     </Card>
   );

react/src/components/Chat/ChatInput.tsx

@@ -1,6 +1,9 @@
 import { createDataTransferFiles } from '../../helper';
 import Flex from '../Flex';
-import ChatSender, { AttachmentChangeInfo } from './ChatSender';
+import ChatSender, {
+  AttachmentChangeInfo,
+  ChatAttachmentsProps,
+} from './ChatSender';
 import { CreateMessage, Message } from '@ai-sdk/react';
 import type { AttachmentsProps } from '@ant-design/x';
 import { ChatRequestOptions } from 'ai';
@@ -21,7 +24,7 @@ interface ChatRequest {
   fetchOnClient?: boolean;
 }
 
-interface ChatInputProps extends ChatRequest {
+interface ChatInputProps extends ChatRequest, ChatAttachmentsProps {
   sync: boolean;
   input: string;
   setInput: (input: string) => void;
@@ -40,6 +43,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
   stop,
   append,
   isLoading,
+  dropContainerRef,
 }) => {
   const { token } = theme.useToken();
 
@@ -50,7 +54,6 @@ const ChatInput: React.FC<ChatInputProps> = ({
 
   const [isOpenAttachments, setIsOpenAttachments] = useState(false);
   const [files, setFiles] = useState<AttachmentsProps['items']>([]);
-  const cardRef = useRef<HTMLDivElement>(null);
 
   const [synchronizedMessage, setSynchronizedMessage] = useAtom(
     synchronizedMessageState,
@@ -202,7 +205,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
           value={input}
           items={files}
           openAttachment={isOpenAttachments}
-          dropContainerRef={cardRef}
+          dropContainerRef={dropContainerRef}
           loading={isLoading}
           onInputChange={handleInputChange}
           onInputSubmit={handleInputSubmit}

react/src/components/Chat/ChatSender.tsx

@@ -11,11 +11,11 @@ import { isEmpty } from 'lodash';
 import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
-interface ChageAttachmentsProps extends AttachmentsProps {
+export interface ChatAttachmentsProps {
   dropContainerRef: React.RefObject<HTMLElement | null>;
 }
 
-const ChatAttachments: React.FC<ChageAttachmentsProps> = ({
+const ChatAttachments: React.FC<ChatAttachmentsProps & AttachmentsProps> = ({
   items,
   onChange,
   dropContainerRef,
@@ -51,12 +51,13 @@ export type AttachmentChangeInfo = Parameters<
   NonNullable<UploadProps['onChange']>
 >[0];
 
-interface ChatSenderProps extends Omit<SenderProps, 'onChange'> {
+interface ChatSenderProps
+  extends Omit<SenderProps, 'onChange'>,
+    ChatAttachmentsProps {
   loading?: boolean;
   autoFocus?: boolean;
   items?: Attachment[];
   openAttachment?: boolean;
-  dropContainerRef: React.RefObject<HTMLDivElement | null>;
   onInputChange?: (value: string) => void;
   onInputSubmit?: () => void;
   onInputCancel?: () => void;