{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "chat-03", "type": "registry:block", "title": "Chat Application", "description": "Chat Application. AI chat interfaces with message history, prompt controls, and conversation navigation.", "author": "Ephraim Duncan", "registryDependencies": [], "dependencies": [ "@base-ui/react@1.9.0", "@shadcn/react@0.3.1", "@tabler/icons-react@3.50.0", "class-variance-authority@0.7.1", "cmdk@1.1.1", "cn@0.2.6", "lucide-react@0.577.0" ], "files": [ { "path": "content/components/chat/chat-03/app/chat/data.json", "type": "registry:file", "target": "@components/uiblocks/chat-03/app/chat/data.json", "content": "{\n \"user\": {\n \"name\": \"Ephraim Duncan\",\n \"email\": \"ephraim@duncan.land\",\n \"plan\": \"Pro\",\n \"renews\": \"Oct 12\",\n \"avatar\": \"https://uiblocks.org/avatar-01.png\"\n },\n \"models\": [\n {\n \"vendor\": \"openai\",\n \"name\": \"GPT-6 Astra\",\n \"hint\": \"Most capable for complex reasoning and coding\",\n \"context\": \"1M\"\n },\n {\n \"vendor\": \"openai\",\n \"name\": \"GPT-5.6 Sol\",\n \"hint\": \"Flagship for complex professional work\",\n \"context\": \"1M\"\n },\n {\n \"vendor\": \"openai\",\n \"name\": \"GPT-5.6 Terra\",\n \"hint\": \"Balances intelligence and cost\",\n \"context\": \"1M\"\n },\n {\n \"vendor\": \"openai\",\n \"name\": \"GPT-5.6 Luna\",\n \"hint\": \"Fastest and most affordable\",\n \"context\": \"128K\"\n },\n {\n \"vendor\": \"anthropic\",\n \"name\": \"Claude Fable 5.1\",\n \"hint\": \"Demanding reasoning and long-horizon agentic work\",\n \"context\": \"1M\"\n },\n {\n \"vendor\": \"anthropic\",\n \"name\": \"Claude Opus 5\",\n \"hint\": \"Complex agentic coding and enterprise work\",\n \"context\": \"1M\"\n },\n {\n \"vendor\": \"anthropic\",\n \"name\": \"Claude Sonnet 5\",\n \"hint\": \"Best combination of speed and intelligence\",\n \"context\": \"1M\"\n },\n {\n \"vendor\": \"anthropic\",\n \"name\": \"Claude Haiku 4.5\",\n \"hint\": \"Fastest with near-frontier intelligence\",\n \"context\": \"200K\"\n }\n ],\n \"replies\": [\n {\n \"reasoning\": \"The user wants a price check. Compare the quote against regional install averages, then weigh it against the payback window from earlier in the thread.\",\n \"text\": \"Your quote lands near the middle of the range for a cold-climate unit of that size. The equipment line is fair; the labor line is about 10% above typical. Ask the installer to itemize ductwork changes, since that is where the extra usually hides. With the rebate applied, payback still comes in under 8 years.\"\n },\n {\n \"reasoning\": \"Short factual answer. Note the trade-off between efficiency and noise so the user can decide.\",\n \"text\": \"Most modern units run between 40 and 60 dB at the outdoor fan, roughly the level of a quiet conversation. Placing the unit away from bedroom windows and on a vibration pad makes a bigger difference than the model choice.\"\n },\n {\n \"reasoning\": \"The user is asking about maintenance. List the few things that matter and skip the marketing extras.\",\n \"text\": \"Very little. Clean or swap the filter every one to three months, keep leaves and snow off the outdoor unit, and book a professional check once a year to confirm refrigerant levels. That is the whole list.\"\n }\n ],\n \"threads\": [\n {\n \"id\": \"design-tokens\",\n \"title\": \"Design system tokens\",\n \"preview\": \"Naming scheme for spacing and color\",\n \"updated\": \"3d\",\n \"group\": \"week\",\n \"pinned\": true,\n \"turns\": [\n {\n \"id\": \"dt-1\",\n \"role\": \"user\",\n \"text\": \"Should spacing tokens be named by size or by role?\"\n },\n {\n \"id\": \"dt-2\",\n \"role\": \"assistant\",\n \"thought\": 4,\n \"reasoning\": \"Both approaches are common. Recommend a two-layer scheme so the team gets stable role names without losing raw sizes.\",\n \"text\": \"Use both, in two layers. Keep a raw scale (space-1 through space-12) and put role tokens on top of it (space-inline, space-stack, space-section). Components reference roles, so a scale change never touches component code.\"\n }\n ]\n },\n {\n \"id\": \"auth-refactor\",\n \"title\": \"Auth refactor plan\",\n \"preview\": \"Session cookies to short-lived JWTs\",\n \"updated\": \"5d\",\n \"group\": \"week\",\n \"pinned\": true,\n \"turns\": [\n {\n \"id\": \"ar-1\",\n \"role\": \"user\",\n \"text\": \"What is the safest order to migrate sessions to short-lived tokens?\"\n },\n {\n \"id\": \"ar-2\",\n \"role\": \"assistant\",\n \"thought\": 6,\n \"reasoning\": \"Migration needs a dual-read period. Outline steps that let the old and new paths coexist before cutting over.\",\n \"text\": \"Issue both for a release, read both, then stop issuing the old one. Start by adding token issuance next to the existing session write, make every auth check accept either, and only after a full expiry window remove the session path.\"\n }\n ]\n },\n {\n \"id\": \"heat-pump\",\n \"title\": \"Heat pump research\",\n \"preview\": \"Payback math on replacing a gas boiler\",\n \"updated\": \"2h\",\n \"group\": \"today\",\n \"turns\": [\n {\n \"id\": \"hp-1\",\n \"role\": \"user\",\n \"text\": \"How do heat pumps keep working when it's freezing outside?\"\n },\n {\n \"id\": \"hp-2\",\n \"role\": \"assistant\",\n \"thought\": 8,\n \"reasoning\": \"Explain the physics briefly: refrigerant boiling point is far below freezing, so there is still heat to extract. Give one concrete efficiency figure at a cold temperature.\",\n \"text\": \"Even freezing air holds heat. A heat pump's refrigerant boils far below 0 °C, so it can absorb outdoor heat, compress it to raise the temperature, and release it inside. Modern cold-climate units keep 250–300% efficiency at −15 °C.\"\n },\n {\n \"id\": \"hp-3\",\n \"role\": \"user\",\n \"text\": \"Is it worth replacing a gas boiler mid-life?\"\n },\n {\n \"id\": \"hp-4\",\n \"role\": \"assistant\",\n \"thought\": 12,\n \"reasoning\": \"This depends on the price ratio between electricity and gas, the remaining boiler life, and rebates. Give the rule of thumb and the three inputs.\",\n \"text\": \"Usually yes, if your electricity-to-gas price ratio is under about 3.5. The math hinges on three numbers: your boiler's remaining life, local energy prices, and available rebates. Start with the rebates — in many regions they cover 30–40% of the install, which shortens payback to 6–8 years.\"\n }\n ]\n },\n {\n \"id\": \"sql-churn\",\n \"title\": \"SQL for churn cohort\",\n \"preview\": \"Window function draft, not yet run\",\n \"updated\": \"5h\",\n \"group\": \"today\",\n \"turns\": [\n {\n \"id\": \"sc-1\",\n \"role\": \"user\",\n \"text\": \"Write a query that groups users by signup month and shows how many are still active 90 days later.\"\n },\n {\n \"id\": \"sc-2\",\n \"role\": \"assistant\",\n \"thought\": 9,\n \"reasoning\": \"Cohort by signup month, then join activity at day 90. Keep it to one CTE so it is easy to read.\",\n \"text\": \"Group by date_trunc of the signup date, then left join an activity subquery filtered to events within 90 days of signup. Count distinct users in both, and divide for the retention rate. I drafted it with a single CTE so you can swap the window without touching the join.\"\n }\n ]\n },\n {\n \"id\": \"lisbon\",\n \"title\": \"Trip to Lisbon in October\",\n \"preview\": \"Four days, mostly on foot\",\n \"updated\": \"2h\",\n \"group\": \"today\",\n \"turns\": [\n {\n \"id\": \"li-1\",\n \"role\": \"user\",\n \"text\": \"Is October a good month for Lisbon?\"\n },\n {\n \"id\": \"li-2\",\n \"role\": \"assistant\",\n \"thought\": 3,\n \"reasoning\": \"Weather and crowds are the two things the user cares about. Keep it short.\",\n \"text\": \"One of the best. Days sit around 22 °C, the summer crowds are gone, and the sea is still warm enough to swim. Pack a light layer for evenings and expect a few short showers late in the month.\"\n }\n ]\n },\n {\n \"id\": \"q3-report\",\n \"title\": \"Q3 report outline\",\n \"preview\": \"Three sections drafted, intro missing\",\n \"updated\": \"1d\",\n \"group\": \"yesterday\",\n \"turns\": [\n {\n \"id\": \"q3-1\",\n \"role\": \"user\",\n \"text\": \"Give me a three-part outline for a quarterly report to the board.\"\n },\n {\n \"id\": \"q3-2\",\n \"role\": \"assistant\",\n \"thought\": 5,\n \"reasoning\": \"Boards want results, then risks, then asks. Map the three sections to that order.\",\n \"text\": \"Results first, then risks, then asks. Open with the three numbers that moved and why, follow with the two things that could go wrong next quarter, and close with the decisions you need from the board. Keep each section to one page.\"\n }\n ]\n },\n {\n \"id\": \"dockerfile\",\n \"title\": \"Dockerfile multi-stage build\",\n \"preview\": \"Trim the final image below 100 MB\",\n \"updated\": \"1d\",\n \"group\": \"yesterday\",\n \"turns\": [\n {\n \"id\": \"df-1\",\n \"role\": \"user\",\n \"text\": \"Why is my Node image 1.2 GB?\"\n },\n {\n \"id\": \"df-2\",\n \"role\": \"assistant\",\n \"thought\": 4,\n \"reasoning\": \"Most likely a single-stage build carrying dev dependencies and the full base image. Recommend a multi-stage build on a slim base.\",\n \"text\": \"You are shipping the build toolchain. Build in one stage on the full image, then copy only the output and production node_modules into a second stage based on node:slim or distroless. That alone usually lands under 150 MB.\"\n }\n ]\n },\n {\n \"id\": \"naming\",\n \"title\": \"Naming a side project\",\n \"preview\": \"Short, spellable, domain available\",\n \"updated\": \"1d\",\n \"group\": \"yesterday\",\n \"turns\": [\n {\n \"id\": \"nm-1\",\n \"role\": \"user\",\n \"text\": \"What makes a product name easy to remember?\"\n },\n {\n \"id\": \"nm-2\",\n \"role\": \"assistant\",\n \"thought\": 3,\n \"reasoning\": \"Keep to the practical rules: short, easy to spell after hearing it once, and not already crowded.\",\n \"text\": \"Two syllables, spellable after hearing it once, and no existing product in the same space with a similar sound. Say the name out loud in a sentence and see if you have to explain it.\"\n }\n ]\n },\n {\n \"id\": \"postgres\",\n \"title\": \"Postgres index bloat\",\n \"preview\": \"When to REINDEX versus VACUUM\",\n \"updated\": \"3d\",\n \"group\": \"week\",\n \"turns\": [\n {\n \"id\": \"pg-1\",\n \"role\": \"user\",\n \"text\": \"How do I tell if an index is bloated?\"\n },\n {\n \"id\": \"pg-2\",\n \"role\": \"assistant\",\n \"thought\": 6,\n \"reasoning\": \"Point to pgstattuple for a real measurement, and give the rough threshold where REINDEX pays off.\",\n \"text\": \"Install pgstattuple and check the leaf fragmentation and free space of the index. Anything above about 30% free space on a hot index is worth a REINDEX CONCURRENTLY. VACUUM alone will not shrink it.\"\n }\n ]\n },\n {\n \"id\": \"cover-letter\",\n \"title\": \"Cover letter rewrite\",\n \"preview\": \"Cut to half a page\",\n \"updated\": \"5d\",\n \"group\": \"week\",\n \"turns\": [\n {\n \"id\": \"cl-1\",\n \"role\": \"user\",\n \"text\": \"My cover letter is a full page. What should I cut?\"\n },\n {\n \"id\": \"cl-2\",\n \"role\": \"assistant\",\n \"thought\": 4,\n \"reasoning\": \"Most cover letters repeat the resume. Cut everything that is already there and keep the one story that is not.\",\n \"text\": \"Cut anything the resume already says. Keep one short story that shows how you work, one sentence on why this company, and a plain closing line. That is half a page.\"\n }\n ]\n },\n {\n \"id\": \"rust\",\n \"title\": \"Rust lifetimes explained\",\n \"preview\": \"Borrow checker with two references\",\n \"updated\": \"6d\",\n \"group\": \"week\",\n \"turns\": [\n {\n \"id\": \"rs-1\",\n \"role\": \"user\",\n \"text\": \"Why does the compiler want a lifetime on this function returning a reference?\"\n },\n {\n \"id\": \"rs-2\",\n \"role\": \"assistant\",\n \"thought\": 7,\n \"reasoning\": \"The function takes two references and returns one; the compiler cannot know which input the output borrows from. Explain elision rules briefly.\",\n \"text\": \"Because the function takes two references and returns one, the compiler cannot tell which input the result borrows from. A lifetime annotation is you telling it. With a single reference input it would be inferred automatically.\"\n }\n ]\n }\n ]\n}\n" }, { "path": "content/components/chat/chat-03/app/chat/page.tsx", "type": "registry:component", "target": "@components/uiblocks/chat-03/app/chat/page.tsx", "content": "'use client';\n\nimport {\n IconCheck,\n IconChevronDown,\n IconLayoutSidebar,\n IconShare,\n} from '@tabler/icons-react';\nimport { useRef, useState } from 'react';\nimport { Button } from \"../../shared/components/ui/button\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"../../shared/components/ui/dropdown-menu\";\nimport { Kbd } from \"../../shared/components/ui/kbd\";\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from \"../../shared/components/ui/sidebar\";\nimport { cn } from \"../../shared/lib/utils\";\nimport { ChatSidebar } from \"../../components/chat-sidebar\";\nimport { CommandMenu } from \"../../components/command-menu\";\nimport { type Attachment, Composer } from \"../../components/composer\";\nimport {\n Conversation,\n type Thread,\n type Turn,\n} from \"../../components/conversation\";\nimport { ClaudeLogo, OpenAILogo } from \"../../components/logos\";\nimport data from \"./data.json\" with { type: 'json' };\n\nconst { models, replies } = data;\nconst seed = data.threads as Thread[];\n\nconst logos = { openai: OpenAILogo, anthropic: ClaudeLogo };\nconst Logo = ({ vendor, ...props }: { vendor: string; className?: string }) => {\n const Icon = logos[vendor as keyof typeof logos];\n return ;\n};\n\nconst thinkDelay = 900;\nconst tokenDelay = 40;\n\nexport default function Chat03() {\n const [threads, setThreads] = useState(seed);\n const [activeId, setActiveId] = useState('heat-pump');\n const [draft, setDraft] = useState('');\n const [attachment, setAttachment] = useState(null);\n const [model, setModel] = useState(models[0].name);\n const [search, setSearch] = useState(false);\n const [replyIndex, setReplyIndex] = useState(0);\n const timer = useRef(null);\n\n const thread = threads.find((t) => t.id === activeId) ?? null;\n const streaming = thread?.turns.some((t) => t.streaming) ?? false;\n const altModel = models.find((m) => m.name !== model)?.name ?? model;\n\n const patch = (threadId: string, turnId: string, fn: (t: Turn) => Turn) =>\n setThreads((prev) =>\n prev.map((t) =>\n t.id === threadId\n ? { ...t, turns: t.turns.map((m) => (m.id === turnId ? fn(m) : m)) }\n : t\n )\n );\n\n const stream = (threadId: string, turnId: string) => {\n const reply = replies[replyIndex % replies.length];\n setReplyIndex(replyIndex + 1);\n patch(threadId, turnId, (t) => ({\n ...t,\n text: '',\n reasoning: reply.reasoning,\n thought: undefined,\n error: undefined,\n streaming: true,\n }));\n let shown = 0;\n const tick = () => {\n shown = Math.min(\n reply.text.length,\n shown + 2 + Math.floor(Math.random() * 5)\n );\n const done = shown >= reply.text.length;\n patch(threadId, turnId, (t) => ({\n ...t,\n text: reply.text.slice(0, shown),\n thought: done ? 4 + Math.round(reply.reasoning.length / 40) : t.thought,\n streaming: !done,\n }));\n timer.current = done\n ? null\n : window.setTimeout(tick, tokenDelay * (0.5 + Math.random()));\n };\n tick();\n };\n\n const stop = () => {\n if (timer.current) {\n window.clearTimeout(timer.current);\n timer.current = null;\n }\n const live = thread?.turns.find((t) => t.streaming);\n if (thread && live) {\n patch(thread.id, live.id, (t) => ({\n ...t,\n streaming: false,\n error: true,\n }));\n }\n };\n\n const send = () => {\n const text = draft.trim();\n const replyId = crypto.randomUUID();\n const turns: Turn[] = [\n { id: crypto.randomUUID(), role: 'user', text, day: 'today' },\n {\n id: replyId,\n role: 'assistant',\n text: '',\n streaming: true,\n day: 'today',\n },\n ];\n const id = thread?.id ?? crypto.randomUUID();\n setThreads((prev) =>\n thread\n ? [\n {\n ...thread,\n updated: 'now',\n group: 'today',\n turns: [\n ...thread.turns.map((t) => ({\n ...t,\n day: t.day ?? thread.group,\n })),\n ...turns,\n ],\n },\n ...prev.filter((t) => t.id !== id),\n ]\n : [\n {\n id,\n title: text.split(' ').slice(0, 5).join(' '),\n preview: text,\n updated: 'now',\n group: 'today',\n turns,\n },\n ...prev,\n ]\n );\n setActiveId(id);\n setDraft('');\n setAttachment(null);\n window.setTimeout(() => stream(id, replyId), thinkDelay);\n };\n\n const retry = (turnId: string, next?: string) => {\n if (!thread) {\n return;\n }\n if (next) {\n setModel(next);\n }\n patch(thread.id, turnId, (t) => ({\n ...t,\n text: '',\n thought: undefined,\n error: undefined,\n streaming: true,\n }));\n window.setTimeout(() => stream(thread.id, turnId), thinkDelay);\n };\n\n const edit = (turn: Turn) => {\n if (!thread) {\n return;\n }\n const at = thread.turns.findIndex((t) => t.id === turn.id);\n setThreads((prev) =>\n prev.map((t) =>\n t.id === thread.id ? { ...t, turns: t.turns.slice(0, at) } : t\n )\n );\n setDraft(turn.text);\n };\n\n return (\n \n {\n setThreads(next);\n if (activeId && !next.some((t) => t.id === activeId)) {\n setActiveId(null);\n }\n }}\n onNew={() => setActiveId(null)}\n onSearch={() => setSearch(true)}\n onSelect={setActiveId}\n threads={threads}\n user={data.user}\n />\n \n
\n \n \n \n \n \n }\n >\n m.name === model)?.vendor ?? 'openai'\n }\n />\n {model}\n \n \n \n \n {models.map((m) => (\n setModel(m.name)}\n >\n \n \n \n {m.name}\n \n \n {m.hint}\n \n \n {m.name === model && (\n \n )}\n \n {m.context}\n \n \n ))}\n \n \n \n
\n {thread && (\n \n \n \n )}\n
\n\n !t.pinned).slice(0, 3)}\n thread={thread}\n />\n\n \n \n\n {\n setActiveId(null);\n setDraft(text);\n }}\n onOpen={setActiveId}\n onOpenChange={setSearch}\n open={search}\n threads={threads}\n />\n \n );\n}\n" }, { "path": "content/components/chat/chat-03/components/chat-sidebar.tsx", "type": "registry:component", "target": "@components/uiblocks/chat-03/components/chat-sidebar.tsx", "content": "'use client';\n\nimport {\n IconArchive,\n IconDots,\n IconHelpCircle,\n IconKeyboard,\n IconLogout,\n IconPencil,\n IconPin,\n IconPlus,\n IconSearch,\n IconSelector,\n IconSettings,\n IconShare,\n IconSunMoon,\n IconTrash,\n} from '@tabler/icons-react';\nimport { useState } from 'react';\nimport { Avatar, AvatarFallback, AvatarImage } from \"../shared/components/ui/avatar\";\nimport { Button } from \"../shared/components/ui/button\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuTrigger,\n} from \"../shared/components/ui/dropdown-menu\";\nimport { Kbd, KbdGroup } from \"../shared/components/ui/kbd\";\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"../shared/components/ui/sidebar\";\nimport { cn } from \"../shared/lib/utils\";\nimport type { Thread } from \"./conversation\";\n\nconst groups: { key: Thread['group'] | 'pinned'; label: string }[] = [\n { key: 'pinned', label: 'Pinned' },\n { key: 'today', label: 'Today' },\n { key: 'yesterday', label: 'Yesterday' },\n { key: 'week', label: 'Previous 7 days' },\n];\n\nconst item = 'h-8 gap-2.5 rounded-md px-2.5 text-[13px]';\n\ntype Props = {\n user: {\n name: string;\n email: string;\n plan: string;\n renews: string;\n avatar: string;\n };\n threads: Thread[];\n activeId: string | null;\n onSelect: (id: string) => void;\n onNew: () => void;\n onSearch: () => void;\n onChange: (threads: Thread[]) => void;\n};\n\nexport function ChatSidebar({\n user,\n threads,\n activeId,\n onSelect,\n onNew,\n onSearch,\n onChange,\n}: Props) {\n const [renameId, setRenameId] = useState(null);\n const [name, setName] = useState('');\n\n const commitRename = () => {\n if (renameId && name.trim()) {\n onChange(\n threads.map((t) =>\n t.id === renameId ? { ...t, title: name.trim() } : t\n )\n );\n }\n setRenameId(null);\n };\n\n return (\n \n \n \n \n \n Search chats\n \n ⌘K\n \n \n \n\n \n {groups.map(({ key, label }) => {\n const list = threads.filter((t) =>\n key === 'pinned' ? t.pinned : !t.pinned && t.group === key\n );\n if (list.length === 0) {\n return null;\n }\n return (\n \n \n {label}\n \n \n \n {list.map((t) => (\n \n {renameId === t.id ? (\n setName(e.target.value)}\n onFocus={(e) => e.target.select()}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n commitRename();\n }\n if (e.key === 'Escape') {\n setRenameId(null);\n }\n }}\n value={name}\n />\n ) : (\n <>\n onSelect(t.id)}\n >\n {t.title}\n \n \n {t.pinned ? (\n \n ) : (\n t.updated\n )}\n \n \n \n }\n >\n \n \n \n \n \n onChange(\n threads.map((x) =>\n x.id === t.id\n ? { ...x, pinned: !x.pinned }\n : x\n )\n )\n }\n >\n \n {t.pinned ? 'Unpin' : 'Pin'}\n \n {\n setRenameId(t.id);\n setName(t.title);\n }}\n >\n \n Rename\n \n \n \n Share\n \n \n onChange(\n threads.filter((x) => x.id !== t.id)\n )\n }\n >\n \n Archive\n \n \n \n \n onChange(threads.filter((x) => x.id !== t.id))\n }\n variant=\"destructive\"\n >\n \n Delete\n \n \n \n \n )}\n \n ))}\n \n \n \n );\n })}\n \n\n \n \n \n }\n >\n \n \n \n {user.name[0]}\n \n \n \n \n {user.name}\n \n \n {user.plan} · {user.email}\n \n \n \n \n \n
\n \n \n \n {user.name[0]}\n \n \n
\n {user.name}\n \n {user.email}\n \n
\n
\n \n \n \n \n Settings\n \n ⌘\n ,\n \n \n \n \n Appearance\n \n System\n \n \n \n \n Keyboard shortcuts\n \n ⌘\n /\n \n \n \n \n Help & feedback\n \n \n \n
\n
\n {user.plan} plan\n \n Renews {user.renews}\n \n
\n \n
\n \n \n \n Log out\n \n \n \n \n \n );\n}\n" }, { "path": "content/components/chat/chat-03/components/command-menu.tsx", "type": "registry:component", "target": "@components/uiblocks/chat-03/components/command-menu.tsx", "content": "'use client';\n\nimport { IconFileText, IconMessage, IconPlus } from '@tabler/icons-react';\nimport { useEffect, useState } from 'react';\nimport {\n Command,\n CommandDialog,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandShortcut,\n} from \"../shared/components/ui/command\";\nimport { Kbd } from \"../shared/components/ui/kbd\";\nimport type { Thread } from \"./conversation\";\n\ntype Props = {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n threads: Thread[];\n onOpen: (id: string) => void;\n onNew: (draft: string) => void;\n};\n\nconst heading =\n '**:[[cmdk-group-heading]]:px-2.5 **:[[cmdk-group-heading]]:font-semibold **:[[cmdk-group-heading]]:text-[10px] **:[[cmdk-group-heading]]:uppercase **:[[cmdk-group-heading]]:tracking-[0.08em] **:[[cmdk-group-heading]]:text-muted-foreground/80';\nconst row = 'h-10 gap-3 rounded-lg px-2.5 text-[13px]';\n\nfunction useCommandKey(onToggle: () => void) {\n useEffect(() => {\n const down = (e: KeyboardEvent) => {\n if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {\n e.preventDefault();\n onToggle();\n }\n };\n document.addEventListener('keydown', down);\n return () => document.removeEventListener('keydown', down);\n }, [onToggle]);\n}\n\nexport function CommandMenu({\n open,\n onOpenChange,\n threads,\n onOpen,\n onNew,\n}: Props) {\n const [query, setQuery] = useState('');\n const q = query.trim().toLowerCase();\n useCommandKey(() => onOpenChange(!open));\n\n const messages = q\n ? threads.flatMap((t) =>\n t.turns\n .filter(\n (m) => m.role === 'assistant' && m.text.toLowerCase().includes(q)\n )\n .slice(0, 1)\n .map((m) => {\n const at = m.text.toLowerCase().indexOf(q);\n const start = Math.max(0, at - 40);\n return {\n id: m.id,\n threadId: t.id,\n thread: t.title,\n snippet: `${start > 0 ? '…' : ''}${m.text.slice(start, start + 90)}…`,\n };\n })\n )\n : [];\n\n const pick = (fn: () => void) => {\n fn();\n onOpenChange(false);\n setQuery('');\n };\n\n return (\n {\n onOpenChange(v);\n if (!v) {\n setQuery('');\n }\n }}\n open={open}\n title=\"Search\"\n >\n \n value.toLowerCase().includes(search.toLowerCase()) ? 1 : 0\n }\n >\n \n \n \n No results for “{query}”\n \n \n {threads.map((t) => (\n pick(() => onOpen(t.id))}\n value={`${t.title} ${t.preview}`}\n >\n \n \n {t.title}\n \n {t.preview}\n \n \n \n {t.updated}\n \n \n ))}\n \n {messages.length > 0 && (\n \n {messages.map((m) => (\n pick(() => onOpen(m.threadId))}\n value={m.snippet}\n >\n \n \n {m.snippet}\n \n \n {m.thread}\n \n \n ))}\n \n )}\n \n pick(() => onNew(query.trim()))}\n value={`new chat ${query}`}\n >\n \n \n {q ? `New chat about “${query.trim()}”` : 'New chat'}\n \n \n ⌘N\n \n \n \n \n
\n \n \n ↑↓\n \n Navigate\n \n \n \n ↵\n \n Open\n \n
\n \n \n );\n}\n" }, { "path": "content/components/chat/chat-03/components/composer.tsx", "type": "registry:component", "target": "@components/uiblocks/chat-03/components/composer.tsx", "content": "'use client';\n\nimport {\n IconArrowUp,\n IconMicrophone,\n IconPaperclip,\n IconPhoto,\n IconPlayerStopFilled,\n IconPlus,\n IconWorld,\n IconX,\n} from '@tabler/icons-react';\nimport { useState } from 'react';\nimport { Button } from \"../shared/components/ui/button\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"../shared/components/ui/dropdown-menu\";\nimport { Textarea } from \"../shared/components/ui/textarea\";\nimport { cn } from \"../shared/lib/utils\";\n\nexport type Attachment = { name: string; meta: string; kind: string };\n\nconst easeOut = 'ease-[cubic-bezier(0.23,1,0.32,1)]';\nconst press = `${easeOut} transition-[scale,background-color] duration-150 active:scale-[0.96] motion-reduce:active:scale-100`;\nconst swap = `${easeOut} fade-in zoom-in-95 motion-reduce:zoom-in-100 animate-in duration-150`;\nconst round = 'size-7.5 rounded-full';\n\ntype Props = {\n draft: string;\n onDraft: (v: string) => void;\n attachment: Attachment | null;\n onAttachment: (a: Attachment | null) => void;\n streaming: boolean;\n onSend: () => void;\n onStop: () => void;\n};\n\nexport function Composer({\n draft,\n onDraft,\n attachment,\n onAttachment,\n streaming,\n onSend,\n onStop,\n}: Props) {\n const [search, setSearch] = useState(false);\n const [listening, setListening] = useState(false);\n const canSend = draft.trim().length > 0 && !streaming;\n\n return (\n {\n e.preventDefault();\n if (canSend) {\n onSend();\n }\n }}\n >\n \n {attachment && (\n
\n
\n \n {attachment.kind}\n \n \n \n {attachment.name}\n \n \n {attachment.meta}\n \n \n onAttachment(null)}\n type=\"button\"\n >\n \n \n
\n
\n )}\n onDraft(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n e.currentTarget.form?.requestSubmit();\n }\n }}\n placeholder={listening ? 'Listening…' : 'Ask anything'}\n rows={1}\n value={draft}\n />\n
\n \n \n }\n >\n \n \n \n \n \n onAttachment({\n name: 'installer-quote.pdf',\n meta: '2 pages · 412 KB',\n kind: 'PDF',\n })\n }\n >\n \n Add files\n \n \n onAttachment({\n name: 'boiler-room.jpg',\n meta: '3024 × 4032 · 2.1 MB',\n kind: 'JPG',\n })\n }\n >\n \n Add photos\n \n \n \n \n setSearch(!search)}\n size=\"sm\"\n variant=\"outline\"\n >\n \n Search\n \n
\n setListening(!listening)}\n size=\"icon-sm\"\n variant=\"ghost\"\n >\n {listening ? (\n \n ) : (\n \n )}\n \n {streaming ? (\n \n \n \n ) : (\n \n \n \n )}\n
\n
\n \n );\n}\n" }, { "path": "content/components/chat/chat-03/components/conversation.tsx", "type": "registry:component", "target": "@components/uiblocks/chat-03/components/conversation.tsx", "content": "'use client';\n\nimport {\n IconAlertCircle,\n IconChevronDown,\n IconChevronRight,\n IconCopy,\n IconPencil,\n IconRefresh,\n IconThumbDown,\n IconThumbUp,\n} from '@tabler/icons-react';\nimport React, { Fragment } from 'react';\nimport { Button } from \"../shared/components/ui/button\";\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"../shared/components/ui/collapsible\";\nimport {\n MessageScroller,\n MessageScrollerButton,\n MessageScrollerContent,\n MessageScrollerItem,\n MessageScrollerProvider,\n MessageScrollerViewport,\n} from \"../shared/components/ui/message-scroller\";\nimport { cn } from \"../shared/lib/utils\";\n\nexport type Turn = {\n id: string;\n role: 'user' | 'assistant';\n text: string;\n reasoning?: string;\n thought?: number;\n streaming?: boolean;\n error?: boolean;\n day?: Thread['group'];\n};\n\nexport type Thread = {\n id: string;\n title: string;\n preview: string;\n updated: string;\n group: 'today' | 'yesterday' | 'week';\n pinned?: boolean;\n turns: Turn[];\n};\n\nconst easeOut = 'ease-[cubic-bezier(0.23,1,0.32,1)]';\nconst press = `${easeOut} transition-[scale,background-color] duration-150 active:scale-[0.96] motion-reduce:active:scale-100`;\nconst enter = `${easeOut} motion-reduce:slide-in-from-bottom-0 fade-in slide-in-from-bottom-1 animate-in duration-200`;\n\ntype Props = {\n thread: Thread | null;\n recent: Thread[];\n altModel: string;\n onOpen: (id: string) => void;\n onEdit: (turn: Turn) => void;\n onRetry: (turnId: string, model?: string) => void;\n};\n\nexport function Conversation({\n thread,\n recent,\n altModel,\n onOpen,\n onEdit,\n onRetry,\n}: Props) {\n if (!thread) {\n return (\n
\n
\n
\n

\n Where were we?\n

\n

\n Nothing here yet. Ask anything, or pick up a thread.\n

\n
\n
\n

\n Continue\n

\n {recent.map((t) => (\n onOpen(t.id)}\n type=\"button\"\n >\n \n {t.title}\n \n {t.preview}\n \n \n \n {t.updated}\n \n \n ))}\n
\n
\n
\n );\n }\n\n const action = (\n label: string,\n icon: React.ReactNode,\n onClick?: () => void\n ) => (\n \n {icon}\n \n );\n\n return (\n \n \n \n \n {thread.turns.map((turn, i) => {\n const day = turn.day ?? thread.group;\n const prev = thread.turns[i - 1];\n const divider = !prev || (prev.day ?? thread.group) !== day;\n return (\n \n {divider && (\n
\n
\n \n {\n {\n today: 'Today',\n yesterday: 'Yesterday',\n week: 'This week',\n }[day]\n }\n \n
\n
\n )}\n {turn.role === 'user' ? (\n \n
\n {turn.text}\n
\n
\n {action('Edit', , () =>\n onEdit(turn)\n )}\n {action('Copy', , () =>\n navigator.clipboard.writeText(turn.text)\n )}\n
\n \n ) : (\n \n {turn.error ? (\n <>\n
\n \n
\n

\n The response was interrupted\n

\n

\n The model stopped before finishing. Your message\n was not lost. Retry with the same model or\n switch to a different one.\n

\n
\n
\n
\n onRetry(turn.id)}\n >\n \n Retry\n \n onRetry(turn.id, altModel)}\n variant=\"outline\"\n >\n Retry with {altModel}\n \n
\n \n ) : (\n <>\n \n \n \n {turn.thought\n ? `Thought for ${turn.thought}s`\n : 'Thinking…'}\n \n \n {turn.reasoning}\n \n \n {turn.text && (\n

{turn.text}

\n )}\n {!turn.streaming && (\n
\n {action('Copy', , () =>\n navigator.clipboard.writeText(turn.text)\n )}\n {action(\n 'Good response',\n \n )}\n {action(\n 'Bad response',\n \n )}\n {action(\n 'Regenerate',\n ,\n () => onRetry(turn.id)\n )}\n
\n )}\n \n )}\n \n )}\n \n );\n })}\n \n \n \n \n Jump to latest\n \n \n \n );\n}\n" }, { "path": "content/components/chat/chat-03/components/logos.tsx", "type": "registry:component", "target": "@components/uiblocks/chat-03/components/logos.tsx", "content": "import type { ComponentProps } from 'react';\n\nexport function OpenAILogo(props: ComponentProps<'svg'>) {\n return (\n \n \n \n );\n}\n\nexport function ClaudeLogo(props: ComponentProps<'svg'>) {\n return (\n \n \n \n );\n}\n" }, { "path": "licenses/chat-03/LICENSE.txt", "type": "registry:file", "target": "@components/uiblocks/chat-03/LICENSE.txt", "content": "Includes source from Blocks.so and its bundled primitives.\nSource: https://github.com/ephraimduncan/blocks\nRevision: 3f759d5171c2391253ec4c772e9e5b3db2bc7c7f\n\nMIT License\n\nCopyright (c) 2025 Ephraim Duncan\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "components/ui/avatar.tsx", "type": "registry:component", "target": "@components/uiblocks/chat-03/shared/components/ui/avatar.tsx", "content": "'use client';\n\nimport { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';\nimport type * as React from 'react';\n\nimport { cn } from \"../../lib/utils\";\n\nfunction Avatar({\n className,\n size = 'default',\n ...props\n}: AvatarPrimitive.Root.Props & {\n size?: 'default' | 'sm' | 'lg';\n}) {\n return (\n \n );\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n return (\n \n );\n}\n\nfunction AvatarFallback({\n className,\n ...props\n}: AvatarPrimitive.Fallback.Props) {\n return (\n \n );\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {\n return (\n svg]:hidden',\n 'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',\n 'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',\n className\n )}\n data-slot=\"avatar-badge\"\n {...props}\n />\n );\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nfunction AvatarGroupCount({\n className,\n ...props\n}: React.ComponentProps<'div'>) {\n return (\n svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',\n className\n )}\n data-slot=\"avatar-group-count\"\n {...props}\n />\n );\n}\n\nexport {\n Avatar,\n AvatarImage,\n AvatarFallback,\n AvatarGroup,\n AvatarGroupCount,\n AvatarBadge,\n};\n" }, { "path": "components/ui/button.tsx", "type": "registry:component", "target": "@components/uiblocks/chat-03/shared/components/ui/button.tsx", "content": "import { Button as ButtonPrimitive } from '@base-ui/react/button';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n \"group/button inline-flex shrink-0 select-none items-center justify-center whitespace-nowrap rounded-lg border border-transparent bg-clip-padding font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n {\n variants: {\n variant: {\n default: 'bg-primary text-primary-foreground hover:bg-primary/80',\n outline:\n 'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',\n secondary:\n 'bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',\n ghost:\n 'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',\n destructive:\n 'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 dark:hover:bg-destructive/30',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n size: {\n default:\n 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n xs: \"h-6 gap-1 in-data-[slot=button-group]:rounded-lg rounded-[min(var(--radius-md),10px)] px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-7 gap-1 in-data-[slot=button-group]:rounded-lg rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n icon: 'size-8',\n 'icon-xs':\n \"size-6 in-data-[slot=button-group]:rounded-lg rounded-[min(var(--radius-md),10px)] [&_svg:not([class*='size-'])]:size-3\",\n 'icon-sm':\n 'size-7 in-data-[slot=button-group]:rounded-lg rounded-[min(var(--radius-md),12px)]',\n 'icon-lg': 'size-9',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n\nfunction Button({\n className,\n variant = 'default',\n size = 'default',\n ...props\n}: ButtonPrimitive.Props & VariantProps) {\n return (\n \n );\n}\n\nexport { Button, buttonVariants };\n" }, { "path": "components/ui/collapsible.tsx", "type": "registry:component", "target": "@components/uiblocks/chat-03/shared/components/ui/collapsible.tsx", "content": "'use client';\n\nimport { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\n\nfunction Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {\n return ;\n}\n\nfunction CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {\n return (\n \n );\n}\n\nfunction CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {\n return (\n \n );\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n" }, { "path": "components/ui/command.tsx", "type": "registry:component", "target": "@components/uiblocks/chat-03/shared/components/ui/command.tsx", "content": "'use client';\n\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { CheckIcon, SearchIcon } from 'lucide-react';\nimport type * as React from 'react';\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n} from \"./dialog\";\nimport { InputGroup, InputGroupAddon } from \"./input-group\";\nimport { cn } from \"../../lib/utils\";\n\nfunction Command({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction CommandDialog({\n title = 'Command Palette',\n description = 'Search for a command to run...',\n children,\n className,\n showCloseButton = false,\n ...props\n}: Omit, 'children'> & {\n title?: string;\n description?: string;\n className?: string;\n showCloseButton?: boolean;\n children: React.ReactNode;\n}) {\n return (\n \n \n {title}\n {description}\n \n \n {children}\n \n \n );\n}\n\nfunction CommandInput({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n
\n \n \n \n \n \n \n
\n );\n}\n\nfunction CommandList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction CommandEmpty({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction CommandGroup({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction CommandSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction CommandItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}\n \n \n );\n}\n\nfunction CommandShortcut({\n className,\n ...props\n}: React.ComponentProps<'span'>) {\n return (\n \n );\n}\n\nexport {\n Command,\n CommandDialog,\n CommandInput,\n CommandList,\n CommandEmpty,\n CommandGroup,\n CommandItem,\n CommandShortcut,\n CommandSeparator,\n};\n" }, { "path": "components/ui/dialog.tsx", "type": "registry:component", "target": "@components/uiblocks/chat-03/shared/components/ui/dialog.tsx", "content": "'use client';\n\nimport { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { XIcon } from 'lucide-react';\nimport type * as React from 'react';\nimport { Button } from \"./button\";\nimport { cn } from \"../../lib/utils\";\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n return ;\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n return ;\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n return ;\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n return ;\n}\n\nfunction DialogOverlay({\n className,\n ...props\n}: DialogPrimitive.Backdrop.Props) {\n return (\n \n );\n}\n\nfunction DialogContent({\n className,\n children,\n showCloseButton = true,\n ...props\n}: DialogPrimitive.Popup.Props & {\n showCloseButton?: boolean;\n}) {\n return (\n \n \n \n {children}\n {showCloseButton && (\n \n }\n >\n \n Close\n \n )}\n \n \n );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nfunction DialogFooter({\n className,\n showCloseButton = false,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n showCloseButton?: boolean;\n}) {\n return (\n \n {children}\n {showCloseButton && (\n }>\n Close\n \n )}\n
\n );\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n return (\n \n );\n}\n\nfunction DialogDescription({\n className,\n ...props\n}: DialogPrimitive.Description.Props) {\n return (\n \n );\n}\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n};\n" }, { "path": "components/ui/dropdown-menu.tsx", "type": "registry:component", "target": "@components/uiblocks/chat-03/shared/components/ui/dropdown-menu.tsx", "content": "'use client';\n\nimport { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport { CheckIcon, ChevronRightIcon } from 'lucide-react';\nimport type * as React from 'react';\nimport { cn } from \"../../lib/utils\";\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n return ;\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n return ;\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n return ;\n}\n\nfunction DropdownMenuContent({\n align = 'start',\n alignOffset = 0,\n side = 'bottom',\n sideOffset = 4,\n className,\n ...props\n}: MenuPrimitive.Popup.Props &\n Pick<\n MenuPrimitive.Positioner.Props,\n 'align' | 'alignOffset' | 'side' | 'sideOffset'\n >) {\n return (\n \n \n \n \n \n );\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n return ;\n}\n\nfunction DropdownMenuLabel({\n className,\n inset,\n ...props\n}: MenuPrimitive.GroupLabel.Props & {\n inset?: boolean;\n}) {\n return (\n \n );\n}\n\nfunction DropdownMenuItem({\n className,\n inset,\n variant = 'default',\n ...props\n}: MenuPrimitive.Item.Props & {\n inset?: boolean;\n variant?: 'default' | 'destructive';\n}) {\n return (\n \n );\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n return ;\n}\n\nfunction DropdownMenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n inset?: boolean;\n}) {\n return (\n \n {children}\n \n \n );\n}\n\nfunction DropdownMenuSubContent({\n align = 'start',\n alignOffset = -3,\n side = 'right',\n sideOffset = 0,\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DropdownMenuCheckboxItem({\n className,\n children,\n checked,\n inset,\n ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n inset?: boolean;\n}) {\n return (\n \n \n \n \n \n \n {children}\n \n );\n}\n\nfunction DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n return (\n \n );\n}\n\nfunction DropdownMenuRadioItem({\n className,\n children,\n inset,\n ...props\n}: MenuPrimitive.RadioItem.Props & {\n inset?: boolean;\n}) {\n return (\n \n \n \n \n \n \n {children}\n \n );\n}\n\nfunction DropdownMenuSeparator({\n className,\n ...props\n}: MenuPrimitive.Separator.Props) {\n return (\n \n );\n}\n\nfunction DropdownMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<'span'>) {\n return (\n \n );\n}\n\nexport {\n DropdownMenu,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuLabel,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n};\n" }, { "path": "components/ui/input-group.tsx", "type": "registry:component", "target": "@components/uiblocks/chat-03/shared/components/ui/input-group.tsx", "content": "'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\nimport { Button } from \"./button\";\nimport { Input } from \"./input\";\nimport { Textarea } from \"./textarea\";\nimport { cn } from \"../../lib/utils\";\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n [data-align=block-end]]:h-auto has-[>[data-align=block-start]]:h-auto has-[>textarea]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:flex-col has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot][aria-invalid=true]]:border-destructive has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',\n className\n )}\n data-slot=\"input-group\"\n role=\"group\"\n {...props}\n />\n );\n}\n\nconst inputGroupAddonVariants = cva(\n \"flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 font-medium text-muted-foreground text-sm group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n align: {\n 'inline-start':\n 'order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]',\n 'inline-end':\n 'order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]',\n 'block-start':\n 'order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2',\n 'block-end':\n 'order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2',\n },\n },\n defaultVariants: {\n align: 'inline-start',\n },\n }\n);\n\nfunction InputGroupAddon({\n className,\n align = 'inline-start',\n ...props\n}: React.ComponentProps<'div'> & VariantProps) {\n return (\n {\n if ((e.target as HTMLElement).closest('button')) {\n return;\n }\n e.currentTarget.parentElement?.querySelector('input')?.focus();\n }}\n role=\"group\"\n {...props}\n />\n );\n}\n\nconst inputGroupButtonVariants = cva(\n 'flex items-center gap-2 text-sm shadow-none',\n {\n variants: {\n size: {\n xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n sm: '',\n 'icon-xs':\n 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',\n 'icon-sm': 'size-8 p-0 has-[>svg]:p-0',\n },\n },\n defaultVariants: {\n size: 'xs',\n },\n }\n);\n\nfunction InputGroupButton({\n className,\n type = 'button',\n variant = 'ghost',\n size = 'xs',\n ...props\n}: Omit, 'size' | 'type'> &\n VariantProps & {\n type?: 'button' | 'submit' | 'reset';\n }) {\n return (\n \n );\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {\n return (\n \n );\n}\n\nfunction InputGroupInput({\n className,\n ...props\n}: React.ComponentProps<'input'>) {\n return (\n \n );\n}\n\nfunction InputGroupTextarea({\n className,\n ...props\n}: React.ComponentProps<'textarea'>) {\n return (\n \n );\n}\n\nexport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupText,\n InputGroupInput,\n InputGroupTextarea,\n};\n" }, { "path": "components/ui/input.tsx", "type": "registry:component", "target": "@components/uiblocks/chat-03/shared/components/ui/input.tsx", "content": "import { Input as InputPrimitive } from '@base-ui/react/input';\nimport type * as React from 'react';\n\nimport { cn } from \"../../lib/utils\";\n\nfunction Input({ className, type, ...props }: React.ComponentProps<'input'>) {\n return (\n \n );\n}\n\nexport { Input };\n" }, { "path": "components/ui/kbd.tsx", "type": "registry:component", "target": "@components/uiblocks/chat-03/shared/components/ui/kbd.tsx", "content": "import { cn } from \"../../lib/utils\";\n\nfunction Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {\n return (\n \n );\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nexport { Kbd, KbdGroup };\n" }, { "path": "components/ui/message-scroller.tsx", "type": "registry:component", "target": "@components/uiblocks/chat-03/shared/components/ui/message-scroller.tsx", "content": "'use client';\n\nimport {\n MessageScroller as MessageScrollerPrimitive,\n useMessageScroller,\n useMessageScrollerScrollable,\n useMessageScrollerVisibility,\n} from '@shadcn/react/message-scroller';\nimport { ArrowDownIcon } from 'lucide-react';\nimport type * as React from 'react';\nimport { Button } from \"./button\";\nimport { cn } from \"../../lib/utils\";\n\nfunction MessageScrollerProvider(\n props: React.ComponentProps\n) {\n return ;\n}\n\nfunction MessageScroller({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction MessageScrollerViewport({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction MessageScrollerContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction MessageScrollerItem({\n className,\n scrollAnchor = false,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction MessageScrollerButton({\n direction = 'end',\n className,\n children,\n render,\n variant = 'secondary',\n size = 'icon-sm',\n ...props\n}: React.ComponentProps &\n Pick, 'variant' | 'size'>) {\n return (\n }\n {...props}\n >\n {children ?? (\n <>\n \n \n {direction === 'end' ? 'Scroll to end' : 'Scroll to start'}\n \n \n )}\n \n );\n}\n\nexport {\n MessageScrollerProvider,\n MessageScroller,\n MessageScrollerViewport,\n MessageScrollerContent,\n MessageScrollerItem,\n MessageScrollerButton,\n useMessageScroller,\n useMessageScrollerScrollable,\n useMessageScrollerVisibility,\n};\n" }, { "path": "components/ui/separator.tsx", "type": "registry:component", "target": "@components/uiblocks/chat-03/shared/components/ui/separator.tsx", "content": "'use client';\n\nimport { Separator as SeparatorPrimitive } from '@base-ui/react/separator';\n\nimport { cn } from \"../../lib/utils\";\n\nfunction Separator({\n className,\n orientation = 'horizontal',\n ...props\n}: SeparatorPrimitive.Props) {\n return (\n \n );\n}\n\nexport { Separator };\n" }, { "path": "components/ui/sheet.tsx", "type": "registry:component", "target": "@components/uiblocks/chat-03/shared/components/ui/sheet.tsx", "content": "'use client';\n\nimport { Dialog as SheetPrimitive } from '@base-ui/react/dialog';\nimport { XIcon } from 'lucide-react';\nimport type * as React from 'react';\nimport { Button } from \"./button\";\nimport { cn } from \"../../lib/utils\";\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n return ;\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n return ;\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n return ;\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n return ;\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n return (\n \n );\n}\n\nfunction SheetContent({\n className,\n children,\n side = 'right',\n showCloseButton = true,\n ...props\n}: SheetPrimitive.Popup.Props & {\n side?: 'top' | 'right' | 'bottom' | 'left';\n showCloseButton?: boolean;\n}) {\n return (\n \n \n \n {children}\n {showCloseButton && (\n \n }\n >\n \n Close\n \n )}\n \n \n );\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n \n );\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n return (\n \n );\n}\n\nfunction SheetDescription({\n className,\n ...props\n}: SheetPrimitive.Description.Props) {\n return (\n \n );\n}\n\nexport {\n Sheet,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n};\n" }, { "path": "components/ui/sidebar.tsx", "type": "registry:component", "target": "@components/uiblocks/chat-03/shared/components/ui/sidebar.tsx", "content": "'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { PanelLeftIcon } from 'lucide-react';\nimport * as React from 'react';\nimport { Button } from \"./button\";\nimport { Input } from \"./input\";\nimport { Separator } from \"./separator\";\nimport {\n Sheet,\n SheetContent,\n SheetDescription,\n SheetHeader,\n SheetTitle,\n} from \"./sheet\";\nimport { Skeleton } from \"./skeleton\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"./tooltip\";\nimport { useIsMobile } from \"../../hooks/use-mobile\";\nimport { cn } from \"../../lib/utils\";\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\ntype SidebarContextProps = {\n state: 'expanded' | 'collapsed';\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n};\n\nconst SidebarContext = React.createContext(null);\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext);\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.');\n }\n\n return context;\n}\n\nfunction SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n}) {\n const isMobile = useIsMobile();\n const [openMobile, setOpenMobile] = React.useState(false);\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\n const [_open, _setOpen] = React.useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = React.useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === 'function' ? value(open) : value;\n if (setOpenProp) {\n setOpenProp(openState);\n } else {\n _setOpen(openState);\n }\n\n // This sets the cookie to keep the sidebar state.\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n },\n [setOpenProp, open]\n );\n\n // Helper to toggle the sidebar.\n const toggleSidebar = React.useCallback(() => {\n return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\n }, [isMobile, setOpen]);\n\n // Adds a keyboard shortcut to toggle the sidebar.\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (\n event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n (event.metaKey || event.ctrlKey)\n ) {\n event.preventDefault();\n toggleSidebar();\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [toggleSidebar]);\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? 'expanded' : 'collapsed';\n\n const contextValue = React.useMemo(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, toggleSidebar]\n );\n\n return (\n \n \n {children}\n
\n \n );\n}\n\nfunction Sidebar({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'offcanvas',\n className,\n children,\n dir,\n ...props\n}: React.ComponentProps<'div'> & {\n side?: 'left' | 'right';\n variant?: 'sidebar' | 'floating' | 'inset';\n collapsible?: 'offcanvas' | 'icon' | 'none';\n}) {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n if (collapsible === 'none') {\n return (\n \n {children}\n \n );\n }\n\n if (isMobile) {\n return (\n \n button]:hidden\"\n data-mobile=\"true\"\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar\"\n dir={dir}\n side={side}\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n >\n \n Sidebar\n Displays the mobile sidebar.\n \n
{children}
\n \n \n );\n }\n\n return (\n