{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "chat-03",
	"type": "registry:block",
	"description": "A chat in a popover.",
	"dependencies": ["ai", "@ai-sdk/openai"],
	"registryDependencies": [
		"popover",
		"button",
		"@simple-ai/chat-input",
		"@simple-ai/chat-message-area",
		"@simple-ai/chat-message"
	],
	"files": [
		{
			"path": "./src/registry/blocks/chat-03/page.tsx",
			"content": "\"use client\";\n\nimport { X } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Chat } from \"@/registry/blocks/chat-03/components/chat\";\n\nexport default function Page() {\n\tconst [open, setOpen] = useState(true);\n\n\treturn (\n\t\t<div className=\"h-screen flex items-center justify-center\">\n\t\t\t<Button size=\"lg\" onClick={() => setOpen(true)}>\n\t\t\t\tOpen Chat\n\t\t\t</Button>\n\t\t\t<div className=\"fixed bottom-4 right-4 z-50 flex flex-col items-end gap-4\">\n\t\t\t\t{open && (\n\t\t\t\t\t<div className=\"w-[400px] h-[600px] bg-background border rounded-lg shadow-lg flex flex-col overflow-hidden\">\n\t\t\t\t\t\t<div className=\"flex items-center justify-between p-4 border-b\">\n\t\t\t\t\t\t\t<h4 className=\"font-semibold\">Chat</h4>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\tonClick={() => setOpen(false)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span className=\"sr-only\">Close chat</span>\n\t\t\t\t\t\t\t\t<X />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<Chat />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
			"type": "registry:page",
			"target": "app/chat/page.tsx"
		},
		{
			"path": "./src/registry/blocks/chat-03/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-03/components/chat.tsx",
			"content": "\"use client\";\n\nimport { useChat } from \"@ai-sdk/react\";\nimport { DefaultChatTransport, type UIMessage } from \"ai\";\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: \"Hello! Welcome to our customer support. How can I assist you today?\",\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: \"Hi, I received my order yesterday but the size of the shirt is too small. I'd like to exchange it for a larger size.\",\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: \"I'm sorry to hear that the size didn't work out. I'll be happy to help you with the exchange. Could you please provide your order number? You can find it in your confirmation email.\",\n\t\t\t},\n\t\t],\n\t\trole: \"assistant\",\n\t},\n];\n\nexport function Chat() {\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<div className=\"flex flex-col h-full overflow-y-auto\">\n\t\t\t<ChatMessageArea>\n\t\t\t\t<ChatMessageAreaContent>\n\t\t\t\t\t{messages.map((message) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<ChatMessage key={message.id}>\n\t\t\t\t\t\t\t\t<ChatMessageAvatar>\n\t\t\t\t\t\t\t\t\t{message.role === \"user\" ? (\n\t\t\t\t\t\t\t\t\t\t<ChatMessageAvatarUserIcon />\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<ChatMessageAvatarAssistantIcon />\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</ChatMessageAvatar>\n\n\t\t\t\t\t\t\t\t<ChatMessageContainer>\n\t\t\t\t\t\t\t\t\t<ChatMessageHeader>\n\t\t\t\t\t\t\t\t\t\t<ChatMessageAuthor>\n\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? \"You\"\n\t\t\t\t\t\t\t\t\t\t\t\t: \"Assistant\"}\n\t\t\t\t\t\t\t\t\t\t</ChatMessageAuthor>\n\t\t\t\t\t\t\t\t\t\t<ChatMessageTimestamp\n\t\t\t\t\t\t\t\t\t\t\tcreatedAt={new Date()}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</ChatMessageHeader>\n\t\t\t\t\t\t\t\t\t<ChatMessageContent>\n\t\t\t\t\t\t\t\t\t\t{message.parts\n\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(part) => part.type === \"text\",\n\t\t\t\t\t\t\t\t\t\t\t)\n\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<ChatMessageMarkdown\n\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\tcontent={part.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))}\n\t\t\t\t\t\t\t\t\t</ChatMessageContent>\n\t\t\t\t\t\t\t\t</ChatMessageContainer>\n\t\t\t\t\t\t\t</ChatMessage>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ChatMessageAreaContent>\n\t\t\t\t<ChatMessageAreaScrollButton />\n\t\t\t</ChatMessageArea>\n\t\t\t<div className=\"px-2 py-2 border-t\">\n\t\t\t\t<ChatInput\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tonChange={onChange}\n\t\t\t\t\tonSubmit={handleSubmit}\n\t\t\t\t\tisStreaming={isLoading}\n\t\t\t\t\tonStop={stop}\n\t\t\t\t>\n\t\t\t\t\t<ChatInputEditor placeholder=\"Type a message...\" />\n\t\t\t\t\t<ChatInputGroupAddon align=\"block-end\">\n\t\t\t\t\t\t<ChatInputSubmitButton className=\"ml-auto\" />\n\t\t\t\t\t</ChatInputGroupAddon>\n\t\t\t\t</ChatInput>\n\t\t\t</div>\n\t\t</div>\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"]
}