@devalok/shilp-sutra 0.27.2 → 0.29.0

package/dist/_chunks/typing-indicator.js

@@ -0,0 +1,565 @@
+"use client";
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import * as n from "react";
+import { cn as d } from "../ui/lib/utils.js";
+import { tweens as O, springs as A, motionProps as R } from "../ui/lib/motion.js";
+import { Spinner as G } from "../ui/spinner.js";
+import { A as E, m as C } from "./framer.js";
+import { IconTrash as J, IconAlertCircle as Q, IconSquare as V, IconSend as X } from "@tabler/icons-react";
+import { Icon as M } from "../ui/icon.js";
+import { Avatar as Z, AvatarImage as _, AvatarFallback as ee } from "../ui/avatar.js";
+import { Tooltip as te, TooltipTrigger as se, TooltipContent as re } from "../ui/tooltip.js";
+import { Button as B } from "../ui/button.js";
+const ae = n.forwardRef(
+  ({
+    children: e,
+    autoScroll: s = !0,
+    newMessageCount: r = 0,
+    onScrollToBottom: a,
+    onLoadMore: i,
+    isLoadingMore: o = !1,
+    emptySlot: l,
+    scrollToBottomSlot: u,
+    headerSlot: h,
+    className: g,
+    ...y
+  }, b) => {
+    const x = n.useRef(null), v = n.useRef(!0), [c, T] = n.useState(!0), N = n.useRef(!1), w = n.useRef(0), S = n.Children.count(e) === 0 && !o, D = n.useCallback(() => {
+      const f = x.current;
+      if (!f) return;
+      const k = f.scrollHeight - f.scrollTop - f.clientHeight < 40;
+      v.current = k, T(k), f.scrollTop < 100 && i && !N.current && (N.current = !0, w.current = f.scrollHeight, i());
+    }, [i]);
+    n.useLayoutEffect(() => {
+      const f = x.current;
+      if (f) {
+        if (N.current) {
+          const k = f.scrollHeight;
+          f.scrollTop = k - w.current, N.current = !1;
+          return;
+        }
+        s && v.current && f.scrollTo({ top: f.scrollHeight, behavior: "smooth" });
+      }
+    }, [e, s]), n.useEffect(() => {
+      o || (N.current = !1);
+    }, [o]);
+    const p = r > 0 && !c, q = n.useCallback(() => {
+      const f = x.current;
+      f && f.scrollTo({ top: f.scrollHeight, behavior: "smooth" }), a?.();
+    }, [a]);
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        ref: b,
+        className: d("relative flex flex-1 flex-col overflow-hidden", g),
+        ...y,
+        children: [
+          h,
+          /* @__PURE__ */ m(
+            "div",
+            {
+              ref: x,
+              role: "log",
+              "aria-live": "polite",
+              "aria-relevant": "additions",
+              className: "flex-1 overflow-y-auto px-ds-05 py-ds-04",
+              style: {
+                scrollbarWidth: "thin",
+                scrollbarColor: "var(--color-surface-border) transparent"
+              },
+              onScroll: D,
+              children: [
+                o && /* @__PURE__ */ t("div", { className: "flex justify-center py-ds-03", children: /* @__PURE__ */ t(G, { size: "sm" }) }),
+                S ? l : /* @__PURE__ */ t("div", { className: "flex flex-col gap-ds-04", children: /* @__PURE__ */ t(E, { initial: !1, children: e }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ t(E, { children: p && /* @__PURE__ */ m(
+            C.button,
+            {
+              initial: { opacity: 0, y: 10 },
+              animate: { opacity: 1, y: 0 },
+              exit: { opacity: 0, y: 10 },
+              transition: O.fade,
+              onClick: q,
+              className: "absolute bottom-ds-04 left-1/2 z-10 -translate-x-1/2 rounded-full bg-accent-9 px-ds-04 py-ds-02 text-ds-xs font-medium text-accent-fg shadow-raised transition-colors hover:bg-accent-10",
+              children: [
+                r,
+                " new"
+              ]
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+ae.displayName = "MessageList";
+const I = n.createContext({
+  variant: "flat",
+  placement: "start",
+  grouped: !1
+});
+function $() {
+  return n.useContext(I);
+}
+const j = n.forwardRef(
+  ({
+    children: e,
+    variant: s = "flat",
+    placement: r = "start",
+    highlight: a,
+    grouped: i = !1,
+    deleted: o = !1,
+    deletedText: l = "This message was deleted",
+    className: u,
+    ...h
+  }, g) => {
+    const y = n.useMemo(
+      () => ({ variant: s, placement: r, grouped: i, highlight: a }),
+      [s, r, i, a]
+    );
+    return o ? /* @__PURE__ */ m(
+      C.div,
+      {
+        ref: g,
+        initial: { opacity: 0, y: 8 },
+        animate: { opacity: 1, y: 0 },
+        transition: A.snappy,
+        className: d(
+          "flex items-center gap-ds-02 py-ds-02 text-ds-xs text-surface-fg-subtle/50 italic",
+          u
+        ),
+        ...R(h),
+        children: [
+          /* @__PURE__ */ t(M, { icon: J, size: "xs" }),
+          l
+        ]
+      }
+    ) : s === "bubble" ? /* @__PURE__ */ t(I.Provider, { value: y, children: /* @__PURE__ */ t(
+      C.div,
+      {
+        ref: g,
+        initial: { opacity: 0, y: 8 },
+        animate: { opacity: 1, y: 0 },
+        transition: A.snappy,
+        className: d(
+          "group/message relative flex",
+          r === "end" ? "justify-end" : "justify-start",
+          a === "mention" && "border-l-2 border-l-accent-9 bg-accent-2 pl-ds-03 rounded-ds-sm",
+          a === "internal" && "bg-warning-2/50 rounded-ds-sm",
+          u
+        ),
+        ...R(h),
+        children: /* @__PURE__ */ t(
+          "div",
+          {
+            className: d(
+              "max-w-[85%] rounded-ds-2xl px-ds-04 py-ds-03",
+              r === "end" ? "bg-accent-3 text-surface-fg" : "bg-surface-raised text-surface-fg"
+            ),
+            children: e
+          }
+        )
+      }
+    ) }) : /* @__PURE__ */ t(I.Provider, { value: y, children: /* @__PURE__ */ t(
+      C.div,
+      {
+        ref: g,
+        initial: { opacity: 0, y: 8 },
+        animate: { opacity: 1, y: 0 },
+        transition: A.snappy,
+        className: d(
+          "group/message relative flex gap-ds-04",
+          i && "-mt-ds-01",
+          a === "mention" && "border-l-2 border-l-accent-9 bg-accent-2 pl-ds-03 rounded-ds-sm",
+          a === "internal" && "bg-warning-2/50 rounded-ds-sm",
+          u
+        ),
+        ...R(h),
+        children: e
+      }
+    ) });
+  }
+);
+j.displayName = "Message";
+function H({
+  src: e,
+  fallback: s,
+  icon: r,
+  size: a = "md",
+  children: i
+}) {
+  const { grouped: o } = $(), l = a === "sm" ? "w-5" : "w-6", u = a === "sm" ? "h-5" : "h-6";
+  return o ? /* @__PURE__ */ t("div", { className: d(l, u, "shrink-0") }) : i ? /* @__PURE__ */ t("div", { className: d(l, "shrink-0 flex items-start"), children: i }) : r ? /* @__PURE__ */ t(
+    "div",
+    {
+      className: d(
+        l,
+        a === "sm" ? "h-5" : "h-6",
+        "shrink-0 flex items-center justify-center rounded-ds-full bg-surface-raised-hover"
+      ),
+      children: r
+    }
+  ) : /* @__PURE__ */ t("div", { className: d(l, "shrink-0"), children: /* @__PURE__ */ m(Z, { size: a === "sm" ? "xs" : "sm", children: [
+    e && /* @__PURE__ */ t(_, { src: e, alt: s ?? "" }),
+    /* @__PURE__ */ t(ee, { children: s ?? "" })
+  ] }) });
+}
+H.displayName = "Message.Avatar";
+function F({ children: e, className: s, ...r }) {
+  return /* @__PURE__ */ t("div", { className: d("min-w-0 flex-1 flex flex-col gap-ds-02", s), ...r, children: e });
+}
+F.displayName = "Message.Content";
+function ne(e) {
+  return e.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" });
+}
+function K({
+  name: e,
+  badge: s,
+  timestamp: r,
+  formattedTimestamp: a,
+  timestampFormat: i = ne
+}) {
+  const { grouped: o } = $();
+  if (o) return null;
+  const l = a ?? (r ? i(r) : void 0);
+  return /* @__PURE__ */ m("div", { className: "flex items-baseline gap-ds-02", children: [
+    /* @__PURE__ */ t("span", { className: "font-semibold text-[13px] text-surface-fg", children: e }),
+    s,
+    l && /* @__PURE__ */ t("span", { className: "text-[11px] text-surface-fg-subtle/50", children: l })
+  ] });
+}
+K.displayName = "Message.Author";
+function U({ children: e, className: s, ...r }) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: d(
+        "text-[13px] leading-relaxed text-surface-fg whitespace-pre-wrap",
+        s
+      ),
+      ...r,
+      children: e
+    }
+  );
+}
+U.displayName = "Message.Body";
+function Y({
+  content: e,
+  onSave: s,
+  onCancel: r,
+  canEdit: a = !1,
+  renderContent: i
+}) {
+  const [o, l] = n.useState(!1), [u, h] = n.useState(e), g = n.useRef(null);
+  n.useEffect(() => {
+    o && g.current && (g.current.focus(), g.current.select());
+  }, [o]);
+  const y = n.useCallback(() => {
+    a && (h(e), l(!0));
+  }, [a, e]), b = n.useCallback(() => {
+    const c = u.trim();
+    c && c !== e && s(c), l(!1);
+  }, [u, e, s]), x = n.useCallback(() => {
+    l(!1), h(e), r?.();
+  }, [e, r]), v = n.useCallback(
+    (c) => {
+      c.key === "Enter" && !c.shiftKey ? (c.preventDefault(), b()) : c.key === "Escape" && (c.preventDefault(), x());
+    },
+    [b, x]
+  );
+  return o ? /* @__PURE__ */ m("div", { className: "text-[13px] leading-relaxed", children: [
+    /* @__PURE__ */ t(
+      "textarea",
+      {
+        ref: g,
+        value: u,
+        onChange: (c) => h(c.target.value),
+        onKeyDown: v,
+        onBlur: b,
+        className: "w-full resize-none rounded-ds-sm border border-surface-border-strong bg-surface-raised-hover px-ds-02 py-ds-01 text-[13px] leading-relaxed text-surface-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9",
+        rows: 2
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: "mt-ds-01 text-ds-xs text-surface-fg-subtle/50", children: "Enter to save · Escape to cancel" })
+  ] }) : /* @__PURE__ */ t(
+    "div",
+    {
+      className: d(
+        "text-[13px] leading-relaxed text-surface-fg whitespace-pre-wrap",
+        a && "cursor-pointer hover:bg-surface-raised-hover rounded-ds-sm transition-colors"
+      ),
+      onClick: y,
+      role: a ? "button" : void 0,
+      tabIndex: a ? 0 : void 0,
+      onKeyDown: a ? (c) => {
+        (c.key === "Enter" || c.key === " ") && (c.preventDefault(), y());
+      } : void 0,
+      children: i ? i(e) : e
+    }
+  );
+}
+Y.displayName = "Message.EditableBody";
+function P({ reactions: e, onReact: s }) {
+  return e.length === 0 ? null : /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-ds-02 mt-ds-03", children: e.map((r) => /* @__PURE__ */ m(
+    "button",
+    {
+      type: "button",
+      onClick: () => s(r.emoji),
+      className: d(
+        "inline-flex items-center gap-ds-01 rounded-full px-ds-02 py-ds-01 text-ds-xs transition-colors",
+        r.reacted ? "bg-accent-3 ring-1 ring-accent-6" : "bg-surface-raised-hover hover:bg-surface-raised-active"
+      ),
+      children: [
+        /* @__PURE__ */ t("span", { children: r.emoji }),
+        /* @__PURE__ */ t("span", { children: r.count })
+      ]
+    },
+    r.emoji
+  )) });
+}
+P.displayName = "Message.Reactions";
+function L({ children: e, delay: s = 100 }) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: d(
+        "absolute -top-2 right-0 z-10",
+        "flex items-center gap-ds-01 rounded-ds-md border border-surface-border bg-surface-raised px-ds-01 py-ds-01 shadow-raised",
+        "opacity-0 group-hover/message:opacity-100 transition-opacity duration-150"
+      ),
+      style: { transitionDelay: `${s}ms` },
+      children: e
+    }
+  );
+}
+L.displayName = "Message.Actions";
+function W({
+  icon: e,
+  label: s,
+  onClick: r,
+  variant: a = "default"
+}) {
+  return /* @__PURE__ */ m(te, { children: [
+    /* @__PURE__ */ t(se, { asChild: !0, children: /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        onClick: r,
+        "aria-label": s,
+        className: d(
+          "p-ds-02 rounded-ds-sm transition-colors",
+          a === "default" && "text-surface-fg-subtle hover:text-surface-fg hover:bg-surface-raised-hover",
+          a === "danger" && "text-surface-fg-subtle hover:text-error-11 hover:bg-surface-raised-hover"
+        ),
+        children: /* @__PURE__ */ t(M, { icon: e, size: "xs" })
+      }
+    ) }),
+    /* @__PURE__ */ t(re, { children: s })
+  ] });
+}
+W.displayName = "Message.Action";
+const Ce = Object.assign(j, {
+  Avatar: H,
+  Content: F,
+  Author: K,
+  Body: U,
+  EditableBody: Y,
+  Reactions: P,
+  Actions: L,
+  Action: W
+});
+function z(e) {
+  return new Date(e).toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "2-digit"
+  });
+}
+const ie = n.forwardRef(
+  ({ icon: e, timestamp: s, variant: r = "event", children: a, className: i, ...o }, l) => r === "alert" ? /* @__PURE__ */ t(
+    "div",
+    {
+      ref: l,
+      className: d("flex justify-center", i),
+      ...o,
+      children: /* @__PURE__ */ m("div", { className: "flex items-center gap-ds-03 rounded-ds-lg bg-error-3 px-ds-04 py-ds-03", children: [
+        e ?? /* @__PURE__ */ t(M, { icon: Q, size: "sm" }),
+        /* @__PURE__ */ t("span", { className: "text-ds-sm text-error-11", children: a }),
+        s && /* @__PURE__ */ t("span", { className: "text-ds-sm text-error-11/60", children: z(s) })
+      ] })
+    }
+  ) : /* @__PURE__ */ m(
+    "div",
+    {
+      ref: l,
+      className: d(
+        "flex items-center gap-ds-02 rounded-ds-sm bg-surface-raised-hover/30 px-ds-02 py-ds-01 -mx-ds-02 text-ds-sm text-surface-fg-subtle/60",
+        i
+      ),
+      ...o,
+      children: [
+        e,
+        /* @__PURE__ */ t("span", { className: "flex-1", children: a }),
+        s && /* @__PURE__ */ t("span", { children: z(s) })
+      ]
+    }
+  )
+);
+ie.displayName = "SystemMessage";
+function le(e) {
+  const s = /* @__PURE__ */ new Date(), r = new Date(s.getFullYear(), s.getMonth(), s.getDate()), a = new Date(e.getFullYear(), e.getMonth(), e.getDate()), i = r.getTime() - a.getTime(), o = Math.round(i / (1e3 * 60 * 60 * 24));
+  if (o === 0) return "Today";
+  if (o === 1) return "Yesterday";
+  const l = e.toLocaleString("en-US", { month: "short" }), u = e.getDate();
+  return e.getFullYear() !== s.getFullYear() ? `${l} ${u}, ${e.getFullYear()}` : `${l} ${u}`;
+}
+function oe({ date: e, format: s, className: r }) {
+  const a = typeof e == "string" ? new Date(e) : e, i = s ? s(a) : le(a);
+  return /* @__PURE__ */ m("div", { className: d("flex items-center gap-ds-03 py-ds-03", r), children: [
+    /* @__PURE__ */ t("div", { className: "flex-1 border-t border-surface-border-subtle" }),
+    /* @__PURE__ */ t("span", { className: "text-ds-xs font-medium text-surface-fg-subtle/50 uppercase tracking-wider", children: i }),
+    /* @__PURE__ */ t("div", { className: "flex-1 border-t border-surface-border-subtle" })
+  ] });
+}
+oe.displayName = "DateSeparator";
+function ce({
+  label: e = "NEW",
+  count: s,
+  className: r
+}) {
+  return /* @__PURE__ */ m("div", { className: d("relative flex items-center py-ds-02", r), children: [
+    /* @__PURE__ */ t("div", { className: "flex-1 border-t-2 border-accent-7" }),
+    /* @__PURE__ */ t("span", { className: "px-ds-03 text-ds-xs font-semibold text-accent-11", children: s ? `${s} ${e}` : e }),
+    /* @__PURE__ */ t("div", { className: "flex-1 border-t-2 border-accent-7" })
+  ] });
+}
+ce.displayName = "UnreadSeparator";
+const de = n.forwardRef(
+  ({
+    onSubmit: e,
+    placeholder: s = "Type a message...",
+    disabled: r = !1,
+    isStreaming: a = !1,
+    onCancel: i,
+    leadingSlot: o,
+    trailingSlot: l,
+    disclaimer: u,
+    sendIcon: h,
+    className: g,
+    ...y
+  }, b) => {
+    const [x, v] = n.useState(""), c = n.useRef(null), T = n.useCallback(() => {
+      const p = c.current;
+      p && (p.style.height = "auto", p.style.height = `${Math.min(p.scrollHeight, 160)}px`);
+    }, []), N = n.useCallback(
+      (p) => {
+        v(p.target.value), T();
+      },
+      [T]
+    ), w = n.useCallback(() => {
+      const p = x.trim();
+      !p || a || (e(p), v(""), c.current && (c.current.style.height = "auto"));
+    }, [x, a, e]), S = n.useCallback(
+      (p) => {
+        p.key === "Enter" && !p.shiftKey && (p.preventDefault(), a || w());
+      },
+      [a, w]
+    ), D = x.trim().length === 0;
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        ref: b,
+        className: d(
+          "border-t border-surface-border-subtle px-ds-05 py-ds-04",
+          g
+        ),
+        ...y,
+        children: [
+          /* @__PURE__ */ m("div", { className: "flex items-end gap-ds-02 rounded-ds-xl border border-surface-border bg-surface-base p-ds-03", children: [
+            o,
+            /* @__PURE__ */ t(
+              "textarea",
+              {
+                ref: c,
+                value: x,
+                onChange: N,
+                onKeyDown: S,
+                placeholder: s,
+                disabled: r,
+                rows: 1,
+                className: "flex-1 resize-none bg-transparent px-ds-02 py-ds-01 text-ds-sm text-surface-fg placeholder:text-surface-fg-subtle/50 focus:outline-none disabled:opacity-50",
+                style: { maxHeight: 160 }
+              }
+            ),
+            a ? /* @__PURE__ */ t(
+              B,
+              {
+                variant: "ghost",
+                size: "icon-sm",
+                color: "error",
+                onClick: i,
+                "aria-label": "Stop",
+                children: /* @__PURE__ */ t(M, { icon: V, size: "sm" })
+              }
+            ) : /* @__PURE__ */ t(
+              B,
+              {
+                variant: "ghost",
+                size: "icon-sm",
+                onClick: w,
+                disabled: D || r,
+                "aria-label": "Send",
+                children: h ?? /* @__PURE__ */ t(M, { icon: X, size: "sm" })
+              }
+            ),
+            l
+          ] }),
+          u && /* @__PURE__ */ t("p", { className: "mt-ds-02 text-center text-ds-xs text-surface-fg-subtle/50", children: u })
+        ]
+      }
+    );
+  }
+);
+de.displayName = "MessageInput";
+function ue(e) {
+  return e.length === 1 ? `${e[0].name} is typing...` : e.length === 2 ? `${e[0].name} and ${e[1].name} are typing...` : "Several people are typing...";
+}
+function fe({ users: e, className: s }) {
+  return /* @__PURE__ */ t("div", { className: d("min-h-[24px] px-ds-05", s), children: /* @__PURE__ */ t(E, { children: e.length > 0 && /* @__PURE__ */ m(
+    C.div,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      className: "flex items-center gap-ds-02 text-ds-xs text-surface-fg-subtle",
+      children: [
+        /* @__PURE__ */ t("span", { className: "flex items-center gap-ds-01", children: [0, 1, 2].map((r) => /* @__PURE__ */ t(
+          C.span,
+          {
+            className: "h-1 w-1 rounded-full bg-surface-fg-subtle",
+            animate: { y: [0, -3, 0] },
+            transition: {
+              duration: 0.5,
+              repeat: 1 / 0,
+              delay: r * 0.15
+            }
+          },
+          r
+        )) }),
+        /* @__PURE__ */ t("span", { children: ue(e) })
+      ]
+    }
+  ) }) });
+}
+fe.displayName = "TypingIndicator";
+export {
+  oe as D,
+  Ce as M,
+  ie as S,
+  fe as T,
+  ce as U,
+  de as a,
+  ae as b,
+  $ as u
+};