docs: open AI assistant based on search query (#13063)

* docs: open AI assistant based on search query

* use URLSearchParams

* fix vale error

www/apps/book/app/learn/introduction/from-v1-to-v2/page.mdx

@@ -1897,7 +1897,7 @@ If your use case is complex and these rules are not enough, you can create a new
 
 Medusa v1 has gift card features out-of-the-box.
 
-In Medusa v2, gift card features are now only available to [Medusa Cloud](https://medusajs.com/cloud/) users.
+In Medusa v2, gift card features are now only available to [Cloud](https://medusajs.com/cloud/) users.
 
 ---
 

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

@@ -1,7 +1,7 @@
-import React, { useEffect, useRef } from "react"
+import React, { useEffect, useMemo, useRef } from "react"
 import clsx from "clsx"
 import { ArrowUpCircleSolid } from "@medusajs/icons"
-import { useAiAssistant } from "../../../../providers"
+import { useAiAssistant, useIsBrowser } from "../../../../providers"
 import { useChat } from "@kapaai/react-sdk"
 import { useAiAssistantChatNavigation } from "../../../../hooks"
 
@@ -12,8 +12,20 @@ type AiAssistantChatWindowInputProps = {
 export const AiAssistantChatWindowInput = ({
   chatWindowRef,
 }: AiAssistantChatWindowInputProps) => {
-  const { chatOpened, inputRef, loading } = useAiAssistant()
+  const { chatOpened, inputRef, loading, setChatOpened } = useAiAssistant()
   const { submitQuery, conversation } = useChat()
+  const { isBrowser } = useIsBrowser()
+  const { searchQuery, searchQueryType } = useMemo(() => {
+    if (!isBrowser) {
+      return {}
+    }
+    const searchParams = new URLSearchParams(location.search)
+
+    return {
+      searchQuery: searchParams.get("query"),
+      searchQueryType: searchParams.get("queryType"),
+    }
+  }, [isBrowser])
   const [question, setQuestion] = React.useState("")
   const formRef = useRef<HTMLFormElement | null>(null)
 
@@ -97,6 +109,21 @@ export const AiAssistantChatWindowInput = ({
     question,
   })
 
+  useEffect(() => {
+    if (searchQueryType === "submit") {
+      onSubmit()
+    }
+  }, [searchQueryType])
+
+  useEffect(() => {
+    if (!searchQuery) {
+      return
+    }
+
+    setQuestion(searchQuery)
+    setChatOpened(true)
+  }, [searchQuery])
+
   return (
     <div
       className={clsx(

www/packages/docs-ui/src/components/AiAssistant/ThreadItem/Actions/index.tsx

@@ -1,9 +1,18 @@
 import React, { useState } from "react"
 import clsx from "clsx"
 import { Badge, Button, Link, type ButtonProps } from "@/components"
-import { ThumbDown, ThumbUp } from "@medusajs/icons"
+import {
-import { AiAssistantThreadItem as AiAssistantThreadItemType } from "../../../../providers"
+  ThumbDown,
+  ThumbUp,
+  Link as LinkIcon,
+  CheckCircle,
+} from "@medusajs/icons"
+import {
+  AiAssistantThreadItem as AiAssistantThreadItemType,
+  useSiteConfig,
+} from "../../../../providers"
 import { Reaction, useChat } from "@kapaai/react-sdk"
+import { useCopy } from "../../../../hooks"
 
 export type AiAssistantThreadItemActionsProps = {
   item: AiAssistantThreadItemType
@@ -14,6 +23,12 @@ export const AiAssistantThreadItemActions = ({
 }: AiAssistantThreadItemActionsProps) => {
   const [feedback, setFeedback] = useState<Reaction | null>(null)
   const { addFeedback } = useChat()
+  const {
+    config: { baseUrl },
+  } = useSiteConfig()
+  const { handleCopy, isCopied } = useCopy(
+    `${baseUrl}?query=${encodeURI(item.content)}`
+  )
 
   const handleFeedback = async (
     reaction: Reaction,
@@ -31,7 +46,22 @@ export const AiAssistantThreadItemActions = ({
   }
 
   return (
-    <div className={clsx("flex gap-docs_0.75 justify-between items-center")}>
+    <div
+      className={clsx(
+        "flex gap-docs_0.75 items-center",
+        item.type === "question" && "justify-end",
+        item.type === "answer" && "justify-between"
+      )}
+    >
+      {item.type === "question" && (
+        <div className="flex gap-docs_0.25 items-center text-medusa-fg-muted">
+          <ActionButton onClick={handleCopy}>
+            {isCopied ? <CheckCircle /> : <LinkIcon />}
+          </ActionButton>
+        </div>
+      )}
+      {item.type === "answer" && (
+        <>
           {item.sources !== undefined && item.sources.length > 0 && (
             <div className="flex gap-[6px] items-center flex-wrap">
               {item.sources.map((source) => (
@@ -47,20 +77,28 @@ export const AiAssistantThreadItemActions = ({
             {(feedback === null || feedback === "upvote") && (
               <ActionButton
                 onClick={async () => handleFeedback("upvote", item.question_id)}
-            className={clsx(feedback === "upvote" && "!text-medusa-fg-muted")}
+                className={clsx(
+                  feedback === "upvote" && "!text-medusa-fg-muted"
+                )}
               >
                 <ThumbUp />
               </ActionButton>
             )}
             {(feedback === null || feedback === "downvote") && (
               <ActionButton
-            onClick={async () => handleFeedback("downvote", item.question_id)}
+                onClick={async () =>
-            className={clsx(feedback === "downvote" && "!text-medusa-fg-muted")}
+                  handleFeedback("downvote", item.question_id)
+                }
+                className={clsx(
+                  feedback === "downvote" && "!text-medusa-fg-muted"
+                )}
               >
                 <ThumbDown />
               </ActionButton>
             )}
           </div>
+        </>
+      )}
     </div>
   )
 }

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

@@ -41,12 +41,18 @@ export const AiAssistantThreadItem = ({ item }: AiAssistantThreadItemProps) => {
       <div
         className={clsx(
           "txt-small text-medusa-fg-base",
+          "flex flex-col gap-docs_0.75",
+          item.type !== "question" && "flex-1",
+          item.type === "answer" && "text-pretty flex-1 max-w-[calc(100%-20px)]"
+        )}
+      >
+        <div
+          className={clsx(
+            "flex flex-col gap-docs_0.75",
             item.type === "question" && [
               "rounded-docs_xl bg-medusa-tag-neutral-bg",
               "px-docs_0.75 py-docs_0.5 max-w-full md:max-w-[400px]",
-          ],
+            ]
-          item.type !== "question" && "flex-1",
-          item.type === "answer" && "text-pretty flex-1 max-w-[calc(100%-20px)]"
           )}
         >
           {item.type === "question" && (
@@ -92,7 +98,7 @@ export const AiAssistantThreadItem = ({ item }: AiAssistantThreadItemProps) => {
             </MarkdownContent>
           )}
           {item.type === "answer" && (
-          <div className="flex flex-col gap-docs_0.75">
+            <>
               {showLoading && <DotsLoading />}
               <MarkdownContent
                 className="[&>*:last-child]:mb-0"
@@ -113,8 +119,11 @@ export const AiAssistantThreadItem = ({ item }: AiAssistantThreadItemProps) => {
               >
                 {item.content}
               </MarkdownContent>
-            {item.question_id && <AiAssistantThreadItemActions item={item} />}
+            </>
+          )}
         </div>
+        {(item.question_id || item.type === "question") && (
+          <AiAssistantThreadItemActions item={item} />
         )}
         {item.type === "error" && (
           <span className="text-medusa-fg-error">{item.content}</span>

www/packages/docs-ui/src/components/InlineCode/index.tsx

@@ -23,7 +23,7 @@ export const InlineCode = ({
       <code
         {...props}
         className={clsx(
-          "text-medusa-tag-neutral-text border",
+          "text-medusa-tag-neutral-text border whitespace-break-spaces",
           "font-monospace text-code-label rounded-docs_sm py-0 px-[5px]",
           variant === "default" && [
             "bg-medusa-tag-neutral-bg group-hover:bg-medusa-tag-neutral-bg-hover",