chat-input-demo-simple

1"use client";
2 
3import { useState } from "react";
4import { toast } from "sonner";
5import {
6	ChatInput,
7	ChatInputEditor,
8	ChatInputGroupAddon,
9	ChatInputSubmitButton,
10	useChatInput,
11} from "@/registry/ui/chat-input";
12 
13export default function ChatInputDemo() {
14	const [isLoading, setIsLoading] = useState(false);
15 
16	const { value, onChange, handleSubmit } = useChatInput({
17		onSubmit: (parsed) => {
18			setIsLoading(true);
19			toast(parsed.content);
20			setTimeout(() => setIsLoading(false), 1000);
21		},
22	});
23 
24	return (
25		<div className="w-full h-full flex justify-center items-center">
26			<div className="w-full max-w-md">
27				<ChatInput
28					onSubmit={handleSubmit}
29					value={value}
30					onChange={onChange}
31					isStreaming={isLoading}
32					onStop={() => setIsLoading(false)}
33				>
34					<ChatInputEditor placeholder="Type a message..." />
35					<ChatInputGroupAddon align="block-end">
36						<ChatInputSubmitButton className="ml-auto" />
37					</ChatInputGroupAddon>
38				</ChatInput>
39			</div>
40		</div>
41	);
42}