changer drop-container to the top of the chat

Author: ragingwind

react/src/components/Chat/ChatCard.tsx

@@ -170,6 +170,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);
 
@@ -270,6 +271,7 @@ const ChatCard: React.FC<ChatCardProps> = ({
           setMessages={setMessages}
         />
       }
+      ref={dropContainerRef}
     >
       <CustomModelForm
         modelId={modelId}
@@ -304,6 +306,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,
+  ChageAttachmentsProps,
+} 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, ChageAttachmentsProps {
   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();
 
@@ -52,7 +56,6 @@ const ChatInput: React.FC<ChatInputProps> = ({
 
   const [isOpenAttachments, setIsOpenAttachments] = useState(false);
   const [files, setFiles] = useState<AttachmentsProps['items']>([]);
-  const dropContainerRef = useRef<HTMLDivElement>(null);
 
   const [synchronizedMessage, setSynchronizedMessage] = useAtom(
     synchronizedMessageState,
@@ -197,12 +200,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
 
   return (
     <>
-      <Flex
-        style={ChatInputStyle}
-        direction="column"
-        align="center"
-        ref={dropContainerRef}
-      >
+      <Flex style={ChatInputStyle} direction="column" align="center">
         <ChatSender
           placeholder="Say something..."
           autoFocus

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 ChageAttachmentsProps {
   dropContainerRef: React.RefObject<HTMLElement | null>;
 }
 
-const ChatAttachments: React.FC<ChageAttachmentsProps> = ({
+const ChatAttachments: React.FC<ChageAttachmentsProps & 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'>,
+    ChageAttachmentsProps {
   loading?: boolean;
   autoFocus?: boolean;
   items?: Attachment[];
   openAttachment?: boolean;
-  dropContainerRef: React.RefObject<HTMLDivElement | null>;
   onInputChange?: (value: string) => void;
   onInputSubmit?: () => void;
   onInputCancel?: () => void;