impact-nova 2.5.16 → 2.6.0-alpha.0

package/dist/components/data/ag-grid-react/chat/chat-thread-ui.js

@@ -0,0 +1,713 @@
+import { jsx as e, jsxs as a, Fragment as Q } from "react/jsx-runtime";
+import { useState as z, useEffect as te } from "react";
+import { Avatar as ae, AvatarImage as ne, AvatarFallback as le } from "../../../data-display/avatar/avatar.js";
+import { Badge as re } from "../../../data-display/badge/badge.js";
+import { Button as k } from "../../../primitives/button/button.js";
+import { Input as J } from "../../../forms/input/input.js";
+import { DropdownMenu as ie, DropdownMenuTrigger as ce, DropdownMenuContent as de, DropdownMenuItem as se } from "../../../feedback/dropdown-menu/dropdown-menu.js";
+import { ThreeDots as oe, Search as he, Pin as X, AddUser as pe, ChevronRight as F, Plus as me, Bin as ue, Checkmark as xe } from "impact-nova-icons";
+import { useImpactNovaI18n as _ } from "../../../../i18n/use-impact-nova-i18n.js";
+import { cn as w } from "../../../../lib/utils.js";
+import { CHAT_DRAWER_MIN_WIDTH as be, CHAT_MEMBERS_VISIBLE as G, CHAT_PEOPLE_PAGE_SIZE as O } from "./chat-constants.js";
+import { chatAllows as L } from "./chat-capabilities.js";
+import { ChatComposer as Y } from "./chat-composer.js";
+import { ChatSendIcon as st } from "./chat-composer.js";
+import { chatLooksLikeHtml as fe, sanitizeChatHtml as ve } from "./chat-html.js";
+import { isValidChatMessageText as $, chatPlainText as ee } from "./chat-identity.js";
+import { resolveChatMembers as Ce, formatChatStamp as V, findChatMember as W, chatInitials as ye, chatAvatarTone as Ne, chatDayKey as ke, formatChatClock as we, formatChatDayLabel as Ae, filterChatPeople as Me } from "./chat-format.js";
+import { ChatPriorityGlyph as Pe, chatPriorityLabel as Te, chatPriorityRailClass as ge, ChatPriorityMenu as ze } from "./chat-priority.js";
+import { buildChatMessageMenuItems as Se } from "./chat-ui-actions.js";
+const Le = "!h-8 !w-8 !rounded-md text-sm font-extrabold", Be = "!h-9 !w-9 !rounded-xl text-xs font-extrabold", Z = "flex h-10 w-full items-center gap-2 rounded-lg px-2 -mx-2 text-left hover:bg-accent";
+function He() {
+  return /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ e("circle", { cx: "8", cy: "8", r: "6.25", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ e("path", { d: "M4.2 4.2 11.8 11.8", stroke: "currentColor", strokeWidth: "1.5" })
+  ] });
+}
+function _e() {
+  return /* @__PURE__ */ e("svg", { className: "iv-chat-reply-curve", width: "18", height: "12", viewBox: "0 0 18 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ e(
+    "path",
+    {
+      d: "M0.5 0C0.5 3.66667 2.7 10.9 11.5 10.5C20.3 10.1 15.8333 10.3333 12.5 10.5",
+      stroke: "currentColor"
+    }
+  ) });
+}
+function at() {
+  return /* @__PURE__ */ e("svg", { className: "size-4", viewBox: "0 0 12 7", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ e(
+    "path",
+    {
+      d: "M0.666667 4C1.03333 4 1.33333 3.7 1.33333 3.33333C1.33333 2.96667 1.03333 2.66667 0.666667 2.66667C0.3 2.66667 0 2.96667 0 3.33333C0 3.7 0.3 4 0.666667 4ZM0.666667 6.66667C1.03333 6.66667 1.33333 6.36667 1.33333 6C1.33333 5.63333 1.03333 5.33333 0.666667 5.33333C0.3 5.33333 0 5.63333 0 6C0 6.36667 0.3 6.66667 0.666667 6.66667ZM0.666667 1.33333C1.03333 1.33333 1.33333 1.03333 1.33333 0.666667C1.33333 0.3 1.03333 0 0.666667 0C0.3 0 0 0.3 0 0.666667C0 1.03333 0.3 1.33333 0.666667 1.33333ZM3.33333 4H11.3333C11.7 4 12 3.7 12 3.33333C12 2.96667 11.7 2.66667 11.3333 2.66667H3.33333C2.96667 2.66667 2.66667 2.96667 2.66667 3.33333C2.66667 3.7 2.96667 4 3.33333 4ZM3.33333 6.66667H11.3333C11.7 6.66667 12 6.36667 12 6C12 5.63333 11.7 5.33333 11.3333 5.33333H3.33333C2.96667 5.33333 2.66667 5.63333 2.66667 6C2.66667 6.36667 2.96667 6.66667 3.33333 6.66667ZM2.66667 0.666667C2.66667 1.03333 2.96667 1.33333 3.33333 1.33333H11.3333C11.7 1.33333 12 1.03333 12 0.666667C12 0.3 11.7 0 11.3333 0H3.33333C2.96667 0 2.66667 0.3 2.66667 0.666667Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function nt() {
+  return /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ e(
+    "path",
+    {
+      d: "M9.66536 13.333C9.66536 13.775 9.48977 14.199 9.17721 14.5115C8.86465 14.8241 8.44072 14.9997 7.9987 14.9997C7.55667 14.9997 7.13275 14.8241 6.82019 14.5115C6.50763 14.199 6.33203 13.775 6.33203 13.333M0.332031 0.333008L15.6654 15.6663M11.6654 11.6663H14.9987V11.4997L14.4334 10.8943C13.284 9.66259 12.5528 8.09942 12.344 6.42767L12.12 4.63834C12.0018 3.68845 11.5592 2.80854 10.8669 2.14745C10.1747 1.48636 9.27532 1.08468 8.321 1.01035C7.36668 0.936015 6.41598 1.1936 5.62971 1.73952C4.84344 2.28545 4.26987 3.08621 4.00603 4.00634M9.33203 11.6663H0.998698V11.4997L1.56403 10.8943C2.71342 9.66259 3.44461 8.09942 3.65336 6.42767L3.7027 6.03701",
+      stroke: "currentColor"
+    }
+  ) });
+}
+function B({
+  author: t,
+  member: s,
+  size: m = "sm",
+  shape: o = "square",
+  render: n
+}) {
+  if (n) return n({ author: t, member: s });
+  const f = s?.avatarUrl;
+  return /* @__PURE__ */ a(
+    ae,
+    {
+      size: "sm",
+      shape: o,
+      className: w(m === "md" ? Be : Le, o === "circle" && "!rounded-full"),
+      children: [
+        f ? /* @__PURE__ */ e(ne, { src: f, alt: "" }) : null,
+        /* @__PURE__ */ e(le, { className: w("font-extrabold", m === "md" ? "text-xs" : "text-sm", Ne(t)), children: ye(t) })
+      ]
+    }
+  );
+}
+function De({
+  label: t,
+  items: s,
+  trigger: m
+}) {
+  return s.length === 0 ? null : /* @__PURE__ */ a(ie, { children: [
+    /* @__PURE__ */ e(ce, { asChild: !0, children: m ?? /* @__PURE__ */ e(k, { type: "button", size: "iconSm", variant: "ghost", className: "[&_svg]:size-4", "aria-label": t, children: /* @__PURE__ */ e(oe, {}) }) }),
+    /* @__PURE__ */ e(de, { align: "end", children: s.map((o) => /* @__PURE__ */ e(se, { disabled: o.disabled, icon: o.icon, onSelect: o.onSelect, children: o.label }, o.id)) })
+  ] });
+}
+function lt({
+  message: t,
+  previousDayKey: s,
+  rowId: m,
+  conversationId: o,
+  config: n,
+  members: f,
+  highlighted: T,
+  locale: h,
+  compact: v,
+  onReply: p,
+  onOpenThread: C,
+  onPin: A,
+  onEdit: i,
+  onDelete: u,
+  onSetPriority: P,
+  onClose: y
+}) {
+  const { t: d } = _(), [r, c] = z(null), x = { rowId: m, conversationId: o, message: t, close: y }, g = { rowId: m, conversationId: o, message: t }, M = t.author === n.getAuthor(), N = W(f ?? [], t.author), D = Se({ extras: n.messageActions, context: x }), H = [
+    ...L(n, "edit", g) && !t.deleted ? [{ id: "edit", label: d("chat.edit"), onSelect: () => c(t.text) }] : [],
+    ...L(n, "delete", g) && !t.deleted ? [{ id: "delete", label: d("chat.delete"), onSelect: () => u(t) }] : [],
+    ...D
+  ], I = ke(t.createdAt), E = !v && I !== s, R = !!(t.updatedAt && t.updatedAt !== t.createdAt && !t.deleted), S = n.quickActions ?? [], j = we(t.updatedAt ?? t.createdAt, h), q = t.replyTo?.author === n.getAuthor() ? d("chat.you") : t.replyTo?.author, l = n.renderMessageBody ? n.renderMessageBody({ message: t }) : fe(t.text) ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: "iv-chat-html text-sm leading-5 text-content",
+      dangerouslySetInnerHTML: { __html: ve(t.text) }
+    }
+  ) : /* @__PURE__ */ e("p", { className: "whitespace-pre-wrap break-words text-sm leading-5 text-content", children: t.text });
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-iv-chat-message": "",
+      "data-iv-chat-message-id": t.id,
+      "data-iv-chat-priority": t.priority,
+      "data-iv-chat-mine": M ? "" : void 0,
+      "data-slot": "chat-message",
+      className: "mb-4",
+      children: [
+        E ? /* @__PURE__ */ e("p", { className: "iv-chat-day", children: Ae(t.createdAt, h, { today: d("chat.today"), yesterday: d("chat.yesterday") }) }) : null,
+        t.system ? /* @__PURE__ */ e("p", { "data-iv-chat-system": "", className: "iv-chat-day", children: t.text }) : t.deleted ? /* @__PURE__ */ a(
+          "div",
+          {
+            "data-iv-chat-deleted": "",
+            className: "flex items-center gap-2 rounded-lg bg-canvas-subtle px-4 py-3 text-sm text-content-secondary",
+            children: [
+              /* @__PURE__ */ e("span", { className: "text-content-tertiary", children: /* @__PURE__ */ e(He, {}) }),
+              /* @__PURE__ */ e("span", { children: d("chat.deleted") }),
+              /* @__PURE__ */ e("time", { className: "iv-chat-stamp ml-auto", dateTime: t.updatedAt ?? t.createdAt, children: j })
+            ]
+          }
+        ) : /* @__PURE__ */ a("div", { className: w("flex gap-2", M ? "justify-end" : "justify-start", T && "rounded-lg ring-2 ring-brand-tint"), children: [
+          M ? null : /* @__PURE__ */ e(B, { author: t.author, member: N, shape: "circle", render: n.renderAvatar }),
+          /* @__PURE__ */ a("div", { className: w("w-fit min-w-0 max-w-[min(100%,32rem)]", M && "ml-auto"), children: [
+            r != null ? /* @__PURE__ */ a(
+              "div",
+              {
+                className: "rounded-lg border border-brand p-2",
+                onKeyDown: (b) => {
+                  b.key === "Escape" && (b.preventDefault(), b.stopPropagation(), c(null));
+                },
+                children: [
+                  /* @__PURE__ */ e(
+                    Y,
+                    {
+                      value: r,
+                      onChange: c,
+                      onSave: () => {
+                        $(r) && (i(t, r), c(null));
+                      },
+                      disabled: !1,
+                      saving: !1,
+                      author: n.getAuthor(),
+                      placeholder: d("chat.composerPlaceholder"),
+                      hideSend: !0,
+                      hideChrome: !0
+                    }
+                  ),
+                  /* @__PURE__ */ a("div", { className: "mt-2 flex justify-end gap-3", children: [
+                    /* @__PURE__ */ e(k, { type: "button", size: "sm", variant: "outline", onClick: () => c(null), children: d("chat.cancel") }),
+                    /* @__PURE__ */ e(
+                      k,
+                      {
+                        type: "button",
+                        size: "sm",
+                        disabled: !$(r),
+                        onClick: () => {
+                          i(t, r), c(null);
+                        },
+                        children: d("chat.update")
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ) : /* @__PURE__ */ a("div", { className: w("iv-chat-bubble flex flex-col", ge(t.priority)), children: [
+              t.priority ? /* @__PURE__ */ a("p", { className: "mb-2 flex items-center gap-1.5 text-sm font-medium text-content", children: [
+                /* @__PURE__ */ e(Pe, { priority: t.priority }),
+                Te(t.priority, d)
+              ] }) : null,
+              t.replyTo ? /* @__PURE__ */ a("blockquote", { className: "iv-chat-quote", children: [
+                /* @__PURE__ */ e("p", { className: "iv-chat-quote-author", children: `“ ${q}` }),
+                /* @__PURE__ */ e("p", { className: "iv-chat-quote-text line-clamp-3", children: ee(t.replyTo.text) })
+              ] }) : null,
+              l,
+              t.attachments && t.attachments.length > 0 ? /* @__PURE__ */ e("ul", { className: "mt-2 flex flex-wrap gap-1.5", children: t.attachments.map((b) => /* @__PURE__ */ e("li", { className: "max-w-full", children: b.kind === "image" ? /* @__PURE__ */ e("img", { src: b.url, alt: b.name, className: "max-h-40 max-w-full rounded-md" }) : /* @__PURE__ */ e(
+                "a",
+                {
+                  href: b.url,
+                  className: "inline-flex rounded-md border border-stroke-hairline bg-canvas px-2 py-1 text-xs text-brand",
+                  children: b.name
+                }
+              ) }, b.id)) }) : null,
+              /* @__PURE__ */ a("time", { className: "iv-chat-stamp", dateTime: t.updatedAt ?? t.createdAt, children: [
+                j,
+                R ? ` · ${d("chat.edited")}` : ""
+              ] })
+            ] }),
+            !v && !t.parentId && r == null ? /* @__PURE__ */ a("div", { className: w("mt-1 flex flex-wrap items-center gap-2", M && "justify-end"), children: [
+              L(n, "create", g) ? /* @__PURE__ */ a(
+                k,
+                {
+                  type: "button",
+                  size: "sm",
+                  variant: "ghost",
+                  className: "h-7 gap-1 px-1 text-sm font-medium text-brand",
+                  onClick: () => p(t),
+                  children: [
+                    /* @__PURE__ */ e(_e, {}),
+                    d("chat.reply")
+                  ]
+                }
+              ) : null,
+              S.map((b) => /* @__PURE__ */ e(
+                k,
+                {
+                  type: "button",
+                  size: "sm",
+                  variant: "outline",
+                  className: "h-8 text-xs",
+                  disabled: b.disabled,
+                  onClick: () => b.onSelect(x),
+                  children: b.label
+                },
+                b.id
+              )),
+              (t.replyCount ?? 0) > 0 ? /* @__PURE__ */ e(
+                k,
+                {
+                  type: "button",
+                  size: "sm",
+                  variant: "ghost",
+                  className: "h-7 px-2 text-xs",
+                  "data-iv-chat-open-thread": "",
+                  onClick: () => C(t),
+                  children: d("chat.replies", { count: t.replyCount ?? 0 })
+                }
+              ) : null,
+              /* @__PURE__ */ e(
+                k,
+                {
+                  type: "button",
+                  size: "iconSm",
+                  variant: "ghost",
+                  "aria-pressed": t.pinned ? !0 : void 0,
+                  "aria-label": t.pinned ? d("chat.unpin") : d("chat.pin"),
+                  "data-iv-chat-pin": "",
+                  onClick: () => A(t, !t.pinned),
+                  children: /* @__PURE__ */ e(X, { className: w("size-4", t.pinned && "text-brand") })
+                }
+              ),
+              P && !t.deleted ? /* @__PURE__ */ e(
+                ze,
+                {
+                  variant: "row",
+                  value: t.priority,
+                  onChange: (b) => P(t, b)
+                }
+              ) : null,
+              n.renderMessageActions ? n.renderMessageActions({ items: H, context: x }) : /* @__PURE__ */ e(De, { label: d("chat.messageActions"), items: H })
+            ] }) : null
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function rt({
+  conversation: t,
+  rowId: s,
+  searchOpen: m,
+  search: o,
+  drawer: n,
+  onToggleSearch: f,
+  onSearchChange: T,
+  onOpenPinned: h,
+  threadActions: v
+}) {
+  const { t: p, dateLocale: C } = _(), A = t ? Ce(t).slice(0, 3) : [], i = t?.createdAt ?? t?.messages[0]?.createdAt;
+  return /* @__PURE__ */ a("div", { className: "flex h-16 shrink-0 items-start justify-between gap-2 border-b border-stroke-hairline p-4", children: [
+    /* @__PURE__ */ a("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ e("p", { className: "truncate text-base font-extrabold leading-6 text-content", children: t?.title ?? p("chat.emptyThreadTitle") }),
+      s ? /* @__PURE__ */ a("p", { className: "truncate text-sm font-bold leading-[21px] text-content-tertiary", children: [
+        p("chat.rowIdLabel", { rowId: s }),
+        t?.createdBy && i ? ` | ${p("chat.createdBy", { author: t.createdBy, time: V(i, C) })}` : null
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ a("div", { className: "flex shrink-0 items-center gap-1", children: [
+      m ? /* @__PURE__ */ e(
+        J,
+        {
+          value: o,
+          autoFocus: !0,
+          className: "h-8 w-40",
+          placeholder: p("chat.searchMessages"),
+          "aria-label": p("chat.searchMessages"),
+          onChange: (u) => T(u.target.value)
+        }
+      ) : null,
+      /* @__PURE__ */ e(k, { type: "button", size: "iconSm", variant: "ghost", "aria-pressed": m || void 0, "aria-label": p("chat.searchMessages"), onClick: f, children: /* @__PURE__ */ e(he, { className: "size-4" }) }),
+      /* @__PURE__ */ a(
+        k,
+        {
+          type: "button",
+          size: "sm",
+          variant: "ghost",
+          className: "h-8 gap-1 px-1",
+          "aria-pressed": n?.kind === "pinned" || void 0,
+          "aria-label": p("chat.pinned"),
+          "data-iv-chat-open-pinned": "",
+          onClick: h,
+          children: [
+            /* @__PURE__ */ e(X, { className: "size-4" }),
+            A.length > 0 ? /* @__PURE__ */ e("span", { className: "flex -space-x-2", "data-iv-chat-participants": "", children: A.map((u) => /* @__PURE__ */ e(B, { author: u.name, member: u }, u.id)) }) : /* @__PURE__ */ e(pe, { className: "size-4", "data-iv-chat-add-user": "" })
+          ]
+        }
+      ),
+      v
+    ] })
+  ] });
+}
+function it({
+  drawer: t,
+  messages: s,
+  locale: m,
+  loading: o,
+  draft: n,
+  saving: f,
+  selfName: T,
+  members: h,
+  rowId: v,
+  conversationId: p,
+  config: C,
+  onAddMembers: A,
+  onRemoveMember: i,
+  onDraftChange: u,
+  onSave: P,
+  onClose: y,
+  onSelect: d,
+  toolContext: r
+}) {
+  const { t: c } = _(), x = t.kind === "pinned", g = L(C, "create", { rowId: v, conversationId: p }), M = h ?? [];
+  return /* @__PURE__ */ e(
+    "aside",
+    {
+      "data-iv-chat-drawer": t.kind,
+      className: "flex h-full min-w-0 flex-1 flex-col border-l border-stroke-hairline bg-canvas",
+      style: { minWidth: be },
+      children: x ? /* @__PURE__ */ e(
+        Ie,
+        {
+          messages: s,
+          locale: m,
+          loading: o,
+          selfName: T,
+          members: M,
+          rowId: v,
+          conversationId: p,
+          config: C,
+          onAddMembers: A,
+          onRemoveMember: i,
+          onClose: y,
+          onSelect: d
+        }
+      ) : /* @__PURE__ */ a(Q, { children: [
+        /* @__PURE__ */ a("div", { className: "flex h-16 shrink-0 items-center justify-between border-b border-stroke-hairline px-3", children: [
+          /* @__PURE__ */ e("h2", { className: "truncate text-base font-extrabold text-content", children: c("chat.thread") }),
+          /* @__PURE__ */ e(k, { type: "button", size: "sm", variant: "ghost", "data-iv-chat-close-drawer": "", onClick: y, children: c("chat.closeThread") })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "min-h-0 flex-1 overflow-auto p-3", children: [
+          o ? /* @__PURE__ */ e("p", { className: "text-sm text-content-secondary", children: c("chat.loading") }) : null,
+          !o && s.length === 0 ? /* @__PURE__ */ e("p", { className: "py-6 text-center text-sm text-content-tertiary", children: c("chat.emptyThreadDescription") }) : null,
+          t.kind === "thread" ? /* @__PURE__ */ a("div", { className: "mb-4 rounded-lg bg-canvas-subtle p-2", children: [
+            /* @__PURE__ */ e("p", { className: "text-xs font-semibold text-content", children: t.parent.author }),
+            /* @__PURE__ */ e("p", { className: "line-clamp-3 text-sm text-content", children: t.parent.deleted ? c("chat.deleted") : t.parent.text })
+          ] }) : null,
+          s.map((N) => /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              "data-iv-chat-drawer-item": "",
+              className: "mb-3 flex w-full gap-2 rounded-lg p-2 text-left hover:bg-canvas-subtle",
+              onClick: () => d(N.id),
+              children: [
+                /* @__PURE__ */ e(
+                  B,
+                  {
+                    author: N.author,
+                    member: W(M, N.author),
+                    render: C.renderAvatar
+                  }
+                ),
+                /* @__PURE__ */ a("span", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ a("span", { className: "flex items-center justify-between gap-2", children: [
+                    /* @__PURE__ */ e("span", { className: "truncate text-sm font-semibold text-content", children: N.author }),
+                    /* @__PURE__ */ e("span", { className: "shrink-0 text-[11px] text-content-tertiary", children: V(N.createdAt, m) })
+                  ] }),
+                  /* @__PURE__ */ e("span", { className: "mt-1 line-clamp-3 text-sm text-content", children: N.deleted ? c("chat.deleted") : N.text })
+                ] })
+              ]
+            },
+            N.id
+          ))
+        ] }),
+        g ? /* @__PURE__ */ e("div", { className: "shrink-0 border-t border-stroke-hairline px-3 py-2", children: /* @__PURE__ */ e(
+          Y,
+          {
+            value: n,
+            onChange: u,
+            onSave: P,
+            disabled: f,
+            saving: f,
+            author: "",
+            placeholder: c("chat.threadComposerPlaceholder"),
+            render: C.renderComposer,
+            tools: C.composerTools,
+            toolContext: r
+          }
+        ) }) : null
+      ] })
+    }
+  );
+}
+function K(t, s) {
+  return t === "split" ? "split" : t === s ? "expanded" : "collapsed";
+}
+function U(t) {
+  return t === "expanded" ? "rotate-90" : t === "split" ? "rotate-45" : "rotate-0";
+}
+function Ie({
+  messages: t,
+  locale: s,
+  loading: m,
+  selfName: o,
+  members: n,
+  rowId: f,
+  conversationId: T,
+  config: h,
+  onAddMembers: v,
+  onRemoveMember: p,
+  onClose: C,
+  onSelect: A
+}) {
+  const { t: i } = _(), [u, P] = z(!1), [y, d] = z("split"), [r, c] = z(G), x = y !== "members", g = y !== "pinned", M = K(y, "pinned"), N = K(y, "members"), D = { rowId: f, conversationId: T }, H = !!v && L(h, "invite", D), I = (l) => !!p && L(h, "remove-member", { ...D, member: l }), E = n.slice(0, r), R = n.length - E.length, S = () => P(!1), j = u && h.listPeople && v ? h.renderPeoplePicker ? h.renderPeoplePicker({
+    members: n,
+    listPeople: h.listPeople,
+    onAdd: (l) => {
+      v(l), S();
+    },
+    onCancel: S
+  }) : /* @__PURE__ */ e(
+    Ee,
+    {
+      members: n,
+      listPeople: h.listPeople,
+      renderAvatar: h.renderAvatar,
+      onAddMembers: (l) => {
+        v(l), S();
+      }
+    }
+  ) : null, q = {
+    members: n,
+    canInvite: H,
+    canRemoveMember: I,
+    onInvite: () => P(!0),
+    onRemove: (l) => p?.(l)
+  };
+  return /* @__PURE__ */ a(Q, { children: [
+    /* @__PURE__ */ a("div", { className: "flex h-16 shrink-0 items-center justify-between border-b border-stroke-hairline px-3", children: [
+      /* @__PURE__ */ e("h2", { className: "truncate text-base font-extrabold text-content", children: i(u ? "chat.addMember" : "chat.info") }),
+      /* @__PURE__ */ e(
+        k,
+        {
+          type: "button",
+          size: "sm",
+          variant: "ghost",
+          "data-iv-chat-close-drawer": "",
+          onClick: u ? S : C,
+          children: i(u ? "chat.cancel" : "chat.closePinned")
+        }
+      )
+    ] }),
+    j ?? /* @__PURE__ */ a("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", "data-iv-chat-section": y, children: [
+      /* @__PURE__ */ a(
+        "section",
+        {
+          "data-iv-chat-pinned-section": "",
+          className: w("flex min-h-0 flex-col border-b border-stroke-hairline", x ? "flex-1" : "shrink-0"),
+          children: [
+            /* @__PURE__ */ a(
+              "button",
+              {
+                type: "button",
+                className: "flex h-10 w-full shrink-0 items-center gap-2 px-3 text-left",
+                "aria-expanded": x,
+                "aria-label": i(y === "pinned" ? "chat.collapsePinned" : "chat.expandPinned"),
+                "data-iv-chat-expand-pinned": "",
+                "data-iv-chat-chevron": M,
+                onClick: () => d((l) => l === "pinned" ? "split" : "pinned"),
+                children: [
+                  /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate text-sm font-extrabold text-content", children: i("chat.pinnedMessages") }),
+                  /* @__PURE__ */ e(
+                    F,
+                    {
+                      className: w("size-4 shrink-0 text-content-tertiary transition-transform", U(M))
+                    }
+                  )
+                ]
+              }
+            ),
+            x ? /* @__PURE__ */ a("div", { className: "min-h-0 flex-1 overflow-auto px-3 pb-2", children: [
+              m ? /* @__PURE__ */ e("p", { className: "text-sm text-content-secondary", children: i("chat.loading") }) : null,
+              !m && t.length === 0 ? /* @__PURE__ */ e("p", { className: "py-4 text-sm text-content-tertiary", children: i("chat.noPinned") }) : null,
+              t.map((l) => /* @__PURE__ */ a(
+                "button",
+                {
+                  type: "button",
+                  "data-iv-chat-drawer-item": "",
+                  className: "mb-3 flex w-full gap-2 rounded-lg bg-canvas-subtle p-3 text-left",
+                  onClick: () => A(l.id),
+                  children: [
+                    /* @__PURE__ */ e(
+                      B,
+                      {
+                        author: l.author,
+                        member: W(n, l.author),
+                        shape: "circle",
+                        render: h.renderAvatar
+                      }
+                    ),
+                    /* @__PURE__ */ a("span", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ a("span", { className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ e("span", { className: "truncate text-sm font-bold text-content", children: l.author === o ? i("chat.me") : l.author }),
+                        /* @__PURE__ */ e("span", { className: "shrink-0 text-xs text-content-tertiary", children: V(l.createdAt, s) })
+                      ] }),
+                      /* @__PURE__ */ e("span", { className: "mt-1 line-clamp-1 text-sm text-content", children: l.deleted ? i("chat.deleted") : ee(l.text) })
+                    ] })
+                  ]
+                },
+                l.id
+              ))
+            ] }) : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ a("section", { "data-iv-chat-members": "", className: w("flex min-h-0 flex-col", g ? "flex-1" : "shrink-0"), children: [
+        /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            className: "flex h-10 w-full shrink-0 items-center gap-2 px-3 text-left",
+            "aria-expanded": g,
+            "aria-label": i(y === "members" ? "chat.collapseMembers" : "chat.expandMembers"),
+            "data-iv-chat-expand-members": "",
+            "data-iv-chat-chevron": N,
+            onClick: () => d((l) => l === "members" ? "split" : "members"),
+            children: [
+              /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate text-sm font-extrabold text-content", children: i("chat.members") }),
+              /* @__PURE__ */ e(
+                re,
+                {
+                  color: "primary",
+                  shape: "circle",
+                  size: "md",
+                  variant: "subtle",
+                  "data-iv-chat-member-count": "",
+                  children: n.length
+                }
+              ),
+              /* @__PURE__ */ e(
+                F,
+                {
+                  className: w("size-4 shrink-0 text-content-tertiary transition-transform", U(N))
+                }
+              )
+            ]
+          }
+        ),
+        g ? h.renderMembers ? /* @__PURE__ */ e("div", { className: "min-h-0 flex-1 overflow-auto px-3 pb-5 pt-2", children: h.renderMembers(q) }) : /* @__PURE__ */ a("ul", { className: "min-h-0 flex-1 overflow-auto px-3 pb-5 pt-2", children: [
+          H ? /* @__PURE__ */ e("li", { className: "mb-1", children: /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              className: w(Z, "text-sm font-medium text-content"),
+              "data-iv-chat-add-member": "",
+              onClick: () => P(!0),
+              children: [
+                /* @__PURE__ */ e("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-full bg-canvas-subtle", children: /* @__PURE__ */ e(me, { className: "size-4" }) }),
+                i("chat.addMember")
+              ]
+            }
+          ) }) : null,
+          E.map((l) => /* @__PURE__ */ a("li", { className: Z, "data-iv-chat-member": l.id, children: [
+            /* @__PURE__ */ e(B, { author: l.name, member: l, shape: "circle", render: h.renderAvatar }),
+            /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-content", children: l.name }),
+            I(l) ? /* @__PURE__ */ e(
+              k,
+              {
+                type: "button",
+                size: "iconSm",
+                variant: "ghost",
+                "aria-label": i("chat.removeMember", { name: l.name }),
+                "data-iv-chat-remove-member": l.id,
+                onClick: () => p?.(l),
+                children: /* @__PURE__ */ e(ue, { className: "size-4" })
+              }
+            ) : null
+          ] }, l.id)),
+          R > 0 ? /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              className: "mt-1 w-full py-2 text-sm font-medium text-brand",
+              "data-iv-chat-more-members": "",
+              onClick: () => c((l) => l + G),
+              children: i("chat.showMoreMembers", { count: R })
+            }
+          ) }) : null
+        ] }) : null
+      ] })
+    ] })
+  ] });
+}
+function Ee({
+  members: t,
+  listPeople: s,
+  renderAvatar: m,
+  onAddMembers: o
+}) {
+  const { t: n } = _(), [f, T] = z(""), [h, v] = z([]), [p, C] = z(!0), [A, i] = z(!1), [u, P] = z([]);
+  te(() => {
+    let r = !1;
+    const c = window.setTimeout(() => {
+      C(!0), i(!1), Promise.resolve(s({ query: f, limit: O + t.length })).then((x) => {
+        r || (v(x), C(!1));
+      }).catch(() => {
+        r || (v([]), i(!0), C(!1));
+      });
+    }, 200);
+    return () => {
+      r = !0, window.clearTimeout(c);
+    };
+  }, [s, t.length, f]);
+  const y = Me(h, { members: t, query: f, limit: O }), d = (r) => {
+    P(
+      (c) => c.some((x) => x.id === r.id) ? c.filter((x) => x.id !== r.id) : [...c, r]
+    );
+  };
+  return /* @__PURE__ */ a("div", { className: "flex min-h-0 flex-1 flex-col", "data-iv-chat-people": "", children: [
+    /* @__PURE__ */ e("div", { className: "shrink-0 px-3 pt-3", children: /* @__PURE__ */ e(
+      J,
+      {
+        value: f,
+        autoFocus: !0,
+        className: "h-8",
+        placeholder: n("chat.searchPeople"),
+        "aria-label": n("chat.searchPeople"),
+        "data-iv-chat-people-search": "",
+        onChange: (r) => T(r.target.value)
+      }
+    ) }),
+    /* @__PURE__ */ a("ul", { className: "min-h-0 flex-1 overflow-auto px-3 py-2", children: [
+      p ? /* @__PURE__ */ e("p", { className: "py-4 text-sm text-content-secondary", children: n("chat.loading") }) : null,
+      !p && A ? /* @__PURE__ */ e("p", { className: "py-4 text-sm text-content-secondary", children: n("chat.loadError") }) : null,
+      !p && !A && y.length === 0 ? /* @__PURE__ */ e("p", { className: "py-4 text-sm text-content-tertiary", children: n("chat.noPeople") }) : null,
+      y.map((r) => {
+        const c = u.some((x) => x.id === r.id);
+        return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            "data-iv-chat-person": r.id,
+            "aria-pressed": c || void 0,
+            className: w(Z, "text-sm font-semibold text-content"),
+            onClick: () => d(r),
+            children: [
+              /* @__PURE__ */ e(B, { author: r.name, member: r, shape: "circle", render: m }),
+              /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-content", children: r.name }),
+              c ? /* @__PURE__ */ e(xe, { className: "size-4 text-brand" }) : null
+            ]
+          }
+        ) }, r.id);
+      })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "shrink-0 border-t border-stroke-hairline px-3 pb-5 pt-3", children: /* @__PURE__ */ e(
+      k,
+      {
+        type: "button",
+        className: "w-full",
+        disabled: u.length === 0,
+        "data-iv-chat-add-selected": "",
+        onClick: () => o(u),
+        children: n("chat.addSelected")
+      }
+    ) })
+  ] });
+}
+export {
+  De as ChatActionsMenu,
+  B as ChatAvatar,
+  Y as ChatComposer,
+  at as ChatListGlyph,
+  lt as ChatMessageRow,
+  nt as ChatMuteGlyph,
+  st as ChatSendIcon,
+  it as ChatSideDrawer,
+  rt as ChatThreadToolbar
+};