feat: let the messages I send appear immediately in the chat window a…

…nd remove rewrite configuration from nginx proxy (#86) * feat: remove rewrite configuration from nginx proxy * feat: let the messages I send appear immediately in the chat window
infiniflow · Feb 29, 2024 · 14633df · 14633df
1 parent 0429107
commit 14633df
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 70 deletions.
diff --git a/web/src/pages/chat/chat-container/index.tsx b/web/src/pages/chat/chat-container/index.tsx
@@ -10,10 +10,8 @@ import reactStringReplace from 'react-string-replace';
 import {
   useFetchConversationOnMount,
   useGetFileIcon,
-  useScrollToBottom,
   useSendMessage,
 } from '../hooks';
-import { IClientConversation } from '../interface';
 
 import Image from '@/components/image';
 import NewDocumentLink from '@/components/new-document-link';
@@ -187,17 +185,24 @@ const MessageItem = ({
 
 const ChatContainer = () => {
   const [value, setValue] = useState('');
-  const conversation: IClientConversation = useFetchConversationOnMount();
+  const {
+    ref,
+    currentConversation: conversation,
+    addNewestConversation,
+  } = useFetchConversationOnMount();
   const { sendMessage } = useSendMessage();
+
   const loading = useOneNamespaceEffectsLoading('chatModel', [
     'completeConversation',
   ]);
-  const ref = useScrollToBottom();
   useGetFileIcon();
 
   const handlePressEnter = () => {
-    setValue('');
-    sendMessage(value);
+    if (!loading) {
+      setValue('');
+      addNewestConversation(value);
+      sendMessage(value);
+    }
   };
 
   const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {

diff --git a/web/src/pages/chat/hooks.ts b/web/src/pages/chat/hooks.ts
@@ -374,32 +374,64 @@ export const useSetConversation = () => {
   const dispatch = useDispatch();
   const { dialogId } = useGetChatSearchParams();
 
-  const setConversation = (message: string) => {
-    return dispatch<any>({
-      type: 'chatModel/setConversation',
-      payload: {
-        // conversation_id: '',
-        dialog_id: dialogId,
-        name: message,
-        message: [
-          {
-            role: MessageType.Assistant,
-            content: message,
-          },
-        ],
-      },
-    });
-  };
+  const setConversation = useCallback(
+    (message: string) => {
+      return dispatch<any>({
+        type: 'chatModel/setConversation',
+        payload: {
+          // conversation_id: '',
+          dialog_id: dialogId,
+          name: message,
+          message: [
+            {
+              role: MessageType.Assistant,
+              content: message,
+            },
+          ],
+        },
+      });
+    },
+    [dispatch, dialogId],
+  );
 
   return { setConversation };
 };
 
 export const useSelectCurrentConversation = () => {
+  const [currentConversation, setCurrentConversation] =
+    useState<IClientConversation>({} as IClientConversation);
+
   const conversation: IClientConversation = useSelector(
     (state: any) => state.chatModel.currentConversation,
   );
 
-  return conversation;
+  const addNewestConversation = useCallback((message: string) => {
+    setCurrentConversation((pre) => {
+      return {
+        ...pre,
+        message: [
+          ...pre.message,
+          {
+            role: MessageType.User,
+            content: message,
+            id: uuid(),
+          } as IMessage,
+        ],
+      };
+    });
+  }, []);
+
+  useEffect(() => {
+    console.info('useSelectCurrentConversation: 1', currentConversation);
+  }, [currentConversation]);
+
+  useEffect(() => {
+    console.info('useSelectCurrentConversation: 2', conversation);
+
+    setCurrentConversation(conversation);
+  }, [conversation]);
+
+  return { currentConversation, addNewestConversation };
 };
 
 export const useFetchConversation = () => {
@@ -421,11 +453,30 @@ export const useFetchConversation = () => {
   return fetchConversation;
 };
 
+export const useScrollToBottom = (currentConversation: IClientConversation) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = useCallback(() => {
+    console.info('useScrollToBottom');
+    if (currentConversation.id) {
+      ref.current?.scrollIntoView({ behavior: 'instant' });
+    }
+  }, [currentConversation]);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [scrollToBottom]);
+
+  return ref;
+};
+
 export const useFetchConversationOnMount = () => {
   const { conversationId } = useGetChatSearchParams();
-  const conversation = useSelectCurrentConversation();
   const setCurrentConversation = useSetCurrentConversation();
   const fetchConversation = useFetchConversation();
+  const { currentConversation, addNewestConversation } =
+    useSelectCurrentConversation();
+  const ref = useScrollToBottom(currentConversation);
 
   const fetchConversationOnMount = useCallback(() => {
     if (isConversationIdExist(conversationId)) {
@@ -439,68 +490,59 @@ export const useFetchConversationOnMount = () => {
     fetchConversationOnMount();
   }, [fetchConversationOnMount]);
 
-  return conversation;
+  return { currentConversation, addNewestConversation, ref };
 };
 
 export const useSendMessage = () => {
   const dispatch = useDispatch();
   const { setConversation } = useSetConversation();
   const { conversationId } = useGetChatSearchParams();
-  const conversation = useSelector(
+  const conversation: IClientConversation = useSelector(
     (state: any) => state.chatModel.currentConversation,
   );
+
   const { handleClickConversation } = useClickConversationCard();
 
-  const sendMessage = (message: string, id?: string) => {
-    dispatch({
-      type: 'chatModel/completeConversation',
-      payload: {
-        conversation_id: id ?? conversationId,
-        messages: [
-          ...(conversation?.message ?? []).map((x: IMessage) => omit(x, 'id')),
-          {
-            role: MessageType.User,
-            content: message,
-          },
-        ],
-      },
-    });
-  };
+  const sendMessage = useCallback(
+    (message: string, id?: string) => {
+      dispatch({
+        type: 'chatModel/completeConversation',
+        payload: {
+          conversation_id: id ?? conversationId,
+          messages: [
+            ...(conversation?.message ?? []).map((x: IMessage) =>
+              omit(x, 'id'),
+            ),
+            {
+              role: MessageType.User,
+              content: message,
+            },
+          ],
+        },
+      });
+    },
+    [dispatch, conversation?.message, conversationId],
+  );
 
-  const handleSendMessage = async (message: string) => {
-    if (conversationId !== '') {
-      sendMessage(message);
-    } else {
-      const data = await setConversation(message);
-      if (data.retcode === 0) {
-        const id = data.data.id;
-        handleClickConversation(id);
-        sendMessage(message, id);
+  const handleSendMessage = useCallback(
+    async (message: string) => {
+      if (conversationId !== '') {
+        sendMessage(message);
+      } else {
+        const data = await setConversation(message);
+        if (data.retcode === 0) {
+          const id = data.data.id;
+          handleClickConversation(id);
+          sendMessage(message, id);
+        }
       }
-    }
-  };
+    },
+    [conversationId, handleClickConversation, setConversation, sendMessage],
+  );
 
   return { sendMessage: handleSendMessage };
 };
 
-export const useScrollToBottom = () => {
-  const ref = useRef<HTMLDivElement>(null);
-  let chatModel: ChatModelState = useSelector((state: any) => state.chatModel);
-  const { currentConversation } = chatModel;
-
-  const scrollToBottom = useCallback(() => {
-    if (currentConversation.id) {
-      ref.current?.scrollIntoView({ behavior: 'instant' });
-    }
-  }, [currentConversation]);
-
-  useEffect(() => {
-    scrollToBottom();
-  }, [scrollToBottom]);
-
-  return ref;
-};
-
 export const useGetFileIcon = () => {
   // const req = require.context('@/assets/svg/file-icon');
   // const ret = req.keys().map(req);