@nickle/chatbot-react 0.1.0

package/src/chatbot/components/chatbot-widget.tsx

@@ -0,0 +1,739 @@
+import clsx from "clsx";
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type CSSProperties,
+  type FormEvent,
+  type KeyboardEvent as ReactKeyboardEvent,
+} from "react";
+import type { ChatMessage } from "../types";
+import { useChatbotContext } from "../context/chatbot-context";
+import { AwaitingDots } from "./awaiting-dots";
+import { MessageMarkdown } from "./message-markdown";
+
+const PANEL_INSET_REM = 1.5;
+const EXPANDED_MAX_WIDTH_PX = 630;
+const MOBILE_BREAKPOINT_PX = 768;
+const ROOT_BOTTOM_OFFSET_REM = 1.5; // cb-bottom-6
+const PANEL_TO_BUBBLE_GAP_REM = 0.75; // cb-gap-3
+const BUBBLE_SIZE_REM = 3.5; // cb-h-14
+const EXPANDED_BOTTOM_OFFSET_REM = ROOT_BOTTOM_OFFSET_REM + PANEL_TO_BUBBLE_GAP_REM + BUBBLE_SIZE_REM;
+const EXPANDED_TOTAL_VERTICAL_INSET_REM = PANEL_INSET_REM + EXPANDED_BOTTOM_OFFSET_REM;
+
+function formatFileSize(size: number) {
+  if (size < 1024) {
+    return `${size} B`;
+  }
+  if (size < 1024 * 1024) {
+    return `${(size / 1024).toFixed(1)} KB`;
+  }
+  return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function formatGmtOffset(date: Date) {
+  const total = -date.getTimezoneOffset();
+  const sign = total >= 0 ? "+" : "-";
+  const abs = Math.abs(total);
+  const hh = String(Math.floor(abs / 60)).padStart(2, "0");
+  const mm = String(abs % 60).padStart(2, "0");
+  return `GMT${sign}${hh}${mm}`;
+}
+
+function readTimeZoneName(date: Date, mode: "long" | "short") {
+  const parts = new Intl.DateTimeFormat(undefined, { timeZoneName: mode }).formatToParts(date);
+  return parts.find((part) => part.type === "timeZoneName")?.value ?? "";
+}
+
+function formatTranscriptDateTime(date: Date) {
+  const datePart = new Intl.DateTimeFormat(undefined, {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  }).format(date);
+  const timePart = new Intl.DateTimeFormat(undefined, {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: true,
+  }).format(date);
+  const zoneLong = readTimeZoneName(date, "long");
+  const zoneShort = readTimeZoneName(date, "short");
+  const gmtOffset = formatGmtOffset(date);
+  return `${datePart} at ${timePart} ${zoneLong} time ${zoneShort} (${gmtOffset})`.replace(/\s+/g, " ").trim();
+}
+
+function formatTranscriptMessageTime(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+
+  return new Intl.DateTimeFormat(undefined, {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: true,
+  }).format(date);
+}
+
+function toTranscript(messages: ChatMessage[], agentName: string) {
+  const exportedAt = new Date();
+  const firstDate =
+    messages.length > 0 ? new Date(messages[0].createdAt) : exportedAt;
+  const startedAt = Number.isNaN(firstDate.getTime()) ? exportedAt : firstDate;
+
+  const lines: string[] = [
+    `Conversation with ${agentName}`,
+    `Started on ${formatTranscriptDateTime(startedAt)}`,
+    "",
+    "---",
+    "",
+  ];
+
+  messages.forEach((message) => {
+    const role = message.role === "user" ? "Visitor" : message.role === "assistant" ? agentName : "System";
+    const content = message.content.trim();
+    if (!content) {
+      return;
+    }
+
+    lines.push(`${formatTranscriptMessageTime(message.createdAt)} | ${role}: ${content}`);
+    lines.push("");
+  });
+
+  lines.push("---");
+  lines.push(`Exported from ${agentName} on ${formatTranscriptDateTime(exportedAt)}`);
+
+  return lines.join("\n");
+}
+
+function toTranscriptFilename(date: Date) {
+  const yyyy = date.getFullYear();
+  const mm = String(date.getMonth() + 1).padStart(2, "0");
+  const dd = String(date.getDate()).padStart(2, "0");
+  const hh = String(date.getHours()).padStart(2, "0");
+  const min = String(date.getMinutes()).padStart(2, "0");
+  const ss = String(date.getSeconds()).padStart(2, "0");
+  return `chat-transcript-${yyyy}${mm}${dd}-${hh}${min}${ss}.txt`;
+}
+
+export function ChatbotWidget() {
+  const {
+    isOpen,
+    isAwaiting,
+    messages,
+    uploadEnabled,
+    position,
+    agentName,
+    assistantNote,
+    disclaimerText,
+    themeVars,
+    icons,
+    classNames,
+    close,
+    open,
+    sendMessage,
+    widgetEnabled,
+  } = useChatbotContext();
+
+  const [inputValue, setInputValue] = useState("");
+  const [queuedFiles, setQueuedFiles] = useState<File[]>([]);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isMobileViewport, setIsMobileViewport] = useState(false);
+
+  const panelRef = useRef<HTMLDivElement>(null);
+  const messagesScrollRef = useRef<HTMLElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const LauncherClosedIcon = icons.launcherClosed;
+  const LauncherOpenIcon = icons.launcherOpen;
+  const BotIcon = icons.bot;
+  const MenuIcon = icons.menu;
+  const CloseIcon = icons.close;
+  const SendIcon = icons.send;
+  const AttachIcon = icons.attach;
+  const ExpandIcon = icons.expand;
+  const DownloadIcon = icons.download;
+
+  const alignment = position === "bottom-left" ? "cb-left-6" : "cb-right-6";
+  const stackAlignment = position === "bottom-left" ? "cb-items-start" : "cb-items-end";
+  const panelOrigin = position === "bottom-left" ? "cb-origin-bottom-left" : "cb-origin-bottom-right";
+  const panelLayoutMode = isMobileViewport ? "mobile" : isExpanded ? "desktop-expanded" : "desktop-collapsed";
+  const showExpandAction = !isMobileViewport;
+  const showDownloadAction = messages.length > 0;
+  const hasMenuActions = showExpandAction || showDownloadAction;
+
+  const canSend = useMemo(() => {
+    return !isAwaiting && (inputValue.trim().length > 0 || queuedFiles.length > 0);
+  }, [inputValue, isAwaiting, queuedFiles.length]);
+
+  const resizeComposer = () => {
+    const textarea = inputRef.current;
+    if (!textarea) {
+      return;
+    }
+
+    if (textarea.value.length === 0) {
+      textarea.style.height = "38px";
+      textarea.style.overflowY = "hidden";
+      return;
+    }
+
+    const maxHeightPx = 168;
+    textarea.style.height = "auto";
+    const nextHeight = Math.min(textarea.scrollHeight, maxHeightPx);
+    textarea.style.height = `${nextHeight}px`;
+    textarea.style.overflowY = textarea.scrollHeight > maxHeightPx ? "auto" : "hidden";
+  };
+
+  const scrollMessagesToBottom = () => {
+    const container = messagesScrollRef.current;
+    if (!container) {
+      return;
+    }
+
+    container.scrollTop = container.scrollHeight;
+  };
+
+  const panelSize = useMemo<{ className: string; style?: CSSProperties }>(() => {
+    const inset = `${PANEL_INSET_REM}rem`;
+
+    if (panelLayoutMode === "mobile") {
+      return {
+        className: "cb-fixed cb-max-h-none cb-max-w-none",
+        style: {
+          top: inset,
+          right: inset,
+          bottom: `${EXPANDED_BOTTOM_OFFSET_REM}rem`,
+          left: inset,
+        },
+      };
+    }
+
+    if (panelLayoutMode === "desktop-expanded") {
+      return {
+        className: "cb-relative cb-max-h-none cb-max-w-none",
+        style: {
+          width: `min(${EXPANDED_MAX_WIDTH_PX}px, calc(100vw - ${PANEL_INSET_REM * 2}rem))`,
+          height: `calc(100vh - ${EXPANDED_TOTAL_VERTICAL_INSET_REM}rem)`,
+        },
+      };
+    }
+
+    return {
+      className: "cb-relative cb-h-[min(680px,calc(100vh-7.5rem))] cb-w-[min(92vw,420px)]",
+      style: undefined,
+    };
+  }, [panelLayoutMode]);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT_PX}px)`);
+    const syncViewportMode = () => {
+      setIsMobileViewport(mediaQuery.matches);
+    };
+
+    syncViewportMode();
+
+    if (typeof mediaQuery.addEventListener === "function") {
+      mediaQuery.addEventListener("change", syncViewportMode);
+      return () => mediaQuery.removeEventListener("change", syncViewportMode);
+    }
+
+    mediaQuery.addListener(syncViewportMode);
+    return () => mediaQuery.removeListener(syncViewportMode);
+  }, []);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setIsMenuOpen(false);
+      return;
+    }
+
+    inputRef.current?.focus();
+    resizeComposer();
+  }, [isOpen]);
+
+  useEffect(() => {
+    resizeComposer();
+  }, [inputValue]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const rafId = window.requestAnimationFrame(() => {
+      scrollMessagesToBottom();
+    });
+
+    return () => window.cancelAnimationFrame(rafId);
+  }, [isOpen, messages, isAwaiting]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const onPointerDown = (event: MouseEvent) => {
+      const target = event.target as Node;
+      if (menuRef.current && !menuRef.current.contains(target)) {
+        setIsMenuOpen(false);
+      }
+    };
+
+    window.addEventListener("mousedown", onPointerDown);
+    return () => window.removeEventListener("mousedown", onPointerDown);
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const onKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.key === "Escape") {
+        if (isMenuOpen) {
+          setIsMenuOpen(false);
+          return;
+        }
+        close();
+      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [close, isMenuOpen, isOpen]);
+
+  useEffect(() => {
+    setIsMenuOpen(false);
+  }, [isMobileViewport]);
+
+  useEffect(() => {
+    if (!hasMenuActions) {
+      setIsMenuOpen(false);
+    }
+  }, [hasMenuActions]);
+
+  const trapFocus = (event: ReactKeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== "Tab") {
+      return;
+    }
+
+    const root = panelRef.current;
+    if (!root) {
+      return;
+    }
+
+    const focusables = root.querySelectorAll<HTMLElement>(
+      "button, [href], textarea, input, select, [tabindex]:not([tabindex='-1'])",
+    );
+
+    if (focusables.length === 0) {
+      return;
+    }
+
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+
+    if (event.shiftKey && document.activeElement === first) {
+      last.focus();
+      event.preventDefault();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      first.focus();
+      event.preventDefault();
+    }
+  };
+
+  const onSubmit = async (event: FormEvent) => {
+    event.preventDefault();
+    if (!canSend) {
+      return;
+    }
+
+    const submittedText = inputValue;
+    setInputValue("");
+    scrollMessagesToBottom();
+
+    await sendMessage({
+      text: submittedText,
+      files: uploadEnabled ? queuedFiles : [],
+    });
+
+    setQueuedFiles([]);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const onPickFiles = (event: ChangeEvent<HTMLInputElement>) => {
+    const list = event.target.files;
+    if (!list || !uploadEnabled) {
+      return;
+    }
+
+    const files = Array.from(list);
+    setQueuedFiles((current) => {
+      const seen = new Set(current.map((file) => `${file.name}:${file.size}:${file.lastModified}`));
+      const next = [...current];
+
+      files.forEach((file) => {
+        const key = `${file.name}:${file.size}:${file.lastModified}`;
+        if (!seen.has(key)) {
+          seen.add(key);
+          next.push(file);
+        }
+      });
+
+      return next;
+    });
+  };
+
+  const createIdFromFile = (file: File) => `${file.name}:${file.size}:${file.lastModified}`;
+
+  const removeQueuedFile = (fileId: string) => {
+    setQueuedFiles((current) => current.filter((file) => createIdFromFile(file) !== fileId));
+  };
+
+  const downloadTranscript = () => {
+    if (messages.length === 0) {
+      return;
+    }
+
+    const now = new Date();
+    const fileContent = toTranscript(messages, agentName);
+    const blob = new Blob([fileContent], { type: "text/plain;charset=utf-8" });
+    const objectUrl = URL.createObjectURL(blob);
+
+    const anchor = document.createElement("a");
+    anchor.href = objectUrl;
+    anchor.download = toTranscriptFilename(now);
+    document.body.appendChild(anchor);
+    anchor.click();
+    document.body.removeChild(anchor);
+    URL.revokeObjectURL(objectUrl);
+
+    setIsMenuOpen(false);
+  };
+
+  const toggleExpanded = () => {
+    if (isMobileViewport) {
+      return;
+    }
+
+    setIsExpanded((current) => !current);
+    setIsMenuOpen(false);
+  };
+
+  if (!widgetEnabled) {
+    return null;
+  }
+
+  return (
+    <div
+      className={clsx(
+        "cb-fixed cb-bottom-6 cb-z-[2147483640] cb-text-[var(--cb-surface-foreground)]",
+        alignment,
+        classNames.root,
+      )}
+      style={themeVars}
+      data-chatbot-root
+    >
+      <div className={clsx("cb-pointer-events-none cb-relative cb-flex cb-flex-col cb-gap-3", stackAlignment)}>
+        <div
+          ref={panelRef}
+          className={clsx(
+            "cb-pointer-events-auto cb-flex cb-flex-col cb-overflow-hidden cb-rounded-[var(--cb-radius)] cb-border cb-border-[var(--cb-border)] cb-bg-[var(--cb-surface)] cb-shadow-[var(--cb-shadow-panel)] cb-transition-[opacity,transform,width,height,top,left,right,bottom] cb-duration-[380ms] cb-ease-[cubic-bezier(0.22,1,0.36,1)]",
+            panelOrigin,
+            panelSize.className,
+            isOpen
+              ? "cb-translate-y-0 cb-scale-100 cb-opacity-100"
+              : "cb-translate-y-3 cb-scale-90 cb-opacity-0 cb-pointer-events-none",
+            classNames.panel,
+          )}
+          style={panelSize.style}
+          aria-hidden={!isOpen}
+          onKeyDown={trapFocus}
+        >
+          <header
+            className={clsx(
+              "cb-flex cb-items-center cb-justify-between cb-gap-2 cb-border-b cb-border-[var(--cb-border)] cb-bg-[var(--cb-surface)] cb-px-4 cb-py-3.5",
+              classNames.header,
+            )}
+            style={{
+              borderBottomWidth: "1px",
+              borderBottomStyle: "solid",
+              borderBottomColor: "var(--cb-border)",
+            }}
+          >
+            <div className={clsx("cb-flex cb-min-w-0 cb-items-center cb-gap-2.5", classNames.headerMeta)}>
+              <span className="cb-inline-flex cb-h-9 cb-w-9 cb-shrink-0 cb-items-center cb-justify-center cb-self-center cb-text-[var(--cb-surface-foreground)]">
+                <BotIcon size={34} />
+              </span>
+              <div className="cb-min-w-0 cb-space-y-0">
+                <p className="cb-m-0 cb-truncate cb-text-lg cb-font-semibold cb-leading-6 cb-text-[var(--cb-surface-foreground)]">
+                  {agentName}
+                </p>
+                <p className="cb-m-0 cb-text-base cb-leading-5 cb-text-[var(--cb-muted-foreground)]">{assistantNote}</p>
+              </div>
+            </div>
+
+            <div ref={menuRef} className="cb-relative cb-flex cb-items-center cb-gap-1">
+              {hasMenuActions && (
+                <button
+                  type="button"
+                  onClick={() => setIsMenuOpen((current) => !current)}
+                  className={clsx(
+                    "cb-flex cb-h-9 cb-w-9 cb-shrink-0 cb-items-center cb-justify-center cb-rounded-lg cb-bg-transparent cb-p-0 cb-text-[var(--cb-muted-foreground)] cb-transition hover:cb-bg-[var(--cb-muted)] hover:cb-text-white focus-visible:cb-bg-[var(--cb-muted)] focus-visible:cb-text-white",
+                    isMenuOpen && "cb-bg-[var(--cb-muted)] cb-text-white",
+                  )}
+                  aria-label="More options"
+                  aria-expanded={isMenuOpen}
+                >
+                  <MenuIcon size={18} />
+                </button>
+              )}
+
+              {isMenuOpen && hasMenuActions && (
+                <div
+                  className={clsx(
+                    "cb-absolute cb-right-0 cb-top-full cb-z-20 cb-mt-2 cb-flex cb-min-w-[220px] cb-flex-col cb-gap-1 cb-rounded-xl cb-border cb-border-[var(--cb-border)] cb-bg-[var(--cb-surface)] cb-p-1.5 cb-shadow-[var(--cb-shadow-panel)]",
+                    classNames.menu,
+                  )}
+                >
+                  {showExpandAction && (
+                    <button
+                      type="button"
+                      onClick={toggleExpanded}
+                      className={clsx(
+                        "cb-flex cb-w-full cb-items-center cb-gap-2 cb-rounded-lg cb-bg-transparent cb-px-3.5 cb-py-2.5 cb-text-left cb-text-sm cb-text-[var(--cb-muted-foreground)] cb-transition hover:cb-bg-[var(--cb-muted)] hover:cb-text-white focus-visible:cb-bg-[var(--cb-muted)] focus-visible:cb-text-white",
+                        classNames.menuItem,
+                      )}
+                    >
+                      <ExpandIcon size={16} />
+                      <span>{isExpanded ? "Restore window" : "Expand window"}</span>
+                    </button>
+                  )}
+
+                  {showDownloadAction && (
+                    <button
+                      type="button"
+                      onClick={downloadTranscript}
+                      className={clsx(
+                        "cb-flex cb-w-full cb-items-center cb-gap-2 cb-rounded-lg cb-bg-transparent cb-px-3.5 cb-py-2.5 cb-text-left cb-text-sm cb-text-[var(--cb-muted-foreground)] cb-transition hover:cb-bg-[var(--cb-muted)] hover:cb-text-white focus-visible:cb-bg-[var(--cb-muted)] focus-visible:cb-text-white",
+                        classNames.menuItem,
+                      )}
+                    >
+                      <DownloadIcon size={16} />
+                      <span>Download transcript</span>
+                    </button>
+                  )}
+                </div>
+              )}
+
+              <button
+                type="button"
+                onClick={close}
+                className="cb-flex cb-h-9 cb-w-9 cb-shrink-0 cb-items-center cb-justify-center cb-rounded-lg cb-bg-transparent cb-p-0 cb-text-[var(--cb-muted-foreground)] cb-transition hover:cb-bg-[var(--cb-muted)] hover:cb-text-white focus-visible:cb-bg-[var(--cb-muted)] focus-visible:cb-text-white"
+                aria-label="Close chatbot"
+              >
+                <CloseIcon size={18} />
+              </button>
+            </div>
+          </header>
+
+          <section
+            ref={messagesScrollRef}
+            className={clsx(
+              "cb-chat-scroll cb-flex-1 cb-overflow-y-auto cb-scroll-smooth cb-bg-[var(--cb-background)] cb-px-4 cb-pt-4 cb-pb-36",
+              classNames.body,
+            )}
+          >
+            <div className="cb-space-y-3.5">
+              {messages.length === 0 && (
+                <div className="cb-rounded-xl cb-bg-[var(--cb-muted)] cb-p-3 cb-text-sm cb-text-[var(--cb-muted-foreground)]">
+                  Ask anything about this company and the assistant will answer using your RAG knowledge base.
+                </div>
+              )}
+
+              {messages.map((message) => {
+                const isUser = message.role === "user";
+
+                return (
+                  <article
+                    key={message.id}
+                    className={clsx(
+                      "cb-flex",
+                      isUser ? "cb-justify-end cb-animate-cb-slide-fade-in-right" : "cb-justify-start cb-animate-cb-slide-fade-in-left",
+                    )}
+                  >
+                    <div
+                      className={clsx(
+                        "cb-max-w-[85%] cb-rounded-2xl cb-px-4 cb-py-2",
+                        isUser
+                          ? "cb-rounded-br-md cb-bg-[var(--cb-user-bubble)] cb-text-[var(--cb-user-text)]"
+                          : "cb-rounded-bl-md cb-bg-[var(--cb-assistant-bubble)] cb-text-[var(--cb-assistant-text)]",
+                      )}
+                    >
+                      {message.role === "assistant" && message.status === "streaming" && !message.content ? (
+                        <AwaitingDots />
+                      ) : message.role === "assistant" ? (
+                        <MessageMarkdown content={message.content} />
+                      ) : (
+                        <p className="cb-message-text cb-m-0 cb-whitespace-pre-wrap cb-text-base cb-leading-6">
+                          {message.content}
+                        </p>
+                      )}
+
+                      {message.attachments && message.attachments.length > 0 && (
+                        <div className="cb-mt-2 cb-flex cb-flex-wrap cb-gap-2">
+                          {message.attachments.map((attachment) => (
+                            <span
+                              key={attachment.id}
+                              className="cb-inline-flex cb-items-center cb-gap-2 cb-rounded-full cb-bg-black/10 cb-px-2 cb-py-1 cb-text-xs"
+                            >
+                              <span>{attachment.name}</span>
+                              <span className="cb-opacity-70">{formatFileSize(attachment.size)}</span>
+                            </span>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </article>
+                );
+              })}
+
+              <div />
+            </div>
+          </section>
+
+          <footer
+            className={clsx(
+              "cb-absolute cb-bottom-4 cb-left-4 cb-right-4 cb-z-10 cb-bg-transparent cb-p-0",
+              classNames.footer,
+            )}
+          >
+            {uploadEnabled && queuedFiles.length > 0 && (
+              <div className="cb-mb-2 cb-flex cb-flex-wrap cb-gap-2">
+                {queuedFiles.map((file) => {
+                  const fileId = createIdFromFile(file);
+                  return (
+                    <button
+                      type="button"
+                      key={fileId}
+                      className="cb-inline-flex cb-items-center cb-gap-2 cb-rounded-full cb-bg-[var(--cb-muted)] cb-px-3 cb-py-1 cb-text-xs cb-text-[var(--cb-muted-foreground)]"
+                      onClick={() => removeQueuedFile(fileId)}
+                      aria-label={`Remove ${file.name}`}
+                    >
+                      <span className="cb-max-w-[140px] cb-truncate">{file.name}</span>
+                      <span>x</span>
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+
+            <form onSubmit={onSubmit}>
+              <div
+                className={clsx(
+                  "cb-flex cb-items-end cb-gap-2 cb-rounded-2xl cb-bg-[var(--cb-surface)] cb-p-2 cb-shadow-[0_18px_35px_-24px_rgba(0,0,0,0.85)] cb-transition",
+                  classNames.composer,
+                )}
+              >
+                {uploadEnabled && (
+                  <>
+                    <input
+                      type="file"
+                      multiple
+                      ref={fileInputRef}
+                      className="cb-hidden"
+                      onChange={onPickFiles}
+                      aria-label="Add attachments"
+                    />
+                    <button
+                      type="button"
+                      className="cb-flex cb-h-10 cb-w-10 cb-shrink-0 cb-items-center cb-justify-center cb-rounded-lg cb-bg-transparent cb-p-0 cb-text-[var(--cb-muted-foreground)] cb-transition hover:cb-bg-[var(--cb-muted)] hover:cb-text-white focus-visible:cb-bg-[var(--cb-muted)] focus-visible:cb-text-white"
+                      onClick={() => fileInputRef.current?.click()}
+                      aria-label="Attach files"
+                    >
+                      <AttachIcon size={18} />
+                    </button>
+                  </>
+                )}
+
+                <div className="cb-flex-1">
+                  <textarea
+                    ref={inputRef}
+                    value={inputValue}
+                    onChange={(event) => setInputValue(event.target.value)}
+                    onKeyDown={(event) => {
+                      if (event.key === "Enter" && !event.shiftKey) {
+                        event.preventDefault();
+                        void onSubmit(event);
+                      }
+                    }}
+                    rows={1}
+                    placeholder="Ask a question..."
+                    className={clsx(
+                      "cb-composer-input cb-min-h-[38px] cb-w-full cb-resize-none cb-bg-transparent cb-px-2 cb-py-1.5 cb-text-sm cb-leading-6 cb-text-[var(--cb-surface-foreground)] cb-outline-none placeholder:cb-text-[var(--cb-muted-foreground)]",
+                      classNames.input,
+                    )}
+                  />
+                </div>
+
+                <button
+                  type="submit"
+                  disabled={!canSend}
+                  className={clsx(
+                    "cb-flex cb-h-10 cb-w-10 cb-shrink-0 cb-items-center cb-justify-center cb-rounded-full cb-bg-white cb-p-0 cb-text-[#111111] cb-transition cb-duration-200 hover:cb-scale-105 hover:cb-brightness-95 hover:cb-text-[#111111] active:cb-scale-95 focus-visible:cb-text-[#111111] disabled:cb-cursor-not-allowed disabled:cb-bg-white/70 disabled:cb-text-[#111111] disabled:cb-opacity-100",
+                    classNames.sendButton,
+                  )}
+                  aria-label="Send message"
+                >
+                  <SendIcon size={18} />
+                </button>
+              </div>
+              <p className="cb-m-0 cb-mt-1 cb-px-1 cb-text-center cb-text-xs cb-leading-4 cb-text-[var(--cb-muted-foreground)]">
+                {disclaimerText}
+              </p>
+            </form>
+          </footer>
+        </div>
+
+        <button
+          type="button"
+          onClick={isOpen ? close : open}
+          className={clsx(
+            "cb-pointer-events-auto cb-group cb-flex cb-h-14 cb-w-14 cb-items-center cb-justify-center cb-rounded-full cb-border cb-border-[var(--cb-border)] cb-bg-[#111111] cb-text-[#f5f5f5] cb-shadow-[var(--cb-shadow-bubble)] cb-transition cb-duration-300 hover:cb-scale-110 hover:cb-bg-[#262626] hover:cb-shadow-[0_24px_50px_-18px_rgba(0,0,0,0.9)] active:cb-scale-95",
+            classNames.bubble,
+          )}
+          aria-label={isOpen ? "Close chatbot" : "Open chatbot"}
+        >
+          <span className="cb-relative cb-flex cb-h-6 cb-w-6 cb-items-center cb-justify-center">
+            <LauncherClosedIcon
+              size={22}
+              className={clsx(
+                "cb-absolute cb-fill-current cb-transition-all cb-duration-300 cb-ease-out",
+                isOpen ? "cb-rotate-90 cb-opacity-0" : "cb-rotate-0 cb-opacity-100",
+              )}
+            />
+            <LauncherOpenIcon
+              size={22}
+              className={clsx(
+                "cb-absolute cb-transition-all cb-duration-300 cb-ease-out",
+                isOpen ? "cb-rotate-0 cb-opacity-100" : "-cb-rotate-90 cb-opacity-0",
+              )}
+            />
+          </span>
+        </button>
+      </div>
+    </div>
+  );
+}