tool-invocation-demo-loading

1"use client";
2 
3import type { UIMessage } from "@ai-sdk/react";
4import type { InferUITools } from "ai";
5import { tool } from "ai";
6import z from "zod";
7import {
8	ChatMessage,
9	ChatMessageAuthor,
10	ChatMessageAvatar,
11	ChatMessageAvatarFallback,
12	ChatMessageAvatarImage,
13	ChatMessageContainer,
14	ChatMessageContent,
15	ChatMessageHeader,
16	ChatMessageMarkdown,
17	ChatMessageTimestamp,
18} from "@/registry/ui/chat-message";
19import {
20	ChatMessageArea,
21	ChatMessageAreaContent,
22	ChatMessageAreaScrollButton,
23} from "@/registry/ui/chat-message-area";
24import {
25	ToolInvocation,
26	ToolInvocationContentCollapsible,
27	ToolInvocationHeader,
28	ToolInvocationName,
29	ToolInvocationRawData,
30} from "@/registry/ui/tool-invocation";
31 
32const searchDatabaseTool = tool({
33	name: "search-database",
34	description: "Search the database for information",
35	inputSchema: z.object({
36		query: z.string(),
37	}),
38	outputSchema: z.string(),
39	execute: () => {
40		return "Result of searching the database";
41	},
42});
43 
44const toolSet = {
45	"search-database": searchDatabaseTool,
46};
47 
48const messages: Array<
49	UIMessage<
50		{
51			member: {
52				image: string;
53				name: string;
54			};
55		},
56		never,
57		InferUITools<typeof toolSet>
58	>
59> = [
60	{
61		id: "1",
62		parts: [
63			{
64				type: "text",
65				text: "Can you search for information about magical forests?",
66			},
67		],
68		role: "user",
69		metadata: {
70			member: {
71				image: "/avatar-1.png",
72				name: "You",
73			},
74		},
75	},
76	{
77		id: "2",
78		parts: [
79			{
80				type: "tool-search-database",
81				toolCallId: "search-tool-1",
82				state: "input-available",
83				input: {
84					query: "magical forest stories",
85				},
86			},
87		],
88		role: "assistant",
89		metadata: {
90			member: {
91				image: "/avatar-2.png",
92				name: "Assistant",
93			},
94		},
95	},
96];
97 
98export default function ToolInvocationDemoLoading() {
99	return (
100		<ChatMessageArea>
101			<ChatMessageAreaContent>
102				{messages.map((message) => (
103					<ChatMessage key={message.id}>
104						<ChatMessageAvatar>
105							<ChatMessageAvatarImage
106								src={message.metadata?.member.image}
107							/>
108							<ChatMessageAvatarFallback>
109								{message.metadata?.member.name
110									.charAt(0)
111									.toUpperCase()}
112							</ChatMessageAvatarFallback>
113						</ChatMessageAvatar>
114 
115						<ChatMessageContainer>
116							<ChatMessageHeader>
117								<ChatMessageAuthor>
118									{message.metadata?.member.name}
119								</ChatMessageAuthor>
120								<ChatMessageTimestamp createdAt={new Date()} />
121							</ChatMessageHeader>
122 
123							<ChatMessageContent>
124// … truncated