chat-message-area-demo-streaming

1"use client";
2 
3import type { UIMessage } from "@ai-sdk/react";
4import { useEffect, useState } from "react";
5import { Button } from "@/components/ui/button";
6import {
7	ChatMessage,
8	ChatMessageAuthor,
9	ChatMessageAvatar,
10	ChatMessageAvatarFallback,
11	ChatMessageAvatarImage,
12	ChatMessageContainer,
13	ChatMessageContent,
14	ChatMessageHeader,
15	ChatMessageMarkdown,
16	ChatMessageTimestamp,
17} from "@/registry/ui/chat-message";
18import {
19	ChatMessageArea,
20	ChatMessageAreaContent,
21	ChatMessageAreaScrollButton,
22} from "@/registry/ui/chat-message-area";
23 
24const userMessage: UIMessage<{
25	member: {
26		image: string;
27		name: string;
28	};
29}> = {
30	id: "1",
31	parts: [
32		{
33			type: "text",
34			text: "Can you tell me a magical story?",
35		},
36	],
37	role: "user",
38	metadata: {
39		member: {
40			image: "/avatar-1.png",
41			name: "You",
42		},
43	},
44};
45 
46const STORY = `# The Tale of the Enchanted Forest
47 
48Deep in a mystical realm, there lay an ancient forest that held secrets beyond imagination. The trees here weren't mere plants; they were the keepers of ancient wisdom, their leaves whispering tales of ages past.
49 
50## The Guardian's Call
51 
52In this magical place lived a young spirit named Aria, chosen by the forest itself to be its guardian. Her hair flowed like silver moonlight, and her eyes held the depth of ancient pools.
53 
54### The First Challenge
55 
56* One morning, Aria discovered that something was amiss
57* The usually vibrant crystal flowers had begun to fade
58* The ancient whispers of the trees grew fainter
59* A shadow crept through the undergrowth
60 
61## The Journey Begins
62 
63Aria knew she had to act quickly. She gathered:
641. Dewdrops from spider webs at dawn
652. Starlight captured in moonflower petals
663. Songs of the morning birds
674. Tears of the evening mist
68 
69> "In the heart of every forest lies a truth waiting to be discovered" - Ancient Forest Proverb
70 
71### The Discovery
72 
73As Aria ventured deeper into the forest's heart, she found an ancient clearing. Here, the very air seemed to pulse with magic. Crystal formations emerged from the earth like frozen rainbows, each one containing memories of the forest's past.
74 
75## The Ancient Guardians
76 
77In her quest, Aria encountered the spirits of previous guardians:
78 
79* The Flame Keeper, whose torch lit the darkest paths
80* The Wind Whisperer, who knew the language of storms
81* The Earth Mother, who could heal the land with a touch
82* The Star Walker, who mapped the celestial dance
83 
84Each spirit shared their wisdom:
85 
861. "Change is the only constant in nature"
87// … truncated