Ai Llm Chat
block communicationChatGPT/Claude-style LLM chat surface. Collapsible left sidebar with New chat, searchable thread history grouped Today/Yesterday/Previous 7 days/Earlier, account row. Centered conversation: empty state with suggested-prompt tiles, user/assistant turns with code-block rendering and copy/regenerate/feedback actions, streaming dots, stop button. Composer with model picker (Opus/Sonnet/Haiku), attach, Enter-to-send, autosizing textarea. Stateful demo — wire `send()` to your streaming endpoint.
Also available for Vue ->Installation
$ pnpm dlx shadcn@latest add https://react.uipkge.dev/r/react/ai-llm-chat.json$ npx shadcn@latest add https://react.uipkge.dev/r/react/ai-llm-chat.json$ yarn dlx shadcn@latest add https://react.uipkge.dev/r/react/ai-llm-chat.json$ bunx shadcn@latest add https://react.uipkge.dev/r/react/ai-llm-chat.json
Or with the named registry:
npx shadcn@latest add @uipkge-react/ai-llm-chat
Examples
Schema
Type aliases exported from this item's source. Use these to shape the data you pass in.
Turn interface Turn {
id: string
role: Role
body: string
code?: { lang: string; content: string }
createdAt: Date
}Thread interface Thread {
id: string
title: string
updatedAt: Date
turns: Turn[]
}npm dependencies
Theming
CSS custom properties referenced in this item. Override any of them in your :root or per-element to retheme.
--border Files (1)
-
components/blocks/AiLlmChat.tsx 25.7 kB
'use client' import * as React from 'react' import { ArrowUp, Check, ChevronDown, Copy, MessageSquarePlus, MoreHorizontal, Paperclip, PanelLeftClose, RefreshCw, Search, Sparkles, Square, ThumbsDown, ThumbsUp, Code, Lightbulb, PenLine, BookOpen, } from 'lucide-react' import { Avatar, AvatarFallback } from '@/components/ui/avatar' import { Button } from '@/components/ui/button' type Role = 'user' | 'assistant' interface Turn { id: string role: Role body: string code?: { lang: string; content: string } createdAt: Date } interface Thread { id: string title: string updatedAt: Date turns: Turn[] } const now = new Date() const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate()) const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000) const sevenDays = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000) const suggestions = [ { icon: Code, label: 'Explain this code', body: 'Walk me through what `useRegistry()` does line by line.' }, { icon: PenLine, label: 'Draft a release note', body: 'Write a release note for shipping the new inbox + chat blocks.', }, { icon: Lightbulb, label: 'Brainstorm', body: 'Give me five ideas for verticals to build on top of the uipkge registry.', }, { icon: BookOpen, label: 'Summarise', body: 'Summarise the CLAUDE.md "Primitive vs Block" boundary in three bullets.', }, ] const models = [ { id: 'opus-4-7', label: 'Opus 4.7', hint: 'Most capable' }, { id: 'sonnet-4-6', label: 'Sonnet 4.6', hint: 'Balanced' }, { id: 'haiku-4-5', label: 'Haiku 4.5', hint: 'Fastest' }, ] const initialThreads: Thread[] = [ { id: 't1', title: 'Designing the registry block boundary', updatedAt: new Date(now.getTime() - 12 * 60 * 1000), turns: [ { id: 'u1', role: 'user', body: 'When should I extract a repeating tile pattern across blocks into a primitive?', createdAt: new Date(now.getTime() - 22 * 60 * 1000), }, { id: 'a1', role: 'assistant', body: 'Short answer: almost never until you have 5+ distinct blocks calling for the *exact same* shape, and the extraction is slot-only with no layout opinion.\n\nThe trap is that StatCard-style primitives — ones that bake an "icon top-right, value below title, trend pill bottom-right" layout — look reusable but lock every block that consumes them. The user installing the block can\'t swap one tile into a chart-led tile without un-abstracting the primitive first.\n\nThe heuristic the CLAUDE.md spells out:', createdAt: new Date(now.getTime() - 21 * 60 * 1000), }, { id: 'a1b', role: 'assistant', body: 'Here is the minimal check you can run on any candidate primitive:', code: { lang: 'ts', content: '// If the prop changes BEHAVIOR -> primitive (variant, disabled, multiple)\n// If the prop changes LAYOUT or WHICH FIELDS RENDER -> block territory\n//\n// Red flag: a primitive that accepts an `items` array of structured records\n// and renders them with a fixed shape. That is layout opinion in a prop.\ninterface KpiItem { title: string; value: string; icon: any; trend: number }\n// ^ if you see this on a `registry:ui` item, stop.', }, createdAt: new Date(now.getTime() - 20 * 60 * 1000), }, { id: 'u2', role: 'user', body: 'And if the same 3 tiles repeat inside one block file?', createdAt: new Date(now.getTime() - 14 * 60 * 1000), }, { id: 'a2', role: 'assistant', body: 'Leave them inline. The registry rule is "three similar lines is better than a premature abstraction." Blocks are supposed to read top-to-bottom at the call site — that is the whole reason a user installs a block instead of a primitive. The cost of writing the tile out three times is small; the cost of pre-abstracting and getting the shape slightly wrong is high (every consumer downstream pays for it).', createdAt: new Date(now.getTime() - 13 * 60 * 1000), }, ], }, { id: 't2', title: 'Tailwind v4 OKLCH dark mode tokens', updatedAt: new Date(now.getTime() - 3 * 60 * 60 * 1000), turns: [], }, { id: 't3', title: 'Zero-downtime migration plan', updatedAt: yesterday, turns: [], }, { id: 't4', title: 'Composing kanban + calendar in one view', updatedAt: new Date(now.getTime() - 30 * 60 * 60 * 1000), turns: [], }, { id: 't5', title: 'shadcn-vue resolver circular warning', updatedAt: new Date(now.getTime() - 4 * 24 * 60 * 60 * 1000), turns: [], }, { id: 't6', title: 'Cloudflare Pages preview env wiring', updatedAt: new Date(now.getTime() - 9 * 24 * 60 * 60 * 1000), turns: [], }, ] function formatTime(d: Date): string { if (d >= todayStart) return d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) if (d.toDateString() === yesterday.toDateString()) return 'Yesterday' return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) } export interface AiLlmChatProps { onSend?: (body: string) => void onRegenerate?: (id: string) => void onStop?: () => void } export function AiLlmChat({ onSend, onRegenerate, onStop }: AiLlmChatProps = {}) { const [threads, setThreads] = React.useState<Thread[]>(initialThreads) const [activeId, setActiveId] = React.useState<string>('t1') const [draft, setDraft] = React.useState('') const [sidebarOpen, setSidebarOpen] = React.useState(true) const [sidebarSearch, setSidebarSearch] = React.useState('') const [modelOpen, setModelOpen] = React.useState(false) const [activeModel, setActiveModel] = React.useState(models[0]) const [isStreaming, setIsStreaming] = React.useState(false) const [copiedId, setCopiedId] = React.useState<string | null>(null) const scrollRoot = React.useRef<HTMLDivElement | null>(null) const streamTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null) const activeThread = threads.find((t) => t.id === activeId)! const turns = activeThread?.turns ?? [] const isEmpty = turns.length === 0 const filteredThreads = React.useMemo(() => { const q = sidebarSearch.trim().toLowerCase() return q ? threads.filter((t) => t.title.toLowerCase().includes(q)) : threads }, [threads, sidebarSearch]) const groupedThreads = React.useMemo(() => { const today: Thread[] = [] const ydy: Thread[] = [] const week: Thread[] = [] const earlier: Thread[] = [] for (const t of [...filteredThreads].sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime())) { if (t.updatedAt >= todayStart) today.push(t) else if (t.updatedAt.toDateString() === yesterday.toDateString()) ydy.push(t) else if (t.updatedAt >= sevenDays) week.push(t) else earlier.push(t) } return { today, yesterday: ydy, week, earlier } }, [filteredThreads]) function scrollToBottom() { if (!scrollRoot.current) return scrollRoot.current.scrollTop = scrollRoot.current.scrollHeight } React.useEffect(() => { scrollToBottom() // eslint-disable-next-line react-hooks/exhaustive-deps }, [activeId, turns.length, isStreaming]) function selectThread(id: string) { setActiveId(id) } function newChat() { const t: Thread = { id: `t${Date.now()}`, title: 'New chat', updatedAt: new Date(), turns: [], } setThreads((prev) => [t, ...prev]) setActiveId(t.id) setDraft('') } function send(prefill?: string) { const body = (prefill ?? draft).trim() if (!body || isStreaming) return const userTurn: Turn = { id: `u${Date.now()}`, role: 'user', body, createdAt: new Date(), } setThreads((prev) => prev.map((t) => t.id === activeId ? { ...t, updatedAt: new Date(), title: t.title === 'New chat' ? body.slice(0, 48) + (body.length > 48 ? '…' : '') : t.title, turns: [...t.turns, userTurn], } : t, ), ) setDraft('') onSend?.(body) setIsStreaming(true) streamTimer.current = setTimeout(() => { const assistantTurn: Turn = { id: `a${Date.now()}`, role: 'assistant', body: 'Here is a placeholder response. Wire `send()` up to your streaming endpoint and push assistant tokens onto the last turn as they arrive.', createdAt: new Date(), } setThreads((prev) => prev.map((t) => (t.id === activeId ? { ...t, turns: [...t.turns, assistantTurn] } : t)), ) setIsStreaming(false) }, 1400) } function stop() { if (streamTimer.current) clearTimeout(streamTimer.current) setIsStreaming(false) onStop?.() } function copyTurn(id: string, body: string) { if (typeof navigator !== 'undefined' && navigator.clipboard) { navigator.clipboard.writeText(body).catch(() => {}) } setCopiedId(id) setTimeout(() => { setCopiedId((curr) => (curr === id ? null : curr)) }, 1500) } function onComposerKey(e: React.KeyboardEvent<HTMLTextAreaElement>) { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault() send() } } function selectModel(id: string) { const m = models.find((m) => m.id === id) if (m) setActiveModel(m) setModelOpen(false) } return ( <div className="bg-background text-foreground grid h-[680px] w-full overflow-hidden rounded-xl border shadow-sm transition-[grid-template-columns]" style={{ gridTemplateColumns: sidebarOpen ? '260px 1fr' : '0px 1fr' }} > <aside className="bg-muted/30 flex min-w-0 flex-col overflow-hidden border-r"> <div className="flex h-14 shrink-0 items-center gap-2 border-b px-3"> <Button className="h-9 flex-1 justify-start gap-2 rounded-lg" variant="outline" onClick={newChat}> <MessageSquarePlus className="size-4" /> New chat </Button> <Button variant="ghost" size="icon" className="size-8 shrink-0" aria-label="Collapse sidebar" onClick={() => setSidebarOpen(false)} > <PanelLeftClose className="size-4" /> </Button> </div> <div className="px-3 pt-3 pb-2"> <div className="relative"> <Search className="text-muted-foreground absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2" /> <input value={sidebarSearch} onChange={(e) => setSidebarSearch(e.target.value)} placeholder="Search chats" className="border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 h-8 w-full rounded-lg border pl-8 text-xs shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px]" /> </div> </div> <div className="thread-scroll flex-1 overflow-y-auto pb-3"> {( [ ['Today', groupedThreads.today], ['Yesterday', groupedThreads.yesterday], ['Previous 7 days', groupedThreads.week], ['Earlier', groupedThreads.earlier], ] as const ).map(([key, group]) => group.length > 0 ? ( <React.Fragment key={key}> <p className="text-muted-foreground px-3 pt-3 pb-1 text-[10px] font-semibold tracking-widest uppercase"> {key} </p> {group.map((t) => ( <button key={t.id} className={[ 'group flex w-full items-center justify-between gap-2 px-3 py-1.5 text-left text-[13px] transition-colors', t.id === activeId ? 'bg-primary/10 text-foreground font-medium' : 'text-foreground/80 hover:bg-muted/60', ].join(' ')} onClick={() => selectThread(t.id)} > <span className="truncate">{t.title}</span> <MoreHorizontal className="text-muted-foreground size-3.5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" /> </button> ))} </React.Fragment> ) : null, )} </div> <div className="border-t px-3 py-3"> <div className="flex items-center gap-2"> <Avatar className="size-8"> <AvatarFallback className="text-[11px] font-medium">U</AvatarFallback> </Avatar> <div className="min-w-0 flex-1"> <p className="truncate text-xs font-medium">You</p> <p className="text-muted-foreground truncate text-[10px]">Free plan</p> </div> <Button variant="ghost" size="icon" className="size-8" aria-label="Account menu"> <MoreHorizontal className="size-4" /> </Button> </div> </div> </aside> <section className="flex min-w-0 flex-col"> <header className="flex h-14 shrink-0 items-center justify-between gap-3 border-b px-4"> <div className="flex items-center gap-2"> {!sidebarOpen && ( <Button variant="ghost" size="icon" className="size-8" aria-label="Open sidebar" onClick={() => setSidebarOpen(true)} > <MessageSquarePlus className="size-4" /> </Button> )} <div className="relative"> <button className="hover:bg-muted/60 flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-sm font-medium transition-colors" onClick={() => setModelOpen((v) => !v)} > <Sparkles className="text-primary size-3.5" /> {activeModel.label} <ChevronDown className="text-muted-foreground size-3.5" /> </button> {modelOpen && ( <div className="bg-popover absolute top-full left-0 z-10 mt-1 w-56 overflow-hidden rounded-lg border p-1 shadow-lg"> {models.map((m) => ( <button key={m.id} className="hover:bg-muted/60 flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left text-xs transition-colors" onClick={() => selectModel(m.id)} > <div className="min-w-0"> <p className="font-medium">{m.label}</p> <p className="text-muted-foreground text-[10px]">{m.hint}</p> </div> {m.id === activeModel.id && <Check className="text-primary size-3.5 shrink-0" />} </button> ))} </div> )} </div> </div> <Button variant="ghost" size="icon" className="size-8" aria-label="More options"> <MoreHorizontal className="size-4" /> </Button> </header> <div ref={scrollRoot} className="thread-scroll flex-1 overflow-y-auto"> {isEmpty ? ( <div className="mx-auto flex h-full max-w-2xl flex-col items-center justify-center gap-6 px-6"> <div className="bg-primary/10 text-primary flex size-12 items-center justify-center rounded-full"> <Sparkles className="size-6" /> </div> <div className="text-center"> <h2 className="text-xl font-semibold tracking-tight">How can I help today?</h2> <p className="text-muted-foreground mt-1 text-sm">Ask anything, or try one of these to get started.</p> </div> <div className="grid w-full grid-cols-2 gap-2"> {suggestions.map((s) => { const Icon = s.icon return ( <button key={s.label} className="bg-card hover:bg-muted/60 group flex items-start gap-3 rounded-lg border p-3 text-left transition-colors" onClick={() => send(s.body)} > <div className="bg-muted text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary flex size-8 shrink-0 items-center justify-center rounded-md transition-colors"> <Icon className="size-4" /> </div> <div className="min-w-0"> <p className="text-foreground text-xs font-semibold">{s.label}</p> <p className="text-muted-foreground mt-0.5 line-clamp-2 text-xs leading-relaxed">{s.body}</p> </div> </button> ) })} </div> </div> ) : ( <div className="mx-auto max-w-3xl space-y-6 px-6 py-6"> {turns.map((t) => ( <div key={t.id} className="group"> {t.role === 'user' ? ( <div className="flex justify-end"> <div className="bg-primary/10 text-foreground max-w-[80%] rounded-2xl rounded-tr-md px-4 py-2.5 text-sm leading-relaxed"> {t.body} </div> </div> ) : ( <div className="flex items-start gap-3"> <div className="bg-primary/10 text-primary mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full"> <Sparkles className="size-3.5" /> </div> <div className="min-w-0 flex-1 space-y-3"> <p className="text-foreground text-sm leading-relaxed whitespace-pre-wrap">{t.body}</p> {t.code && ( <div className="bg-muted/60 overflow-hidden rounded-lg border"> <div className="bg-muted/80 text-muted-foreground flex items-center justify-between px-3 py-1.5 font-mono text-[10px]"> <span>{t.code.lang}</span> <button className="hover:text-foreground inline-flex items-center gap-1 transition-colors" onClick={() => copyTurn(t.id + '-code', t.code!.content)} > {copiedId === t.id + '-code' ? ( <Check className="text-success size-3" /> ) : ( <Copy className="size-3" /> )} {copiedId === t.id + '-code' ? 'Copied' : 'Copy'} </button> </div> <pre className="overflow-x-auto px-3 py-2.5 font-mono text-[12px] leading-relaxed"> <code>{t.code.content}</code> </pre> </div> )} <div className="flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100"> <button className="text-muted-foreground hover:bg-muted hover:text-foreground inline-flex h-7 items-center gap-1 rounded-md px-2 text-[11px] transition-colors" onClick={() => copyTurn(t.id, t.body)} > {copiedId === t.id ? ( <Check className="text-success size-3" /> ) : ( <Copy className="size-3" /> )} {copiedId === t.id ? 'Copied' : 'Copy'} </button> <button className="text-muted-foreground hover:bg-muted hover:text-foreground inline-flex size-7 items-center justify-center rounded-md transition-colors" aria-label="Regenerate" onClick={() => onRegenerate?.(t.id)} > <RefreshCw className="size-3" /> </button> <button className="text-muted-foreground hover:bg-muted hover:text-success inline-flex size-7 items-center justify-center rounded-md transition-colors" aria-label="Good response" > <ThumbsUp className="size-3" /> </button> <button className="text-muted-foreground hover:bg-muted hover:text-destructive inline-flex size-7 items-center justify-center rounded-md transition-colors" aria-label="Bad response" > <ThumbsDown className="size-3" /> </button> <span className="text-muted-foreground ml-auto text-[10px] tabular-nums"> {formatTime(t.createdAt)} </span> </div> </div> </div> )} </div> ))} {isStreaming && ( <div className="flex items-start gap-3"> <div className="bg-primary/10 text-primary mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full"> <Sparkles className="size-3.5" /> </div> <div className="text-muted-foreground flex items-center gap-1.5 pt-1.5"> <span className="typing-dot" /> <span className="typing-dot" style={{ animationDelay: '0.15s' }} /> <span className="typing-dot" style={{ animationDelay: '0.3s' }} /> </div> </div> )} </div> )} </div> <div className="bg-muted/20 border-t px-4 py-3"> <div className="mx-auto max-w-3xl"> <div className="bg-background border-input/60 focus-within:border-primary/40 focus-within:ring-primary/10 group flex flex-col overflow-hidden rounded-2xl border shadow-sm transition-all duration-150 focus-within:shadow-md focus-within:ring-4"> <textarea value={draft} onChange={(e) => setDraft(e.target.value)} placeholder={`Message ${activeModel.label}`} rows={1} className="placeholder:text-muted-foreground/70 max-h-48 min-h-[48px] w-full resize-none border-0 bg-transparent px-4 pt-3 pb-1 text-sm leading-relaxed shadow-none outline-none focus-visible:ring-0" onKeyDown={onComposerKey} /> <div className="flex items-center justify-between gap-2 px-2 pb-2"> <div className="flex items-center gap-0.5"> <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground size-8" aria-label="Attach file" > <Paperclip className="size-4" /> </Button> <span className="text-muted-foreground bg-muted ml-1 inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-[11px] font-medium"> <Sparkles className="text-primary size-3" /> {activeModel.label} </span> </div> <div className="flex items-center gap-2"> <kbd className="bg-muted text-muted-foreground hidden h-5 items-center gap-0.5 rounded border px-1.5 font-mono text-[10px] sm:inline-flex"> <span>↵</span> </kbd> {isStreaming ? ( <Button variant="outline" className="h-8 gap-1.5 rounded-lg px-3 text-xs font-medium" aria-label="Stop generating" onClick={stop} > <Square className="size-3 fill-current" /> Stop </Button> ) : ( <Button className="h-8 gap-1.5 rounded-lg px-3 text-xs font-medium" disabled={!draft.trim()} aria-label="Send" onClick={() => send()} > Send <ArrowUp className="size-3.5" /> </Button> )} </div> </div> </div> <p className="text-muted-foreground/70 mt-2 text-center text-[10px]"> AI can make mistakes. Verify important info. </p> </div> </div> </section> <style>{` .thread-scroll::-webkit-scrollbar { width: 6px; } .thread-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .typing-dot { display: inline-block; width: 6px; height: 6px; border-radius: 9999px; background: currentColor; opacity: 0.5; animation: typing-bounce 1s infinite ease-in-out; } @keyframes typing-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.35; } 40% { transform: translateY(-3px); opacity: 0.9; } } `}</style> </div> ) }
Raw manifest: https://react.uipkge.dev/r/react/ai-llm-chat.json