@particle-academy/react-fancy 5.70.1 → 5.71.0

package/dist/chunk-UWYSJARZ.js

@@ -0,0 +1,620 @@
+import { ContentRenderer } from './chunk-NAYXNVNU.js';
+import { Avatar } from './chunk-UZCR7DK5.js';
+import { Badge } from './chunk-6FCQD2KQ.js';
+import { Button, sanitizeHref } from './chunk-OXERDFFF.js';
+import { cn } from './chunk-MMW2JGKZ.js';
+import { useId, useRef, useState, useCallback, useEffect, useImperativeHandle, Fragment as Fragment$1, useLayoutEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/ChatThread/chat-utils.ts
+var DEFAULT_LABELS = {
+  log: "Conversation",
+  loadEarlier: "Load earlier messages",
+  loadingEarlier: "Loading earlier messages...",
+  newMessages: (n) => n === 1 ? "1 new message" : `${n} new messages`,
+  internal: "Internal note",
+  pending: "Sending...",
+  failed: "Not sent",
+  proposal: "Proposed",
+  accept: "Accept",
+  reject: "Reject",
+  accepted: "Accepted",
+  rejected: "Rejected",
+  withdrawn: "Withdrawn",
+  attachments: "Attachments",
+  roles: {
+    user: "You",
+    assistant: "Assistant",
+    system: "System",
+    agent: "Agent",
+    staff: "Staff",
+    customer: "Customer"
+  }
+};
+function mergeLabels(labels) {
+  if (!labels) return DEFAULT_LABELS;
+  return {
+    ...DEFAULT_LABELS,
+    ...labels,
+    roles: { ...DEFAULT_LABELS.roles, ...labels.roles }
+  };
+}
+function toDate(value) {
+  if (value === void 0 || value === null || value === "") return null;
+  const d = new Date(value);
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+function dayKey(d) {
+  const p = (n) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`;
+}
+function defaultFormatTime(d) {
+  return d.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" });
+}
+function defaultFormatDay(d) {
+  return d.toLocaleDateString(void 0, { dateStyle: "medium" });
+}
+function roleLabel(role, labels) {
+  const known = labels.roles[role];
+  if (known) return known;
+  return role ? role.charAt(0).toUpperCase() + role.slice(1) : "";
+}
+function initials(name) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  const first = parts[0][0] ?? "";
+  const last = parts.length > 1 ? parts[parts.length - 1][0] ?? "" : "";
+  return (first + last).toUpperCase();
+}
+function isOwn(message, ownRoles) {
+  return message.own ?? ownRoles.includes(message.role);
+}
+var DEFAULT_GROUP_WINDOW_MS = 5 * 60 * 1e3;
+function continuesGroup(prev, curr, windowMs) {
+  if (!prev) return false;
+  if (prev.role !== curr.role) return false;
+  if ((prev.author?.name ?? "") !== (curr.author?.name ?? "")) return false;
+  if ((prev.visibility ?? "public") !== (curr.visibility ?? "public")) return false;
+  if (prev.proposal || curr.proposal) return false;
+  if (curr.role === "system") return false;
+  const a = toDate(prev.createdAt);
+  const b = toDate(curr.createdAt);
+  if (!a || !b) return false;
+  const gap = b.getTime() - a.getTime();
+  return gap >= 0 && gap <= windowMs;
+}
+function formatBytes(n) {
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+}
+var BORDER = "border-[color:var(--fancy-border,var(--color-zinc-200))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]";
+var SURFACE = "bg-[color:var(--fancy-surface,var(--color-white))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]";
+var SURFACE_MUTED = "bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]";
+var TEXT = "text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]";
+var TEXT_MUTED = "text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]";
+function useAcknowledgedAction(onActionError) {
+  const [busy, setBusy] = useState(false);
+  const busyRef = useRef(false);
+  const mounted = useRef(true);
+  const onErrorRef = useRef(onActionError);
+  onErrorRef.current = onActionError;
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const run = useCallback((fn, ctx) => {
+    if (busyRef.current) return;
+    const result = fn();
+    if (!result || typeof result.then !== "function") return;
+    busyRef.current = true;
+    setBusy(true);
+    const settle = () => {
+      busyRef.current = false;
+      if (mounted.current) setBusy(false);
+    };
+    void Promise.resolve(result).then(settle, (error) => {
+      settle();
+      const onError = onErrorRef.current;
+      if (onError) onError(error, ctx);
+      else throw error;
+    });
+  }, []);
+  return [busy, run];
+}
+function AttachmentItem({
+  attachment,
+  message,
+  renderAttachment
+}) {
+  let body;
+  if (renderAttachment) {
+    body = renderAttachment(attachment, message);
+  } else {
+    const href = sanitizeHref(attachment.url);
+    const size = typeof attachment.size === "number" ? /* @__PURE__ */ jsxs("span", { className: cn("ml-1", TEXT_MUTED), children: [
+      "(",
+      formatBytes(attachment.size),
+      ")"
+    ] }) : null;
+    body = href ? /* @__PURE__ */ jsxs("a", { href, target: "_blank", rel: "noopener noreferrer", className: "underline underline-offset-2 break-all", children: [
+      attachment.name,
+      size
+    ] }) : /* @__PURE__ */ jsxs("span", { className: "break-all", children: [
+      attachment.name,
+      size
+    ] });
+  }
+  return /* @__PURE__ */ jsx("li", { "data-chat-attachment": attachment.id, className: "text-sm", children: body });
+}
+function ProposalFooter({
+  message,
+  labels,
+  busy,
+  onAccept,
+  onReject
+}) {
+  const proposal = message.proposal;
+  const state = proposal.state ?? "pending";
+  if (state !== "pending") {
+    const text = state === "accepted" ? labels.accepted : state === "rejected" ? labels.rejected : labels.withdrawn;
+    const color = state === "accepted" ? "emerald" : state === "rejected" ? "red" : "zinc";
+    return /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(Badge, { color, variant: "soft", size: "sm", "data-chat-proposal-status": state, children: text }) });
+  }
+  if (!onAccept && !onReject) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: [
+    onAccept && /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        size: "sm",
+        color: "emerald",
+        disabled: busy,
+        "aria-busy": busy || void 0,
+        "data-chat-proposal-action": "accept",
+        onClick: onAccept,
+        children: proposal.acceptLabel ?? labels.accept
+      }
+    ),
+    onReject && /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        size: "sm",
+        variant: "ghost",
+        disabled: busy,
+        "aria-busy": busy || void 0,
+        "data-chat-proposal-action": "reject",
+        onClick: onReject,
+        children: proposal.rejectLabel ?? labels.reject
+      }
+    )
+  ] });
+}
+function ChatMessage({
+  message,
+  actions,
+  grouped = false,
+  className,
+  ownRoles = ["user"],
+  streaming = true,
+  contentOptions,
+  labels: labelsProp,
+  formatTime = defaultFormatTime,
+  renderAttachment,
+  onProposalAccept,
+  onProposalReject,
+  onActivity,
+  onActionError,
+  classNames
+}) {
+  const labels = mergeLabels(labelsProp);
+  const [busy, run] = useAcknowledgedAction(onActionError);
+  const status = message.status ?? "sent";
+  const visibility = message.visibility ?? "public";
+  const internal = visibility === "internal";
+  const own = isOwn(message, ownRoles);
+  const system = message.role === "system";
+  const proposal = message.proposal;
+  const date = toDate(message.createdAt);
+  const name = message.author?.name || roleLabel(message.role, labels);
+  const decide = (kind) => {
+    if (!proposal) return;
+    const cb = kind === "accept" ? onProposalAccept : onProposalReject;
+    if (!cb) return;
+    const ctx = {
+      type: kind === "accept" ? "proposal-accept" : "proposal-reject",
+      messageId: message.id,
+      proposalId: proposal.id
+    };
+    run(() => {
+      onActivity?.(ctx);
+      return cb(message);
+    }, ctx);
+  };
+  const body = message.format === "text" ? /* @__PURE__ */ jsx("div", { "data-chat-content": "", className: "whitespace-pre-wrap break-words", children: message.content }) : /* @__PURE__ */ jsx("div", { "data-chat-content": "", className: "min-w-0 break-words", children: /* @__PURE__ */ jsx(
+    ContentRenderer,
+    {
+      ...contentOptions,
+      value: message.content,
+      format: "markdown",
+      streaming: status === "streaming" ? streaming : false
+    }
+  ) });
+  const attachments = message.attachments && message.attachments.length > 0 ? /* @__PURE__ */ jsx("ul", { "data-chat-attachments": "", "aria-label": labels.attachments, className: "mt-2 flex flex-col gap-1", children: message.attachments.map((a) => /* @__PURE__ */ jsx(AttachmentItem, { attachment: a, message, renderAttachment }, a.id)) }) : null;
+  const statusText = status === "pending" ? /* @__PURE__ */ jsx("div", { "data-chat-status-text": "pending", className: cn("mt-1 text-xs", TEXT_MUTED), children: labels.pending }) : status === "failed" ? /* @__PURE__ */ jsx("div", { "data-chat-status-text": "failed", className: "mt-1 text-xs text-red-600 dark:text-red-400", children: labels.failed }) : null;
+  const actionsSlot = actions !== void 0 && actions !== null && actions !== false ? /* @__PURE__ */ jsx("div", { "data-chat-message-actions": "", className: cn("mt-1 flex flex-wrap items-center gap-1", classNames?.actions), children: actions }) : null;
+  const rootAttrs = {
+    "data-chat-message": message.id,
+    "data-chat-role": message.role,
+    "data-chat-status": status,
+    "data-chat-visibility": visibility,
+    "data-chat-own": own ? "" : void 0,
+    "data-chat-grouped": grouped ? "" : void 0,
+    "aria-busy": status === "streaming" ? true : void 0
+  };
+  if (system && !proposal) {
+    return /* @__PURE__ */ jsxs(
+      "article",
+      {
+        ...rootAttrs,
+        className: cn("flex flex-col items-center px-4 py-1 text-center text-xs", TEXT_MUTED, className, classNames?.message),
+        children: [
+          internal && /* @__PURE__ */ jsx(Badge, { color: "amber", variant: "soft", size: "sm", "data-chat-internal-label": "", children: labels.internal }),
+          /* @__PURE__ */ jsx("div", { className: cn("max-w-prose", classNames?.bubble), children: body }),
+          attachments,
+          actionsSlot
+        ]
+      }
+    );
+  }
+  const bubbleClass = cn(
+    "rounded-2xl px-3.5 py-2.5 text-sm",
+    TEXT,
+    internal ? "border border-dashed border-amber-400 bg-amber-50 dark:border-amber-500/60 dark:bg-amber-950/30" : proposal ? cn("border-2 border-violet-300 dark:border-violet-500/60", SURFACE) : own ? cn("border", BORDER, SURFACE) : SURFACE_MUTED,
+    status === "failed" && "ring-1 ring-red-400/70",
+    classNames?.bubble,
+    proposal && classNames?.proposal
+  );
+  const bubbleInner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    internal && /* @__PURE__ */ jsx("div", { className: "mb-1.5", children: /* @__PURE__ */ jsx(Badge, { color: "amber", variant: "soft", size: "sm", "data-chat-internal-label": "", children: labels.internal }) }),
+    proposal && /* @__PURE__ */ jsxs("div", { "data-chat-proposal-header": "", className: "mb-1.5 flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Badge, { color: "violet", variant: "soft", size: "sm", children: labels.proposal }),
+      proposal.title && /* @__PURE__ */ jsx("span", { className: "font-medium", children: proposal.title })
+    ] }),
+    body,
+    attachments,
+    proposal && /* @__PURE__ */ jsx(
+      ProposalFooter,
+      {
+        message,
+        labels,
+        busy,
+        onAccept: onProposalAccept ? () => decide("accept") : void 0,
+        onReject: onProposalReject ? () => decide("reject") : void 0
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      ...rootAttrs,
+      className: cn(
+        "flex gap-2.5 px-3",
+        grouped ? "pt-0.5" : "pt-3",
+        own && "flex-row-reverse",
+        className,
+        classNames?.message
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "w-8 shrink-0", "aria-hidden": grouped || void 0, children: !grouped && /* @__PURE__ */ jsx(Avatar, { size: "sm", src: message.author?.avatar, alt: "", fallback: initials(name) }) }),
+        /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 max-w-[85%] flex-col", own ? "items-end" : "items-start"), children: [
+          !grouped && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-chat-header": "",
+              className: cn("mb-1 flex items-baseline gap-2 text-xs", own && "flex-row-reverse", classNames?.header),
+              children: [
+                /* @__PURE__ */ jsx("span", { "data-chat-author": "", className: cn("font-medium", TEXT), children: name }),
+                date && /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), className: TEXT_MUTED, children: formatTime(date) })
+              ]
+            }
+          ),
+          proposal ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-chat-proposal": proposal.id,
+              "data-chat-proposal-state": proposal.state ?? "pending",
+              "aria-busy": busy || void 0,
+              className: cn("min-w-0 max-w-full", bubbleClass),
+              children: bubbleInner
+            }
+          ) : /* @__PURE__ */ jsx("div", { "data-chat-bubble": "", className: cn("min-w-0 max-w-full", bubbleClass), children: bubbleInner }),
+          statusText,
+          actionsSlot
+        ] })
+      ]
+    }
+  );
+}
+ChatMessage.displayName = "ChatMessage";
+var TEXT_MUTED2 = "text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]";
+var BORDER2 = "border-[color:var(--fancy-border,var(--color-zinc-200))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]";
+var useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function ChatThread({
+  ref,
+  messages,
+  heading,
+  headingLevel = 2,
+  onLoadEarlier,
+  hasEarlier,
+  loadingEarlier = false,
+  stickToBottom = true,
+  bottomThreshold = 48,
+  onAtBottomChange,
+  separators = "none",
+  formatDay = defaultFormatDay,
+  groupConsecutive = false,
+  renderActions,
+  composer,
+  empty,
+  classNames,
+  className,
+  // message display
+  ownRoles = ["user"],
+  streaming = true,
+  contentOptions,
+  labels: labelsProp,
+  formatTime,
+  renderAttachment,
+  onProposalAccept,
+  onProposalReject,
+  onActivity,
+  onActionError,
+  onScroll: onScrollProp,
+  ...rest
+}) {
+  const labels = mergeLabels(labelsProp);
+  const headingId = useId();
+  const logRef = useRef(null);
+  const contentRef = useRef(null);
+  const atBottomRef = useRef(true);
+  const seenRef = useRef(null);
+  const [atBottom, setAtBottom] = useState(true);
+  const [unseen, setUnseen] = useState(0);
+  const [loadBusy, runLoad] = useAcknowledgedAction(onActionError);
+  const onAtBottomChangeRef = useRef(onAtBottomChange);
+  onAtBottomChangeRef.current = onAtBottomChange;
+  const measure = useCallback(
+    (el) => el.scrollHeight - el.scrollTop - el.clientHeight <= bottomThreshold,
+    [bottomThreshold]
+  );
+  const commitAtBottom = useCallback((value) => {
+    const changed = atBottomRef.current !== value;
+    atBottomRef.current = value;
+    setAtBottom(value);
+    if (value) setUnseen(0);
+    if (changed) onAtBottomChangeRef.current?.(value);
+  }, []);
+  const scrollLogToBottom = useCallback(() => {
+    const el = logRef.current;
+    if (!el) return;
+    el.scrollTop = el.scrollHeight;
+  }, []);
+  useIsoLayoutEffect(() => {
+    const el = logRef.current;
+    if (!el) return;
+    const ids = messages.map((m) => m.id);
+    const first = ids[0];
+    const last = ids[ids.length - 1];
+    const prev = seenRef.current;
+    if (!prev) {
+      if (stickToBottom) scrollLogToBottom();
+    } else {
+      const prepended = prev.last !== void 0 && prev.last === last && prev.first !== void 0 && prev.first !== first && ids.includes(prev.first);
+      if (prepended) {
+        if (stickToBottom && atBottomRef.current) scrollLogToBottom();
+        else el.scrollTop = prev.scrollTop + (el.scrollHeight - prev.scrollHeight);
+      } else {
+        const lastIndex = prev.last === void 0 ? -1 : ids.indexOf(prev.last);
+        const appended = [];
+        for (let i = lastIndex + 1; i < messages.length; i++) {
+          if (!prev.ids.has(messages[i].id)) appended.push(messages[i]);
+        }
+        if (stickToBottom && atBottomRef.current) {
+          scrollLogToBottom();
+        } else if (stickToBottom && appended.some((m) => isOwn(m, ownRoles))) {
+          scrollLogToBottom();
+        } else if (appended.length > 0) {
+          setUnseen((n) => n + appended.length);
+        }
+      }
+    }
+    seenRef.current = { ids: new Set(ids), first, last, scrollHeight: el.scrollHeight, scrollTop: el.scrollTop };
+    const nowAtBottom = measure(el);
+    if (nowAtBottom !== atBottomRef.current || nowAtBottom) commitAtBottom(nowAtBottom);
+  }, [messages, stickToBottom, measure, commitAtBottom, scrollLogToBottom]);
+  useEffect(() => {
+    const content = contentRef.current;
+    if (!content || !stickToBottom || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => {
+      if (atBottomRef.current) scrollLogToBottom();
+    });
+    ro.observe(content);
+    return () => ro.disconnect();
+  }, [stickToBottom, scrollLogToBottom]);
+  const onScroll = useCallback(
+    (e) => {
+      onScrollProp?.(e);
+      if (seenRef.current) seenRef.current.scrollTop = e.currentTarget.scrollTop;
+      const now = measure(e.currentTarget);
+      if (now !== atBottomRef.current || now) commitAtBottom(now);
+    },
+    [measure, commitAtBottom, onScrollProp]
+  );
+  const jumpToLatest = useCallback(() => {
+    onActivity?.({ type: "jump-to-latest", unseen });
+    scrollLogToBottom();
+    commitAtBottom(true);
+    logRef.current?.focus({ preventScroll: true });
+  }, [onActivity, unseen, scrollLogToBottom, commitAtBottom]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      scrollToLatest() {
+        scrollLogToBottom();
+        const el = logRef.current;
+        if (el) commitAtBottom(measure(el));
+      },
+      scrollToMessage(id) {
+        const el = logRef.current;
+        if (!el) return false;
+        const target = [...el.querySelectorAll("[data-chat-message]")].find(
+          (n) => n.getAttribute("data-chat-message") === id
+        );
+        if (!target) return false;
+        el.scrollTop = target.offsetTop;
+        commitAtBottom(measure(el));
+        return true;
+      },
+      get element() {
+        return logRef.current;
+      }
+    }),
+    [scrollLogToBottom, commitAtBottom, measure]
+  );
+  const showLoadEarlier = Boolean(onLoadEarlier) && (hasEarlier ?? true);
+  const earlierBusy = loadingEarlier || loadBusy;
+  const showJump = unseen > 0 && !atBottom;
+  const groupWindow = groupConsecutive === true ? DEFAULT_GROUP_WINDOW_MS : typeof groupConsecutive === "number" ? groupConsecutive : 0;
+  const items = [];
+  let prevDay;
+  messages.forEach((m, i) => {
+    const date = toDate(m.createdAt);
+    let separator = null;
+    if (separators === "day" && date) {
+      const key = dayKey(date);
+      if (key !== prevDay) {
+        separator = /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-chat-day-separator": key,
+            className: cn("flex items-center gap-3 px-4 pt-4 text-xs", TEXT_MUTED2, classNames?.separator),
+            children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("h-px flex-1 border-t", BORDER2) }),
+              /* @__PURE__ */ jsx("span", { children: formatDay(date) }),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("h-px flex-1 border-t", BORDER2) })
+            ]
+          }
+        );
+        prevDay = key;
+      }
+    }
+    const grouped = groupWindow > 0 && !separator && continuesGroup(messages[i - 1], m, groupWindow);
+    items.push(
+      /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        separator,
+        /* @__PURE__ */ jsx(
+          ChatMessage,
+          {
+            message: m,
+            grouped,
+            actions: renderActions?.(m),
+            ownRoles,
+            streaming,
+            contentOptions,
+            labels: labelsProp,
+            formatTime,
+            renderAttachment,
+            onProposalAccept,
+            onProposalReject,
+            onActivity,
+            onActionError,
+            classNames
+          }
+        )
+      ] }, m.id)
+    );
+  });
+  const H = `h${headingLevel}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-react-fancy-chat-thread": "",
+      ...rest,
+      className: cn("flex min-h-0 flex-col", className, classNames?.root),
+      children: [
+        heading !== void 0 && heading !== null && /* @__PURE__ */ jsx(
+          H,
+          {
+            id: headingId,
+            "data-react-fancy-chat-thread-heading": "",
+            className: cn("shrink-0 px-4 py-3 text-sm font-semibold", classNames?.heading),
+            children: heading
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: logRef,
+              "data-react-fancy-chat-thread-log": "",
+              role: "log",
+              "aria-live": "polite",
+              "aria-relevant": "additions",
+              "aria-label": heading ? void 0 : labels.log,
+              "aria-labelledby": heading ? headingId : void 0,
+              tabIndex: 0,
+              onScroll,
+              className: cn(
+                "relative min-h-0 flex-1 overflow-y-auto overscroll-contain focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[color:var(--fancy-focus,var(--color-blue-500))]",
+                classNames?.log
+              ),
+              children: /* @__PURE__ */ jsxs("div", { ref: contentRef, className: "flex flex-col pb-3", children: [
+                showLoadEarlier && /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-3", children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    size: "sm",
+                    variant: "ghost",
+                    "data-react-fancy-chat-thread-load-earlier": "",
+                    disabled: earlierBusy,
+                    "aria-busy": earlierBusy || void 0,
+                    onClick: () => runLoad(() => {
+                      onActivity?.({ type: "load-earlier" });
+                      return onLoadEarlier();
+                    }, { type: "load-earlier" }),
+                    children: earlierBusy ? labels.loadingEarlier : labels.loadEarlier
+                  }
+                ) }),
+                messages.length === 0 && empty !== void 0 && /* @__PURE__ */ jsx("div", { "data-react-fancy-chat-thread-empty": "", className: cn("px-4 py-8 text-center text-sm", TEXT_MUTED2), children: empty }),
+                items
+              ] })
+            }
+          ),
+          showJump && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-3 flex justify-center", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              "data-react-fancy-chat-thread-jump": "",
+              "data-unseen": unseen,
+              iconTrailing: "chevron-down",
+              className: cn("pointer-events-auto shadow-md", classNames?.jump),
+              onClick: jumpToLatest,
+              children: labels.newMessages(unseen)
+            }
+          ) })
+        ] }),
+        composer !== void 0 && composer !== null && /* @__PURE__ */ jsx("div", { "data-react-fancy-chat-thread-composer": "", className: cn("shrink-0", classNames?.composer), children: composer })
+      ]
+    }
+  );
+}
+ChatThread.displayName = "ChatThread";
+
+export { ChatMessage, ChatThread };
+//# sourceMappingURL=chunk-UWYSJARZ.js.map
+//# sourceMappingURL=chunk-UWYSJARZ.js.map