Template
78 lines
2.0 KiB
TypeScript
78 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import type { ChatStatus } from 'ai';
|
|
import { PlusIcon } from 'lucide-react';
|
|
import {
|
|
PromptInput,
|
|
PromptInputActionAddAttachments,
|
|
PromptInputActionMenu,
|
|
PromptInputActionMenuContent,
|
|
PromptInputActionMenuTrigger,
|
|
PromptInputAttachment,
|
|
PromptInputAttachments,
|
|
PromptInputBody,
|
|
PromptInputFooter,
|
|
PromptInputHeader,
|
|
type PromptInputMessage,
|
|
PromptInputSubmit,
|
|
PromptInputTextarea,
|
|
PromptInputTools,
|
|
} from '@/components/ai-elements/prompt-input';
|
|
|
|
interface ChatInputProps {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
onSubmit: (message: PromptInputMessage) => void;
|
|
status?: ChatStatus;
|
|
placeholder?: string;
|
|
}
|
|
|
|
export function ChatInput({
|
|
value,
|
|
onChange,
|
|
onSubmit,
|
|
status = 'ready',
|
|
placeholder,
|
|
}: ChatInputProps) {
|
|
return (
|
|
<PromptInput
|
|
className="[&_[data-slot=input-group]]:bg-background"
|
|
globalDrop
|
|
multiple
|
|
onSubmit={onSubmit}
|
|
>
|
|
<PromptInputHeader className="pt-1.5 pb-0">
|
|
<PromptInputAttachments className="gap-1.5 px-3 py-0">
|
|
{(attachment) => <PromptInputAttachment data={attachment} />}
|
|
</PromptInputAttachments>
|
|
</PromptInputHeader>
|
|
<PromptInputBody>
|
|
<PromptInputTextarea
|
|
className="min-h-10 py-2"
|
|
onChange={(event) => onChange(event.target.value)}
|
|
placeholder={placeholder}
|
|
value={value}
|
|
/>
|
|
</PromptInputBody>
|
|
<PromptInputFooter className="pt-0 pb-2">
|
|
<PromptInputTools>
|
|
<PromptInputActionMenu>
|
|
<PromptInputActionMenuTrigger>
|
|
<PlusIcon className="size-4" />
|
|
</PromptInputActionMenuTrigger>
|
|
<PromptInputActionMenuContent>
|
|
<PromptInputActionAddAttachments />
|
|
</PromptInputActionMenuContent>
|
|
</PromptInputActionMenu>
|
|
</PromptInputTools>
|
|
<PromptInputSubmit
|
|
disabled={status === 'streaming'}
|
|
status={status}
|
|
/>
|
|
</PromptInputFooter>
|
|
</PromptInput>
|
|
);
|
|
}
|
|
|
|
export type { PromptInputMessage };
|