chat-input-with-addons

1"use client";
2 
3import { PlusIcon } from "lucide-react";
4import { Separator } from "@/components/ui/separator";
5import {
6	ChatInput,
7	ChatInputEditor,
8	ChatInputGroupAddon,
9	ChatInputGroupButton,
10	ChatInputGroupText,
11	ChatInputSubmitButton,
12	useChatInput,
13} from "@/registry/ui/chat-input";
14 
15export default function ChatInputWithAddons() {
16	const { value, onChange, handleSubmit } = useChatInput({
17		onSubmit: (parsed) => {
18			console.log("Submitted:", parsed.content);
19		},
20	});
21 
22	return (
23		<div className="w-full h-full flex justify-center items-center">
24			<div className="w-full max-w-md">
25				<ChatInput
26					onSubmit={handleSubmit}
27					value={value}
28					onChange={onChange}
29				>
30					<ChatInputEditor placeholder="Type a message..." />
31					<ChatInputGroupAddon align="block-end">
32						<ChatInputGroupButton
33							variant="outline"
34							className="rounded-full"
35							size="icon-sm"
36						>
37							<PlusIcon />
38						</ChatInputGroupButton>
39						<ChatInputGroupText className="ml-auto">
40							52% used
41						</ChatInputGroupText>
42						<Separator orientation="vertical" className="h-6!" />
43						<ChatInputSubmitButton />
44					</ChatInputGroupAddon>
45				</ChatInput>
46			</div>
47		</div>
48	);
49}