You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import { createFileRoute } from "@tanstack/react-router";
|
|
import { useChat } from "@ai-sdk/react";
|
|
|
|
export const Route = createFileRoute("/chat")({
|
|
component: Chat,
|
|
});
|
|
|
|
function Chat() {
|
|
const { messages, input, handleInputChange, handleSubmit } =
|
|
useChat(/*{
|
|
api: "http://localhost:8787/api/chat",
|
|
}*/);
|
|
return (
|
|
<div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
|
|
{messages.map((message) => (
|
|
<div key={message.id} className="whitespace-pre-wrap">
|
|
{message.role === "user" ? "User: " : "AI: "}
|
|
{message.parts.map((part, i) => {
|
|
switch (part.type) {
|
|
case "text":
|
|
return <div key={`${message.id}-${i}`}>{part.text}</div>;
|
|
}
|
|
})}
|
|
</div>
|
|
))}
|
|
|
|
<form onSubmit={handleSubmit}>
|
|
<input
|
|
className="fixed dark:bg-zinc-900 bottom-0 w-full max-w-md p-2 mb-8 border border-zinc-300 dark:border-zinc-800 rounded shadow-xl"
|
|
value={input}
|
|
placeholder="Say something..."
|
|
onChange={handleInputChange}
|
|
/>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|