22 lines
851 B
TypeScript
22 lines
851 B
TypeScript
"use client";
|
|
import { useChat } from "@ai-sdk/react";
|
|
|
|
export default function Chat() {
|
|
const { messages, input, handleInputChange, handleSubmit } = useChat();
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="space-y-2 max-h-[60vh] overflow-y-auto rounded border p-3">
|
|
{messages.map((m) => (
|
|
<div key={m.id} className={m.role === "user" ? "text-right" : ""}>
|
|
<span className="inline-block rounded-lg bg-zinc-100 px-3 py-2 text-sm">{m.content}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<form onSubmit={handleSubmit} className="flex gap-2">
|
|
<input value={input} onChange={handleInputChange} className="flex-1 rounded border p-2" placeholder="Stel een vraag..." />
|
|
<button className="rounded bg-blue-600 px-4 py-2 text-white">Verstuur</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|