chat-message-demo-avatar-image

1"use client";
2 
3import type { UIMessage } from "@ai-sdk/react";
4import {
5	ChatMessage,
6	ChatMessageAuthor,
7	ChatMessageAvatar,
8	ChatMessageAvatarImage,
9	ChatMessageContainer,
10	ChatMessageContent,
11	ChatMessageHeader,
12	ChatMessageMarkdown,
13	ChatMessageTimestamp,
14} from "@/registry/ui/chat-message";
15 
16const messages: UIMessage<{
17	avatarImage: string;
18}>[] = [
19	{
20		id: "1",
21		parts: [
22			{
23				type: "text",
24				text: "Hi there! This is a user message with an avatar image.",
25			},
26		],
27		role: "user",
28		metadata: {
29			avatarImage: "/avatar-1.png",
30		},
31	},
32	{
33		id: "2",
34		parts: [
35			{
36				type: "text",
37				text: "And this is an assistant message with its own avatar image.",
38			},
39		],
40		role: "assistant",
41		metadata: {
42			avatarImage: "/avatar-2.png",
43		},
44	},
45	{
46		id: "3",
47		parts: [
48			{
49				type: "text",
50				text: "Great! Avatar images are displaying properly.",
51			},
52		],
53		role: "user",
54		metadata: {
55			avatarImage: "/avatar-1.png",
56		},
57	},
58];
59 
60export default function ChatMessageDemoAvatarImage() {
61	return (
62		<div className="w-full max-h-[400px] overflow-y-auto">
63			{messages.map((message) => (
64				<ChatMessage key={message.id}>
65					<ChatMessageAvatar>
66						<ChatMessageAvatarImage
67							src={message.metadata?.avatarImage}
68							alt="Avatar"
69						/>
70					</ChatMessageAvatar>
71 
72					<ChatMessageContainer>
73						<ChatMessageHeader>
74							<ChatMessageAuthor>
75								{message.role === "user" ? "You" : "Assistant"}
76							</ChatMessageAuthor>
77							<ChatMessageTimestamp createdAt={new Date()} />
78						</ChatMessageHeader>
79						<ChatMessageContent>
80							{message.parts
81								.filter((part) => part.type === "text")
82								.map((part) => (
83									<ChatMessageMarkdown
84										key={part.type}
85										content={part.text}
86									/>
87								))}
88						</ChatMessageContent>
89					</ChatMessageContainer>
90				</ChatMessage>
91			))}
92		</div>
93	);
94}