docs: improve AI Assistant (#11208)

* initial implementation * integrate new ai assistant in other projects + ux improvements * fix chat window on mobile devices * fixes to mobile * allow pre * change shortcut to i * improved responsiveness * align version in navbar
2025-01-29 19:13:51 +02:00
parent 51d2960a57
commit 5634a4762b
57 changed files with 1571 additions and 743 deletions
@@ -0,0 +1,71 @@
+"use client"
+
+import React, { useMemo, useState } from "react"
+import { Button } from "../../Button"
+import { Tooltip } from "../../Tooltip"
+import { Kbd } from "../../Kbd"
+import { getOsShortcut } from "../../../utils"
+import { useAiAssistant, useSearch, useSiteConfig } from "../../../providers"
+import { useKeyboardShortcut } from "../../../hooks"
+import Image from "next/image"
+
+const AI_ASSISTANT_ICON = "/images/ai-assistent-luminosity.png"
+const AI_ASSISTANT_ICON_ACTIVE = "/images/ai-assistent.png"
+
+export const AiAssistantTriggerButton = () => {
+  const [hovered, setHovered] = useState(false)
+  const { config } = useSiteConfig()
+  const { chatOpened, setChatOpened } = useAiAssistant()
+  const { setIsOpen } = useSearch()
+  const isActive = useMemo(() => {
+    return hovered || chatOpened
+  }, [hovered, chatOpened])
+  const osShortcut = getOsShortcut()
+
+  useKeyboardShortcut({
+    metakey: true,
+    shortcutKeys: ["i"],
+    action: () => {
+      setChatOpened((prev) => !prev)
+      setIsOpen(false)
+    },
+    checkEditing: false,
+  })
+
+  return (
+    <Tooltip
+      render={() => (
+        <span className="flex gap-[6px] items-center">
+          <span className="text-compact-x-small-plus text-medusa-fg-base">
+            Ask AI
+          </span>
+          <span className="flex gap-[5px] items-center">
+            <Kbd className="bg-medusa-bg-field-component border-medusa-border-strong w-[18px] h-[18px] inline-block">
+              {osShortcut}
+            </Kbd>
+            <Kbd className="bg-medusa-bg-field-component border-medusa-border-strong w-[18px] h-[18px] inline-block">
+              i
+            </Kbd>
+          </span>
+        </span>
+      )}
+    >
+      <Button
+        variant="transparent-clear"
+        className="!p-[6.5px]"
+        onMouseOver={() => setHovered(true)}
+        onMouseOut={() => setHovered(false)}
+        onTouchStart={() => setHovered(true)}
+        onTouchEnd={() => setHovered(false)}
+        onClick={() => setChatOpened((prev) => !prev)}
+      >
+        <Image
+          src={`${config.basePath}${isActive ? AI_ASSISTANT_ICON_ACTIVE : AI_ASSISTANT_ICON}`}
+          width={15}
+          height={15}
+          alt="AI Assistant"
+        />
+      </Button>
+    </Tooltip>
+  )
+}