impact-nova 2.5.16 → 2.6.0-alpha.0

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

@@ -0,0 +1,555 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { useState as ne, useRef as ie, useLayoutEffect as ke } from "react";
+import { Button as g } from "../../../primitives/button/button.js";
+import { Input as Q } from "../../../forms/input/input.js";
+import { Checkbox as Ae } from "../../../forms/checkbox/checkbox.js";
+import { EmptyContainer as De, EmptyContainerImage as Me, EmptyContainerTitle as ze, EmptyContainerDescription as Pe } from "../../../primitives/empty-container/empty-container.js";
+import { Sheet as Re, SheetContent as Ee, SheetDescription as Le, SheetTitle as _e, SheetClose as He } from "../../../feedback/sheet/sheet.js";
+import { Search as re, Plus as je, Back as Be, Cross as Oe } from "impact-nova-icons";
+import { useImpactNovaI18n as E } from "../../../../i18n/use-impact-nova-i18n.js";
+import { preventDismissOnTooltipOutside as oe } from "../../../../lib/overlay/prevent-dismiss-on-tooltip-outside.js";
+import { cn as R } from "../../../../lib/utils.js";
+import { useVirtualizedList as We } from "../../../../lib/virtualized/useVirtualizedList.js";
+import { CHAT_LIST_WIDTH as Fe, CHAT_VIRTUALIZE_AFTER as Ge, CHAT_DRAWER_MIN_WIDTH as Ye, CHAT_THREAD_MIN_WIDTH as Ke } from "./chat-constants.js";
+import { resolveChatMembers as Ve, visibleChatMessages as qe, chatRowStatusMessage as Qe, formatChatTime as Ue, previousMessageDay as Ze } from "./chat-format.js";
+import { chatPlainText as se } from "./chat-identity.js";
+import { chatAllows as $e } from "./chat-capabilities.js";
+import { ChatNotifyPopover as Je, defaultChatNotify as Xe } from "./chat-notify.js";
+import { buildChatListMenuItems as et, buildChatThreadMenuItems as tt } from "./chat-ui-actions.js";
+import { ChatMuteGlyph as ce, ChatActionsMenu as at, ChatListGlyph as lt, ChatThreadToolbar as nt, ChatSideDrawer as it, ChatAvatar as ot, ChatMessageRow as rt } from "./chat-thread-ui.js";
+import { ChatComposer as st } from "./chat-composer.js";
+const ct = "w-full min-w-0 max-w-[560px] mx-auto h-auto py-10", dt = "flex-1 h-full w-full min-w-0 max-w-none animate-none rounded-none border-0 bg-transparent px-3 py-0 shadow-none [&>div]:max-w-[284px] [&>div]:gap-[10px]";
+function de({
+  title: t,
+  description: o,
+  variant: s
+}) {
+  return /* @__PURE__ */ l(De, { className: s === "card" ? ct : dt, children: [
+    /* @__PURE__ */ e(Me, {}),
+    /* @__PURE__ */ e(ze, { headingLevel: 3, className: "text-center text-xl font-extrabold", children: t }),
+    /* @__PURE__ */ e(Pe, { className: "mt-0 text-center text-base text-content-tertiary", children: o })
+  ] });
+}
+function zt({
+  view: t,
+  rowTitle: o,
+  rowId: s,
+  conversationId: a,
+  onBack: p
+}) {
+  const { t: c } = E();
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      "data-iv-chat-workspace": "",
+      "data-slot": "chat-workspace",
+      "data-iv-chat-view": t,
+      "data-row-id": s ?? void 0,
+      "data-conversation-id": a,
+      className: "flex shrink-0 flex-row items-center justify-between border-b border-stroke-hairline px-4 py-[9px] bg-canvas-elevated",
+      children: [
+        /* @__PURE__ */ l("div", { className: "flex min-w-0 items-center gap-3", children: [
+          t === "row-chats" ? /* @__PURE__ */ e(
+            g,
+            {
+              type: "button",
+              variant: "secondary",
+              size: "icon",
+              "aria-label": c("chat.backToRows"),
+              "data-iv-chat-back": "",
+              onClick: p,
+              children: /* @__PURE__ */ e(Be, { className: "size-4" })
+            }
+          ) : null,
+          /* @__PURE__ */ e(_e, { className: "truncate text-lg font-bold text-content", children: t === "row-chats" ? o ?? c("chat.panelTitle") : c("chat.panelTitle") })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e(He, { asChild: !0, children: /* @__PURE__ */ e(g, { variant: "secondary", size: "icon", tabIndex: -1, "aria-label": c("aria.close"), children: /* @__PURE__ */ e(Oe, { className: "h-3 w-3" }) }) }) })
+      ]
+    }
+  );
+}
+function Pt({
+  open: t,
+  onOpenChange: o,
+  description: s,
+  className: a,
+  header: p,
+  sidebar: c,
+  children: d
+}) {
+  return /* @__PURE__ */ e(Re, { open: t, onOpenChange: o, children: /* @__PURE__ */ l(
+    Ee,
+    {
+      side: "right",
+      className: R(
+        "w-full gap-0 border-l bg-canvas-elevated p-0 shadow-xl transition-all duration-300 ease-in-out",
+        a
+      ),
+      onInteractOutside: oe,
+      onPointerDownOutside: oe,
+      children: [
+        /* @__PURE__ */ e(Le, { className: "sr-only", children: s }),
+        /* @__PURE__ */ l("div", { "data-iv-chat-sheet": "", className: "flex h-full flex-col bg-canvas-elevated", children: [
+          p,
+          /* @__PURE__ */ l("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [
+            c,
+            /* @__PURE__ */ e("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children: d })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+}
+function he({
+  summary: t,
+  selected: o,
+  checked: s,
+  selectable: a,
+  selectMode: p,
+  onSelect: c,
+  onCheckedChange: d
+}) {
+  const { t: r, dateLocale: S } = E(), C = !!(a && (s || p));
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      "data-iv-chat-summary": "",
+      "data-row-id": t.rowId,
+      "data-conversation-id": t.conversationId,
+      "data-selected": o ? "" : void 0,
+      "data-checked": s ? "" : void 0,
+      "data-muted": t.muted ? "" : void 0,
+      "data-iv-chat-priority": t.priority,
+      className: R(
+        "group relative mb-2 rounded-lg border border-stroke-hairline bg-canvas transition-colors",
+        o ? "bg-brand-tint hover:bg-brand-tint-hover" : "hover:bg-accent"
+      ),
+      children: [
+        a ? /* @__PURE__ */ e(
+          "div",
+          {
+            className: R(
+              "absolute start-3 top-3 z-10 flex size-8 items-center justify-center transition-all duration-200",
+              C ? "scale-100 opacity-100" : "scale-90 opacity-0 group-hover:scale-100 group-hover:opacity-100 group-focus-within:scale-100 group-focus-within:opacity-100"
+            ),
+            children: /* @__PURE__ */ e(
+              Ae,
+              {
+                checked: s,
+                "aria-label": r("chat.selectConversation", { title: t.title }),
+                onCheckedChange: (b) => d?.(b === !0),
+                onClick: (b) => b.stopPropagation()
+              }
+            )
+          }
+        ) : null,
+        /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            "aria-current": o ? "true" : void 0,
+            "aria-label": t.title,
+            className: "flex min-h-[93px] w-full items-start gap-3 px-3 py-3 text-left",
+            onClick: c,
+            children: [
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  "data-role": "chat-summary-avatar",
+                  className: R(
+                    "shrink-0 transition-opacity duration-200",
+                    a && !C && "group-hover:opacity-0 group-focus-within:opacity-0",
+                    C && "opacity-0"
+                  ),
+                  children: /* @__PURE__ */ e(ot, { author: t.title, size: "md" })
+                }
+              ),
+              /* @__PURE__ */ l("span", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ l("span", { className: "flex items-start justify-between gap-2", children: [
+                  /* @__PURE__ */ e(
+                    "span",
+                    {
+                      className: R(
+                        "truncate text-base font-semibold leading-6",
+                        t.muted ? "text-content-tertiary" : "text-content"
+                      ),
+                      children: t.title
+                    }
+                  ),
+                  /* @__PURE__ */ l("span", { className: "flex shrink-0 items-center gap-1", children: [
+                    t.muted ? /* @__PURE__ */ e("span", { className: "text-content-tertiary", "aria-label": r("chat.muted"), children: /* @__PURE__ */ e(ce, {}) }) : null,
+                    t.unreadCount ? /* @__PURE__ */ e("span", { className: "inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-brand px-1.5 text-[10px] font-medium text-brand-foreground", children: t.unreadCount }) : null
+                  ] })
+                ] }),
+                /* @__PURE__ */ e("span", { className: "mt-1 line-clamp-1 text-xs leading-4 text-content-tertiary", children: se(t.preview) }),
+                t.updatedAt ? /* @__PURE__ */ e("span", { className: "mt-1 block text-xs leading-4 text-content-tertiary", children: Ue(t.updatedAt, S) }) : null
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function Rt({
+  summaries: t,
+  search: o,
+  locating: s,
+  onSearchChange: a,
+  onSearchSubmit: p,
+  onSelectRow: c
+}) {
+  const { t: d } = E();
+  return /* @__PURE__ */ l("div", { "data-iv-chat-catalog": "", "data-slot": "chat-catalog", className: "flex h-full min-h-0 flex-1 flex-col p-4", children: [
+    /* @__PURE__ */ e("div", { className: "px-1 pb-3", children: /* @__PURE__ */ e(
+      Q,
+      {
+        value: o,
+        prefix: /* @__PURE__ */ e(re, { className: "size-4" }),
+        placeholder: d("chat.searchPlaceholder"),
+        "aria-label": d("chat.searchPlaceholder"),
+        onChange: (r) => a(r.target.value),
+        onKeyDown: (r) => {
+          r.key === "Enter" && p();
+        }
+      }
+    ) }),
+    /* @__PURE__ */ e("div", { className: "flex min-h-0 flex-1 flex-col overflow-auto px-1", "aria-busy": s || void 0, children: t.length === 0 ? /* @__PURE__ */ e("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ e(
+      de,
+      {
+        variant: "card",
+        title: d("chat.emptyCatalogTitle"),
+        description: d("chat.emptyCatalogDescription")
+      }
+    ) }) : t.map((r) => /* @__PURE__ */ e(
+      he,
+      {
+        summary: r,
+        selected: !1,
+        onSelect: () => c(r.rowId)
+      },
+      r.rowId
+    )) })
+  ] });
+}
+function Et({
+  summaries: t,
+  selectedConversationId: o,
+  locating: s,
+  canCreate: a,
+  naming: p,
+  nameDraft: c,
+  rowId: d,
+  listActions: r,
+  onNameDraftChange: S,
+  onStartCreate: C,
+  onCancelCreate: b,
+  onCreate: N,
+  onSelectConversation: B,
+  onMute: O,
+  onCloseWorkspace: W
+}) {
+  const { t: h } = E(), [k, F] = ne(""), [w, G] = ne(() => /* @__PURE__ */ new Set()), A = k.trim().toLowerCase(), L = A ? t.filter(
+    (n) => n.title.toLowerCase().includes(A) || se(n.preview).toLowerCase().includes(A)
+  ) : t, _ = w.size > 0, I = _ ? [...w] : o ? [o] : [], H = I.length > 0 && I.every((n) => t.find((D) => D.conversationId === n)?.muted), Y = [
+    {
+      id: "mute",
+      label: h(H ? "chat.unmute" : "chat.mute"),
+      disabled: I.length === 0,
+      icon: /* @__PURE__ */ e(ce, {}),
+      onSelect: () => O?.(I, !H)
+    },
+    ...d && r?.length ? et({
+      extras: r,
+      context: {
+        rowId: d,
+        conversationIds: [...w],
+        activeConversationId: o,
+        close: W
+      }
+    }) : []
+  ];
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      "data-iv-chat-conversations": "",
+      "data-slot": "chat-conversations",
+      className: "flex h-full shrink-0 flex-col border-r border-stroke-hairline bg-navigation-canvas p-2.5",
+      style: { width: Fe },
+      children: [
+        p ? /* @__PURE__ */ l(
+          "form",
+          {
+            className: "flex flex-col gap-2 px-1 pb-2",
+            onSubmit: (n) => {
+              n.preventDefault(), N();
+            },
+            children: [
+              /* @__PURE__ */ e(
+                Q,
+                {
+                  value: c,
+                  autoFocus: !0,
+                  placeholder: h("chat.newChatNamePlaceholder"),
+                  "aria-label": h("chat.newChatNamePlaceholder"),
+                  onChange: (n) => S(n.target.value)
+                }
+              ),
+              /* @__PURE__ */ l("div", { className: "flex justify-end gap-2", children: [
+                /* @__PURE__ */ e(g, { type: "button", variant: "secondary", onClick: b, children: h("aria.close") }),
+                /* @__PURE__ */ e(g, { type: "submit", disabled: c.trim().length < 2, children: h("chat.createChat") })
+              ] })
+            ]
+          }
+        ) : /* @__PURE__ */ l("div", { className: "flex items-center gap-2 px-1 pb-2", children: [
+          /* @__PURE__ */ e(
+            Q,
+            {
+              value: k,
+              prefix: /* @__PURE__ */ e(re, { className: "size-4" }),
+              placeholder: h("chat.searchPlaceholder"),
+              "aria-label": h("chat.searchPlaceholder"),
+              className: "min-w-0 flex-1",
+              onChange: (n) => F(n.target.value)
+            }
+          ),
+          a ? /* @__PURE__ */ l(g, { type: "button", "data-iv-chat-add": "", onClick: C, children: [
+            /* @__PURE__ */ e(je, { className: "size-4" }),
+            h("chat.addChat")
+          ] }) : null,
+          /* @__PURE__ */ e(
+            at,
+            {
+              label: h("chat.listActions"),
+              items: Y,
+              trigger: /* @__PURE__ */ e(g, { type: "button", size: "icon", variant: "tertiary", "aria-label": h("chat.listActions"), "data-iv-chat-list-actions": "", children: /* @__PURE__ */ e(lt, {}) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e("div", { className: "min-h-0 flex-1 overflow-auto px-1", "aria-busy": s || void 0, children: L.length === 0 && !p ? /* @__PURE__ */ e("p", { className: "px-2 py-6 text-center text-sm text-content-tertiary", children: h("chat.emptyThreadDescription") }) : L.map((n) => /* @__PURE__ */ e(
+          he,
+          {
+            summary: n,
+            selected: n.conversationId === o,
+            selectable: !0,
+            selectMode: _,
+            checked: w.has(n.conversationId),
+            onSelect: () => B(n.conversationId),
+            onCheckedChange: (D) => {
+              G((K) => {
+                const M = new Set(K);
+                return D ? M.add(n.conversationId) : M.delete(n.conversationId), M;
+              });
+            }
+          },
+          n.conversationId
+        )) })
+      ]
+    }
+  );
+}
+function Lt({
+  rowId: t,
+  rowTitle: o,
+  rowStatus: s,
+  conversation: a,
+  loading: p,
+  loadingOlder: c,
+  error: d,
+  saving: r,
+  draft: S,
+  draftPriority: C,
+  draftAttachments: b,
+  drawer: N,
+  drawerMessages: B,
+  drawerLoading: O,
+  threadDraft: W,
+  searchOpen: h,
+  messageSearch: k,
+  highlightedMessageId: F,
+  onDraftChange: w,
+  onDraftPriorityChange: G,
+  onDraftAttachmentsChange: A,
+  onSave: L,
+  onRetry: _,
+  onLoadOlder: I,
+  onToggleSearch: H,
+  onMessageSearchChange: Y,
+  onOpenPinned: n,
+  onOpenThread: D,
+  onReply: K,
+  onPin: M,
+  onEdit: pe,
+  onDelete: ue,
+  onSetPriority: me,
+  onSaveNotify: xe,
+  onAddMembers: fe,
+  onRemoveMember: ve,
+  onCloseDrawer: ge,
+  onCloseWorkspace: U,
+  onSelectDrawerMessage: Ce,
+  onThreadDraftChange: be,
+  onThreadSave: ye,
+  config: m
+}) {
+  const { t: y, dateLocale: Z } = E(), V = ie(null), $ = ie(null), J = a ? Ve(a) : [], Ne = !!t && $e(m, "create", { rowId: t ?? "", conversationId: a?.conversationId }), u = qe(a?.messages ?? [], k), q = u.length > Ge || !!a?.hasMoreOlder, z = We({
+    scrollElementRef: V,
+    rowCount: u.length,
+    getRowId: (i) => u[i]?.id ?? String(i),
+    getRowData: (i) => u[i],
+    estimateSize: () => 96,
+    overscan: 40,
+    initialRect: { width: 640, height: 480 }
+  }), X = Qe(s, y), v = t && a ? { rowId: t, conversationId: a.conversationId, close: U } : null, ee = v ? tt({ extras: m.threadActions, context: v }) : [];
+  ke(() => {
+    const i = u.at(-1), x = u[0], ae = a?.conversationId ?? "", f = $.current, j = u.length;
+    if ($.current = { conversationId: ae, lastId: i?.id ?? null, headId: x?.id ?? null, count: j }, j === 0) return;
+    const P = !f || f.conversationId !== ae, we = !!f && !P && f.lastId === (i?.id ?? null) && f.headId !== (x?.id ?? null) && j > f.count, le = !!f && !P && f.lastId !== (i?.id ?? null);
+    if (we || !P && !le && f) return;
+    const T = V.current, Ie = i?.author === m.getAuthor(), Te = T ? T.scrollHeight - T.scrollTop - T.clientHeight < 96 : !0;
+    if (!P && le && !Ie && !Te) return;
+    const Se = P || !f ? "auto" : "smooth";
+    if (q) {
+      z.scrollToIndex(j - 1, { align: "end" });
+      return;
+    }
+    T?.scrollTo({ top: T.scrollHeight, behavior: Se });
+  }, [m, a?.conversationId, z, u, q]);
+  const te = (i, x) => t && a ? /* @__PURE__ */ e(
+    rt,
+    {
+      message: i,
+      previousDayKey: Ze(u, x),
+      rowId: t,
+      conversationId: a.conversationId,
+      config: m,
+      members: J,
+      highlighted: i.id === F,
+      locale: Z,
+      onReply: K,
+      onOpenThread: D,
+      onPin: M,
+      onEdit: pe,
+      onDelete: ue,
+      onSetPriority: me,
+      onClose: U
+    }
+  ) : null;
+  return /* @__PURE__ */ l("div", { className: "flex min-h-0 min-w-0 flex-1", children: [
+    /* @__PURE__ */ l(
+      "div",
+      {
+        "data-iv-chat-thread": "",
+        "data-slot": "chat-thread",
+        className: "flex min-h-0 min-w-0 flex-1 flex-col",
+        style: { minWidth: N ? Ye : Ke },
+        children: [
+          /* @__PURE__ */ e(
+            nt,
+            {
+              conversation: a && { ...a, title: a.title ?? o },
+              rowId: t,
+              searchOpen: h,
+              search: k,
+              drawer: N,
+              onToggleSearch: H,
+              onSearchChange: Y,
+              onOpenPinned: n,
+              threadActions: v && a ? m.renderThreadActions ? m.renderThreadActions({ items: ee, context: v }) : /* @__PURE__ */ e(
+                Je,
+                {
+                  value: Xe(a),
+                  extras: ee,
+                  extraContext: v,
+                  onSave: xe
+                }
+              ) : null
+            }
+          ),
+          X ? /* @__PURE__ */ e("p", { role: "status", "data-iv-chat-row-status": "", className: "px-4 py-2 text-sm text-content-secondary", children: X }) : null,
+          d ? /* @__PURE__ */ l("div", { className: "flex items-center gap-2 px-4 py-2", role: "alert", children: [
+            /* @__PURE__ */ e("p", { className: "text-sm text-destructive", children: d }),
+            /* @__PURE__ */ e(g, { type: "button", size: "sm", variant: "outline", onClick: _, children: y("chat.retry") })
+          ] }) : null,
+          /* @__PURE__ */ l("div", { ref: V, "data-iv-chat-messages": "", className: "flex min-h-0 flex-1 flex-col overflow-auto px-4 py-3", children: [
+            p && u.length === 0 ? /* @__PURE__ */ e("p", { className: "text-sm text-content-secondary", children: y("chat.loading") }) : null,
+            !p && (!a || u.length === 0) ? /* @__PURE__ */ e("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ e(
+              de,
+              {
+                variant: "fill",
+                title: y("chat.emptyThreadTitle"),
+                description: y("chat.emptyThreadDescription")
+              }
+            ) }) : null,
+            a?.hasMoreOlder ? /* @__PURE__ */ e(g, { type: "button", size: "sm", variant: "ghost", className: "mb-2", disabled: c, onClick: I, children: y("chat.viewOlder") }) : null,
+            q ? /* @__PURE__ */ e("div", { style: { height: z.totalSize, position: "relative" }, children: z.virtualItems.map((i) => {
+              const x = u[i.index];
+              return x ? /* @__PURE__ */ e(
+                "div",
+                {
+                  ref: z.measureElement,
+                  "data-index": i.index,
+                  className: "absolute left-0 w-full",
+                  style: { transform: `translateY(${i.start}px)` },
+                  children: te(x, i.index)
+                },
+                x.id
+              ) : null;
+            }) }) : u.map((i, x) => /* @__PURE__ */ e("div", { children: te(i, x) }, i.id))
+          ] }),
+          t && a && Ne ? /* @__PURE__ */ e("div", { className: "shrink-0 px-[23px] pb-3 pt-2", "data-slot": "chat-composer", children: /* @__PURE__ */ e(
+            st,
+            {
+              value: S,
+              onChange: w,
+              onSave: L,
+              disabled: r,
+              saving: r,
+              author: m.getAuthor(),
+              placeholder: y("chat.composerPlaceholder"),
+              priority: C,
+              onPriorityChange: G,
+              attachments: b,
+              onAttachmentsChange: A,
+              render: m.renderComposer,
+              tools: m.composerTools,
+              toolContext: v ? { ...v, insertText: () => {
+              } } : void 0
+            }
+          ) }) : null
+        ]
+      }
+    ),
+    N && t && a ? /* @__PURE__ */ e(
+      it,
+      {
+        drawer: N,
+        messages: B,
+        locale: Z,
+        loading: O,
+        draft: W,
+        saving: r,
+        selfName: m.getAuthor(),
+        members: J,
+        rowId: t,
+        conversationId: a.conversationId,
+        config: m,
+        onAddMembers: fe,
+        onRemoveMember: ve,
+        onDraftChange: be,
+        onSave: ye,
+        onClose: ge,
+        onSelect: Ce,
+        toolContext: v ? { ...v, insertText: () => {
+        } } : void 0
+      }
+    ) : null
+  ] });
+}
+export {
+  Et as ChatConversationSidebar,
+  zt as ChatPanelHeader,
+  Rt as ChatRowCatalog,
+  Lt as ChatThreadPane,
+  Pt as ChatWorkspaceSheet
+};