@devalok/shilp-sutra 0.32.0 → 0.33.0

package/dist/composed/rich-chat-input.js

@@ -0,0 +1,1861 @@
+"use client";
+import { jsx as e, jsxs as h, Fragment as wt } from "react/jsx-runtime";
+import * as a from "react";
+import { useState as be, useRef as K, useCallback as le, useEffect as kt } from "react";
+import * as Ct from "react-dom";
+import { q as Nt, i as St, e as Rt, g as At } from "../_chunks/vendor-client.js";
+import { g as Xe, h as Dt, j as Et, e as W, c as zt, i as Tt, P as Mt, a as It, C as Pt, d as Bt, u as Lt, E as _t, B as Ht } from "../_chunks/tiptap.js";
+import { F as jt, E as $t, c as Ft, a as qt, l as Ut, b as Ot } from "../_chunks/mention-suggestion.js";
+import { createRoot as Kt } from "react-dom/client";
+import { cn as z } from "../ui/lib/utils.js";
+import { IconX as me, IconClock as Pe, IconPencil as Wt, IconCalendarEvent as qe, IconFile as Vt, IconBold as Qe, IconItalic as Ge, IconUnderline as Je, IconStrikethrough as Ze, IconHighlight as et, IconList as Yt, IconListNumbers as Xt, IconBlockquote as Qt, IconLink as Gt, IconCode as tt, IconAt as Jt, IconMoodSmile as rt, IconSlash as Zt, IconPlayerPause as er, IconPlayerPlay as tr, IconPlus as rr, IconTextSize as nr, IconTrash as Ue, IconSquare as Oe, IconSend as ze, IconMicrophone as sr, IconChevronDown as ir } from "@tabler/icons-react";
+import { Icon as g } from "../ui/icon.js";
+import { m as G, A as fe, u as or } from "../_chunks/framer.js";
+import { Button as Q } from "../ui/button.js";
+import { u as ar, C as cr } from "../_chunks/use-calendar.js";
+import { Dialog as lr, DialogContent as dr, DialogHeader as ur, DialogTitle as fr, DialogFooter as mr } from "../ui/dialog.js";
+import { SplitButton as hr } from "../ui/split-button.js";
+import { emojiDataLoaders as Ke } from "./emoji-picker.js";
+import { Spinner as pr } from "../ui/spinner.js";
+import { useColorMode as gr } from "../hooks/use-color-mode.js";
+import { useIsMobile as br } from "../hooks/use-mobile.js";
+const Ie = a.forwardRef(
+  ({ groups: r, query: n, command: t }, i) => {
+    const [s, d] = a.useState(0), u = a.useMemo(() => {
+      const c = n.toLowerCase(), m = [];
+      return r.forEach((p, N) => {
+        p.commands.forEach((w) => {
+          (!c || w.label.toLowerCase().includes(c) || w.description?.toLowerCase().includes(c)) && m.push({ command: w, groupIndex: N });
+        });
+      }), m;
+    }, [r, n]);
+    if (a.useEffect(() => d(0), [u]), a.useImperativeHandle(i, () => ({
+      onKeyDown: ({ event: c }) => c.key === "ArrowUp" ? (d((m) => (m + u.length - 1) % u.length), !0) : c.key === "ArrowDown" ? (d((m) => (m + 1) % u.length), !0) : c.key === "Enter" ? (u[s] && t(u[s].command), !0) : !1
+    })), !u.length) return null;
+    const f = [];
+    let o = 0;
+    for (const c of u) {
+      const m = r[c.groupIndex].label;
+      let p = f[f.length - 1];
+      (!p || p.label !== m) && (p = { label: m, items: [] }, f.push(p)), p.items.push({ command: c.command, flatIndex: o }), o++;
+    }
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        role: "listbox",
+        "aria-label": "Slash commands",
+        className: "z-popover max-h-[320px] min-w-[220px] overflow-x-hidden overflow-y-auto rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-02 shadow-floating",
+        children: f.map((c, m) => /* @__PURE__ */ h("div", { role: "group", "aria-label": c.label, children: [
+          m > 0 && /* @__PURE__ */ e("div", { className: "my-ds-01 border-t border-surface-border" }),
+          /* @__PURE__ */ e("div", { className: "px-ds-03 py-ds-01 text-ds-xs font-medium text-surface-fg-subtle", children: c.label }),
+          c.items.map(({ command: p, flatIndex: N }) => {
+            const w = p.icon;
+            return /* @__PURE__ */ h(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": N === s,
+                onClick: () => t(p),
+                className: z(
+                  "flex w-full items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02 text-left cursor-pointer",
+                  N === s ? "bg-surface-raised-hover" : "hover:bg-surface-raised-hover"
+                ),
+                children: [
+                  w && /* @__PURE__ */ e("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center text-surface-fg-muted", children: /* @__PURE__ */ e(w, { className: "h-4 w-4" }) }),
+                  /* @__PURE__ */ h("div", { className: "flex flex-col", children: [
+                    /* @__PURE__ */ e("span", { className: "text-ds-sm text-surface-fg", children: p.label }),
+                    p.description && /* @__PURE__ */ e("span", { className: "text-ds-xs text-surface-fg-subtle", children: p.description })
+                  ] })
+                ]
+              },
+              p.id
+            );
+          })
+        ] }, c.label))
+      }
+    );
+  }
+);
+Ie.displayName = "SlashCommandList";
+function vr(r) {
+  return () => {
+    let n = null, t = null, i = null;
+    return {
+      onStart: (s) => {
+        t = document.createElement("div"), t.style.position = "absolute", t.style.zIndex = "1400";
+        const d = s.clientRect?.();
+        d && (t.style.left = `${d.left}px`, t.style.top = `${d.bottom + 4}px`), document.body.appendChild(t), n = Kt(t), n.render(
+          /* @__PURE__ */ e(
+            Ie,
+            {
+              ref: (u) => {
+                i = u;
+              },
+              groups: r,
+              query: s.query,
+              command: (u) => s.command(u)
+            }
+          )
+        );
+      },
+      onUpdate: (s) => {
+        if (!n || !t) return;
+        const d = s.clientRect?.();
+        d && (t.style.left = `${d.left}px`, t.style.top = `${d.bottom + 4}px`), n.render(
+          /* @__PURE__ */ e(
+            Ie,
+            {
+              ref: (u) => {
+                i = u;
+              },
+              groups: r,
+              query: s.query,
+              command: (u) => s.command(u)
+            }
+          )
+        );
+      },
+      onKeyDown: (s) => s.event.key === "Escape" ? (t && (n?.unmount(), t.remove(), t = null, n = null), !0) : i?.onKeyDown(s) ?? !1,
+      onExit: () => {
+        t && (n?.unmount(), t.remove(), t = null, n = null);
+      }
+    };
+  };
+}
+function xr(r) {
+  const n = r.flatMap((t) => t.commands);
+  return Xe.create({
+    name: "slashCommand",
+    addProseMirrorPlugins() {
+      return [
+        Dt({
+          pluginKey: new Et("slashCommand"),
+          editor: this.editor,
+          char: "/",
+          startOfLine: !0,
+          allowSpaces: !1,
+          items: ({ query: t }) => {
+            if (!t) return n.slice(0, 8);
+            const i = t.toLowerCase();
+            return n.filter(
+              (s) => s.label.toLowerCase().includes(i) || s.description?.toLowerCase().includes(i)
+            ).slice(0, 8);
+          },
+          command: ({ editor: t, range: i, props: s }) => {
+            t.chain().focus().deleteRange(i).run(), s.action(t);
+          },
+          render: vr(r)
+        })
+      ];
+    }
+  });
+}
+function yr({ author: r, preview: n, onDismiss: t }) {
+  return /* @__PURE__ */ e(
+    G.div,
+    {
+      initial: { height: 0, opacity: 0 },
+      animate: { height: "auto", opacity: 1 },
+      exit: { height: 0, opacity: 0 },
+      transition: { duration: 0.24, ease: [0.2, 0, 0.38, 0.9] },
+      className: "overflow-hidden",
+      children: /* @__PURE__ */ h(
+        "div",
+        {
+          role: "status",
+          "aria-label": `Replying to ${r}`,
+          className: "flex items-center gap-ds-03 border-b border-surface-border px-ds-04 py-ds-02b",
+          children: [
+            /* @__PURE__ */ h("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ h("span", { className: "text-ds-sm font-semibold text-surface-fg", children: [
+                "Replying to ",
+                r
+              ] }),
+              /* @__PURE__ */ e("span", { className: "mx-ds-02 text-surface-fg-subtle", children: "·" }),
+              /* @__PURE__ */ e("span", { className: "text-ds-sm text-surface-fg-muted truncate", children: n })
+            ] }),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                onClick: t,
+                className: z(
+                  "inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-ds-md touch-target",
+                  "text-surface-fg-subtle hover:text-surface-fg hover:bg-surface-raised-hover",
+                  "transition-colors duration-fast-01 ease-productive-standard",
+                  "active:scale-95"
+                ),
+                "aria-label": "Cancel reply",
+                title: "Cancel reply",
+                children: /* @__PURE__ */ e(g, { icon: me, size: "xs" })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function wr() {
+  const r = /* @__PURE__ */ new Date(), n = r.getHours(), t = [], i = (u, f = 0) => {
+    const o = new Date(r);
+    return o.setDate(o.getDate() + f), o.setHours(u, 0, 0, 0), o;
+  }, s = (u) => {
+    const f = new Date(r), o = f.getDay(), c = o === 0 ? 1 : o === 1 ? 7 : 8 - o;
+    return f.setDate(f.getDate() + c), f.setHours(u, 0, 0, 0), f;
+  };
+  n < 9 ? (t.push({ label: "Later this morning · 9:00 AM", date: i(9) }), t.push({ label: "This afternoon · 1:00 PM", date: i(13) }), t.push({ label: "This evening · 6:00 PM", date: i(18) })) : n < 13 ? (t.push({ label: "This afternoon · 1:00 PM", date: i(13) }), t.push({ label: "This evening · 6:00 PM", date: i(18) }), t.push({ label: "Tomorrow morning · 9:00 AM", date: i(9, 1) })) : n < 18 ? (t.push({ label: "This evening · 6:00 PM", date: i(18) }), t.push({ label: "Tomorrow morning · 9:00 AM", date: i(9, 1) }), t.push({ label: "Tomorrow afternoon · 1:00 PM", date: i(13, 1) })) : (t.push({ label: "Tomorrow morning · 9:00 AM", date: i(9, 1) }), t.push({ label: "Tomorrow afternoon · 1:00 PM", date: i(13, 1) }));
+  const d = s(9);
+  return d.getTime() - r.getTime() > 2880 * 60 * 1e3 && t.push({ label: "Next Monday · 9:00 AM", date: d }), t;
+}
+function nt({ value: r, onChange: n }) {
+  const t = r.getHours() % 12 || 12, i = r.getMinutes(), s = r.getHours() >= 12, d = (o) => {
+    const c = new Date(r);
+    c.setHours(s ? o % 12 + 12 : o % 12), n(c);
+  }, u = (o) => {
+    const c = new Date(r);
+    c.setMinutes(o), n(c);
+  }, f = (o) => {
+    const c = new Date(r), m = c.getHours();
+    o && m < 12 ? c.setHours(m + 12) : !o && m >= 12 && c.setHours(m - 12), n(c);
+  };
+  return /* @__PURE__ */ h("div", { className: "flex items-center gap-ds-02", children: [
+    /* @__PURE__ */ e(
+      "select",
+      {
+        value: t,
+        onChange: (o) => d(Number(o.target.value)),
+        className: "h-ds-sm rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02 text-ds-sm text-surface-fg focus:outline-none focus:ring-2 focus:ring-accent-9",
+        "aria-label": "Hour",
+        children: Array.from({ length: 12 }, (o, c) => c + 1).map((o) => /* @__PURE__ */ e("option", { value: o, children: o }, o))
+      }
+    ),
+    /* @__PURE__ */ e("span", { className: "text-ds-sm text-surface-fg-subtle font-medium", children: ":" }),
+    /* @__PURE__ */ e(
+      "select",
+      {
+        value: i - i % 5,
+        onChange: (o) => u(Number(o.target.value)),
+        className: "h-ds-sm rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02 text-ds-sm text-surface-fg focus:outline-none focus:ring-2 focus:ring-accent-9",
+        "aria-label": "Minute",
+        children: Array.from({ length: 12 }, (o, c) => c * 5).map((o) => /* @__PURE__ */ e("option", { value: o, children: String(o).padStart(2, "0") }, o))
+      }
+    ),
+    /* @__PURE__ */ h("div", { className: "inline-flex rounded-ds-md border border-surface-border-strong overflow-hidden", children: [
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          onClick: () => f(!1),
+          className: z(
+            "px-ds-02b py-ds-01 text-ds-xs font-medium transition-colors duration-fast-01",
+            s ? "bg-surface-raised text-surface-fg-subtle hover:bg-surface-raised-hover" : "bg-accent-9 text-white"
+          ),
+          children: "AM"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          onClick: () => f(!0),
+          className: z(
+            "px-ds-02b py-ds-01 text-ds-xs font-medium transition-colors duration-fast-01",
+            s ? "bg-accent-9 text-white" : "bg-surface-raised text-surface-fg-subtle hover:bg-surface-raised-hover"
+          ),
+          children: "PM"
+        }
+      )
+    ] })
+  ] });
+}
+function kr({
+  value: r,
+  onChange: n,
+  minDate: t
+}) {
+  const i = /* @__PURE__ */ new Date(), s = r ?? (() => {
+    const o = new Date(i);
+    return o.setHours(o.getHours() + 1, 0, 0, 0), o;
+  })(), d = `${s.getFullYear()}-${String(s.getMonth() + 1).padStart(2, "0")}-${String(s.getDate()).padStart(2, "0")}`, u = (o) => {
+    const c = o.target.value.split("-");
+    if (c.length !== 3) return;
+    const m = new Date(s);
+    m.setFullYear(Number(c[0]), Number(c[1]) - 1, Number(c[2])), n(m);
+  }, f = t ? `${t.getFullYear()}-${String(t.getMonth() + 1).padStart(2, "0")}-${String(t.getDate()).padStart(2, "0")}` : void 0;
+  return /* @__PURE__ */ h("div", { className: "space-y-ds-03", children: [
+    /* @__PURE__ */ h("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ e("span", { className: "text-ds-xs font-medium text-surface-fg-subtle", children: "Date" }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "date",
+          value: d,
+          min: f,
+          onChange: u,
+          className: "h-ds-sm rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-03 text-ds-sm text-surface-fg focus:outline-none focus:ring-2 focus:ring-accent-9"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ h("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ e("span", { className: "text-ds-xs font-medium text-surface-fg-subtle", children: "Time" }),
+      /* @__PURE__ */ e(nt, { value: s, onChange: n })
+    ] })
+  ] });
+}
+function Cr({
+  value: r,
+  onChange: n,
+  minDate: t
+}) {
+  const i = /* @__PURE__ */ new Date(), s = r ?? (() => {
+    const c = new Date(i);
+    return c.setHours(c.getHours() + 1, 0, 0, 0), c;
+  })(), { currentMonth: d, goToPreviousMonth: u, goToNextMonth: f } = ar(s);
+  return /* @__PURE__ */ h("div", { className: "space-y-ds-03", children: [
+    /* @__PURE__ */ e(
+      cr,
+      {
+        currentMonth: d,
+        selected: s,
+        onSelect: (c) => {
+          const m = new Date(c);
+          m.setHours(s.getHours(), s.getMinutes(), 0, 0), n(m);
+        },
+        onMonthChange: (c) => {
+          c < d ? u() : f();
+        },
+        minDate: t,
+        className: "w-full"
+      }
+    ),
+    /* @__PURE__ */ h("div", { className: "flex items-center justify-between border-t border-surface-border pt-ds-03", children: [
+      /* @__PURE__ */ e("span", { className: "text-ds-xs font-medium text-surface-fg-subtle", children: "Time" }),
+      /* @__PURE__ */ e(nt, { value: s, onChange: n })
+    ] })
+  ] });
+}
+function Nr({ onSchedule: r, onClose: n, onOpenDialog: t }) {
+  const [i, s] = a.useState(!1), [d, u] = a.useState(null), f = a.useMemo(() => wr(), []), o = (m) => {
+    r(m), n();
+  }, c = () => {
+    d && d > /* @__PURE__ */ new Date() && (r(d), n(), u(null), s(!1));
+  };
+  return i ? /* @__PURE__ */ h("div", { className: "p-ds-04", style: { minWidth: 270 }, children: [
+    /* @__PURE__ */ h("div", { className: "mb-ds-03 flex items-center justify-between", children: [
+      /* @__PURE__ */ e("p", { className: "text-ds-sm font-medium text-surface-fg", children: "Pick date & time" }),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          onClick: () => s(!1),
+          className: "inline-flex items-center justify-center rounded-ds-md p-ds-01 text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg transition-colors",
+          "aria-label": "Back to presets",
+          children: /* @__PURE__ */ e(g, { icon: me, size: "sm" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(
+      kr,
+      {
+        value: d,
+        onChange: u,
+        minDate: /* @__PURE__ */ new Date()
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: "mt-ds-03 flex justify-end", children: /* @__PURE__ */ e(
+      Q,
+      {
+        variant: "solid",
+        size: "sm",
+        onClick: c,
+        disabled: !d || d <= /* @__PURE__ */ new Date(),
+        children: "Confirm"
+      }
+    ) })
+  ] }) : /* @__PURE__ */ h("div", { className: "p-ds-02", style: { minWidth: 260 }, children: [
+    /* @__PURE__ */ e("p", { className: "px-ds-03 py-ds-01 text-ds-xs font-medium text-surface-fg-subtle", children: "Schedule send" }),
+    f.map((m, p) => /* @__PURE__ */ h(
+      "button",
+      {
+        type: "button",
+        onClick: () => o(m.date),
+        className: "flex w-full items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02b text-ds-sm text-surface-fg hover:bg-surface-raised-hover transition-colors duration-fast-01",
+        children: [
+          /* @__PURE__ */ e(g, { icon: Pe, size: "sm", className: "shrink-0 text-surface-fg-muted" }),
+          m.label
+        ]
+      },
+      p
+    )),
+    /* @__PURE__ */ e("div", { className: "mx-ds-02 my-ds-02 h-px bg-surface-border" }),
+    /* @__PURE__ */ h(
+      "button",
+      {
+        type: "button",
+        onClick: () => s(!0),
+        className: "flex w-full items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02b text-ds-sm text-surface-fg hover:bg-surface-raised-hover transition-colors duration-fast-01",
+        children: [
+          /* @__PURE__ */ e(g, { icon: qe, size: "sm", className: "shrink-0 text-accent-11" }),
+          "Pick date & time..."
+        ]
+      }
+    ),
+    t && /* @__PURE__ */ h(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          t(), n();
+        },
+        className: "flex w-full items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02b text-ds-sm text-surface-fg hover:bg-surface-raised-hover transition-colors duration-fast-01",
+        children: [
+          /* @__PURE__ */ e(g, { icon: qe, size: "sm", className: "shrink-0 text-surface-fg-muted" }),
+          "Open full picker..."
+        ]
+      }
+    )
+  ] });
+}
+function Sr({ open: r, onOpenChange: n, onSchedule: t, initialDate: i }) {
+  const [s, d] = a.useState(i ?? null);
+  return a.useEffect(() => {
+    r && d(i ?? null);
+  }, [r, i]), /* @__PURE__ */ e(lr, { open: r, onOpenChange: n, children: /* @__PURE__ */ h(dr, { className: "sm:max-w-[380px]", children: [
+    /* @__PURE__ */ e(ur, { children: /* @__PURE__ */ e(fr, { children: i ? "Reschedule message" : "Schedule send" }) }),
+    /* @__PURE__ */ e(
+      Cr,
+      {
+        value: s,
+        onChange: d,
+        minDate: /* @__PURE__ */ new Date()
+      }
+    ),
+    /* @__PURE__ */ h(mr, { className: "gap-ds-02", children: [
+      /* @__PURE__ */ e(Q, { variant: "soft", onClick: () => n(!1), children: "Cancel" }),
+      /* @__PURE__ */ e(
+        Q,
+        {
+          variant: "solid",
+          onClick: () => {
+            s && s > /* @__PURE__ */ new Date() && (t(s), n(!1));
+          },
+          disabled: !s || s <= /* @__PURE__ */ new Date(),
+          children: i ? "Reschedule" : "Schedule"
+        }
+      )
+    ] })
+  ] }) });
+}
+function Rr(r) {
+  const n = /* @__PURE__ */ new Date(), t = new Date(n);
+  t.setDate(t.getDate() + 1);
+  const i = r.toDateString() === n.toDateString(), s = r.toDateString() === t.toDateString(), d = r.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" });
+  return i ? `Today at ${d}` : s ? `Tomorrow at ${d}` : `${r.toLocaleDateString(void 0, { weekday: "short", month: "short", day: "numeric" })} at ${d}`;
+}
+function Ar({ date: r, onClear: n, onEdit: t }) {
+  return /* @__PURE__ */ e(
+    G.div,
+    {
+      initial: { height: 0, opacity: 0 },
+      animate: { height: "auto", opacity: 1 },
+      exit: { height: 0, opacity: 0 },
+      transition: { duration: 0.15 },
+      className: "overflow-hidden",
+      children: /* @__PURE__ */ h("div", { className: "flex items-center gap-ds-03 px-ds-04 py-ds-02b text-ds-xs text-accent-11 bg-accent-2 border-b border-accent-4", children: [
+        /* @__PURE__ */ e(g, { icon: Pe, size: "xs", className: "shrink-0" }),
+        /* @__PURE__ */ h("span", { className: "flex-1 truncate", children: [
+          "Scheduled for ",
+          Rr(r)
+        ] }),
+        t && /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            onClick: t,
+            className: "inline-flex shrink-0 items-center justify-center rounded-ds-sm p-ds-01 hover:bg-accent-3 transition-colors",
+            "aria-label": "Edit schedule",
+            children: /* @__PURE__ */ e(g, { icon: Wt, size: "xs" })
+          }
+        ),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            onClick: n,
+            className: "inline-flex shrink-0 items-center justify-center rounded-ds-sm p-ds-01 hover:bg-accent-3 transition-colors",
+            "aria-label": "Cancel schedule",
+            children: /* @__PURE__ */ e(g, { icon: me, size: "xs" })
+          }
+        )
+      ] })
+    }
+  );
+}
+function We(r) {
+  return r < 1024 ? `${r} B` : r < 1024 * 1024 ? `${(r / 1024).toFixed(1)} KB` : `${(r / (1024 * 1024)).toFixed(1)} MB`;
+}
+function Dr({
+  attachments: r,
+  onRemoveAttachment: n
+}) {
+  return /* @__PURE__ */ e(
+    G.div,
+    {
+      initial: { height: 0, opacity: 0 },
+      animate: { height: "auto", opacity: 1 },
+      exit: { height: 0, opacity: 0 },
+      transition: { duration: 0.24, ease: [0.2, 0, 0.38, 0.9] },
+      className: "overflow-hidden",
+      children: /* @__PURE__ */ e(
+        "div",
+        {
+          role: "list",
+          "aria-label": "Attachments",
+          className: "flex gap-ds-02 overflow-x-auto px-ds-04 py-ds-02b border-b border-surface-border",
+          children: /* @__PURE__ */ e(fe, { initial: !1, children: r.map(
+            (t) => t.type === "image" ? /* @__PURE__ */ h(
+              G.div,
+              {
+                role: "listitem",
+                "aria-label": `Image: ${t.name}`,
+                layout: !0,
+                initial: { scale: 0, opacity: 0 },
+                animate: { scale: 1, opacity: 1 },
+                exit: { scale: 0.95, opacity: 0 },
+                transition: {
+                  layout: { type: "spring", stiffness: 400, damping: 30 },
+                  scale: { type: "spring", stiffness: 400, damping: 30 },
+                  opacity: { duration: 0.11 }
+                },
+                className: "relative h-12 w-12 shrink-0 group",
+                children: [
+                  /* @__PURE__ */ e(
+                    "img",
+                    {
+                      src: t.url,
+                      alt: t.name,
+                      className: "h-full w-full rounded-ds-md object-cover"
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      onClick: () => n(t.id),
+                      className: "absolute -top-1 -right-1 h-ico-sm w-ico-sm rounded-full bg-error-9 text-error-fg flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-fast-02",
+                      "aria-label": `Remove ${t.name}`,
+                      title: "Remove",
+                      children: /* @__PURE__ */ e(g, { icon: me, size: "xs" })
+                    }
+                  ),
+                  t.uploading && /* @__PURE__ */ e("div", { className: "absolute inset-0 rounded-ds-md bg-surface-overlay/50 flex items-center justify-center", children: /* @__PURE__ */ e(pr, { size: "sm" }) })
+                ]
+              },
+              t.id
+            ) : /* @__PURE__ */ h(
+              G.div,
+              {
+                role: "listitem",
+                "aria-label": `File: ${t.name}, ${We(t.size)}`,
+                layout: !0,
+                initial: { scale: 0, opacity: 0 },
+                animate: { scale: 1, opacity: 1 },
+                exit: { scale: 0.95, opacity: 0 },
+                transition: {
+                  layout: { type: "spring", stiffness: 400, damping: 30 },
+                  scale: { type: "spring", stiffness: 400, damping: 30 },
+                  opacity: { duration: 0.11 }
+                },
+                className: "flex items-center gap-ds-02 shrink-0 rounded-ds-md bg-surface-raised px-ds-03 py-ds-01 group",
+                children: [
+                  /* @__PURE__ */ e(
+                    g,
+                    {
+                      icon: Vt,
+                      size: "xs",
+                      className: "text-surface-fg-muted"
+                    }
+                  ),
+                  /* @__PURE__ */ e("span", { className: "text-ds-xs text-surface-fg-muted truncate max-w-[120px]", children: t.name }),
+                  /* @__PURE__ */ e("span", { className: "text-ds-xs text-surface-fg-subtle", children: We(t.size) }),
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      onClick: () => n(t.id),
+                      className: "text-surface-fg-subtle hover:text-error-11 opacity-0 group-hover:opacity-100 transition-opacity duration-fast-02",
+                      "aria-label": `Remove ${t.name}`,
+                      title: "Remove",
+                      children: /* @__PURE__ */ e(g, { icon: me, size: "xs" })
+                    }
+                  )
+                ]
+              },
+              t.id
+            )
+          ) })
+        }
+      )
+    }
+  );
+}
+const Be = a.forwardRef(
+  function({
+    mode: n,
+    analyserNode: t,
+    data: i,
+    progress: s = 0,
+    barWidth: d = 3,
+    barGap: u = 2,
+    barCount: f = 40,
+    height: o = 32,
+    className: c,
+    ...m
+  }, p) {
+    const [N, w] = a.useState(
+      () => new Array(f).fill(0.05)
+    ), B = a.useRef(0), R = a.useRef(N);
+    a.useEffect(() => {
+      if (n !== "live" || !t) return;
+      const k = new Uint8Array(t.frequencyBinCount), T = 0.3, S = () => {
+        t.getByteFrequencyData(k);
+        const A = Math.floor(k.length / f), U = new Array(f);
+        for (let M = 0; M < f; M++) {
+          let y = 0;
+          for (let _ = 0; _ < A; _++)
+            y += k[M * A + _];
+          const $ = y / (A * 255);
+          U[M] = R.current[M] + ($ - R.current[M]) * T;
+        }
+        R.current = U, w(U), B.current = requestAnimationFrame(S);
+      };
+      return B.current = requestAnimationFrame(S), () => cancelAnimationFrame(B.current);
+    }, [n, t, f]), a.useEffect(() => {
+      if (!(n !== "static" || !i))
+        if (i.length === f)
+          w(i);
+        else {
+          const k = new Array(f), T = i.length / f;
+          for (let S = 0; S < f; S++) {
+            const A = Math.floor(S * T);
+            k[S] = i[Math.min(A, i.length - 1)];
+          }
+          w(k);
+        }
+    }, [n, i, f]);
+    const P = f * (d + u) - u, j = a.useMemo(
+      () => N.map((k, T) => {
+        const S = Math.max(2, k * o), A = T * (d + u), U = (o - S) / 2, M = n === "static" && s > 0 && T / f <= s;
+        return /* @__PURE__ */ e(
+          "rect",
+          {
+            x: A,
+            y: U,
+            width: d,
+            height: S,
+            rx: d / 2,
+            fill: M ? "var(--color-accent-9)" : "var(--color-surface-border)"
+          },
+          T
+        );
+      }),
+      [N, s, n, d, u, f, o]
+    );
+    return /* @__PURE__ */ e(
+      "svg",
+      {
+        ref: p,
+        height: o,
+        viewBox: `0 0 ${P} ${o}`,
+        preserveAspectRatio: "none",
+        "aria-hidden": "true",
+        className: z("shrink-0", c),
+        ...m,
+        children: j
+      }
+    );
+  }
+);
+Be.displayName = "AudioWaveform";
+function Er(r) {
+  const n = Math.floor(r / 60), t = Math.floor(r % 60);
+  return {
+    minutes: String(n),
+    separator: ":",
+    secs: t.toString().padStart(2, "0")
+  };
+}
+function st({
+  duration: r,
+  analyserNode: n,
+  maxDuration: t,
+  onCancel: i
+}) {
+  const s = or();
+  a.useEffect(() => {
+    const m = (p) => {
+      p.key === "Escape" && i();
+    };
+    return document.addEventListener("keydown", m), () => document.removeEventListener("keydown", m);
+  }, [i]);
+  const d = t != null && t > 0 && r >= t - 10, u = t != null && t > 0 && r >= t - 5, f = u ? "animate-[pulse_500ms_ease-in-out_infinite]" : "animate-[pulse_1s_ease-in-out_infinite]", o = Er(r), c = u ? "text-error-11" : d ? "text-warning-11" : "text-surface-fg";
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": "Recording voice message",
+      className: "absolute inset-0 flex items-center gap-ds-03 px-ds-04 py-ds-03 bg-surface-raised-hover rounded-ds-lg z-10",
+      children: [
+        /* @__PURE__ */ e(
+          "span",
+          {
+            className: z(
+              "w-ds-02b h-ds-02b shrink-0 rounded-ds-full bg-error-9",
+              s ? "opacity-100" : f
+            ),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ h(
+          "span",
+          {
+            className: z(
+              "text-ds-sm font-mono tabular-nums whitespace-nowrap",
+              c
+            ),
+            "aria-label": `${o.minutes} minutes ${o.secs} seconds`,
+            children: [
+              o.minutes,
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  className: s ? void 0 : "animate-[blink_1s_step-end_infinite]",
+                  "aria-hidden": "true",
+                  children: o.separator
+                }
+              ),
+              o.secs
+            ]
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "flex-1 min-w-0 overflow-hidden", children: /* @__PURE__ */ e(
+          Be,
+          {
+            mode: "live",
+            analyserNode: n,
+            height: 24,
+            barCount: 60,
+            className: "w-full"
+          }
+        ) })
+      ]
+    }
+  );
+}
+st.displayName = "RecordingOverlay";
+const it = a.createContext(null);
+function H() {
+  const r = a.useContext(it);
+  if (!r) throw new Error("Toolbar primitives must be used inside <ChatToolbar>");
+  return r;
+}
+function q({
+  onClick: r,
+  isActive: n,
+  disabled: t,
+  title: i,
+  children: s,
+  className: d
+}) {
+  const { disabled: u } = H();
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      onClick: r,
+      disabled: t ?? u,
+      title: i,
+      "aria-label": i,
+      "aria-pressed": n,
+      className: z(
+        "inline-flex h-ds-xs-plus items-center justify-center rounded-ds-md touch-target",
+        !d?.includes("w-") && "w-ds-xs-plus",
+        "transition-[color,background-color,transform] duration-fast-01 ease-productive-standard",
+        "hover:bg-surface-raised-hover hover:text-surface-fg",
+        "active:scale-95",
+        "disabled:pointer-events-none disabled:opacity-action-disabled",
+        n ? "bg-surface-raised-hover text-accent-11" : "text-surface-fg-subtle",
+        d
+      ),
+      children: s
+    }
+  );
+}
+function Te() {
+  return /* @__PURE__ */ e("div", { className: "h-4 w-px bg-surface-border-subtle mx-ds-01" });
+}
+function ve({ children: r, className: n }) {
+  return /* @__PURE__ */ e("div", { className: z("flex items-center gap-ds-01", n), children: r });
+}
+function zr() {
+  const { editor: r } = H(), { isActive: n } = W({
+    editor: r,
+    selector: ({ editor: t }) => ({ isActive: t.isActive("bold") })
+  });
+  return /* @__PURE__ */ e(q, { onClick: () => r.chain().focus().toggleBold().run(), isActive: n, title: "Bold", children: /* @__PURE__ */ e(g, { icon: Qe, size: "xs" }) });
+}
+function Tr() {
+  const { editor: r } = H(), { isActive: n } = W({
+    editor: r,
+    selector: ({ editor: t }) => ({ isActive: t.isActive("italic") })
+  });
+  return /* @__PURE__ */ e(q, { onClick: () => r.chain().focus().toggleItalic().run(), isActive: n, title: "Italic", children: /* @__PURE__ */ e(g, { icon: Ge, size: "xs" }) });
+}
+function Mr() {
+  const { editor: r } = H(), { isActive: n } = W({
+    editor: r,
+    selector: ({ editor: t }) => ({ isActive: t.isActive("underline") })
+  });
+  return /* @__PURE__ */ e(q, { onClick: () => r.chain().focus().toggleUnderline().run(), isActive: n, title: "Underline", children: /* @__PURE__ */ e(g, { icon: Je, size: "xs" }) });
+}
+function Ir() {
+  const { editor: r } = H(), { isActive: n } = W({
+    editor: r,
+    selector: ({ editor: t }) => ({ isActive: t.isActive("strike") })
+  });
+  return /* @__PURE__ */ e(q, { onClick: () => r.chain().focus().toggleStrike().run(), isActive: n, title: "Strikethrough", children: /* @__PURE__ */ e(g, { icon: Ze, size: "xs" }) });
+}
+function Pr() {
+  const { editor: r } = H(), { isActive: n } = W({
+    editor: r,
+    selector: ({ editor: t }) => ({ isActive: t.isActive("highlight") })
+  });
+  return /* @__PURE__ */ e(q, { onClick: () => r.chain().focus().toggleHighlight().run(), isActive: n, title: "Highlight", children: /* @__PURE__ */ e(g, { icon: et, size: "xs" }) });
+}
+function Br() {
+  const { editor: r } = H(), { isActive: n } = W({
+    editor: r,
+    selector: ({ editor: t }) => ({ isActive: t.isActive("code") })
+  });
+  return /* @__PURE__ */ e(q, { onClick: () => r.chain().focus().toggleCode().run(), isActive: n, title: "Inline code", children: /* @__PURE__ */ e(g, { icon: tt, size: "xs" }) });
+}
+function Lr() {
+  const { editor: r } = H(), { isActive: n } = W({
+    editor: r,
+    selector: ({ editor: t }) => ({ isActive: t.isActive("bulletList") })
+  });
+  return /* @__PURE__ */ e(q, { onClick: () => r.chain().focus().toggleBulletList().run(), isActive: n, title: "Bullet list", children: /* @__PURE__ */ e(g, { icon: Yt, size: "xs" }) });
+}
+function _r() {
+  const { editor: r } = H(), { isActive: n } = W({
+    editor: r,
+    selector: ({ editor: t }) => ({ isActive: t.isActive("orderedList") })
+  });
+  return /* @__PURE__ */ e(q, { onClick: () => r.chain().focus().toggleOrderedList().run(), isActive: n, title: "Ordered list", children: /* @__PURE__ */ e(g, { icon: Xt, size: "xs" }) });
+}
+function Hr() {
+  const { editor: r } = H(), { isActive: n } = W({
+    editor: r,
+    selector: ({ editor: t }) => ({ isActive: t.isActive("blockquote") })
+  });
+  return /* @__PURE__ */ e(q, { onClick: () => r.chain().focus().toggleBlockquote().run(), isActive: n, title: "Quote", children: /* @__PURE__ */ e(g, { icon: Qt, size: "xs" }) });
+}
+function jr() {
+  const { editor: r } = H(), { isActive: n } = W({
+    editor: r,
+    selector: ({ editor: t }) => ({ isActive: t.isActive("link") })
+  });
+  return /* @__PURE__ */ e(
+    q,
+    {
+      onClick: () => {
+        const t = window.prompt("URL");
+        t && r.chain().focus().setLink({ href: t }).run();
+      },
+      isActive: n,
+      title: "Link",
+      children: /* @__PURE__ */ e(g, { icon: Gt, size: "xs" })
+    }
+  );
+}
+function $r() {
+  const { editor: r } = H();
+  return /* @__PURE__ */ e(q, { onClick: () => r.chain().focus().insertContent("@").run(), title: "Mention", children: /* @__PURE__ */ e(g, { icon: Jt, size: "xs" }) });
+}
+function Fr() {
+  const { editor: r } = H();
+  return /* @__PURE__ */ e(q, { onClick: () => r.chain().focus().insertContent(":").run(), title: "Emoji", children: /* @__PURE__ */ e(g, { icon: rt, size: "xs" }) });
+}
+function qr() {
+  const { editor: r } = H();
+  return /* @__PURE__ */ e(q, { onClick: () => r.chain().focus().insertContent("/").run(), title: "Slash command", children: /* @__PURE__ */ e(g, { icon: Zt, size: "xs" }) });
+}
+function Ur({ items: r, isMobile: n, hasMentions: t, hasSlashCommands: i }) {
+  const s = (d) => !r || r.includes(d);
+  return /* @__PURE__ */ h(wt, { children: [
+    !n && /* @__PURE__ */ h(ve, { children: [
+      s("bold") && /* @__PURE__ */ e(zr, {}),
+      s("italic") && /* @__PURE__ */ e(Tr, {}),
+      s("underline") && /* @__PURE__ */ e(Mr, {}),
+      s("strike") && /* @__PURE__ */ e(Ir, {}),
+      s("highlight") && /* @__PURE__ */ e(Pr, {})
+    ] }),
+    !n && /* @__PURE__ */ e(Te, {}),
+    !n && /* @__PURE__ */ h(ve, { children: [
+      s("bulletList") && /* @__PURE__ */ e(Lr, {}),
+      s("orderedList") && /* @__PURE__ */ e(_r, {})
+    ] }),
+    !n && (s("blockquote") || s("link") || s("code")) && /* @__PURE__ */ e(Te, {}),
+    !n && /* @__PURE__ */ h(ve, { children: [
+      s("blockquote") && /* @__PURE__ */ e(Hr, {}),
+      s("link") && /* @__PURE__ */ e(jr, {}),
+      s("code") && /* @__PURE__ */ e(Br, {})
+    ] }),
+    !n && (t || i) && /* @__PURE__ */ e(Te, {}),
+    /* @__PURE__ */ h(ve, { children: [
+      t && s("mention") && /* @__PURE__ */ e($r, {}),
+      s("emoji") && /* @__PURE__ */ e(Fr, {}),
+      i && s("slash") && /* @__PURE__ */ e(qr, {})
+    ] })
+  ] });
+}
+function Ve({
+  editor: r,
+  toolbar: n,
+  isMobile: t,
+  hasMentions: i,
+  hasSlashCommands: s,
+  disabled: d
+}) {
+  if (n === !1) return null;
+  const u = typeof n != "boolean" && !Array.isArray(n), f = Array.isArray(n) ? n : null;
+  return /* @__PURE__ */ e(it.Provider, { value: { editor: r, disabled: d }, children: /* @__PURE__ */ e(
+    "div",
+    {
+      role: "toolbar",
+      "aria-label": "Text formatting",
+      className: "flex flex-wrap items-center gap-ds-01 border-t border-surface-border px-ds-04 py-ds-02b",
+      children: u ? (
+        // Consumer provides their own toolbar content
+        n
+      ) : (
+        // Default layout (full or whitelist)
+        /* @__PURE__ */ e(Ur, { items: f, isMobile: t, hasMentions: i, hasSlashCommands: s })
+      )
+    }
+  ) });
+}
+const Me = [1, 1.5, 2];
+function Ye(r) {
+  const n = Math.floor(r / 60), t = Math.floor(r % 60);
+  return `${n}:${t.toString().padStart(2, "0")}`;
+}
+const ot = a.forwardRef(
+  function({ src: n, duration: t, waveformData: i, className: s, ...d }, u) {
+    const f = a.useRef(null), o = a.useRef(null), [c, m] = a.useState(!1), [p, N] = a.useState(0), [w, B] = a.useState(0), [R, P] = a.useState(null), j = a.useMemo(() => {
+      if (typeof n == "string") return n;
+      const y = URL.createObjectURL(n);
+      return P(y), y;
+    }, [n]);
+    a.useEffect(() => () => {
+      R && URL.revokeObjectURL(R);
+    }, [R]), a.useEffect(() => {
+      const y = f.current;
+      if (!y) return;
+      const $ = () => N(y.currentTime), _ = () => {
+        m(!1), N(0);
+      };
+      return y.addEventListener("timeupdate", $), y.addEventListener("ended", _), () => {
+        y.removeEventListener("timeupdate", $), y.removeEventListener("ended", _);
+      };
+    }, []);
+    const k = a.useCallback(() => {
+      const y = f.current;
+      y && (c ? (y.pause(), m(!1)) : (y.play(), m(!0)));
+    }, [c]), T = a.useCallback(
+      (y) => {
+        (y.key === " " || y.key === "Enter") && (y.preventDefault(), k());
+      },
+      [k]
+    ), S = a.useCallback(
+      (y) => {
+        const $ = f.current, _ = o.current;
+        if (!$ || !_ || t <= 0) return;
+        const te = _.getBoundingClientRect(), J = y.clientX - te.left, I = Math.max(0, Math.min(1, J / te.width));
+        $.currentTime = I * t, N($.currentTime);
+      },
+      [t]
+    ), A = a.useCallback(() => {
+      const y = (w + 1) % Me.length;
+      B(y), f.current && (f.current.playbackRate = Me[y]);
+    }, [w]), U = t > 0 ? p / t : 0, M = Me[w];
+    return /* @__PURE__ */ h(
+      "div",
+      {
+        ref: u,
+        role: "group",
+        "aria-label": "Voice message player",
+        className: z("flex items-center gap-ds-03", s),
+        ...d,
+        children: [
+          /* @__PURE__ */ e("audio", { ref: f, src: j, preload: "metadata" }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: k,
+              onKeyDown: T,
+              "aria-label": c ? "Pause voice message" : "Play voice message",
+              className: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-ds-full bg-accent-9 text-accent-fg hover:bg-accent-10 active:scale-95 transition-colors duration-fast-01 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2",
+              children: c ? /* @__PURE__ */ e(er, { size: 16, stroke: 2, "aria-hidden": "true" }) : /* @__PURE__ */ e(tr, { size: 16, stroke: 2, "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ e(
+            Be,
+            {
+              ref: o,
+              mode: "static",
+              data: i,
+              progress: U,
+              className: "cursor-pointer",
+              onClick: S
+            }
+          ),
+          /* @__PURE__ */ h("span", { className: "text-ds-xs tabular-nums text-surface-fg-subtle whitespace-nowrap", children: [
+            Ye(p),
+            " / ",
+            Ye(t)
+          ] }),
+          /* @__PURE__ */ h(
+            "button",
+            {
+              type: "button",
+              onClick: A,
+              "aria-label": `Playback speed ${M}x`,
+              className: "shrink-0 text-ds-xs bg-surface-raised rounded-ds-full px-ds-02 py-[1px] hover:bg-surface-raised-hover tabular-nums transition-colors duration-fast-01 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2",
+              children: [
+                M,
+                "x"
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ot.displayName = "AudioPlayer";
+function Or() {
+  return typeof MediaRecorder < "u" && MediaRecorder.isTypeSupported("audio/webm;codecs=opus") ? "audio/webm;codecs=opus" : typeof MediaRecorder < "u" && MediaRecorder.isTypeSupported("audio/mp4") ? "audio/mp4" : "";
+}
+function Kr(r) {
+  const { maxDuration: n, onComplete: t } = r, [i, s] = be("idle"), [d, u] = be(0), [f, o] = be(null), [c, m] = be([]), p = K(null), N = K(null), w = K(null), B = K([]), R = K(null), P = K(null), j = K(null), k = K(null), T = K(0), S = K([]), A = K(!1), U = K(t);
+  U.current = t;
+  const M = le(() => {
+    R.current !== null && (clearInterval(R.current), R.current = null), P.current !== null && (clearInterval(P.current), P.current = null), j.current !== null && (clearTimeout(j.current), j.current = null), w.current && (w.current.getTracks().forEach((I) => I.stop()), w.current = null), N.current && (N.current.close().catch(() => {
+    }), N.current = null), k.current = null, o(null), p.current = null, B.current = [];
+  }, []), y = le(async () => {
+    if (typeof MediaRecorder > "u")
+      throw new Error(
+        "MediaRecorder is not supported in this browser. Voice recording requires a modern browser with MediaRecorder support."
+      );
+    const I = await navigator.mediaDevices.getUserMedia({ audio: !0 });
+    w.current = I;
+    const F = Or(), Z = F ? new MediaRecorder(I, { mimeType: F }) : new MediaRecorder(I);
+    p.current = Z, B.current = [], A.current = !1;
+    const V = new AudioContext();
+    N.current = V;
+    const xe = V.createMediaStreamSource(I), D = V.createAnalyser();
+    D.fftSize = 256, D.smoothingTimeConstant = 0.7, xe.connect(D), k.current = D, o(D), Z.ondataavailable = (L) => {
+      L.data.size > 0 && B.current.push(L.data);
+    }, Z.onstop = () => {
+      if (A.current)
+        M(), s("idle"), u(0), m([]);
+      else {
+        const L = new Blob(B.current, {
+          type: Z.mimeType || "audio/webm"
+        }), ae = T.current, O = S.current;
+        M(), s("idle"), u(0), m([]), U.current(L, ae, O);
+      }
+    }, Z.start(), u(0), T.current = 0, R.current = setInterval(() => {
+      T.current += 1, u((L) => L + 1);
+    }, 1e3);
+    const Y = new Uint8Array(D.frequencyBinCount);
+    m([]), S.current = [], P.current = setInterval(() => {
+      if (k.current) {
+        k.current.getByteFrequencyData(Y);
+        let L = 0;
+        for (let O = 0; O < Y.length; O++)
+          L += Y[O];
+        const ae = L / Y.length / 255;
+        S.current = [...S.current, ae], m((O) => [...O, ae]);
+      }
+    }, 100), n !== void 0 && n > 0 && (j.current = setTimeout(() => {
+      p.current && p.current.state !== "inactive" && p.current.stop();
+    }, n * 1e3)), s("recording");
+  }, [n, M]), $ = le(() => {
+    p.current && p.current.state !== "inactive" && (A.current = !1, p.current.stop());
+  }, []), _ = le(() => {
+    p.current && p.current.state !== "inactive" ? (A.current = !0, p.current.stop()) : (M(), s("idle"), u(0), m([]));
+  }, [M]), te = le(() => {
+    p.current && p.current.state === "recording" && (p.current.pause(), R.current !== null && (clearInterval(R.current), R.current = null), P.current !== null && (clearInterval(P.current), P.current = null), s("paused"));
+  }, []), J = le(() => {
+    if (p.current && p.current.state === "paused") {
+      p.current.resume(), R.current = setInterval(() => {
+        T.current += 1, u((F) => F + 1);
+      }, 1e3);
+      const I = new Uint8Array(
+        k.current?.frequencyBinCount ?? 128
+      );
+      P.current = setInterval(() => {
+        if (k.current) {
+          k.current.getByteFrequencyData(I);
+          let F = 0;
+          for (let V = 0; V < I.length; V++)
+            F += I[V];
+          const Z = F / I.length / 255;
+          S.current = [...S.current, Z], m((V) => [...V, Z]);
+        }
+      }, 100), s("recording");
+    }
+  }, []);
+  return kt(() => () => {
+    R.current !== null && clearInterval(R.current), P.current !== null && clearInterval(P.current), j.current !== null && clearTimeout(j.current), p.current && p.current.state !== "inactive" && p.current.stop(), w.current && w.current.getTracks().forEach((I) => I.stop()), N.current && N.current.close().catch(() => {
+    });
+  }, []), {
+    state: i,
+    duration: d,
+    analyserNode: f,
+    waveformData: c,
+    start: y,
+    stop: $,
+    cancel: _,
+    pause: te,
+    resume: J
+  };
+}
+const Wr = {
+  compact: { minHeight: 44, maxHeight: 256, showToolbar: !0, toolbarPosition: "bottom" },
+  expanded: { minHeight: 96, maxHeight: 384, showToolbar: !0, toolbarPosition: "bottom" },
+  minimal: { minHeight: 44, maxHeight: 128, showToolbar: !1, toolbarPosition: "bottom" },
+  inline: { minHeight: 40, maxHeight: 160, showToolbar: !1, toolbarPosition: "top" }
+}, Vr = [
+  "prose prose-sm max-w-none focus:outline-none",
+  "font-body text-ds-md leading-relaxed text-surface-fg",
+  "[&_p.is-editor-empty:first-child]:relative",
+  "[&_p.is-editor-empty:first-child::before]:text-surface-fg-subtle [&_p.is-editor-empty:first-child::before]:content-[attr(data-placeholder)] [&_p.is-editor-empty:first-child::before]:pointer-events-none [&_p.is-editor-empty:first-child::before]:absolute [&_p.is-editor-empty:first-child::before]:left-0 [&_p.is-editor-empty:first-child::before]:top-0 [&_p.is-editor-empty:first-child::before]:w-full [&_p.is-editor-empty:first-child::before]:truncate",
+  "[&_p]:mb-ds-01 [&_p]:text-surface-fg",
+  "[&_p:last-child]:mb-0",
+  "[&_ul]:ml-ds-04 [&_ul]:list-disc [&_ol]:ml-ds-04 [&_ol]:list-decimal",
+  "[&_li]:text-surface-fg",
+  "[&_code]:rounded [&_code]:bg-surface-raised [&_code]:px-ds-02 [&_code]:py-[1px] [&_code]:text-ds-md [&_code]:text-accent-11",
+  "[&_strong]:font-semibold [&_strong]:text-surface-fg",
+  "[&_mark]:rounded-sm [&_mark]:bg-warning-3 [&_mark]:px-[2px]",
+  "[&_a]:text-accent-11 [&_a]:underline",
+  "[&_.mention]:rounded-ds-sm [&_.mention]:bg-accent-2 [&_.mention]:px-ds-02 [&_.mention]:py-[1px] [&_.mention]:font-medium [&_.mention]:text-accent-11"
+].join(" ");
+function Yr({ options: r }) {
+  const [n, t] = a.useState(!1), i = a.useRef(null);
+  return a.useEffect(() => {
+    if (!n) return;
+    const s = (d) => {
+      i.current && !i.current.contains(d.target) && t(!1);
+    };
+    return document.addEventListener("mousedown", s), () => document.removeEventListener("mousedown", s);
+  }, [n]), /* @__PURE__ */ h("div", { ref: i, className: "relative", children: [
+    /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        onClick: () => t((s) => !s),
+        title: "More send options",
+        "aria-label": "More send options",
+        "aria-expanded": n,
+        className: z(
+          "inline-flex h-ds-xs-plus w-5 items-center justify-center rounded-ds-md touch-target",
+          "text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg",
+          "transition-colors duration-fast-01 ease-productive-standard",
+          n && "bg-surface-raised-hover text-surface-fg"
+        ),
+        children: /* @__PURE__ */ e(g, { icon: ir, size: "xs" })
+      }
+    ),
+    n && /* @__PURE__ */ h("div", { className: "absolute bottom-full right-0 mb-ds-02 min-w-[200px] rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-02 shadow-floating z-popover", children: [
+      /* @__PURE__ */ e("p", { className: "px-ds-03 py-ds-01 text-ds-xs font-medium text-surface-fg-subtle", children: "Send options" }),
+      r.map((s, d) => /* @__PURE__ */ h(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            s.onSelect(), t(!1);
+          },
+          className: "flex w-full items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02 text-ds-sm text-surface-fg hover:bg-surface-raised-hover transition-colors duration-fast-01",
+          children: [
+            s.icon && /* @__PURE__ */ e(s.icon, { className: "h-ico-sm w-ico-sm text-surface-fg-muted" }),
+            s.label
+          ]
+        },
+        d
+      ))
+    ] })
+  ] });
+}
+const Xr = a.lazy(() => import("@emoji-mart/react"));
+function Qr({ set: r = "native", onSelect: n, onClose: t }) {
+  const [i, s] = a.useState(null), { colorMode: d } = gr(), u = a.useRef(null);
+  a.useEffect(() => {
+    (Ke[r] ?? Ke.native)().then((c) => s(c.default));
+  }, [r]), a.useEffect(() => {
+    const o = (c) => {
+      u.current && !u.current.contains(c.target) && t();
+    };
+    return document.addEventListener("mousedown", o), () => document.removeEventListener("mousedown", o);
+  }, [t]), a.useEffect(() => {
+    const o = (c) => {
+      c.key === "Escape" && t();
+    };
+    return document.addEventListener("keydown", o), () => document.removeEventListener("keydown", o);
+  }, [t]);
+  const f = /* @__PURE__ */ e("div", { className: "flex h-[350px] w-[352px] items-center justify-center rounded-ds-lg border border-surface-border-strong bg-surface-overlay shadow-floating", children: /* @__PURE__ */ e("span", { className: "text-ds-sm text-surface-fg-subtle", children: "Loading..." }) });
+  return /* @__PURE__ */ e("div", { ref: u, className: "rounded-ds-lg border border-surface-border-strong bg-surface-overlay shadow-floating overflow-hidden", children: i ? /* @__PURE__ */ e(a.Suspense, { fallback: f, children: /* @__PURE__ */ e(
+    Xr,
+    {
+      data: i,
+      set: r,
+      onEmojiSelect: (o) => n({ id: o.id, native: o.native }),
+      theme: d === "dark" ? "dark" : "light",
+      previewPosition: "none",
+      skinTonePosition: "none"
+    }
+  ) }) : f });
+}
+function de({
+  onClick: r,
+  isActive: n = !1,
+  title: t,
+  children: i
+}) {
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      onClick: r,
+      title: t,
+      "aria-label": t,
+      "aria-pressed": n,
+      className: z(
+        "inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-ds-md touch-target",
+        "transition-colors duration-fast-01 ease-productive-standard",
+        "hover:bg-surface-raised-hover",
+        n ? "bg-surface-raised-hover text-accent-11" : "text-surface-fg-subtle"
+      ),
+      children: i
+    }
+  );
+}
+function Gr({ editor: r }) {
+  const n = W({
+    editor: r,
+    selector: ({ editor: t }) => ({
+      isBold: t.isActive("bold"),
+      isItalic: t.isActive("italic"),
+      isUnderline: t.isActive("underline"),
+      isStrike: t.isActive("strike"),
+      isHighlight: t.isActive("highlight"),
+      isCode: t.isActive("code")
+    })
+  });
+  return /* @__PURE__ */ h(
+    Ht,
+    {
+      editor: r,
+      className: "flex gap-ds-01 rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-02 shadow-floating",
+      children: [
+        /* @__PURE__ */ e(de, { onClick: () => r.chain().focus().toggleBold().run(), isActive: n.isBold, title: "Bold", children: /* @__PURE__ */ e(g, { icon: Qe, size: "xs" }) }),
+        /* @__PURE__ */ e(de, { onClick: () => r.chain().focus().toggleItalic().run(), isActive: n.isItalic, title: "Italic", children: /* @__PURE__ */ e(g, { icon: Ge, size: "xs" }) }),
+        /* @__PURE__ */ e(de, { onClick: () => r.chain().focus().toggleUnderline().run(), isActive: n.isUnderline, title: "Underline", children: /* @__PURE__ */ e(g, { icon: Je, size: "xs" }) }),
+        /* @__PURE__ */ e(de, { onClick: () => r.chain().focus().toggleStrike().run(), isActive: n.isStrike, title: "Strikethrough", children: /* @__PURE__ */ e(g, { icon: Ze, size: "xs" }) }),
+        /* @__PURE__ */ e(de, { onClick: () => r.chain().focus().toggleHighlight().run(), isActive: n.isHighlight, title: "Highlight", children: /* @__PURE__ */ e(g, { icon: et, size: "xs" }) }),
+        /* @__PURE__ */ e(de, { onClick: () => r.chain().focus().toggleCode().run(), isActive: n.isCode, title: "Code", children: /* @__PURE__ */ e(g, { icon: tt, size: "xs" }) })
+      ]
+    }
+  );
+}
+const Jr = a.forwardRef(
+  function({
+    onSubmit: n,
+    placeholder: t = "Type a message...",
+    disabled: i = !1,
+    content: s = "",
+    variant: d = "compact",
+    enterBehavior: u = "send",
+    maxLength: f,
+    charCountDisplay: o = "near-limit",
+    mentions: c,
+    onMentionSearch: m,
+    onMentionSelect: p,
+    onFileUpload: N,
+    onImageUpload: w,
+    slashCommands: B,
+    onVoiceRecord: R,
+    onTranscribe: P,
+    maxDuration: j,
+    replyTo: k,
+    onTyping: T,
+    onEmpty: S,
+    isStreaming: A = !1,
+    onCancel: U,
+    leadingSlot: M,
+    trailingSlot: y,
+    disclaimer: $,
+    toolbar: _ = !0,
+    sendOptions: te,
+    onSchedule: J,
+    actionButton: I,
+    emojiSet: F = "native",
+    className: Z,
+    ...V
+  }, xe) {
+    const [D, Y] = a.useState("idle"), [L, ae] = a.useState(!1), [O, ye] = a.useState(!1), [re, he] = a.useState(null), [at, we] = a.useState(!1), [ct, Le] = a.useState(!1), [_e, lt] = a.useState(0), ke = a.useRef(null), Ce = a.useRef(null);
+    a.useEffect(() => {
+      if (!O || !ke.current || !Ce.current) return;
+      const l = ke.current, v = Ce.current, C = () => {
+        Nt(l, v, {
+          placement: "top-end",
+          middleware: [St(8), Rt(), At({ padding: 8 })]
+        }).then(({ x, y: E }) => {
+          Object.assign(v.style, { left: `${x}px`, top: `${E}px` });
+        });
+      };
+      return C(), window.addEventListener("scroll", C, !0), window.addEventListener("resize", C), () => {
+        window.removeEventListener("scroll", C, !0), window.removeEventListener("resize", C);
+      };
+    }, [O]);
+    const [ce, ne] = a.useState([]), [ee, Ne] = a.useState(null), [dt, Se] = a.useState(!1), He = a.useRef(null), ut = a.useRef(null), Re = a.useRef(void 0), Ae = a.useRef(void 0), De = a.useRef(u);
+    De.current = u;
+    const je = br(), pe = Wr[d], ft = pe.maxHeight, se = Kr({
+      maxDuration: j,
+      onComplete: async (l, v, C) => {
+        if (R?.(l, v), P) {
+          const x = await P(l, v);
+          if (x != null) {
+            b?.chain().focus().insertContent(x).run(), Y("idle");
+            return;
+          }
+        }
+        Ne({ blob: l, duration: v, waveformData: C }), Y("review");
+      }
+    }), mt = a.useCallback(() => {
+      se.start(), Y("recording");
+    }, [se]), ht = a.useCallback(() => {
+      se.stop();
+    }, [se]), $e = a.useCallback(() => {
+      se.cancel(), Y("idle");
+    }, [se]), pt = a.useMemo(() => {
+      const l = [
+        Tt.configure({
+          heading: !1,
+          horizontalRule: !1,
+          codeBlock: !1,
+          blockquote: !1,
+          // v3: Underline + Link included in StarterKit
+          link: {
+            openOnClick: !1,
+            HTMLAttributes: { class: "text-accent-11 underline" }
+          }
+        }),
+        Mt.configure({ placeholder: t }),
+        It.configure({ multicolor: !1 }),
+        zt,
+        Pt.configure({ limit: f || void 0 }),
+        jt,
+        $t,
+        Ft(F),
+        // Enter-to-send
+        Xe.create({
+          name: "enterToSend",
+          addKeyboardShortcuts() {
+            return {
+              Enter: () => De.current === "send" ? (Ae.current?.(), !0) : !1,
+              "Shift-Enter": () => De.current === "send" ? (this.editor.commands.splitBlock(), !0) : !1,
+              "Mod-Enter": () => (Ae.current?.(), !0)
+            };
+          }
+        })
+      ];
+      return (c || m) && l.push(
+        Bt.configure({
+          HTMLAttributes: { class: "mention" },
+          suggestion: {
+            items: async ({ query: v }) => m ? await m(v) : c ? c.filter((C) => C.label.toLowerCase().includes(v.toLowerCase())).slice(0, 8) : [],
+            render: qt(p)
+          }
+        })
+      ), B && l.push(xr(B)), l;
+    }, [t, f, F, !!c, !!m, !!B]), b = Lt({
+      immediatelyRender: !1,
+      // SSR-safe — prevents hydration mismatch in Next.js
+      extensions: pt,
+      content: s || void 0,
+      editable: !i,
+      editorProps: {
+        attributes: {
+          class: Vr
+        },
+        handlePaste: (l, v) => {
+          const C = Array.from(v.clipboardData?.files ?? []);
+          return C.length > 0 ? (C.forEach(ue), !0) : !1;
+        }
+      }
+    }), Ee = a.useCallback(() => {
+      if (!b) return;
+      const l = !b.isEmpty, v = ce.length > 0, C = !!ee;
+      if (!l && !v && !C || A) return;
+      const x = {
+        html: l ? b.getHTML() : "",
+        plainText: l ? b.getText() : ""
+      };
+      v && (x.attachments = ce.filter((E) => !E.uploading && E.url).map((E) => ({ url: E.url, name: E.name, size: E.size, type: E.type }))), C && (x.voiceNote = { blob: ee.blob, duration: ee.duration }), re && J ? J(x, re) : n(x), b.commands.clearContent(), ne([]), Ne(null), he(null), Y("idle");
+    }, [b, ce, ee, A, n, J, re]);
+    Ae.current = Ee, a.useEffect(() => {
+      if (!b || !T) return;
+      const l = () => {
+        T(!0), clearTimeout(Re.current), Re.current = setTimeout(() => T(!1), 2e3);
+      };
+      return b.on("update", l), () => {
+        b.off("update", l), clearTimeout(Re.current);
+      };
+    }, [b, T]), a.useEffect(() => {
+      if (!b || !S) return;
+      const l = () => {
+        S(b.isEmpty);
+      };
+      return b.on("update", l), l(), () => {
+        b.off("update", l);
+      };
+    }, [b, S]);
+    const ue = a.useCallback(async (l) => {
+      const v = Math.random().toString(36).slice(2), C = l.type.startsWith("image/");
+      ne((x) => [...x, {
+        id: v,
+        name: l.name,
+        size: l.size,
+        type: C ? "image" : "file",
+        uploading: !0
+      }]);
+      try {
+        if (C && w) {
+          const x = await w(l);
+          ne((E) => E.map((X) => X.id === v ? { ...X, url: x, uploading: !1 } : X));
+        } else if (N) {
+          const x = await N(l);
+          ne((E) => E.map((X) => X.id === v ? { ...X, url: x.url, name: x.name, size: x.size, uploading: !1 } : X));
+        } else if (C) {
+          const x = URL.createObjectURL(l);
+          ne((E) => E.map((X) => X.id === v ? { ...X, url: x, uploading: !1 } : X));
+        } else
+          ne((x) => x.filter((E) => E.id !== v));
+      } catch {
+        ne((x) => x.filter((E) => E.id !== v));
+      }
+    }, [N, w]), gt = a.useCallback((l) => {
+      ne((v) => v.filter((C) => C.id !== l));
+    }, []), bt = a.useCallback((l) => {
+      l.preventDefault(), Se(!1), Array.from(l.dataTransfer.files).forEach(ue);
+    }, [ue]), vt = a.useCallback((l) => {
+      Array.from(l.target.files || []).forEach(ue), l.target.value = "";
+    }, [ue]), xt = a.useCallback(() => {
+      Ne(null), Y("idle");
+    }, []), Fe = W({
+      editor: b,
+      selector: ({ editor: l }) => l ? { editorIsEmpty: l.isEmpty } : null
+    })?.editorIsEmpty ?? !0;
+    a.useEffect(() => {
+      if (!b) return;
+      const l = () => {
+        const v = b.state.doc.textBetween(0, b.state.doc.content.size, void 0, " ");
+        lt(v.length);
+      };
+      return l(), b.on("update", l), () => {
+        b.off("update", l);
+      };
+    }, [b]);
+    const ge = !Fe || ce.length > 0 || !!ee, yt = L || D === "review" || d === "expanded", ie = "icon-md", oe = "md";
+    return /* @__PURE__ */ h(
+      "div",
+      {
+        ref: xe,
+        className: z(
+          "border-t border-surface-border-subtle px-ds-05 py-ds-04",
+          "flex items-center gap-ds-03",
+          Z
+        ),
+        ...V,
+        children: [
+          I !== !1 && (I ?? (N || w ? /* @__PURE__ */ e(
+            Q,
+            {
+              variant: "solid",
+              size: "icon-md",
+              onClick: () => He.current?.click(),
+              title: "Attach",
+              "aria-label": "Attach file",
+              className: "shrink-0",
+              children: /* @__PURE__ */ e(g, { icon: rr, size: "md" })
+            }
+          ) : null)),
+          /* @__PURE__ */ h(
+            "div",
+            {
+              role: "region",
+              "aria-label": "Message composer",
+              className: z(
+                "flex-1 min-w-0 overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-raised-hover",
+                "transition-[color,background-color,border-color,box-shadow] duration-fast-02 ease-productive-standard",
+                "hover:bg-surface-raised-active",
+                "focus-within:ring-2 focus-within:ring-accent-9 focus-within:ring-offset-2 focus-within:border-accent-9",
+                D === "recording" && "border-error-7/30",
+                dt && "border-dashed border-accent-7 bg-accent-2",
+                i && "opacity-action-disabled cursor-not-allowed"
+              ),
+              onFocus: () => Le(!0),
+              onBlur: (l) => {
+                l.currentTarget.contains(l.relatedTarget) || Le(!1);
+              },
+              onDragOver: (l) => {
+                l.preventDefault(), Se(!0);
+              },
+              onDragLeave: () => Se(!1),
+              onDrop: bt,
+              children: [
+                M,
+                /* @__PURE__ */ e(fe, { children: k && /* @__PURE__ */ e(
+                  yr,
+                  {
+                    author: k.author,
+                    preview: k.preview,
+                    onDismiss: k.onDismiss
+                  },
+                  "reply"
+                ) }),
+                /* @__PURE__ */ e(fe, { children: re && /* @__PURE__ */ e(
+                  Ar,
+                  {
+                    date: re,
+                    onEdit: () => we(!0),
+                    onClear: () => he(null)
+                  },
+                  "schedule"
+                ) }),
+                /* @__PURE__ */ e(fe, { children: ce.length > 0 && /* @__PURE__ */ e(
+                  Dr,
+                  {
+                    attachments: ce,
+                    onRemoveAttachment: gt
+                  },
+                  "attachments"
+                ) }),
+                pe.toolbarPosition === "top" && b && /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: z(
+                      "grid transition-[grid-template-rows,opacity] duration-moderate-01 ease-productive-standard",
+                      L ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0 pointer-events-none"
+                    ),
+                    children: /* @__PURE__ */ e("div", { className: "overflow-hidden", children: /* @__PURE__ */ e(
+                      Ve,
+                      {
+                        editor: b,
+                        toolbar: _,
+                        isMobile: !1,
+                        hasMentions: !!(c || m),
+                        hasSlashCommands: !!B,
+                        disabled: i
+                      }
+                    ) })
+                  }
+                ),
+                /* @__PURE__ */ h("div", { className: "relative", children: [
+                  D === "recording" && /* @__PURE__ */ e(
+                    st,
+                    {
+                      duration: se.duration,
+                      analyserNode: se.analyserNode,
+                      maxDuration: j,
+                      onCancel: $e
+                    }
+                  ),
+                  /* @__PURE__ */ h(
+                    "div",
+                    {
+                      ref: ut,
+                      className: z(
+                        "flex items-center px-ds-04 py-ds-03 cursor-text [&_.tiptap]:w-full [&_.tiptap]:outline-none",
+                        D === "recording" && "invisible"
+                      ),
+                      style: {
+                        minHeight: pe.minHeight,
+                        maxHeight: ft,
+                        overflowY: "auto"
+                      },
+                      onClick: () => b?.commands.focus(),
+                      children: [
+                        /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ e(_t, { editor: b }) }),
+                        b && D !== "recording" && /* @__PURE__ */ h("div", { className: "flex items-center gap-ds-01 shrink-0 ml-ds-03", children: [
+                          /* @__PURE__ */ e(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => ae((l) => !l),
+                              title: L ? "Hide formatting" : "Show formatting",
+                              "aria-label": L ? "Hide formatting" : "Show formatting",
+                              "aria-pressed": L,
+                              className: z(
+                                "inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-ds-md touch-target",
+                                "transition-colors duration-fast-01 ease-productive-standard",
+                                "hover:bg-surface-raised-hover",
+                                L ? "bg-surface-raised-hover text-accent-11" : "text-surface-fg-subtle"
+                              ),
+                              children: /* @__PURE__ */ e(g, { icon: nr, size: "xs" })
+                            }
+                          ),
+                          /* @__PURE__ */ h("div", { className: "relative", children: [
+                            /* @__PURE__ */ e(
+                              "button",
+                              {
+                                ref: ke,
+                                type: "button",
+                                onClick: () => ye((l) => !l),
+                                title: "Emoji",
+                                "aria-label": "Emoji",
+                                className: z(
+                                  "inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-ds-md touch-target transition-colors duration-fast-01",
+                                  O ? "bg-surface-raised-hover text-accent-11" : "text-surface-fg-subtle hover:bg-surface-raised-hover hover:text-surface-fg"
+                                ),
+                                children: /* @__PURE__ */ e(g, { icon: rt, size: "xs" })
+                              }
+                            ),
+                            O && Ct.createPortal(
+                              /* @__PURE__ */ e("div", { ref: Ce, className: "absolute z-popover", style: { top: 0, left: 0 }, children: /* @__PURE__ */ e(
+                                Qr,
+                                {
+                                  set: F,
+                                  onSelect: async ({ id: l, native: v }) => {
+                                    const C = await Ut(F), x = Ot(C, l);
+                                    x ? b.chain().focus().insertContent({
+                                      type: "emojiNode",
+                                      attrs: { id: l, native: x.native, set: F, x: x.x, y: x.y }
+                                    }).run() : b.chain().focus().insertContent(v).run(), ye(!1);
+                                  },
+                                  onClose: () => ye(!1)
+                                }
+                              ) }),
+                              document.body
+                            )
+                          ] })
+                        ] })
+                      ]
+                    }
+                  )
+                ] }),
+                D === "review" && ee && /* @__PURE__ */ h("div", { className: "flex items-center gap-ds-03 px-ds-04 py-ds-02b border-b border-surface-border", children: [
+                  /* @__PURE__ */ e(
+                    ot,
+                    {
+                      src: ee.blob,
+                      duration: ee.duration,
+                      waveformData: ee.waveformData,
+                      className: "flex-1"
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    Q,
+                    {
+                      variant: "ghost",
+                      size: "icon-sm",
+                      onClick: xt,
+                      "aria-label": "Discard voice note",
+                      title: "Discard voice note",
+                      className: "text-surface-fg-subtle hover:text-error-11",
+                      children: /* @__PURE__ */ e(g, { icon: Ue, size: "sm" })
+                    }
+                  )
+                ] }),
+                je && b && !Fe && /* @__PURE__ */ e(Gr, { editor: b }),
+                pe.toolbarPosition === "bottom" && b && /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: z(
+                      "grid transition-[grid-template-rows,opacity] duration-moderate-01 ease-productive-standard",
+                      yt ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0 pointer-events-none"
+                    ),
+                    children: /* @__PURE__ */ e("div", { className: "overflow-hidden", children: /* @__PURE__ */ e(
+                      Ve,
+                      {
+                        editor: b,
+                        toolbar: _,
+                        isMobile: je,
+                        hasMentions: !!(c || m),
+                        hasSlashCommands: !!B,
+                        disabled: i
+                      }
+                    ) })
+                  }
+                ),
+                f && o !== "hidden" && (() => {
+                  const l = _e / f, v = o === "always", C = o === "focus" && ct, x = (o === "near-limit" || !o) && l >= 0.8;
+                  return v || C || x || l >= 1 ? /* @__PURE__ */ h("div", { className: z(
+                    "flex justify-end px-ds-04 pb-ds-02 text-ds-xs tabular-nums transition-opacity duration-fast-01",
+                    l >= 1 ? "text-error-11 font-medium" : l >= 0.9 ? "text-warning-11" : "text-surface-fg-subtle"
+                  ), children: [
+                    _e,
+                    "/",
+                    f
+                  ] }) : null;
+                })(),
+                y,
+                /* @__PURE__ */ e(
+                  "input",
+                  {
+                    ref: He,
+                    type: "file",
+                    multiple: !0,
+                    className: "hidden",
+                    onChange: vt
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ h("div", { className: "flex items-center gap-ds-02 shrink-0", children: [
+            te && te.length > 0 && D !== "recording" && /* @__PURE__ */ e(Yr, { options: te }),
+            /* @__PURE__ */ h(fe, { mode: "popLayout", initial: !1, children: [
+              D === "recording" && /* @__PURE__ */ h(
+                G.div,
+                {
+                  initial: { scale: 0.8, opacity: 0 },
+                  animate: { scale: 1, opacity: 1 },
+                  exit: { scale: 0.8, opacity: 0 },
+                  transition: { duration: 0.15 },
+                  className: "flex items-center gap-ds-02",
+                  children: [
+                    /* @__PURE__ */ e(Q, { variant: "soft", size: ie, onClick: $e, "aria-label": "Cancel recording", title: "Cancel recording", className: "text-surface-fg-subtle hover:text-error-11", children: /* @__PURE__ */ e(g, { icon: Ue, size: oe }) }),
+                    /* @__PURE__ */ e(Q, { variant: "solid", size: ie, color: "error", onClick: ht, "aria-label": "Stop recording", title: "Stop recording", children: /* @__PURE__ */ e(g, { icon: Oe, size: oe }) })
+                  ]
+                },
+                "recording"
+              ),
+              A && D !== "recording" && /* @__PURE__ */ e(
+                G.div,
+                {
+                  initial: { scale: 0.8, opacity: 0 },
+                  animate: { scale: 1, opacity: 1 },
+                  exit: { scale: 0.8, opacity: 0 },
+                  transition: { duration: 0.15 },
+                  children: /* @__PURE__ */ e(Q, { variant: "solid", size: ie, color: "error", onClick: U, "aria-label": "Stop", title: "Stop", children: /* @__PURE__ */ e(g, { icon: Oe, size: oe }) })
+                },
+                "streaming"
+              ),
+              !A && D !== "recording" && ge && J && /* @__PURE__ */ e(
+                G.div,
+                {
+                  initial: { scale: 0.8, opacity: 0 },
+                  animate: { scale: 1, opacity: 1 },
+                  exit: { scale: 0.8, opacity: 0 },
+                  transition: { duration: 0.15 },
+                  children: /* @__PURE__ */ e(
+                    hr,
+                    {
+                      onClick: Ee,
+                      disabled: i,
+                      "aria-label": re ? "Schedule send" : "Send",
+                      size: ie,
+                      dropdownContent: /* @__PURE__ */ e(
+                        Nr,
+                        {
+                          onSchedule: (l) => he(l),
+                          onClose: () => {
+                          },
+                          onOpenDialog: () => we(!0)
+                        }
+                      ),
+                      children: /* @__PURE__ */ e(g, { icon: re ? Pe : ze, size: oe })
+                    }
+                  )
+                },
+                "split-send"
+              ),
+              !A && D !== "recording" && ge && !J && /* @__PURE__ */ e(
+                G.div,
+                {
+                  initial: { scale: 0.8, opacity: 0 },
+                  animate: { scale: 1, opacity: 1 },
+                  exit: { scale: 0.8, opacity: 0 },
+                  transition: { duration: 0.15 },
+                  children: /* @__PURE__ */ e(Q, { variant: "solid", size: ie, onClick: Ee, disabled: i, "aria-label": "Send", title: "Send", children: /* @__PURE__ */ e(g, { icon: ze, size: oe }) })
+                },
+                "send"
+              ),
+              !A && D !== "recording" && !ge && R && /* @__PURE__ */ e(
+                G.div,
+                {
+                  initial: { scale: 0.8, opacity: 0 },
+                  animate: { scale: 1, opacity: 1 },
+                  exit: { scale: 0.8, opacity: 0 },
+                  transition: { duration: 0.15 },
+                  children: /* @__PURE__ */ e(Q, { variant: "soft", size: ie, onClick: mt, "aria-label": "Record voice message", title: "Record voice message", children: /* @__PURE__ */ e(g, { icon: sr, size: oe }) })
+                },
+                "mic"
+              ),
+              !A && D !== "recording" && !ge && !R && /* @__PURE__ */ e(
+                G.div,
+                {
+                  initial: { scale: 0.8, opacity: 0 },
+                  animate: { scale: 1, opacity: 1 },
+                  exit: { scale: 0.8, opacity: 0 },
+                  transition: { duration: 0.15 },
+                  children: /* @__PURE__ */ e(Q, { variant: "solid", size: ie, disabled: !0, "aria-label": "Send", title: "Send", children: /* @__PURE__ */ e(g, { icon: ze, size: oe }) })
+                },
+                "send-disabled"
+              )
+            ] })
+          ] }),
+          $ && /* @__PURE__ */ e("p", { className: "mt-ds-02 text-center text-ds-xs text-surface-fg-subtle/50", children: $ }),
+          J && /* @__PURE__ */ e(
+            Sr,
+            {
+              open: at,
+              onOpenChange: we,
+              onSchedule: (l) => he(l),
+              initialDate: re
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Jr.displayName = "RichChatInput";
+export {
+  ot as AudioPlayer,
+  Be as AudioWaveform,
+  Hr as BlockquoteButton,
+  zr as BoldButton,
+  Lr as BulletListButton,
+  Br as CodeButton,
+  Fr as EmojiButton,
+  Pr as HighlightButton,
+  Tr as ItalicButton,
+  jr as LinkButton,
+  $r as MentionButton,
+  _r as OrderedListButton,
+  Jr as RichChatInput,
+  qr as SlashCommandButton,
+  Ir as StrikeButton,
+  q as ToolbarButton,
+  Te as ToolbarDivider,
+  ve as ToolbarGroup,
+  Mr as UnderlineButton,
+  Kr as useVoiceRecorder
+};