Feat: Upload files in the chat box #3221 (#9483)

### What problem does this PR solve?
Feat: Upload files in the chat box #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/next-chats/chat/chat-box/multiple-chat-box.tsx

@@ -16,13 +16,16 @@ import {
   useFetchConversation,
   useFetchDialog,
   useGetChatSearchParams,
+  useSetDialog,
 } from '@/hooks/use-chat-request';
 import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
 import { buildMessageUuidWithRole } from '@/utils/chat';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { isEmpty, omit } from 'lodash';
 import { ListCheck, Plus, Trash2 } from 'lucide-react';
 import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
+import { useParams } from 'umi';
 import { z } from 'zod';
 import {
   useGetSendButtonDisabled,
@@ -47,6 +50,7 @@ type ChatCardProps = {
   id: string;
   idx: number;
   derivedMessages: IMessage[];
+  sendLoading: boolean;
 } & Pick<
   MultipleChatBoxProps,
   'controller' | 'removeChatBox' | 'addChatBox' | 'chatBoxIds'
@@ -61,11 +65,14 @@ const ChatCard = forwardRef(function ChatCard(
     addChatBox,
     chatBoxIds,
     derivedMessages,
+    sendLoading,
   }: ChatCardProps,
   ref,
 ) {
-  const { sendLoading, regenerateMessage, removeMessageById } =
-    useSendMessage(controller);
+  const { id: dialogId } = useParams();
+  const { setDialog } = useSetDialog();
+
+  const { regenerateMessage, removeMessageById } = useSendMessage(controller);
 
   const messageContainerRef = useRef<HTMLDivElement>(null);
 
@@ -80,6 +87,8 @@ const ChatCard = forwardRef(function ChatCard(
     },
   });
 
+  const llmId = useWatch({ control: form.control, name: 'llm_id' });
+
   const { data: userInfo } = useFetchUserInfo();
   const { data: currentDialog } = useFetchDialog();
   const { data: conversation } = useFetchConversation();
@@ -90,6 +99,16 @@ const ChatCard = forwardRef(function ChatCard(
     removeChatBox(id);
   }, [id, removeChatBox]);
 
+  const handleApplyConfig = useCallback(() => {
+    const values = form.getValues();
+    setDialog({
+      ...currentDialog,
+      llm_id: values.llm_id,
+      llm_setting: omit(values, 'llm_id'),
+      dialog_id: dialogId,
+    });
+  }, [currentDialog, dialogId, form, setDialog]);
+
   useImperativeHandle(ref, () => ({
     getFormData: () => form.getValues(),
   }));
@@ -107,7 +126,11 @@ const ChatCard = forwardRef(function ChatCard(
           <div className="space-x-2">
             <Tooltip>
               <TooltipTrigger>
-                <Button variant={'ghost'}>
+                <Button
+                  variant={'ghost'}
+                  disabled={isEmpty(llmId)}
+                  onClick={handleApplyConfig}
+                >
                   <ListCheck />
                 </Button>
               </TooltipTrigger>
@@ -180,6 +203,7 @@ export function MultipleChatBox({
     handlePressEnter,
     stopOutputMessage,
     setFormRef,
+    handleUploadFile,
   } = useSendMultipleChatMessage(controller, chatBoxIds);
 
   const { createConversationBeforeUploadDocument } =
@@ -202,6 +226,7 @@ export function MultipleChatBox({
             addChatBox={addChatBox}
             derivedMessages={messageRecord[id]}
             ref={setFormRef(id)}
+            sendLoading={sendLoading}
           ></ChatCard>
         ))}
       </div>
@@ -218,6 +243,7 @@ export function MultipleChatBox({
             createConversationBeforeUploadDocument
           }
           stopOutputMessage={stopOutputMessage}
+          onUpload={handleUploadFile}
         />
       </div>
     </section>

web/src/pages/next-chats/chat/chat-box/single-chat-box.tsx

@@ -32,6 +32,7 @@ export function SingleChatBox({ controller }: IProps) {
     regenerateMessage,
     removeMessageById,
     stopOutputMessage,
+    handleUploadFile,
   } = useSendMessage(controller);
   const { data: userInfo } = useFetchUserInfo();
   const { data: currentDialog } = useFetchDialog();
@@ -89,6 +90,7 @@ export function SingleChatBox({ controller }: IProps) {
           createConversationBeforeUploadDocument
         }
         stopOutputMessage={stopOutputMessage}
+        onUpload={handleUploadFile}
       />
     </section>
   );

web/src/pages/next-chats/chat/index.tsx

@@ -11,8 +11,13 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { useSetModalState } from '@/hooks/common-hooks';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
-import { useFetchConversation, useFetchDialog } from '@/hooks/use-chat-request';
+import {
+  useFetchConversation,
+  useFetchDialog,
+  useGetChatSearchParams,
+} from '@/hooks/use-chat-request';
 import { cn } from '@/lib/utils';
+import { isEmpty } from 'lodash';
 import { ArrowUpRight, LogOut } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useHandleClickConversationCard } from '../hooks/use-click-card';
@@ -42,6 +47,8 @@ export default function Chat() {
     hasThreeChatBox,
   } = useAddChatBox();
 
+  const { conversationId, isNew } = useGetChatSearchParams();
+
   const { isDebugMode, switchDebugMode } = useSwitchDebugMode();
 
   if (isDebugMode) {
@@ -104,13 +111,17 @@ export default function Chat() {
                   <Button
                     variant={'ghost'}
                     onClick={switchDebugMode}
-                    disabled={hasThreeChatBox}
+                    disabled={
+                      hasThreeChatBox ||
+                      isEmpty(conversationId) ||
+                      isNew === 'true'
+                    }
                   >
                     <ArrowUpRight /> Multiple Models
                   </Button>
                 </CardTitle>
               </CardHeader>
-              <CardContent className="flex-1 p-0">
+              <CardContent className="flex-1 p-0 min-h-0">
                 <SingleChatBox controller={controller}></SingleChatBox>
               </CardContent>
             </Card>