Feat: Users can chat directly without first creating a conversation. #11768 (#11769)

### What problem does this PR solve?

Feat: Users can chat directly without first creating a conversation.
#11768
### Type of change


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

web/src/hooks/logic-hooks.ts

@@ -433,7 +433,7 @@ export const useSelectDerivedMessages = () => {
   );
 
   const addNewestQuestion = useCallback(
-    (message: Message, answer: string = '') => {
+    (message: IMessage, answer: string = '') => {
       setDerivedMessages((pre) => {
         return [
           ...pre,
@@ -446,6 +446,7 @@ export const useSelectDerivedMessages = () => {
           {
             role: MessageType.Assistant,
             content: answer,
+            conversationId: message.conversationId,
             id: buildMessageUuid({ ...message, role: MessageType.Assistant }),
           },
         ];

web/src/hooks/use-chat-request.ts

@@ -16,11 +16,11 @@ import { useGetSharedChatSearchParams } from '@/pages/next-chats/hooks/use-send-
 import { isConversationIdExist } from '@/pages/next-chats/utils';
 import chatService from '@/services/next-chat-service';
 import api from '@/utils/api';
-import { buildMessageListWithUuid, getConversationId } from '@/utils/chat';
+import { buildMessageListWithUuid, generateConversationId } from '@/utils/chat';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useDebounce } from 'ahooks';
 import { has } from 'lodash';
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams, useSearchParams } from 'umi';
 import {
@@ -36,6 +36,7 @@ export const enum ChatApiAction {
   FetchDialog = 'fetchDialog',
   FetchConversationList = 'fetchConversationList',
   FetchConversation = 'fetchConversation',
+  FetchConversationManually = 'fetchConversationManually',
   UpdateConversation = 'updateConversation',
   RemoveConversation = 'removeConversation',
   DeleteMessage = 'deleteMessage',
@@ -59,29 +60,6 @@ export const useGetChatSearchParams = () => {
   };
 };
 
-export const useClickDialogCard = () => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [_, setSearchParams] = useSearchParams();
-
-  const newQueryParameters: URLSearchParams = useMemo(() => {
-    return new URLSearchParams();
-  }, []);
-
-  const handleClickDialog = useCallback(
-    (dialogId: string) => {
-      newQueryParameters.set(ChatSearchParams.DialogId, dialogId);
-      // newQueryParameters.set(
-      //   ChatSearchParams.ConversationId,
-      //   EmptyConversationId,
-      // );
-      setSearchParams(newQueryParameters);
-    },
-    [newQueryParameters, setSearchParams],
-  );
-
-  return { handleClickDialog };
-};
-
 export const useFetchDialogList = () => {
   const { searchString, handleInputChange } = useHandleSearchChange();
   const { pagination, setPagination } = useGetPaginationWithRouter();
@@ -222,28 +200,8 @@ export const useFetchDialog = () => {
 
 //#region Conversation
 
-export const useClickConversationCard = () => {
-  const [currentQueryParameters, setSearchParams] = useSearchParams();
-  const newQueryParameters: URLSearchParams = useMemo(
-    () => new URLSearchParams(currentQueryParameters.toString()),
-    [currentQueryParameters],
-  );
-
-  const handleClickConversation = useCallback(
-    (conversationId: string, isNew: string) => {
-      newQueryParameters.set(ChatSearchParams.ConversationId, conversationId);
-      newQueryParameters.set(ChatSearchParams.isNew, isNew);
-      setSearchParams(newQueryParameters);
-    },
-    [setSearchParams, newQueryParameters],
-  );
-
-  return { handleClickConversation };
-};
-
 export const useFetchConversationList = () => {
   const { id } = useParams();
-  const { handleClickConversation } = useClickConversationCard();
 
   const { searchString, handleInputChange } = useHandleSearchStrChange();
 
@@ -267,13 +225,6 @@ export const useFetchConversationList = () => {
         { params: { dialog_id: id } },
         true,
       );
-      if (data.code === 0) {
-        if (data.data.length > 0) {
-          handleClickConversation(data.data[0].id, '');
-        } else {
-          handleClickConversation('', '');
-        }
-      }
       return data?.data;
     },
   });
@@ -281,45 +232,33 @@ export const useFetchConversationList = () => {
   return { data, loading, refetch, searchString, handleInputChange };
 };
 
-export const useFetchConversation = () => {
-  const { isNew, conversationId } = useGetChatSearchParams();
-  const { sharedId } = useGetSharedChatSearchParams();
+export function useFetchConversationManually() {
   const {
     data,
-    isFetching: loading,
-    refetch,
-  } = useQuery<IClientConversation>({
-    queryKey: [ChatApiAction.FetchConversation, conversationId],
-    initialData: {} as IClientConversation,
-    // enabled: isConversationIdExist(conversationId),
-    gcTime: 0,
-    refetchOnWindowFocus: false,
-    queryFn: async () => {
-      if (
-        isNew !== 'true' &&
-        isConversationIdExist(sharedId || conversationId)
-      ) {
-        const { data } = await chatService.getConversation(
-          {
-            params: {
-              conversationId: conversationId || sharedId,
-            },
+    isPending: loading,
+    mutateAsync,
+  } = useMutation<IClientConversation, unknown, string>({
+    mutationKey: [ChatApiAction.FetchConversationManually],
+    mutationFn: async (conversationId) => {
+      const { data } = await chatService.getConversation(
+        {
+          params: {
+            conversationId,
           },
-          true,
-        );
+        },
+        true,
+      );
 
-        const conversation = data?.data ?? {};
+      const conversation = data?.data ?? {};
 
-        const messageList = buildMessageListWithUuid(conversation?.message);
+      const messageList = buildMessageListWithUuid(conversation?.message);
 
-        return { ...conversation, message: messageList };
-      }
-      return { message: [] };
+      return { ...conversation, message: messageList };
     },
   });
 
-  return { data, loading, refetch };
-};
+  return { data, loading, fetchConversationManually: mutateAsync };
+}
 
 export const useUpdateConversation = () => {
   const { t } = useTranslation();
@@ -335,7 +274,7 @@ export const useUpdateConversation = () => {
         ...params,
         conversation_id: params.conversation_id
           ? params.conversation_id
-          : getConversationId(),
+          : generateConversationId(),
       });
       if (data.code === 0) {
         queryClient.invalidateQueries({

web/src/interfaces/database/chat.ts

@@ -187,6 +187,7 @@ export interface IExternalChatInfo {
 export interface IMessage extends Message {
   id: string;
   reference?: IReference; // the latest news has reference
+  conversationId?: string; // To distinguish which conversation the message belongs to
 }
 
 export interface IClientConversation extends IConversation {

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

@@ -15,12 +15,12 @@ import {
 import { MessageType } from '@/constants/chat';
 import { useScrollToBottom } from '@/hooks/logic-hooks';
 import {
-  useFetchConversation,
   useFetchDialog,
   useGetChatSearchParams,
   useSetDialog,
 } from '@/hooks/use-chat-request';
 import { useFetchUserInfo } from '@/hooks/use-user-setting-request';
+import { IClientConversation, IMessage } from '@/interfaces/database/chat';
 import { buildMessageUuidWithRole } from '@/utils/chat';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { t } from 'i18next';
@@ -38,13 +38,14 @@ import { useCreateConversationBeforeUploadDocument } from '../../hooks/use-creat
 import { useSendMessage } from '../../hooks/use-send-chat-message';
 import { useSendMultipleChatMessage } from '../../hooks/use-send-multiple-message';
 import { buildMessageItemReference } from '../../utils';
-import { IMessage } from '../interface';
 import { useAddChatBox } from '../use-add-box';
+import { useSetDefaultModel } from './use-set-default-model';
 
 type MultipleChatBoxProps = {
   controller: AbortController;
   chatBoxIds: string[];
   stopOutputMessage(): void;
+  conversation: IClientConversation;
 } & Pick<
   ReturnType<typeof useAddChatBox>,
   'removeChatBox' | 'addChatBox' | 'chatBoxIds'
@@ -55,6 +56,7 @@ type ChatCardProps = {
   idx: number;
   derivedMessages: IMessage[];
   sendLoading: boolean;
+  conversation: IClientConversation;
 } & Pick<
   MultipleChatBoxProps,
   'controller' | 'removeChatBox' | 'addChatBox' | 'chatBoxIds'
@@ -72,6 +74,7 @@ const ChatCard = forwardRef(function ChatCard(
     derivedMessages,
     sendLoading,
     clickDocumentButton,
+    conversation,
   }: ChatCardProps,
   ref,
 ) {
@@ -97,7 +100,8 @@ const ChatCard = forwardRef(function ChatCard(
 
   const { data: userInfo } = useFetchUserInfo();
   const { data: currentDialog } = useFetchDialog();
-  const { data: conversation } = useFetchConversation();
+
+  useSetDefaultModel(form);
 
   const isLatestChat = idx === chatBoxIds.length - 1;
 
@@ -202,6 +206,7 @@ export function MultipleChatBox({
   removeChatBox,
   addChatBox,
   stopOutputMessage,
+  conversation,
 }: MultipleChatBoxProps) {
   const {
     value,
@@ -237,6 +242,7 @@ export function MultipleChatBox({
             ref={setFormRef(id)}
             sendLoading={sendLoading}
             clickDocumentButton={clickDocumentButton}
+            conversation={conversation}
           ></ChatCard>
         ))}
       </div>

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

@@ -4,12 +4,13 @@ import PdfSheet from '@/components/pdf-drawer';
 import { useClickDrawer } from '@/components/pdf-drawer/hooks';
 import { MessageType } from '@/constants/chat';
 import {
-  useFetchConversation,
   useFetchDialog,
   useGetChatSearchParams,
 } from '@/hooks/use-chat-request';
 import { useFetchUserInfo } from '@/hooks/use-user-setting-request';
+import { IClientConversation } from '@/interfaces/database/chat';
 import { buildMessageUuidWithRole } from '@/utils/chat';
+import { useEffect } from 'react';
 import {
   useGetSendButtonDisabled,
   useSendButtonDisabled,
@@ -21,9 +22,14 @@ import { buildMessageItemReference } from '../../utils';
 interface IProps {
   controller: AbortController;
   stopOutputMessage(): void;
+  conversation: IClientConversation;
 }
 
-export function SingleChatBox({ controller, stopOutputMessage }: IProps) {
+export function SingleChatBox({
+  controller,
+  stopOutputMessage,
+  conversation,
+}: IProps) {
   const {
     value,
     scrollRef,
@@ -37,18 +43,32 @@ export function SingleChatBox({ controller, stopOutputMessage }: IProps) {
     removeMessageById,
     handleUploadFile,
     removeFile,
+    setDerivedMessages,
   } = useSendMessage(controller);
   const { data: userInfo } = useFetchUserInfo();
   const { data: currentDialog } = useFetchDialog();
   const { createConversationBeforeUploadDocument } =
     useCreateConversationBeforeUploadDocument();
   const { conversationId } = useGetChatSearchParams();
-  const { data: conversation } = useFetchConversation();
   const disabled = useGetSendButtonDisabled();
   const sendDisabled = useSendButtonDisabled(value);
   const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
     useClickDrawer();
 
+  useEffect(() => {
+    const messages = conversation?.message;
+    if (Array.isArray(messages)) {
+      setDerivedMessages(messages);
+    }
+  }, [conversation?.message, setDerivedMessages]);
+
+  useEffect(() => {
+    // Clear the message list after deleting the conversation.
+    if (conversationId === '') {
+      setDerivedMessages([]);
+    }
+  }, [conversationId, setDerivedMessages]);
+
   return (
     <section className="flex flex-col p-5 h-full">
       <div ref={messageContainerRef} className="flex-1 overflow-auto min-h-0">

web/src/pages/next-chats/chat/chat-box/use-set-default-model.ts

@@ -0,0 +1,18 @@
+import { LlmModelType } from '@/constants/knowledge';
+import { useComposeLlmOptionsByModelTypes } from '@/hooks/use-llm-request';
+import { useMount } from 'ahooks';
+import { UseFormReturn } from 'react-hook-form';
+
+export function useSetDefaultModel(form: UseFormReturn<any>) {
+  const modelOptions = useComposeLlmOptionsByModelTypes([
+    LlmModelType.Chat,
+    LlmModelType.Image2text,
+  ]);
+
+  useMount(() => {
+    const firstModel = modelOptions.at(0)?.options.at(0)?.value;
+    if (firstModel) {
+      form.setValue('llm_id', firstModel);
+    }
+  });
+}

web/src/pages/next-chats/chat/conversation-dropdown.tsx

@@ -5,11 +5,15 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { useRemoveConversation } from '@/hooks/use-chat-request';
+import {
+  useGetChatSearchParams,
+  useRemoveConversation,
+} from '@/hooks/use-chat-request';
 import { IConversation } from '@/interfaces/database/chat';
 import { Trash2 } from 'lucide-react';
 import { MouseEventHandler, PropsWithChildren, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useChatUrlParams } from '../hooks/use-chat-url';
 
 export function ConversationDropdown({
   children,
@@ -20,22 +24,27 @@ export function ConversationDropdown({
   removeTemporaryConversation?: (conversationId: string) => void;
 }) {
   const { t } = useTranslation();
-
+  const { setConversationBoth } = useChatUrlParams();
   const { removeConversation } = useRemoveConversation();
+  const { isNew } = useGetChatSearchParams();
 
-  const handleDelete: MouseEventHandler<HTMLDivElement> = useCallback(() => {
-    if (conversation.is_new && removeTemporaryConversation) {
-      removeTemporaryConversation(conversation.id);
-      removeConversation([]);
-    } else {
-      removeConversation([conversation.id]);
-    }
-  }, [
-    conversation.id,
-    conversation.is_new,
-    removeConversation,
-    removeTemporaryConversation,
-  ]);
+  const handleDelete: MouseEventHandler<HTMLDivElement> =
+    useCallback(async () => {
+      if (isNew === 'true' && removeTemporaryConversation) {
+        removeTemporaryConversation(conversation.id);
+      } else {
+        const code = await removeConversation([conversation.id]);
+        if (code === 0) {
+          setConversationBoth('', '');
+        }
+      }
+    }, [
+      conversation.id,
+      isNew,
+      removeConversation,
+      removeTemporaryConversation,
+      setConversationBoth,
+    ]);
 
   return (
     <DropdownMenu>

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

@@ -15,13 +15,17 @@ import { SharedFrom } from '@/constants/chat';
 import { useSetModalState } from '@/hooks/common-hooks';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import {
-  useFetchConversation,
+  useFetchConversationList,
+  useFetchConversationManually,
   useFetchDialog,
   useGetChatSearchParams,
 } from '@/hooks/use-chat-request';
+import { IClientConversation } from '@/interfaces/database/chat';
 import { cn } from '@/lib/utils';
+import { useMount } from 'ahooks';
 import { isEmpty } from 'lodash';
 import { ArrowUpRight, LogOut, Send } from 'lucide-react';
+import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'umi';
 import { useHandleClickConversationCard } from '../hooks/use-click-card';
@@ -37,26 +41,54 @@ export default function Chat() {
   const { navigateToChatList } = useNavigatePage();
   const { data } = useFetchDialog();
   const { t } = useTranslation();
-  const { data: conversation } = useFetchConversation();
+  const [currentConversation, setCurrentConversation] =
+    useState<IClientConversation>({} as IClientConversation);
+
+  const { fetchConversationManually } = useFetchConversationManually();
 
   const { handleConversationCardClick, controller, stopOutputMessage } =
     useHandleClickConversationCard();
   const { visible: settingVisible, switchVisible: switchSettingVisible } =
     useSetModalState(true);
-  const {
-    removeChatBox,
-    addChatBox,
-    chatBoxIds,
-    hasSingleChatBox,
-    hasThreeChatBox,
-  } = useAddChatBox();
+
+  const { isDebugMode, switchDebugMode } = useSwitchDebugMode();
+  const { removeChatBox, addChatBox, chatBoxIds, hasSingleChatBox } =
+    useAddChatBox(isDebugMode);
 
   const { showEmbedModal, hideEmbedModal, embedVisible, beta } =
     useShowEmbedModal();
 
   const { conversationId, isNew } = useGetChatSearchParams();
 
-  const { isDebugMode, switchDebugMode } = useSwitchDebugMode();
+  const { data: dialogList } = useFetchConversationList();
+
+  const currentConversationName = useMemo(() => {
+    return dialogList.find((x) => x.id === conversationId)?.name;
+  }, [conversationId, dialogList]);
+
+  const fetchConversation: typeof handleConversationCardClick = useCallback(
+    async (conversationId, isNew) => {
+      if (conversationId && !isNew) {
+        const conversation = await fetchConversationManually(conversationId);
+        if (!isEmpty(conversation)) {
+          setCurrentConversation(conversation);
+        }
+      }
+    },
+    [fetchConversationManually],
+  );
+
+  const handleSessionClick: typeof handleConversationCardClick = useCallback(
+    (conversationId, isNew) => {
+      handleConversationCardClick(conversationId, isNew);
+      fetchConversation(conversationId, isNew);
+    },
+    [fetchConversation, handleConversationCardClick],
+  );
+
+  useMount(() => {
+    fetchConversation(conversationId, isNew === 'true');
+  });
 
   if (isDebugMode) {
     return (
@@ -75,6 +107,7 @@ export default function Chat() {
           removeChatBox={removeChatBox}
           addChatBox={addChatBox}
           stopOutputMessage={stopOutputMessage}
+          conversation={currentConversation}
         ></MultipleChatBox>
       </section>
     );
@@ -104,7 +137,7 @@ export default function Chat() {
       <div className="flex flex-1 min-h-0 pb-9">
         <Sessions
           hasSingleChatBox={hasSingleChatBox}
-          handleConversationCardClick={handleConversationCardClick}
+          handleConversationCardClick={handleSessionClick}
           switchSettingVisible={switchSettingVisible}
         ></Sessions>
 
@@ -115,16 +148,8 @@ export default function Chat() {
                 className={cn('p-5', { 'border-b': hasSingleChatBox })}
               >
                 <CardTitle className="flex justify-between items-center text-base">
-                  <div className="truncate">{conversation.name}</div>
-                  <Button
-                    variant={'ghost'}
-                    onClick={switchDebugMode}
-                    disabled={
-                      hasThreeChatBox ||
-                      isEmpty(conversationId) ||
-                      isNew === 'true'
-                    }
-                  >
+                  <div className="truncate">{currentConversationName}</div>
+                  <Button variant={'ghost'} onClick={switchDebugMode}>
                     <ArrowUpRight /> {t('chat.multipleModels')}
                   </Button>
                 </CardTitle>
@@ -133,6 +158,7 @@ export default function Chat() {
                 <SingleChatBox
                   controller={controller}
                   stopOutputMessage={stopOutputMessage}
+                  conversation={currentConversation}
                 ></SingleChatBox>
               </CardContent>
             </Card>

web/src/pages/next-chats/chat/use-add-box.ts

@@ -1,7 +1,7 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { v4 as uuid } from 'uuid';
 
-export function useAddChatBox() {
+export function useAddChatBox(isDebugMode: boolean) {
   const [ids, setIds] = useState<string[]>([uuid()]);
 
   const hasSingleChatBox = ids.length === 1;
@@ -16,6 +16,12 @@ export function useAddChatBox() {
     setIds((prev) => prev.filter((x) => x !== id));
   }, []);
 
+  useEffect(() => {
+    if (!isDebugMode) {
+      setIds((pre) => pre.slice(0, 1));
+    }
+  }, [isDebugMode]);
+
   return {
     chatBoxIds: ids,
     hasSingleChatBox,

web/src/pages/next-chats/hooks/use-button-disabled.tsx

@@ -1,12 +1,10 @@
-import { useGetChatSearchParams } from '@/hooks/use-chat-request';
 import { trim } from 'lodash';
 import { useParams } from 'umi';
 
 export const useGetSendButtonDisabled = () => {
-  const { conversationId } = useGetChatSearchParams();
   const { id: dialogId } = useParams();
 
-  return dialogId === '' || conversationId === '';
+  return dialogId === '';
 };
 
 export const useSendButtonDisabled = (value: string) => {

web/src/pages/next-chats/hooks/use-chat-url.ts

@@ -0,0 +1,97 @@
+import { ChatSearchParams } from '@/constants/chat';
+import { useGetChatSearchParams } from '@/hooks/use-chat-request';
+import { IMessage } from '@/interfaces/database/chat';
+import { generateConversationId } from '@/utils/chat';
+import { useCallback, useMemo } from 'react';
+import { useSearchParams } from 'umi';
+import { useSetConversation } from './use-set-conversation';
+
+/**
+ * Consolidated hook for managing chat URL parameters (conversationId and isNew)
+ * Replaces: useClickConversationCard from use-chat-request.ts and useSetChatRouteParams from use-set-chat-route.ts
+ */
+export const useChatUrlParams = () => {
+  const [currentQueryParameters, setSearchParams] = useSearchParams();
+  const newQueryParameters: URLSearchParams = useMemo(
+    () => new URLSearchParams(currentQueryParameters.toString()),
+    [currentQueryParameters],
+  );
+
+  const setConversationId = useCallback(
+    (conversationId: string) => {
+      newQueryParameters.set(ChatSearchParams.ConversationId, conversationId);
+      setSearchParams(newQueryParameters);
+    },
+    [setSearchParams, newQueryParameters],
+  );
+
+  const setIsNew = useCallback(
+    (isNew: string) => {
+      newQueryParameters.set(ChatSearchParams.isNew, isNew);
+      setSearchParams(newQueryParameters);
+    },
+    [setSearchParams, newQueryParameters],
+  );
+
+  const getIsNew = useCallback(() => {
+    return newQueryParameters.get(ChatSearchParams.isNew);
+  }, [newQueryParameters]);
+
+  const setConversationBoth = useCallback(
+    (conversationId: string, isNew: string) => {
+      newQueryParameters.set(ChatSearchParams.ConversationId, conversationId);
+      newQueryParameters.set(ChatSearchParams.isNew, isNew);
+      setSearchParams(newQueryParameters);
+    },
+    [setSearchParams, newQueryParameters],
+  );
+
+  return {
+    setConversationId,
+    setIsNew,
+    getIsNew,
+    setConversationBoth,
+  };
+};
+
+export function useCreateConversationBeforeSendMessage() {
+  const { conversationId, isNew } = useGetChatSearchParams();
+  const { setConversation } = useSetConversation();
+  const { setIsNew, setConversationBoth } = useChatUrlParams();
+
+  // Create conversation if it doesn't exist
+  const createConversationBeforeSendMessage = useCallback(
+    async (value: string) => {
+      let currentMessages: Array<IMessage> = [];
+      const currentConversationId = generateConversationId();
+      if (conversationId === '' || isNew === 'true') {
+        if (conversationId === '') {
+          setConversationBoth(currentConversationId, 'true');
+        }
+        const data = await setConversation(
+          value,
+          true,
+          conversationId || currentConversationId,
+        );
+        if (data.code !== 0) {
+          return;
+        } else {
+          setIsNew('');
+          currentMessages = data.data.message;
+        }
+      }
+
+      const targetConversationId = conversationId || currentConversationId;
+
+      return {
+        targetConversationId,
+        currentMessages,
+      };
+    },
+    [conversationId, isNew, setConversation, setConversationBoth, setIsNew],
+  );
+
+  return {
+    createConversationBeforeSendMessage,
+  };
+}

web/src/pages/next-chats/hooks/use-click-card.ts

@@ -1,9 +1,9 @@
-import { useClickConversationCard } from '@/hooks/use-chat-request';
 import { useCallback, useState } from 'react';
+import { useChatUrlParams } from './use-chat-url';
 
 export function useHandleClickConversationCard() {
   const [controller, setController] = useState(new AbortController());
-  const { handleClickConversation } = useClickConversationCard();
+  const { setConversationBoth } = useChatUrlParams();
 
   const stopOutputMessage = useCallback(() => {
     setController((pre) => {
@@ -14,10 +14,10 @@ export function useHandleClickConversationCard() {
 
   const handleConversationCardClick = useCallback(
     (conversationId: string, isNew: boolean) => {
-      handleClickConversation(conversationId, isNew ? 'true' : '');
+      setConversationBoth(conversationId, isNew ? 'true' : '');
       stopOutputMessage();
     },
-    [handleClickConversation, stopOutputMessage],
+    [setConversationBoth, stopOutputMessage],
   );
 
   return { controller, handleConversationCardClick, stopOutputMessage };

web/src/pages/next-chats/hooks/use-create-conversation.ts

@@ -1,23 +1,23 @@
 import { useCallback } from 'react';
 import { useParams } from 'umi';
-import { useSetChatRouteParams } from './use-set-chat-route';
+import { useChatUrlParams } from './use-chat-url';
 import { useSetConversation } from './use-set-conversation';
 
 export const useCreateConversationBeforeUploadDocument = () => {
   const { setConversation } = useSetConversation();
   const { id: dialogId } = useParams();
-  const { getConversationIsNew } = useSetChatRouteParams();
+  const { getIsNew } = useChatUrlParams();
 
   const createConversationBeforeUploadDocument = useCallback(
     async (message: string) => {
-      const isNew = getConversationIsNew();
+      const isNew = getIsNew();
       if (isNew === 'true') {
         const data = await setConversation(message, true);
 
         return data;
       }
     },
-    [setConversation, getConversationIsNew],
+    [setConversation, getIsNew],
   );
 
   return {

web/src/pages/next-chats/hooks/use-select-conversation-list.ts

@@ -1,13 +1,14 @@
-import { ChatSearchParams, MessageType } from '@/constants/chat';
+import { MessageType } from '@/constants/chat';
 import { useTranslate } from '@/hooks/common-hooks';
 import {
   useFetchConversationList,
   useFetchDialogList,
 } from '@/hooks/use-chat-request';
 import { IConversation } from '@/interfaces/database/chat';
-import { getConversationId } from '@/utils/chat';
+import { generateConversationId } from '@/utils/chat';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useParams, useSearchParams } from 'umi';
+import { useParams } from 'umi';
+import { useChatUrlParams } from './use-chat-url';
 
 export const useFindPrologueFromDialogList = () => {
   const { id: dialogId } = useParams();
@@ -20,25 +21,6 @@ export const useFindPrologueFromDialogList = () => {
   return prologue;
 };
 
-export const useSetNewConversationRouteParams = () => {
-  const [currentQueryParameters, setSearchParams] = useSearchParams();
-  const newQueryParameters: URLSearchParams = useMemo(
-    () => new URLSearchParams(currentQueryParameters.toString()),
-    [currentQueryParameters],
-  );
-
-  const setNewConversationRouteParams = useCallback(
-    (conversationId: string, isNew: string) => {
-      newQueryParameters.set(ChatSearchParams.ConversationId, conversationId);
-      newQueryParameters.set(ChatSearchParams.isNew, isNew);
-      setSearchParams(newQueryParameters);
-    },
-    [newQueryParameters, setSearchParams],
-  );
-
-  return { setNewConversationRouteParams };
-};
-
 export const useSelectDerivedConversationList = () => {
   const { t } = useTranslate('chat');
 
@@ -49,15 +31,16 @@ export const useSelectDerivedConversationList = () => {
     handleInputChange,
     searchString,
   } = useFetchConversationList();
+
   const { id: dialogId } = useParams();
-  const { setNewConversationRouteParams } = useSetNewConversationRouteParams();
   const prologue = useFindPrologueFromDialogList();
+  const { setConversationBoth } = useChatUrlParams();
 
   const addTemporaryConversation = useCallback(() => {
-    const conversationId = getConversationId();
+    const conversationId = generateConversationId();
     setList((pre) => {
       if (dialogId) {
-        setNewConversationRouteParams(conversationId, 'true');
+        setConversationBoth(conversationId, 'true');
         const nextList = [
           {
             id: conversationId,
@@ -78,7 +61,7 @@ export const useSelectDerivedConversationList = () => {
 
       return pre;
     });
-  }, [conversationList, dialogId, prologue, t, setNewConversationRouteParams]);
+  }, [dialogId, setConversationBoth, t, prologue, conversationList]);
 
   const removeTemporaryConversation = useCallback((conversationId: string) => {
     setList((prevList) => {

web/src/pages/next-chats/hooks/use-send-chat-message.ts

@@ -1,4 +1,3 @@
-import { FileUploadProps } from '@/components/file-upload';
 import { MessageType } from '@/constants/chat';
 import {
   useHandleMessageInputChange,
@@ -6,19 +5,15 @@ import {
   useSelectDerivedMessages,
   useSendMessageWithSse,
 } from '@/hooks/logic-hooks';
-import {
-  useFetchConversation,
-  useGetChatSearchParams,
-} from '@/hooks/use-chat-request';
-import { IMessage, Message } from '@/interfaces/database/chat';
+import { useGetChatSearchParams } from '@/hooks/use-chat-request';
+import { IMessage } from '@/interfaces/database/chat';
 import api from '@/utils/api';
 import { trim } from 'lodash';
 import { useCallback, useEffect } from 'react';
 import { useParams } from 'umi';
 import { v4 as uuid } from 'uuid';
+import { useCreateConversationBeforeSendMessage } from './use-chat-url';
 import { useFindPrologueFromDialogList } from './use-select-conversation-list';
-import { useSetChatRouteParams } from './use-set-chat-route';
-import { useSetConversation } from './use-set-conversation';
 import { useUploadFile } from './use-upload-file';
 
 export const useSelectNextMessages = () => {
@@ -33,8 +28,7 @@ export const useSelectNextMessages = () => {
     removeMessageById,
     removeMessagesAfterCurrentMessage,
   } = useSelectDerivedMessages();
-  const { data: conversation, loading } = useFetchConversation();
-  const { conversationId, isNew } = useGetChatSearchParams();
+  const { isNew, conversationId } = useGetChatSearchParams();
   const { id: dialogId } = useParams();
   const prologue = useFindPrologueFromDialogList();
 
@@ -44,45 +38,31 @@ export const useSelectNextMessages = () => {
         role: MessageType.Assistant,
         content: prologue,
         id: uuid(),
+        conversationId: conversationId,
       } as IMessage;
 
       setDerivedMessages([nextMessage]);
     }
-  }, [dialogId, isNew, prologue, setDerivedMessages]);
+  }, [conversationId, dialogId, isNew, prologue, setDerivedMessages]);
 
   useEffect(() => {
     addPrologue();
   }, [addPrologue]);
 
-  useEffect(() => {
-    if (
-      conversationId &&
-      isNew !== 'true' &&
-      conversation.message?.length > 0
-    ) {
-      setDerivedMessages(conversation.message);
-    }
-
-    if (!conversationId) {
-      setDerivedMessages([]);
-    }
-  }, [conversation.message, conversationId, setDerivedMessages, isNew]);
-
   return {
     scrollRef,
     messageContainerRef,
     derivedMessages,
-    loading,
     addNewestAnswer,
     addNewestQuestion,
     removeLatestMessage,
     removeMessageById,
     removeMessagesAfterCurrentMessage,
+    setDerivedMessages,
   };
 };
 
 export const useSendMessage = (controller: AbortController) => {
-  const { setConversation } = useSetConversation();
   const { conversationId, isNew } = useGetChatSearchParams();
   const { handleInputChange, value, setValue } = useHandleMessageInputChange();
 
@@ -96,31 +76,13 @@ export const useSendMessage = (controller: AbortController) => {
     scrollRef,
     messageContainerRef,
     derivedMessages,
-    loading,
     addNewestAnswer,
     addNewestQuestion,
     removeLatestMessage,
     removeMessageById,
     removeMessagesAfterCurrentMessage,
+    setDerivedMessages,
   } = useSelectNextMessages();
-  const { setConversationIsNew, getConversationIsNew } =
-    useSetChatRouteParams();
-
-  const onUploadFile: NonNullable<FileUploadProps['onUpload']> = useCallback(
-    async (files, options) => {
-      const isNew = getConversationIsNew();
-
-      if (isNew === 'true' && Array.isArray(files) && files.length) {
-        const data = await setConversation(files[0].name, true);
-        if (data.code === 0) {
-          handleUploadFile(files, options, data.data?.id);
-        }
-      } else {
-        handleUploadFile(files, options);
-      }
-    },
-    [getConversationIsNew, handleUploadFile, setConversation],
-  );
 
   const sendMessage = useCallback(
     async ({
@@ -128,14 +90,19 @@ export const useSendMessage = (controller: AbortController) => {
       currentConversationId,
       messages,
     }: {
-      message: Message;
+      message: IMessage;
       currentConversationId?: string;
-      messages?: Message[];
+      messages?: IMessage[];
     }) => {
       const res = await send(
         {
           conversation_id: currentConversationId ?? conversationId,
-          messages: [...(messages ?? derivedMessages ?? []), message],
+          messages: [
+            ...(Array.isArray(messages) && messages?.length > 0
+              ? messages
+              : derivedMessages ?? []),
+            message,
+          ],
         },
         controller,
       );
@@ -157,44 +124,62 @@ export const useSendMessage = (controller: AbortController) => {
     ],
   );
 
-  const handleSendMessage = useCallback(
-    async (message: Message) => {
-      const isNew = getConversationIsNew();
-      if (isNew !== 'true') {
-        sendMessage({ message });
-      } else {
-        const data = await setConversation(
-          message.content,
-          true,
-          conversationId,
-        );
-        if (data.code === 0) {
-          setConversationIsNew('');
-          const id = data.data.id;
-          // currentConversationIdRef.current = id;
-          sendMessage({
-            message,
-            currentConversationId: id,
-            messages: data.data.message,
-          });
-        }
-      }
-    },
-    [
-      setConversation,
-      sendMessage,
-      setConversationIsNew,
-      getConversationIsNew,
-      conversationId,
-    ],
-  );
-
   const { regenerateMessage } = useRegenerateMessage({
     removeMessagesAfterCurrentMessage,
     sendMessage,
     messages: derivedMessages,
   });
 
+  const { createConversationBeforeSendMessage } =
+    useCreateConversationBeforeSendMessage();
+
+  const handlePressEnter = useCallback(async () => {
+    if (trim(value) === '') return;
+
+    const data = await createConversationBeforeSendMessage(value);
+
+    if (data === undefined) {
+      return;
+    }
+
+    const { targetConversationId, currentMessages } = data;
+
+    const id = uuid();
+
+    addNewestQuestion({
+      content: value,
+      files: files,
+      id,
+      role: MessageType.User,
+      conversationId: targetConversationId,
+    });
+
+    if (done) {
+      setValue('');
+      sendMessage({
+        currentConversationId: targetConversationId,
+        messages: currentMessages,
+        message: {
+          id,
+          content: value.trim(),
+          role: MessageType.User,
+          files: files,
+          conversationId: targetConversationId,
+        },
+      });
+    }
+    clearFiles();
+  }, [
+    value,
+    createConversationBeforeSendMessage,
+    addNewestQuestion,
+    files,
+    done,
+    clearFiles,
+    setValue,
+    sendMessage,
+  ]);
+
   useEffect(() => {
     //  #1289
     if (answer.answer && conversationId && isNew !== 'true') {
@@ -202,36 +187,6 @@ export const useSendMessage = (controller: AbortController) => {
     }
   }, [answer, addNewestAnswer, conversationId, isNew]);
 
-  const handlePressEnter = useCallback(() => {
-    if (trim(value) === '') return;
-    const id = uuid();
-
-    addNewestQuestion({
-      content: value,
-      files: files,
-      id,
-      role: MessageType.User,
-    });
-    if (done) {
-      setValue('');
-      handleSendMessage({
-        id,
-        content: value.trim(),
-        role: MessageType.User,
-        files: files,
-      });
-    }
-    clearFiles();
-  }, [
-    value,
-    addNewestQuestion,
-    files,
-    done,
-    clearFiles,
-    setValue,
-    handleSendMessage,
-  ]);
-
   return {
     handlePressEnter,
     handleInputChange,
@@ -239,13 +194,13 @@ export const useSendMessage = (controller: AbortController) => {
     setValue,
     regenerateMessage,
     sendLoading: !done,
-    loading,
     scrollRef,
     messageContainerRef,
     derivedMessages,
     removeMessageById,
-    handleUploadFile: onUploadFile,
+    handleUploadFile,
     isUploading,
     removeFile,
+    setDerivedMessages,
   };
 };

web/src/pages/next-chats/hooks/use-send-multiple-message.ts

@@ -12,6 +12,7 @@ import { trim } from 'lodash';
 import { useCallback, useEffect, useState } from 'react';
 import { v4 as uuid } from 'uuid';
 import { useBuildFormRefs } from './use-build-form-refs';
+import { useCreateConversationBeforeSendMessage } from './use-chat-url';
 import { useUploadFile } from './use-upload-file';
 
 export function useSendMultipleChatMessage(
@@ -29,7 +30,11 @@ export function useSendMultipleChatMessage(
     api.completeConversation,
   );
 
-  const { handleUploadFile, files, clearFiles } = useUploadFile();
+  const { handleUploadFile, isUploading, files, clearFiles, removeFile } =
+    useUploadFile();
+
+  const { createConversationBeforeSendMessage } =
+    useCreateConversationBeforeSendMessage();
 
   const { setFormRef, getLLMConfigById, isLLMConfigEmpty } =
     useBuildFormRefs(chatBoxIds);
@@ -170,10 +175,18 @@ export function useSendMultipleChatMessage(
     ],
   );
 
-  const handlePressEnter = useCallback(() => {
+  const handlePressEnter = useCallback(async () => {
     if (trim(value) === '') return;
     const id = uuid();
 
+    const data = await createConversationBeforeSendMessage(value);
+
+    if (data === undefined) {
+      return;
+    }
+
+    const { targetConversationId, currentMessages } = data;
+
     chatBoxIds.forEach((chatBoxId) => {
       if (!isLLMConfigEmpty(chatBoxId)) {
         addNewestQuestion({
@@ -182,6 +195,7 @@ export function useSendMultipleChatMessage(
           role: MessageType.User,
           chatBoxId,
           files,
+          conversationId: targetConversationId,
         });
       }
     });
@@ -196,8 +210,11 @@ export function useSendMultipleChatMessage(
               content: value.trim(),
               role: MessageType.User,
               files,
+              conversationId: targetConversationId,
             },
             chatBoxId,
+            currentConversationId: targetConversationId,
+            messages: currentMessages,
           });
         }
       });
@@ -205,6 +222,7 @@ export function useSendMultipleChatMessage(
     clearFiles();
   }, [
     value,
+    createConversationBeforeSendMessage,
     chatBoxIds,
     allDone,
     clearFiles,
@@ -234,5 +252,7 @@ export function useSendMultipleChatMessage(
     sendLoading: !allDone,
     setFormRef,
     handleUploadFile,
+    isUploading,
+    removeFile,
   };
 }

web/src/pages/next-chats/hooks/use-set-chat-route.ts

@@ -1,25 +0,0 @@
-import { ChatSearchParams } from '@/constants/chat';
-import { useCallback, useMemo } from 'react';
-import { useSearchParams } from 'umi';
-
-export const useSetChatRouteParams = () => {
-  const [currentQueryParameters, setSearchParams] = useSearchParams();
-  const newQueryParameters: URLSearchParams = useMemo(
-    () => new URLSearchParams(currentQueryParameters.toString()),
-    [currentQueryParameters],
-  );
-
-  const setConversationIsNew = useCallback(
-    (value: string) => {
-      newQueryParameters.set(ChatSearchParams.isNew, value);
-      setSearchParams(newQueryParameters);
-    },
-    [newQueryParameters, setSearchParams],
-  );
-
-  const getConversationIsNew = useCallback(() => {
-    return newQueryParameters.get(ChatSearchParams.isNew);
-  }, [newQueryParameters]);
-
-  return { setConversationIsNew, getConversationIsNew };
-};

web/src/pages/next-chats/hooks/use-set-conversation.ts

@@ -22,6 +22,7 @@ export const useSetConversation = () => {
           {
             role: MessageType.Assistant,
             content: message,
+            conversationId,
           },
         ],
       });

web/src/pages/next-chats/hooks/use-upload-file.ts

@@ -1,6 +1,12 @@
 import { FileUploadProps } from '@/components/file-upload';
-import { useUploadAndParseFile } from '@/hooks/use-chat-request';
+import {
+  useGetChatSearchParams,
+  useUploadAndParseFile,
+} from '@/hooks/use-chat-request';
+import { generateConversationId } from '@/utils/chat';
 import { useCallback, useState } from 'react';
+import { useChatUrlParams } from './use-chat-url';
+import { useSetConversation } from './use-set-conversation';
 
 export function useUploadFile() {
   const { uploadAndParseFile, loading, cancel } = useUploadAndParseFile();
@@ -8,6 +14,9 @@ export function useUploadFile() {
   const [fileMap, setFileMap] = useState<Map<File, Record<string, any>>>(
     new Map(),
   );
+  const { setConversation } = useSetConversation();
+  const { conversationId, isNew } = useGetChatSearchParams();
+  const { setIsNew, setConversationBoth } = useChatUrlParams();
 
   type FileUploadParameters = Parameters<
     NonNullable<FileUploadProps['onUpload']>
@@ -35,6 +44,44 @@ export function useUploadFile() {
     [uploadAndParseFile],
   );
 
+  const createConversationBeforeUploadFile: NonNullable<
+    FileUploadProps['onUpload']
+  > = useCallback(
+    async (files, options) => {
+      if (
+        (conversationId === '' || isNew === 'true') &&
+        Array.isArray(files) &&
+        files.length
+      ) {
+        const currentConversationId = generateConversationId();
+
+        if (conversationId === '') {
+          setConversationBoth(currentConversationId, 'true');
+        }
+
+        const data = await setConversation(
+          files[0].name,
+          true,
+          conversationId || currentConversationId,
+        );
+        if (data.code === 0) {
+          setIsNew('');
+          handleUploadFile(files, options, data.data?.id);
+        }
+      } else {
+        handleUploadFile(files, options);
+      }
+    },
+    [
+      conversationId,
+      handleUploadFile,
+      isNew,
+      setConversation,
+      setConversationBoth,
+      setIsNew,
+    ],
+  );
+
   const clearFiles = useCallback(() => {
     setCurrentFiles([]);
     setFileMap(new Map());
@@ -55,7 +102,7 @@ export function useUploadFile() {
   );
 
   return {
-    handleUploadFile,
+    handleUploadFile: createConversationBeforeUploadFile,
     files: currentFiles,
     isUploading: loading,
     removeFile,

web/src/utils/chat.ts

@@ -26,7 +26,7 @@ export const buildMessageListWithUuid = (messages?: Message[]) => {
   );
 };
 
-export const getConversationId = () => {
+export const generateConversationId = () => {
   return uuid().replace(/-/g, '');
 };