Chat Welcome Screen

1import { Button } from "@/components/ui/button";
2import { Logo } from "@/components/ui/logo";
3import { cn } from "@/lib/utils";
4import {
5  ZapIcon,
6  MessageCircleDashedIcon,
7  WandSparklesIcon,
8  BoxIcon,
9} from "lucide-react";
10import { ChatInputBox } from "./chat-input-box";
11 
12const chatModes = [
13  { id: "fast", label: "Fast", icon: ZapIcon },
14  { id: "in-depth", label: "In-depth", icon: MessageCircleDashedIcon },
15  { id: "magic", label: "Magic AI", icon: WandSparklesIcon, pro: true },
16  { id: "holistic", label: "Holistic", icon: BoxIcon },
17];
18 
19interface ChatWelcomeScreenProps {
20  message: string;
21  onMessageChange: (value: string) => void;
22  onSend: () => void;
23  selectedMode: string;
24  onModeChange: (modeId: string) => void;
25  selectedModel: string;
26  onModelChange: (modelId: string) => void;
27}
28 
29export function ChatWelcomeScreen({
30  message,
31  onMessageChange,
32  onSend,
33  selectedMode,
34  onModeChange,
35  selectedModel,
36  onModelChange,
37}: ChatWelcomeScreenProps) {
38  return (
39    <div className="flex h-full flex-col items-center justify-center px-4 md:px-8">
40      <div className="w-full max-w-[640px] space-y-9 -mt-12">
41        <div className="flex justify-center">
42          <div className="flex items-center justify-center size-8 rounded-full">
43            <Logo className="size-20" />
44          </div>
45        </div>
46 
47        <div className="space-y-4 text-center">
48          <h1 className="text-2xl font-semibold tracking-tight">
49            Hey! I&apos;m Square.ai
50          </h1>
51          <p className="text-2xl text-foreground">
52            Tell me everything you need
53          </p>
54        </div>
55 
56        <ChatInputBox
57          message={message}
58          onMessageChange={onMessageChange}
59          onSend={onSend}
60          selectedModel={selectedModel}
61          onModelChange={onModelChange}
62          showTools={true}
63        />
64 
65        <div className="flex flex-wrap items-center justify-center gap-2">
66          {chatModes.map((mode) => (
67            <Button
68              key={mode.id}
69              variant={selectedMode === mode.id ? "secondary" : "ghost"}
70              className={cn("gap-2", selectedMode === mode.id && "bg-accent")}
71              onClick={() => onModeChange(mode.id)}
72            >
73              <mode.icon className="size-4" />
74              <span>{mode.label}</span>
75              {mode.pro && (
76                <span className="rounded bg-primary/10 px-1.5 py-0.5 text-xs font-medium">
77                  Pro
78                </span>
79// … truncated