@epicbagel/saas-kit 1.21.0 → 1.22.0

package/dist/primitives/chat.js

@@ -1,43 +1,1224 @@
 "use client";
 "use client";
 import {
-  Chat,
-  ChatCopyAction,
-  ChatInput,
-  ChatThread
-} from "../chunk-C23Q4FRM.js";
-import "../chunk-Z45YKVAM.js";
-import "../chunk-ZGTPNSR7.js";
-import "../chunk-KF4X37DP.js";
-import "../chunk-IJG2B3Y2.js";
-import "../chunk-IW4ZIXXG.js";
-import "../chunk-OUZSIA5G.js";
+  Trace,
+  TraceLine,
+  TraceTitle
+} from "../chunk-Z45YKVAM.js";
+import {
+  VoiceDictationButton
+} from "../chunk-ZGTPNSR7.js";
+import {
+  VoiceSessionControls
+} from "../chunk-KF4X37DP.js";
+import {
+  Suggestion,
+  Suggestions
+} from "../chunk-IJG2B3Y2.js";
+import {
+  Marker,
+  MarkerContent
+} from "../chunk-IW4ZIXXG.js";
+import {
+  MessageScroller,
+  MessageScrollerButton,
+  MessageScrollerContent,
+  MessageScrollerItem,
+  MessageScrollerProvider,
+  MessageScrollerViewport
+} from "../chunk-OUZSIA5G.js";
 import "../chunk-36LNA4WM.js";
-import "../chunk-H4XH2PPU.js";
+import {
+  Message,
+  MessageAction,
+  MessageActions,
+  MessageContent
+} from "../chunk-H4XH2PPU.js";
 import "../chunk-GA5SX7FE.js";
-import "../chunk-QTPPNK6F.js";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupTextarea
+} from "../chunk-QTPPNK6F.js";
 import "../chunk-6FC65AZQ.js";
-import "../chunk-WHDHUYS6.js";
-import "../chunk-VY5U4VGV.js";
+import {
+  FileDropArea,
+  FileDropzone
+} from "../chunk-WHDHUYS6.js";
+import {
+  LazyMarkdown
+} from "../chunk-VY5U4VGV.js";
 import "../chunk-INNGGLMZ.js";
-import "../chunk-4HWCNRK4.js";
-import "../chunk-V4LE2HWP.js";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger
+} from "../chunk-4HWCNRK4.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../chunk-V4LE2HWP.js";
 import "../chunk-ZRLUUZHK.js";
-import "../chunk-F366BHWH.js";
+import {
+  Bubble,
+  BubbleContent
+} from "../chunk-F366BHWH.js";
 import "../chunk-EIY5LLSP.js";
 import "../chunk-NBUWGRQO.js";
-import "../chunk-CYDICVH2.js";
-import "../chunk-42RTTHND.js";
+import {
+  Attachment,
+  AttachmentAction,
+  AttachmentActions,
+  AttachmentContent,
+  AttachmentDescription,
+  AttachmentGroup,
+  AttachmentMedia,
+  AttachmentTitle,
+  AttachmentTrigger
+} from "../chunk-CYDICVH2.js";
+import {
+  ActionDock
+} from "../chunk-42RTTHND.js";
 import "../chunk-QMA3WVB7.js";
 import "../chunk-3OWGL4Q2.js";
 import "../chunk-5OF6D3GH.js";
-import "../chunk-W326GKML.js";
-import "../chunk-G6SRSWXB.js";
+import {
+  Button
+} from "../chunk-W326GKML.js";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
 import "../chunk-GJ7S3L6R.js";
-import "../chunk-ZWZAAGQF.js";
+import {
+  useCopyToClipboard
+} from "../chunk-ZWZAAGQF.js";
 import "../chunk-RPSRCB5O.js";
-import "../chunk-PIU5SSUV.js";
-import "../chunk-CS7DM3NV.js";
+import {
+  useIsMobile
+} from "../chunk-PIU5SSUV.js";
+import {
+  formatRelativeLong
+} from "../chunk-CS7DM3NV.js";
+
+// src/primitives/chat.tsx
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
+import {
+  ArrowDown,
+  ArrowRight,
+  ArrowUp,
+  ArrowUpRight,
+  Check,
+  ChevronUp,
+  Copy,
+  Download,
+  FileText,
+  LockKeyhole,
+  Paperclip,
+  Plus,
+  X
+} from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function offersActions(message) {
+  if (message.status) return false;
+  return message.actions ?? message.role === "assistant";
+}
+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" && message.status !== "running") {
+      return seen.current.has(message.id) ? void 0 : message.id;
+    }
+  }
+  return void 0;
+}
+function timelineMarkers(messages, now) {
+  let previous = null;
+  return messages.map((message) => {
+    if (message.status === "running") return null;
+    const relativeTime = formatRelativeLong(message.createdAt, now);
+    const opens = relativeTime && relativeTime !== previous ? relativeTime : null;
+    previous = relativeTime;
+    return opens;
+  });
+}
+function TimelineMarker({ label }) {
+  return /* @__PURE__ */ jsx(Marker, { variant: "separator", role: "separator", "aria-label": label, children: /* @__PURE__ */ jsx(MarkerContent, { children: label }) });
+}
+function ChatRunningLine({
+  label,
+  align = "start",
+  workspace
+}) {
+  return /* @__PURE__ */ jsx(Message, { align, 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: 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",
+    messageActions,
+    className
+  }, ref) {
+    const markers = timelineMarkers(messages, /* @__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-10 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";
+                  if (m.status === "running") {
+                    return /* @__PURE__ */ jsx(MessageScrollerItem, { children: /* @__PURE__ */ jsx(
+                      ChatRunningLine,
+                      {
+                        label: m.text || pendingLabel,
+                        align: isUser ? "end" : "start",
+                        workspace
+                      }
+                    ) }, m.id);
+                  }
+                  const isFullWidth = m.width === "full";
+                  const marker = markers[index];
+                  const actions = messageActions && offersActions(m) ? messageActions(m) : null;
+                  return /* @__PURE__ */ jsxs(
+                    MessageScrollerItem,
+                    {
+                      messageId: m.id,
+                      scrollAnchor: m.id === anchorId,
+                      className: cn("flex flex-col", workspace ? "gap-5" : "gap-3"),
+                      children: [
+                        marker ? /* @__PURE__ */ jsx(TimelineMarker, { label: marker }) : 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"
+                            }
+                          ),
+                          actions != null && actions !== false ? (
+                            // Unboxed workspace turns pull the row out by the
+                            // button's inset, so the first icon lines up with
+                            // the text above it.
+                            /* @__PURE__ */ jsx(
+                              MessageActions,
+                              {
+                                className: cn(
+                                  workspace && (isUser ? "-me-2 pointer-coarse:-me-3.5" : "-ms-2 pointer-coarse:-ms-3.5")
+                                ),
+                                children: actions
+                              }
+                            )
+                          ) : null
+                        ] }) })
+                      ]
+                    },
+                    m.id
+                  );
+                }),
+                pending && /* @__PURE__ */ jsx(MessageScrollerItem, { children: /* @__PURE__ */ jsx(ChatRunningLine, { label: pendingLabel, workspace }) }),
+                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 ChatCopyAction({
+  message,
+  label = "Copy",
+  copiedLabel = "Copied",
+  onCopy,
+  resetAfter = 2e3
+}) {
+  const { copied, copy } = useCopyToClipboard({ resetAfter });
+  const text = message.text;
+  if (!text) return null;
+  return /* @__PURE__ */ jsx(
+    MessageAction,
+    {
+      tooltip: copied ? copiedLabel : label,
+      "data-copied": copied || void 0,
+      onClick: async () => {
+        const ok = await copy(text);
+        onCopy?.(ok);
+      },
+      children: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {})
+    }
+  );
+}
+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,
+  voiceSession,
+  voiceTitle,
+  voiceLang,
+  submitLabel,
+  autoFocus = false,
+  className,
+  inputRef,
+  attachments = [],
+  onFilesSelected,
+  onRemoveAttachment,
+  accept,
+  multiple = true,
+  addFilesLabel = "Add files",
+  appearance = "default",
+  compactOnBlur = false,
+  header,
+  helperText,
+  privacyNote
+}) {
+  const internalRef = useRef(null);
+  const ref = inputRef ?? internalRef;
+  const fileInputRef = useRef(null);
+  const [editing, setEditing] = useState(false);
+  const focusVersion = useRef(0);
+  const isDisabled = pending || disabled;
+  const hasText = Boolean(value.trim());
+  const attachmentsReady = attachments.length > 0 && attachments.every((item) => item.state !== "uploading");
+  const canSubmit = !isDisabled && (hasText || attachmentsReady);
+  const liveVoiceActive = voiceSession && voiceSession.state !== "disconnected" && voiceSession.state !== "error";
+  const submit = () => {
+    const trimmed = value.trim();
+    if (!trimmed && !attachmentsReady || isDisabled) return;
+    onSend(trimmed, attachments);
+  };
+  const spacious = appearance === "spacious";
+  const composerSize = COMPOSER_SIZES[size];
+  const compact = compactOnBlur && !editing && value.length === 0 && attachments.length === 0;
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "chat-input-container", className: "w-full", children: [
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        "data-slot": "chat-input",
+        "data-appearance": appearance,
+        "data-compact": compact || void 0,
+        className: "w-full",
+        onFocusCapture: (event) => {
+          focusVersion.current += 1;
+          if (event.nativeEvent.target === ref.current) setEditing(true);
+        },
+        onBlurCapture: (event) => {
+          if (event.currentTarget.contains(event.relatedTarget)) return;
+          const form = event.currentTarget;
+          const blurredAt = ++focusVersion.current;
+          queueMicrotask(() => {
+            if (form.isConnected && focusVersion.current === blurredAt) setEditing(false);
+          });
+        },
+        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: [
+                header && /* @__PURE__ */ jsx(
+                  InputGroupAddon,
+                  {
+                    align: "block-start",
+                    className: "w-full cursor-default border-b border-border bg-muted/50 p-0 [.border-b]:pb-0",
+                    onClick: () => {
+                    },
+                    children: header
+                  }
+                ),
+                liveVoiceActive && /* @__PURE__ */ jsx(InputGroupAddon, { align: "block-start", className: "w-full cursor-default border-b border-border p-0 [.border-b]:pb-0", children: /* @__PURE__ */ jsx(VoiceSessionControls, { ...voiceSession }) }),
+                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: compact ? 1 : composerSize.rows,
+                    disabled: isDisabled,
+                    autoFocus,
+                    className: cn(
+                      compact ? "min-h-[44px] max-h-24 min-w-0" : composerSize.minHeight,
+                      // Grows with the text, then scrolls rather than pushing the thread away.
+                      "leading-relaxed disabled:opacity-70 placeholder:text-sm",
+                      !compact && "max-h-48",
+                      compact ? "px-4 py-2" : 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(
+                      compact ? "gap-1 px-2 pb-2 pt-0" : "gap-2",
+                      !compact && (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 && !compact ? "icon-lg" : "icon",
+                            variant: "ghost",
+                            "aria-label": "Add to conversation",
+                            className: compactOnBlur ? "min-h-[44px] min-w-[44px] shrink-0" : void 0,
+                            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
+                        ] }) })
+                      ] }),
+                      helperText ? /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "data-slot": "chat-input-helper",
+                          className: cn("min-w-0 flex-1 truncate px-1 text-center text-xs font-normal text-muted-foreground sm:px-2 sm:text-sm", compact && "hidden"),
+                          children: helperText
+                        }
+                      ) : null,
+                      (!helperText || compact) && /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+                      voice && /* @__PURE__ */ jsx(
+                        VoiceDictationButton,
+                        {
+                          size: "icon",
+                          title: voiceTitle,
+                          lang: voiceLang,
+                          disabled: Boolean(isDisabled || liveVoiceActive),
+                          onCommit: (text) => onSend(text),
+                          className: cn(
+                            spacious && "border-transparent bg-transparent shadow-none hover:bg-muted",
+                            spacious && !compact && "h-12 w-12",
+                            compactOnBlur && "min-h-[44px] min-w-[44px] shrink-0"
+                          )
+                        }
+                      ),
+                      voiceSession && !liveVoiceActive && !hasText && attachments.length === 0 ? /* @__PURE__ */ jsx(VoiceSessionControls, { ...voiceSession, disabled: voiceSession.disabled || isDisabled }) : submitLabel ? /* @__PURE__ */ jsxs(
+                        Button,
+                        {
+                          type: "submit",
+                          disabled: !canSubmit,
+                          "data-chat-action": "submit",
+                          className: cn(spacious && "rounded-xl", compactOnBlur && "min-h-[44px] min-w-[44px] shrink-0"),
+                          children: [
+                            submitLabel,
+                            /* @__PURE__ */ jsx(ArrowRight, { className: "ml-2 h-4 w-4" })
+                          ]
+                        }
+                      ) : /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          type: "submit",
+                          size: !voiceSession && spacious && !compact ? "icon-lg" : "icon",
+                          shape: voiceSession ? "circle" : void 0,
+                          disabled: !canSubmit,
+                          "aria-label": "Send",
+                          "data-chat-action": "submit",
+                          className: cn(
+                            spacious && !voiceSession && "rounded-xl",
+                            (voiceSession || compactOnBlur) && "min-h-[44px] min-w-[44px] shrink-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,
+  voice,
+  voiceSession,
+  voiceTitle,
+  voiceLang,
+  onSwitchToText,
+  label,
+  switchLabel
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-5 py-6", children: [
+    voiceSession ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(VoiceSessionControls, { ...voiceSession, size: "hero" }),
+      voice && /* @__PURE__ */ jsx(
+        VoiceDictationButton,
+        {
+          size: "icon",
+          title: voiceTitle,
+          lang: voiceLang,
+          onCommit: onSubmit,
+          disabled: Boolean(voiceSession.disabled || voiceSession.state !== "disconnected" && voiceSession.state !== "error")
+        }
+      )
+    ] }) : /* @__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 ChatSuggestions({
+  slot,
+  items,
+  onSelect,
+  label,
+  showLabel = true,
+  variant = "chips",
+  disabled = false,
+  className
+}) {
+  const labelId = useId();
+  if (items.length === 0) return null;
+  const cards = variant === "cards";
+  return /* @__PURE__ */ jsxs("div", { "data-slot": slot, "data-variant": variant, className, children: [
+    showLabel && /* @__PURE__ */ jsx("p", { id: labelId, "data-slot": `${slot}-label`, className: "mb-2 text-left text-xs text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx(
+      Suggestions,
+      {
+        role: "group",
+        "aria-labelledby": showLabel ? labelId : void 0,
+        "aria-label": showLabel ? void 0 : label,
+        layout: EXAMPLE_PROMPT_LAYOUTS[variant],
+        children: items.map((item) => /* @__PURE__ */ jsx(
+          Suggestion,
+          {
+            suggestion: item,
+            onClick: onSelect,
+            disabled,
+            className: cards ? "h-auto min-h-12 px-3 py-2.5 text-xs" : void 0
+          },
+          item
+        ))
+      }
+    )
+  ] });
+}
+function MobileReplySuggestions({
+  items,
+  onSelect,
+  label,
+  moreLabel,
+  closeLabel,
+  disabled
+}) {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const closeRef = useRef(null);
+  useEffect(() => {
+    if (disabled) setOpen(false);
+  }, [disabled]);
+  const select = (item) => {
+    if (disabled) return;
+    setOpen(false);
+    onSelect(item);
+  };
+  const primary = items[0];
+  if (primary === void 0) return null;
+  return /* @__PURE__ */ jsxs(Drawer, { open, onOpenChange: setOpen, shouldScaleBackground: false, repositionInputs: false, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "chat-replies",
+        "data-variant": "compact",
+        role: "group",
+        "aria-label": label,
+        className: "flex w-full min-w-0 items-center text-foreground",
+        children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "bare",
+              disabled,
+              className: "h-[44px] min-h-[44px] min-w-0 flex-1 justify-start gap-2 px-3 text-left focus-visible:-ring-offset-2",
+              onClick: () => select(primary),
+              children: [
+                /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: primary })
+              ]
+            }
+          ),
+          items.length > 1 && /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              ref: triggerRef,
+              type: "button",
+              variant: "ghost",
+              size: "bare",
+              disabled,
+              className: "h-[44px] min-h-[44px] shrink-0 gap-1 px-3 text-muted-foreground focus-visible:-ring-offset-2",
+              children: [
+                moreLabel(items.length - 1),
+                /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": "true" })
+              ]
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      DrawerContent,
+      {
+        "aria-describedby": void 0,
+        className: "max-h-[min(85dvh,40rem)] overflow-hidden pb-[env(safe-area-inset-bottom)]",
+        onOpenAutoFocus: (event) => {
+          event.preventDefault();
+          closeRef.current?.focus({ preventScroll: true });
+        },
+        onCloseAutoFocus: (event) => {
+          event.preventDefault();
+          if (triggerRef.current?.isConnected && !triggerRef.current.disabled) {
+            triggerRef.current.focus({ preventScroll: true });
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxs(DrawerHeader, { align: "start", className: "flex shrink-0 items-center justify-between gap-3 border-b px-4 py-2", children: [
+            /* @__PURE__ */ jsx(DrawerTitle, { className: "min-w-0 break-words leading-snug", children: label }),
+            /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                ref: closeRef,
+                type: "button",
+                variant: "ghost",
+                size: "icon",
+                "aria-label": closeLabel,
+                className: "h-[44px] w-[44px] shrink-0",
+                children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "min-h-0 overflow-y-auto overscroll-contain", role: "group", "aria-label": label, children: items.map((item) => /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "bare",
+              disabled,
+              "data-slot": "chat-reply-option",
+              className: "min-h-[56px] w-full justify-between gap-4 rounded-none border-b px-4 py-4 text-left text-base font-normal whitespace-normal last:border-b-0 focus-visible:-ring-offset-2",
+              onClick: () => select(item),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words", children: item }),
+                /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": "true" })
+              ]
+            },
+            item
+          )) })
+        ]
+      }
+    )
+  ] });
+}
+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",
+  replySuggestions = [],
+  replySuggestionsLabel = "Suggested replies",
+  mobileCompactSuggestions = false,
+  replySuggestionsMoreLabel = (count) => `+${count} more`,
+  replySuggestionsCloseLabel = "Close suggested replies",
+  compactEmptyState = false,
+  defaultMode,
+  placeholder = "Type your message\u2026",
+  activePlaceholder = "Reply\u2026",
+  submitLabel,
+  attachments = [],
+  onFilesSelected,
+  onRemoveAttachment,
+  attachmentAccept,
+  addFilesLabel,
+  uploadingLabel,
+  composerAppearance = "default",
+  mobileCompactComposer = false,
+  composerHelperText,
+  composerPrivacyNote,
+  emptyFileDropzone = false,
+  emptyFileDropzoneLabel = "Drop files here, or choose them",
+  emptyFileDropzoneDescription,
+  fileDrop = "conversation",
+  fileDropLabel,
+  fileDropDescription,
+  voice = true,
+  voiceSession,
+  voiceTitle,
+  activeVoiceTitle,
+  voiceLang,
+  voiceHeroLabel = "Tap to speak",
+  voiceHeroSwitchLabel = "or type instead",
+  threadMaxHeight = "46vh",
+  scrollButtonLabel,
+  emptyAlign = "start",
+  emptyIcon,
+  emptyFooter,
+  layout = "embedded",
+  threadFooter,
+  markdownComponents,
+  onOpenAttachment,
+  attachmentAction,
+  messageActions,
+  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 = !voice && !voiceSession ? "text" : userMode ?? defaultMode ?? (isMobile ? "voice" : "text");
+  const reportSendError = useCallback(
+    (cause) => {
+      if (onSendError) onSendError(cause);
+      else if (typeof globalThis.reportError === "function") globalThis.reportError(cause);
+      else console.error(cause);
+    },
+    [onSendError]
+  );
+  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");
+        }
+        reportSendError(cause);
+      }
+      window.setTimeout(() => inputRef.current?.focus(), 0);
+    },
+    [attachments, mode, onSend, pending, reportSendError]
+  );
+  const sendSuggestion = useCallback(
+    async (text, focusInput = true) => {
+      const trimmed = text.trim();
+      if (!trimmed || pending) return;
+      try {
+        await onSend(trimmed, []);
+      } catch (cause) {
+        reportSendError(cause);
+      }
+      if (focusInput) window.setTimeout(() => inputRef.current?.focus(), 0);
+    },
+    [onSend, pending, reportSendError]
+  );
+  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 compactSuggestions = mobileCompactSuggestions && isMobile;
+  const showEmptyFileDropzone = emptyFileDropzone && Boolean(onFilesSelected) && attachments.length === 0;
+  const liveVoiceActive = voiceSession && voiceSession.state !== "disconnected" && voiceSession.state !== "error";
+  const showEmptyPending = !conversationStarted && pending && Boolean(emptyPendingContent) && !liveVoiceActive;
+  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),
+                      voice,
+                      voiceSession: voiceSession ? { ...voiceSession, disabled: voiceSession.disabled || pending } : void 0,
+                      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,
+                      voiceSession,
+                      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(
+                    ChatSuggestions,
+                    {
+                      slot: "chat-examples",
+                      items: examplePrompts,
+                      onSelect: (prompt) => void sendSuggestion(prompt),
+                      label: examplePromptsLabel,
+                      variant: examplePromptsVariant,
+                      className: examplePromptsVariant === "cards" ? "mt-4" : "mt-3"
+                    }
+                  ),
+                  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,
+            messageActions,
+            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",
+              workspace && mobileCompactComposer && "max-md:pb-[max(0.75rem,env(safe-area-inset-bottom))] max-md:pt-3"
+            ),
+            children: [
+              !compactSuggestions && /* @__PURE__ */ jsx(
+                ChatSuggestions,
+                {
+                  slot: "chat-replies",
+                  items: replySuggestions,
+                  onSelect: (reply) => void sendSuggestion(reply),
+                  label: replySuggestionsLabel,
+                  showLabel: false,
+                  disabled: pending,
+                  className: cn("mb-3", workspace && "mx-auto max-w-3xl")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ChatInput,
+                {
+                  header: compactSuggestions && replySuggestions.length > 0 ? /* @__PURE__ */ jsx(
+                    MobileReplySuggestions,
+                    {
+                      items: replySuggestions,
+                      onSelect: (reply) => void sendSuggestion(reply, false),
+                      label: replySuggestionsLabel,
+                      moreLabel: replySuggestionsMoreLabel,
+                      closeLabel: replySuggestionsCloseLabel,
+                      disabled: pending
+                    },
+                    JSON.stringify([messages.at(-1)?.id, replySuggestions])
+                  ) : void 0,
+                  value: input,
+                  onChange: setInput,
+                  onSend: (text) => void send(text),
+                  pending,
+                  placeholder: activePlaceholder,
+                  size: composerAppearance === "spacious" ? "lg" : "sm",
+                  voice,
+                  voiceSession,
+                  voiceTitle: activeVoiceTitle ?? voiceTitle,
+                  voiceLang,
+                  inputRef,
+                  attachments,
+                  onFilesSelected,
+                  onRemoveAttachment,
+                  accept: attachmentAccept,
+                  addFilesLabel,
+                  uploadingLabel,
+                  appearance: composerAppearance,
+                  compactOnBlur: mobileCompactComposer && isMobile,
+                  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,
   ChatCopyAction,