Chat Input Box

1import {
2  PaperclipIcon,
3  CircleDashedIcon,
4  SparklesIcon,
5  ChevronDownIcon,
6  CheckIcon,
7} from "lucide-react";
8import { Button } from "@/components/ui/button";
9import { Textarea } from "@/components/ui/textarea";
10import { Logo } from "@/components/ui/logo";
11import {
12  DropdownMenu,
13  DropdownMenuContent,
14  DropdownMenuItem,
15  DropdownMenuTrigger,
16} from "@/components/ui/dropdown-menu";
17 
18const aiModels = [
19  { id: "square-3", label: "Square AI 3.0", icon: SparklesIcon },
20  { id: "square-turbo", label: "Square AI Turbo", icon: SparklesIcon },
21  { id: "square-pro", label: "Square AI Pro", icon: SparklesIcon },
22  { id: "square-ultra", label: "Square AI Ultra", icon: SparklesIcon },
23];
24 
25interface ChatInputBoxProps {
26  message: string;
27  onMessageChange: (value: string) => void;
28  onSend: () => void;
29  selectedModel: string;
30  onModelChange: (modelId: string) => void;
31  showTools?: boolean;
32  placeholder?: string;
33}
34 
35export function ChatInputBox({
36  message,
37  onMessageChange,
38  onSend,
39  selectedModel,
40  onModelChange,
41  showTools = true,
42  placeholder = "Ask anything...",
43}: ChatInputBoxProps) {
44  return (
45    <div className="rounded-2xl border border-border bg-secondary dark:bg-card p-1">
46      <div className="rounded-xl border border-border dark:border-transparent bg-card dark:bg-secondary">
47        <Textarea
48          placeholder={placeholder}
49          value={message}
50          onChange={(e) => onMessageChange(e.target.value)}
51          className="min-h-[120px] resize-none border-0 bg-transparent px-4 py-3 text-base placeholder:text-muted-foreground/60 focus-visible:ring-0 focus-visible:ring-offset-0"
52          onKeyDown={(e) => {
53            if (e.key === "Enter" && !e.shiftKey) {
54              e.preventDefault();
55              onSend();
56            }
57          }}
58        />
59 
60        <div className="flex items-center justify-between px-4 py-3 border-t border-border/50">
61          <div className="flex items-center gap-2">
62            <Button
63              variant="ghost"
64              size="icon-sm"
65              className="size-7 rounded-full border border-border dark:border-input bg-card dark:bg-secondary hover:bg-accent"
66            >
67              <PaperclipIcon className="size-4 text-muted-foreground" />
68            </Button>
69            {showTools && (
70              <>
71                <Button
72                  variant="ghost"
73                  size="sm"
74// … truncated