diff --git a/www/apps/api-reference/components/Tags/Operation/CodeSection/index.tsx b/www/apps/api-reference/components/Tags/Operation/CodeSection/index.tsx index d22922eb2c..c13430fd95 100644 --- a/www/apps/api-reference/components/Tags/Operation/CodeSection/index.tsx +++ b/www/apps/api-reference/components/Tags/Operation/CodeSection/index.tsx @@ -36,7 +36,7 @@ const TagOperationCodeSection = ({ >
- + {endpointPath}
diff --git a/www/apps/api-reference/components/Tags/Operation/DescriptionSection/index.tsx b/www/apps/api-reference/components/Tags/Operation/DescriptionSection/index.tsx index 396b1ecda8..fd855e58b6 100644 --- a/www/apps/api-reference/components/Tags/Operation/DescriptionSection/index.tsx +++ b/www/apps/api-reference/components/Tags/Operation/DescriptionSection/index.tsx @@ -53,7 +53,7 @@ const TagsOperationDescriptionSection = ({ {operation["x-featureFlag"] && ( )} diff --git a/www/apps/api-reference/components/VersionSwitcher/index.tsx b/www/apps/api-reference/components/VersionSwitcher/index.tsx index 980a4e6760..7bca27b361 100644 --- a/www/apps/api-reference/components/VersionSwitcher/index.tsx +++ b/www/apps/api-reference/components/VersionSwitcher/index.tsx @@ -16,7 +16,7 @@ const VersionSwitcher = () => { location.href = process.env.NEXT_PUBLIC_API_V1_URL + pathname }} /> - V2 + V2 ) } diff --git a/www/apps/api-reference/providers/index.tsx b/www/apps/api-reference/providers/index.tsx index a95d278694..5be4f14097 100644 --- a/www/apps/api-reference/providers/index.tsx +++ b/www/apps/api-reference/providers/index.tsx @@ -1,4 +1,5 @@ import { + AiAssistantProvider, AnalyticsProvider, PageLoadingProvider, ScrollControllerProvider, @@ -21,7 +22,20 @@ const Providers = ({ children }: ProvidersProps) => { - {children} + + + {children} + + diff --git a/www/apps/api-reference/providers/search.tsx b/www/apps/api-reference/providers/search.tsx index 6d784e551d..6ac630c847 100644 --- a/www/apps/api-reference/providers/search.tsx +++ b/www/apps/api-reference/providers/search.tsx @@ -4,8 +4,6 @@ import { usePageLoading, SearchProvider as UiSearchProvider, searchFilters, - AiAssistantIcon, - AiAssistantProvider, } from "docs-ui" import { config } from "../config" import basePathUrl from "../utils/base-path-url" @@ -53,28 +51,6 @@ const SearchProvider = ({ children }: SearchProviderProps) => { ), filterOptions: searchFilters, }} - commands={[ - { - name: "ai-assistant", - icon: , - component: ( - - ), - title: "AI Assistant", - badge: { - variant: "blue", - badgeType: "shaded", - children: "Beta", - }, - }, - ]} > {children} diff --git a/www/apps/api-reference/public/images/ai-assistent-luminosity.png b/www/apps/api-reference/public/images/ai-assistent-luminosity.png new file mode 100644 index 0000000000..dc321b5326 Binary files /dev/null and b/www/apps/api-reference/public/images/ai-assistent-luminosity.png differ diff --git a/www/apps/api-reference/public/images/ai-assistent.png b/www/apps/api-reference/public/images/ai-assistent.png new file mode 100644 index 0000000000..69a06999a3 Binary files /dev/null and b/www/apps/api-reference/public/images/ai-assistent.png differ diff --git a/www/apps/book/app/page.tsx b/www/apps/book/app/page.tsx index dc31d82618..ec8ce9c930 100644 --- a/www/apps/book/app/page.tsx +++ b/www/apps/book/app/page.tsx @@ -1,5 +1,5 @@ import clsx from "clsx" -import { MainNav, RootProviders } from "docs-ui" +import { AiAssistantChatWindow, MainNav, RootProviders } from "docs-ui" import HomepageTopSection from "../components/Homepage/TopSection" import Providers from "../providers" import HomepageLinksSection from "../components/Homepage/LinksSection" @@ -12,12 +12,20 @@ const Homepage = () => { - - + +
{
+ diff --git a/www/apps/book/providers/index.tsx b/www/apps/book/providers/index.tsx index 17bdd196e2..11d92908ff 100644 --- a/www/apps/book/providers/index.tsx +++ b/www/apps/book/providers/index.tsx @@ -1,6 +1,8 @@ "use client" import { + AiAssistantProvider, + AiAssistantProviderProps, AnalyticsProvider, HooksLoader, LearningPathProvider, @@ -16,9 +18,10 @@ import { MainNavProvider } from "./main-nav" type ProvidersProps = { children?: React.ReactNode + aiAssistantProps?: Partial> } -const Providers = ({ children }: ProvidersProps) => { +const Providers = ({ children, aiAssistantProps = {} }: ProvidersProps) => { return ( @@ -29,14 +32,29 @@ const Providers = ({ children }: ProvidersProps) => { - - {children} - + + {children} + + diff --git a/www/apps/book/providers/search.tsx b/www/apps/book/providers/search.tsx index 96bf7e9bd9..1e07e81fcd 100644 --- a/www/apps/book/providers/search.tsx +++ b/www/apps/book/providers/search.tsx @@ -1,11 +1,6 @@ "use client" -import { - AiAssistantIcon, - AiAssistantProvider, - SearchProvider as UiSearchProvider, - searchFilters, -} from "docs-ui" +import { SearchProvider as UiSearchProvider, searchFilters } from "docs-ui" import { config } from "../config" type SearchProviderProps = { @@ -52,28 +47,6 @@ const SearchProvider = ({ children }: SearchProviderProps) => { ), filterOptions: searchFilters, }} - commands={[ - { - name: "ai-assistant", - icon: , - component: ( - - ), - title: "AI Assistant", - badge: { - variant: "blue", - badgeType: "shaded", - children: "Beta", - }, - }, - ]} initialDefaultFilters={["guides"]} > {children} diff --git a/www/apps/book/public/images/ai-assistent-luminosity.png b/www/apps/book/public/images/ai-assistent-luminosity.png new file mode 100644 index 0000000000..dc321b5326 Binary files /dev/null and b/www/apps/book/public/images/ai-assistent-luminosity.png differ diff --git a/www/apps/book/public/images/ai-assistent.png b/www/apps/book/public/images/ai-assistent.png new file mode 100644 index 0000000000..69a06999a3 Binary files /dev/null and b/www/apps/book/public/images/ai-assistent.png differ diff --git a/www/apps/resources/providers/index.tsx b/www/apps/resources/providers/index.tsx index 79bd672a1f..7ea16809a8 100644 --- a/www/apps/resources/providers/index.tsx +++ b/www/apps/resources/providers/index.tsx @@ -1,6 +1,7 @@ "use client" import { + AiAssistantProvider, AnalyticsProvider, HooksLoader, LearningPathProvider, @@ -31,14 +32,28 @@ const Providers = ({ children }: ProvidersProps) => { - - {children} - + + {children} + + diff --git a/www/apps/resources/providers/search.tsx b/www/apps/resources/providers/search.tsx index 9c51fa917b..ad9a7a1b4f 100644 --- a/www/apps/resources/providers/search.tsx +++ b/www/apps/resources/providers/search.tsx @@ -1,11 +1,6 @@ "use client" -import { - AiAssistantIcon, - AiAssistantProvider, - SearchProvider as UiSearchProvider, - searchFilters, -} from "docs-ui" +import { SearchProvider as UiSearchProvider, searchFilters } from "docs-ui" import { config } from "../config" type SearchProviderProps = { @@ -41,28 +36,6 @@ const SearchProvider = ({ children }: SearchProviderProps) => { checkInternalPattern: new RegExp(`^${config.baseUrl}/resources/.*`), filterOptions: searchFilters, }} - commands={[ - { - name: "ai-assistant", - icon: , - component: ( - - ), - title: "AI Assistant", - badge: { - variant: "blue", - badgeType: "shaded", - children: "Beta", - }, - }, - ]} initialDefaultFilters={["guides"]} > {children} diff --git a/www/apps/resources/public/images/ai-assistent-luminosity.png b/www/apps/resources/public/images/ai-assistent-luminosity.png new file mode 100644 index 0000000000..dc321b5326 Binary files /dev/null and b/www/apps/resources/public/images/ai-assistent-luminosity.png differ diff --git a/www/apps/resources/public/images/ai-assistent.png b/www/apps/resources/public/images/ai-assistent.png new file mode 100644 index 0000000000..69a06999a3 Binary files /dev/null and b/www/apps/resources/public/images/ai-assistent.png differ diff --git a/www/apps/ui/public/images/ai-assistent-luminosity.png b/www/apps/ui/public/images/ai-assistent-luminosity.png new file mode 100644 index 0000000000..dc321b5326 Binary files /dev/null and b/www/apps/ui/public/images/ai-assistent-luminosity.png differ diff --git a/www/apps/ui/public/images/ai-assistent.png b/www/apps/ui/public/images/ai-assistent.png new file mode 100644 index 0000000000..69a06999a3 Binary files /dev/null and b/www/apps/ui/public/images/ai-assistent.png differ diff --git a/www/apps/ui/src/components/feedback.tsx b/www/apps/ui/src/components/feedback.tsx index dc6b0e14e3..790372ab23 100644 --- a/www/apps/ui/src/components/feedback.tsx +++ b/www/apps/ui/src/components/feedback.tsx @@ -23,7 +23,7 @@ export const Feedback = ({ title, ...props }: FeedbackProps) => { section: title, }} {...props} - className={clsx("text-medusa-fg-subtle", props.className)} + className={clsx("text-medusa-fg-base", props.className)} /> ) } diff --git a/www/apps/ui/src/providers/index.tsx b/www/apps/ui/src/providers/index.tsx index eb0d4eab6d..69ce45a56e 100644 --- a/www/apps/ui/src/providers/index.tsx +++ b/www/apps/ui/src/providers/index.tsx @@ -1,6 +1,7 @@ "use client" import { + AiAssistantProvider, AnalyticsProvider, ScrollControllerProvider, SiteConfigProvider, @@ -23,7 +24,16 @@ const Providers = ({ children }: ProvidersProps) => { - {children} + + {children} + diff --git a/www/apps/ui/src/providers/search.tsx b/www/apps/ui/src/providers/search.tsx index ca67dd9c22..59b134caed 100644 --- a/www/apps/ui/src/providers/search.tsx +++ b/www/apps/ui/src/providers/search.tsx @@ -1,11 +1,6 @@ "use client" -import { - AiAssistantIcon, - AiAssistantProvider, - SearchProvider as UiSearchProvider, - searchFilters, -} from "docs-ui" +import { SearchProvider as UiSearchProvider, searchFilters } from "docs-ui" import { absoluteUrl } from "../lib/absolute-url" type SearchProviderProps = { @@ -37,29 +32,6 @@ const SearchProvider = ({ children }: SearchProviderProps) => { filterOptions: searchFilters, }} initialDefaultFilters={["ui"]} - commands={[ - { - name: "ai-assistant", - icon: , - component: ( - - ), - title: "AI Assistant", - badge: { - variant: "blue", - badgeType: "shaded", - children: "Beta", - }, - }, - ]} > {children} diff --git a/www/apps/ui/src/styles/globals.css b/www/apps/ui/src/styles/globals.css index eeb459ba4b..ac4daf4dc5 100644 --- a/www/apps/ui/src/styles/globals.css +++ b/www/apps/ui/src/styles/globals.css @@ -28,7 +28,7 @@ } body { - @apply text-ui-fg-subtle; + @apply text-ui-fg-base; } /* Hack to hide navbar / toc when some components like prompt are opened. */ diff --git a/www/apps/user-guide/providers/index.tsx b/www/apps/user-guide/providers/index.tsx index 45892c649b..84a0dd0837 100644 --- a/www/apps/user-guide/providers/index.tsx +++ b/www/apps/user-guide/providers/index.tsx @@ -1,6 +1,7 @@ "use client" import { + AiAssistantProvider, AnalyticsProvider, ColorModeProvider, HooksLoader, @@ -35,13 +36,28 @@ const Providers = ({ children }: ProvidersProps) => { - - {children} - + + {children} + + diff --git a/www/apps/user-guide/providers/search.tsx b/www/apps/user-guide/providers/search.tsx index bf3125ce4b..f97179ef91 100644 --- a/www/apps/user-guide/providers/search.tsx +++ b/www/apps/user-guide/providers/search.tsx @@ -1,11 +1,6 @@ "use client" -import { - SearchProvider as UiSearchProvider, - AiAssistantIcon, - AiAssistantProvider, - searchFilters, -} from "docs-ui" +import { SearchProvider as UiSearchProvider, searchFilters } from "docs-ui" import { config } from "../config" type SearchProviderProps = { @@ -46,28 +41,6 @@ const SearchProvider = ({ children }: SearchProviderProps) => { }} // TODO change later when we have a user guide filter initialDefaultFilters={["guides"]} - commands={[ - { - name: "ai-assistant", - icon: , - component: ( - - ), - title: "AI Assistant", - badge: { - variant: "blue", - children: "Beta", - badgeType: "shaded", - }, - }, - ]} > {children} diff --git a/www/apps/user-guide/public/images/ai-assistent-luminosity.png b/www/apps/user-guide/public/images/ai-assistent-luminosity.png new file mode 100644 index 0000000000..dc321b5326 Binary files /dev/null and b/www/apps/user-guide/public/images/ai-assistent-luminosity.png differ diff --git a/www/apps/user-guide/public/images/ai-assistent.png b/www/apps/user-guide/public/images/ai-assistent.png new file mode 100644 index 0000000000..69a06999a3 Binary files /dev/null and b/www/apps/user-guide/public/images/ai-assistent.png differ diff --git a/www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Footer/index.tsx b/www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Footer/index.tsx new file mode 100644 index 0000000000..f5ec39c8aa --- /dev/null +++ b/www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Footer/index.tsx @@ -0,0 +1,29 @@ +import React from "react" +import clsx from "clsx" +import { Kbd } from "../../../Kbd" + +export const AiAssistantChatWindowFooter = () => { + return ( +
+ Chat is cleared on refresh + +
+ Line break +
+ + ⇧ + + + ↵ + +
+
+
+ ) +} diff --git a/www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Header/index.tsx b/www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Header/index.tsx new file mode 100644 index 0000000000..ac5fc37376 --- /dev/null +++ b/www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Header/index.tsx @@ -0,0 +1,48 @@ +"use client" + +import clsx from "clsx" +import React from "react" +import { Tooltip } from "../../../Tooltip" +import { Link } from "../../../Link" +import { ShieldCheck, XMark } from "@medusajs/icons" +import { Button } from "../../../Button" +import { useAiAssistant } from "../../../../providers" + +export const AiAssistantChatWindowHeader = () => { + const { setChatOpened } = useAiAssistant() + return ( +
+
+ Ask Anything + + This site is protected by reCAPTCHA and the{" "} + + Google Privacy Policy + {" "} + and ToS{" "} + apply + + } + clickable={true} + > + + +
+ +
+ ) +} diff --git a/www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Input/index.tsx b/www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Input/index.tsx new file mode 100644 index 0000000000..7e1e6d6daa --- /dev/null +++ b/www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Input/index.tsx @@ -0,0 +1,106 @@ +import React, { useEffect, useRef } from "react" +import clsx from "clsx" +import { useAiAssistantChat } from "../../../../providers/AiAssistant/Chat" +import { ArrowUpCircleSolid } from "@medusajs/icons" + +export const AiAssistantChatWindowInput = () => { + const { + inputRef, + question, + setQuestion, + handleSubmit: submitQuestion, + loading, + getThreadItems, + } = useAiAssistantChat() + const formRef = useRef(null) + + const onSubmit = (e?: React.FormEvent) => { + e?.preventDefault() + submitQuestion() + } + + const handleKeyboardDown = (e: React.KeyboardEvent) => { + if (e.key === "ArrowUp" && !question) { + const lastQuestion = getThreadItems() + .reverse() + .find((item) => item.type === "question") + if (lastQuestion) { + setQuestion(lastQuestion.content) + } + return + } + if (e.key !== "Enter") { + return + } + if (e.shiftKey) { + setQuestion((prev) => `${prev}\n`) + } else { + onSubmit() + } + } + + const adjustTextareaHeight = () => { + if (!inputRef.current) { + return + } + if (!question.length) { + inputRef.current.style.height = "auto" + return + } + inputRef.current.style.height = `${inputRef.current.scrollHeight}px` + } + + useEffect(() => { + adjustTextareaHeight() + }, [question]) + + const handleTouch = (e: React.TouchEvent) => { + e.preventDefault() + inputRef.current?.focus({ + preventScroll: true, + }) + } + + return ( +
+
+