{children}
+ failed to load
+ if (isLoading) return loading...
+ return hello {data.name}!
+}`
+
+const preClassNames = cn('[&_.shiki]:bg-transparent!')
+
+const darkModeClassNames = cn(
+ 'dark:[&_.shiki]:text-[var(--shiki-dark)]!',
+ 'dark:[&_.shiki]:[font-style:var(--shiki-dark-font-style)]!',
+ 'dark:[&_.shiki]:[font-weight:var(--shiki-dark-font-weight)]!',
+ 'dark:[&_.shiki]:[text-decoration:var(--shiki-dark-text-decoration)]!',
+ 'dark:[&_.shiki_span]:text-[var(--shiki-dark)]!',
+ 'dark:[&_.shiki_span]:[font-style:var(--shiki-dark-font-style)]!',
+ 'dark:[&_.shiki_span]:[font-weight:var(--shiki-dark-font-weight)]!',
+ 'dark:[&_.shiki_span]:[text-decoration:var(--shiki-dark-text-decoration)]!'
+)
+
+type PageProps = {
+ params: Promise<{
+ lang: keyof typeof copy.metadata
+ }>
+}
+
+const HomePage = async ({ params }: PageProps) => {
+ const { lang } = await params
+ const code = await codeToHtml(exampleCode, {
+ lang: 'javascript',
+ themes: { light: 'github-light', dark: 'github-dark' }
+ })
+
+ return (
+
+
+
+
+ )
+}
+
+export default HomePage
diff --git a/app/[lang]/blog/[...slug]/page.tsx b/app/[lang]/blog/[...slug]/page.tsx
new file mode 100644
index 00000000..4843ebff
--- /dev/null
+++ b/app/[lang]/blog/[...slug]/page.tsx
@@ -0,0 +1,104 @@
+import { createRelativeLink } from 'fumadocs-ui/mdx'
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import { AskAI } from '@/components/geistdocs/ask-ai'
+import { CopyPage } from '@/components/geistdocs/copy-page'
+import {
+ DocsBody,
+ DocsDescription,
+ DocsPage,
+ DocsTitle
+} from '@/components/geistdocs/docs-page'
+import { EditSource } from '@/components/geistdocs/edit-source'
+import { Feedback } from '@/components/geistdocs/feedback'
+import { getMDXComponents } from '@/components/geistdocs/mdx-components'
+import { OpenInChat } from '@/components/geistdocs/open-in-chat'
+import { ScrollTop } from '@/components/geistdocs/scroll-top'
+import { Separator } from '@/components/ui/separator'
+import { getLLMText, getPageImage, blogSource } from '@/lib/geistdocs/source'
+
+import { Bleed } from '@/components/custom/bleed'
+import Authors, { Author } from '@/components/custom/authors'
+import { Welcome } from '@/components/custom/diagrams/welcome'
+import { Pagination } from '@/components/custom/diagrams/pagination'
+import { Infinite } from '@/components/custom/diagrams/infinite'
+import { Cache } from '@/components/custom/diagrams/cache'
+import Link from 'next/link'
+
+const Page = async ({ params }: PageProps<'/[lang]/blog/[...slug]'>) => {
+ const { slug, lang } = await params
+ const page = blogSource.getPage(slug, lang)
+
+ if (!page) {
+ notFound()
+ }
+
+ const markdown = await getLLMText(page)
+ const MDX = page.data.body
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ {copy.features[lang].map(feature => (
+
+ {feature}
+
+ ))}
+
+
+ {/** biome-ignore lint/performance/noImgElement: "Required for Satori" */}
+ 
+
,
+ {
+ width: 1200,
+ height: 628,
+ fonts: [
+ {
+ name: "Geist",
+ data: regularFont,
+ weight: 400,
+ },
+ {
+ name: "Geist",
+ data: semiboldFont,
+ weight: 500,
+ },
+ ],
+ }
+ );
+};
+
+export const generateStaticParams = async ({
+ params,
+}: RouteContext<"/[lang]/og/[...slug]">) => {
+ const { lang } = await params;
+
+ return source.getPages(lang).map((page) => ({
+ lang: page.locale,
+ slug: getPageImage(page).segments,
+ }));
+};
diff --git a/app/[lang]/rss.xml/route.ts b/app/[lang]/rss.xml/route.ts
new file mode 100644
index 00000000..f0c7a9c8
--- /dev/null
+++ b/app/[lang]/rss.xml/route.ts
@@ -0,0 +1,46 @@
+import { Feed } from "feed";
+import type { NextRequest } from "next/server";
+import { title } from "@/geistdocs";
+import { source } from "@/lib/geistdocs/source";
+
+const protocol = process.env.NODE_ENV === "production" ? "https" : "http";
+const baseUrl = `${protocol}://${process.env.NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL}`;
+
+export const revalidate = false;
+
+export const GET = async (
+ _req: NextRequest,
+ { params }: RouteContext<"/[lang]/rss.xml">
+) => {
+ const { lang } = await params;
+ const feed = new Feed({
+ title,
+ id: baseUrl,
+ link: baseUrl,
+ language: lang,
+ copyright: `All rights reserved ${new Date().getFullYear()}, Vercel`,
+ });
+
+ for (const page of source.getPages(lang)) {
+ feed.addItem({
+ id: page.url,
+ title: page.data.title,
+ description: page.data.description,
+ link: `${baseUrl}${page.url}`,
+ date: new Date(page.data.lastModified ?? new Date()),
+ author: [
+ {
+ name: "Vercel",
+ },
+ ],
+ });
+ }
+
+ const rss = feed.rss2();
+
+ return new Response(rss, {
+ headers: {
+ "Content-Type": "application/rss+xml",
+ },
+ });
+};
diff --git a/app/actions/feedback/emotions.ts b/app/actions/feedback/emotions.ts
new file mode 100644
index 00000000..cfc733b4
--- /dev/null
+++ b/app/actions/feedback/emotions.ts
@@ -0,0 +1,18 @@
+export const emotions = [
+ {
+ name: "cry",
+ emoji: "😭",
+ },
+ {
+ name: "sad",
+ emoji: "😕",
+ },
+ {
+ name: "happy",
+ emoji: "🙂",
+ },
+ {
+ name: "amazed",
+ emoji: "🤩",
+ },
+];
diff --git a/app/actions/feedback/index.ts b/app/actions/feedback/index.ts
new file mode 100644
index 00000000..058ed41d
--- /dev/null
+++ b/app/actions/feedback/index.ts
@@ -0,0 +1,43 @@
+"use server";
+
+import { headers } from "next/headers";
+import type { Feedback } from "@/components/geistdocs/feedback";
+import { emotions } from "./emotions";
+
+const protocol = process.env.NODE_ENV === "production" ? "https" : "http";
+const baseUrl = `${protocol}://${process.env.NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL}`;
+
+export const sendFeedback = async (
+ url: string,
+ feedback: Feedback
+): Promise<{ success: boolean }> => {
+ const emoji = emotions.find((e) => e.name === feedback.emotion)?.emoji;
+ const endpoint = new URL("/feedback", "https://geistdocs.com/feedback");
+ const headersList = await headers();
+
+ const response = await fetch(endpoint, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ note: feedback.message,
+ url: new URL(url, baseUrl).toString(),
+ emotion: emoji,
+ ua: headersList.get("user-agent") ?? undefined,
+ ip: headersList.get("x-real-ip") || headersList.get("x-forwarded-for"),
+ }),
+ });
+
+ if (!response.ok) {
+ const error = await response.json();
+
+ console.error(error);
+
+ return { success: false };
+ }
+
+ return {
+ success: true,
+ };
+};
diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts
new file mode 100644
index 00000000..8c4930bd
--- /dev/null
+++ b/app/api/chat/route.ts
@@ -0,0 +1,116 @@
+import {
+ convertToModelMessages,
+ createUIMessageStream,
+ createUIMessageStreamResponse,
+ stepCountIs,
+ streamText,
+} from "ai";
+import { createTools } from "./tools";
+import type { MyUIMessage } from "./types";
+import { createSystemPrompt } from "./utils";
+
+export const maxDuration = 800;
+
+type RequestBody = {
+ messages: MyUIMessage[];
+ currentRoute: string;
+ pageContext?: {
+ title: string;
+ url: string;
+ content: string;
+ };
+};
+
+export async function POST(req: Request) {
+ try {
+ const { messages, currentRoute, pageContext }: RequestBody =
+ await req.json();
+
+ // Filter out UI-only page context messages (they're just visual feedback)
+ const actualMessages = messages.filter(
+ (msg) => !msg.metadata?.isPageContext
+ );
+
+ // If pageContext is provided, prepend it to the last user message
+ let processedMessages = actualMessages;
+
+ if (pageContext && actualMessages.length > 0) {
+ const lastMessage = actualMessages.at(-1);
+
+ if (!lastMessage) {
+ return new Response(
+ JSON.stringify({
+ error: "No last message found",
+ }),
+ { status: 500 }
+ );
+ }
+
+ if (lastMessage.role === "user") {
+ // Extract text content from the message parts
+ const userQuestion = lastMessage.parts
+ .filter((part) => part.type === "text")
+ .map((part) => part.text)
+ .join("\n");
+
+ processedMessages = [
+ ...actualMessages.slice(0, -1),
+ {
+ ...lastMessage,
+ parts: [
+ {
+ type: "text",
+ text: `Here's the content from the current page:
+
+**Page:** ${pageContext.title}
+**URL:** ${pageContext.url}
+
+---
+
+${pageContext.content}
+
+---
+
+User question: ${userQuestion}`,
+ },
+ ],
+ },
+ ];
+ }
+ }
+
+ const stream = createUIMessageStream({
+ originalMessages: messages,
+ execute: ({ writer }) => {
+ const result = streamText({
+ model: "openai/gpt-4.1-mini",
+ messages: convertToModelMessages(processedMessages),
+ stopWhen: stepCountIs(10),
+ tools: createTools(writer),
+ system: createSystemPrompt(currentRoute),
+ prepareStep: ({ stepNumber }) => {
+ if (stepNumber === 0) {
+ return { toolChoice: { type: "tool", toolName: "search_docs" } };
+ }
+ },
+ });
+
+ writer.merge(result.toUIMessageStream());
+ },
+ });
+
+ return createUIMessageStreamResponse({ stream });
+ } catch (error) {
+ console.error("AI chat API error:", error);
+
+ return new Response(
+ JSON.stringify({
+ error: "Failed to process chat request. Please try again.",
+ }),
+ {
+ status: 500,
+ headers: { "Content-Type": "application/json" },
+ }
+ );
+ }
+}
diff --git a/app/api/chat/tools.ts b/app/api/chat/tools.ts
new file mode 100644
index 00000000..9d59eae6
--- /dev/null
+++ b/app/api/chat/tools.ts
@@ -0,0 +1,222 @@
+import { type ToolSet, tool, type UIMessageStreamWriter } from "ai";
+import { initAdvancedSearch } from "fumadocs-core/search/server";
+import z from "zod";
+import { i18n } from "@/lib/geistdocs/i18n";
+import { source } from "@/lib/geistdocs/source";
+
+const createSearchServer = (lang: string) => {
+ const pages = source.getPages(lang);
+
+ return initAdvancedSearch({
+ indexes: pages.map((page) => ({
+ title: page.data.title,
+ description: page.data.description,
+ url: page.url,
+ id: page.url,
+ structuredData: page.data.structuredData,
+ })),
+ });
+};
+
+const log = (message: string) => {
+ console.log(`🤖 [Geistdocs] ${message}`);
+};
+
+const search_docs = (writer: UIMessageStreamWriter) =>
+ tool({
+ description: "Search through documentation content by query",
+ inputSchema: z.object({
+ query: z.string().describe("Search query to find relevant documentation"),
+ lang: z
+ .string()
+ .describe("The two letter language code of the documentation to search")
+ .optional()
+ .default(i18n.defaultLanguage),
+ }),
+ execute: async ({ query, lang }) => {
+ try {
+ log(`Creating search server for language: ${lang}`);
+
+ const searchServer = createSearchServer(lang);
+
+ log(`Searching docs for ${query}`);
+
+ const results = await searchServer.search(query);
+
+ log(`Found ${results.length} results`);
+
+ if (results.length === 0) {
+ return {
+ content: [
+ {
+ type: "text",
+ text: `No documentation found for query: "${query}"`,
+ },
+ ],
+ };
+ }
+
+ log(`Processing ${results.length} results...`);
+
+ const promises = results.map(({ url }) => {
+ const segments = url.split("#").at(0)?.split("/") ?? [];
+
+ if (segments.length === 0) {
+ log(`🤖 [Geistdocs] No segments found for ${url}, skipping...`);
+ return null;
+ }
+
+ log(`Getting page for ${url}`);
+
+ const result = source.getPageByHref(url, { language: lang });
+
+ if (!result?.page) {
+ log(`No page found for ${url}`);
+ return null;
+ }
+
+ const { page } = result;
+
+ log(
+ `Found page for ${url}: ${page.data.title}, ${page.data.description}`
+ );
+
+ return {
+ title: page.data.title,
+ description: page.data.description,
+ content: JSON.stringify(page.data.structuredData.contents),
+ slug: page.url,
+ };
+ });
+
+ log(`Running ${promises.length} promises...`);
+
+ const promiseResults = await Promise.all(promises);
+
+ log(`${promiseResults.length} promises resolved.`);
+
+ // Collect results, then filter to ensure unique slugs
+ const formattedResultsRaw = promiseResults.filter(Boolean) as {
+ title: string;
+ description: string;
+ content: string;
+ slug: string;
+ }[];
+
+ log(`Formatted ${formattedResultsRaw.length} results.`);
+
+ // Ensure slugs are unique
+ const seenSlugs = new Set
+
+
+ {title}
+
+
+ {description}
+
+
+
+
+
+
+ {children && (
+
+
+ {children}
+
+ )}
+
+ {children ?? (
+ <>
+ {icon &&
+);
+
+export type ConversationScrollButtonProps = ComponentProps{icon}
}
+
+
+
+ )}
+ {title}
+ {description && ( +{description}
+ )} +
+ {children}
+
+);
+
+export type MessageActionsProps = ComponentProps<"div">;
+
+export const MessageActions = ({
+ className,
+ children,
+ ...props
+}: MessageActionsProps) => (
+
+ {children}
+
+);
+
+export type MessageActionProps = ComponentProps{tooltip}
+div]:pb-0", className)}
+ {...props}
+ />
+
+ );
+};
+
+export type MessageBranchContentProps = HTMLAttributes;
+
+export const MessageBranchContent = ({
+ children,
+ ...props
+}: MessageBranchContentProps) => {
+ const { currentBranch, setBranches, branches } = useMessageBranch();
+ const childrenArray = Array.isArray(children) ? children : [children];
+
+ // Use useEffect to update branches when they change
+ useEffect(() => {
+ if (branches.length !== childrenArray.length) {
+ setBranches(childrenArray);
+ }
+ }, [childrenArray, branches, setBranches]);
+
+ return childrenArray.map((branch, index) => (
+ & {
+ from: UIMessage["role"];
+};
+
+export const MessageBranchSelector = ({
+ className,
+ from,
+ ...props
+}: MessageBranchSelectorProps) => {
+ const { totalBranches } = useMessageBranch();
+
+ // Don't render if there's only one branch
+ if (totalBranches <= 1) {
+ return null;
+ }
+
+ return (
+ ;
+
+export const MessageBranchPrevious = ({
+ children,
+ ...props
+}: MessageBranchPreviousProps) => {
+ const { goToPrevious, totalBranches } = useMessageBranch();
+
+ return (
+
+ );
+};
+
+export type MessageBranchNextProps = ComponentProps;
+
+export const MessageBranchNext = ({
+ children,
+ className,
+ ...props
+}: MessageBranchNextProps) => {
+ const { goToNext, totalBranches } = useMessageBranch();
+
+ return (
+
+ );
+};
+
+export type MessageBranchPageProps = HTMLAttributes;
+
+export const MessageBranchPage = ({
+ className,
+ ...props
+}: MessageBranchPageProps) => {
+ const { currentBranch, totalBranches } = useMessageBranch();
+
+ return (
+
+ {currentBranch + 1} of {totalBranches}
+
+ );
+};
+
+export type MessageResponseProps = ComponentProps;
+
+export const MessageResponse = memo(
+ ({ className, ...props }: MessageResponseProps) => (
+ *:first-child]:mt-0 [&>*:last-child]:mb-0",
+ className
+ )}
+ {...props}
+ />
+ ),
+ (prevProps, nextProps) => prevProps.children === nextProps.children
+);
+
+MessageResponse.displayName = "MessageResponse";
+
+export type MessageAttachmentProps = HTMLAttributes & {
+ data: FileUIPart;
+ className?: string;
+ onRemove?: () => void;
+};
+
+export function MessageAttachment({
+ data,
+ className,
+ onRemove,
+ ...props
+}: MessageAttachmentProps) {
+ const filename = data.filename || "";
+ const mediaType =
+ data.mediaType?.startsWith("image/") && data.url ? "image" : "file";
+ const isImage = mediaType === "image";
+ const attachmentLabel = filename || (isImage ? "Image" : "Attachment");
+
+ return (
+ & {
+ query: string;
+};
+
+export const OpenIn = ({ query, ...props }: OpenInProps) => (
+
+
+);
+
+export type OpenInContentProps = ComponentProps;
+
+export const OpenInContent = ({ className, ...props }: OpenInContentProps) => (
+ ;
+
+export const OpenInItem = (props: OpenInItemProps) => (
+ ;
+
+export const OpenInLabel = (props: OpenInLabelProps) => (
+ ;
+
+export const OpenInSeparator = (props: OpenInSeparatorProps) => (
+ ;
+
+export const OpenInTrigger = ({ children, ...props }: OpenInTriggerProps) => (
+
+ {children ?? (
+
+ )}
+
+);
+
+export type OpenInChatGPTProps = ComponentProps;
+
+export const OpenInChatGPT = (props: OpenInChatGPTProps) => {
+ const { query } = useOpenInContext();
+ return (
+
+
+ {providers.chatgpt.icon}
+ {providers.chatgpt.title}
+
+ );
+};
+
+export type OpenInClaudeProps = ComponentProps;
+
+export const OpenInClaude = (props: OpenInClaudeProps) => {
+ const { query } = useOpenInContext();
+ return (
+
+
+ {providers.claude.icon}
+ {providers.claude.title}
+
+ );
+};
+
+export type OpenInT3Props = ComponentProps;
+
+export const OpenInT3 = (props: OpenInT3Props) => {
+ const { query } = useOpenInContext();
+ return (
+
+
+ {providers.t3.icon}
+ {providers.t3.title}
+
+ );
+};
+
+export type OpenInSciraProps = ComponentProps;
+
+export const OpenInScira = (props: OpenInSciraProps) => {
+ const { query } = useOpenInContext();
+ return (
+
+
+ {providers.scira.icon}
+ {providers.scira.title}
+
+ );
+};
+
+export type OpenInv0Props = ComponentProps;
+
+export const OpenInv0 = (props: OpenInv0Props) => {
+ const { query } = useOpenInContext();
+ return (
+
+
+ {providers.v0.icon}
+ {providers.v0.title}
+
+ );
+};
+
+export type OpenInCursorProps = ComponentProps;
+
+export const OpenInCursor = (props: OpenInCursorProps) => {
+ const { query } = useOpenInContext();
+ return (
+
+
+ {providers.cursor.icon}
+ {providers.cursor.title}
+
+ );
+};
diff --git a/components/ai-elements/prompt-input.tsx b/components/ai-elements/prompt-input.tsx
new file mode 100644
index 00000000..deff1c48
--- /dev/null
+++ b/components/ai-elements/prompt-input.tsx
@@ -0,0 +1,1377 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+ CommandSeparator,
+} from "@/components/ui/command";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+ HoverCard,
+ HoverCardContent,
+ HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import {
+ InputGroup,
+ InputGroupAddon,
+ InputGroupButton,
+ InputGroupTextarea,
+} from "@/components/ui/input-group";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import type { ChatStatus, FileUIPart } from "ai";
+import {
+ CornerDownLeftIcon,
+ ImageIcon,
+ Loader2Icon,
+ MicIcon,
+ PaperclipIcon,
+ PlusIcon,
+ SquareIcon,
+ XIcon,
+} from "lucide-react";
+import { nanoid } from "nanoid";
+import {
+ type ChangeEvent,
+ type ChangeEventHandler,
+ Children,
+ type ClipboardEventHandler,
+ type ComponentProps,
+ createContext,
+ type FormEvent,
+ type FormEventHandler,
+ Fragment,
+ type HTMLAttributes,
+ type KeyboardEventHandler,
+ type PropsWithChildren,
+ type ReactNode,
+ type RefObject,
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from "react";
+// ============================================================================
+// Provider Context & Types
+// ============================================================================
+
+export type AttachmentsContext = {
+ files: (FileUIPart & { id: string })[];
+ add: (files: File[] | FileList) => void;
+ remove: (id: string) => void;
+ clear: () => void;
+ openFileDialog: () => void;
+ fileInputRef: RefObject;
+};
+
+export type TextInputContext = {
+ value: string;
+ setInput: (v: string) => void;
+ clear: () => void;
+};
+
+export type PromptInputControllerProps = {
+ textInput: TextInputContext;
+ attachments: AttachmentsContext;
+ /** INTERNAL: Allows PromptInput to register its file textInput + "open" callback */
+ __registerFileInput: (
+ ref: RefObject,
+ open: () => void
+ ) => void;
+};
+
+const PromptInputController = createContext(
+ null
+);
+const ProviderAttachmentsContext = createContext(
+ null
+);
+
+export const usePromptInputController = () => {
+ const ctx = useContext(PromptInputController);
+ if (!ctx) {
+ throw new Error(
+ "Wrap your component inside to use usePromptInputController()."
+ );
+ }
+ return ctx;
+};
+
+// Optional variants (do NOT throw). Useful for dual-mode components.
+const useOptionalPromptInputController = () =>
+ useContext(PromptInputController);
+
+export const useProviderAttachments = () => {
+ const ctx = useContext(ProviderAttachmentsContext);
+ if (!ctx) {
+ throw new Error(
+ "Wrap your component inside to use useProviderAttachments()."
+ );
+ }
+ return ctx;
+};
+
+const useOptionalProviderAttachments = () =>
+ useContext(ProviderAttachmentsContext);
+
+export type PromptInputProviderProps = PropsWithChildren<{
+ initialInput?: string;
+}>;
+
+/**
+ * Optional global provider that lifts PromptInput state outside of PromptInput.
+ * If you don't use it, PromptInput stays fully self-managed.
+ */
+export function PromptInputProvider({
+ initialInput: initialTextInput = "",
+ children,
+}: PromptInputProviderProps) {
+ // ----- textInput state
+ const [textInput, setTextInput] = useState(initialTextInput);
+ const clearInput = useCallback(() => setTextInput(""), []);
+
+ // ----- attachments state (global when wrapped)
+ const [attachements, setAttachements] = useState<
+ (FileUIPart & { id: string })[]
+ >([]);
+ const fileInputRef = useRef(null);
+ const openRef = useRef<() => void>(() => {});
+
+ const add = useCallback((files: File[] | FileList) => {
+ const incoming = Array.from(files);
+ if (incoming.length === 0) {
+ return;
+ }
+
+ setAttachements((prev) =>
+ prev.concat(
+ incoming.map((file) => ({
+ id: nanoid(),
+ type: "file" as const,
+ url: URL.createObjectURL(file),
+ mediaType: file.type,
+ filename: file.name,
+ }))
+ )
+ );
+ }, []);
+
+ const remove = useCallback((id: string) => {
+ setAttachements((prev) => {
+ const found = prev.find((f) => f.id === id);
+ if (found?.url) {
+ URL.revokeObjectURL(found.url);
+ }
+ return prev.filter((f) => f.id !== id);
+ });
+ }, []);
+
+ const clear = useCallback(() => {
+ setAttachements((prev) => {
+ for (const f of prev) {
+ if (f.url) {
+ URL.revokeObjectURL(f.url);
+ }
+ }
+ return [];
+ });
+ }, []);
+
+ const openFileDialog = useCallback(() => {
+ openRef.current?.();
+ }, []);
+
+ const attachments = useMemo(
+ () => ({
+ files: attachements,
+ add,
+ remove,
+ clear,
+ openFileDialog,
+ fileInputRef,
+ }),
+ [attachements, add, remove, clear, openFileDialog]
+ );
+
+ const __registerFileInput = useCallback(
+ (ref: RefObject, open: () => void) => {
+ fileInputRef.current = ref.current;
+ openRef.current = open;
+ },
+ []
+ );
+
+ const controller = useMemo(
+ () => ({
+ textInput: {
+ value: textInput,
+ setInput: setTextInput,
+ clear: clearInput,
+ },
+ attachments,
+ __registerFileInput,
+ }),
+ [textInput, clearInput, attachments, __registerFileInput]
+ );
+
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+// ============================================================================
+// Component Context & Hooks
+// ============================================================================
+
+const LocalAttachmentsContext = createContext(null);
+
+export const usePromptInputAttachments = () => {
+ // Dual-mode: prefer provider if present, otherwise use local
+ const provider = useOptionalProviderAttachments();
+ const local = useContext(LocalAttachmentsContext);
+ const context = provider ?? local;
+ if (!context) {
+ throw new Error(
+ "usePromptInputAttachments must be used within a PromptInput or PromptInputProvider"
+ );
+ }
+ return context;
+};
+
+export type PromptInputAttachmentProps = HTMLAttributes & {
+ data: FileUIPart & { id: string };
+ className?: string;
+};
+
+export function PromptInputAttachment({
+ data,
+ className,
+ ...props
+}: PromptInputAttachmentProps) {
+ const attachments = usePromptInputAttachments();
+
+ const filename = data.filename || "";
+
+ const mediaType =
+ data.mediaType?.startsWith("image/") && data.url ? "image" : "file";
+ const isImage = mediaType === "image";
+
+ const attachmentLabel = filename || (isImage ? "Image" : "Attachment");
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+export type PromptInputAttachmentsProps = Omit<
+ HTMLAttributes,
+ "children"
+> & {
+ children: (attachment: FileUIPart & { id: string }) => ReactNode;
+};
+
+export function PromptInputAttachments({
+ children,
+ className,
+ ...props
+}: PromptInputAttachmentsProps) {
+ const attachments = usePromptInputAttachments();
+
+ if (!attachments.files.length) {
+ return null;
+ }
+
+ return (
+ {
+ e.preventDefault();
+ attachments.openFileDialog();
+ }}
+ >
+
+ );
+};
+
+export type PromptInputMessage = {
+ text?: string;
+ files?: FileUIPart[];
+};
+
+export type PromptInputProps = Omit<
+ HTMLAttributes,
+ "onSubmit" | "onError"
+> & {
+ accept?: string; // e.g., "image/*" or leave undefined for any
+ multiple?: boolean;
+ // When true, accepts drops anywhere on document. Default false (opt-in).
+ globalDrop?: boolean;
+ // Render a hidden input with given name and keep it in sync for native form posts. Default false.
+ syncHiddenInput?: boolean;
+ // Minimal constraints
+ maxFiles?: number;
+ maxFileSize?: number; // bytes
+ onError?: (err: {
+ code: "max_files" | "max_file_size" | "accept";
+ message: string;
+ }) => void;
+ onSubmit: (
+ message: PromptInputMessage,
+ event: FormEvent
+ ) => void | Promise;
+};
+
+export const PromptInput = ({
+ className,
+ accept,
+ multiple,
+ globalDrop,
+ syncHiddenInput,
+ maxFiles,
+ maxFileSize,
+ onError,
+ onSubmit,
+ children,
+ ...props
+}: PromptInputProps) => {
+ // Try to use a provider controller if present
+ const controller = useOptionalPromptInputController();
+ const usingProvider = !!controller;
+
+ // Refs
+ const inputRef = useRef(null);
+ const anchorRef = useRef(null);
+ const formRef = useRef(null);
+
+ // Find nearest form to scope drag & drop
+ useEffect(() => {
+ const root = anchorRef.current?.closest("form");
+ if (root instanceof HTMLFormElement) {
+ formRef.current = root;
+ }
+ }, []);
+
+ // ----- Local attachments (only used when no provider)
+ const [items, setItems] = useState<(FileUIPart & { id: string })[]>([]);
+ const files = usingProvider ? controller.attachments.files : items;
+
+ const openFileDialogLocal = useCallback(() => {
+ inputRef.current?.click();
+ }, []);
+
+ const matchesAccept = useCallback(
+ (f: File) => {
+ if (!accept || accept.trim() === "") {
+ return true;
+ }
+ if (accept.includes("image/*")) {
+ return f.type.startsWith("image/");
+ }
+ // NOTE: keep simple; expand as needed
+ return true;
+ },
+ [accept]
+ );
+
+ const addLocal = useCallback(
+ (fileList: File[] | FileList) => {
+ const incoming = Array.from(fileList);
+ const accepted = incoming.filter((f) => matchesAccept(f));
+ if (incoming.length && accepted.length === 0) {
+ onError?.({
+ code: "accept",
+ message: "No files match the accepted types.",
+ });
+ return;
+ }
+ const withinSize = (f: File) =>
+ maxFileSize ? f.size <= maxFileSize : true;
+ const sized = accepted.filter(withinSize);
+ if (accepted.length > 0 && sized.length === 0) {
+ onError?.({
+ code: "max_file_size",
+ message: "All files exceed the maximum size.",
+ });
+ return;
+ }
+
+ setItems((prev) => {
+ const capacity =
+ typeof maxFiles === "number"
+ ? Math.max(0, maxFiles - prev.length)
+ : undefined;
+ const capped =
+ typeof capacity === "number" ? sized.slice(0, capacity) : sized;
+ if (typeof capacity === "number" && sized.length > capacity) {
+ onError?.({
+ code: "max_files",
+ message: "Too many files. Some were not added.",
+ });
+ }
+ const next: (FileUIPart & { id: string })[] = [];
+ for (const file of capped) {
+ next.push({
+ id: nanoid(),
+ type: "file",
+ url: URL.createObjectURL(file),
+ mediaType: file.type,
+ filename: file.name,
+ });
+ }
+ return prev.concat(next);
+ });
+ },
+ [matchesAccept, maxFiles, maxFileSize, onError]
+ );
+
+ const add = usingProvider
+ ? (files: File[] | FileList) => controller.attachments.add(files)
+ : addLocal;
+
+ const remove = usingProvider
+ ? (id: string) => controller.attachments.remove(id)
+ : (id: string) =>
+ setItems((prev) => {
+ const found = prev.find((file) => file.id === id);
+ if (found?.url) {
+ URL.revokeObjectURL(found.url);
+ }
+ return prev.filter((file) => file.id !== id);
+ });
+
+ const clear = usingProvider
+ ? () => controller.attachments.clear()
+ : () =>
+ setItems((prev) => {
+ for (const file of prev) {
+ if (file.url) {
+ URL.revokeObjectURL(file.url);
+ }
+ }
+ return [];
+ });
+
+ const openFileDialog = usingProvider
+ ? () => controller.attachments.openFileDialog()
+ : openFileDialogLocal;
+
+ // Let provider know about our hidden file input so external menus can call openFileDialog()
+ useEffect(() => {
+ if (!usingProvider) return;
+ controller.__registerFileInput(inputRef, () => inputRef.current?.click());
+ }, [usingProvider, controller]);
+
+ // Note: File input cannot be programmatically set for security reasons
+ // The syncHiddenInput prop is no longer functional
+ useEffect(() => {
+ if (syncHiddenInput && inputRef.current && files.length === 0) {
+ inputRef.current.value = "";
+ }
+ }, [files, syncHiddenInput]);
+
+ // Attach drop handlers on nearest form and document (opt-in)
+ useEffect(() => {
+ const form = formRef.current;
+ if (!form) return;
+
+ const onDragOver = (e: DragEvent) => {
+ if (e.dataTransfer?.types?.includes("Files")) {
+ e.preventDefault();
+ }
+ };
+ const onDrop = (e: DragEvent) => {
+ if (e.dataTransfer?.types?.includes("Files")) {
+ e.preventDefault();
+ }
+ if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
+ add(e.dataTransfer.files);
+ }
+ };
+ form.addEventListener("dragover", onDragOver);
+ form.addEventListener("drop", onDrop);
+ return () => {
+ form.removeEventListener("dragover", onDragOver);
+ form.removeEventListener("drop", onDrop);
+ };
+ }, [add]);
+
+ useEffect(() => {
+ if (!globalDrop) return;
+
+ const onDragOver = (e: DragEvent) => {
+ if (e.dataTransfer?.types?.includes("Files")) {
+ e.preventDefault();
+ }
+ };
+ const onDrop = (e: DragEvent) => {
+ if (e.dataTransfer?.types?.includes("Files")) {
+ e.preventDefault();
+ }
+ if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
+ add(e.dataTransfer.files);
+ }
+ };
+ document.addEventListener("dragover", onDragOver);
+ document.addEventListener("drop", onDrop);
+ return () => {
+ document.removeEventListener("dragover", onDragOver);
+ document.removeEventListener("drop", onDrop);
+ };
+ }, [add, globalDrop]);
+
+ useEffect(
+ () => () => {
+ if (!usingProvider) {
+ for (const f of files) {
+ if (f.url) URL.revokeObjectURL(f.url);
+ }
+ }
+ },
+ [usingProvider, files]
+ );
+
+ const handleChange: ChangeEventHandler = (event) => {
+ if (event.currentTarget.files) {
+ add(event.currentTarget.files);
+ }
+ };
+
+ const convertBlobUrlToDataUrl = async (url: string): Promise => {
+ const response = await fetch(url);
+ const blob = await response.blob();
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.onloadend = () => resolve(reader.result as string);
+ reader.onerror = reject;
+ reader.readAsDataURL(blob);
+ });
+ };
+
+ const ctx = useMemo(
+ () => ({
+ files: files.map((item) => ({ ...item, id: item.id })),
+ add,
+ remove,
+ clear,
+ openFileDialog,
+ fileInputRef: inputRef,
+ }),
+ [files, add, remove, clear, openFileDialog]
+ );
+
+ const handleSubmit: FormEventHandler = (event) => {
+ event.preventDefault();
+
+ const form = event.currentTarget;
+ const text = usingProvider
+ ? controller.textInput.value
+ : (() => {
+ const formData = new FormData(form);
+ return (formData.get("message") as string) || "";
+ })();
+
+ // Reset form immediately after capturing text to avoid race condition
+ // where user input during async blob conversion would be lost
+ if (!usingProvider) {
+ form.reset();
+ }
+
+ // Convert blob URLs to data URLs asynchronously
+ Promise.all(
+ files.map(async ({ id, ...item }) => {
+ if (item.url && item.url.startsWith("blob:")) {
+ return {
+ ...item,
+ url: await convertBlobUrlToDataUrl(item.url),
+ };
+ }
+ return item;
+ })
+ ).then((convertedFiles: FileUIPart[]) => {
+ try {
+ const result = onSubmit({ text, files: convertedFiles }, event);
+
+ // Handle both sync and async onSubmit
+ if (result instanceof Promise) {
+ result
+ .then(() => {
+ clear();
+ if (usingProvider) {
+ controller.textInput.clear();
+ }
+ })
+ .catch(() => {
+ // Don't clear on error - user may want to retry
+ });
+ } else {
+ // Sync function completed without throwing, clear attachments
+ clear();
+ if (usingProvider) {
+ controller.textInput.clear();
+ }
+ }
+ } catch (error) {
+ // Don't clear on error - user may want to retry
+ }
+ });
+ };
+
+ // Render with or without local provider
+ const inner = (
+ <>
+
+
+
+
+ );
+
+ return usingProvider ? (
+ inner
+ ) : (
+
+ {inner}
+
+ );
+};
+
+export type PromptInputBodyProps = HTMLAttributes;
+
+export const PromptInputBody = ({
+ className,
+ ...props
+}: PromptInputBodyProps) => (
+
+);
+
+export type PromptInputTextareaProps = ComponentProps<
+ typeof InputGroupTextarea
+>;
+
+export const PromptInputTextarea = ({
+ onChange,
+ className,
+ placeholder = "What would you like to know?",
+ ...props
+}: PromptInputTextareaProps) => {
+ const controller = useOptionalPromptInputController();
+ const attachments = usePromptInputAttachments();
+ const [isComposing, setIsComposing] = useState(false);
+
+ const handleKeyDown: KeyboardEventHandler = (e) => {
+ if (e.key === "Enter") {
+ if (isComposing || e.nativeEvent.isComposing) {
+ return;
+ }
+ if (e.shiftKey) {
+ return;
+ }
+ e.preventDefault();
+
+ // Check if the submit button is disabled before submitting
+ const form = e.currentTarget.form;
+ const submitButton = form?.querySelector(
+ 'button[type="submit"]'
+ ) as HTMLButtonElement | null;
+ if (submitButton?.disabled) {
+ return;
+ }
+
+ form?.requestSubmit();
+ }
+
+ // Remove last attachment when Backspace is pressed and textarea is empty
+ if (
+ e.key === "Backspace" &&
+ e.currentTarget.value === "" &&
+ attachments.files.length > 0
+ ) {
+ e.preventDefault();
+ const lastAttachment = attachments.files.at(-1);
+ if (lastAttachment) {
+ attachments.remove(lastAttachment.id);
+ }
+ }
+ };
+
+ const handlePaste: ClipboardEventHandler = (event) => {
+ const items = event.clipboardData?.items;
+
+ if (!items) {
+ return;
+ }
+
+ const files: File[] = [];
+
+ for (const item of items) {
+ if (item.kind === "file") {
+ const file = item.getAsFile();
+ if (file) {
+ files.push(file);
+ }
+ }
+ }
+
+ if (files.length > 0) {
+ event.preventDefault();
+ attachments.add(files);
+ }
+ };
+
+ const controlledProps = controller
+ ? {
+ value: controller.textInput.value,
+ onChange: (e: ChangeEvent) => {
+ controller.textInput.setInput(e.currentTarget.value);
+ onChange?.(e);
+ },
+ }
+ : {
+ onChange,
+ };
+
+ return (
+ setIsComposing(false)}
+ onCompositionStart={() => setIsComposing(true)}
+ onKeyDown={handleKeyDown}
+ onPaste={handlePaste}
+ placeholder={placeholder}
+ {...props}
+ {...controlledProps}
+ />
+ );
+};
+
+export type PromptInputHeaderProps = Omit<
+ ComponentProps,
+ "align"
+>;
+
+export const PromptInputHeader = ({
+ className,
+ ...props
+}: PromptInputHeaderProps) => (
+ ,
+ "align"
+>;
+
+export const PromptInputFooter = ({
+ className,
+ ...props
+}: PromptInputFooterProps) => (
+ ;
+
+export const PromptInputTools = ({
+ className,
+ ...props
+}: PromptInputToolsProps) => (
+
+);
+
+export type PromptInputButtonProps = ComponentProps;
+
+export const PromptInputButton = ({
+ variant = "ghost",
+ className,
+ size,
+ ...props
+}: PromptInputButtonProps) => {
+ const newSize =
+ size ?? (Children.count(props.children) > 1 ? "sm" : "icon-sm");
+
+ return (
+ ;
+export const PromptInputActionMenu = (props: PromptInputActionMenuProps) => (
+
+
+ {children ??
+
+);
+
+export type PromptInputActionMenuContentProps = ComponentProps<
+ typeof DropdownMenuContent
+>;
+export const PromptInputActionMenuContent = ({
+ className,
+ ...props
+}: PromptInputActionMenuContentProps) => (
+ & {
+ status?: ChatStatus;
+};
+
+export const PromptInputSubmit = ({
+ className,
+ variant = "default",
+ size = "icon-sm",
+ status,
+ children,
+ ...props
+}: PromptInputSubmitProps) => {
+ let Icon =
+ {children ?? Icon}
+
+ );
+};
+
+interface SpeechRecognition extends EventTarget {
+ continuous: boolean;
+ interimResults: boolean;
+ lang: string;
+ start(): void;
+ stop(): void;
+ onstart: ((this: SpeechRecognition, ev: Event) => any) | null;
+ onend: ((this: SpeechRecognition, ev: Event) => any) | null;
+ onresult:
+ | ((this: SpeechRecognition, ev: SpeechRecognitionEvent) => any)
+ | null;
+ onerror:
+ | ((this: SpeechRecognition, ev: SpeechRecognitionErrorEvent) => any)
+ | null;
+}
+
+interface SpeechRecognitionEvent extends Event {
+ results: SpeechRecognitionResultList;
+}
+
+type SpeechRecognitionResultList = {
+ readonly length: number;
+ item(index: number): SpeechRecognitionResult;
+ [index: number]: SpeechRecognitionResult;
+};
+
+type SpeechRecognitionResult = {
+ readonly length: number;
+ item(index: number): SpeechRecognitionAlternative;
+ [index: number]: SpeechRecognitionAlternative;
+ isFinal: boolean;
+};
+
+type SpeechRecognitionAlternative = {
+ transcript: string;
+ confidence: number;
+};
+
+interface SpeechRecognitionErrorEvent extends Event {
+ error: string;
+}
+
+declare global {
+ interface Window {
+ SpeechRecognition: {
+ new (): SpeechRecognition;
+ };
+ webkitSpeechRecognition: {
+ new (): SpeechRecognition;
+ };
+ }
+}
+
+export type PromptInputSpeechButtonProps = ComponentProps<
+ typeof PromptInputButton
+> & {
+ textareaRef?: RefObject;
+ onTranscriptionChange?: (text: string) => void;
+};
+
+export const PromptInputSpeechButton = ({
+ className,
+ textareaRef,
+ onTranscriptionChange,
+ ...props
+}: PromptInputSpeechButtonProps) => {
+ const [isListening, setIsListening] = useState(false);
+ const [recognition, setRecognition] = useState(
+ null
+ );
+ const recognitionRef = useRef(null);
+
+ useEffect(() => {
+ if (
+ typeof window !== "undefined" &&
+ ("SpeechRecognition" in window || "webkitSpeechRecognition" in window)
+ ) {
+ const SpeechRecognition =
+ window.SpeechRecognition || window.webkitSpeechRecognition;
+ const speechRecognition = new SpeechRecognition();
+
+ speechRecognition.continuous = true;
+ speechRecognition.interimResults = true;
+ speechRecognition.lang = "en-US";
+
+ speechRecognition.onstart = () => {
+ setIsListening(true);
+ };
+
+ speechRecognition.onend = () => {
+ setIsListening(false);
+ };
+
+ speechRecognition.onresult = (event) => {
+ let finalTranscript = "";
+
+ const results = Array.from(event.results);
+
+ for (const result of results) {
+ if (result.isFinal) {
+ finalTranscript += result[0]?.transcript ?? "";
+ }
+ }
+
+ if (finalTranscript && textareaRef?.current) {
+ const textarea = textareaRef.current;
+ const currentValue = textarea.value;
+ const newValue =
+ currentValue + (currentValue ? " " : "") + finalTranscript;
+
+ textarea.value = newValue;
+ textarea.dispatchEvent(new Event("input", { bubbles: true }));
+ onTranscriptionChange?.(newValue);
+ }
+ };
+
+ speechRecognition.onerror = (event) => {
+ console.error("Speech recognition error:", event.error);
+ setIsListening(false);
+ };
+
+ recognitionRef.current = speechRecognition;
+ setRecognition(speechRecognition);
+ }
+
+ return () => {
+ if (recognitionRef.current) {
+ recognitionRef.current.stop();
+ }
+ };
+ }, [textareaRef, onTranscriptionChange]);
+
+ const toggleListening = useCallback(() => {
+ if (!recognition) {
+ return;
+ }
+
+ if (isListening) {
+ recognition.stop();
+ } else {
+ recognition.start();
+ }
+ }, [recognition, isListening]);
+
+ return (
+
+
+ );
+};
+
+export type PromptInputSelectProps = ComponentProps;
+
+export const PromptInputSelect = (props: PromptInputSelectProps) => (
+
+);
+
+export type PromptInputSelectTriggerProps = ComponentProps<
+ typeof SelectTrigger
+>;
+
+export const PromptInputSelectTrigger = ({
+ className,
+ ...props
+}: PromptInputSelectTriggerProps) => (
+ ;
+
+export const PromptInputSelectItem = ({
+ className,
+ ...props
+}: PromptInputSelectItemProps) => (
+ ;
+
+export const PromptInputSelectValue = ({
+ className,
+ ...props
+}: PromptInputSelectValueProps) => (
+ ;
+
+export const PromptInputHoverCard = ({
+ openDelay = 0,
+ closeDelay = 0,
+ ...props
+}: PromptInputHoverCardProps) => (
+ ;
+
+export const PromptInputTabsList = ({
+ className,
+ ...props
+}: PromptInputTabsListProps) => ;
+
+export type PromptInputTabProps = HTMLAttributes;
+
+export const PromptInputTab = ({
+ className,
+ ...props
+}: PromptInputTabProps) => ;
+
+export type PromptInputTabLabelProps = HTMLAttributes;
+
+export const PromptInputTabLabel = ({
+ className,
+ ...props
+}: PromptInputTabLabelProps) => (
+
+);
+
+export type PromptInputTabBodyProps = HTMLAttributes;
+
+export const PromptInputTabBody = ({
+ className,
+ ...props
+}: PromptInputTabBodyProps) => (
+
+);
+
+export type PromptInputTabItemProps = HTMLAttributes;
+
+export const PromptInputTabItem = ({
+ className,
+ ...props
+}: PromptInputTabItemProps) => (
+
+);
+
+export type PromptInputCommandProps = ComponentProps;
+
+export const PromptInputCommand = ({
+ className,
+ ...props
+}: PromptInputCommandProps) => ;
+
+export const PromptInputCommandInput = ({
+ className,
+ ...props
+}: PromptInputCommandInputProps) => (
+ ;
+
+export const PromptInputCommandList = ({
+ className,
+ ...props
+}: PromptInputCommandListProps) => (
+ ;
+
+export const PromptInputCommandEmpty = ({
+ className,
+ ...props
+}: PromptInputCommandEmptyProps) => (
+ ;
+
+export const PromptInputCommandGroup = ({
+ className,
+ ...props
+}: PromptInputCommandGroupProps) => (
+ ;
+
+export const PromptInputCommandItem = ({
+ className,
+ ...props
+}: PromptInputCommandItemProps) => (
+
+ {children}
+
+ );
+};
+
+export const Shimmer = memo(ShimmerComponent);
diff --git a/components/ai-elements/sources.tsx b/components/ai-elements/sources.tsx
new file mode 100644
index 00000000..0756664f
--- /dev/null
+++ b/components/ai-elements/sources.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import { BookIcon, ChevronDownIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+
+export type SourcesProps = ComponentProps<"div">;
+
+export const Sources = ({ className, ...props }: SourcesProps) => (
+ & {
+ count: number;
+};
+
+export const SourcesTrigger = ({
+ className,
+ count,
+ children,
+ ...props
+}: SourcesTriggerProps) => (
+
+ {children ?? (
+ <>
+
+);
+
+export type SourcesContentProps = ComponentProps;
+
+export const SourcesContent = ({
+ className,
+ ...props
+}: SourcesContentProps) => (
+ ;
+
+export const Suggestions = ({
+ className,
+ children,
+ ...props
+}: SuggestionsProps) => (
+
+
+);
+
+export type SuggestionProps = Omit, "onClick"> & {
+ suggestion: string;
+ onClick?: (suggestion: string) => void;
+};
+
+export const Suggestion = ({
+ suggestion,
+ onClick,
+ className,
+ variant = "outline",
+ size = "sm",
+ children,
+ ...props
+}: SuggestionProps) => {
+ const handleClick = () => {
+ onClick?.(suggestion);
+ };
+
+ return (
+
+ );
+};
diff --git a/components/blog-index.js b/components/blog-index.js
deleted file mode 100644
index 6a5e9b55..00000000
--- a/components/blog-index.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { getPagesUnderRoute } from "nextra/context";
-import filterRouteLocale from "nextra/filter-route-locale"
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-export default function BlogIndex({ more = "Read more" }) {
- const { locale, defaultLocale } = useRouter();
- return filterRouteLocale(getPagesUnderRoute("/blog"), locale, defaultLocale).map((page) => {
- return (
- ;
+
+export const Callout = ({ className, ...props }: CalloutProps) => (
+ ;
+
+export const CalloutContainer = (props: CalloutContainerProps) => (
+ ;
+
+export const CalloutTitle = (props: CalloutTitleProps) => (
+ | undefined>(
+ undefined
+ );
+
+ // Load messages from Dexie with live query
+ const storedMessages = useLiveQuery(() =>
+ db.messages.orderBy("sequence").toArray()
+ );
+
+ const initialMessages =
+ storedMessages?.map(({ timestamp, sequence, ...message }) => message) ?? [];
+
+ const isLoading = storedMessages === undefined;
+
+ // Save messages to Dexie with debouncing
+ const saveMessages = useCallback((messages: UIMessage[]) => {
+ if (saveTimeoutRef.current) {
+ clearTimeout(saveTimeoutRef.current);
+ }
+
+ saveTimeoutRef.current = setTimeout(async () => {
+ try {
+ const baseTimestamp = Date.now();
+ const messagesToStore = messages.map((message, index) => ({
+ ...message,
+ timestamp: baseTimestamp + index * 1000,
+ sequence: index,
+ }));
+
+ await db.transaction("rw", db.messages, async () => {
+ await db.messages.clear();
+ await db.messages.bulkAdd(messagesToStore);
+ });
+ } catch (error) {
+ console.error("Failed to save messages:", error);
+ }
+ }, 300);
+ }, []);
+
+ // Clear all messages from Dexie
+ const clearMessages = useCallback(async () => {
+ try {
+ await db.messages.clear();
+ } catch (error) {
+ console.error("Failed to clear messages:", error);
+ }
+ }, []);
+
+ // Cleanup timeout on unmount
+ useEffect(
+ () => () => {
+ if (saveTimeoutRef.current) {
+ clearTimeout(saveTimeoutRef.current);
+ }
+ },
+ []
+ );
+
+ return {
+ initialMessages,
+ isLoading,
+ saveMessages,
+ clearMessages,
+ };
+};
+
+type ChatProps = {
+ basePath: string | undefined;
+ suggestions: string[];
+};
+
+const ChatInner = ({ basePath, suggestions }: ChatProps) => {
+ const [isInitialized, setIsInitialized] = useState(false);
+ const [localPrompt, setLocalPrompt] = useState("");
+ const [providerKey, setProviderKey] = useState(0);
+ const { prompt, setPrompt, setIsOpen } = useChatContext();
+ const { initialMessages, isLoading, saveMessages, clearMessages } =
+ useChatPersistence();
+
+ const { messages, sendMessage, status, setMessages } = useChat({
+ transport: new DefaultChatTransport({
+ api: basePath ? `${basePath}/api/chat` : "/api/chat",
+ }),
+ onError: (error) => {
+ toast.error(error.message, {
+ description: error.message,
+ });
+ },
+ });
+
+ // Sync external prompt changes to local state and force provider remount
+ useEffect(() => {
+ if (prompt && prompt !== localPrompt) {
+ setLocalPrompt(prompt);
+ setProviderKey((prev) => prev + 1);
+ }
+ }, [prompt, localPrompt]);
+
+ // Set initial messages once loaded from IndexedDB
+ useEffect(() => {
+ if (!(isLoading || isInitialized) && initialMessages.length > 0) {
+ setMessages(initialMessages);
+ setIsInitialized(true);
+ } else if (!(isLoading || isInitialized)) {
+ // Mark as initialized even if no messages to avoid infinite re-runs
+ setIsInitialized(true);
+ }
+ }, [isLoading, initialMessages, isInitialized, setMessages]);
+
+ // Save messages to IndexedDB whenever they change (but only after initialization)
+ useEffect(() => {
+ if (isInitialized && messages.length > 0) {
+ saveMessages(messages);
+ }
+ }, [messages, saveMessages, isInitialized]);
+
+ const handleSuggestionClick = async (suggestion: string) => {
+ await sendMessage({ text: suggestion });
+ setLocalPrompt("");
+ setPrompt("");
+ };
+
+ const handleSubmit: PromptInputProps["onSubmit"] = async (message, event) => {
+ event.preventDefault();
+
+ const { text } = message;
+
+ if (!text) {
+ return;
+ }
+
+ await sendMessage({ text });
+ setLocalPrompt("");
+ setPrompt("");
+ };
+
+ const handleClearChat = async () => {
+ try {
+ await clearMessages();
+ setMessages([]);
+ toast.success("Chat history cleared");
+ } catch (error) {
+ toast.error("Failed to clear chat history", {
+ description: error instanceof Error ? error.message : "Unknown error",
+ });
+ }
+ };
+
+ // Show loading state while initial messages are being loaded
+ if (isLoading) {
+ return (
+
+
+ ) => (
+
+ {props.children}
+
+);
+
+export const CodeBlockTabsTrigger = ({
+ children,
+ ...props
+}: ComponentProps) => (
+
+
+ {children}
+
+);
+
+export const CodeBlockTabs = ({
+ ref,
+ ...props
+}: ComponentProps) => (
+
+ {props.children}
+
+);
+
+export const CodeBlockTab = (props: ComponentProps) => (
+ div]:mb-0 [&_pre]:rounded-none [&_pre]:border-none",
+ props.className
+ )}
+ />
+);
diff --git a/components/geistdocs/code-block.tsx b/components/geistdocs/code-block.tsx
new file mode 100644
index 00000000..ba470d24
--- /dev/null
+++ b/components/geistdocs/code-block.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import { CheckIcon, CopyIcon } from "lucide-react";
+import {
+ type CSSProperties,
+ type ReactNode,
+ useCallback,
+ useRef,
+ useState,
+} from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+type CodeBlockProps = {
+ children: ReactNode;
+ className?: string;
+ icon?: ReactNode;
+ style?: CSSProperties;
+ tabIndex?: number;
+ title?: string;
+};
+
+export const CodeBlock = ({
+ children,
+ className,
+ icon,
+ style,
+ tabIndex,
+ title,
+}: CodeBlockProps) => {
+ const ref = useRef(null);
+ const [isCopied, setIsCopied] = useState(false);
+
+ const copyToClipboard = useCallback(async () => {
+ if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
+ toast.error("Clipboard API not available");
+ return;
+ }
+
+ const code = ref.current?.innerText;
+
+ if (!code) {
+ toast.error("No code to copy");
+ return;
+ }
+
+ try {
+ await navigator.clipboard.writeText(code);
+ setIsCopied(true);
+ setTimeout(() => setIsCopied(false), 2000);
+ } catch (error) {
+ const message = error instanceof Error ? error.message : "Unknown error";
+
+ toast.error(message);
+ }
+ }, []);
+
+ const Icon = isCopied ? CheckIcon : CopyIcon;
+
+ const CodeBlockComponent = useCallback(
+ (props: { className?: string }) => (
+
+
+
+
+ {title}
+
+
+
+
+
+
+ );
+};
diff --git a/components/geistdocs/copy-chat.tsx b/components/geistdocs/copy-chat.tsx
new file mode 100644
index 00000000..f00f6523
--- /dev/null
+++ b/components/geistdocs/copy-chat.tsx
@@ -0,0 +1,56 @@
+import type { UIMessage } from "ai";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+export const CopyChat = ({ messages }: { messages: UIMessage[] }) => {
+ const [copied, setCopied] = useState(false);
+
+ const handleCopyChat = async () => {
+ const markdown = messages
+ .map((message) => {
+ const role = message.role === "user" ? "You" : "AI";
+ const content = message.parts
+ .filter((part) => part.type === "text")
+ .map((part) => part.text)
+ .join("\n");
+ return `**${role}:**\n${content}`;
+ })
+ .join("\n\n---\n\n");
+
+ try {
+ await navigator.clipboard.writeText(markdown);
+ toast.success("Chat copied to clipboard");
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ } catch (error) {
+ toast.error("Failed to copy chat", {
+ description: error instanceof Error ? error.message : "Unknown error",
+ });
+ }
+ };
+
+ const Icon = copied ? CheckIcon : CopyIcon;
+
+ return (
+
+
+
+
+ Copy chat
+
+ );
+};
diff --git a/components/geistdocs/copy-page.tsx b/components/geistdocs/copy-page.tsx
new file mode 100644
index 00000000..292c364d
--- /dev/null
+++ b/components/geistdocs/copy-page.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { useCopyButton } from "fumadocs-ui/utils/use-copy-button";
+import { CheckIcon, CopyIcon } from "lucide-react";
+
+type CopyPageProps = {
+ text: string;
+};
+
+export const CopyPage = ({ text }: CopyPageProps) => {
+ const [checked, handleCopy] = useCopyButton(async () => {
+ await navigator.clipboard.writeText(text);
+ });
+
+ const Icon = checked ? CheckIcon : CopyIcon;
+
+ return (
+
+ );
+};
diff --git a/components/geistdocs/desktop-menu.tsx b/components/geistdocs/desktop-menu.tsx
new file mode 100644
index 00000000..6ff26203
--- /dev/null
+++ b/components/geistdocs/desktop-menu.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import DynamicLink from "fumadocs-core/dynamic-link";
+import { ExternalLinkIcon } from "lucide-react";
+import {
+ NavigationMenu,
+ NavigationMenuItem,
+ NavigationMenuLink,
+ NavigationMenuList,
+} from "@/components/ui/navigation-menu";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+
+type DesktopMenuProps = {
+ items: { label: string; href: string }[];
+ className?: string;
+};
+
+export const DesktopMenu = ({ items, className }: DesktopMenuProps) => {
+ const isMobile = useIsMobile();
+
+ return (
+
+
+ {items.map((item) => (
+
+
+ {item.href.startsWith("http") ? (
+
+ {item.label}
+
+ {item.label}
+
+ )}
+
+
+ ))}
+
+
+ );
+};
diff --git a/components/geistdocs/docs-layout.tsx b/components/geistdocs/docs-layout.tsx
new file mode 100644
index 00000000..42675eff
--- /dev/null
+++ b/components/geistdocs/docs-layout.tsx
@@ -0,0 +1,47 @@
+import { DocsLayout as FumadocsDocsLayout } from "fumadocs-ui/layouts/docs";
+import type { ComponentProps, CSSProperties, ReactNode } from "react";
+import {
+ Folder,
+ Item,
+ Separator,
+ Sidebar,
+} from "@/components/geistdocs/sidebar";
+import { i18n } from "@/lib/geistdocs/i18n";
+
+type DocsLayoutProps = {
+ tree: ComponentProps["tree"];
+ children: ReactNode;
+};
+
+export const DocsLayout = ({ tree, children }: DocsLayoutProps) => (
+ ;
+
+export const DocsPage = ({ ...props }: PageProps) => (
+ ) => (
+
+) => ) => (
+ (null);
+ const [message, setMessage] = useState("");
+ const [isPending, startTransition] = useTransition();
+
+ useEffect(() => {
+ const item = localStorage.getItem(`docs-feedback-${url}`);
+
+ if (!item) {
+ return;
+ }
+
+ setSubmitted(true);
+ }, [url]);
+
+ const submit: FormEventHandler = (e) => {
+ e.preventDefault();
+
+ if (!emotion) {
+ return;
+ }
+
+ startTransition(() => {
+ const feedback: Feedback = {
+ emotion,
+ message,
+ };
+
+ sendFeedback(url, feedback).then(() => {
+ setSubmitted(true);
+ setMessage("");
+ setEmotion(null);
+ });
+ });
+
+ e?.preventDefault();
+ };
+
+ return (
+
+
+
+
+
+
div]:pb-0",
+ index === currentBranch ? "block" : "hidden"
+ )}
+ key={branch.key}
+ {...props}
+ >
+ {branch}
+
+ ));
+};
+
+export type MessageBranchSelectorProps = HTMLAttributes
+ {isImage ? (
+ <>
+ 
+ {onRemove && (
+
+ )}
+
+ ) : (
+ <>
+
+
+
+
+
+
+ {onRemove && (
+
+ )}
+
+ )}
+
+ );
+}
+
+export type MessageAttachmentsProps = ComponentProps<"div">;
+
+export function MessageAttachments({
+ children,
+ className,
+ ...props
+}: MessageAttachmentsProps) {
+ if (!children) {
+ return null;
+ }
+
+ return (
+
+
+ {attachmentLabel}
+
+ {children}
+
+ );
+}
+
+export type MessageToolbarProps = ComponentProps<"div">;
+
+export const MessageToolbar = ({
+ className,
+ children,
+ ...props
+}: MessageToolbarProps) => (
+
+ {children}
+
+);
diff --git a/components/ai-elements/open-in-chat.tsx b/components/ai-elements/open-in-chat.tsx
new file mode 100644
index 00000000..0c62a6ac
--- /dev/null
+++ b/components/ai-elements/open-in-chat.tsx
@@ -0,0 +1,365 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+import {
+ ChevronDownIcon,
+ ExternalLinkIcon,
+ MessageCircleIcon,
+} from "lucide-react";
+import { type ComponentProps, createContext, useContext } from "react";
+
+const providers = {
+ github: {
+ title: "Open in GitHub",
+ createUrl: (url: string) => url,
+ icon: (
+
+ ),
+ },
+ scira: {
+ title: "Open in Scira",
+ createUrl: (q: string) =>
+ `https://scira.ai/?${new URLSearchParams({
+ q,
+ })}`,
+ icon: (
+
+ ),
+ },
+ chatgpt: {
+ title: "Open in ChatGPT",
+ createUrl: (prompt: string) =>
+ `https://chatgpt.com/?${new URLSearchParams({
+ hints: "search",
+ prompt,
+ })}`,
+ icon: (
+
+ ),
+ },
+ claude: {
+ title: "Open in Claude",
+ createUrl: (q: string) =>
+ `https://claude.ai/new?${new URLSearchParams({
+ q,
+ })}`,
+ icon: (
+
+ ),
+ },
+ t3: {
+ title: "Open in T3 Chat",
+ createUrl: (q: string) =>
+ `https://t3.chat/new?${new URLSearchParams({
+ q,
+ })}`,
+ icon:
+
+
+
+
+ {attachmentLabel}
+
+ {isImage ? (
+
+ ) : (
+
+
+
+
+ )}
+
+ {isImage && (
+
+
+
+
+ )}
+
+
+
+
+ + {filename || (isImage ? "Image" : "Attachment")} +
+ {data.mediaType && ( ++ {data.mediaType} +
+ )} +
+ {attachments.files.map((file) => (
+ {children(file)}
+ ))}
+
+ );
+}
+
+export type PromptInputActionAddAttachmentsProps = ComponentProps<
+ typeof DropdownMenuItem
+> & {
+ label?: string;
+};
+
+export const PromptInputActionAddAttachments = ({
+ label = "Add photos or files",
+ ...props
+}: PromptInputActionAddAttachmentsProps) => {
+ const attachments = usePromptInputAttachments();
+
+ return (
+ Used {count} sources
+
+ {children}
+
+
-
- );
- });
-}
diff --git a/components/authors.js b/components/custom/authors.tsx
similarity index 58%
rename from components/authors.js
rename to components/custom/authors.tsx
index 1305ff7a..ee42b0f8 100644
--- a/components/authors.js
+++ b/components/custom/authors.tsx
@@ -1,12 +1,25 @@
-export default function Authors({ date, children, by = "by" }) {
+import type { ReactNode } from 'react'
+
+type AuthorsProps = {
+ date: string
+ children: ReactNode
+ by?: string
+}
+
+export default function Authors({ date, children, by = 'by' }: AuthorsProps) {
return (
- - {page.meta?.title || page.frontMatter?.title || page.name} - -
-- {page.frontMatter?.description}{" "} - - - {more + " →"} - - -
- {page.frontMatter?.date ? ( -- {page.frontMatter.date} -
- ) : null} -
{date} {by} {children}
- );
+ )
+}
+
+type AuthorProps = {
+ name: string
+ link: string
}
-export function Author({ name, link }) {
+export function Author({ name, link }: AuthorProps) {
return (
{name}
- );
+ )
}
diff --git a/components/custom/bleed.tsx b/components/custom/bleed.tsx
new file mode 100644
index 00000000..54733b34
--- /dev/null
+++ b/components/custom/bleed.tsx
@@ -0,0 +1,23 @@
+import { cn } from '@/lib/utils'
+import type { ComponentProps } from 'react'
+
+type BleedProps = ComponentProps<'div'> & {
+ full?: boolean
+}
+
+export const Bleed = ({ full, className, ...props }: BleedProps) => {
+ return (
+
+ )
+}
diff --git a/components/diagrams/cache.js b/components/custom/diagrams/cache.tsx
similarity index 70%
rename from components/diagrams/cache.js
rename to components/custom/diagrams/cache.tsx
index 45b06d5a..1539d2fe 100644
--- a/components/diagrams/cache.js
+++ b/components/custom/diagrams/cache.tsx
@@ -1,8 +1,14 @@
-import useLocalesMap from "../use-locales-map";
-import { diagramCachePathsMap } from "../../translations/svgs";
+'use client'
+
+import { diagramCachePathsMap } from '../../translations/svgs'
+import { useParams } from 'next/navigation'
export const Cache = () => {
- const paths = useLocalesMap(diagramCachePathsMap);
+ const { lang } = useParams()
+ const paths =
+ typeof lang === 'string' && lang in diagramCachePathsMap
+ ? diagramCachePathsMap[lang as keyof typeof diagramCachePathsMap]
+ : diagramCachePathsMap.en
return (
- );
-};
+ )
+}
diff --git a/components/diagrams/infinite.js b/components/custom/diagrams/infinite.tsx
similarity index 72%
rename from components/diagrams/infinite.js
rename to components/custom/diagrams/infinite.tsx
index 45d04a11..8b1f91c9 100644
--- a/components/diagrams/infinite.js
+++ b/components/custom/diagrams/infinite.tsx
@@ -1,8 +1,14 @@
-import useLocalesMap from "../use-locales-map";
-import { diagramInfinitePathMap } from "../../translations/svgs";
+'use client'
+
+import { diagramInfinitePathMap } from '../../translations/svgs'
+import { useParams } from 'next/navigation'
export const Infinite = () => {
- const path = useLocalesMap(diagramInfinitePathMap);
+ const { lang } = useParams()
+ const path =
+ typeof lang === 'string' && lang in diagramInfinitePathMap
+ ? diagramInfinitePathMap[lang as keyof typeof diagramInfinitePathMap]
+ : diagramInfinitePathMap.en
return (
- );
-};
+ )
+}
diff --git a/components/diagrams/pagination.js b/components/custom/diagrams/pagination.tsx
similarity index 86%
rename from components/diagrams/pagination.js
rename to components/custom/diagrams/pagination.tsx
index 3b9725ea..1e2af179 100644
--- a/components/diagrams/pagination.js
+++ b/components/custom/diagrams/pagination.tsx
@@ -1,8 +1,16 @@
-import useLocalesMap from "../use-locales-map";
-import { diagramPaginationPathsMap } from "../../translations/svgs";
+'use client'
+
+import { diagramPaginationPathsMap } from '../../translations/svgs'
+import { useParams } from 'next/navigation'
export const Pagination = () => {
- const paths = useLocalesMap(diagramPaginationPathsMap);
+ const { lang } = useParams()
+ const paths =
+ typeof lang === 'string' && lang in diagramPaginationPathsMap
+ ? diagramPaginationPathsMap[
+ lang as keyof typeof diagramPaginationPathsMap
+ ]
+ : diagramPaginationPathsMap.en
return (
- );
-};
+ )
+}
diff --git a/components/diagrams/welcome.js b/components/custom/diagrams/welcome.tsx
similarity index 74%
rename from components/diagrams/welcome.js
rename to components/custom/diagrams/welcome.tsx
index 4cc177d5..cbf41aad 100644
--- a/components/diagrams/welcome.js
+++ b/components/custom/diagrams/welcome.tsx
@@ -1,8 +1,14 @@
-import useLocalesMap from "../use-locales-map";
-import { diagramWelcomePathMap } from "../../translations/svgs";
+'use client'
+
+import { diagramWelcomePathMap } from '../../translations/svgs'
+import { useParams } from 'next/navigation'
export const Welcome = () => {
- const path = useLocalesMap(diagramWelcomePathMap);
+ const { lang } = useParams()
+ const path =
+ typeof lang === 'string' && lang in diagramWelcomePathMap
+ ? diagramWelcomePathMap[lang as keyof typeof diagramWelcomePathMap]
+ : diagramWelcomePathMap.en
return (
- );
-};
+ )
+}
diff --git a/components/excalidraw/state-machine.excalidraw b/components/custom/excalidraw/state-machine.excalidraw
similarity index 100%
rename from components/excalidraw/state-machine.excalidraw
rename to components/custom/excalidraw/state-machine.excalidraw
diff --git a/components/logo.js b/components/custom/logo.tsx
similarity index 92%
rename from components/logo.js
rename to components/custom/logo.tsx
index 61ac3652..03f6895b 100644
--- a/components/logo.js
+++ b/components/custom/logo.tsx
@@ -1,4 +1,4 @@
-export default function Logo({ height }) {
+export default function Logo({ height }: { height: number }) {
return (
- );
+ )
}
-
diff --git a/components/features.js b/components/features.js
deleted file mode 100644
index c86b6d00..00000000
--- a/components/features.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useId } from "react";
-import styles from "./features.module.css";
-import useLocalesMap from "./use-locales-map";
-import { featuresMap, titleMap } from "../translations/text";
-
-import BackendAgnosticIcon from "../components/icons/backend-agnostic";
-import LightweightIcon from "../components/icons/lightweight";
-import PaginationIcon from "../components/icons/pagination";
-import RealtimeIcon from "../components/icons/realtime";
-import RemoteLocalIcon from "../components/icons/remote-local";
-import RenderingStrategiesIcon from "../components/icons/rendering-strategies";
-import SuspenseIcon from "../components/icons/suspense";
-import TypeScriptIcon from "../components/icons/typescript";
-
-export function Feature({ text, icon }) {
- return (
-
- {icon}
-
- );
-}
-
-/** @type {{ key: string; icon: React.FC }[]} */
-const FEATURES_LIST = [
- { key: "lightweight", icon: {text}
-
-
- );
-}
diff --git a/components/features.module.css b/components/features.module.css
deleted file mode 100644
index d3395d90..00000000
--- a/components/features.module.css
+++ /dev/null
@@ -1,45 +0,0 @@
-.features {
- display: grid;
- grid-template-columns: 1fr 1fr 1fr 1fr;
- gap: 1rem 2rem;
- margin: 2.5rem 0 2rem;
-}
-.feature {
- align-items: center;
- display: inline-flex;
-}
-.feature h4 {
- margin: 0 0 0 0.5rem;
- font-weight: 700;
- font-size: 1.1rem;
- white-space: nowrap;
-}
-@media (max-width: 860px) {
- .features {
- gap: 1rem 0.5rem;
- }
- .feature {
- padding-left: 0;
- justify-content: center;
- }
- .feature svg {
- width: 20px;
- }
- .feature h4 {
- font-size: 0.9rem;
- }
-}
-@media (max-width: 660px) {
- .features {
- grid-template-columns: 1fr 1fr;
- }
-}
-@media (max-width: 370px) {
- .feature h4 {
- font-size: 0.8rem;
- }
- .feature svg {
- width: 16px;
- stroke-width: 2.5px;
- }
-}
diff --git a/components/geistdocs/ask-ai.tsx b/components/geistdocs/ask-ai.tsx
new file mode 100644
index 00000000..9fa85ae4
--- /dev/null
+++ b/components/geistdocs/ask-ai.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { MessageCircleIcon } from "lucide-react";
+import { useChatContext } from "@/hooks/geistdocs/use-chat";
+
+type AskAIProps = {
+ href: string;
+};
+
+export const AskAI = ({ href }: AskAIProps) => {
+ const { setIsOpen, setPrompt } = useChatContext();
+
+ const protocol = process.env.NODE_ENV === "production" ? "https" : "http";
+ const url = new URL(
+ href,
+ `${protocol}://${process.env.NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL}`
+ ).toString();
+ const query = `Read this page, I want to ask questions about it. ${url}`;
+
+ return (
+
+ );
+};
diff --git a/components/geistdocs/callout.tsx b/components/geistdocs/callout.tsx
new file mode 100644
index 00000000..1d553bc8
--- /dev/null
+++ b/components/geistdocs/callout.tsx
@@ -0,0 +1,40 @@
+import {
+ CalloutContainer as CalloutContainerPrimitive,
+ CalloutDescription as CalloutDescriptionPrimitive,
+ Callout as CalloutPrimitive,
+ CalloutTitle as CalloutTitlePrimitive,
+} from "fumadocs-ui/components/callout";
+import type { ComponentProps } from "react";
+import { cn } from "@/lib/utils";
+
+type CalloutProps = ComponentProps{title}
-
- {FEATURES_LIST.map(({ key, icon }) => (
-
-
+
+ );
+ }
+
+ return (
+
+
+
+ {messages.map((message) => (
+
+
+
+ {part.text}
+
+
+ ))}
+
+ ))}
+ {status === "submitted" && (
+
+
+
+
+ );
+};
+
+export const Chat = ({ basePath, suggestions }: ChatProps) => {
+ const { isOpen, setIsOpen } = useChatContext();
+ const isMobile = useIsMobile();
+
+ useEffect(() => {
+ const handleKeyDown = (event: KeyboardEvent) => {
+ // Check for Meta (⌘ on Mac, Windows key on Windows) + "i" (ignore case)
+ if (
+ (event.metaKey || event.ctrlKey) &&
+ !event.altKey &&
+ !event.shiftKey &&
+ event.key.toLowerCase() === "i"
+ ) {
+ event.preventDefault();
+
+ setIsOpen((prev) => !prev);
+ }
+ };
+
+ window.addEventListener("keydown", handleKeyDown);
+
+ return () => {
+ window.removeEventListener("keydown", handleKeyDown);
+ };
+ }, [setIsOpen]);
+
+ return (
+ <>
+
+
+
+
+
+ Chat
+
+
+
+
+
+
+ Clear chat
+
+
+
+
+
+ Close chat
+
+
+
+
+
+ )}
+
+ {!messages.length && (
+ <>
+
+ {suggestions.map((text) => (
+
+
+
+
+ {(attachment) =>
+
+ {
+ setLocalPrompt(e.target.value);
+ setPrompt(e.target.value);
+ }}
+ />
+
+
+
+
+
+
+
+ Tip: You can open and close chat with{" "}
+
+ {localPrompt.length} / 1000 +
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/components/geistdocs/code-block-tabs.tsx b/components/geistdocs/code-block-tabs.tsx
new file mode 100644
index 00000000..9385c050
--- /dev/null
+++ b/components/geistdocs/code-block-tabs.tsx
@@ -0,0 +1,61 @@
+import {
+ Tabs,
+ TabsContent,
+ TabsList,
+ TabsTrigger,
+} from "fumadocs-ui/components/tabs.unstyled";
+import type { ComponentProps } from "react";
+import { cn } from "@/lib/utils";
+
+export const CodeBlockTabsList = (props: ComponentPropscode]:grid",
+ className,
+ props.className
+ )}
+ ref={ref}
+ style={style}
+ tabIndex={tabIndex}
+ >
+ {children}
+
+ ),
+ [children, style, tabIndex, className]
+ );
+
+ if (!title) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+ {submitted ? (
+
+
+ ) : (
+ Thank you for your feedback!
+