From db0fe0fc91a684c650c805d92fdf622f8e522d41 Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Fri, 18 Apr 2025 13:18:27 +0300 Subject: [PATCH] docs: add LLM dropdown menu to documentation pages (#12235) * docs: add LLM dropdown menu to documentation pages * fix build errors --- www/apps/api-reference/markdown/admin.mdx | 2 +- www/apps/api-reference/markdown/store.mdx | 2 +- www/apps/book/app/_not-found.mdx | 4 +- www/apps/resources/app/not-found.mdx | 4 +- .../ui/src/app/(content)/[[...slug]]/page.tsx | 3 +- www/apps/ui/src/app/not-found.mdx | 4 +- www/apps/ui/src/app/not-found.tsx | 2 +- .../{[...slug] => [[...slug]]}/route.ts | 0 www/apps/user-guide/app/not-found.mdx | 4 +- .../src/components/Heading/H1/index.tsx | 23 +++--- .../src/components/Icons/Markdown/index.tsx | 25 +++++++ .../src/components/LlmDropdown/index.tsx | 72 +++++++++++++++++++ .../src/components/Menu/Item/index.tsx | 2 + www/packages/types/src/menu.ts | 1 + 14 files changed, 127 insertions(+), 21 deletions(-) rename www/apps/user-guide/app/md-content/{[...slug] => [[...slug]]}/route.ts (100%) create mode 100644 www/packages/docs-ui/src/components/Icons/Markdown/index.tsx create mode 100644 www/packages/docs-ui/src/components/LlmDropdown/index.tsx diff --git a/www/apps/api-reference/markdown/admin.mdx b/www/apps/api-reference/markdown/admin.mdx index b866601c15..7168c3f43a 100644 --- a/www/apps/api-reference/markdown/admin.mdx +++ b/www/apps/api-reference/markdown/admin.mdx @@ -17,7 +17,7 @@ import ClientLibraries from "./client-libraries.mdx" -

Medusa V2 Admin API Reference

+

Medusa V2 Admin API Reference

This API reference includes Medusa v2's Admin APIs, which are REST APIs exposed by the Medusa application. They are used to perform admin functionalities or create an admin dashboard to access and manipulate your commerce store's data. diff --git a/www/apps/api-reference/markdown/store.mdx b/www/apps/api-reference/markdown/store.mdx index 6c5b8f58ab..931512b807 100644 --- a/www/apps/api-reference/markdown/store.mdx +++ b/www/apps/api-reference/markdown/store.mdx @@ -17,7 +17,7 @@ import ClientLibraries from "./client-libraries.mdx" -

Medusa V2 Store API Reference

+

Medusa V2 Store API Reference

This API reference includes Medusa v2's Store APIs, which are REST APIs exposed by the Medusa application. They are used to create a storefront for your commerce store, such as a webshop or a commerce mobile app. diff --git a/www/apps/book/app/_not-found.mdx b/www/apps/book/app/_not-found.mdx index c171f78a31..5d509cb754 100644 --- a/www/apps/book/app/_not-found.mdx +++ b/www/apps/book/app/_not-found.mdx @@ -1,4 +1,4 @@ -import { CardList } from "docs-ui" +import { CardList, H1 } from "docs-ui" import { BookOpen, AcademicCapSolid, @@ -10,7 +10,7 @@ export const metadata = { title: `Page Not Found`, } -# {metadata.title} +

{metadata.title}

The page you were looking for isn't available. diff --git a/www/apps/resources/app/not-found.mdx b/www/apps/resources/app/not-found.mdx index 1913ab3d04..85074422ce 100644 --- a/www/apps/resources/app/not-found.mdx +++ b/www/apps/resources/app/not-found.mdx @@ -1,4 +1,4 @@ -import { CardList } from "docs-ui" +import { CardList, H1 } from "docs-ui" import { BookOpen, AcademicCapSolid, @@ -10,7 +10,7 @@ export const metadata = { title: `Page Not Found`, } -# {metadata.title} +

{metadata.title}

The page you were looking for isn't available. diff --git a/www/apps/ui/src/app/(content)/[[...slug]]/page.tsx b/www/apps/ui/src/app/(content)/[[...slug]]/page.tsx index 5ce4f9b1cc..407f1fc4cd 100644 --- a/www/apps/ui/src/app/(content)/[[...slug]]/page.tsx +++ b/www/apps/ui/src/app/(content)/[[...slug]]/page.tsx @@ -5,6 +5,7 @@ import { notFound } from "next/navigation" import { Mdx } from "@/components/mdx-components" import { siteConfig } from "@/config/site" import { Metadata } from "next" +import { H1 } from "docs-ui" interface DocPageProps { params: Promise<{ @@ -58,7 +59,7 @@ export default async function DocPage(props: DocPageProps) { return (
-

{doc.title}

+

{doc.title}

{doc.description} diff --git a/www/apps/ui/src/app/not-found.mdx b/www/apps/ui/src/app/not-found.mdx index 1913ab3d04..85074422ce 100644 --- a/www/apps/ui/src/app/not-found.mdx +++ b/www/apps/ui/src/app/not-found.mdx @@ -1,4 +1,4 @@ -import { CardList } from "docs-ui" +import { CardList, H1 } from "docs-ui" import { BookOpen, AcademicCapSolid, @@ -10,7 +10,7 @@ export const metadata = { title: `Page Not Found`, } -# {metadata.title} +

{metadata.title}

The page you were looking for isn't available. diff --git a/www/apps/ui/src/app/not-found.tsx b/www/apps/ui/src/app/not-found.tsx index 5fae8d22a9..380f396ddc 100644 --- a/www/apps/ui/src/app/not-found.tsx +++ b/www/apps/ui/src/app/not-found.tsx @@ -20,7 +20,7 @@ export default function NotFound() { return (
{/* @ts-expect-error React v19 doesn't recognize these as elements. */} -

Page Not Found

+

Page Not Found

{/* @ts-expect-error React v19 doesn't recognize these as elements. */}

The page you were looking for isn't available.

{/* @ts-expect-error React v19 doesn't recognize these as elements. */} diff --git a/www/apps/user-guide/app/md-content/[...slug]/route.ts b/www/apps/user-guide/app/md-content/[[...slug]]/route.ts similarity index 100% rename from www/apps/user-guide/app/md-content/[...slug]/route.ts rename to www/apps/user-guide/app/md-content/[[...slug]]/route.ts diff --git a/www/apps/user-guide/app/not-found.mdx b/www/apps/user-guide/app/not-found.mdx index 1913ab3d04..85074422ce 100644 --- a/www/apps/user-guide/app/not-found.mdx +++ b/www/apps/user-guide/app/not-found.mdx @@ -1,4 +1,4 @@ -import { CardList } from "docs-ui" +import { CardList, H1 } from "docs-ui" import { BookOpen, AcademicCapSolid, @@ -10,7 +10,7 @@ export const metadata = { title: `Page Not Found`, } -# {metadata.title} +

{metadata.title}

The page you were looking for isn't available. diff --git a/www/packages/docs-ui/src/components/Heading/H1/index.tsx b/www/packages/docs-ui/src/components/Heading/H1/index.tsx index 677424b2e1..2566b50994 100644 --- a/www/packages/docs-ui/src/components/Heading/H1/index.tsx +++ b/www/packages/docs-ui/src/components/Heading/H1/index.tsx @@ -1,19 +1,24 @@ import clsx from "clsx" import React from "react" +import { LlmDropdown } from "../../LlmDropdown" type H1Props = React.HTMLAttributes & { id?: string + hideLlmDropdown?: boolean } -export const H1 = ({ className, ...props }: H1Props) => { +export const H1 = ({ className, hideLlmDropdown, ...props }: H1Props) => { return ( -

+
+

+ {!hideLlmDropdown && } +

) } diff --git a/www/packages/docs-ui/src/components/Icons/Markdown/index.tsx b/www/packages/docs-ui/src/components/Icons/Markdown/index.tsx new file mode 100644 index 0000000000..160e698e06 --- /dev/null +++ b/www/packages/docs-ui/src/components/Icons/Markdown/index.tsx @@ -0,0 +1,25 @@ +import React from "react" +import { IconProps } from "@medusajs/icons/dist/types" + +export const MarkdownIcon = (props: IconProps) => { + return ( + + + + + + + + ) +} diff --git a/www/packages/docs-ui/src/components/LlmDropdown/index.tsx b/www/packages/docs-ui/src/components/LlmDropdown/index.tsx new file mode 100644 index 0000000000..eb5074157f --- /dev/null +++ b/www/packages/docs-ui/src/components/LlmDropdown/index.tsx @@ -0,0 +1,72 @@ +"use client" + +import React, { useRef, useState } from "react" +import { useAiAssistant, useSiteConfig } from "../../providers" +import { usePathname } from "next/navigation" +import { Button } from "../Button" +import { AiAssistent, Book } from "@medusajs/icons" +import { Menu } from "../Menu" +import { MarkdownIcon } from "../Icons/Markdown" +import { useAiAssistantChat } from "../../providers/AiAssistant/Chat" +import clsx from "clsx" +import { useClickOutside } from "../.." + +export const LlmDropdown = () => { + const { + config: { baseUrl, basePath }, + } = useSiteConfig() + const pathname = usePathname() + const [open, setOpen] = useState(false) + const { setChatOpened } = useAiAssistant() + const { setQuestion, loading } = useAiAssistantChat() + const ref = useRef(null) + useClickOutside({ + elmRef: ref, + onClickOutside: () => { + setOpen(false) + }, + }) + + const pageUrl = `${baseUrl}${basePath}${pathname}` + + return ( +
+ + , + openInNewTab: true, + }, + { + type: "action", + title: "Ask AI Assistant", + action: () => { + if (loading) { + return + } + setQuestion(`Explain the page ${pageUrl}`) + setChatOpened(true) + setOpen(false) + }, + icon: , + }, + ]} + className={clsx( + "absolute right-0 top-[calc(100%+8px)] w-max", + !open && "hidden" + )} + /> +
+ ) +} diff --git a/www/packages/docs-ui/src/components/Menu/Item/index.tsx b/www/packages/docs-ui/src/components/Menu/Item/index.tsx index 2612e29218..b92fb2ca02 100644 --- a/www/packages/docs-ui/src/components/Menu/Item/index.tsx +++ b/www/packages/docs-ui/src/components/Menu/Item/index.tsx @@ -22,6 +22,8 @@ export const MenuItem = ({ item, onClick }: MenuItemProps) => { )} href={item.link} onClick={() => onClick?.(item)} + target={item.openInNewTab ? "_blank" : undefined} + rel={item.openInNewTab ? "noopener noreferrer" : undefined} > {item.icon && ( diff --git a/www/packages/types/src/menu.ts b/www/packages/types/src/menu.ts index 03a78b1856..0133363e8e 100644 --- a/www/packages/types/src/menu.ts +++ b/www/packages/types/src/menu.ts @@ -3,6 +3,7 @@ export type MenuItemLink = { icon?: React.ReactNode title: string link: string + openInNewTab?: boolean } export type MenuItemDivider = {