@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/_chunks/typing-indicator.js

@@ -1,565 +0,0 @@
-"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-hidden 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-hidden 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
-};