@ai-matrx/associations 0.4.0 → 0.5.0

package/dist/react/index.js

@@ -13,6 +13,7 @@ function AssociationsProvider({
   capture,
   pickerOverrides,
   entityDoors,
+  authorDisplay,
   children
 }) {
   const notifierWarned = useRef(false);
@@ -26,7 +27,8 @@ function AssociationsProvider({
         ...windowShell !== void 0 ? { windowShell } : {},
         ...capture !== void 0 ? { capture } : {},
         ...pickerOverrides !== void 0 ? { pickerOverrides } : {},
-        ...entityDoors !== void 0 ? { entityDoors } : {}
+        ...entityDoors !== void 0 ? { entityDoors } : {},
+        ...authorDisplay !== void 0 ? { authorDisplay } : {}
       },
       children
     }
@@ -766,6 +768,12 @@ var IDLE_CATEGORIES = Object.freeze({
   fetchedAt: null,
   error: null
 });
+var IDLE_COMMENTS = Object.freeze({
+  status: "idle",
+  comments: Object.freeze([]),
+  fetchedAt: null,
+  error: null
+});
 
 // src/react/hooks/useAssociations.ts
 var noopSubscribe = () => () => {
@@ -1250,6 +1258,72 @@ function currentUserIdOrNull(store) {
   }
 }
 
+// src/react/hooks/useComments.ts
+import { useEffect as useEffect7, useRef as useRef6, useSyncExternalStore as useSyncExternalStore3 } from "react";
+var noopSubscribe3 = () => () => {
+};
+function useComments(args) {
+  const { token, id, autoLoad = true } = args;
+  const store = useAssociationsStore();
+  const key = token && id ? associationsKey(token, id) : null;
+  const entry = useSyncExternalStore3(
+    key ? (cb) => store.subscribeComments(key, cb) : noopSubscribe3,
+    () => store.getComments(token, id ?? ""),
+    () => store.getComments(token, id ?? "")
+  );
+  const loadedKey = useRef6(null);
+  useEffect7(() => {
+    if (!autoLoad || !key || !id) return;
+    if (loadedKey.current === key) return;
+    loadedKey.current = key;
+    void store.loadComments(token, id);
+  }, [autoLoad, store, key, token, id]);
+  let currentUserId = null;
+  try {
+    currentUserId = store.identity.requireUserId();
+  } catch {
+    currentUserId = null;
+  }
+  return {
+    comments: entry.comments,
+    status: entry.status,
+    error: entry.error,
+    fetchedAt: entry.fetchedAt,
+    add: async (body, opts) => {
+      if (!id) return { ok: false, error: "Missing entity id" };
+      return store.addComment({
+        entityType: token,
+        entityId: id,
+        body,
+        ...opts?.parentId !== void 0 ? { parentId: opts.parentId } : {},
+        ...opts?.orgId !== void 0 ? { orgId: opts.orgId } : {}
+      });
+    },
+    edit: async (commentId, body) => {
+      if (!id) return { ok: false, error: "Missing entity id" };
+      return store.editComment({
+        entityType: token,
+        entityId: id,
+        id: commentId,
+        body
+      });
+    },
+    remove: async (commentId) => {
+      if (!id) return { ok: false, error: "Missing entity id" };
+      return store.deleteComment({
+        entityType: token,
+        entityId: id,
+        id: commentId
+      });
+    },
+    reload: async () => {
+      if (!id) return;
+      await store.loadComments(token, id, { force: true });
+    },
+    currentUserId
+  };
+}
+
 // src/react/hooks/useAssociationEntitySelect.ts
 import { useState as useState5 } from "react";
 function useAssociationEntitySelectAdapter(args) {
@@ -1993,7 +2067,7 @@ function UniversalAssociationPicker(props) {
 }
 
 // src/react/components/AttachedItemsSheet.tsx
-import { useEffect as useEffect7, useState as useState8 } from "react";
+import { useEffect as useEffect8, useState as useState8 } from "react";
 import { cn as cn5 } from "@ai-matrx/design-system";
 
 // src/react/components/entityDoors.tsx
@@ -2113,7 +2187,7 @@ function AttachedItemsBody({
   const [titleError, setTitleError] = useState8(null);
   const [busyId, setBusyId] = useState8(null);
   const idKey = links.map((l) => l.resourceId).sort().join(",");
-  useEffect7(() => {
+  useEffect8(() => {
     if (!enabled) return;
     const ids = idKey ? idKey.split(",") : [];
     if (ids.length === 0) {
@@ -2798,7 +2872,7 @@ function titleize(token) {
 }
 
 // src/react/components/AssociationCaptureToolbar.tsx
-import { useRef as useRef6, useState as useState11 } from "react";
+import { useRef as useRef7, useState as useState11 } from "react";
 import { Button, cn as cn9, Input as Input3 } from "@ai-matrx/design-system";
 import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 function AssociationCaptureToolbar({
@@ -2818,7 +2892,7 @@ function AssociationCaptureToolbar({
   const store = useAssociationsStore();
   const { capture } = useAssociationsUiPorts();
   const notifier = useNotifier();
-  const fileInputRef = useRef6(null);
+  const fileInputRef = useRef7(null);
   const [isUploading, setIsUploading] = useState11(false);
   const [isDragOver, setIsDragOver] = useState11(false);
   const [isPicking, setIsPicking] = useState11(false);
@@ -3887,6 +3961,411 @@ function CategoryTagPicker({
     ] })
   ] });
 }
+
+// src/react/components/CommentThread.tsx
+import { useState as useState15 } from "react";
+import { Button as Button3, Skeleton as Skeleton2, cn as cn12 } from "@ai-matrx/design-system";
+
+// src/react/relativeTime.ts
+var UNITS = [
+  { unit: "year", ms: 365 * 24 * 60 * 60 * 1e3 },
+  { unit: "month", ms: 30 * 24 * 60 * 60 * 1e3 },
+  { unit: "week", ms: 7 * 24 * 60 * 60 * 1e3 },
+  { unit: "day", ms: 24 * 60 * 60 * 1e3 },
+  { unit: "hour", ms: 60 * 60 * 1e3 },
+  { unit: "minute", ms: 60 * 1e3 }
+];
+function formatRelativeTime(iso, now = Date.now()) {
+  const t = Date.parse(iso);
+  if (Number.isNaN(t)) return iso;
+  const delta = t - now;
+  const magnitude = Math.abs(delta);
+  if (magnitude < 60 * 1e3) return "just now";
+  const rtf = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
+  for (const { unit, ms } of UNITS) {
+    if (magnitude >= ms) {
+      return rtf.format(Math.trunc(delta / ms), unit);
+    }
+  }
+  return "just now";
+}
+
+// src/react/components/CommentThread.tsx
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+var AUTHOR_DOOR_TOKEN = "user";
+function resolveAuthor(comment, authorDisplay) {
+  const base2 = {
+    userId: comment.createdBy,
+    email: comment.author.email,
+    displayName: comment.author.displayName,
+    avatarUrl: comment.author.avatarUrl
+  };
+  const enriched = authorDisplay ? authorDisplay(base2) : null;
+  const name = enriched?.displayName ?? base2.displayName ?? base2.email ?? "Unknown user";
+  return {
+    name,
+    avatarUrl: enriched?.avatarUrl !== void 0 && enriched?.avatarUrl !== null ? enriched.avatarUrl : base2.avatarUrl,
+    userId: comment.createdBy
+  };
+}
+function AuthorAvatar({ author }) {
+  if (author.avatarUrl) {
+    return /* @__PURE__ */ jsx16(
+      "img",
+      {
+        src: author.avatarUrl,
+        alt: "",
+        className: "h-6 w-6 shrink-0 rounded-full object-cover"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx16(
+    "span",
+    {
+      "aria-hidden": true,
+      className: "flex h-6 w-6 shrink-0 select-none items-center justify-center rounded-full bg-muted text-[11px] font-medium uppercase text-muted-foreground",
+      children: author.name.trim().charAt(0) || "?"
+    }
+  );
+}
+function AuthorName({
+  author,
+  entityDoors
+}) {
+  const DoorRef2 = entityDoors?.EntityRef;
+  if (DoorRef2 && author.userId) {
+    return /* @__PURE__ */ jsx16(
+      DoorRef2,
+      {
+        token: AUTHOR_DOOR_TOKEN,
+        id: author.userId,
+        name: author.name,
+        showIcon: false,
+        className: "text-sm font-medium text-foreground"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx16("span", { className: "text-sm font-medium text-foreground", children: author.name });
+}
+function CommentComposer({
+  onSubmit,
+  placeholder = "Write a comment\u2026",
+  submitLabel = "Comment",
+  initialValue = "",
+  trailing,
+  autoFocus = false
+}) {
+  const notifier = useNotifier();
+  const [body, setBody] = useState15(initialValue);
+  const [submitting, setSubmitting] = useState15(false);
+  const [error, setError] = useState15(null);
+  async function submit(e) {
+    e?.preventDefault();
+    const trimmed = body.trim();
+    if (!trimmed || submitting) return;
+    setSubmitting(true);
+    setError(null);
+    const res = await onSubmit(trimmed);
+    setSubmitting(false);
+    if (!res.ok) {
+      const msg = res.error ?? "Could not save the comment";
+      setError(msg);
+      notifier.error(msg);
+      return;
+    }
+    setBody("");
+  }
+  return /* @__PURE__ */ jsxs14("form", { onSubmit: submit, className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsx16(
+      "textarea",
+      {
+        value: body,
+        onChange: (e) => setBody(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) void submit();
+        },
+        placeholder,
+        rows: 2,
+        autoFocus,
+        "aria-label": placeholder,
+        className: "w-full resize-y rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+      }
+    ),
+    error && /* @__PURE__ */ jsx16("p", { role: "alert", className: "text-xs text-destructive", children: error }),
+    /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs14(Button3, { type: "submit", size: "sm", disabled: !body.trim() || submitting, children: [
+        submitting && /* @__PURE__ */ jsx16(SpinnerIcon, { className: "mr-1 h-3 w-3 animate-spin" }),
+        submitLabel
+      ] }),
+      trailing
+    ] })
+  ] });
+}
+function CommentItem({
+  comment,
+  childrenOf,
+  depth,
+  thread,
+  orgId
+}) {
+  const { authorDisplay, entityDoors } = useAssociationsUiPorts();
+  const notifier = useNotifier();
+  const [replying, setReplying] = useState15(false);
+  const [editing, setEditing] = useState15(false);
+  const [confirmingDelete, setConfirmingDelete] = useState15(false);
+  const [deleting, setDeleting] = useState15(false);
+  const author = resolveAuthor(comment, authorDisplay);
+  const isOwn = thread.currentUserId !== null && comment.createdBy === thread.currentUserId;
+  const edited = comment.updatedAt !== comment.createdAt;
+  const replies = childrenOf.get(comment.id) ?? [];
+  async function confirmDelete() {
+    setDeleting(true);
+    const res = await thread.remove(comment.id);
+    setDeleting(false);
+    setConfirmingDelete(false);
+    if (!res.ok) {
+      notifier.error(res.error ?? "Could not delete the comment");
+    }
+  }
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      "data-comment-id": comment.id,
+      className: cn12(
+        "flex flex-col gap-1",
+        depth > 0 && "border-l border-border pl-3"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx16(AuthorAvatar, { author }),
+          /* @__PURE__ */ jsx16(AuthorName, { author, entityDoors }),
+          /* @__PURE__ */ jsx16(
+            "span",
+            {
+              className: "text-xs text-muted-foreground",
+              title: comment.createdAt,
+              children: formatRelativeTime(comment.createdAt)
+            }
+          ),
+          edited && /* @__PURE__ */ jsx16(
+            "span",
+            {
+              className: "text-xs text-muted-foreground",
+              title: comment.updatedAt,
+              children: "(edited)"
+            }
+          )
+        ] }),
+        editing ? /* @__PURE__ */ jsx16("div", { className: "pl-8", children: /* @__PURE__ */ jsx16(
+          CommentComposer,
+          {
+            initialValue: comment.body,
+            submitLabel: "Save",
+            placeholder: "Edit your comment\u2026",
+            autoFocus: true,
+            onSubmit: async (body) => {
+              const res = await thread.edit(comment.id, body);
+              if (res.ok) setEditing(false);
+              return res;
+            },
+            trailing: /* @__PURE__ */ jsx16(
+              Button3,
+              {
+                type: "button",
+                size: "sm",
+                variant: "ghost",
+                onClick: () => setEditing(false),
+                children: "Cancel"
+              }
+            )
+          }
+        ) }) : /* @__PURE__ */ jsx16("p", { className: "whitespace-pre-wrap pl-8 text-sm text-foreground", children: comment.body }),
+        !editing && /* @__PURE__ */ jsx16("div", { className: "flex items-center gap-1 pl-7", children: confirmingDelete ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
+          /* @__PURE__ */ jsx16("span", { className: "text-xs text-destructive", children: "Deletes this comment for everyone." }),
+          /* @__PURE__ */ jsxs14(
+            Button3,
+            {
+              type: "button",
+              size: "sm",
+              variant: "destructive",
+              disabled: deleting,
+              onClick: () => void confirmDelete(),
+              children: [
+                deleting && /* @__PURE__ */ jsx16(SpinnerIcon, { className: "mr-1 h-3 w-3 animate-spin" }),
+                "Delete"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx16(
+            Button3,
+            {
+              type: "button",
+              size: "sm",
+              variant: "ghost",
+              disabled: deleting,
+              onClick: () => setConfirmingDelete(false),
+              children: "Cancel"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs14(Fragment5, { children: [
+          /* @__PURE__ */ jsx16(
+            "button",
+            {
+              type: "button",
+              onClick: () => setReplying((v) => !v),
+              className: "rounded px-1.5 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+              children: "Reply"
+            }
+          ),
+          isOwn && /* @__PURE__ */ jsxs14(Fragment5, { children: [
+            /* @__PURE__ */ jsx16(
+              "button",
+              {
+                type: "button",
+                onClick: () => setEditing(true),
+                className: "rounded px-1.5 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+                children: "Edit"
+              }
+            ),
+            /* @__PURE__ */ jsx16(
+              "button",
+              {
+                type: "button",
+                onClick: () => setConfirmingDelete(true),
+                className: "rounded px-1.5 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-destructive",
+                children: "Delete"
+              }
+            )
+          ] })
+        ] }) }),
+        replying && /* @__PURE__ */ jsxs14("div", { className: "flex items-start gap-2 pl-8 pt-1", children: [
+          /* @__PURE__ */ jsx16(CornerDownRightIcon, { className: "mt-2 h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsx16("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx16(
+            CommentComposer,
+            {
+              submitLabel: "Reply",
+              placeholder: `Reply to ${author.name}\u2026`,
+              autoFocus: true,
+              onSubmit: async (body) => {
+                const res = await thread.add(body, {
+                  parentId: comment.id,
+                  orgId: orgId ?? null
+                });
+                if (res.ok) setReplying(false);
+                return res;
+              },
+              trailing: /* @__PURE__ */ jsx16(
+                Button3,
+                {
+                  type: "button",
+                  size: "sm",
+                  variant: "ghost",
+                  onClick: () => setReplying(false),
+                  children: "Cancel"
+                }
+              )
+            }
+          ) })
+        ] }),
+        replies.length > 0 && /* @__PURE__ */ jsx16("div", { className: "flex flex-col gap-3 pl-8 pt-1", children: replies.map((reply) => /* @__PURE__ */ jsx16(
+          CommentItem,
+          {
+            comment: reply,
+            childrenOf,
+            depth: depth + 1,
+            thread,
+            orgId
+          },
+          reply.id
+        )) })
+      ]
+    }
+  );
+}
+function buildCommentTree(comments) {
+  const byId = new Set(comments.map((c) => c.id));
+  const roots = [];
+  const childrenOf = /* @__PURE__ */ new Map();
+  for (const c of comments) {
+    if (c.parentId && byId.has(c.parentId)) {
+      const bucket = childrenOf.get(c.parentId);
+      if (bucket) bucket.push(c);
+      else childrenOf.set(c.parentId, [c]);
+    } else {
+      roots.push(c);
+    }
+  }
+  return { roots, childrenOf };
+}
+function CommentThread({
+  token,
+  id,
+  orgId,
+  showHeader = true,
+  className
+}) {
+  const thread = useComments({ token, id });
+  const { roots, childrenOf } = buildCommentTree(thread.comments);
+  const loading = (thread.status === "loading" || thread.status === "idle") && thread.comments.length === 0;
+  return /* @__PURE__ */ jsxs14("section", { className: cn12("flex flex-col gap-3", className), children: [
+    showHeader && /* @__PURE__ */ jsxs14("header", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx16("h3", { className: "text-sm font-semibold text-foreground", children: "Comments" }),
+      /* @__PURE__ */ jsx16("span", { className: "text-xs text-muted-foreground tabular-nums", children: thread.comments.length }),
+      /* @__PURE__ */ jsx16(
+        "button",
+        {
+          type: "button",
+          onClick: () => void thread.reload(),
+          "aria-label": "Refresh comments",
+          title: "Refresh comments",
+          className: "ml-auto flex h-6 w-6 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+          children: thread.status === "loading" ? /* @__PURE__ */ jsx16(SpinnerIcon, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx16(RefreshIcon, { className: "h-3.5 w-3.5" })
+        }
+      )
+    ] }),
+    thread.error && /* @__PURE__ */ jsxs14(
+      "div",
+      {
+        role: "alert",
+        className: "flex items-center gap-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive",
+        children: [
+          /* @__PURE__ */ jsx16("span", { className: "min-w-0 flex-1", children: thread.error }),
+          /* @__PURE__ */ jsx16(
+            Button3,
+            {
+              type: "button",
+              size: "sm",
+              variant: "outline",
+              disabled: thread.status === "loading",
+              onClick: () => void thread.reload(),
+              children: "Retry"
+            }
+          )
+        ]
+      }
+    ),
+    loading ? /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-3", "aria-hidden": true, "data-testid": "comments-loading", children: [
+      /* @__PURE__ */ jsx16(Skeleton2, { className: "h-12 w-full" }),
+      /* @__PURE__ */ jsx16(Skeleton2, { className: "h-12 w-4/5" })
+    ] }) : roots.length === 0 && !thread.error ? /* @__PURE__ */ jsx16("p", { className: "text-sm text-muted-foreground", children: "No comments yet." }) : /* @__PURE__ */ jsx16("div", { className: "flex flex-col gap-4", children: roots.map((comment) => /* @__PURE__ */ jsx16(
+      CommentItem,
+      {
+        comment,
+        childrenOf,
+        depth: 0,
+        thread,
+        orgId
+      },
+      comment.id
+    )) }),
+    /* @__PURE__ */ jsx16(
+      CommentComposer,
+      {
+        onSubmit: (body) => thread.add(body, { orgId: orgId ?? null })
+      }
+    )
+  ] });
+}
 export {
   AssociationCandidateBody,
   AssociationCaptureToolbar,
@@ -3902,12 +4381,16 @@ export {
   CaptureToolbarAction,
   CategorySelect,
   CategoryTagPicker,
+  CommentComposer,
+  CommentThread,
   DefaultEntityIcon,
   DoorRef,
   PrimaryEntityProvider,
   UniversalAssociationPicker,
   UnresolvedRef,
   attachedKey,
+  buildCommentTree,
+  formatRelativeTime,
   getContentRoleMeta,
   useAssociationCandidates,
   useAssociationEntitySelectAdapter,
@@ -3915,6 +4398,7 @@ export {
   useAssociationsStore,
   useAssociationsUiPorts,
   useCategories,
+  useComments,
   useContainerLinks,
   useContainerLinksAdapter,
   useEntityRelationships,