abstract initialiseNewChat

src/App.tsx

@@ -7,13 +7,14 @@ import ConfigMenu from './components/ConfigMenu';
 
 import useSaveToLocalStorage from '@hooks/useSaveToLocalStorage';
 import useUpdateCharts from '@hooks/useUpdateChats';
+import useInitialiseNewChat from '@hooks/useInitialiseNewChat';
 
-import { ChatInterface, MessageInterface } from '@type/chat';
+import { ChatInterface } from '@type/chat';
-import { defaultSystemMessage } from '@constants/chat';
 
 function App() {
   useSaveToLocalStorage();
   useUpdateCharts();
+  const initialiseNewChat = useInitialiseNewChat();
 
   const [setChats, setMessages, setCurrentChatIndex] = useStore((state) => [
     state.setChats,
@@ -21,21 +22,6 @@ function App() {
     state.setCurrentChatIndex,
   ]);
 
-  const initialiseNewChat = () => {
-    const message: MessageInterface = {
-      role: 'system',
-      content: defaultSystemMessage,
-    };
-    setChats([
-      {
-        title: 'New Chat',
-        messages: [message],
-      },
-    ]);
-    setMessages([message]);
-    setCurrentChatIndex(0);
-  };
-
   useEffect(() => {
     // localStorage.removeItem('chats');
     const storedChats = localStorage.getItem('chats');

src/components/Chat/ChatContent/ChatContent.tsx

@@ -45,25 +45,29 @@ const ChatContent = () => {
       while (reading) {
         const { done, value } = await reader.read();
 
-        const result = parseEventSource(new TextDecoder().decode(value));
+        try {
+          const result = parseEventSource(new TextDecoder().decode(value));
 
-        if (result === '[DONE]' || done) {
+          if (result === '[DONE]' || done) {
-          reading = false;
+            reading = false;
-        } else {
+          } else {
-          const resultString = result.reduce((output: string, curr) => {
+            const resultString = result.reduce((output: string, curr) => {
-            if (curr === '[DONE]') return output;
+              if (curr === '[DONE]') return output;
-            else {
+              else {
-              const content = curr.choices[0].delta.content;
+                const content = curr.choices[0].delta.content;
-              if (content) output += content;
+                if (content) output += content;
-              return output;
+                return output;
-            }
+              }
-          }, '');
+            }, '');
 
-          const updatedMessages: MessageInterface[] = JSON.parse(
+            const updatedMessages: MessageInterface[] = JSON.parse(
-            JSON.stringify(useStore.getState().messages)
+              JSON.stringify(useStore.getState().messages)
-          );
+            );
-          updatedMessages[updatedMessages.length - 1].content += resultString;
+            updatedMessages[updatedMessages.length - 1].content += resultString;
-          setMessages(updatedMessages);
+            setMessages(updatedMessages);
+          }
+        } catch (e: unknown) {
+          console.log((e as Error).message);
         }
       }
     }

src/components/Menu/ChatHistoryList.tsx

@@ -7,6 +7,8 @@ import DeleteIcon from '@icon/DeleteIcon';
 import TickIcon from '@icon/TickIcon';
 import CrossIcon from '@icon/CrossIcon';
 
+import useInitialiseNewChat from '@hooks/useInitialiseNewChat';
+
 const ChatHistoryList = () => {
   const [chats, setCurrentChatIndex, setMessages] = useStore((state) => [
     state.chats,
@@ -63,6 +65,7 @@ const ChatHistory = ({
   chatIndex: number;
   onClick?: React.MouseEventHandler<HTMLElement>;
 }) => {
+  const initialiseNewChat = useInitialiseNewChat();
   const [chats, setChats, currentChatIndex, setMessages, setCurrentChatIndex] =
     useStore((state) => [
       state.chats,
@@ -86,13 +89,15 @@ const ChatHistory = ({
       setIsEdit(false);
     } else if (isDelete) {
       updatedChats.splice(chatIndex, 1);
-      setCurrentChatIndex(-1);
+      if (updatedChats.length > 0) {
-      setMessages([]);
+        setCurrentChatIndex(0);
+        setMessages(updatedChats[0].messages);
+        setChats(updatedChats);
+      } else {
+        initialiseNewChat();
+      }
       setIsDelete(false);
     }
-    setTimeout(() => {
-      setChats(updatedChats);
-    }, 0);
   };
 
   const handleCross = () => {

src/hooks/useInitialiseNewChat.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import useStore from '@store/store';
+import { MessageInterface } from '@type/chat';
+import { defaultSystemMessage } from '@constants/chat';
+
+const useInitialiseNewChat = () => {
+  const [setChats, setMessages, setCurrentChatIndex] = useStore((state) => [
+    state.setChats,
+    state.setMessages,
+    state.setCurrentChatIndex,
+  ]);
+
+  const initialiseNewChat = () => {
+    const message: MessageInterface = {
+      role: 'system',
+      content: defaultSystemMessage,
+    };
+    setChats([
+      {
+        title: 'New Chat',
+        messages: [message],
+      },
+    ]);
+    setMessages([message]);
+    setCurrentChatIndex(0);
+  };
+
+  return initialiseNewChat;
+};
+
+export default useInitialiseNewChat;