@wealthx/shadcn 1.3.2 → 1.3.4

package/src/components/ui/chat-widget.tsx

@@ -0,0 +1,822 @@
+import React, { useState, useCallback } from "react";
+import {
+  Home,
+  RefreshCw,
+  TrendingUp,
+  Key,
+  CalendarDays,
+  HelpCircle,
+  Lock,
+  Calendar,
+  CheckCircle2,
+  ArrowLeft,
+  ArrowRight,
+  ExternalLink,
+  Video,
+  Phone,
+  MapPin,
+  MessageSquare,
+  User,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Field, FieldLabel, FieldError } from "@/components/ui/field";
+import {
+  ChatWidgetLauncher,
+  ChatWidgetHeader,
+  ChatWidgetMessage,
+  ChatWidgetInputBar,
+  type ChatWidgetMessageRole,
+} from "@/components/ui/chat-widget-primitives";
+
+/**
+ * ChatWidget — WealthX DS (Broker Website Embeddable Chat)
+ *
+ * Two-screen flow:
+ *   Screen 1 — TopicGrid: lead selects a conversation topic
+ *   Screen 2 — Chat: AI conversation based on selected topic
+ *
+ * Exports (atomic order):
+ *   ChatWidgetIntakeForm      — Molecule  — Screen 1 contact form
+ *   ChatWidgetTopicCard       — Molecule  — Single topic option card
+ *   ChatWidgetTopicGrid       — Organism  — Screen 2 topic selection grid
+ *   ChatWidgetInteractiveCard — Molecule  — AI-embedded interactive cards
+ *   ChatWidgetWindow          — Template  — 3-screen container + localStorage cache
+ *   ChatWidget                — Root      — Floating widget with FAB launcher
+ *
+ * Pure display component for story control. Real API wiring done in the app layer.
+ */
+
+// ---------------------------------------------------------------------------
+// Shared types
+// ---------------------------------------------------------------------------
+
+export interface ChatWidgetUser {
+  name: string;
+  phone: string;
+  email: string;
+}
+
+export interface ChatWidgetTopic {
+  id: string;
+  icon: React.ReactNode;
+  label: string;
+  description?: string;
+}
+
+export interface ChatWidgetChatMessage {
+  id: string;
+  role: ChatWidgetMessageRole;
+  content: string;
+  timestamp?: string;
+  isStreaming?: boolean;
+  /** Optional inline interactive card rendered below the message bubble. */
+  interactiveCard?: ChatWidgetInteractiveCardData;
+}
+
+export type ChatWidgetScreen = "intake" | "topics" | "chat" | "booking";
+
+// ---------------------------------------------------------------------------
+// Default topics
+// ---------------------------------------------------------------------------
+
+export const DEFAULT_CHAT_WIDGET_TOPICS: ChatWidgetTopic[] = [
+  {
+    id: "buy_home",
+    icon: <Home className="size-5" />,
+    label: "Buy a Home",
+    description: "Purchase your first or next property",
+  },
+  {
+    id: "refinance",
+    icon: <RefreshCw className="size-5" />,
+    label: "Refinance",
+    description: "Get a better rate on your current loan",
+  },
+  {
+    id: "investment",
+    icon: <TrendingUp className="size-5" />,
+    label: "Investment Property",
+    description: "Grow your property portfolio",
+  },
+  {
+    id: "first_home_buyer",
+    icon: <Key className="size-5" />,
+    label: "First Home Buyer",
+    description: "First home buyer grants & schemes",
+  },
+  {
+    id: "book_meeting",
+    icon: <CalendarDays className="size-5" />,
+    label: "Book a Meeting",
+    description: "Talk directly with an advisor",
+  },
+  {
+    id: "general_question",
+    icon: <HelpCircle className="size-5" />,
+    label: "General Question",
+    description: "Ask anything about home loans",
+  },
+];
+
+// ---------------------------------------------------------------------------
+// ChatWidgetIntakeForm (Molecule — Screen 1)
+// ---------------------------------------------------------------------------
+
+export interface ChatWidgetIntakeFormProps {
+  brokerName?: string;
+  onSubmit: (user: ChatWidgetUser) => void;
+  isSubmitting?: boolean;
+  className?: string;
+}
+
+export function ChatWidgetIntakeForm({
+  brokerName,
+  onSubmit,
+  isSubmitting,
+  className,
+}: ChatWidgetIntakeFormProps) {
+  const [name, setName] = useState("");
+  const [phone, setPhone] = useState("");
+  const [email, setEmail] = useState("");
+  const [errors, setErrors] = useState<
+    Partial<Record<keyof ChatWidgetUser, string>>
+  >({});
+
+  const clearError = (field: keyof ChatWidgetUser) =>
+    setErrors((prev) => ({ ...prev, [field]: undefined }));
+
+  const validate = (): Partial<Record<keyof ChatWidgetUser, string>> => {
+    const e: Partial<Record<keyof ChatWidgetUser, string>> = {};
+    if (!name.trim()) e.name = "Name is required";
+    if (!phone.trim()) e.phone = "Phone number is required";
+    if (!email.trim()) e.email = "Email is required";
+    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email))
+      e.email = "Enter a valid email address";
+    return e;
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const errs = validate();
+    if (Object.keys(errs).length > 0) {
+      setErrors(errs);
+      return;
+    }
+    onSubmit({ name: name.trim(), phone: phone.trim(), email: email.trim() });
+  };
+
+  return (
+    <div className={cn("flex flex-col gap-5 p-5", className)}>
+      <div>
+        <p className="text-body-large font-semibold text-foreground">
+          {brokerName ? `Hi from ${brokerName}!` : "Hi there!"}
+        </p>
+        <p className="mt-1 text-body-medium text-muted-foreground">
+          To get started, please share your contact details.
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit} noValidate className="flex flex-col gap-3">
+        <Field>
+          <FieldLabel>
+            Full Name <span className="text-destructive">*</span>
+          </FieldLabel>
+          <Input
+            value={name}
+            onChange={(e) => {
+              setName(e.target.value);
+              clearError("name");
+            }}
+            placeholder="Jane Smith"
+            disabled={isSubmitting}
+            aria-invalid={!!errors.name || undefined}
+          />
+          {errors.name && <FieldError>{errors.name}</FieldError>}
+        </Field>
+
+        <Field>
+          <FieldLabel>
+            Phone Number <span className="text-destructive">*</span>
+          </FieldLabel>
+          <Input
+            type="tel"
+            value={phone}
+            onChange={(e) => {
+              setPhone(e.target.value);
+              clearError("phone");
+            }}
+            placeholder="0400 000 000"
+            disabled={isSubmitting}
+            aria-invalid={!!errors.phone || undefined}
+          />
+          {errors.phone && <FieldError>{errors.phone}</FieldError>}
+        </Field>
+
+        <Field>
+          <FieldLabel>
+            Email Address <span className="text-destructive">*</span>
+          </FieldLabel>
+          <Input
+            type="email"
+            value={email}
+            onChange={(e) => {
+              setEmail(e.target.value);
+              clearError("email");
+            }}
+            placeholder="jane@example.com"
+            disabled={isSubmitting}
+            aria-invalid={!!errors.email || undefined}
+          />
+          {errors.email && <FieldError>{errors.email}</FieldError>}
+        </Field>
+
+        <Button
+          type="submit"
+          variant="default"
+          className="mt-1 w-full"
+          disabled={isSubmitting}
+          loading={isSubmitting}
+        >
+          Start Chat
+          <ArrowRight className="size-4" />
+        </Button>
+      </form>
+
+      <p className="flex items-center justify-center gap-1 text-center text-[11px] text-muted-foreground">
+        <Lock className="size-3" />
+        Your info is safe with us
+      </p>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ChatWidgetTopicCard (Molecule — single topic)
+// ---------------------------------------------------------------------------
+
+export interface ChatWidgetTopicCardProps {
+  topic: ChatWidgetTopic;
+  onClick: (topicId: string) => void;
+  className?: string;
+}
+
+export function ChatWidgetTopicCard({
+  topic,
+  onClick,
+  className,
+}: ChatWidgetTopicCardProps) {
+  return (
+    <Button
+      variant="outline"
+      onClick={() => onClick(topic.id)}
+      className={cn(
+        "h-auto w-full flex-col items-start gap-1.5 whitespace-normal border-border px-3 py-3 text-left",
+        "hover:border-primary hover:bg-primary/5",
+        className,
+      )}
+    >
+      <span className="text-muted-foreground" aria-hidden="true">
+        {topic.icon}
+      </span>
+      <span className="text-body-medium font-semibold text-foreground">
+        {topic.label}
+      </span>
+      {topic.description && (
+        <span className="text-body-small leading-snug text-muted-foreground">
+          {topic.description}
+        </span>
+      )}
+    </Button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ChatWidgetTopicGrid (Organism — Screen 2)
+// ---------------------------------------------------------------------------
+
+export interface ChatWidgetTopicGridProps {
+  userName: string;
+  topics?: ChatWidgetTopic[];
+  onTopicSelect: (topicId: string) => void;
+  className?: string;
+}
+
+export function ChatWidgetTopicGrid({
+  userName,
+  topics = DEFAULT_CHAT_WIDGET_TOPICS,
+  onTopicSelect,
+  className,
+}: ChatWidgetTopicGridProps) {
+  return (
+    <div className={cn("flex flex-col gap-4 p-5", className)}>
+      <div>
+        <p className="text-body-large font-semibold text-foreground">
+          Hi {userName}!
+        </p>
+        <p className="mt-0.5 text-body-medium text-muted-foreground">
+          What would you like to discuss today?
+        </p>
+      </div>
+      <div className="grid grid-cols-2 gap-2">
+        {topics.map((topic) => (
+          <ChatWidgetTopicCard
+            key={topic.id}
+            topic={topic}
+            onClick={onTopicSelect}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ChatWidgetInteractiveCard (Molecule — AI-embedded cards)
+// ---------------------------------------------------------------------------
+
+export type ChatWidgetInteractiveCardType =
+  | "quick-reply"
+  | "appointment"
+  | "meeting-type"
+  | "confirmation";
+
+export type ChatWidgetMeetingTypeId = "video" | "phone" | "in-person";
+
+export interface ChatWidgetMeetingTypeOption {
+  id: ChatWidgetMeetingTypeId;
+  label: string;
+}
+
+export interface ChatWidgetQuickReplyOption {
+  id: string;
+  label: string;
+}
+
+export interface ChatWidgetAppointmentSlot {
+  id: string;
+  /** Human-readable datetime, e.g. "Mon 28 Apr · 2:00 PM" */
+  datetime: string;
+  type: "video" | "in-person" | "phone";
+}
+
+/** Data shape for an interactive card — no callbacks, safe to embed in message data. */
+export interface ChatWidgetInteractiveCardData {
+  type: ChatWidgetInteractiveCardType;
+  options?: ChatWidgetQuickReplyOption[];
+  slots?: ChatWidgetAppointmentSlot[];
+  meetingTypes?: ChatWidgetMeetingTypeOption[];
+  confirmedSlot?: ChatWidgetAppointmentSlot;
+  meetingType?: ChatWidgetMeetingTypeId;
+  topic?: string;
+  advisorName?: string;
+}
+
+export interface ChatWidgetInteractiveCardProps extends ChatWidgetInteractiveCardData {
+  onQuickReply?: (optionId: string) => void;
+  onSlotSelect?: (slotId: string) => void;
+  onMeetingTypeSelect?: (typeId: ChatWidgetMeetingTypeId) => void;
+  className?: string;
+}
+
+const MEETING_TYPE_LABELS: Record<ChatWidgetMeetingTypeId, string> = {
+  video: "Video Call",
+  phone: "Phone Call",
+  "in-person": "In-Person Meeting",
+};
+
+function MeetingTypeIcon({
+  id,
+  className = "size-4",
+}: {
+  id: ChatWidgetMeetingTypeId;
+  className?: string;
+}) {
+  const Icon = id === "video" ? Video : id === "phone" ? Phone : MapPin;
+  return <Icon className={cn("shrink-0 text-muted-foreground", className)} />;
+}
+
+export function ChatWidgetInteractiveCard({
+  type,
+  options,
+  onQuickReply,
+  slots,
+  onSlotSelect,
+  meetingTypes,
+  onMeetingTypeSelect,
+  confirmedSlot,
+  meetingType,
+  topic,
+  advisorName,
+  className,
+}: ChatWidgetInteractiveCardProps) {
+  if (type === "quick-reply") {
+    return (
+      <div className={cn("flex flex-wrap gap-2 pt-1", className)}>
+        {options?.map((opt) => (
+          <Button
+            key={opt.id}
+            variant="outline-primary"
+            size="sm"
+            onClick={() => onQuickReply?.(opt.id)}
+          >
+            {opt.label}
+          </Button>
+        ))}
+      </div>
+    );
+  }
+
+  if (type === "appointment") {
+    return (
+      <div
+        className={cn(
+          "flex flex-col gap-2 border border-border bg-card p-3",
+          className,
+        )}
+      >
+        <p className="text-body-small font-semibold text-foreground">
+          Choose a time
+        </p>
+        {slots?.map((slot) => (
+          <Button
+            key={slot.id}
+            variant="outline"
+            onClick={() => onSlotSelect?.(slot.id)}
+            className="h-auto w-full justify-start gap-2 px-3 py-2 hover:border-primary hover:bg-primary/5"
+          >
+            <Calendar className="size-4 shrink-0 text-muted-foreground" />
+            <span className="text-foreground">{slot.datetime}</span>
+          </Button>
+        ))}
+      </div>
+    );
+  }
+
+  if (type === "meeting-type") {
+    return (
+      <div
+        className={cn(
+          "flex flex-col gap-2 border border-border bg-card p-3",
+          className,
+        )}
+      >
+        <p className="text-body-small font-semibold text-foreground">
+          How would you prefer to meet?
+        </p>
+        {meetingTypes?.map((mt) => (
+          <Button
+            key={mt.id}
+            variant="outline"
+            onClick={() => onMeetingTypeSelect?.(mt.id)}
+            className="h-auto w-full justify-start gap-2 px-3 py-2 hover:border-primary hover:bg-primary/5"
+          >
+            <MeetingTypeIcon id={mt.id} />
+            <span className="text-foreground">{mt.label}</span>
+          </Button>
+        ))}
+      </div>
+    );
+  }
+
+  if (type === "confirmation") {
+    return (
+      <div
+        className={cn(
+          "flex flex-col gap-3 border border-border bg-card p-3",
+          className,
+        )}
+      >
+        <div className="flex items-center gap-2">
+          <CheckCircle2 className="size-4 shrink-0 text-green-600" />
+          <p className="text-body-medium font-semibold text-foreground">
+            Appointment Confirmed
+          </p>
+        </div>
+        <div className="flex flex-col gap-1.5 border-t border-border pt-2 text-body-small text-muted-foreground">
+          {confirmedSlot && (
+            <div className="flex items-center gap-2">
+              <Calendar className="size-3.5 shrink-0" />
+              <span>{confirmedSlot.datetime}</span>
+            </div>
+          )}
+          {meetingType && (
+            <div className="flex items-center gap-2">
+              <MeetingTypeIcon id={meetingType} className="size-3.5" />
+              <span>{MEETING_TYPE_LABELS[meetingType]}</span>
+            </div>
+          )}
+          {topic && (
+            <div className="flex items-center gap-2">
+              <MessageSquare className="size-3.5 shrink-0" />
+              <span>{topic}</span>
+            </div>
+          )}
+          {advisorName && (
+            <div className="flex items-center gap-2">
+              <User className="size-3.5 shrink-0" />
+              <span>with {advisorName}</span>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// ChatWidgetWindow (Template — 3-screen container)
+// ---------------------------------------------------------------------------
+
+export interface ChatWidgetWindowProps {
+  isOpen: boolean;
+  brokerName?: string;
+  /** Solid brand color — sets --primary on the widget so all interactive elements match. */
+  brandColor?: string;
+  gradientFrom?: string;
+  gradientTo?: string;
+  onMinimize?: () => void;
+  // Screen 1
+  onIntakeSubmit?: (user: ChatWidgetUser) => void;
+  isSubmittingIntake?: boolean;
+  // Screen 2
+  topics?: ChatWidgetTopic[];
+  onTopicSelect?: (topicId: string) => void;
+  /** External booking URL. When provided and user selects "Book a Meeting", shows a booking screen instead of chat. */
+  bookingUrl?: string;
+  // Screen 3
+  messages?: ChatWidgetChatMessage[];
+  inputValue?: string;
+  onInputChange?: (value: string) => void;
+  onSend?: (value: string) => void;
+  isStreaming?: boolean;
+  onSlotSelect?: (slotId: string) => void;
+  onQuickReply?: (optionId: string) => void;
+  onMeetingTypeSelect?: (typeId: ChatWidgetMeetingTypeId) => void;
+  /** Override starting screen — used in stories to skip to a specific screen. */
+  initialScreen?: ChatWidgetScreen;
+  /** Override cached user — used in stories to pre-populate the user. */
+  initialUser?: ChatWidgetUser;
+  className?: string;
+}
+
+export function ChatWidgetWindow({
+  isOpen,
+  brokerName = "Your Broker",
+  brandColor,
+  gradientFrom,
+  gradientTo,
+  onMinimize,
+  onIntakeSubmit,
+  isSubmittingIntake,
+  topics,
+  onTopicSelect,
+  bookingUrl,
+  messages = [],
+  inputValue = "",
+  onInputChange,
+  onSend,
+  isStreaming,
+  onSlotSelect,
+  onQuickReply,
+  onMeetingTypeSelect,
+  initialScreen,
+  initialUser,
+  className,
+}: ChatWidgetWindowProps) {
+  const [screen, setScreen] = useState<ChatWidgetScreen>(
+    () => initialScreen ?? "topics",
+  );
+
+  const [user, setUser] = useState<ChatWidgetUser | null>(
+    () => initialUser ?? null,
+  );
+
+  const handleIntakeSubmit = useCallback(
+    (data: ChatWidgetUser) => {
+      setUser(data);
+      setScreen("topics");
+      onIntakeSubmit?.(data);
+    },
+    [onIntakeSubmit],
+  );
+
+  const handleTopicSelect = useCallback(
+    (topicId: string) => {
+      setScreen(topicId === "book_meeting" && bookingUrl ? "booking" : "chat");
+      onTopicSelect?.(topicId);
+    },
+    [onTopicSelect, bookingUrl],
+  );
+
+  if (!isOpen) return null;
+
+  const showBackBar = screen === "chat" || screen === "booking";
+
+  return (
+    <div
+      className={cn(
+        "flex h-[600px] w-[360px] flex-col overflow-hidden border border-border bg-background shadow-xl",
+        className,
+      )}
+      style={
+        brandColor
+          ? ({ "--primary": brandColor } as React.CSSProperties)
+          : undefined
+      }
+    >
+      <ChatWidgetHeader
+        brokerName={brokerName}
+        gradientFrom={gradientFrom}
+        gradientTo={gradientTo}
+        onMinimize={onMinimize}
+      />
+
+      <div className="flex-1 overflow-y-auto" tabIndex={0}>
+        {screen === "intake" && (
+          <ChatWidgetIntakeForm
+            brokerName={brokerName}
+            onSubmit={handleIntakeSubmit}
+            isSubmitting={isSubmittingIntake}
+          />
+        )}
+        {screen === "topics" && (
+          <ChatWidgetTopicGrid
+            userName={user?.name ?? "there"}
+            topics={topics}
+            onTopicSelect={handleTopicSelect}
+          />
+        )}
+        {screen === "chat" && (
+          <div className="flex flex-col gap-3 p-4">
+            {messages.map((msg) => (
+              <React.Fragment key={msg.id}>
+                {(msg.content || msg.isStreaming) && (
+                  <ChatWidgetMessage
+                    role={msg.role}
+                    content={msg.content}
+                    timestamp={msg.timestamp}
+                    isStreaming={msg.isStreaming}
+                  />
+                )}
+                {msg.interactiveCard && (
+                  <ChatWidgetInteractiveCard
+                    {...msg.interactiveCard}
+                    onSlotSelect={onSlotSelect}
+                    onQuickReply={onQuickReply}
+                    onMeetingTypeSelect={onMeetingTypeSelect}
+                  />
+                )}
+              </React.Fragment>
+            ))}
+          </div>
+        )}
+        {screen === "booking" && bookingUrl && (
+          <div className="flex flex-col items-center gap-5 px-6 py-10 text-center">
+            <div className="flex size-14 items-center justify-center bg-primary/10">
+              <CalendarDays className="size-7 text-foreground" />
+            </div>
+            <div className="flex flex-col gap-1">
+              <p className="text-body-large font-semibold text-foreground">
+                Book an Appointment
+              </p>
+              <p className="text-body-medium text-muted-foreground">
+                Choose a time that works for you with one of our advisors.
+              </p>
+            </div>
+            <Button
+              variant="default"
+              className="w-full"
+              onClick={() => window.open(bookingUrl, "_blank")}
+            >
+              Open Booking Page
+              <ExternalLink className="size-4" />
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {showBackBar && (
+        <div className="border-t border-border px-4 py-1.5 text-center">
+          <Button variant="ghost" size="sm" onClick={() => setScreen("topics")}>
+            <ArrowLeft className="size-3" />
+            Change topic
+          </Button>
+        </div>
+      )}
+      {screen === "chat" && onInputChange && onSend && (
+        <ChatWidgetInputBar
+          value={inputValue}
+          onChange={onInputChange}
+          onSend={onSend}
+          disabled={isStreaming}
+        />
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ChatWidget (Root orchestrator)
+// ---------------------------------------------------------------------------
+
+export interface ChatWidgetProps {
+  brokerName?: string;
+  /** Primary color for the FAB launcher button. */
+  brandColor?: string;
+  gradientFrom?: string;
+  gradientTo?: string;
+  /** ID used to connect to the correct AI agent. */
+  agentId?: string;
+  /** External booking URL. When provided, "Book a Meeting" shows a direct booking screen instead of chat. */
+  bookingUrl?: string;
+  position?: "bottom-right" | "bottom-left";
+  /** Opens the widget by default — useful for stories. */
+  defaultOpen?: boolean;
+  /** Callback when a topic is selected. */
+  onTopicSelected?: (topicId: string) => void;
+  /** Callback when the user sends a message. */
+  onMessageSent?: (message: string) => void;
+}
+
+export function ChatWidget({
+  brokerName = "Your Broker",
+  brandColor,
+  gradientFrom,
+  gradientTo,
+  bookingUrl,
+  position = "bottom-right",
+  defaultOpen = false,
+  onTopicSelected,
+  onMessageSent,
+}: ChatWidgetProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [messages, setMessages] = useState<ChatWidgetChatMessage[]>([]);
+  const [inputValue, setInputValue] = useState("");
+
+  const handleTopicSelect = useCallback(
+    (topicId: string) => {
+      if (topicId !== "book_meeting" || !bookingUrl) {
+        const topic = DEFAULT_CHAT_WIDGET_TOPICS.find((t) => t.id === topicId);
+        if (topic) {
+          setMessages([
+            {
+              id: "welcome",
+              role: "bot",
+              content: `Great choice! I can help you with ${topic.label.toLowerCase()}. What would you like to know?`,
+            },
+          ]);
+        }
+      }
+      onTopicSelected?.(topicId);
+    },
+    [onTopicSelected, bookingUrl],
+  );
+
+  const handleSend = useCallback(
+    (value: string) => {
+      if (!value.trim()) return;
+      setMessages((prev) => [
+        ...prev,
+        { id: `msg-${Date.now()}`, role: "user", content: value },
+      ]);
+      setInputValue("");
+      onMessageSent?.(value);
+    },
+    [onMessageSent],
+  );
+
+  return (
+    <div
+      className={cn(
+        "fixed bottom-6 z-50 flex flex-col items-end gap-3",
+        position === "bottom-right" ? "right-6" : "left-6",
+      )}
+    >
+      {isOpen && (
+        <ChatWidgetWindow
+          isOpen={isOpen}
+          brokerName={brokerName}
+          brandColor={brandColor}
+          gradientFrom={gradientFrom}
+          gradientTo={gradientTo}
+          bookingUrl={bookingUrl}
+          onMinimize={() => setIsOpen(false)}
+          messages={messages}
+          inputValue={inputValue}
+          onInputChange={setInputValue}
+          onSend={handleSend}
+          onTopicSelect={handleTopicSelect}
+        />
+      )}
+      <ChatWidgetLauncher
+        isOpen={isOpen}
+        onClick={() => setIsOpen((prev) => !prev)}
+        brandColor={brandColor}
+      />
+    </div>
+  );
+}