{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "chat-message-demo",
	"type": "registry:example",
	"files": [
		{
			"path": "./src/registry/examples/chat-message-demo.tsx",
			"content": "\"use client\";\n\nimport type { UIMessage } from \"@ai-sdk/react\";\nimport { Copy, ThumbsUp } from \"lucide-react\";\nimport {\n\tChatMessage,\n\tChatMessageAction,\n\tChatMessageActions,\n\tChatMessageAuthor,\n\tChatMessageAvatar,\n\tChatMessageAvatarFallback,\n\tChatMessageAvatarImage,\n\tChatMessageContainer,\n\tChatMessageContent,\n\tChatMessageHeader,\n\tChatMessageMarkdown,\n\tChatMessageThread,\n\tChatMessageThreadAction,\n\tChatMessageThreadReplyCount,\n\tChatMessageThreadTimestamp,\n\tChatMessageTimestamp,\n} from \"@/registry/ui/chat-message\";\n\nconst messages: UIMessage<{\n\tmember: {\n\t\timage: string;\n\t\tname: string;\n\t};\n\tthreadData?: {\n\t\tmessageCount: number;\n\t\tlastReply: Date;\n\t\tmember: {\n\t\t\timage: string;\n\t\t\tname: string;\n\t\t};\n\t};\n}>[] = [\n\t{\n\t\tid: \"1\",\n\t\tparts: [\n\t\t\t{\n\t\t\t\ttype: \"text\",\n\t\t\t\ttext: \"Can you implement the new user authentication feature?\",\n\t\t\t},\n\t\t],\n\t\trole: \"user\",\n\t\tmetadata: {\n\t\t\tmember: {\n\t\t\t\timage: \"/avatar-1.png\",\n\t\t\t\tname: \"Pedro\",\n\t\t\t},\n\t\t},\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: \"Sure, I'll work on implementing the user authentication feature. I'll respond on the thread with updates as I progress.\",\n\t\t\t},\n\t\t],\n\t\trole: \"assistant\",\n\t\tmetadata: {\n\t\t\tmember: {\n\t\t\t\timage: \"/avatar-2.png\",\n\t\t\t\tname: \"Project Assistant\",\n\t\t\t},\n\t\t\tthreadData: {\n\t\t\t\tmessageCount: 3,\n\t\t\t\tlastReply: new Date(),\n\t\t\t\tmember: {\n\t\t\t\t\timage: \"/avatar-1.png\",\n\t\t\t\t\tname: \"Pedro\",\n\t\t\t\t},\n\t\t\t},\n\t\t},\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: \"What's the progress on the other task?\",\n\t\t\t},\n\t\t],\n\t\trole: \"user\",\n\t\tmetadata: {\n\t\t\tmember: {\n\t\t\t\timage: \"/avatar-1.png\",\n\t\t\t\tname: \"Pedro\",\n\t\t\t},\n\t\t},\n\t},\n];\n\nexport default function ChatMessageDemo() {\n\treturn (\n\t\t<div className=\"w-full max-h-[400px] overflow-y-auto\">\n\t\t\t{messages.map((message) => (\n\t\t\t\t<ChatMessage key={message.id}>\n\t\t\t\t\t<ChatMessageActions>\n\t\t\t\t\t\t<ChatMessageAction label=\"Copy\">\n\t\t\t\t\t\t\t<Copy className=\"size-4\" />\n\t\t\t\t\t\t</ChatMessageAction>\n\t\t\t\t\t\t<ChatMessageAction label=\"Like\">\n\t\t\t\t\t\t\t<ThumbsUp className=\"size-4\" />\n\t\t\t\t\t\t</ChatMessageAction>\n\t\t\t\t\t</ChatMessageActions>\n\n\t\t\t\t\t<ChatMessageAvatar>\n\t\t\t\t\t\t<ChatMessageAvatarImage\n\t\t\t\t\t\t\tsrc={message.metadata?.member.image}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ChatMessageAvatarFallback>\n\t\t\t\t\t\t\t{message.metadata?.member.name\n\t\t\t\t\t\t\t\t.charAt(0)\n\t\t\t\t\t\t\t\t.toUpperCase()}\n\t\t\t\t\t\t</ChatMessageAvatarFallback>\n\t\t\t\t\t</ChatMessageAvatar>\n\n\t\t\t\t\t<ChatMessageContainer>\n\t\t\t\t\t\t<ChatMessageHeader>\n\t\t\t\t\t\t\t<ChatMessageAuthor>\n\t\t\t\t\t\t\t\t{message.metadata?.member.name}\n\t\t\t\t\t\t\t</ChatMessageAuthor>\n\t\t\t\t\t\t\t<ChatMessageTimestamp createdAt={new Date()} />\n\t\t\t\t\t\t</ChatMessageHeader>\n\n\t\t\t\t\t\t<ChatMessageContent>\n\t\t\t\t\t\t\t{message.parts\n\t\t\t\t\t\t\t\t.filter((part) => part.type === \"text\")\n\t\t\t\t\t\t\t\t.map((part) => (\n\t\t\t\t\t\t\t\t\t<ChatMessageMarkdown\n\t\t\t\t\t\t\t\t\t\tkey={part.type}\n\t\t\t\t\t\t\t\t\t\tcontent={part.text}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</ChatMessageContent>\n\n\t\t\t\t\t\t{message.metadata?.threadData && (\n\t\t\t\t\t\t\t<ChatMessageThread>\n\t\t\t\t\t\t\t\t<ChatMessageAvatar>\n\t\t\t\t\t\t\t\t\t<ChatMessageAvatarImage\n\t\t\t\t\t\t\t\t\t\tsrc={\n\t\t\t\t\t\t\t\t\t\t\tmessage.metadata?.threadData.member\n\t\t\t\t\t\t\t\t\t\t\t\t.image\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<ChatMessageAvatarFallback>\n\t\t\t\t\t\t\t\t\t\t{message.metadata?.threadData.member.name\n\t\t\t\t\t\t\t\t\t\t\t.charAt(0)\n\t\t\t\t\t\t\t\t\t\t\t.toUpperCase()}\n\t\t\t\t\t\t\t\t\t</ChatMessageAvatarFallback>\n\t\t\t\t\t\t\t\t</ChatMessageAvatar>\n\t\t\t\t\t\t\t\t<ChatMessageThreadReplyCount>\n\t\t\t\t\t\t\t\t\t{message.metadata.threadData.messageCount}{\" \"}\n\t\t\t\t\t\t\t\t\treplies\n\t\t\t\t\t\t\t\t</ChatMessageThreadReplyCount>\n\t\t\t\t\t\t\t\t<ChatMessageThreadTimestamp\n\t\t\t\t\t\t\t\t\tdate={message.metadata.threadData.lastReply}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<ChatMessageThreadAction />\n\t\t\t\t\t\t\t</ChatMessageThread>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ChatMessageContainer>\n\t\t\t\t</ChatMessage>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n",
			"type": "registry:example"
		}
	]
}