asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

docs: changes to AI assistant icon + add button to code blocks (#11227)

Browse Source 
* docs: changes to AI assistant icon + add button to code blocks

* fix code blocks in questions

* collapse code block in answer

* styling fixes

* fix new line at cursor position
This commit is contained in:
Shahed Nasser
2025-01-30 14:29:22 +02:00
committed by GitHub
parent 386ce4b857
commit be33a56290
21 changed files with 294 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/packages/docs-ui/src/components/AiAssistant/TriggerButton/index.tsx
+14 -25
View File
@@ -1,6 +1,6 @@
"use client"
import React, { useMemo, useState } from "react"
import React from "react"
import { Button } from "../../Button"
import { Tooltip } from "../../Tooltip"
import { Kbd } from "../../Kbd"
@@ -9,17 +9,13 @@ 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 = "/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 { setChatOpened } = useAiAssistant()
const { setIsOpen } = useSearch()
const isActive = useMemo(() => {
return hovered || chatOpened
}, [hovered, chatOpened])
const osShortcut = getOsShortcut()
useKeyboardShortcut({
@@ -35,36 +31,29 @@ export const AiAssistantTriggerButton = () => {
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 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>
)}
>
<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}`}
src={`${config.basePath}${AI_ASSISTANT_ICON_ACTIVE}`}
width={15}
height={15}
alt="AI Assistant"
/>
<span className="hidden md:inline-block text-medusa-fg-subtle">
Ask AI
</span>
</Button>
</Tooltip>
)