feat: let the messages I send appear immediately in the chat window and 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

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 = () => {
+    if (!loading) {
       setValue('');
+      addNewestConversation(value);
       sendMessage(value);
+    }
   };
 
   const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {

web/src/pages/chat/hooks.ts

@@ -374,7 +374,8 @@ export const useSetConversation = () => {
   const dispatch = useDispatch();
   const { dialogId } = useGetChatSearchParams();
 
-  const setConversation = (message: string) => {
+  const setConversation = useCallback(
+    (message: string) => {
       return dispatch<any>({
         type: 'chatModel/setConversation',
         payload: {
@@ -389,17 +390,48 @@ export const useSetConversation = () => {
           ],
         },
       });
-  };
+    },
+    [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,25 +490,29 @@ 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) => {
+  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')),
+            ...(conversation?.message ?? []).map((x: IMessage) =>
+              omit(x, 'id'),
+            ),
             {
               role: MessageType.User,
               content: message,
@@ -465,9 +520,12 @@ export const useSendMessage = () => {
           ],
         },
       });
-  };
+    },
+    [dispatch, conversation?.message, conversationId],
+  );
 
-  const handleSendMessage = async (message: string) => {
+  const handleSendMessage = useCallback(
+    async (message: string) => {
       if (conversationId !== '') {
         sendMessage(message);
       } else {
@@ -478,29 +536,13 @@ export const useSendMessage = () => {
           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);