chat-message-demo-simple

1"use client";
2 
3import type { UIMessage } from "@ai-sdk/react";
4import {
5	ChatMessage,
6	ChatMessageAuthor,
7	ChatMessageAvatar,
8	ChatMessageAvatarAssistantIcon,
9	ChatMessageAvatarUserIcon,
10	ChatMessageContainer,
11	ChatMessageContent,
12	ChatMessageHeader,
13	ChatMessageMarkdown,
14	ChatMessageTimestamp,
15} from "@/registry/ui/chat-message";
16 
17const messages: UIMessage[] = [
18	{
19		id: "1",
20		parts: [
21			{
22				type: "text",
23				text: "Hey, how are you doing today?",
24			},
25		],
26		role: "user",
27	},
28	{
29		id: "2",
30		parts: [
31			{
32				type: "text",
33				text: "I'm doing great! Just working on some projects. How can I help you?",
34			},
35		],
36		role: "assistant",
37	},
38	{
39		id: "3",
40		parts: [
41			{
42				type: "text",
43				text: "I need help with my React application.",
44			},
45		],
46		role: "user",
47	},
48];
49 
50export default function ChatMessageDemoSimple() {
51	return (
52		<div className="w-full max-h-[400px] overflow-y-auto">
53			{messages.map((message) => (
54				<ChatMessage key={message.id}>
55					<ChatMessageAvatar>
56						{message.role === "user" ? (
57							<ChatMessageAvatarUserIcon />
58						) : (
59							<ChatMessageAvatarAssistantIcon />
60						)}
61					</ChatMessageAvatar>
62 
63					<ChatMessageContainer>
64						<ChatMessageHeader>
65							<ChatMessageAuthor>
66								{message.role === "user" ? "You" : "Assistant"}
67							</ChatMessageAuthor>
68							<ChatMessageTimestamp createdAt={new Date()} />
69						</ChatMessageHeader>
70						<ChatMessageContent>
71							{message.parts
72								.filter((part) => part.type === "text")
73								.map((part) => (
74									<ChatMessageMarkdown
75										key={part.type}
76										content={part.text}
77									/>
78								))}
79						</ChatMessageContent>
80					</ChatMessageContainer>
81				</ChatMessage>
82			))}
83		</div>
84	);
85}