4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T3069,"use client"; import { Card } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import * as React from "react"; import { PromptInput } from "@/components/ui/prompt-input"; import { StreamingMessage } from "@/components/ui/streaming-message"; import { CitationList, type Citation } from "@/components/ui/citation-ui"; import { ConversationSidebar, type ConversationGroup, } from "@/components/ui/conversation-sidebar"; import { ResponseVersions, type ResponseVersion, } from "@/components/ui/response-versions"; import { ContextPicker, type ContextItem, } from "@/components/ui/context-picker"; /* ------------------------------------------------------------------ */ /* Types */ /* ------------------------------------------------------------------ */ type Turn = { id: number; role: "user" | "assistant"; text: string; }; const INITIAL_CONVERSATIONS: ConversationGroup[] = [ { id: "today", label: "Today", conversations: [ { id: "t1", title: "Streaming UI patterns", updatedAt: "2m" }, { id: "t2", title: "Claude model pricing", updatedAt: "1h" }, ], }, { id: "week", label: "Previous 7 days", conversations: [ { id: "t3", title: "Agent approval UX", updatedAt: "2d" }, { id: "t4", title: "Research: RAG citations", updatedAt: "4d" }, ], }, ]; const MODELS = [ { id: "sonnet", name: "Claude Sonnet 5", hint: "Balanced", icon: }, { id: "opus", name: "Claude Opus 5", hint: "Reasoning", icon: }, { id: "haiku", name: "Claude Haiku 4.5", hint: "Fast", icon: }, ]; const CONTEXT_SOURCES: ContextItem[] = [ { id: "f1", kind: "file", title: "Q3-planning.md", detail: "docs/roadmap", tokens: 2400, recent: true }, { id: "f2", kind: "file", title: "metrics.csv", detail: "Downloads", tokens: 9800 }, { id: "w1", kind: "web", title: "AI SDK — useChat", detail: "sdk.vercel.ai/docs", tokens: 3100, recent: true }, { id: "w2", kind: "web", title: "Pricing page draft", detail: "Notion · shared", status: "permission-required" }, { id: "k1", kind: "knowledge", title: "Support handbook", detail: "142 articles", tokens: 12400 }, ]; const SOURCES: Citation[] = [ { id: 1, title: "Claude Fable 5 and Mythos 5", url: "https://www.anthropic.com/news/claude-fable-5-mythos-5", domain: "anthropic.com", snippet: "Fable 5 is the most advanced generally available Claude model.", }, { id: 2, title: "Designing AI-native interfaces", url: "https://example.com/ai-native-ui", domain: "example.com", snippet: "A field guide to streaming, agent and reasoning states.", }, ]; const REPLIES = [ "Streaming answers feel instant because the first token lands in milliseconds. Keep the reveal smooth, offer a stop control, and only add citations after the claim is grounded.", "For agent UIs, show tool calls as they happen and gate irreversible actions behind approval. Transparency is what separates a trustworthy assistant from a black box.", "The model selector belongs at the point of composition. Let users pick per message, describe the trade-off, and never wipe their draft when they switch.", ]; /* Alternate greetings the regenerate loop cycles through. */ const GREETINGS = [ "Hi — I'm your AI research assistant. Ask me anything, or attach files and I'll ground answers in them.", "Hello — ask me anything. I can search the web, read attachments, and cite what I find.", "Welcome back. Pick a model below and ask away — I'll show my sources when I use them.", ]; /* ------------------------------------------------------------------ */ /* Icons */ /* ------------------------------------------------------------------ */ /** * The provider's mark, inlined so this pattern stays dependency-free. Swap it * for whichever providers your own model list uses. */ function ClaudeMark() { return ( ); } function SearchIcon() { return ( ); } /* ------------------------------------------------------------------ */ /* AIChatPattern */ /* ------------------------------------------------------------------ */ export function AIChatPattern() { const [turns, setTurns] = React.useState([]); const [pending, setPending] = React.useState(null); const [showSources, setShowSources] = React.useState(false); const [conversations, setConversations] = React.useState(INITIAL_CONVERSATIONS); const [activeConvo, setActiveConvo] = React.useState("t1"); const [contextSel, setContextSel] = React.useState([]); const [contextGranted, setContextGranted] = React.useState([]); /* The greeting doubles as the regenerate demo: it is a version stack, and the regenerate button appends a streaming v2 the reader can page back from. */ const [greetingVersions, setGreetingVersions] = React.useState([ { id: "g1", status: "ready", content: }, ]); const scrollRef = React.useRef(null); const idRef = React.useRef(2); React.useEffect(() => { const el = scrollRef.current; if (el) el.scrollTop = el.scrollHeight; }, [turns, pending]); function submit(value: string) { setTurns((t) => [...t, { id: idRef.current++, role: "user", text: value }]); setPending(null); setShowSources(false); const reply = REPLIES[idRef.current % REPLIES.length]; window.setTimeout(() => setPending(reply), 500); } function onStreamComplete() { if (pending) { setTurns((t) => [...t, { id: idRef.current++, role: "assistant", text: pending }]); setPending(null); setShowSources(true); } } function regenerateGreeting() { const id = `g${idRef.current++}`; const text = GREETINGS[idRef.current % GREETINGS.length]; setGreetingVersions((vs) => [ ...vs, { id, status: "generating", content: ( setGreetingVersions((vs2) => vs2.map((v) => (v.id === id ? { ...v, status: "ready" } : v)), ) } /> ), }, ]); } function newChat() { const id = `t${idRef.current++}`; setConversations((gs) => gs.map((g, i) => i === 0 ? { ...g, conversations: [{ id, title: "Untitled chat", updatedAt: "now" }, ...g.conversations] } : g, ), ); setActiveConvo(id); setTurns([]); setGreetingVersions([ { id: `g${idRef.current++}`, status: "ready", content: , }, ]); setPending(null); setShowSources(false); } const activeTitle = conversations.flatMap((g) => g.conversations).find((c) => c.id === activeConvo)?.title ?? "AI Chat"; return ( {/* Sidebar — hidden below md; on small screens the chat takes over. */}

setConversations((gs) => gs.map((g) => ({ ...g, conversations: g.conversations.map((c) => (c.id === id ? { ...c, title } : c)), })), ) } onTogglePin={(id) => setConversations((gs) => gs.map((g) => ({ ...g, conversations: g.conversations.map((c) => c.id === id ? { ...c, pinned: !c.pinned } : c, ), })), ) } onDelete={(id) => setConversations((gs) => gs .map((g) => ({ ...g, conversations: g.conversations.filter((c) => c.id !== id) })) .filter((g) => g.conversations.length > 0), ) } onRestore={(conv) => setConversations((gs) => gs.map((g, i) => i === 0 ? { ...g, conversations: [conv, ...g.conversations] } : g, ), ) } />

Claude Sonnet 5

Search & web browsing enabled

{/* Main */}

{/* Header */}

AI Chat

{activeTitle}

Online

{/* Messages */}

{turns.map((t) => t.role === "user" ? (

{t.text}

) : (

), )} {pending && ( setPending(null)} onComplete={onStreamComplete} /> )} {showSources && !pending && (

)}

{/* Composer */}

contextGranted.includes(it.id) && it.status === "permission-required" ? { ...it, status: "available" as const } : it, )} selectedIds={contextSel} onSelectionChange={setContextSel} onRequestAccess={(item) => setContextGranted((g) => [...g, item.id])} />

AI can make mistakes. Verify important information.

); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@scrimui","registryDependencies":["https://scrimui.dev/r/prompt-input.json","https://scrimui.dev/r/streaming-message.json","https://scrimui.dev/r/citation-ui.json","https://scrimui.dev/r/conversation-sidebar.json","https://scrimui.dev/r/response-versions.json","https://scrimui.dev/r/context-picker.json","badge","card"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/showcase/patterns/ai-chat/ai-chat.tsx","content":"$50","type":"registry:block","target":"components/blocks/ai-chat.tsx"}],"className":"h-[70svh] min-h-80"}]]}]