{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "ai-llm-chat", "title": "Ai Llm Chat", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/ai-llm-chat/AiLlmChat.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n ArrowUp,\n Check,\n ChevronDown,\n Copy,\n MessageSquarePlus,\n MoreHorizontal,\n Paperclip,\n PanelLeftClose,\n RefreshCw,\n Search,\n Sparkles,\n Square,\n ThumbsDown,\n ThumbsUp,\n Code,\n Lightbulb,\n PenLine,\n BookOpen,\n} from 'lucide-react'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Button } from '@/components/ui/button'\n\ntype Role = 'user' | 'assistant'\n\ninterface Turn {\n id: string\n role: Role\n body: string\n code?: { lang: string; content: string }\n createdAt: Date\n}\n\ninterface Thread {\n id: string\n title: string\n updatedAt: Date\n turns: Turn[]\n}\n\nconst now = new Date()\nconst todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate())\nconst yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)\nconst sevenDays = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)\n\nconst suggestions = [\n { icon: Code, label: 'Explain this code', body: 'Walk me through what `useRegistry()` does line by line.' },\n {\n icon: PenLine,\n label: 'Draft a release note',\n body: 'Write a release note for shipping the new inbox + chat blocks.',\n },\n {\n icon: Lightbulb,\n label: 'Brainstorm',\n body: 'Give me five ideas for verticals to build on top of the uipkge registry.',\n },\n {\n icon: BookOpen,\n label: 'Summarise',\n body: 'Summarise the CLAUDE.md \"Primitive vs Block\" boundary in three bullets.',\n },\n]\n\nconst models = [\n { id: 'opus-4-7', label: 'Opus 4.7', hint: 'Most capable' },\n { id: 'sonnet-4-6', label: 'Sonnet 4.6', hint: 'Balanced' },\n { id: 'haiku-4-5', label: 'Haiku 4.5', hint: 'Fastest' },\n]\n\nconst initialThreads: Thread[] = [\n {\n id: 't1',\n title: 'Designing the registry block boundary',\n updatedAt: new Date(now.getTime() - 12 * 60 * 1000),\n turns: [\n {\n id: 'u1',\n role: 'user',\n body: 'When should I extract a repeating tile pattern across blocks into a primitive?',\n createdAt: new Date(now.getTime() - 22 * 60 * 1000),\n },\n {\n id: 'a1',\n role: 'assistant',\n 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:',\n createdAt: new Date(now.getTime() - 21 * 60 * 1000),\n },\n {\n id: 'a1b',\n role: 'assistant',\n body: 'Here is the minimal check you can run on any candidate primitive:',\n code: {\n lang: 'ts',\n content:\n '// 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.',\n },\n createdAt: new Date(now.getTime() - 20 * 60 * 1000),\n },\n {\n id: 'u2',\n role: 'user',\n body: 'And if the same 3 tiles repeat inside one block file?',\n createdAt: new Date(now.getTime() - 14 * 60 * 1000),\n },\n {\n id: 'a2',\n role: 'assistant',\n 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).',\n createdAt: new Date(now.getTime() - 13 * 60 * 1000),\n },\n ],\n },\n {\n id: 't2',\n title: 'Tailwind v4 OKLCH dark mode tokens',\n updatedAt: new Date(now.getTime() - 3 * 60 * 60 * 1000),\n turns: [],\n },\n {\n id: 't3',\n title: 'Zero-downtime migration plan',\n updatedAt: yesterday,\n turns: [],\n },\n {\n id: 't4',\n title: 'Composing kanban + calendar in one view',\n updatedAt: new Date(now.getTime() - 30 * 60 * 60 * 1000),\n turns: [],\n },\n {\n id: 't5',\n title: 'shadcn-vue resolver circular warning',\n updatedAt: new Date(now.getTime() - 4 * 24 * 60 * 60 * 1000),\n turns: [],\n },\n {\n id: 't6',\n title: 'Cloudflare Pages preview env wiring',\n updatedAt: new Date(now.getTime() - 9 * 24 * 60 * 60 * 1000),\n turns: [],\n },\n]\n\nfunction formatTime(d: Date): string {\n if (d >= todayStart) return d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })\n if (d.toDateString() === yesterday.toDateString()) return 'Yesterday'\n return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })\n}\n\nexport interface AiLlmChatProps {\n onSend?: (body: string) => void\n onRegenerate?: (id: string) => void\n onStop?: () => void\n}\n\nexport function AiLlmChat({ onSend, onRegenerate, onStop }: AiLlmChatProps = {}) {\n const [threads, setThreads] = React.useState(initialThreads)\n const [activeId, setActiveId] = React.useState('t1')\n const [draft, setDraft] = React.useState('')\n const [sidebarOpen, setSidebarOpen] = React.useState(true)\n const [sidebarSearch, setSidebarSearch] = React.useState('')\n const [modelOpen, setModelOpen] = React.useState(false)\n const [activeModel, setActiveModel] = React.useState(models[0])\n const [isStreaming, setIsStreaming] = React.useState(false)\n const [copiedId, setCopiedId] = React.useState(null)\n const scrollRoot = React.useRef(null)\n const streamTimer = React.useRef | null>(null)\n\n const activeThread = threads.find((t) => t.id === activeId)!\n const turns = activeThread?.turns ?? []\n const isEmpty = turns.length === 0\n\n const filteredThreads = React.useMemo(() => {\n const q = sidebarSearch.trim().toLowerCase()\n return q ? threads.filter((t) => t.title.toLowerCase().includes(q)) : threads\n }, [threads, sidebarSearch])\n\n const groupedThreads = React.useMemo(() => {\n const today: Thread[] = []\n const ydy: Thread[] = []\n const week: Thread[] = []\n const earlier: Thread[] = []\n for (const t of [...filteredThreads].sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime())) {\n if (t.updatedAt >= todayStart) today.push(t)\n else if (t.updatedAt.toDateString() === yesterday.toDateString()) ydy.push(t)\n else if (t.updatedAt >= sevenDays) week.push(t)\n else earlier.push(t)\n }\n return { today, yesterday: ydy, week, earlier }\n }, [filteredThreads])\n\n function scrollToBottom() {\n if (!scrollRoot.current) return\n scrollRoot.current.scrollTop = scrollRoot.current.scrollHeight\n }\n\n React.useEffect(() => {\n scrollToBottom()\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [activeId, turns.length, isStreaming])\n\n function selectThread(id: string) {\n setActiveId(id)\n }\n\n function newChat() {\n const t: Thread = {\n id: `t${Date.now()}`,\n title: 'New chat',\n updatedAt: new Date(),\n turns: [],\n }\n setThreads((prev) => [t, ...prev])\n setActiveId(t.id)\n setDraft('')\n }\n\n function send(prefill?: string) {\n const body = (prefill ?? draft).trim()\n if (!body || isStreaming) return\n const userTurn: Turn = {\n id: `u${Date.now()}`,\n role: 'user',\n body,\n createdAt: new Date(),\n }\n setThreads((prev) =>\n prev.map((t) =>\n t.id === activeId\n ? {\n ...t,\n updatedAt: new Date(),\n title:\n t.title === 'New chat' ? body.slice(0, 48) + (body.length > 48 ? '…' : '') : t.title,\n turns: [...t.turns, userTurn],\n }\n : t,\n ),\n )\n setDraft('')\n onSend?.(body)\n setIsStreaming(true)\n streamTimer.current = setTimeout(() => {\n const assistantTurn: Turn = {\n id: `a${Date.now()}`,\n role: 'assistant',\n body: 'Here is a placeholder response. Wire `send()` up to your streaming endpoint and push assistant tokens onto the last turn as they arrive.',\n createdAt: new Date(),\n }\n setThreads((prev) =>\n prev.map((t) => (t.id === activeId ? { ...t, turns: [...t.turns, assistantTurn] } : t)),\n )\n setIsStreaming(false)\n }, 1400)\n }\n\n function stop() {\n if (streamTimer.current) clearTimeout(streamTimer.current)\n setIsStreaming(false)\n onStop?.()\n }\n\n function copyTurn(id: string, body: string) {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(body).catch(() => {})\n }\n setCopiedId(id)\n setTimeout(() => {\n setCopiedId((curr) => (curr === id ? null : curr))\n }, 1500)\n }\n\n function onComposerKey(e: React.KeyboardEvent) {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault()\n send()\n }\n }\n\n function selectModel(id: string) {\n const m = models.find((m) => m.id === id)\n if (m) setActiveModel(m)\n setModelOpen(false)\n }\n\n return (\n \n \n\n
\n
\n
\n {!sidebarOpen && (\n setSidebarOpen(true)}\n >\n \n \n )}\n
\n setModelOpen((v) => !v)}\n >\n \n {activeModel.label}\n \n \n {modelOpen && (\n
\n {models.map((m) => (\n selectModel(m.id)}\n >\n
\n

{m.label}

\n

{m.hint}

\n
\n {m.id === activeModel.id && }\n \n ))}\n
\n )}\n
\n
\n \n
\n\n
\n {isEmpty ? (\n
\n
\n \n
\n
\n

How can I help today?

\n

Ask anything, or try one of these to get started.

\n
\n
\n {suggestions.map((s) => {\n const Icon = s.icon\n return (\n send(s.body)}\n >\n
\n \n
\n
\n

{s.label}

\n

{s.body}

\n
\n \n )\n })}\n
\n
\n ) : (\n
\n {turns.map((t) => (\n
\n {t.role === 'user' ? (\n
\n
\n {t.body}\n
\n
\n ) : (\n
\n
\n \n
\n
\n

{t.body}

\n {t.code && (\n
\n
\n {t.code.lang}\n copyTurn(t.id + '-code', t.code!.content)}\n >\n {copiedId === t.id + '-code' ? (\n \n ) : (\n \n )}\n {copiedId === t.id + '-code' ? 'Copied' : 'Copy'}\n \n
\n 
\n                              {t.code.content}\n
\n
\n )}\n
\n copyTurn(t.id, t.body)}\n >\n {copiedId === t.id ? (\n \n ) : (\n \n )}\n {copiedId === t.id ? 'Copied' : 'Copy'}\n \n onRegenerate?.(t.id)}\n >\n \n \n \n \n \n \n \n \n \n {formatTime(t.createdAt)}\n \n
\n
\n
\n )}\n
\n ))}\n\n {isStreaming && (\n
\n
\n \n
\n
\n \n \n \n
\n
\n )}\n
\n )}\n
\n\n
\n
\n
\n setDraft(e.target.value)}\n placeholder={`Message ${activeModel.label}`}\n rows={1}\n 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\"\n onKeyDown={onComposerKey}\n />\n
\n
\n \n \n \n \n \n {activeModel.label}\n \n
\n
\n \n {isStreaming ? (\n \n \n Stop\n \n ) : (\n send()}\n >\n Send\n \n \n )}\n
\n
\n
\n

\n AI can make mistakes. Verify important info.\n

\n
\n
\n
\n\n \n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/AiLlmChat.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/avatar.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/textarea.json" ], "description": "ChatGPT/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.", "categories": [ "communication", "ai" ] }