git0 0.3.16 → 0.3.18

package/docs/components/fumadocs/ai/ask-ai-dropdown.tsx

@@ -0,0 +1,299 @@
+/**
+ * @file ask-ai-dropdown.tsx
+ * @description Dropdown component providing links to various AI providers for page interaction.
+ */
+"use client";
+
+import React, { useMemo } from "react";
+import { ChevronDown, ExternalLinkIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger as PopoverTriggerBase,
+} from "fumadocs-ui/components/ui/popover";
+import { cva } from "class-variance-authority";
+import { buttonVariants } from "../../ui/button";
+
+const PopoverTrigger = PopoverTriggerBase as any;
+
+const optionVariants = cva(
+  "text-sm p-2 rounded-lg inline-flex items-center gap-2 hover:text-fd-accent-foreground hover:bg-fd-accent [&_svg]:size-4",
+);
+
+interface AIProvider {
+  id: string;
+  title: string;
+  getHref: (params: { q: string; githubUrl?: string }) => string;
+  icon?: React.ReactNode;
+}
+
+const AI_PROVIDERS: AIProvider[] = [
+  {
+    id: "github",
+    title: "Open in GitHub",
+    getHref: ({ githubUrl }) => githubUrl || "",
+    icon: (
+      <svg fill="currentColor" role="img" viewBox="0 0 24 24">
+        <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+      </svg>
+    ),
+  },
+  {
+    id: "qwksearch",
+    title: "QwkSearch",
+    getHref: ({ q }) => `https://qwksearch.com/?q=${new URLSearchParams({ q })}`,
+    icon: (
+      <svg
+        role="img"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="
+    M10 1
+    a9 9 0 1 0 0 18
+    a9 9 0 0 0 0 -18
+    z
+    M10 3.7
+    a6.3 6.3 0 1 1 0 12.6
+    a6.3 6.3 0 0 1 0 -12.6
+    z
+  "
+        />
+        <path
+          d="M15.5 15.5 L20.8 20.8"
+          stroke="currentColor"
+          strokeWidth="2.9"
+          strokeLinecap="round"
+          fill="none"
+        />
+        <path
+          d="M4.3 4.3 L1.5 1.5"
+          stroke="currentColor"
+          strokeWidth="2.1"
+          strokeLinecap="round"
+          fill="none"
+        />
+        <circle cx="1.1" cy="1.1" r="1.4" />
+        <path
+          d="M15.7 4.3 L18.5 1.5"
+          stroke="currentColor"
+          strokeWidth="2.1"
+          strokeLinecap="round"
+          fill="none"
+        />
+        <circle cx="18.9" cy="1.1" r="1.4" />
+        <path
+          d="M4.3 15.7 L1.5 18.5"
+          stroke="currentColor"
+          strokeWidth="2.1"
+          strokeLinecap="round"
+          fill="none"
+        />
+        <circle cx="1.1" cy="18.9" r="1.4" />
+      </svg>
+    ),
+  },
+  {
+    id: "claude",
+    title: "Claude",
+    getHref: ({ q }) => `https://claude.ai/new?${new URLSearchParams({ q })}`,
+    icon: (
+      <svg
+        fill="currentColor"
+        role="img"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z" />
+      </svg>
+    ),
+  },
+  {
+    id: "perplexity",
+    title: "Perplexity",
+    getHref: ({ q }) =>
+      `https://www.perplexity.ai/search?${new URLSearchParams({ q })}`,
+    icon: (
+      <svg
+        role="img"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M22.3977 7.0896h-2.3106V.0676l-7.5094 6.3542V.1577h-1.1554v6.1966L4.4904 0v7.0896H1.6023v10.3976h2.8882V24l6.932-6.3591v6.2005h1.1554v-6.0469l6.9318 6.1807v-6.4879h2.8882V7.0896zm-3.4657-4.531v4.531h-5.355l5.355-4.531zm-13.2862.0676 4.8691 4.4634H5.6458V2.6262zM2.7576 16.332V8.245h7.8476l-6.1149 6.1147v1.9723H2.7576zm2.8882 5.0404v-3.8852h.0001v-2.6488l5.7763-5.7764v7.0111l-5.7764 5.2993zm12.7086.0248-5.7766-5.1509V9.0618l5.7766 5.7766v6.5588zm2.8882-5.0652h-1.733v-1.9723L13.3948 8.245h7.8478v8.087z" />
+      </svg>
+    ),
+  },
+  {
+    id: "chatgpt",
+    title: "ChatGPT",
+    getHref: ({ q }) =>
+      `https://chatgpt.com/?${new URLSearchParams({ hints: "search", q })}`,
+    icon: (
+      <svg
+        role="img"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
+      </svg>
+    ),
+  },
+  {
+    id: "gemini",
+    title: "Gemini",
+    getHref: ({ q }) =>
+      `https://aistudio.google.com/prompts/new_chat?prompt=${encodeURIComponent(q)}`,
+    icon: (
+      <svg
+        role="img"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M11.04 19.32Q12 21.51 12 24q0-2.49.93-4.68.96-2.19 2.58-3.81t3.81-2.55Q21.51 12 24 12q-2.49 0-4.68-.93a12.3 12.3 0 0 1-3.81-2.58 12.3 12.3 0 0 1-2.58-3.81Q12 2.49 12 0q0 2.49-.96 4.68-.93 2.19-2.55 3.81a12.3 12.3 0 0 1-3.81 2.58Q2.49 12 0 12q2.49 0 4.68.96 2.19.93 3.81 2.55t2.55 3.81" />
+      </svg>
+    ),
+  },
+  {
+    id: "brave",
+    title: "Brave",
+    getHref: ({ q }) =>
+      `https://search.brave.com/ask?q=${encodeURIComponent(q)}`,
+    icon: (<svg fill="currentColor" viewBox="0 0 14 14" role="img">
+<g strokeWidth="0"/>
+<g strokeLinecap="round" strokeLinejoin="round"/>
+<g >
+<path d="m 6.5,12.77 c -.21,-.13 -.87,-.57 -1.48,-.98 -1.06,-.71 -1.5,-1.05 -1.45,-1.13 .01,-.02 -.01,-.05 -.05,-.06 -.04,-.01 -.06,-.04 -.04,-.07 .01,-.02 0,-.04 -.02,-.04 -.05,0 -.21,-.34 -.23,-.5 -.01,-.05 -.03,-.12 -.05,-.15 -.02,-.03 -.02,-.08 -0,-.1 .02,-.03 .01,-.06 -.01,-.08 -.02,-.01 -.06,-.12 -.09,-.23 -.03,-.11 -.09,-.35 -.14,-.53 -.05,-.18 -.1,-.37 -.11,-.43 -.01,-.05 -.12,-.48 -.24,-.95 -.12,-.47 -.3,-1.12 -.38,-1.45 -.09,-.33 -.19,-.73 -.24,-.9 l -.08,-.3 .19,-.46 c .21,-.51 .21,-.42 -.02,-1.01 l -.1,-.26 .44,-.44 c .45,-.46 .6,-.56 .95,-.65 .17,-.05 .24,-.04 .48,.02 l .28,.08 .25,-.26 c .14,-.14 .38,-.41 .55,-.58 l .3,-.32 1.82,0 1.82,0 .35,.36 c .19,.2 .44,.46 .55,.58 l .2,.22 .28,-.1 c .3,-.11 .34,-.11 .78,.09 .17,.07 1.02,.89 1.07,1.01 .01,.02 -.02,.13 -.07,.23 -.22,.47 -.22,.46 -.02,1 l .18,.49 -.3,1.16 c -.17,.64 -.4,1.53 -.52,2 -.48,1.88 -.54,2.08 -.65,2.29 -.25,.51 -.39,.62 -2.22,1.85 -1.42,.96 -1.38,.95 -1.95,.58 z m 1.07,-2.62 C 7.82,9.93 8.17,9.65 8.36,9.52 c .33,-.23 .4,-.34 .29,-.43 -.1,-.08 -.67,-.37 -1.07,-.54 -.39,-.16 -.73,-.25 -.73,-.19 0,.02 -.04,.04 -.1,.04 -.05,0 -.11,.03 -.11,.05 -.01,.03 -.03,.04 -.06,.02 -.02,-.01 -.04,0 -.04,.02 0,.03 -.03,.04 -.06,.02 -.03,-.01 -.09,.01 -.13,.04 -.04,.04 -.08,.05 -.09,.04 -.01,-.01 -.03,0 -.03,.03 0,.03 -.02,.04 -.04,.03 -.02,-.01 -.04,-.01 -.04,.02 0,.03 -.02,.04 -.04,.02 -.02,-.01 -.04,0 -.04,.02 0,.03 -.02,.04 -.04,.02 -.02,-.01 -.04,-.01 -.04,.02 0,.03 -.02,.04 -.04,.02 -.02,-.01 -.04,-.01 -.04,.02 0,.03 -.02,.04 -.04,.02 -.02,-.01 -.04,-.01 -.04,.02 0,.03 -.02,.04 -.04,.02 -.02,-.01 -.04,-.01 -.04,.02 0,.03 -.01,.04 -.03,.04 -.09,-.01 -.15,.01 -.26,.12 -.11,.1 -.11,.12 -.07,.22 .03,.06 .07,.1 .09,.09 .02,-.01 .05,.01 .07,.05 .01,.04 .04,.06 .06,.04 .01,-.01 .06,.01 .09,.06 .03,.05 .08,.08 .1,.07 .02,-.01 .05,.01 .06,.05 .01,.04 .04,.06 .05,.05 .01,-.01 .06,.02 .11,.07 .04,.05 .08,.08 .08,.06 0,-.02 .05,.03 .12,.1 .06,.08 .13,.13 .14,.12 .01,-.01 .09,.06 .18,.15 .09,.1 .17,.16 .18,.15 .01,-.01 .06,.02 .1,.08 .05,.06 .14,.1 .22,.11 .12,.01 .21,-.05 .59,-.38 z M 5.21,8.77 c 0,-.03 .02,-.04 .04,-.02 .05,.03 .36,-.11 .36,-.16 0,-.02 .02,-.03 .04,-.01 .02,.01 .04,.01 .04,-.02 0,-.03 .02,-.04 .04,-.02 .02,.01 .04,.01 .04,-.02 0,-.03 .02,-.04 .04,-.02 .02,.01 .04,0 .04,-.02 0,-.03 .02,-.04 .04,-.02 .02,.01 .04,.01 .04,-.02 0,-.03 .02,-.04 .04,-.02 .02,.01 .09,-.02 .15,-.08 .06,-.06 .12,-.1 .13,-.09 .01,.01 .1,-.07 .2,-.18 .1,-.11 .18,-.18 .18,-.17 0,.02 .05,-.02 .11,-.07 .06,-.06 .1,-.12 .09,-.14 -.01,-.02 -.01,-.04 .01,-.04 .05,0 .04,-.18 -0,-.26 -.04,-.07 -1.09,-.77 -1.09,-.73 0,.02 -.04,-.02 -.09,-.08 -.11,-.14 -.11,-.21 -0,-.43 .05,-.09 .07,-.18 .06,-.2 -.01,-.01 -0,-.03 .03,-.03 .03,0 .04,-.02 .03,-.04 -.01,-.02 -.01,-.04 .02,-.04 .03,0 .04,-.02 .02,-.04 -.01,-.02 -.01,-.04 .02,-.04 .08,0 .2,-.28 .2,-.5 0,-.12 -.01,-.21 -.03,-.21 -.02,0 -.03,-.02 -.01,-.04 .01,-.02 -.02,-.07 -.06,-.12 -.05,-.04 -.09,-.07 -.09,-.05 0,.02 -.03,0 -.07,-.04 -.04,-.04 -.09,-.06 -.11,-.04 -.02,.01 -.04,0 -.04,-.03 0,-.03 -.03,-.04 -.06,-.03 -.04,.01 -.07,0 -.08,-.02 -.01,-.02 -.06,-.05 -.11,-.05 -.05,0 -.1,-.03 -.1,-.05 0,-.02 -.03,-.03 -.06,-.02 -.03,.01 -.08,-.01 -.12,-.04 -.03,-.03 -.09,-.05 -.12,-.04 -.03,.01 -.06,0 -.06,-.02 0,-.03 -.03,-.04 -.07,-.02 -.04,.01 -.07,0 -.07,-.02 0,-.03 -.02,-.03 -.04,-.02 -.02,.01 -.05,0 -.07,-.02 -.01,-.03 -.05,-.03 -.07,-.02 -.02,.01 -.04,0 -.04,-.03 0,-.03 -.03,-.04 -.07,-.03 -.04,.01 -.07,.01 -.07,-.02 0,-.02 .08,-.04 .17,-.04 .09,0 .18,-.01 .2,-.03 .04,-.04 .73,-.04 .75,0 .01,.02 .07,.04 .14,.05 .07,.01 .17,.04 .22,.06 .05,.03 .18,.07 .29,.1 .18,.05 .2,.07 .2,.18 -0,.07 -.02,.14 -.04,.17 -.02,.03 -.02,.09 -0,.14 .02,.05 .01,.09 -.02,.09 -.03,0 -.04,.04 -.03,.11 .01,.06 0,.11 -.02,.11 -.02,0 -.03,.05 -.02,.11 .01,.06 0,.11 -.02,.11 -.02,0 -.03,.06 -.02,.13 .01,.07 0,.13 -.02,.13 -.02,0 -.03,.06 -.01,.13 .02,.08 .01,.13 -.02,.13 -.03,0 -.04,.04 -.02,.11 .01,.06 .01,.12 -.02,.14 -.07,.04 -.05,.24 .04,.34 .05,.05 .11,.08 .13,.06 .03,-.02 .05,-.01 .05,.02 0,.03 .04,.04 .09,.03 .05,-.01 .09,0 .09,.02 0,.03 .05,.03 .11,.02 .06,-.01 .12,-.01 .14,.02 .02,.03 .1,.04 .19,.02 .82,-.13 .93,-.17 .94,-.34 0,-.05 -.07,-.5 -.16,-.99 -.14,-.77 -.15,-.9 -.1,-.96 .04,-.03 .27,-.12 .53,-.18 .44,-.11 .5,-.12 1.03,-.09 .31,.02 .56,.04 .55,.05 -.01,.01 -.35,.14 -.76,.3 -1.16,.44 -1.18,.48 -.75,1.31 .16,.31 .28,.59 .27,.63 -.01,.04 -.31,.26 -.67,.49 -.35,.24 -.65,.46 -.67,.5 -.05,.12 .05,.26 .39,.56 .23,.21 .48,.37 .81,.54 .26,.13 .51,.24 .55,.24 .19,-0 .59,-.36 .72,-.64 .11,-.24 .1,-.45 -.03,-.75 -.06,-.14 -.11,-.31 -.11,-.39 0,-.15 .02,-.18 .96,-1.19 .57,-.61 .58,-.63 .58,-.82 0,-.11 -.03,-.26 -.07,-.34 -.13,-.26 -.51,-.8 -.91,-1.3 -.38,-.48 -.4,-.49 -.53,-.47 -.08,.01 -.33,.06 -.55,.11 -.56,.11 -.67,.11 -1.24,-.07 -.62,-.2 -.8,-.2 -1.42,0 -.27,.09 -.56,.16 -.65,.16 -.09,0 -.41,-.05 -.71,-.11 l -.55,-.11 -.18,.18 c -.1,.1 -.18,.19 -.17,.2 .01,.01 -.02,.05 -.07,.08 -.05,.03 -.08,.08 -.07,.1 .01,.02 -.03,.07 -.09,.11 -.06,.04 -.1,.09 -.09,.1 .01,.01 -.01,.05 -.06,.09 -.05,.03 -.08,.08 -.07,.1 .01,.02 -.01,.05 -.05,.06 -.04,.01 -.06,.04 -.04,.07 .01,.02 -.01,.05 -.04,.07 -.04,.01 -.06,.04 -.04,.07 .01,.02 -.01,.05 -.05,.07 -.04,.01 -.06,.04 -.05,.05 .01,.01 -.02,.07 -.08,.14 -.06,.06 -.1,.13 -.08,.15 .01,.02 -.01,.05 -.05,.06 -.04,.01 -.06,.05 -.04,.07 .01,.02 .01,.04 -.02,.04 -.03,0 -.04,.02 -.02,.04 .01,.02 .01,.05 -.02,.07 -.06,.04 -.06,.38 0,.38 .03,0 .04,.02 .02,.04 -.01,.02 -.01,.04 .02,.04 .03,0 .05,.03 .05,.06 0,.03 .08,.14 .19,.23 .1,.09 .18,.18 .18,.2 -.01,.02 .15,.18 .34,.36 .19,.18 .34,.34 .33,.35 -.01,.01 .07,.1 .18,.21 .11,.11 .2,.22 .2,.25 0,.03 .03,.06 .06,.08 .04,.02 .04,.03 -0,.06 -.03,.02 -.06,.09 -.07,.16 -0,.06 -.03,.12 -.05,.12 -.02,0 -.03,.01 -.01,.03 .01,.01 -0,.06 -.04,.09 -.04,.04 -.06,.09 -.04,.13 .01,.03 0,.06 -.02,.06 -.02,0 -.04,.07 -.04,.15 0,.09 .02,.15 .04,.15 .02,0 .03,.03 .02,.07 -.01,.04 -0,.07 .03,.07 .03,0 .04,.02 .02,.04 -.01,.02 -.01,.04 .02,.04 .03,0 .04,.02 .02,.04 -.01,.02 -.01,.04 .02,.04 .03,0 .04,.01 .04,.03 -.01,.05 .37,.43 .41,.42 .02,-.01 .04,.01 .04,.04 0,.03 .02,.04 .04,.02 .02,-.01 .05,-.01 .07,.02 .04,.06 .15,.06 .15,0 z"/>
+</g>
+</svg>
+    ),
+  },
+  {
+    id: "cursor",
+    title: "Cursor",
+    getHref: ({ q }) =>
+      `https://cursor.com/link/prompt?text=${encodeURIComponent(q)}`,
+    icon: (
+      <svg
+        role="img"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M11.503.131 1.891 5.678a.84.84 0 0 0-.42.726v11.188c0 .3.162.575.42.724l9.609 5.55a1 1 0 0 0 .998 0l9.61-5.55a.84.84 0 0 0 .42-.724V6.404a.84.84 0 0 0-.42-.726L12.497.131a1.01 1.01 0 0 0-.996 0M2.657 6.338h18.55c.263 0 .43.287.297.515L12.23 22.918c-.062.107-.229.064-.229-.06V12.335a.59.59 0 0 0-.295-.51l-9.11-5.257c-.109-.063-.064-.23.061-.23" />
+      </svg>
+    ),
+  },
+];
+
+export type AIProviderID = (typeof AI_PROVIDERS)[number]["id"];
+
+export function AskAIDropdown({
+  markdownUrl,
+  githubUrl,
+  providers,
+}: {
+  /**
+   * A URL to the raw Markdown/MDX content of page
+   */
+  markdownUrl: string;
+
+  /**
+   * Source file URL on GitHub
+   */
+  githubUrl?: string;
+
+  /**
+   * List of provider IDs to show (e.g. ['claude', 'chatgpt']),
+   * or custom AIProvider objects, or a mix of both.
+   * Defaults to all providers.
+   */
+  providers?: (AIProviderID | AIProvider)[];
+}) {
+  const items = useMemo(() => {
+    const fullMarkdownUrl =
+      typeof window !== "undefined"
+        ? new URL(markdownUrl, window.location.origin)
+        : "loading";
+    const q = `Read ${fullMarkdownUrl}, I want to ask questions about it.`;
+
+    const resolvedProviders: AIProvider[] = providers
+      ? providers
+        .map((p) =>
+          typeof p === "string" ? AI_PROVIDERS.find((ap) => ap.id === p)! : p,
+        )
+        .filter(Boolean)
+      : AI_PROVIDERS;
+
+    return resolvedProviders
+      .map((provider) => {
+        if (provider.id === "github" && !githubUrl) return null;
+
+        const href = provider.getHref({ q, githubUrl });
+        const icon =
+          provider.icon ??
+          (href ? (
+            <img
+              src={`https://s2.googleusercontent.com/s2/favicons?domain_url=${encodeURIComponent(new URL(href).origin)}`}
+              alt=""
+              className="size-4"
+            />
+          ) : null);
+
+        return {
+          id: provider.id,
+          title: provider.title,
+          href,
+          icon,
+        };
+      })
+      .filter((item): item is NonNullable<typeof item> => item !== null);
+  }, [githubUrl, markdownUrl, providers]);
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        className={cn(
+          buttonVariants({
+            size: "sm",
+            className: "gap-2",
+          }),
+        )}
+      >
+        {items.find((p) => p.id !== "github")?.icon}
+        Ask AI
+        <ChevronDown className="size-3.5 text-fd-muted-foreground" />
+      </PopoverTrigger>
+      <PopoverContent className="flex flex-col overflow-auto !w-48 !min-w-0 !p-1">
+        {items.map((item, index) => (
+          <React.Fragment key={item.href}>
+            <a
+              href={item.href}
+              rel="noreferrer noopener"
+              target="_blank"
+              className={cn(optionVariants())}
+            >
+              {item.icon}
+              {item.title}
+              <ExternalLinkIcon className="text-fd-muted-foreground size-3.5 ms-auto" />
+            </a>
+            {index === 0 && (
+              <div className="flex items-center gap-2 px-2 py-2 text-xs font-medium text-fd-muted-foreground">
+                <span className="h-px flex-1 bg-fd-border" />
+                Ask AI Model
+                <span className="h-px flex-1 bg-fd-border" />
+              </div>
+            )}
+          </React.Fragment>
+        ))}
+      </PopoverContent>
+    </Popover>
+  );
+}

package/docs/components/fumadocs/ai/llm-copy-button.tsx

@@ -0,0 +1,61 @@
+/**
+ * @file llm-copy-button.tsx
+ * @description Button component that fetches and copies raw MDX content for LLMs.
+ */
+'use client';
+
+import { useState } from 'react';
+import { Check, Copy } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useCopyButton } from 'fumadocs-ui/utils/use-copy-button';
+import { buttonVariants } from '../../ui/button';
+
+const cache = new Map<string, string>();
+
+export function LLMCopyButton({
+  /**
+   * A URL to fetch the raw Markdown/MDX content of page
+   */
+  markdownUrl,
+}: {
+  markdownUrl: string;
+}) {
+  const [isLoading, setLoading] = useState(false);
+  const [checked, onClick] = useCopyButton(async () => {
+    const cached = cache.get(markdownUrl);
+    if (cached) return navigator.clipboard.writeText(cached);
+
+    setLoading(true);
+
+    try {
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          'text/plain': fetch(markdownUrl).then(async (res) => {
+            const content = await res.text();
+            cache.set(markdownUrl, content);
+
+            return content;
+          }),
+        }),
+      ]);
+    } finally {
+      setLoading(false);
+    }
+  });
+
+  return (
+    <button
+      disabled={isLoading}
+      className={cn(
+        buttonVariants({
+          size: 'sm',
+          className: 'gap-2 [&_svg]:size-3.5 [&_svg]:text-fd-muted-foreground',
+        }),
+      )}
+      onClick={onClick}
+    >
+      {checked ? <Check /> : <Copy />}
+      Copy
+    </button>
+  );
+}

package/docs/components/fumadocs/api/api-page.client.tsx

@@ -0,0 +1,7 @@
+/**
+ * @file api-page.client.tsx
+ * @description Client-side configuration and setup for the Fumadocs API page.
+ */
+'use client';
+
+export default {};

package/docs/components/fumadocs/api/api-page.tsx

@@ -0,0 +1,7 @@
+/**
+ * @file api-page.tsx
+ * @description API page component placeholder
+ */
+export const APIPage = {
+    generateMetadata: () => ({ title: 'API' }),
+};

package/docs/components/fumadocs/layout/breadcrumb.tsx

@@ -0,0 +1,36 @@
+'use client';
+import { usePathname } from 'next/navigation';
+import { useBreadcrumb } from 'fumadocs-core/breadcrumb';
+import type { Root } from 'fumadocs-core/page-tree';
+import { Fragment } from 'react';
+import { ChevronRight } from 'lucide-react';
+import Link from 'next/link';
+
+export function Breadcrumb({ tree }: { tree: Root }) {
+  const pathname = usePathname();
+  const items = useBreadcrumb(pathname, tree);
+
+  if (items.length === 0) return null;
+
+  return (
+    <div className="-mb-3 flex flex-row items-center gap-1 text-sm font-medium text-fd-muted-foreground">
+      {items.map((item, i) => (
+        <Fragment key={i}>
+          {i !== 0 && (
+            <ChevronRight className="size-4 shrink-0 rtl:rotate-180" />
+          )}
+          {item.url ? (
+            <Link
+              href={item.url}
+              className="truncate hover:text-fd-accent-foreground"
+            >
+              {item.name}
+            </Link>
+          ) : (
+            <span className="truncate">{item.name}</span>
+          )}
+        </Fragment>
+      ))}
+    </div>
+  );
+}

package/docs/components/fumadocs/layout/search.tsx

@@ -0,0 +1,55 @@
+/**
+ * @file search.tsx
+ * @description Custom search dialog component using Orama for documentation search.
+ */
+'use client';
+import {
+  SearchDialog,
+  SearchDialogClose,
+  SearchDialogContent,
+  SearchDialogHeader,
+  SearchDialogIcon,
+  SearchDialogInput,
+  SearchDialogList,
+  SearchDialogOverlay,
+  type SharedProps,
+} from 'fumadocs-ui/components/dialog/search';
+import { useDocsSearch } from 'fumadocs-core/search/client';
+import { create } from 'zbsearch';
+import { useI18n } from 'fumadocs-ui/contexts/i18n';
+
+function initOrama() {
+  return create({
+    schema: { _: 'string' },
+    language: 'english',
+  });
+}
+
+export default function DefaultSearchDialog(props: SharedProps) {
+  const { locale } = useI18n(); // (optional) for i18n
+  const { search, setSearch, query } = useDocsSearch({
+    type: 'static',
+    from: '/docs/api/docs-search',
+    initOrama,
+    locale,
+  });
+
+  return (
+    <SearchDialog
+      search={search}
+      onSearchChange={setSearch}
+      isLoading={query.isLoading}
+      {...props}
+    >
+      <SearchDialogOverlay />
+      <SearchDialogContent>
+        <SearchDialogHeader>
+          <SearchDialogIcon />
+          <SearchDialogInput />
+          <SearchDialogClose />
+        </SearchDialogHeader>
+        <SearchDialogList items={query.data !== 'empty' ? query.data : null} />
+      </SearchDialogContent>
+    </SearchDialog>
+  );
+}

package/docs/components/fumadocs/layout/theme-dropdown.tsx

@@ -0,0 +1,3 @@
+'use client';
+
+export { ThemeDropdown } from 'shadcn-theme-menu';

package/docs/components/fumadocs/layout/theme-provider.tsx

@@ -0,0 +1,15 @@
+/**
+ * @file theme-provider.tsx
+ * @description Theme provider component for managing light and dark mode.
+ */
+'use client'
+
+import * as React from 'react'
+import {
+  ThemeProvider as NextThemesProvider,
+  type ThemeProviderProps,
+} from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

package/docs/components/fumadocs/layout/theme-toggle.tsx

@@ -0,0 +1,40 @@
+/**
+ * @file theme-toggle.tsx
+ * @description Component for toggling between light and dark themes.
+ */
+"use client"
+
+import { useState, useEffect } from "react"
+import { Moon, Sun } from "lucide-react"
+import { Button } from "@/components/ui/button"
+
+export function ThemeToggle() {
+  const [theme, setTheme] = useState<"light" | "dark">("light")
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("theme") as "light" | "dark" | null
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
+    const initialTheme = savedTheme || (prefersDark ? "dark" : "light")
+    setTheme(initialTheme)
+    document.documentElement.classList.toggle("dark", initialTheme === "dark")
+  }, [])
+
+  const toggleTheme = () => {
+    const newTheme = theme === "light" ? "dark" : "light"
+    setTheme(newTheme)
+    localStorage.setItem("theme", newTheme)
+    document.documentElement.classList.toggle("dark", newTheme === "dark")
+  }
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      onClick={toggleTheme}
+      className="fixed top-4 right-4 z-50 bg-card/80 backdrop-blur-sm border-border hover:bg-secondary"
+    >
+      {theme === "light" ? <Moon className="h-5 w-5 text-foreground" /> : <Sun className="h-5 w-5 text-foreground" />}
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}

package/docs/components/ui/badge.tsx

@@ -0,0 +1,50 @@
+/**
+ * @file badge.tsx
+ * @description Badge component for displaying small amounts of information or status.
+ */
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'span'> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'span'
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

package/docs/components/ui/button.tsx

@@ -0,0 +1,66 @@
+/**
+ * @file button.tsx
+ * @description Versatile button component with multiple variants and sizes.
+ */
+
+import * as React from 'react'
+
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+        'icon-sm': 'size-8',
+        'icon-lg': 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props as any}
+    />
+  )
+}
+
+export { Button, buttonVariants }