feat: mobile add chat button

src/assets/icons/PlusIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const PlusIcon = () => {
+const PlusIcon = ({ className }: { className?: string }) => {
   return (
     <svg
       stroke='currentColor'
@@ -9,7 +9,7 @@ const PlusIcon = () => {
       viewBox='0 0 24 24'
       strokeLinecap='round'
       strokeLinejoin='round'
-      className='h-4 w-4'
+      className={className ? className : 'h-4 w-4'}
       height='1em'
       width='1em'
       xmlns='http://www.w3.org/2000/svg'

src/components/Menu/NewChat.tsx

@@ -3,8 +3,7 @@ import useStore from '@store/store';
 
 import PlusIcon from '@icon/PlusIcon';
 
-import { ChatInterface } from '@type/chat';
-import { defaultSystemMessage } from '@constants/chat';
+import useAddChat from '@hooks/useAddChat';
 
 const NewChat = () => {
   const [chats, setChats, setCurrentChatIndex, setMessages] = useStore(
@@ -16,26 +15,7 @@ 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,
-        messages: [{ role: 'system', content: defaultSystemMessage }],
-      });
-      setChats(updatedChats);
-      setMessages(updatedChats[0].messages);
-      setCurrentChatIndex(0);
-    }
-  };
+  const addChat = useAddChat();
 
   return (
     <a

src/components/MobileBar/MobileBar.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 
 import useStore from '@store/store';
-
-import NewChat from '../Menu/NewChat';
+import PlusIcon from '@icon/PlusIcon';
+import useAddChat from '@hooks/useAddChat';
 
 const MobileBar = () => {
   const [chats, currentChatIndex] = useStore((state) => [
     state.chats,
     state.currentChatIndex,
   ]);
+  const addChat = useAddChat();
 
   return (
     <div className='sticky top-0 left-0 w-full z-50 flex items-center border-b border-white/20 bg-gray-800 pl-1 pt-1 text-gray-200 sm:pl-3 md:hidden'>
@@ -46,7 +47,9 @@ const MobileBar = () => {
           ? chats[currentChatIndex]?.title
           : 'New Chat'}
       </h1>
-      <NewChat />
+      <button type='button' className='px-3 text-gray-400' onClick={addChat}>
+        <PlusIcon className='h-6 w-6' />
+      </button>
     </div>
   );
 };

src/hooks/useAddChat.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import useStore from '@store/store';
+import { defaultSystemMessage } from '@constants/chat';
+import { ChatInterface } from '@type/chat';
+
+const useAddChat = () => {
+  const [chats, setChats, setCurrentChatIndex, setMessages] = useStore(
+    (state) => [
+      state.chats,
+      state.setChats,
+      state.setCurrentChatIndex,
+      state.setMessages,
+    ]
+  );
+
+  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,
+        messages: [{ role: 'system', content: defaultSystemMessage }],
+      });
+      setChats(updatedChats);
+      setMessages(updatedChats[0].messages);
+      setCurrentChatIndex(0);
+    }
+  };
+
+  return addChat;
+};
+
+export default useAddChat;