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.
42 lines
1.0 KiB
TypeScript
42 lines
1.0 KiB
TypeScript
import { Card, Textarea } from "@mantine/core";
|
|
import { useState } from "react";
|
|
import { useTRPC } from "../../trpc/client";
|
|
|
|
export default function ChatPage() {
|
|
const [inputMessage, setInputMessage] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
const [outputMessage, setOutputMessage] = useState("");
|
|
const trpc = useTRPC();
|
|
|
|
async function handleSendMessage() {
|
|
setLoading(true);
|
|
const response = await trpc.chat.streamMessage.subscribe(
|
|
{
|
|
message: inputMessage,
|
|
},
|
|
{}
|
|
);
|
|
for await (const chunk of response) {
|
|
setOutputMessage(chunk);
|
|
}
|
|
setLoading(false);
|
|
}
|
|
return (
|
|
<div>
|
|
<Card>{outputMessage}</Card>
|
|
<Textarea
|
|
resize="vertical"
|
|
placeholder="Type your message here..."
|
|
value={inputMessage}
|
|
disabled={loading}
|
|
onChange={(e) => setInputMessage(e.target.value)}
|
|
onKeyDown={async (e) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|