chat naming improvements

src/App.tsx

@@ -8,7 +8,8 @@ import ConfigMenu from './components/ConfigMenu';
 import useSaveToLocalStorage from '@hooks/useSaveToLocalStorage';
 import useUpdateCharts from '@hooks/useUpdateChats';
 
-import { ChatInterface } from '@type/chat';
+import { ChatInterface, MessageInterface } from '@type/chat';
+import { defaultSystemMessage } from '@constants/chat';
 
 function App() {
   useSaveToLocalStorage();
@@ -20,15 +21,34 @@ 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');
     if (storedChats) {
       try {
         const chats: ChatInterface[] = JSON.parse(storedChats);
-        setChats(chats);
-        setMessages(chats[0].messages);
-        setCurrentChatIndex(0);
+        if (chats.length > 0) {
+          setChats(chats);
+          setMessages(chats[0].messages);
+          setCurrentChatIndex(0);
+        } else {
+          initialiseNewChat();
+        }
       } catch (e: unknown) {
         setChats([]);
         setMessages([]);
@@ -36,7 +56,7 @@ function App() {
         console.log(e);
       }
     } else {
-      setChats([]);
+      initialiseNewChat();
     }
   }, []);
 

src/components/Chat/ChatContent/ChatContent.tsx

@@ -98,12 +98,12 @@ const ChatContent = () => {
             >
               Submit
             </button>
-            <button className='btn btn-neutral border-0 md:border mt-2'>
+            {/* <button className='btn btn-neutral border-0 md:border mt-2'>
               <div className='flex items-center justify-center gap-2'>
                 <RefreshIcon />
                 Regenerate response
               </div>
-            </button>
+            </button> */}
           </div>
           <div className='w-full h-32 md:h-48 flex-shrink-0'></div>
         </div>

src/components/Chat/ChatContent/Message/NewMessageButton.tsx

@@ -26,8 +26,16 @@ const NewMessageButton = ({ messageIndex }: { messageIndex: number }) => {
   const addChat = () => {
     if (chats) {
       const updatedChats: ChatInterface[] = JSON.parse(JSON.stringify(chats));
+      let titleIndex = 1;
+      let title = `New Chat ${titleIndex}`;
+
+      while (chats.some((chat) => chat.title === title)) {
+        titleIndex += 1;
+        title = `New Chat ${titleIndex}`;
+      }
+
       updatedChats.unshift({
-        title: `Chat ${Math.random()}`,
+        title,
         messages: [{ role: 'system', content: defaultSystemMessage }],
       });
       setChats(updatedChats);

src/components/Menu/NewChat.tsx

@@ -19,8 +19,16 @@ const NewChat = () => {
   const addChat = () => {
     if (chats) {
       const updatedChats: ChatInterface[] = JSON.parse(JSON.stringify(chats));
+      let titleIndex = 1;
+      let title = `New Chat ${titleIndex}`;
+
+      while (chats.some((chat) => chat.title === title)) {
+        titleIndex += 1;
+        title = `New Chat ${titleIndex}`;
+      }
+
       updatedChats.unshift({
-        title: `Chat ${Math.random()}`,
+        title,
         messages: [{ role: 'system', content: defaultSystemMessage }],
       });
       setChats(updatedChats);