From 343fde2773ba2942e2e809b6557bc8f50ca9b93c Mon Sep 17 00:00:00 2001
From: Charis <26616127+charislam@users.noreply.github.com>
Date: Wed, 14 Aug 2024 12:15:08 -0400
Subject: [PATCH] fix: repeated responses in docs search (#28607)

Fixes a bug in docs search from duplicated code (I moved the
useEffect into a new component and forgot to delete the old one,
so it runs the on-entry query submit twice, resulting in a double
conversation in production.)

In dev, there is actually a _quadruple_ -_-" converstation, due to
useEffect running twice as designed, with no cleanup. Added a
cleanup function to reset after the first useEffect, so it only
runs once on dev as well.

This only happens when there is an existing query to send when you
hit the AI page, so to reproduce the current bug, type in the
command input _before_ selecting "Supabase AI". If you select
"Supabase AI" before entering your prompt, it won't occur, which is
how I guess this bug slipped past manual testing.
---
 .../prepackaged/DocsAi/DocsAiPage.tsx         | 35 ++++++-------------
 1 file changed, 10 insertions(+), 25 deletions(-)

diff --git a/packages/ui-patterns/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx b/packages/ui-patterns/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx
index e2936c20aa9..6f732b18c5e 100644
--- a/packages/ui-patterns/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx
+++ b/packages/ui-patterns/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx
@@ -55,11 +55,6 @@ const DocsAiPage = () => {
     setIsLoading,
   })
 
-  useHistoryKeys({
-    enable: !isResponding,
-    stack: messages.filter(({ role }) => role === MessageRole.User).map(({ content }) => content),
-  })
-
   const handleSubmit = useCallback(
     (message: string) => {
       setQuery('')
@@ -73,12 +68,6 @@ const DocsAiPage = () => {
     reset()
   }, [reset])
 
-  useEffect(() => {
-    if (query) {
-      handleSubmit(query)
-    }
-  }, [])
-
   return (
     <CommandWrapper
       className={cn(
@@ -91,7 +80,8 @@ const DocsAiPage = () => {
         <Breadcrumb />
         {isBelowSm && (
           <PromptInput
-            submit={submit}
+            submit={handleSubmit}
+            reset={handleReset}
             messages={messages}
             isLoading={isLoading}
             isResponding={isResponding}
@@ -105,7 +95,8 @@ const DocsAiPage = () => {
       </div>
       {!isBelowSm && (
         <PromptInput
-          submit={submit}
+          submit={handleSubmit}
+          reset={handleReset}
           messages={messages}
           isLoading={isLoading}
           isResponding={isResponding}
@@ -120,37 +111,31 @@ const DocsAiPage = () => {
 
 function PromptInput({
   submit,
+  reset,
   messages,
   isLoading,
   isResponding,
   className,
 }: {
-  submit: (query: string) => Promise<void>
+  submit: (query: string) => void
+  reset: () => void
   messages: Array<Message>
   isLoading: boolean
   isResponding: boolean
   className?: string
 }) {
   const query = useQuery()
-  const setQuery = useSetQuery()
 
   useHistoryKeys({
     enable: !isResponding,
     stack: messages.filter(({ role }) => role === MessageRole.User).map(({ content }) => content),
   })
 
-  const handleSubmit = useCallback(
-    (message: string) => {
-      setQuery('')
-      submit(message)
-    },
-    [submit]
-  )
-
   useEffect(() => {
     if (query) {
-      handleSubmit(query)
+      submit(query)
     }
+    return reset
   }, [])
 
   // Detect an IME composition (so that we can ignore Enter keypress)
@@ -181,7 +166,7 @@ function PromptInput({
             if (!query || isLoading || isResponding || isImeComposing) {
               return
             }
-            return handleSubmit(query)
+            return submit(query)
           default:
             return
         }