react_usechat_hook_streaming_chat_interface_component.ts

1'use client';
2
3import { useChat } from 'ai/react';
4
5export default function Chat() {
6  const { messages, input, handleInputChange, handleSubmit } = useChat();
7
8  return (
9    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
10      {messages.map(m => (
11        <div key={m.id} className="whitespace-pre-wrap">
12          {m.role === 'user' ? 'User: ' : 'AI: '}
13          {m.content}
14        </div>
15      ))}
16
17      <form onSubmit={handleSubmit}>
18        <input
19          className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
20          value={input}
21          placeholder="Say something..."
22          onChange={handleInputChange}
23        />
24      </form>
25    </div>
26  );
27}