diff --git a/src/assets/icons/PlusIcon.tsx b/src/assets/icons/PlusIcon.tsx index 2b2c838..e439519 100644 --- a/src/assets/icons/PlusIcon.tsx +++ b/src/assets/icons/PlusIcon.tsx @@ -1,6 +1,6 @@ import React from 'react'; -const PlusIcon = () => { +const PlusIcon = ({ className }: { className?: string }) => { return ( { 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' diff --git a/src/components/Menu/NewChat.tsx b/src/components/Menu/NewChat.tsx index 8e99c21..28e4a79 100644 --- a/src/components/Menu/NewChat.tsx +++ b/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 ( { const [chats, currentChatIndex] = useStore((state) => [ state.chats, state.currentChatIndex, ]); + const addChat = useAddChat(); return (
@@ -46,7 +47,9 @@ const MobileBar = () => { ? chats[currentChatIndex]?.title : 'New Chat'} - +
); }; diff --git a/src/hooks/useAddChat.ts b/src/hooks/useAddChat.ts new file mode 100644 index 0000000..f020971 --- /dev/null +++ b/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;