docs: handle recaptcha loading before submitting AI assistant queries (medusajs#13065)

Author: shahednasser

www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Input/index.tsx

@@ -12,7 +12,8 @@ type AiAssistantChatWindowInputProps = {
 export const AiAssistantChatWindowInput = ({
   chatWindowRef,
 }: AiAssistantChatWindowInputProps) => {
-  const { chatOpened, inputRef, loading, setChatOpened } = useAiAssistant()
+  const { chatOpened, inputRef, loading, setChatOpened, isCaptchaLoaded } =
+    useAiAssistant()
   const { submitQuery, conversation } = useChat()
   const { isBrowser } = useIsBrowser()
   const { searchQuery, searchQueryType } = useMemo(() => {
@@ -29,9 +30,12 @@ export const AiAssistantChatWindowInput = ({
   const [question, setQuestion] = React.useState("")
   const formRef = useRef<HTMLFormElement | null>(null)
 
-  const onSubmit = (e?: React.FormEvent<HTMLFormElement>) => {
+  const onSubmit = (
+    e?: React.FormEvent<HTMLFormElement>,
+    overrideQuestion?: string
+  ) => {
     e?.preventDefault()
-    submitQuery(question)
+    submitQuery(overrideQuestion || question)
     setQuestion("")
   }
 
@@ -110,19 +114,17 @@ export const AiAssistantChatWindowInput = ({
   })
 
   useEffect(() => {
-    if (searchQueryType === "submit") {
-      onSubmit()
-    }
-  }, [searchQueryType])
-
-  useEffect(() => {
-    if (!searchQuery) {
+    if (!searchQuery || !isCaptchaLoaded) {
       return
     }
 
     setQuestion(searchQuery)
     setChatOpened(true)
-  }, [searchQuery])
+    if (searchQueryType !== "submit") {
+      return
+    }
+    onSubmit(undefined, searchQuery)
+  }, [searchQuery, searchQueryType, isCaptchaLoaded])
 
   return (
     <div
@@ -158,7 +160,7 @@ export const AiAssistantChatWindowInput = ({
               "appearance-none p-0 text-medusa-fg-base disabled:text-medusa-fg-disabled",
               "transition-colors"
             )}
-            disabled={!question || loading}
+            disabled={!question || loading || !isCaptchaLoaded}
           >
             <ArrowUpCircleSolid />
           </button>

www/packages/docs-ui/src/providers/AiAssistant/index.tsx

@@ -24,6 +24,7 @@ export type AiAssistantContextType = {
   inputRef: React.RefObject<HTMLInputElement | HTMLTextAreaElement | null>
   contentRef: React.RefObject<HTMLDivElement | null>
   loading: boolean
+  isCaptchaLoaded: boolean
 }
 
 export type AiAssistantThreadItem = {
@@ -59,6 +60,7 @@ const AiAssistantInnerProvider = ({
   setOnCompleteAction,
   type,
 }: AiAssistantInnerProviderProps) => {
+  const [isCaptchaLoaded, setIsCaptchaLoaded] = useState(false)
   const [chatOpened, setChatOpened] = useState(false)
   const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)
   const contentRef = useRef<HTMLDivElement>(null)
@@ -146,6 +148,23 @@ const AiAssistantInnerProvider = ({
 
     const recaptchaElm = document.querySelector(".grecaptcha-badge")
     recaptchaElm?.parentElement?.classList.add("absolute")
+    const maxRetry = 10
+    let retries = 0
+    const interval = setInterval(() => {
+      if (window.grecaptcha) {
+        setIsCaptchaLoaded(true)
+        clearInterval(interval)
+        return
+      }
+      retries++
+      if (retries > maxRetry) {
+        clearInterval(interval)
+      }
+    }, 1000)
+
+    return () => {
+      clearInterval(interval)
+    }
   }, [isBrowser])
 
   return (
@@ -157,6 +176,7 @@ const AiAssistantInnerProvider = ({
         inputRef,
         contentRef,
         loading,
+        isCaptchaLoaded,
       }}
     >
       {children}