{"name":"agent-chat-01","type":"registry:block","description":"Block: agent-chat-01","dependencies":["lucide-react"],"files":[{"path":"blocks/mobile-agent/agent-chat-01.tsx","content":"'use client'\n\nimport { ArrowUp, Bot, CheckCircle2, Command, FileText, Sparkles } from 'lucide-react'\n\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\n\nconst tasks = [\n  { label: 'Read registry-index.json', done: true },\n  { label: 'Install wallet-home-01', done: true },\n  { label: 'Patch mobile safe area', done: false },\n]\n\nexport default function AgentChat01() {\n  return (\n    <section className=\"mx-auto flex min-h-dvh w-full max-w-md flex-col bg-background text-foreground\">\n      <header className=\"flex items-center gap-3 border-b px-5 pb-4 pt-safe-top\">\n        <Avatar className=\"size-11\">\n          <AvatarFallback className=\"bg-primary text-primary-foreground\">\n            <Bot className=\"size-5\" />\n          </AvatarFallback>\n        </Avatar>\n        <div className=\"min-w-0 flex-1\">\n          <h1 className=\"text-base font-semibold tracking-normal\">Timkit Agent</h1>\n          <p className=\"truncate text-xs text-muted-foreground\">Mobile UI registry session</p>\n        </div>\n        <Badge className=\"rounded-md\" variant=\"secondary\">\n          Live\n        </Badge>\n      </header>\n\n      <main className=\"flex flex-1 flex-col gap-4 overflow-y-auto px-5 py-5\">\n        <div className=\"max-w-[82%] rounded-lg bg-muted p-3\">\n          <p className=\"text-sm leading-relaxed\">\n            Build a mobile checkout screen using Timkit components and keep every tap target above\n            44px.\n          </p>\n        </div>\n\n        <div className=\"ml-auto max-w-[86%] rounded-lg bg-primary p-3 text-primary-foreground\">\n          <div className=\"mb-2 flex items-center gap-2 text-xs font-medium opacity-80\">\n            <Sparkles className=\"size-3.5\" />\n            Registry plan\n          </div>\n          <div className=\"grid gap-2\">\n            {tasks.map((task) => (\n              <div\n                key={task.label}\n                className=\"flex items-center gap-2 rounded-md bg-primary-foreground/10 px-2 py-2 text-sm\"\n              >\n                {task.done ? <CheckCircle2 className=\"size-4\" /> : <Command className=\"size-4\" />}\n                <span>{task.label}</span>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"max-w-[88%] rounded-lg border bg-card p-3\">\n          <div className=\"mb-2 flex items-center gap-2 text-xs font-medium text-muted-foreground\">\n            <FileText className=\"size-3.5\" />\n            Command\n          </div>\n          <code className=\"block overflow-x-auto rounded-md bg-muted px-3 py-2 text-xs\">\n            npx @timui/cli add commerce-home-01 --framework react\n          </code>\n        </div>\n      </main>\n\n      <form className=\"flex gap-2 border-t px-5 py-3 pb-safe-bottom\">\n        <Input className=\"min-h-[44px] rounded-lg\" placeholder=\"Ask the agent to compose UI\" />\n        <Button aria-label=\"Send message\" className=\"size-11 rounded-lg\" size=\"icon\" type=\"button\">\n          <ArrowUp className=\"size-4\" />\n        </Button>\n      </form>\n    </section>\n  )\n}\n","type":"registry:block","target":"components/blocks/mobile-agent/agent-chat-01.tsx"}],"categories":["mobile-agent"],"registryDependencies":["avatar","badge","button","input"],"meta":{"frameworks":["react"],"category":"mobile-agent","tags":["mobile","mobile-agent"],"clientOnly":true,"viewport":"mobile-first","previewPath":"registry/default/blocks/mobile-agent/agent-chat-01.tsx","isActive":true,"mdxBody":"```tsx\n'use client'\n\nimport { ArrowUp, Bot, CheckCircle2, Command, FileText, Sparkles } from 'lucide-react'\n\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\n\nconst tasks = [\n  { label: 'Read registry-index.json', done: true },\n  { label: 'Install wallet-home-01', done: true },\n  { label: 'Patch mobile safe area', done: false },\n]\n\nexport default function AgentChat01() {\n  return (\n    <section className=\"mx-auto flex min-h-dvh w-full max-w-md flex-col bg-background text-foreground\">\n      <header className=\"flex items-center gap-3 border-b px-5 pb-4 pt-safe-top\">\n        <Avatar className=\"size-11\">\n          <AvatarFallback className=\"bg-primary text-primary-foreground\">\n            <Bot className=\"size-5\" />\n          </AvatarFallback>\n        </Avatar>\n        <div className=\"min-w-0 flex-1\">\n          <h1 className=\"text-base font-semibold tracking-normal\">Timkit Agent</h1>\n          <p className=\"truncate text-xs text-muted-foreground\">Mobile UI registry session</p>\n        </div>\n        <Badge className=\"rounded-md\" variant=\"secondary\">\n          Live\n        </Badge>\n      </header>\n\n      <main className=\"flex flex-1 flex-col gap-4 overflow-y-auto px-5 py-5\">\n        <div className=\"max-w-[82%] rounded-lg bg-muted p-3\">\n          <p className=\"text-sm leading-relaxed\">\n            Build a mobile checkout screen using Timkit components and keep every tap target above\n            44px.\n          </p>\n        </div>\n\n        <div className=\"ml-auto max-w-[86%] rounded-lg bg-primary p-3 text-primary-foreground\">\n          <div className=\"mb-2 flex items-center gap-2 text-xs font-medium opacity-80\">\n            <Sparkles className=\"size-3.5\" />\n            Registry plan\n          </div>\n          <div className=\"grid gap-2\">\n            {tasks.map((task) => (\n              <div\n                key={task.label}\n                className=\"flex items-center gap-2 rounded-md bg-primary-foreground/10 px-2 py-2 text-sm\"\n              >\n                {task.done ? <CheckCircle2 className=\"size-4\" /> : <Command className=\"size-4\" />}\n                <span>{task.label}</span>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"max-w-[88%] rounded-lg border bg-card p-3\">\n          <div className=\"mb-2 flex items-center gap-2 text-xs font-medium text-muted-foreground\">\n            <FileText className=\"size-3.5\" />\n            Command\n          </div>\n          <code className=\"block overflow-x-auto rounded-md bg-muted px-3 py-2 text-xs\">\n            npx @timui/cli add commerce-home-01 --framework react\n          </code>\n        </div>\n      </main>\n\n      <form className=\"flex gap-2 border-t px-5 py-3 pb-safe-bottom\">\n        <Input className=\"min-h-[44px] rounded-lg\" placeholder=\"Ask the agent to compose UI\" />\n        <Button aria-label=\"Send message\" className=\"size-11 rounded-lg\" size=\"icon\" type=\"button\">\n          <ArrowUp className=\"size-4\" />\n        </Button>\n      </form>\n    </section>\n  )\n}\n\n```","title":"Agent Chat · Timkit Agent"}}