fuma-nama · Mar 1, 2025 · Mar 2, 2025 · Mar 2, 2025 · Mar 3, 2025 · Mar 3, 2025
diff --git a/apps/docs/app/(home)/showcase/page.tsx b/apps/docs/app/(home)/showcase/page.tsx
@@ -25,6 +25,7 @@ import ArkType from '@/public/showcases/arktype.png';
 import AssistantUI from '@/public/showcases/assistant-ui.png';
 import TurboStarter from '@/public/showcases/turbostarter.png';
 import VisionUI from '@/public/showcases/vision-ui.png';
+import FlagsSDK from '@/public/showcases/flags-sdk.png';
 
 export const metadata = createMetadata({
   title: 'Showcase',
@@ -48,9 +49,9 @@ export default function Showcase(): React.ReactElement {
       url: 'https://turbo.build',
     },
     {
-      image: NextFAQ,
-      name: 'Next.js Discord Common Questions',
-      url: 'https://nextjs-faq.com',
+      image: FlagsSDK,
+      name: 'Vercel Flags SDK',
+      url: 'https://flags-sdk.dev',
     },
     {
       image: Million,
@@ -69,15 +70,20 @@ export default function Showcase(): React.ReactElement {
       url: 'https://dokploy.com',
     },
     {
-      image: Hiro,
-      name: 'Hiro',
-      url: 'https://docs.hiro.so/stacks',
+      image: NextFAQ,
+      name: 'Next.js Discord Common Questions',
+      url: 'https://nextjs-faq.com',
     },
     {
       image: ArkType,
       name: 'Arktype',
       url: 'https://arktype.io',
     },
+    {
+      image: Hiro,
+      name: 'Hiro',
+      url: 'https://docs.hiro.so/stacks',
+    },
     {
       image: OpenPanel,
       name: 'OpenPanel',

diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
@@ -6,8 +6,6 @@ import { baseUrl, createMetadata } from '@/lib/metadata';
 import { Body } from '@/app/layout.client';
 import { Provider } from './provider';
 import { AISearchTrigger } from '@/components/ai';
-import { cn } from '@/lib/cn';
-import { buttonVariants } from '@/components/ui/button';
 import { MessageCircle } from 'lucide-react';
 import type { ReactNode } from 'react';
 
@@ -37,14 +35,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
       <Body>
         <Provider>
           {children}
-          <AISearchTrigger
-            className={cn(
-              buttonVariants({
-                variant: 'secondary',
-              }),
-              'fixed bottom-4 right-4 z-10 gap-2 rounded-xl bg-secondary/50 text-fd-secondary-foreground/80 shadow-lg backdrop-blur-lg md:bottom-8 md:right-8',
-            )}
-          >
+          <AISearchTrigger>
             <MessageCircle className="size-4" />
             Ask AI
           </AISearchTrigger>

diff --git a/apps/docs/components/ai/context.tsx b/apps/docs/components/ai/context.tsx
@@ -2,11 +2,13 @@
 import {
   createContext,
   type ReactNode,
+  useContext,
   useEffect,
   useMemo,
   useRef,
   useState,
 } from 'react';
+import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
 
 export interface Engine {
   prompt: (
@@ -41,14 +43,22 @@ export interface MessageReference {
 
 type EngineType = 'inkeep';
 
-export const Context = createContext<{
+const Context = createContext<{
   engine?: Engine;
   loading: boolean;
   setLoading: (loading: boolean) => void;
-}>({
-  loading: false,
-  setLoading: () => undefined,
-});
+  onSubmit: (message: string) => void;
+
+  regenerateLast: () => void;
+  abortAnswer: () => void;
+  clearMessages: () => void;
+} | null>(null);
+
+const listeners: (() => void)[] = [];
+
+function onUpdate() {
+  for (const listener of listeners) listener();
+}
 
 export function AIProvider({
   type,
@@ -76,18 +86,67 @@ export function AIProvider({
     }
   }, [type, loadEngine]);
 
+  const onSubmit = useEffectEvent((message: string) => {
+    if (!engine || message.length === 0) return;
+
+    setLoading(true);
+    void engine.prompt(message, onUpdate).finally(() => {
+      setLoading(false);
+    });
+  });
+
+  const regenerateLast = useEffectEvent(() => {
+    if (!engine) return;
+
+    setLoading(true);
+    void engine.regenerateLast(onUpdate).finally(() => {
+      setLoading(false);
+    });
+  });
+
+  const clearMessages = useEffectEvent(() => {
+    engine?.clearHistory();
+    onUpdate();
+  });
+
   return (
     <Context
       value={useMemo(
         () => ({
           loading,
           setLoading,
+          onSubmit,
           engine,
+          abortAnswer: () => engine?.abortAnswer(),
+          regenerateLast,
+          clearMessages,
         }),
-        [engine, loading],
+        [loading, onSubmit, engine, regenerateLast, clearMessages],
       )}
     >
       {children}
     </Context>
   );
 }
+
+export function useAI() {
+  return useContext(Context)!;
+}
+
+export function useAIMessages() {
+  const [_, update] = useState(0);
+  const { engine } = useAI();
+
+  useEffect(() => {
+    const listener = () => {
+      update((prev) => prev + 1);
+    };
+
+    listeners.push(listener);
+    return () => {
+      listeners.splice(listeners.indexOf(listener), 1);
+    };
+  }, []);
+
+  return engine?.getHistory() ?? [];
+}
diff --git a/apps/docs/components/ai/index.tsx b/apps/docs/components/ai/index.tsx
@@ -1,9 +1,11 @@
 'use client';
 import { type ButtonHTMLAttributes, useState } from 'react';
 import dynamic from 'next/dynamic';
+import { cn } from '@/lib/cn';
+import { buttonVariants } from '@/components/ui/button';
 
 // lazy load the dialog
-const Dialog = dynamic(() => import('./search'));
+const SearchAI = dynamic(() => import('./search'), { ssr: false });
 
 /**
  * The trigger component for AI search dialog.
@@ -17,10 +19,20 @@ export function AISearchTrigger(
 
   return (
     <>
-      <button {...props} onClick={() => setOpen(true)} />
       {open !== undefined ? (
-        <Dialog open={open} onOpenChange={setOpen} />
+        <SearchAI open={open} onOpenChange={setOpen} />
       ) : null}
+      <button
+        {...props}
+        onClick={() => setOpen(true)}
+        className={cn(
+          buttonVariants({
+            variant: 'secondary',
+          }),
+          'fixed bottom-4 right-4 z-10 gap-2 rounded-xl bg-fd-secondary/50 text-fd-secondary-foreground/80 shadow-lg backdrop-blur-lg md:bottom-8 md:right-8',
+          props.className,
+        )}
+      />
     </>
   );
 }