Chat

1'use client';
2
3import { Chat, type ChatMessage } from '@/components/ui/chat';
4
5const THREAD: ChatMessage[] = [
6  {
7    id: 'u1',
8    role: 'user',
9    parts: [{ type: 'text', text: 'How do I show a tool call inside a message?' }],
10  },
11  {
12    id: 'a1',
13    role: 'assistant',
14    parts: [
15      { type: 'reasoning', text: 'The question is about rendering, not about running the tool.' },
16      {
17        type: 'text',
18        text: 'Use Tool. It folds the call into a card with its status, and opens to show the input and the output.',
19      },
20      {
21        type: 'code',
22        language: 'tsx',
23        code: `<Tool status="complete">
24  <Tool.Header name="get_projects" />
25  <Tool.Content>
26    <Tool.Input value={{ locale: 'en' }} />
27    <Tool.Output value={projects} />
28  </Tool.Content>
29</Tool>`,
30      },
31    ],
32  },
33  { id: 'u2', role: 'user', parts: [{ type: 'text', text: 'Show me one with real data.' }] },
34  {
35    id: 'a2',
36    role: 'assistant',
37    parts: [
38      {
39        type: 'tool',
40        name: 'get_projects',
41        status: 'complete',
42        input: { locale: 'en', limit: 2 },
43        output: [
44          { slug: 'nachui', title: 'NachUI' },
45          { slug: 'portfolio', title: 'ignaciofigueroa.dev' },
46        ],
47      },
48      { type: 'text', text: 'Two projects came back. The card above is the call itself.' },
49      {
50        type: 'sources',
51        items: [
52          { href: 'https://nachui.tech/docs/elements/ai/tool', title: 'Tool · NachUI' },
53          {
54            href: 'https://ai-sdk.dev/docs/ai-sdk-ui/chatbot-tool-usage',
55            title: 'Chatbot tool usage',
56          },
57        ],
58      },
59    ],
60  },
61];
62
63export function Default() {
64  return (
65    <div className="border-border h-[28rem] w-full max-w-2xl overflow-hidden rounded-xl border">
66      <Chat
67        messages={THREAD}
68        onSend={() => {}}
69        onRetry={() => {}}
70        onFeedback={() => {}}
71        suggestions={['What is NachUI?', 'Show me the composer']}
72      />
73    </div>
74  );
75}

1'use client';
2
3import { useEffect, useRef, useState } from 'react';
4import { Chat, type ChatMessage, type ChatStatus } from '@/components/ui/chat';
5
6const REPLY =
7  'Every element in this thread is one you can install on its own. The chat only decides the order they sit in, and hands each one the part of the message it knows how to draw.';
8
9export function Streaming() {
10  const [messages, setMessages] = useState<ChatMessage[]>([]);
11  const [status, setStatus] = useState<ChatStatus>('ready');
12  const timer = useRef<ReturnType<typeof setInterval> | null>(null);
13
14  const stop = () => {
15    if (timer.current) clearInterval(timer.current);
16    timer.current = null;
17    setStatus('ready');
18  };
19
20  useEffect(() => stop, []);
21
22  const send = ({ text }: { text: string }) => {
23    const id = String(Date.now());
24    setMessages((previous) => [
25      ...previous,
26      { id: `u-${id}`, role: 'user', parts: [{ type: 'text', text }] },
27    ]);
28    setStatus('submitted');
29
30    const words = REPLY.split(' ');
31    let count = 0;
32
33    setTimeout(() => {
34      setStatus('streaming');
35      setMessages((previous) => [
36        ...previous,
37        { id: `a-${id}`, role: 'assistant', parts: [{ type: 'text', text: '' }] },
38      ]);
39      timer.current = setInterval(() => {
40        count += 1;
41        const text = words.slice(0, count).join(' ');
42        setMessages((previous) =>
43          previous.map((message) =>
44            message.id === `a-${id}` ? { ...message, parts: [{ type: 'text', text }] } : message,
45          ),
46        );
47        if (count >= words.length) stop();
48      }, 60);
49    }, 700);
50  };
51
52  return (
53    <div className="border-border h-[26rem] w-full max-w-2xl overflow-hidden rounded-xl border">
54      <Chat
55        messages={messages}
56        status={status}
57        onSend={send}
58        onStop={stop}
59        suggestions={['What makes this a hybrid?', 'Send anything to see it stream']}
60      />
61    </div>
62  );
63}