extracted draft message into its hoook

src/components/Sidebar/chat/ChatInput.tsx

@@ -7,6 +7,7 @@ import ChatHistory from './ChatHistory'
 import { useChatHistory } from '../../../hooks/useChatHistory'
 import WebPageContentToggle from './WebPageContentToggle'
 import ImageCaptureButton from './ImageCaptureButton'
+import { useMessageDraft } from '../../../hooks/useMessageDraft'
 
 interface SidebarInputProps {
   loading: boolean
@@ -27,7 +28,8 @@ export function SidebarInput({
   cancelRequest,
   isWebpageContextOn,
 }: SidebarInputProps) {
-  const [text, setText] = useState('')
+  const { messageDraft, setMessageDraftText, resetMessageDraft } =
+    useMessageDraft()
   const [delayedLoading, setDelayedLoading] = useState(false)
   const { history } = useChatHistory()
 
@@ -54,8 +56,8 @@ export function SidebarInput({
       })
       context = (await pageContent) as string
     }
-    submitMessage(text, isWebpageContextOn ? context : undefined)
-    setText('')
+    submitMessage(messageDraft.text, isWebpageContextOn ? context : undefined)
+    resetMessageDraft()
   }
 
   const sendButton = (
@@ -101,12 +103,12 @@ export function SidebarInput({
           minRows={2}
           maxLength={MAX_MESSAGE_LENGTH}
           placeholder="Type your message here..."
-          value={text}
+          value={messageDraft.text}
           disabled={loading}
           className="cdx-p-3 cdx-w-full focus:!cdx-outline-none placeholder:cdx-text-neutral-500 cdx-text-sm cdx-resize-none cdx-max-h-96 cdx-pb-0 cdx-bg-transparent !cdx-border-none"
           onChange={(e) => {
             e.preventDefault()
-            setText(e.target.value)
+            setMessageDraftText(e.target.value)
           }}
           onKeyDown={(e) => {
             if (e.key === 'Enter' && !e.shiftKey) {

src/hooks/useCurrentChat.ts

@@ -73,13 +73,15 @@ export const useCurrentChat = () => {
 
   // We need to fetch stored messages when the tab is changed
   // so if changes were made in another tab, we can reflect them
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     chrome.tabs.onActivated.addListener(fetchStoredMessages)
     return () => chrome.tabs.onActivated.removeListener(fetchStoredMessages)
   }, [])
 
   // We need to fetch stored messages when the current chat id changes
   // we get new history from the storage stored with the new id
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     fetchStoredMessages()
   }, [currentChatId])

src/hooks/useMessageDraft.ts

@@ -0,0 +1,55 @@
+import { atom, useAtom } from 'jotai'
+import { getUUID } from '../lib/getUUID'
+
+interface MessageFile {
+  id: string
+  blob: Blob
+}
+
+interface MessageDraft {
+  text: string
+  files: MessageFile[]
+}
+
+const messageDraftAtom = atom<MessageDraft>({
+  text: '',
+  files: [],
+})
+
+export const useMessageDraft = () => {
+  const [messageDraft, setMessageDraft] = useAtom(messageDraftAtom)
+
+  const setMessageDraftText = (text: string) => {
+    setMessageDraft((p) => ({ ...p, text }))
+  }
+
+  const addMessageDraftFile = (blob: Blob) => {
+    const file = {
+      id: getUUID(),
+      blob,
+    }
+    setMessageDraft((p) => ({ ...p, files: [...p.files, file] }))
+  }
+
+  const removeMessageDraftFile = (id: string) => {
+    setMessageDraft((p) => ({
+      ...p,
+      files: p.files.filter((f) => f.id !== id),
+    }))
+  }
+
+  const resetMessageDraft = () => {
+    setMessageDraft({
+      text: '',
+      files: [],
+    })
+  }
+
+  return {
+    messageDraft,
+    setMessageDraftText,
+    addMessageDraftFile,
+    removeMessageDraftFile,
+    resetMessageDraft,
+  }
+}