chat-message-demo

1"use client";
2 
3import type { UIMessage } from "@ai-sdk/react";
4import { Copy, ThumbsUp } from "lucide-react";
5import {
6	ChatMessage,
7	ChatMessageAction,
8	ChatMessageActions,
9	ChatMessageAuthor,
10	ChatMessageAvatar,
11	ChatMessageAvatarFallback,
12	ChatMessageAvatarImage,
13	ChatMessageContainer,
14	ChatMessageContent,
15	ChatMessageHeader,
16	ChatMessageMarkdown,
17	ChatMessageThread,
18	ChatMessageThreadAction,
19	ChatMessageThreadReplyCount,
20	ChatMessageThreadTimestamp,
21	ChatMessageTimestamp,
22} from "@/registry/ui/chat-message";
23 
24const messages: UIMessage<{
25	member: {
26		image: string;
27		name: string;
28	};
29	threadData?: {
30		messageCount: number;
31		lastReply: Date;
32		member: {
33			image: string;
34			name: string;
35		};
36	};
37}>[] = [
38	{
39		id: "1",
40		parts: [
41			{
42				type: "text",
43				text: "Can you implement the new user authentication feature?",
44			},
45		],
46		role: "user",
47		metadata: {
48			member: {
49				image: "/avatar-1.png",
50				name: "Pedro",
51			},
52		},
53	},
54	{
55		id: "2",
56		parts: [
57			{
58				type: "text",
59				text: "Sure, I'll work on implementing the user authentication feature. I'll respond on the thread with updates as I progress.",
60			},
61		],
62		role: "assistant",
63		metadata: {
64			member: {
65				image: "/avatar-2.png",
66				name: "Project Assistant",
67			},
68			threadData: {
69				messageCount: 3,
70				lastReply: new Date(),
71				member: {
72					image: "/avatar-1.png",
73					name: "Pedro",
74				},
75			},
76		},
77	},
78	{
79		id: "3",
80		parts: [
81			{
82				type: "text",
83				text: "What's the progress on the other task?",
84			},
85		],
86		role: "user",
87		metadata: {
88			member: {
89				image: "/avatar-1.png",
90				name: "Pedro",
91			},
92		},
93	},
94];
95 
96export default function ChatMessageDemo() {
97	return (
98		<div className="w-full max-h-[400px] overflow-y-auto">
99			{messages.map((message) => (
100				<ChatMessage key={message.id}>
101					<ChatMessageActions>
102						<ChatMessageAction label="Copy">
103							<Copy className="size-4" />
104						</ChatMessageAction>
105						<ChatMessageAction label="Like">
106							<ThumbsUp className="size-4" />
107						</ChatMessageAction>
108					</ChatMessageActions>
109 
110					<ChatMessageAvatar>
111						<ChatMessageAvatarImage
112							src={message.metadata?.member.image}
113						/>
114						<ChatMessageAvatarFallback>
115							{message.metadata?.member.name
116								.charAt(0)
117								.toUpperCase()}
118						</ChatMessageAvatarFallback>
119					</ChatMessageAvatar>
120 
121					<ChatMessageContainer>
122						<ChatMessageHeader>
123							<ChatMessageAuthor>
124								{message.metadata?.member.name}
125							</ChatMessageAuthor>
126// … truncated