@veevarts/design-system 2.0.0-alpha.6 → 2.0.0-alpha.61

package/dist/assistant.js

@@ -0,0 +1,790 @@
+import { jsx as e, jsxs as N } from "react/jsx-runtime";
+import { useId as q, useState as H, useRef as M, useLayoutEffect as Y, useEffect as P, useCallback as G } from "react";
+import { h as L, I as F, a as te, s as le, B as R } from "./hasContent-BCRxiry-.js";
+import { cn as l, Accordion as oe, AccordionItem as ce, Chip as de, Alert as ue, Spinner as fe, Textarea as pe, ScrollShadow as me } from "@heroui/react";
+import "lucide-react";
+const x = {
+  base: "flex w-full min-w-0 flex-col gap-1.5",
+  baseUser: "items-end",
+  baseAssistant: "items-start",
+  header: "flex min-w-0 max-w-full flex-wrap items-center gap-x-2 gap-y-0.5",
+  mark: "inline-flex size-6 flex-none items-center justify-center rounded-full bg-ai-fill text-ai-accent",
+  author: "min-w-0 text-sm font-semibold text-ai-accent [overflow-wrap:anywhere]",
+  meta: "min-w-0 text-xs tabular-nums text-default-500 [overflow-wrap:anywhere]",
+  body: "min-w-0 text-sm leading-relaxed text-foreground [overflow-wrap:anywhere]",
+  bodyUser: "max-w-[85%] rounded-2xl rounded-br-md bg-ai-user-bubble px-4 py-2.5",
+  bodyAssistant: "w-full",
+  /** A plain string keeps the line breaks the person typed. */
+  plain: "whitespace-pre-wrap",
+  status: "m-0 flex min-w-0 items-center gap-1.5 text-xs font-medium [overflow-wrap:anywhere]",
+  /**
+   * The status mark's own 14px box. Without words it is all a sighted reader
+   * sees, so it keeps its place before Iconify has loaded the icon.
+   */
+  statusIcon: "inline-flex size-3.5 flex-none",
+  actions: "flex flex-wrap items-center gap-1",
+  /** The person's name, for screen readers only. */
+  userLabel: "sr-only",
+  /** The default status word when `statusLabel` is empty, for screen readers only: the icon shows it. */
+  statusFallback: "sr-only"
+}, he = {
+  stopped: "text-default-600",
+  error: "text-danger-600 dark:text-danger-500"
+}, ge = {
+  stopped: "solar:stop-circle-linear",
+  error: "solar:danger-circle-linear"
+}, xe = "solar:stars-minimalistic-linear", be = {
+  stopped: "Stopped",
+  error: "Failed"
+};
+function ae(t) {
+  return typeof t == "string" ? t.trim() !== "" : Array.isArray(t) ? t.some(ae) : L(t);
+}
+function we({
+  author: t,
+  authorLabel: o,
+  children: b,
+  status: u = "complete",
+  statusLabel: f,
+  meta: c,
+  actions: y,
+  icon: p = xe,
+  className: v,
+  classNames: n = {},
+  "data-testid": m = "assistant-message"
+}) {
+  const h = q(), r = t === "user", d = u === "complete" ? null : u === "stopped" ? "stopped" : "error", S = L(c) ? /* @__PURE__ */ e("span", { "data-testid": `${m}-meta`, className: l(x.meta, n.meta), children: c }) : null;
+  return /* @__PURE__ */ N(
+    "article",
+    {
+      "aria-labelledby": h,
+      "data-author": t,
+      "data-status": u,
+      "data-testid": m,
+      className: l(
+        x.base,
+        r ? x.baseUser : x.baseAssistant,
+        v,
+        n.base
+      ),
+      children: [
+        r ? /* @__PURE__ */ e("span", { id: h, className: x.userLabel, children: o }) : /* @__PURE__ */ N(
+          "header",
+          {
+            "data-testid": `${m}-header`,
+            className: l(x.header, n.header),
+            children: [
+              p ? /* @__PURE__ */ e(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  "data-testid": `${m}-mark`,
+                  className: x.mark,
+                  children: /* @__PURE__ */ e(F, { icon: p, width: 14, height: 14 })
+                }
+              ) : null,
+              /* @__PURE__ */ e("span", { id: h, "data-testid": `${m}-author`, className: x.author, children: o }),
+              S
+            ]
+          }
+        ),
+        L(b) ? /* @__PURE__ */ e(
+          "div",
+          {
+            "data-testid": `${m}-body`,
+            className: l(
+              x.body,
+              r ? x.bodyUser : x.bodyAssistant,
+              typeof b == "string" && x.plain,
+              n.body
+            ),
+            children: b
+          }
+        ) : null,
+        d ? /* @__PURE__ */ N(
+          "p",
+          {
+            "data-testid": `${m}-status`,
+            className: l(
+              x.status,
+              he[d],
+              n.status
+            ),
+            children: [
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  "data-testid": `${m}-status-icon`,
+                  className: x.statusIcon,
+                  children: /* @__PURE__ */ e(F, { icon: ge[d], width: 14, height: 14 })
+                }
+              ),
+              ae(f) ? /* @__PURE__ */ e("span", { children: f }) : /* @__PURE__ */ e("span", { className: x.statusFallback, children: be[d] })
+            ]
+          }
+        ) : null,
+        r ? S : null,
+        L(y) ? /* @__PURE__ */ e(
+          "div",
+          {
+            "data-testid": `${m}-actions`,
+            className: l(x.actions, n.actions),
+            children: y
+          }
+        ) : null
+      ]
+    }
+  );
+}
+we.displayName = "AssistantMessage";
+const A = {
+  base: "w-full px-0",
+  item: "shadow-none",
+  trigger: "gap-2 py-1.5",
+  title: "text-sm font-medium text-default-700",
+  indicator: "text-default-500",
+  content: "pb-2 pt-0",
+  list: "m-0 flex list-none flex-col gap-1.5 p-0",
+  row: "flex min-w-0 items-start gap-2 text-sm",
+  icon: "mt-0.5 flex-none",
+  label: "min-w-0 flex-1 text-foreground [overflow-wrap:anywhere]",
+  /**
+   * HeroUI's flat danger chip is `text-danger-600 dark:text-danger-500`,
+   * which measures 4.25:1 on its own fill in dark. The 700 step clears AA in
+   * both themes (HeroUI's dark scale is reversed, so it is a light tint
+   * there); the `dark:` repeat is what overrides HeroUI's `dark:` class.
+   */
+  failed: "flex-none text-danger-700 dark:text-danger-700",
+  duration: "mt-px flex-none text-xs tabular-nums text-default-500",
+  /** "Done:" before a done row, for screen readers only. */
+  stateLabel: "sr-only"
+}, ye = {
+  done: { icon: "solar:check-circle-linear", className: "text-success-600" },
+  failed: { icon: "solar:close-circle-linear", className: "text-danger-600" }
+};
+function ve(t) {
+  if (!Number.isFinite(t) || t < 0) return "";
+  if (t < 1e3) return `${Math.floor(t)} ms`;
+  if (t < 1e4) return `${(Math.floor(t / 100) / 10).toFixed(1)} s`;
+  const o = Math.floor(t / 1e3);
+  return o < 60 ? `${o} s` : `${Math.floor(o / 60)} min ${String(o % 60).padStart(2, "0")} s`;
+}
+const J = "activity", Ne = { done: "Done", failed: "Failed" };
+function Se({
+  items: t,
+  title: o,
+  titleText: b,
+  isExpanded: u,
+  defaultExpanded: f = !0,
+  onExpandedChange: c,
+  stateLabels: y,
+  formatDuration: p = ve,
+  className: v,
+  "data-testid": n = "assistant-activity"
+}) {
+  const [m, h] = H(f), r = te(), d = u ?? m, S = { ...Ne, ...y };
+  return t.length === 0 ? null : /* @__PURE__ */ e(
+    oe,
+    {
+      "data-testid": n,
+      disableAnimation: r,
+      selectedKeys: d ? /* @__PURE__ */ new Set([J]) : /* @__PURE__ */ new Set(),
+      onSelectionChange: (a) => {
+        const $ = a === "all" || a.has(J);
+        u === void 0 && h($), c?.($);
+      },
+      className: l(A.base, v),
+      children: /* @__PURE__ */ e(
+        ce,
+        {
+          "data-testid": `${n}-group`,
+          title: o,
+          textValue: typeof o == "string" ? o : b,
+          classNames: {
+            base: A.item,
+            trigger: A.trigger,
+            title: A.title,
+            indicator: A.indicator,
+            content: A.content
+          },
+          children: /* @__PURE__ */ e("ol", { "data-testid": `${n}-list`, className: A.list, children: t.map((a) => {
+            const $ = ye[a.state], D = `${n}-item-${a.id}`;
+            return /* @__PURE__ */ N(
+              "li",
+              {
+                "data-testid": D,
+                "data-state": a.state,
+                className: A.row,
+                children: [
+                  /* @__PURE__ */ e(
+                    F,
+                    {
+                      icon: $.icon,
+                      width: 16,
+                      height: 16,
+                      "aria-hidden": "true",
+                      className: l(A.icon, $.className)
+                    }
+                  ),
+                  /* @__PURE__ */ N("span", { className: A.label, children: [
+                    a.state === "done" ? /* @__PURE__ */ N("span", { className: A.stateLabel, children: [
+                      S.done,
+                      ": "
+                    ] }) : null,
+                    a.label
+                  ] }),
+                  a.state === "failed" ? /* @__PURE__ */ e(
+                    de,
+                    {
+                      size: "sm",
+                      variant: "flat",
+                      color: "danger",
+                      "data-testid": `${D}-failed`,
+                      className: A.failed,
+                      children: S.failed
+                    }
+                  ) : null,
+                  a.durationMs !== void 0 ? /* @__PURE__ */ e(
+                    "span",
+                    {
+                      "data-testid": `${D}-duration`,
+                      className: A.duration,
+                      children: p(a.durationMs)
+                    }
+                  ) : null
+                ]
+              },
+              a.id
+            );
+          }) })
+        },
+        J
+      )
+    }
+  );
+}
+Se.displayName = "AssistantActivity";
+const V = "dark:bg-default-100", Ae = {
+  thinking: {
+    color: "default",
+    base: "bg-ai-fill dark:bg-ai-fill",
+    title: "text-ai-accent",
+    description: "text-default-600",
+    icon: ""
+  },
+  info: {
+    color: "default",
+    base: "bg-ai-fill dark:bg-ai-fill",
+    title: "text-ai-accent",
+    description: "text-default-600",
+    icon: "solar:info-circle-linear"
+  },
+  empty: {
+    color: "default",
+    base: V,
+    title: "text-foreground",
+    description: "text-default-600",
+    icon: "solar:chat-round-line-linear"
+  },
+  error: {
+    color: "danger",
+    base: "",
+    title: "text-danger-700",
+    description: "text-danger-700",
+    icon: "solar:danger-triangle-linear"
+  },
+  caution: {
+    color: "warning",
+    base: "",
+    title: "text-warning-700",
+    description: "text-warning-700",
+    icon: "solar:hourglass-line-linear"
+  },
+  offline: {
+    color: "default",
+    base: V,
+    title: "text-foreground",
+    description: "text-default-600",
+    icon: "solar:cloud-cross-linear"
+  },
+  blocked: {
+    color: "default",
+    base: V,
+    title: "text-foreground",
+    description: "text-default-600",
+    icon: "solar:lock-keyhole-minimalistic-linear"
+  }
+}, w = {
+  /** Alert centres a body with no title prop; the copy here is children, so pin it to the top-left. */
+  base: "items-start gap-x-3 px-4 py-3",
+  mainWrapper: "ms-0 min-h-0 min-w-0 items-start justify-start gap-0.5",
+  icon: "mt-0.5 inline-flex size-5 flex-none items-center justify-center",
+  /**
+   * The live region: title and description only. The clock, the action and
+   * the details sit outside it, so a ticking clock or opening "Details" on
+   * an error does not re-announce anything.
+   */
+  live: "col-span-full row-start-1 grid min-w-0 grid-cols-subgrid gap-y-0.5",
+  /**
+   * Title, description and clock. The live region spans every column as a
+   * subgrid (title in the first, description across all), and the clock
+   * sits outside it, so a ticking clock never changes the region. Without a
+   * clock there is one column, and the title has the full width.
+   */
+  text: "grid w-full min-w-0 grid-cols-1 items-baseline gap-x-2",
+  /**
+   * With a clock, two columns: the title, then the clock on the title's
+   * baseline, in the second column of the first row. Both the region and the
+   * clock have an explicit row, or auto-placement would move the region below
+   * the clock. A title too long for its line wraps beside the clock.
+   */
+  textWithClock: "grid-cols-[auto_1fr]",
+  title: "col-start-1 m-0 min-w-0 justify-self-start text-sm font-medium [overflow-wrap:anywhere]",
+  elapsed: "col-start-2 row-start-1 justify-self-start whitespace-nowrap text-sm tabular-nums",
+  description: "col-span-full m-0 min-w-0 text-sm [overflow-wrap:anywhere]",
+  action: "mt-2 flex flex-wrap items-center gap-2",
+  detailsToggle: "-ms-1.5 h-7 min-w-0 gap-1 px-1.5 text-xs font-medium text-current",
+  detailsWrapper: "w-full min-w-0",
+  detailsChevron: `transition-transform ${le}`,
+  detailsChevronOpen: "rotate-180",
+  details: "mt-1 max-h-48 overflow-auto whitespace-pre-wrap rounded-md bg-content1 p-2 font-mono text-xs text-foreground [overflow-wrap:anywhere]"
+}, $e = {
+  thinking: "status",
+  info: "status",
+  empty: "status",
+  error: "alert",
+  caution: "status",
+  offline: "status",
+  blocked: "status"
+};
+function Ce({
+  kind: t,
+  title: o,
+  description: b,
+  elapsed: u,
+  action: f,
+  details: c,
+  detailsLabel: y = "Details",
+  icon: p,
+  role: v = $e[t],
+  ariaLive: n = v === "alert" ? "assertive" : "polite",
+  className: m,
+  classNames: h = {},
+  "data-testid": r = "assistant-notice"
+}) {
+  const d = Ae[t], S = u != null && u !== !1, a = p === void 0 ? d.icon : p, $ = t === "thinking" && p === void 0 ? /* @__PURE__ */ e(fe, { size: "sm", color: "current" }) : a ? /* @__PURE__ */ e(F, { icon: a, width: 20, height: 20 }) : null;
+  return /* @__PURE__ */ N(
+    ue,
+    {
+      role: "none",
+      "data-kind": t,
+      "data-testid": r,
+      color: d.color,
+      variant: "flat",
+      hideIcon: !0,
+      startContent: $ ? /* @__PURE__ */ e(
+        "span",
+        {
+          "aria-hidden": "true",
+          "data-testid": `${r}-icon`,
+          className: l(w.icon, d.title),
+          children: $
+        }
+      ) : void 0,
+      classNames: {
+        base: l(w.base, d.base, m, h.base),
+        mainWrapper: w.mainWrapper
+      },
+      children: [
+        /* @__PURE__ */ N("div", { className: l(w.text, S && w.textWithClock), children: [
+          /* @__PURE__ */ N(
+            "div",
+            {
+              role: v,
+              "aria-live": n,
+              "aria-atomic": "true",
+              "data-testid": `${r}-live`,
+              className: w.live,
+              children: [
+                /* @__PURE__ */ e(
+                  "p",
+                  {
+                    "data-testid": `${r}-title`,
+                    className: l(w.title, d.title, h.title),
+                    children: o
+                  }
+                ),
+                b != null && b !== !1 ? /* @__PURE__ */ e(
+                  "p",
+                  {
+                    "data-testid": `${r}-description`,
+                    className: l(w.description, d.description, h.description),
+                    children: b
+                  }
+                ) : null
+              ]
+            }
+          ),
+          S ? /* @__PURE__ */ e(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-testid": `${r}-elapsed`,
+              className: l(w.elapsed, d.title),
+              children: u
+            }
+          ) : null
+        ] }),
+        f != null && f !== !1 ? /* @__PURE__ */ e(
+          "div",
+          {
+            "data-testid": `${r}-action`,
+            className: l(w.action, h.action),
+            children: f
+          }
+        ) : null,
+        c != null && c !== !1 ? /* @__PURE__ */ e(
+          ke,
+          {
+            label: y,
+            toneClass: d.description,
+            className: h.details,
+            dataTestId: r,
+            children: c
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function ke({
+  label: t,
+  toneClass: o,
+  className: b,
+  dataTestId: u,
+  children: f
+}) {
+  const [c, y] = H(!1), p = q();
+  return /* @__PURE__ */ N("div", { className: w.detailsWrapper, children: [
+    /* @__PURE__ */ e(
+      R,
+      {
+        size: "sm",
+        variant: "light",
+        color: "default",
+        radius: "sm",
+        "aria-expanded": c,
+        "aria-controls": p,
+        onPress: () => y((v) => !v),
+        testId: `${u}-details-toggle`,
+        className: l(w.detailsToggle, o),
+        endContent: /* @__PURE__ */ e(
+          F,
+          {
+            icon: "solar:alt-arrow-down-linear",
+            width: 14,
+            height: 14,
+            "aria-hidden": "true",
+            className: l(
+              w.detailsChevron,
+              c && w.detailsChevronOpen
+            )
+          }
+        ),
+        children: t
+      }
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        id: p,
+        hidden: !c,
+        "data-testid": `${u}-details`,
+        className: l(w.details, b),
+        children: f
+      }
+    )
+  ] });
+}
+Ce.displayName = "AssistantNotice";
+const k = {
+  base: "flex w-full min-w-0 flex-col gap-2",
+  suggestions: "flex flex-wrap gap-2",
+  /**
+   * Pill tones are set here rather than taken from HeroUI's flat variant,
+   * whose text tone differs between HeroUI versions and read dim on a dark
+   * card in an app on HeroUI 2.7. Measured in both themes in the stories.
+   */
+  suggestion: "h-auto min-h-8 max-w-full whitespace-normal bg-default-100 py-1.5 text-left text-foreground data-[hover=true]:bg-default-200",
+  row: "flex min-w-0 items-end gap-2",
+  field: "min-w-0 flex-1",
+  /**
+   * The focus border is `ai-focus` with the pointer over the field too:
+   * HeroUI's bordered variant has its own focused-and-hovered rule
+   * (`border-default-foreground`, black in light and white in dark), more
+   * specific than the focus one, so it is replaced here by name.
+   */
+  inputWrapper: "border-default-200 bg-content1 data-[hover=true]:border-default-300 group-data-[focus=true]:border-ai-focus group-data-[focus=true]:data-[hover=true]:border-ai-focus",
+  input: "text-sm text-foreground placeholder:text-default-500",
+  /**
+   * The hint sits under the whole row, not inside the field's column: inside
+   * it, a long hint pushed the bottom-aligned button down beside the hint.
+   * Our own element, so its tone is ours too: `default-500` clears 4.5:1 in
+   * both themes (HeroUI's description slot is `foreground-400`, 2.56:1).
+   */
+  helper: "m-0 flex w-full justify-between gap-2 text-xs text-default-500",
+  count: "ms-auto flex-none tabular-nums",
+  button: "flex-none"
+};
+function Ee({
+  value: t,
+  onValueChange: o,
+  onSubmit: b,
+  onStop: u,
+  isRunning: f = !1,
+  isStopDisabled: c = !1,
+  isDisabled: y = !1,
+  label: p,
+  placeholder: v,
+  description: n,
+  sendLabel: m = "Send",
+  stopLabel: h = "Stop",
+  suggestions: r,
+  suggestionsLabel: d = "Suggestions",
+  onSuggestionSelect: S,
+  maxLength: a,
+  minRows: $ = 2,
+  maxRows: D = 8,
+  className: T,
+  "data-testid": E = "assistant-composer"
+}) {
+  const C = M(null), _ = q(), j = t.trim(), B = a === void 0 || t.length <= a, W = !y && !f && j.length > 0 && B, s = f && u !== void 0, g = () => {
+    W && b(j);
+  }, U = () => C.current?.focus(), se = (i) => {
+    i.target === C.current && (i.key !== "Enter" || i.shiftKey || i.nativeEvent.isComposing || i.keyCode === 229 || (i.preventDefault(), g()));
+  }, ne = (i) => {
+    i.preventDefault(), g(), U();
+  }, z = M(!1), I = M(s);
+  Y(() => {
+    I.current && !s && z.current && (z.current = !1, C.current?.focus()), I.current = s;
+  }, [s]), Y(() => {
+    c && z.current && (z.current = !1, C.current?.focus());
+  }, [c]);
+  const re = () => {
+    U(), u?.();
+  }, ie = (i) => {
+    const X = i.prompt ?? i.label;
+    o(a === void 0 ? X : X.slice(0, a)), C.current?.focus(), S?.(i);
+  }, K = a !== void 0 ? `${t.length}/${a}` : null, Q = L(n) || K ? /* @__PURE__ */ N("p", { id: _, "data-testid": `${E}-helper`, className: k.helper, children: [
+    L(n) ? /* @__PURE__ */ e("span", { children: n }) : null,
+    K ? /* @__PURE__ */ e("span", { "data-testid": `${E}-count`, className: k.count, children: K }) : null
+  ] }) : null;
+  return /* @__PURE__ */ N(
+    "form",
+    {
+      noValidate: !0,
+      "data-testid": E,
+      "data-running": f || void 0,
+      onSubmit: ne,
+      onKeyDown: se,
+      className: l(k.base, T),
+      children: [
+        r && r.length > 0 ? /* @__PURE__ */ e(
+          "div",
+          {
+            role: "group",
+            "aria-label": d,
+            "data-testid": `${E}-suggestions`,
+            className: k.suggestions,
+            children: r.map((i) => /* @__PURE__ */ e(
+              R,
+              {
+                type: "button",
+                size: "sm",
+                variant: "flat",
+                color: "default",
+                isDisabled: y,
+                onPress: () => ie(i),
+                testId: `${E}-suggestion-${i.key}`,
+                className: k.suggestion,
+                children: i.label
+              },
+              i.key
+            ))
+          }
+        ) : null,
+        /* @__PURE__ */ N(
+          "div",
+          {
+            className: k.row,
+            onMouseDown: (i) => {
+              i.target === i.currentTarget && i.preventDefault();
+            },
+            children: [
+              /* @__PURE__ */ e(
+                pe,
+                {
+                  ref: C,
+                  "aria-label": p,
+                  placeholder: v,
+                  value: t,
+                  onValueChange: o,
+                  isDisabled: y,
+                  maxLength: a,
+                  minRows: $,
+                  maxRows: D,
+                  variant: "bordered",
+                  "aria-describedby": Q ? _ : void 0,
+                  "data-testid": `${E}-field`,
+                  className: k.field,
+                  classNames: {
+                    inputWrapper: k.inputWrapper,
+                    input: k.input
+                  }
+                }
+              ),
+              s ? /* @__PURE__ */ e(
+                R,
+                {
+                  type: "button",
+                  isIconOnly: !0,
+                  color: "default",
+                  variant: "flat",
+                  "aria-label": h,
+                  isDisabled: c,
+                  onPress: re,
+                  onFocus: () => {
+                    z.current = !0;
+                  },
+                  onBlur: (i) => {
+                    i.target.disabled || (z.current = !1);
+                  },
+                  testId: `${E}-stop`,
+                  className: k.button,
+                  children: /* @__PURE__ */ e(F, { icon: "solar:stop-bold", width: 18, height: 18, "aria-hidden": "true" })
+                },
+                "stop"
+              ) : /* @__PURE__ */ e(
+                R,
+                {
+                  type: "submit",
+                  isIconOnly: !0,
+                  color: "primary",
+                  "aria-label": m,
+                  isDisabled: !W,
+                  testId: `${E}-send`,
+                  className: k.button,
+                  children: /* @__PURE__ */ e(F, { icon: "solar:arrow-up-linear", width: 18, height: 18, "aria-hidden": "true" })
+                },
+                "send"
+              )
+            ]
+          }
+        ),
+        Q
+      ]
+    }
+  );
+}
+Ee.displayName = "AssistantComposer";
+const O = {
+  base: "relative flex min-h-0 w-full flex-col",
+  scroller: "min-h-0 flex-1 overflow-y-auto overscroll-contain rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ai-focus",
+  content: "min-w-0",
+  jumpBar: "pointer-events-none absolute inset-x-0 bottom-3 flex justify-center",
+  jump: "pointer-events-auto border border-divider bg-content1 text-foreground shadow-medium"
+}, Z = (t, o) => t.scrollHeight - t.scrollTop - t.clientHeight <= o, ee = (t) => t.clientHeight > 0;
+function Me({
+  children: t,
+  label: o,
+  followKey: b,
+  jumpLabel: u = "Jump to newest",
+  onFollowChange: f,
+  threshold: c = 32,
+  className: y,
+  classNames: p = {},
+  "data-testid": v = "scroll-to-latest"
+}) {
+  const n = M(null), m = M(null), h = M(!0), r = M(0), d = M(f), S = M(c), [a, $] = H(!0), [D, T] = H(!1), E = te();
+  P(() => {
+    d.current = f;
+  }, [f]), P(() => {
+    S.current = c;
+  }, [c]);
+  const C = G((s) => {
+    h.current !== s && (h.current = s, $(s), d.current?.(s));
+  }, []), _ = G(() => {
+    const s = n.current;
+    s && (T(s.scrollHeight > s.clientHeight), ee(s) && Z(s, S.current) && C(!0));
+  }, [C]), j = G((s) => {
+    const g = n.current;
+    g && (typeof g.scrollTo == "function" ? g.scrollTo({ top: g.scrollHeight, behavior: s }) : g.scrollTop = g.scrollHeight, r.current = g.scrollTop);
+  }, []);
+  Y(() => {
+    h.current && j("auto"), _();
+  }, [b, j, _]), P(() => {
+    const s = m.current, g = n.current;
+    if (!s || !g || typeof ResizeObserver > "u") return;
+    const U = new ResizeObserver(() => {
+      h.current && j("auto"), _();
+    });
+    return U.observe(s), U.observe(g), () => U.disconnect();
+  }, [j, _]);
+  const B = () => {
+    const s = n.current;
+    if (!s || !ee(s)) return;
+    const g = s.scrollTop;
+    Z(s, c) ? C(!0) : g < r.current - 1 && C(!1), r.current = g, _();
+  }, W = () => {
+    C(!0), j(E ? "auto" : "smooth"), n.current?.focus({ preventScroll: !0 });
+  };
+  return /* @__PURE__ */ N(
+    "div",
+    {
+      "data-testid": v,
+      "data-following": a,
+      className: l(O.base, y, p.base),
+      children: [
+        /* @__PURE__ */ e(
+          me,
+          {
+            ref: n,
+            role: "region",
+            "aria-label": o,
+            tabIndex: 0,
+            size: 24,
+            onScroll: B,
+            "data-testid": `${v}-scroller`,
+            className: l(O.scroller, p.scroller),
+            children: /* @__PURE__ */ e("div", { ref: m, className: l(O.content, p.content), children: t })
+          }
+        ),
+        !a && D ? /* @__PURE__ */ e("div", { className: O.jumpBar, children: /* @__PURE__ */ e(
+          R,
+          {
+            type: "button",
+            size: "sm",
+            radius: "full",
+            color: "default",
+            variant: "solid",
+            onPress: W,
+            testId: `${v}-jump`,
+            startContent: /* @__PURE__ */ e(F, { icon: "solar:arrow-down-linear", width: 16, height: 16, "aria-hidden": "true" }),
+            className: l(O.jump, p.jump),
+            children: u
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+Me.displayName = "ScrollToLatest";
+export {
+  Se as AssistantActivity,
+  Ee as AssistantComposer,
+  we as AssistantMessage,
+  Ce as AssistantNotice,
+  Me as ScrollToLatest,
+  ve as formatAssistantDuration
+};