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

* docs: open AI assistant based on search query

* use URLSearchParams

* fix vale error

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 { AiAssistantThreadItem as AiAssistantThreadItemType } from "../../../../providers"
+import {
+  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,36 +46,59 @@ export const AiAssistantThreadItemActions = ({
   }
 
   return (
-    <div className={clsx("flex gap-docs_0.75 justify-between items-center")}>
-      {item.sources !== undefined && item.sources.length > 0 && (
-        <div className="flex gap-[6px] items-center flex-wrap">
-          {item.sources.map((source) => (
-            <Badge key={source.source_url} variant="neutral">
-              <Link href={source.source_url} className="!text-inherit">
-                {source.title}
-              </Link>
-            </Badge>
-          ))}
+    <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>
       )}
-      <div className="flex gap-docs_0.25 items-center text-medusa-fg-muted">
-        {(feedback === null || feedback === "upvote") && (
-          <ActionButton
-            onClick={async () => handleFeedback("upvote", item.question_id)}
-            className={clsx(feedback === "upvote" && "!text-medusa-fg-muted")}
-          >
-            <ThumbUp />
-          </ActionButton>
-        )}
-        {(feedback === null || feedback === "downvote") && (
-          <ActionButton
-            onClick={async () => handleFeedback("downvote", item.question_id)}
-            className={clsx(feedback === "downvote" && "!text-medusa-fg-muted")}
-          >
-            <ThumbDown />
-          </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) => (
+                <Badge key={source.source_url} variant="neutral">
+                  <Link href={source.source_url} className="!text-inherit">
+                    {source.title}
+                  </Link>
+                </Badge>
+              ))}
+            </div>
+          )}
+          <div className="flex gap-docs_0.25 items-center text-medusa-fg-muted">
+            {(feedback === null || feedback === "upvote") && (
+              <ActionButton
+                onClick={async () => handleFeedback("upvote", item.question_id)}
+                className={clsx(
+                  feedback === "upvote" && "!text-medusa-fg-muted"
+                )}
+              >
+                <ThumbUp />
+              </ActionButton>
+            )}
+            {(feedback === null || feedback === "downvote") && (
+              <ActionButton
+                onClick={async () =>
+                  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,80 +41,89 @@ export const AiAssistantThreadItem = ({ item }: AiAssistantThreadItemProps) => {
       <div
         className={clsx(
           "txt-small text-medusa-fg-base",
-          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]",
-          ],
+          "flex flex-col gap-docs_0.75",
           item.type !== "question" && "flex-1",
           item.type === "answer" && "text-pretty flex-1 max-w-[calc(100%-20px)]"
         )}
       >
-        {item.type === "question" && (
-          <MarkdownContent
-            className="[&>*:last-child]:mb-0"
-            allowedElements={["br", "p", "code", "pre"]}
-            unwrapDisallowed={true}
-            components={{
-              ...MDXComponents,
-              code: (props: CodeMdxProps) => {
-                return (
-                  <CodeMdx
-                    {...props}
-                    noCopy
-                    noReport
-                    forceNoTitle
-                    noAskAi
-                    inlineCodeProps={{
-                      ...props.inlineCodeProps,
-                      className: "!text-wrap !break-words",
-                      variant: "grey-bg",
-                    }}
-                    collapsibleLines="11"
-                    codeBlockProps={{
-                      className: clsx(
-                        "rounded-docs_lg p-[5px]",
-                        props.className
-                      ),
-                      wrapperClassName: "rounded-docs_lg",
-                      innerClassName: "border rounded-docs_lg",
-                      overrideColors: {
-                        bg: "bg-medusa-contrast-bg-subtle",
-                        innerBg: "bg-medusa-contrast-bg-subtle",
-                        innerBorder: "border-medusa-contrast-border-bot",
-                      },
-                    }}
-                  />
-                )
-              },
-            }}
-          >
-            {item.content}
-          </MarkdownContent>
-        )}
-        {item.type === "answer" && (
-          <div className="flex flex-col gap-docs_0.75">
-            {showLoading && <DotsLoading />}
+        <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" && (
             <MarkdownContent
               className="[&>*:last-child]:mb-0"
+              allowedElements={["br", "p", "code", "pre"]}
+              unwrapDisallowed={true}
               components={{
                 ...MDXComponents,
                 code: (props: CodeMdxProps) => {
                   return (
                     <CodeMdx
                       {...props}
+                      noCopy
                       noReport
+                      forceNoTitle
                       noAskAi
-                      wrapperClassName="mt-docs_1"
+                      inlineCodeProps={{
+                        ...props.inlineCodeProps,
+                        className: "!text-wrap !break-words",
+                        variant: "grey-bg",
+                      }}
+                      collapsibleLines="11"
+                      codeBlockProps={{
+                        className: clsx(
+                          "rounded-docs_lg p-[5px]",
+                          props.className
+                        ),
+                        wrapperClassName: "rounded-docs_lg",
+                        innerClassName: "border rounded-docs_lg",
+                        overrideColors: {
+                          bg: "bg-medusa-contrast-bg-subtle",
+                          innerBg: "bg-medusa-contrast-bg-subtle",
+                          innerBorder: "border-medusa-contrast-border-bot",
+                        },
+                      }}
                     />
                   )
                 },
               }}
-              disallowedElements={["h1", "h2", "h3", "h4", "h5", "h6"]}
             >
               {item.content}
             </MarkdownContent>
-            {item.question_id && <AiAssistantThreadItemActions item={item} />}
-          </div>
+          )}
+          {item.type === "answer" && (
+            <>
+              {showLoading && <DotsLoading />}
+              <MarkdownContent
+                className="[&>*:last-child]:mb-0"
+                components={{
+                  ...MDXComponents,
+                  code: (props: CodeMdxProps) => {
+                    return (
+                      <CodeMdx
+                        {...props}
+                        noReport
+                        noAskAi
+                        wrapperClassName="mt-docs_1"
+                      />
+                    )
+                  },
+                }}
+                disallowedElements={["h1", "h2", "h3", "h4", "h5", "h6"]}
+              >
+                {item.content}
+              </MarkdownContent>
+            </>
+          )}
+        </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",