fix: cancel suggestion stream on submit to prevent chat blur

bun_output.txt

@@ -0,0 +1,16 @@
+$ next dev --turbo
+   ▲ Next.js 15.3.8 (Turbopack)
+   - Local:        http://localhost:3000
+   - Network:      http://192.168.0.2:3000
+   - Environments: .env
+
+ ✓ Starting...
+ ✓ Compiled middleware in 386ms
+ ✓ Ready in 1880ms
+ ○ Compiling / ...
+ ✓ Compiled / in 28.6s
+Chat DB actions loaded. Ensure getCurrentUserId() is correctly implemented for server-side usage if applicable.
+ GET / 200 in 33121ms
+ GET / 200 in 976ms
+[Auth] Supabase URL or Anon Key is not set for server-side auth.
+ POST / 200 in 1775ms

components/chat-panel.tsx

@@ -43,6 +43,7 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
   const inputRef = useRef<HTMLTextAreaElement>(null)
   const formRef = useRef<HTMLFormElement>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
+  const activeSuggestionRef = useRef<string>('')
 
   useImperativeHandle(ref, () => ({
     handleAttachmentClick() {
@@ -91,6 +92,12 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
       return
     }
 
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current)
+    }
+    activeSuggestionRef.current = ''
+    setSuggestions(null)
+
     const content: ({ type: 'text'; text: string } | { type: 'image'; image: string })[] = []
     if (input) {
       content.push({ type: 'text', text: input })
@@ -119,14 +126,20 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
     formData.append('drawnFeatures', JSON.stringify(mapData.drawnFeatures || []))
 
     setInput('')
+    setSuggestions(null)
     clearAttachment()
 
     const responseMessage = await submit(formData)
     setMessages(currentMessages => [...currentMessages, responseMessage as any])
   }
 
   const handleClear = async () => {
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current)
+    }
+    activeSuggestionRef.current = ''
     setMessages([])
+    setSuggestions(null)
     clearAttachment()
     await clearChat()
   }
@@ -140,17 +153,27 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
       const wordCount = value.trim().split(/\s+/).filter(Boolean).length
       if (wordCount < 2) {
         setSuggestions(null)
+        activeSuggestionRef.current = ''
         return
       }
 
+      const currentQuery = value
+      activeSuggestionRef.current = currentQuery
+
       debounceTimeoutRef.current = setTimeout(async () => {
-        const suggestionsStream = await getSuggestions(value, mapData)
-        for await (const partialSuggestions of readStreamableValue(
-          suggestionsStream
-        )) {
-          if (partialSuggestions) {
-            setSuggestions(partialSuggestions as PartialRelated)
+        if (activeSuggestionRef.current !== currentQuery) return
+        try {
+          const suggestionsStream = await getSuggestions(value, mapData)
+          for await (const partialSuggestions of readStreamableValue(
+            suggestionsStream
+          )) {
+            if (activeSuggestionRef.current !== currentQuery) break
+            if (partialSuggestions) {
+              setSuggestions(partialSuggestions as PartialRelated)
+            }
           }
+        } catch (error) {
+          console.error(error)
         }
       }, 500) // 500ms debounce delay
     },

patch_suggestions.js

@@ -0,0 +1,112 @@
+const fs = require('fs');
+
+const path = 'components/chat-panel.tsx';
+let content = fs.readFileSync(path, 'utf8');
+
+// We will add activeSuggestionRef to the component
+content = content.replace(
+  'const fileInputRef = useRef<HTMLInputElement>(null)',
+  'const fileInputRef = useRef<HTMLInputElement>(null)\n  const activeSuggestionRef = useRef<string>(\'\')'
+);
+
+// We will update debouncedGetSuggestions
+const oldDebounce = `  const debouncedGetSuggestions = useCallback(
+    (value: string) => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current)
+      }
+
+      const wordCount = value.trim().split(/\\s+/).filter(Boolean).length
+      if (wordCount < 2) {
+        setSuggestions(null)
+        return
+      }
+
+      debounceTimeoutRef.current = setTimeout(async () => {
+        const suggestionsStream = await getSuggestions(value, mapData)
+        for await (const partialSuggestions of readStreamableValue(
+          suggestionsStream
+        )) {
+          if (partialSuggestions) {
+            setSuggestions(partialSuggestions as PartialRelated)
+          }
+        }
+      }, 500) // 500ms debounce delay
+    },
+    [mapData, setSuggestions]
+  )`;
+
+const newDebounce = `  const debouncedGetSuggestions = useCallback(
+    (value: string) => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current)
+      }
+
+      const wordCount = value.trim().split(/\\s+/).filter(Boolean).length
+      if (wordCount < 2) {
+        setSuggestions(null)
+        activeSuggestionRef.current = ''
+        return
+      }
+
+      const currentQuery = value
+      activeSuggestionRef.current = currentQuery
+
+      debounceTimeoutRef.current = setTimeout(async () => {
+        if (activeSuggestionRef.current !== currentQuery) return
+        try {
+          const suggestionsStream = await getSuggestions(value, mapData)
+          for await (const partialSuggestions of readStreamableValue(
+            suggestionsStream
+          )) {
+            if (activeSuggestionRef.current !== currentQuery) break
+            if (partialSuggestions) {
+              setSuggestions(partialSuggestions as PartialRelated)
+            }
+          }
+        } catch (error) {
+          console.error(error)
+        }
+      }, 500) // 500ms debounce delay
+    },
+    [mapData, setSuggestions]
+  )`;
+
+content = content.replace(oldDebounce, newDebounce);
+
+const oldHandleSubmit = `  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    if (!input.trim() && !selectedFile) {
+      return
+    }`;
+
+const newHandleSubmit = `  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    if (!input.trim() && !selectedFile) {
+      return
+    }
+
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current)
+    }
+    activeSuggestionRef.current = ''
+    setSuggestions(null)`;
+
+content = content.replace(oldHandleSubmit, newHandleSubmit);
+
+const oldHandleClear = `  const handleClear = async () => {
+    setMessages([])
+    setSuggestions(null)`;
+
+const newHandleClear = `  const handleClear = async () => {
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current)
+    }
+    activeSuggestionRef.current = ''
+    setMessages([])
+    setSuggestions(null)`;
+
+content = content.replace(oldHandleClear, newHandleClear);
+
+fs.writeFileSync(path, content);
+console.log("Patched suggestions with active tracking");

test-grep.sh

@@ -0,0 +1 @@
+grep -rnw -A 10 -B 5 "const handleSubmit = async" components/chat-panel.tsx