{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "chat-02",
	"type": "registry:block",
	"description": "A chat in a sidebar.",
	"dependencies": ["ai", "@ai-sdk/openai"],
	"registryDependencies": [
		"sidebar",
		"breadcrumb",
		"@simple-ai/chat-input",
		"@simple-ai/chat-message-area",
		"@simple-ai/chat-message"
	],
	"files": [
		{
			"path": "./src/registry/blocks/chat-02/page.tsx",
			"content": "import {\n\tBreadcrumb,\n\tBreadcrumbItem,\n\tBreadcrumbLink,\n\tBreadcrumbList,\n\tBreadcrumbPage,\n\tBreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\";\nimport {\n\tSidebarInset,\n\tSidebarProvider,\n\tSidebarTrigger,\n} from \"@/components/ui/sidebar\";\nimport { AppSidebar } from \"@/registry/blocks/chat-02/components/app-sidebar\";\n\nexport default function Page() {\n\treturn (\n\t\t<SidebarProvider\n\t\t\tstyle={{\n\t\t\t\t// @ts-expect-error\n\t\t\t\t\"--sidebar-width\": \"25rem\",\n\t\t\t\t\"--sidebar-width-mobile\": \"25rem\",\n\t\t\t}}\n\t\t>\n\t\t\t<SidebarInset>\n\t\t\t\t<header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n\t\t\t\t\t<Breadcrumb>\n\t\t\t\t\t\t<BreadcrumbList>\n\t\t\t\t\t\t\t<BreadcrumbItem className=\"hidden md:block\">\n\t\t\t\t\t\t\t\t<BreadcrumbLink href=\"#\">\n\t\t\t\t\t\t\t\t\tBuilding Your Application\n\t\t\t\t\t\t\t\t</BreadcrumbLink>\n\t\t\t\t\t\t\t</BreadcrumbItem>\n\t\t\t\t\t\t\t<BreadcrumbSeparator className=\"hidden md:block\" />\n\t\t\t\t\t\t\t<BreadcrumbItem>\n\t\t\t\t\t\t\t\t<BreadcrumbPage>Data Fetching</BreadcrumbPage>\n\t\t\t\t\t\t\t</BreadcrumbItem>\n\t\t\t\t\t\t</BreadcrumbList>\n\t\t\t\t\t</Breadcrumb>\n\t\t\t\t\t<SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n\t\t\t\t</header>\n\t\t\t\t<div className=\"flex flex-1 flex-col gap-4 p-4\">\n\t\t\t\t\t<div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n\t\t\t\t\t\t<div className=\"aspect-video rounded-xl bg-muted/50\" />\n\t\t\t\t\t\t<div className=\"aspect-video rounded-xl bg-muted/50\" />\n\t\t\t\t\t\t<div className=\"aspect-video rounded-xl bg-muted/50\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n\t\t\t\t</div>\n\t\t\t</SidebarInset>\n\t\t\t<AppSidebar side=\"right\" />\n\t\t</SidebarProvider>\n\t);\n}\n",
			"type": "registry:page",
			"target": "app/chat/page.tsx"
		},
		{
			"path": "./src/registry/blocks/chat-02/route.ts",
			"content": "import { openai } from \"@ai-sdk/openai\";\nimport { convertToModelMessages, streamText } from \"ai\";\n\nexport async function POST(req: Request) {\n\tconst { messages } = await req.json();\n\n\tconst result = streamText({\n\t\tmodel: openai(\"gpt-4o-mini\"),\n\t\tsystem: \"You are a helpful assistant\",\n\t\tmessages: convertToModelMessages(messages),\n\t});\n\n\treturn result.toUIMessageStreamResponse();\n}\n",
			"type": "registry:page",
			"target": "app/api/ai/chat/route.ts"
		},
		{
			"path": "./src/registry/blocks/chat-02/components/app-sidebar.tsx",
			"content": "\"use client\";\n\nimport { useChat } from \"@ai-sdk/react\";\nimport { DefaultChatTransport, type UIMessage } from \"ai\";\nimport { MessageCircle, SquarePen } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n\tSidebar,\n\tSidebarHeader,\n\tSidebarSeparator,\n} from \"@/components/ui/sidebar\";\nimport {\n\tTooltip,\n\tTooltipContent,\n\tTooltipProvider,\n\tTooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport {\n\tChatInput,\n\tChatInputEditor,\n\tChatInputGroupAddon,\n\tChatInputSubmitButton,\n\tuseChatInput,\n} from \"@/registry/ui/chat-input\";\nimport {\n\tChatMessage,\n\tChatMessageAuthor,\n\tChatMessageAvatar,\n\tChatMessageAvatarAssistantIcon,\n\tChatMessageAvatarUserIcon,\n\tChatMessageContainer,\n\tChatMessageContent,\n\tChatMessageHeader,\n\tChatMessageMarkdown,\n\tChatMessageTimestamp,\n} from \"@/registry/ui/chat-message\";\nimport {\n\tChatMessageArea,\n\tChatMessageAreaContent,\n\tChatMessageAreaScrollButton,\n} from \"@/registry/ui/chat-message-area\";\n\nconst INITIAL_MESSAGES: UIMessage[] = [\n\t{\n\t\tid: \"1\",\n\t\tparts: [\n\t\t\t{\n\t\t\t\ttype: \"text\",\n\t\t\t\ttext: \"Hi! I'm here to help you build amazing user interfaces. What kind of app are you working on?\",\n\t\t\t},\n\t\t],\n\t\trole: \"assistant\",\n\t},\n\t{\n\t\tid: \"2\",\n\t\tparts: [\n\t\t\t{\n\t\t\t\ttype: \"text\",\n\t\t\t\ttext: \"I want to build a task management app but I'm not sure where to start with the UI design.\",\n\t\t\t},\n\t\t],\n\t\trole: \"user\",\n\t},\n\t{\n\t\tid: \"3\",\n\t\tparts: [\n\t\t\t{\n\t\t\t\ttype: \"text\",\n\t\t\t\ttext: \"That's a great project! Let's break it down. For a task management app, we should focus on three key components: a clean navigation sidebar, a main task list view, and an intuitive task creation interface. Would you like to start with the layout structure first?\",\n\t\t\t},\n\t\t],\n\t\trole: \"assistant\",\n\t},\n\t{\n\t\tid: \"4\",\n\t\tparts: [\n\t\t\t{\n\t\t\t\ttype: \"text\",\n\t\t\t\ttext: \"Yes, that sounds good! How should I organize the layout?\",\n\t\t\t},\n\t\t],\n\t\trole: \"user\",\n\t},\n\t{\n\t\tid: \"5\",\n\t\tparts: [\n\t\t\t{\n\t\t\t\ttype: \"text\",\n\t\t\t\ttext: \"For the layout, I recommend a two-column design. The left sidebar can contain project categories and filters, while the main area shows your tasks. This is a common pattern that users are familiar with. Should we start designing the sidebar first?\",\n\t\t\t},\n\t\t],\n\t\trole: \"assistant\",\n\t},\n];\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n\tconst { messages, sendMessage, status, stop } = useChat({\n\t\ttransport: new DefaultChatTransport({\n\t\t\tapi: \"/api/ai/chat\",\n\t\t}),\n\t\tmessages: INITIAL_MESSAGES,\n\t});\n\tconst isLoading = status === \"streaming\" || status === \"submitted\";\n\n\tconst { value, onChange, handleSubmit } = useChatInput({\n\t\tonSubmit: (parsedValue) => {\n\t\t\tsendMessage({\n\t\t\t\trole: \"user\",\n\t\t\t\tparts: [{ type: \"text\", text: parsedValue.content }],\n\t\t\t});\n\t\t},\n\t});\n\n\treturn (\n\t\t<Sidebar {...props}>\n\t\t\t<SidebarHeader>\n\t\t\t\t<div className=\"flex items-center justify-between p-2\">\n\t\t\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t\t\t<div className=\"flex h-8 w-8 items-center justify-center rounded-lg bg-primary\">\n\t\t\t\t\t\t\t<MessageCircle className=\"h-5 w-5 text-primary-foreground\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span className=\"text-lg font-semibold\">simple-ai</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t{/* New Chat Button */}\n\t\t\t\t\t<TooltipProvider>\n\t\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t\t<Button size=\"icon\" variant=\"ghost\">\n\t\t\t\t\t\t\t\t\t<SquarePen className=\"h-5 w-5\" />\n\t\t\t\t\t\t\t\t\t<span className=\"sr-only\">New Chat</span>\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t\t<TooltipContent>\n\t\t\t\t\t\t\t\t<p>New Chat</p>\n\t\t\t\t\t\t\t</TooltipContent>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</TooltipProvider>\n\t\t\t\t</div>\n\t\t\t</SidebarHeader>\n\t\t\t<SidebarSeparator />\n\t\t\t<div className=\"flex-1 flex flex-col h-full overflow-y-auto\">\n\t\t\t\t<ChatMessageArea>\n\t\t\t\t\t<ChatMessageAreaContent>\n\t\t\t\t\t\t{messages.map((message) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<ChatMessage key={message.id}>\n\t\t\t\t\t\t\t\t\t<ChatMessageAvatar>\n\t\t\t\t\t\t\t\t\t\t{message.role === \"user\" ? (\n\t\t\t\t\t\t\t\t\t\t\t<ChatMessageAvatarUserIcon />\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t<ChatMessageAvatarAssistantIcon />\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</ChatMessageAvatar>\n\n\t\t\t\t\t\t\t\t\t<ChatMessageContainer>\n\t\t\t\t\t\t\t\t\t\t<ChatMessageHeader>\n\t\t\t\t\t\t\t\t\t\t\t<ChatMessageAuthor>\n\t\t\t\t\t\t\t\t\t\t\t\t{message.role === \"user\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t? \"You\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t: \"Assistant\"}\n\t\t\t\t\t\t\t\t\t\t\t</ChatMessageAuthor>\n\t\t\t\t\t\t\t\t\t\t\t<ChatMessageTimestamp\n\t\t\t\t\t\t\t\t\t\t\t\tcreatedAt={new Date()}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</ChatMessageHeader>\n\t\t\t\t\t\t\t\t\t\t<ChatMessageContent>\n\t\t\t\t\t\t\t\t\t\t\t{message.parts\n\t\t\t\t\t\t\t\t\t\t\t\t.filter(\n\t\t\t\t\t\t\t\t\t\t\t\t\t(part) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpart.type === \"text\",\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t.map((part) => (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<ChatMessageMarkdown\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={part.type}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcontent={part.text}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t</ChatMessageContent>\n\t\t\t\t\t\t\t\t\t</ChatMessageContainer>\n\t\t\t\t\t\t\t\t</ChatMessage>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</ChatMessageAreaContent>\n\t\t\t\t\t<ChatMessageAreaScrollButton alignment=\"center\" />\n\t\t\t\t</ChatMessageArea>\n\t\t\t\t<div className=\"p-4 max-w-2xl mx-auto w-full\">\n\t\t\t\t\t<ChatInput\n\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\tonSubmit={handleSubmit}\n\t\t\t\t\t\tisStreaming={isLoading}\n\t\t\t\t\t\tonStop={stop}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ChatInputEditor placeholder=\"Type a message...\" />\n\t\t\t\t\t\t<ChatInputGroupAddon align=\"block-end\">\n\t\t\t\t\t\t\t<ChatInputSubmitButton className=\"ml-auto\" />\n\t\t\t\t\t\t</ChatInputGroupAddon>\n\t\t\t\t\t</ChatInput>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Sidebar>\n\t);\n}\n",
			"type": "registry:component"
		}
	],
	"envVars": {
		"OPENAI_API_KEY": ""
	},
	"docs": "Get an OpenAI API key from https://platform.openai.com/ and add it to the environment variables file and run the dev server. \n\nLearn more about how to use the Vercel AI SDK https://ai-sdk.dev/docs/introduction.",
	"categories": ["chat"]
}