134 lines
3.8 KiB
TypeScript
134 lines
3.8 KiB
TypeScript
/**
|
|
* AI SDK UI - Basic Chat Component (v5)
|
|
*
|
|
* Demonstrates:
|
|
* - useChat hook with v5 manual input management
|
|
* - Streaming chat messages
|
|
* - Loading states
|
|
* - Error handling
|
|
* - Auto-scroll to latest message
|
|
*
|
|
* CRITICAL v5 Change: useChat NO LONGER manages input state!
|
|
* You must manually manage input with useState.
|
|
*
|
|
* Usage:
|
|
* 1. Copy this component to your app
|
|
* 2. Create API route (see nextjs-api-route.ts)
|
|
* 3. Customize styling as needed
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import { useChat } from 'ai/react';
|
|
import { useState, FormEvent, useRef, useEffect } from 'react';
|
|
|
|
export default function ChatBasic() {
|
|
// useChat hook - v5 style
|
|
const { messages, sendMessage, isLoading, error, stop } = useChat({
|
|
api: '/api/chat',
|
|
});
|
|
|
|
// Manual input management (v5 requires this!)
|
|
const [input, setInput] = useState('');
|
|
|
|
// Auto-scroll to bottom
|
|
const messagesEndRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
|
}, [messages]);
|
|
|
|
// Handle form submission
|
|
const handleSubmit = (e: FormEvent) => {
|
|
e.preventDefault();
|
|
if (!input.trim()) return;
|
|
|
|
// v5: Use sendMessage instead of append
|
|
sendMessage({ content: input });
|
|
setInput('');
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col h-screen max-w-2xl mx-auto">
|
|
{/* Header */}
|
|
<div className="p-4 border-b">
|
|
<h1 className="text-2xl font-bold">AI Chat</h1>
|
|
</div>
|
|
|
|
{/* Messages */}
|
|
<div className="flex-1 overflow-y-auto p-4 space-y-4">
|
|
{messages.map((message) => (
|
|
<div
|
|
key={message.id}
|
|
className={`flex ${
|
|
message.role === 'user' ? 'justify-end' : 'justify-start'
|
|
}`}
|
|
>
|
|
<div
|
|
className={`max-w-[70%] p-3 rounded-lg ${
|
|
message.role === 'user'
|
|
? 'bg-blue-500 text-white'
|
|
: 'bg-gray-200 text-gray-900'
|
|
}`}
|
|
>
|
|
{message.content}
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{/* Loading indicator */}
|
|
{isLoading && (
|
|
<div className="flex justify-start">
|
|
<div className="bg-gray-200 p-3 rounded-lg">
|
|
<div className="flex space-x-2">
|
|
<div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce" />
|
|
<div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce delay-100" />
|
|
<div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce delay-200" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div ref={messagesEndRef} />
|
|
</div>
|
|
|
|
{/* Error message */}
|
|
{error && (
|
|
<div className="p-4 bg-red-50 border-t border-red-200 text-red-700">
|
|
<strong>Error:</strong> {error.message}
|
|
</div>
|
|
)}
|
|
|
|
{/* Input */}
|
|
<form onSubmit={handleSubmit} className="p-4 border-t">
|
|
<div className="flex space-x-2">
|
|
<input
|
|
value={input}
|
|
onChange={(e) => setInput(e.target.value)}
|
|
placeholder="Type a message..."
|
|
disabled={isLoading}
|
|
className="flex-1 p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100"
|
|
/>
|
|
{isLoading ? (
|
|
<button
|
|
type="button"
|
|
onClick={stop}
|
|
className="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600"
|
|
>
|
|
Stop
|
|
</button>
|
|
) : (
|
|
<button
|
|
type="submit"
|
|
disabled={!input.trim()}
|
|
className="px-4 py-2 bg-blue-500 text-white rounded-lg disabled:bg-gray-300 disabled:cursor-not-allowed hover:bg-blue-600"
|
|
>
|
|
Send
|
|
</button>
|
|
)}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|