@epicbagel/saas-kit 1.0.0 → 1.2.0

package/dist/primitives/chat.js

@@ -0,0 +1,881 @@
+"use client";
+"use client";
+import {
+  Trace,
+  TraceLine,
+  TraceTitle
+} from "../chunk-Z45YKVAM.js";
+import {
+  VoiceDictationButton
+} from "../chunk-HAC32ALJ.js";
+import {
+  Suggestion,
+  Suggestions
+} from "../chunk-THWIJG5C.js";
+import {
+  Marker,
+  MarkerContent
+} from "../chunk-IW4ZIXXG.js";
+import {
+  MessageScroller,
+  MessageScrollerButton,
+  MessageScrollerContent,
+  MessageScrollerItem,
+  MessageScrollerProvider,
+  MessageScrollerViewport
+} from "../chunk-GFG2R5BZ.js";
+import {
+  Message,
+  MessageContent
+} from "../chunk-JZOBIPFC.js";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupTextarea
+} from "../chunk-MHYAVXOE.js";
+import "../chunk-6FC65AZQ.js";
+import {
+  LazyMarkdown
+} from "../chunk-VY5U4VGV.js";
+import "../chunk-INNGGLMZ.js";
+import {
+  FileDropArea,
+  FileDropzone
+} from "../chunk-M7FYGAGO.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../chunk-V4LE2HWP.js";
+import {
+  Bubble,
+  BubbleContent
+} from "../chunk-F366BHWH.js";
+import "../chunk-EIY5LLSP.js";
+import "../chunk-NBUWGRQO.js";
+import {
+  Attachment,
+  AttachmentAction,
+  AttachmentActions,
+  AttachmentContent,
+  AttachmentDescription,
+  AttachmentGroup,
+  AttachmentMedia,
+  AttachmentTitle,
+  AttachmentTrigger
+} from "../chunk-EZCKWTH7.js";
+import "../chunk-ZRLUUZHK.js";
+import {
+  ActionDock
+} from "../chunk-42RTTHND.js";
+import "../chunk-QMA3WVB7.js";
+import {
+  Button
+} from "../chunk-HQRWRRZJ.js";
+import {
+  useIsMobile
+} from "../chunk-PIU5SSUV.js";
+import {
+  formatRelativeLong
+} from "../chunk-CS7DM3NV.js";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/chat.tsx
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
+import {
+  ArrowDown,
+  ArrowRight,
+  ArrowUp,
+  ArrowUpRight,
+  Download,
+  FileText,
+  LockKeyhole,
+  Paperclip,
+  Plus,
+  X
+} from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function useArrivingUserTurnId(messages) {
+  const seen = useRef(null);
+  seen.current ??= new Set(messages.map((m) => m.id));
+  useEffect(() => {
+    seen.current = new Set(messages.map((m) => m.id));
+  }, [messages]);
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const message = messages[i];
+    if (message.role === "user") return seen.current.has(message.id) ? void 0 : message.id;
+  }
+  return void 0;
+}
+function TimelineMarker({ label }) {
+  return /* @__PURE__ */ jsx(Marker, { variant: "separator", role: "separator", "aria-label": label, children: /* @__PURE__ */ jsx(MarkerContent, { children: label }) });
+}
+var ChatThread = forwardRef(
+  function ChatThread2({
+    messages,
+    pending = false,
+    pendingLabel = "Thinking\u2026",
+    scrollButtonLabel = "Scroll to latest message",
+    uploadingLabel,
+    maxHeight = "46vh",
+    appearance = "bubbles",
+    footer,
+    markdownComponents,
+    onOpenAttachment,
+    attachmentAction = "open",
+    className
+  }, ref) {
+    const timelineNow = /* @__PURE__ */ new Date();
+    const anchorId = useArrivingUserTurnId(messages);
+    const workspace = appearance === "workspace";
+    return /* @__PURE__ */ jsx(MessageScrollerProvider, { autoScroll: true, children: /* @__PURE__ */ jsxs(
+      MessageScroller,
+      {
+        ref,
+        style: { maxHeight },
+        className: cn("min-h-0", className),
+        children: [
+          /* @__PURE__ */ jsx(MessageScrollerViewport, { children: /* @__PURE__ */ jsxs(
+            MessageScrollerContent,
+            {
+              className: cn(
+                workspace ? "mx-auto w-full max-w-3xl gap-7 px-4 py-6 md:px-6 md:py-8" : "gap-2.5 px-px py-px"
+              ),
+              children: [
+                messages.map((m, index) => {
+                  const isUser = m.role === "user";
+                  const isFullWidth = m.width === "full";
+                  const relativeTime = formatRelativeLong(m.createdAt, timelineNow);
+                  const previousRelativeTime = formatRelativeLong(messages[index - 1]?.createdAt, timelineNow);
+                  const startsTimelineSection = relativeTime && relativeTime !== previousRelativeTime;
+                  return /* @__PURE__ */ jsxs(
+                    MessageScrollerItem,
+                    {
+                      messageId: m.id,
+                      scrollAnchor: m.id === anchorId,
+                      className: "flex flex-col gap-3",
+                      children: [
+                        startsTimelineSection ? /* @__PURE__ */ jsx(TimelineMarker, { label: relativeTime }) : null,
+                        /* @__PURE__ */ jsx(Message, { align: isUser ? "end" : "start", children: /* @__PURE__ */ jsxs(MessageContent, { children: [
+                          (m.content || m.text) && /* @__PURE__ */ jsx(
+                            Bubble,
+                            {
+                              variant: workspace ? isUser ? "muted" : "ghost" : isUser ? "default" : "muted",
+                              align: isUser ? "end" : "start",
+                              className: isFullWidth ? "w-full" : void 0,
+                              children: /* @__PURE__ */ jsx(
+                                BubbleContent,
+                                {
+                                  className: cn(
+                                    isFullWidth && "w-full",
+                                    workspace ? isUser ? "rounded-2xl px-4 py-2.5 text-[15px] leading-7" : "px-0 py-0 text-[15px] leading-7" : "px-3.5 py-2 text-sm leading-relaxed"
+                                  ),
+                                  children: m.content ?? (m.text ? /* @__PURE__ */ jsx(LazyMarkdown, { size: workspace ? "base" : "sm", components: markdownComponents, children: m.text }) : null)
+                                }
+                              )
+                            }
+                          ),
+                          m.attachments && m.attachments.length > 0 && /* @__PURE__ */ jsx(
+                            ChatAttachmentList,
+                            {
+                              attachments: m.attachments,
+                              onOpen: onOpenAttachment,
+                              openAction: attachmentAction,
+                              uploadingLabel,
+                              className: "px-0 pt-0"
+                            }
+                          )
+                        ] }) })
+                      ]
+                    },
+                    m.id
+                  );
+                }),
+                pending && /* @__PURE__ */ jsx(MessageScrollerItem, { children: /* @__PURE__ */ jsx(Message, { align: "start", children: /* @__PURE__ */ jsx(MessageContent, { children: /* @__PURE__ */ jsx(Trace, { className: workspace ? void 0 : "px-3.5 py-2", children: /* @__PURE__ */ jsx(TraceLine, { status: "running", children: /* @__PURE__ */ jsx(TraceTitle, { children: pendingLabel }) }) }) }) }) }),
+                footer && // Always painted: content-visibility:auto would contain the
+                // footer's paint and layout, clipping a ring or shadow at its
+                // edge and re-parenting anything fixed inside it.
+                /* @__PURE__ */ jsx(MessageScrollerItem, { className: "[content-visibility:visible]", children: /* @__PURE__ */ jsx(Message, { align: "start", children: /* @__PURE__ */ jsx(MessageContent, { children: footer }) }) })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(MessageScrollerButton, { variant: "outline", className: "rounded-full shadow-sm", children: [
+            /* @__PURE__ */ jsx(ArrowDown, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: scrollButtonLabel })
+          ] })
+        ]
+      }
+    ) });
+  }
+);
+function formatFileSize(size) {
+  if (size === void 0) return "File";
+  if (size < 1024) return `${size} B`;
+  if (size < 1048576) return `${Math.round(size / 1024)} KB`;
+  return `${(size / 1048576).toFixed(1)} MB`;
+}
+var ATTACHMENT_ACTIONS = {
+  open: { verb: "Open", icon: ArrowUpRight },
+  download: { verb: "Download", icon: Download }
+};
+var COMPOSER_SIZES = {
+  sm: { minHeight: "min-h-12", rows: 2 },
+  md: { minHeight: "min-h-[4.5rem]", rows: 2 },
+  lg: { minHeight: "min-h-32", rows: 3 }
+};
+function ChatAttachmentList({
+  attachments,
+  onRemove,
+  onOpen,
+  openAction = "open",
+  uploadingLabel = "Uploading\u2026",
+  className
+}) {
+  const { verb, icon: ActionIcon } = ATTACHMENT_ACTIONS[openAction];
+  return /* @__PURE__ */ jsx(AttachmentGroup, { className: cn("gap-2 px-3 pt-3", className), children: attachments.map((attachment) => {
+    const state = attachment.state ?? "done";
+    const opens = Boolean(onOpen) && state === "done";
+    return /* @__PURE__ */ jsxs(
+      Attachment,
+      {
+        state,
+        size: "sm",
+        className: "min-w-[12rem] rounded-xl p-2",
+        children: [
+          opens && /* @__PURE__ */ jsx(
+            AttachmentTrigger,
+            {
+              "aria-label": `${verb} ${attachment.name}`,
+              title: `${verb} ${attachment.name}`,
+              onClick: () => onOpen?.(attachment),
+              className: "rounded-xl focus-visible:ring-2 focus-visible:ring-ring/50"
+            }
+          ),
+          /* @__PURE__ */ jsx(AttachmentMedia, { variant: "icon", className: "h-9 w-9 rounded-lg bg-muted", children: /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4" }) }),
+          /* @__PURE__ */ jsxs(AttachmentContent, { className: "px-2", children: [
+            /* @__PURE__ */ jsx(AttachmentTitle, { className: "text-xs font-medium", children: attachment.name }),
+            /* @__PURE__ */ jsx(AttachmentDescription, { className: "text-[11px]", children: state === "uploading" ? uploadingLabel : opens ? `${formatFileSize(attachment.size)} \xB7 ${verb}` : formatFileSize(attachment.size) })
+          ] }),
+          onRemove ? /* @__PURE__ */ jsx(AttachmentActions, { children: /* @__PURE__ */ jsx(
+            AttachmentAction,
+            {
+              type: "button",
+              "aria-label": `Remove ${attachment.name}`,
+              onClick: () => onRemove(attachment),
+              children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+            }
+          ) }) : opens ? (
+            // The trigger covers the whole file; the icon only says what it does.
+            /* @__PURE__ */ jsx(AttachmentActions, { "aria-hidden": true, className: "pointer-events-none pr-1 text-muted-foreground", children: /* @__PURE__ */ jsx(ActionIcon, { className: "h-4 w-4" }) })
+          ) : null
+        ]
+      },
+      attachment.id
+    );
+  }) });
+}
+function ChatInput({
+  value,
+  onChange,
+  onSend,
+  pending = false,
+  disabled = false,
+  placeholder = "Type your message\u2026",
+  size = "md",
+  uploadingLabel,
+  voice = true,
+  voiceTitle,
+  voiceLang,
+  submitLabel,
+  autoFocus = false,
+  className,
+  inputRef,
+  attachments = [],
+  onFilesSelected,
+  onRemoveAttachment,
+  accept,
+  multiple = true,
+  addFilesLabel = "Add files",
+  appearance = "default",
+  helperText,
+  privacyNote
+}) {
+  const internalRef = useRef(null);
+  const ref = inputRef ?? internalRef;
+  const fileInputRef = useRef(null);
+  const isDisabled = pending || disabled;
+  const attachmentsReady = attachments.length > 0 && attachments.every((item) => item.state !== "uploading");
+  const canSubmit = !isDisabled && (Boolean(value.trim()) || attachmentsReady);
+  const submit = () => {
+    const trimmed = value.trim();
+    if (!trimmed && !attachmentsReady || isDisabled) return;
+    onSend(trimmed, attachments);
+  };
+  const spacious = appearance === "spacious";
+  const composerSize = COMPOSER_SIZES[size];
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "chat-input-container", className: "w-full", children: [
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        "data-slot": "chat-input",
+        "data-appearance": appearance,
+        className: "w-full",
+        onSubmit: (event) => {
+          if (event.target !== event.currentTarget) return;
+          event.preventDefault();
+          submit();
+        },
+        children: [
+          onFilesSelected && /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              accept,
+              multiple,
+              hidden: true,
+              onChange: (event) => {
+                const files = Array.from(event.currentTarget.files ?? []);
+                if (files.length > 0) void onFilesSelected(files);
+                event.currentTarget.value = "";
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            InputGroup,
+            {
+              className: cn(
+                // Opaque in both modes: the input group's own dark:bg-input/30
+                // would let the thread show through the composer.
+                "overflow-hidden bg-background dark:bg-background",
+                spacious ? "rounded-3xl" : "rounded-lg",
+                className
+              ),
+              children: [
+                attachments.length > 0 && /* @__PURE__ */ jsx(
+                  ChatAttachmentList,
+                  {
+                    attachments,
+                    onRemove: onRemoveAttachment,
+                    uploadingLabel,
+                    className: "w-full"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  InputGroupTextarea,
+                  {
+                    ref,
+                    value,
+                    onChange: (e) => onChange(e.target.value),
+                    onKeyDown: (e) => {
+                      if (e.key !== "Enter" || e.shiftKey) return;
+                      if (e.nativeEvent.isComposing || e.keyCode === 229) return;
+                      e.preventDefault();
+                      submit();
+                    },
+                    placeholder,
+                    rows: composerSize.rows,
+                    disabled: isDisabled,
+                    autoFocus,
+                    className: cn(
+                      composerSize.minHeight,
+                      // Grows with the text, then scrolls rather than pushing the thread away.
+                      "max-h-48 leading-relaxed disabled:opacity-70 placeholder:text-sm",
+                      spacious ? "px-6 pb-2 pt-6" : "px-4 py-3.5"
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  InputGroupAddon,
+                  {
+                    align: "block-end",
+                    "data-slot": "chat-input-actions",
+                    onClick: (event) => {
+                      if (!event.currentTarget.contains(event.target)) return;
+                      if (!event.target.closest("button")) ref.current?.focus();
+                    },
+                    className: cn(
+                      "gap-2",
+                      spacious ? "px-5 pb-5 pt-1" : "border-t border-border px-3 py-2.5"
+                    ),
+                    children: [
+                      onFilesSelected && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            type: "button",
+                            size: spacious ? "icon-lg" : "icon",
+                            variant: "ghost",
+                            "aria-label": "Add to conversation",
+                            children: /* @__PURE__ */ jsx(Plus, { className: cn(spacious && "h-5 w-5") })
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", side: "top", className: "min-w-52", children: /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => fileInputRef.current?.click(), children: [
+                          /* @__PURE__ */ jsx(Paperclip, { className: "h-4 w-4" }),
+                          addFilesLabel
+                        ] }) })
+                      ] }),
+                      voice && /* @__PURE__ */ jsx(
+                        VoiceDictationButton,
+                        {
+                          size: "icon",
+                          title: voiceTitle,
+                          lang: voiceLang,
+                          onCommit: (text) => onSend(text),
+                          className: spacious ? "h-12 w-12 border-transparent bg-transparent shadow-none hover:bg-muted" : void 0
+                        }
+                      ),
+                      helperText ? /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "data-slot": "chat-input-helper",
+                          className: "min-w-0 flex-1 truncate px-1 text-center text-xs font-normal text-muted-foreground sm:px-2 sm:text-sm",
+                          children: helperText
+                        }
+                      ) : /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+                      submitLabel ? /* @__PURE__ */ jsxs(
+                        Button,
+                        {
+                          type: "submit",
+                          disabled: !canSubmit,
+                          "data-chat-action": "submit",
+                          className: spacious ? "rounded-xl" : void 0,
+                          children: [
+                            submitLabel,
+                            /* @__PURE__ */ jsx(ArrowRight, { className: "ml-2 h-4 w-4" })
+                          ]
+                        }
+                      ) : /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          type: "submit",
+                          size: spacious ? "icon-lg" : "icon",
+                          disabled: !canSubmit,
+                          "aria-label": "Send",
+                          "data-chat-action": "submit",
+                          className: spacious ? "rounded-xl" : void 0,
+                          children: /* @__PURE__ */ jsx(ArrowUp, { className: cn(spacious && "h-5 w-5") })
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    privacyNote ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "chat-input-privacy",
+        className: "mt-3 flex items-center justify-center gap-2 px-4 text-center text-xs text-muted-foreground sm:text-sm",
+        children: [
+          /* @__PURE__ */ jsx(LockKeyhole, { "aria-hidden": true, className: "h-4 w-4 shrink-0" }),
+          /* @__PURE__ */ jsx("span", { children: privacyNote })
+        ]
+      }
+    ) : null
+  ] });
+}
+function VoiceHero({
+  onSubmit,
+  voiceTitle,
+  voiceLang,
+  onSwitchToText,
+  label,
+  switchLabel
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-5 py-6", children: [
+    /* @__PURE__ */ jsx(
+      VoiceDictationButton,
+      {
+        size: "lg",
+        title: voiceTitle,
+        lang: voiceLang,
+        onCommit: onSubmit,
+        className: "h-24 w-24 rounded-full p-0 shadow-lg transition-transform hover:scale-105 active:scale-95 [&_svg]:size-7"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-base font-medium text-foreground", children: label }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onSwitchToText,
+          className: "text-xs text-muted-foreground hover:text-foreground transition-colors underline underline-offset-4 decoration-muted-foreground/40",
+          children: switchLabel
+        }
+      )
+    ] })
+  ] });
+}
+var EXAMPLE_PROMPT_LAYOUTS = {
+  chips: "wrap",
+  row: "row",
+  cards: "grid"
+};
+function ExamplePrompts({
+  prompts,
+  onSelect,
+  label = "Try",
+  variant = "chips",
+  className
+}) {
+  const labelId = useId();
+  if (prompts.length === 0) return null;
+  const cards = variant === "cards";
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "chat-examples", "data-variant": variant, className: cn(cards ? "mt-4" : "mt-3", className), children: [
+    /* @__PURE__ */ jsx("p", { id: labelId, "data-slot": "chat-examples-label", className: "mb-2 text-left text-xs text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx(Suggestions, { role: "group", "aria-labelledby": labelId, layout: EXAMPLE_PROMPT_LAYOUTS[variant], children: prompts.map((prompt) => /* @__PURE__ */ jsx(
+      Suggestion,
+      {
+        suggestion: prompt,
+        onClick: onSelect,
+        className: cards ? "h-auto min-h-12 px-3 py-2.5 text-xs" : void 0
+      },
+      prompt
+    )) })
+  ] });
+}
+function ExamplePromptsLoading({ label, className }) {
+  const list = Array.isArray(label) ? label : [label];
+  const [idx, setIdx] = useState(0);
+  useEffect(() => {
+    if (list.length <= 1) return;
+    const id = setInterval(() => setIdx((i) => (i + 1) % list.length), 1800);
+    return () => clearInterval(id);
+  }, [list.length]);
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "chat-examples", "data-state": "loading", "aria-busy": "true", className: cn("mt-3", className), children: [
+    /* @__PURE__ */ jsx(Trace, { className: "mb-2", children: /* @__PURE__ */ jsx(TraceLine, { status: "running", className: "text-xs", children: /* @__PURE__ */ jsx(TraceTitle, { className: "animate-in fade-in duration-500", children: list[idx] }, idx) }) }),
+    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "flex gap-2 overflow-hidden", children: [36, 44, 28, 40].map((w, i) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "h-11 shrink-0 rounded-md bg-muted animate-pulse",
+        style: {
+          width: `${w * 4}px`,
+          animationDelay: `${i * 120}ms`
+        }
+      },
+      i
+    )) })
+  ] });
+}
+function ChatError({ children, className }) {
+  return /* @__PURE__ */ jsx("p", { "data-slot": "chat-error", role: "alert", className: cn("mt-2 text-xs text-destructive", className), children });
+}
+var Chat = forwardRef(function Chat2({
+  messages,
+  onSend,
+  onSendError,
+  pending = false,
+  pendingLabel,
+  emptyPendingContent,
+  error = null,
+  emptyTitle,
+  emptySubtitle,
+  examplePrompts = [],
+  examplePromptsLabel = "Try",
+  examplePromptsVariant = "chips",
+  examplePromptsLoading = false,
+  examplePromptsLoadingLabel = "Loading suggestions\u2026",
+  compactEmptyState = false,
+  defaultMode,
+  placeholder = "Type your message\u2026",
+  activePlaceholder = "Reply\u2026",
+  submitLabel,
+  attachments = [],
+  onFilesSelected,
+  onRemoveAttachment,
+  attachmentAccept,
+  addFilesLabel,
+  uploadingLabel,
+  composerAppearance = "default",
+  composerHelperText,
+  composerPrivacyNote,
+  emptyFileDropzone = false,
+  emptyFileDropzoneLabel = "Drop files here, or choose them",
+  emptyFileDropzoneDescription,
+  fileDrop = "conversation",
+  fileDropLabel,
+  fileDropDescription,
+  voice = true,
+  voiceTitle,
+  activeVoiceTitle,
+  voiceLang,
+  voiceHeroLabel = "Tap to speak",
+  voiceHeroSwitchLabel = "or type instead",
+  threadMaxHeight = "46vh",
+  scrollButtonLabel,
+  emptyAlign = "start",
+  emptyIcon,
+  emptyFooter,
+  layout = "embedded",
+  threadFooter,
+  markdownComponents,
+  onOpenAttachment,
+  attachmentAction,
+  className
+}, ref) {
+  const isMobile = useIsMobile();
+  const [input, setInput] = useState("");
+  const inputRef = useRef(null);
+  const conversationStarted = messages.length > 0;
+  const [userMode, setUserMode] = useState(null);
+  const mode = userMode ?? defaultMode ?? (isMobile ? "voice" : "text");
+  const send = useCallback(
+    async (text, sentAttachments = attachments) => {
+      const trimmed = text.trim();
+      if (!trimmed && sentAttachments.length === 0 || pending) return;
+      setInput("");
+      try {
+        await onSend(trimmed, sentAttachments);
+      } catch (cause) {
+        if (trimmed) {
+          setInput((current) => current ? current : trimmed);
+          if (mode === "voice") setUserMode("text");
+        }
+        if (onSendError) onSendError(cause);
+        else if (typeof globalThis.reportError === "function") globalThis.reportError(cause);
+        else console.error(cause);
+      }
+      window.setTimeout(() => inputRef.current?.focus(), 0);
+    },
+    [attachments, mode, onSend, onSendError, pending]
+  );
+  useImperativeHandle(
+    ref,
+    () => ({
+      focusInput: () => inputRef.current?.focus(),
+      clearInput: () => setInput("")
+    }),
+    []
+  );
+  const dropFiles = useCallback(
+    (files) => {
+      if (!conversationStarted && mode === "voice") setUserMode("text");
+      return onFilesSelected?.(files);
+    },
+    [conversationStarted, mode, onFilesSelected]
+  );
+  const application = layout === "application";
+  const workspace = layout === "workspace";
+  const showEmptyFileDropzone = emptyFileDropzone && Boolean(onFilesSelected) && attachments.length === 0;
+  const showEmptyPending = !conversationStarted && pending && Boolean(emptyPendingContent);
+  return /* @__PURE__ */ jsx(
+    FileDropArea,
+    {
+      "data-slot": "chat",
+      "data-layout": layout,
+      onFiles: onFilesSelected ? dropFiles : void 0,
+      disabled: fileDrop === false || showEmptyPending,
+      scope: fileDrop === "page" ? "page" : "area",
+      label: fileDropLabel,
+      description: fileDropDescription,
+      className: cn(
+        "w-full",
+        application && "flex min-h-[calc(100svh-4rem)] flex-1 flex-col md:block md:min-h-0",
+        workspace && "flex h-full min-h-0 flex-1 flex-col overflow-hidden",
+        className
+      ),
+      children: showEmptyPending ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-slot": "chat-empty-pending",
+          className: "flex min-h-0 flex-1 items-center justify-center px-4 py-8",
+          children: emptyPendingContent
+        }
+      ) : !conversationStarted ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-slot": "chat-empty",
+          className: cn(
+            emptyAlign === "center" && "mx-auto flex w-full max-w-3xl flex-col items-center text-center",
+            application && "min-h-0 max-w-none flex-1 md:max-w-3xl",
+            workspace && "min-h-0 max-w-none flex-1 overflow-y-auto overscroll-contain px-4 pb-20"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "data-slot": "chat-empty-intro",
+                className: cn(
+                  application && "flex flex-1 flex-col items-center justify-center px-6 py-8 md:contents",
+                  workspace && "mt-auto w-full flex-none px-0 py-0"
+                ),
+                children: [
+                  !compactEmptyState && emptyIcon && /* @__PURE__ */ jsx("div", { "data-slot": "chat-empty-icon", className: "mb-4", children: emptyIcon }),
+                  emptyTitle && !compactEmptyState && /* @__PURE__ */ jsx("h2", { "data-slot": "chat-empty-title", className: "text-3xl md:text-4xl font-medium tracking-tight leading-[1.1] mt-2 mb-3", children: emptyTitle }),
+                  emptySubtitle && !compactEmptyState && /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      "data-slot": "chat-empty-subtitle",
+                      className: cn(
+                        "text-base text-muted-foreground leading-relaxed mb-6 max-w-md",
+                        emptyAlign === "center" && "mx-auto"
+                      ),
+                      children: emptySubtitle
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              ActionDock,
+              {
+                shrink: false,
+                className: cn(
+                  application && "px-4 py-3 md:border-0 md:bg-transparent md:p-0 md:backdrop-blur-none md:supports-backdrop-filter:bg-transparent",
+                  !application && "border-0 bg-transparent p-0 backdrop-blur-none",
+                  workspace && "mb-auto mt-2 w-full max-w-3xl border-0 bg-transparent p-0 backdrop-blur-none supports-[backdrop-filter]:bg-transparent"
+                ),
+                children: [
+                  showEmptyFileDropzone && onFilesSelected && /* @__PURE__ */ jsx(
+                    FileDropzone,
+                    {
+                      multiple: true,
+                      onFiles: onFilesSelected,
+                      accept: attachmentAccept,
+                      label: emptyFileDropzoneLabel,
+                      description: emptyFileDropzoneDescription,
+                      icon: /* @__PURE__ */ jsx(FileText, {}),
+                      className: "mb-4 rounded-lg bg-muted/20 py-8"
+                    }
+                  ),
+                  mode === "voice" ? /* @__PURE__ */ jsx(
+                    VoiceHero,
+                    {
+                      onSubmit: (text) => void send(text),
+                      voiceTitle,
+                      voiceLang,
+                      label: voiceHeroLabel,
+                      switchLabel: voiceHeroSwitchLabel,
+                      onSwitchToText: () => setUserMode("text")
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    ChatInput,
+                    {
+                      value: input,
+                      onChange: setInput,
+                      onSend: (text) => void send(text),
+                      pending,
+                      placeholder,
+                      size: showEmptyFileDropzone || application && isMobile ? "md" : "lg",
+                      voice,
+                      voiceTitle,
+                      voiceLang,
+                      submitLabel,
+                      autoFocus: !isMobile,
+                      inputRef,
+                      attachments,
+                      onFilesSelected,
+                      onRemoveAttachment,
+                      accept: attachmentAccept,
+                      addFilesLabel,
+                      uploadingLabel,
+                      appearance: composerAppearance,
+                      helperText: composerHelperText,
+                      privacyNote: composerPrivacyNote,
+                      className: workspace ? "rounded-3xl shadow-sm" : void 0
+                    }
+                  ),
+                  error && /* @__PURE__ */ jsx(ChatError, { children: error }),
+                  !pending && examplePromptsLoading && /* @__PURE__ */ jsx(ExamplePromptsLoading, { label: examplePromptsLoadingLabel }),
+                  !pending && !examplePromptsLoading && examplePrompts.length > 0 && /* @__PURE__ */ jsx(
+                    ExamplePrompts,
+                    {
+                      prompts: examplePrompts,
+                      onSelect: (p) => void send(p),
+                      label: examplePromptsLabel,
+                      variant: examplePromptsVariant
+                    }
+                  ),
+                  emptyFooter && /* @__PURE__ */ jsx("div", { "data-slot": "chat-empty-footer", className: "mt-5", children: emptyFooter })
+                ]
+              }
+            )
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          ChatThread,
+          {
+            messages,
+            pending,
+            pendingLabel,
+            scrollButtonLabel,
+            uploadingLabel,
+            maxHeight: workspace || application && isMobile ? "none" : threadMaxHeight,
+            appearance: workspace ? "workspace" : "bubbles",
+            footer: threadFooter,
+            markdownComponents,
+            onOpenAttachment,
+            attachmentAction,
+            className: cn(
+              "mb-3",
+              application && "min-h-0 flex-1 px-4 py-4 md:px-0 md:py-0",
+              workspace && "mb-0 min-h-0 flex-1"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          ActionDock,
+          {
+            shrink: false,
+            className: cn(
+              "pt-3",
+              application && "px-4 py-3 md:bg-transparent md:px-0 md:pb-0 md:backdrop-blur-none md:supports-backdrop-filter:bg-transparent",
+              workspace && "border-0 bg-gradient-to-t from-background via-background to-transparent px-4 pb-[max(1.25rem,env(safe-area-inset-bottom))] pt-8 backdrop-blur-none supports-[backdrop-filter]:bg-gradient-to-t"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                ChatInput,
+                {
+                  value: input,
+                  onChange: setInput,
+                  onSend: (text) => void send(text),
+                  pending,
+                  placeholder: activePlaceholder,
+                  size: composerAppearance === "spacious" ? "lg" : "sm",
+                  voice,
+                  voiceTitle: activeVoiceTitle ?? voiceTitle,
+                  voiceLang,
+                  inputRef,
+                  attachments,
+                  onFilesSelected,
+                  onRemoveAttachment,
+                  accept: attachmentAccept,
+                  addFilesLabel,
+                  uploadingLabel,
+                  appearance: composerAppearance,
+                  helperText: composerHelperText,
+                  privacyNote: composerPrivacyNote,
+                  className: workspace ? "mx-auto max-w-3xl rounded-3xl shadow-sm" : void 0
+                }
+              ),
+              error && /* @__PURE__ */ jsx(ChatError, { className: workspace ? "mx-auto max-w-3xl px-2" : void 0, children: error })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+});
+export {
+  Chat,
+  ChatInput,
+  ChatThread
+};