38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import ChatInput from '@/component/chat-input';
|
|
import { UIMessage, useChat } from '@ai-sdk/react';
|
|
import { DefaultChatTransport } from 'ai';
|
|
|
|
export default function Chat({
|
|
id,
|
|
initialMessages,
|
|
}: { id?: string | undefined; initialMessages?: UIMessage[] } = {}) {
|
|
const { status, sendMessage, messages } = useChat({
|
|
id,
|
|
messages: initialMessages,
|
|
transport: new DefaultChatTransport({
|
|
api: '/api/use-chat-persistence-single-message',
|
|
// only send the last message to the server:
|
|
prepareSendMessagesRequest({ messages, id }) {
|
|
return { body: { message: messages[messages.length - 1], id } };
|
|
},
|
|
}),
|
|
});
|
|
|
|
return (
|
|
<div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
|
|
{messages.map(m => (
|
|
<div key={m.id} className="whitespace-pre-wrap">
|
|
{m.role === 'user' ? 'User: ' : 'AI: '}
|
|
{m.parts
|
|
.map(part => (part.type === 'text' ? part.text : ''))
|
|
.join('')}
|
|
</div>
|
|
))}
|
|
|
|
<ChatInput status={status} onSubmit={text => sendMessage({ text })} />
|
|
</div>
|
|
);
|
|
}
|