chat-message-area-demo-alignment

1"use client";
2 
3import type { UIMessage } from "@ai-sdk/react";
4import {
5	ChatMessage,
6	ChatMessageAuthor,
7	ChatMessageAvatar,
8	ChatMessageAvatarFallback,
9	ChatMessageAvatarImage,
10	ChatMessageContainer,
11	ChatMessageContent,
12	ChatMessageHeader,
13	ChatMessageMarkdown,
14	ChatMessageTimestamp,
15} from "@/registry/ui/chat-message";
16import {
17	ChatMessageArea,
18	ChatMessageAreaContent,
19	ChatMessageAreaScrollButton,
20} from "@/registry/ui/chat-message-area";
21 
22const messages: UIMessage<{
23	member: {
24		image: string;
25		name: string;
26	};
27}>[] = [
28	{
29		id: "1",
30		parts: [
31			{
32				type: "text",
33				text: "Can you tell me a story? Maybe something about a magical forest?",
34			},
35		],
36		role: "user",
37		metadata: {
38			member: {
39				image: "/avatar-1.png",
40				name: "You",
41			},
42		},
43	},
44	{
45		id: "2",
46		parts: [
47			{
48				type: "text",
49				text: "Of course! I'd love to tell you a story about the Whispering Woods. Would you like to hear it?",
50			},
51		],
52		role: "assistant",
53		metadata: {
54			member: {
55				image: "/avatar-2.png",
56				name: "Assistant",
57			},
58		},
59	},
60	{
61		id: "3",
62		parts: [
63			{
64				type: "text",
65				text: "Yes, please! I'm excited to hear it!",
66			},
67		],
68		role: "user",
69		metadata: {
70			member: {
71				image: "/avatar-1.png",
72				name: "You",
73			},
74		},
75	},
76	{
77		id: "4",
78		parts: [
79			{
80				type: "text",
81				text: "Deep in the heart of the Whispering Woods, there lived a young fox named Luna with fur as silver as moonlight. Unlike other foxes, Luna had the magical ability to speak with the ancient trees that surrounded her home.",
82			},
83		],
84		role: "assistant",
85		metadata: {
86			member: {
87				image: "/avatar-2.png",
88				name: "Assistant",
89			},
90		},
91	},
92	{
93		id: "5",
94		parts: [
95			{
96				type: "text",
97				text: "One day, Luna discovered that the oldest tree in the forest had fallen silent. This was very unusual, as this particular oak tree loved telling stories about the forest's history. Concerned, Luna decided to investigate.",
98			},
99		],
100		role: "assistant",
101		metadata: {
102			member: {
103				image: "/avatar-2.png",
104				name: "Assistant",
105			},
106		},
107	},
108	{
109		id: "6",
110		parts: [
111			{
112				type: "text",
113				text: "Oh no! What happened to the old oak tree?",
114			},
115		],
116		role: "user",
117		metadata: {
118			member: {
119				image: "/avatar-1.png",
120				name: "You",
121			},
122		},
123	},
124	{
125		id: "7",
126		parts: [
127			{
128				type: "text",
129// … truncated