docs: add deep thinking to AI assistant (medusajs#13770)

* docs: add deep thinking to AI assistant

* add disabled styling

Author: shahednasser

www/packages/docs-ui/package.json

@@ -58,7 +58,7 @@
   },
   "dependencies": {
     "@emotion/is-prop-valid": "^1.3.1",
-    "@kapaai/react-sdk": "^0.3.0",
+    "@kapaai/react-sdk": "^0.9.0",
     "@medusajs/icons": "2.10.3",
     "@medusajs/ui": "4.0.23",
     "@next/third-parties": "15.3.5",

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

@@ -1,9 +1,10 @@
 import React, { useEffect, useMemo, useRef } from "react"
 import clsx from "clsx"
-import { ArrowUpCircleSolid } from "@medusajs/icons"
+import { ArrowUpCircleSolid, LightBulb, LightBulbSolid } from "@medusajs/icons"
 import { useAiAssistant, useIsBrowser } from "../../../../providers"
-import { useChat } from "@kapaai/react-sdk"
+import { useChat, useDeepThinking } from "@kapaai/react-sdk"
 import { useAiAssistantChatNavigation } from "../../../../hooks"
+import { Tooltip } from "../../../Tooltip"
 
 type AiAssistantChatWindowInputProps = {
   chatWindowRef: React.RefObject<HTMLDivElement | null>
@@ -15,6 +16,7 @@ export const AiAssistantChatWindowInput = ({
   const { chatOpened, inputRef, loading, setChatOpened, isCaptchaLoaded } =
     useAiAssistant()
   const { submitQuery, conversation } = useChat()
+  const { active, toggle } = useDeepThinking()
   const { isBrowser } = useIsBrowser()
   const { searchQuery, searchQueryType } = useMemo(() => {
     if (!isBrowser) {
@@ -156,13 +158,43 @@ export const AiAssistantChatWindowInput = ({
           placeholder="Ask me a question about Medusa..."
           disabled={loading}
         />
-        <div className="flex items-center justify-end">
+        <div className="flex items-center justify-between">
+          <Tooltip
+            tooltipChildren={
+              <span>
+                Get better answers for complex questions.
+                <br />
+                Results may take up to 1 minute.
+              </span>
+            }
+          >
+            <button
+              onClick={toggle}
+              disabled={loading}
+              className={clsx(
+                "txt-compact-xsmall-plus appearance-none transition-colors flex items-center gap-docs_0.25 px-docs_0.5 py-docs_0.25 rounded-docs_sm",
+                !active &&
+                  "bg-transparent hover:bg-medusa-button-transparent-hover text-medusa-fg-muted hover:text-medusa-fg-subtle",
+                active &&
+                  "bg-medusa-tag-orange-bg hover:bg-medusa-tag-orange-bg-hover text-medusa-tag-orange-text",
+                loading && "cursor-not-allowed opacity-50"
+              )}
+              type="button"
+            >
+              {!active && <LightBulb />}
+              {active && (
+                <LightBulbSolid className="text-medusa-tag-orange-icon" />
+              )}
+              Deep Thinking
+            </button>
+          </Tooltip>
           <button
             className={clsx(
               "appearance-none p-0 text-medusa-fg-base disabled:text-medusa-fg-disabled",
               "transition-colors"
             )}
             disabled={!question || loading || !isCaptchaLoaded}
+            type="submit"
           >
             <ArrowUpCircleSolid />
           </button>

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

@@ -16,6 +16,7 @@ export type ButtonProps = {
   className?: string
   buttonType?: ButtonType
   buttonRef?: React.LegacyRef<HTMLButtonElement>
+  type?: "button" | "submit" | "reset"
 } & React.HTMLAttributes<HTMLButtonElement>
 
 export const Button = ({

www/yarn.lock

@@ -790,32 +790,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fingerprintjs/fingerprintjs-pro-react@npm:^2.6.3":
-  version: 2.7.0
-  resolution: "@fingerprintjs/fingerprintjs-pro-react@npm:2.7.0"
+"@fingerprintjs/fingerprintjs-pro-react@npm:^2.7.0":
+  version: 2.7.1
+  resolution: "@fingerprintjs/fingerprintjs-pro-react@npm:2.7.1"
   dependencies:
-    "@fingerprintjs/fingerprintjs-pro-spa": ^1.3.2
+    "@fingerprintjs/fingerprintjs-pro-spa": ^1.3.3
     fast-deep-equal: 3.1.3
-  checksum: 8892e325885ba4d5a10ffc48764dc016dcff73c1fc356c9aff245fbdb48c17b5b99c74ad280017f6739d0f035e505ece0006ad74116fc947bcb7c6042591d6a5
+  checksum: b815f631be86cc9ff86be4f50b365b041af23e635661c44e37953d8c4c2e3add627c4314a38bf72176ccbd8c608b417da97b7396bf58cda5973121fafcb81efc
   languageName: node
   linkType: hard
 
-"@fingerprintjs/fingerprintjs-pro-spa@npm:^1.3.2":
-  version: 1.3.2
-  resolution: "@fingerprintjs/fingerprintjs-pro-spa@npm:1.3.2"
+"@fingerprintjs/fingerprintjs-pro-spa@npm:^1.3.3":
+  version: 1.3.3
+  resolution: "@fingerprintjs/fingerprintjs-pro-spa@npm:1.3.3"
   dependencies:
-    "@fingerprintjs/fingerprintjs-pro": ^3.11.0
+    "@fingerprintjs/fingerprintjs-pro": ^3.12.0
     tslib: ^2.7.0
-  checksum: a53fb7be19fe04dcb9705bcbd790ff7a411864ab031044193292046cbd63ec1c80672ed67a5b5326eef0320af35f21853281294fca471148c25ceb1aca24b555
+  checksum: 1049753761ed0fe25085b874529d9dfa377326fb82aa6e1c09cdfacd2d059b5d8b5f5e27d1c56ed3b08ea39ce36de5746e793d3294eba124d8f91af7ca394b76
   languageName: node
   linkType: hard
 
-"@fingerprintjs/fingerprintjs-pro@npm:^3.11.0":
-  version: 3.11.10
-  resolution: "@fingerprintjs/fingerprintjs-pro@npm:3.11.10"
-  dependencies:
-    tslib: ^2.4.1
-  checksum: 981cdeabaf63da38062ed4864193d13df44aa5bd2654135d75866d4f4d06e60cceb8711973d2d881820ebb05b5a05d7ee0ffba1b0990c2f13ae5b5e72e0a3b71
+"@fingerprintjs/fingerprintjs-pro@npm:^3.12.0":
+  version: 3.12.3
+  resolution: "@fingerprintjs/fingerprintjs-pro@npm:3.12.3"
+  checksum: 660790bbf6cecfdf00f00b93cab60385d6bc959f46c3d31933dc92585afd16e3c48e8300e8df925ba774ffa66b6e1fb7d909fea2c44fd1608c62aefed4791871
   languageName: node
   linkType: hard
 
@@ -1263,19 +1261,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@kapaai/react-sdk@npm:^0.3.0":
-  version: 0.3.0
-  resolution: "@kapaai/react-sdk@npm:0.3.0"
+"@kapaai/react-sdk@npm:^0.9.0":
+  version: 0.9.0
+  resolution: "@kapaai/react-sdk@npm:0.9.0"
   dependencies:
-    "@fingerprintjs/fingerprintjs-pro-react": ^2.6.3
+    "@fingerprintjs/fingerprintjs-pro-react": ^2.7.0
     "@hcaptcha/react-hcaptcha": ^1.12.0
     "@tanstack/react-query": ^5.74.3
     js-cookie: ^3.0.5
     tldts: ^7.0.7
   peerDependencies:
     react: ">=17.0.0"
     react-dom: ">=17.0.0"
-  checksum: 5e68cbebcbe74940e1894e8b1d6e93f78dce45b7571556846ee07fbb8d91774b8fc60162548477aecddfb038caec2601f55a5ebcc34d7f91098f53aec5efe9ce
+  checksum: d3fc9de9b2b5e176d2905ef75d012b130320be281cab236154e8faac8b5e0cc574c4b23c07da7ffd2bdccbf2ea281828ec222c2d80d6214092ec4295896f5c09
   languageName: node
   linkType: hard
 
@@ -7175,7 +7173,7 @@ __metadata:
   resolution: "docs-ui@workspace:packages/docs-ui"
   dependencies:
     "@emotion/is-prop-valid": ^1.3.1
-    "@kapaai/react-sdk": ^0.3.0
+    "@kapaai/react-sdk": ^0.9.0
     "@medusajs/icons": 2.10.3
     "@medusajs/ui": 4.0.23
     "@next/third-parties": 15.3.5