elseware-ui 2.31.4 → 2.31.6

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1, { HTMLAttributes, ReactNode, JSX, FC, MouseEvent, MutableRefObject } from 'react';
+import React$1, { HTMLAttributes, ReactNode, JSX, FC, ComponentType, MouseEvent, MutableRefObject } from 'react';
 import { ChartData, ChartOptions } from 'chart.js';
 import * as d3 from 'd3';
 import * as formik from 'formik';
@@ -1435,16 +1435,85 @@ interface CommentDataSource {
     reportComment?(commentId: string, reason: string, description?: string): Promise<void>;
 }
 
+interface CommentHeaderProps {
+    comment: CommentEntity;
+}
+interface CommentContentProps {
+    comment: CommentEntity;
+}
+interface CommentActionsProps {
+    comment: CommentEntity;
+    onLike?: () => void;
+    onDislike?: () => void;
+    onReply?: () => void;
+}
+interface CommentMenuProps {
+    comment: CommentEntity;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    canEdit?: boolean;
+    canDelete?: boolean;
+    canReport?: boolean;
+    onEdit?: () => void;
+    onDelete?: () => void;
+    onReport?: () => void;
+}
+interface CommentComposerProps {
+    avatar?: string;
+    onSubmit: (content: string) => Promise<void> | void;
+}
+interface ReplyComposerProps {
+    avatar?: string;
+    username?: string;
+    onSubmit: (content: string) => Promise<void> | void;
+}
+interface CommentRepliesToggleProps {
+    collapsed: boolean;
+    repliesCount: number;
+    onToggle: () => void;
+}
+interface CommentComponents {
+    /**
+     * Root comment composer
+     */
+    Composer?: ComponentType<CommentComposerProps>;
+    /**
+     * Comment header section
+     */
+    Header?: ComponentType<CommentHeaderProps>;
+    /**
+     * Comment content renderer
+     */
+    Content?: ComponentType<CommentContentProps>;
+    /**
+     * Like / Dislike / Reply actions
+     */
+    Actions?: ComponentType<CommentActionsProps>;
+    /**
+     * Comment menu (Edit/Delete/Report)
+     */
+    Menu?: ComponentType<CommentMenuProps>;
+    /**
+     * Reply composer shown below a comment
+     */
+    ReplyComposer?: ComponentType<ReplyComposerProps>;
+    /**
+     * Replies expand/collapse component
+     */
+    RepliesToggle?: ComponentType<CommentRepliesToggleProps>;
+}
+
 interface CommentThreadProps {
     postId: string;
     currentUser: CommentAuthor;
     dataSource: CommentDataSource;
     loading?: boolean;
+    components?: CommentComponents;
     onEdit?: (comment: CommentEntity) => void;
     onDelete?: (comment: CommentEntity) => void;
     onReport?: (comment: CommentEntity) => void;
 }
-declare function CommentThread({ currentUser, dataSource, loading, onEdit, onDelete, onReport, }: CommentThreadProps): react_jsx_runtime.JSX.Element;
+declare function CommentThread({ currentUser, dataSource, loading, components, onEdit, onDelete, onReport, }: CommentThreadProps): react_jsx_runtime.JSX.Element;
 
 type SortOption = {
     value: string;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1, { HTMLAttributes, ReactNode, JSX, FC, MouseEvent, MutableRefObject } from 'react';
+import React$1, { HTMLAttributes, ReactNode, JSX, FC, ComponentType, MouseEvent, MutableRefObject } from 'react';
 import { ChartData, ChartOptions } from 'chart.js';
 import * as d3 from 'd3';
 import * as formik from 'formik';
@@ -1435,16 +1435,85 @@ interface CommentDataSource {
     reportComment?(commentId: string, reason: string, description?: string): Promise<void>;
 }
 
+interface CommentHeaderProps {
+    comment: CommentEntity;
+}
+interface CommentContentProps {
+    comment: CommentEntity;
+}
+interface CommentActionsProps {
+    comment: CommentEntity;
+    onLike?: () => void;
+    onDislike?: () => void;
+    onReply?: () => void;
+}
+interface CommentMenuProps {
+    comment: CommentEntity;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    canEdit?: boolean;
+    canDelete?: boolean;
+    canReport?: boolean;
+    onEdit?: () => void;
+    onDelete?: () => void;
+    onReport?: () => void;
+}
+interface CommentComposerProps {
+    avatar?: string;
+    onSubmit: (content: string) => Promise<void> | void;
+}
+interface ReplyComposerProps {
+    avatar?: string;
+    username?: string;
+    onSubmit: (content: string) => Promise<void> | void;
+}
+interface CommentRepliesToggleProps {
+    collapsed: boolean;
+    repliesCount: number;
+    onToggle: () => void;
+}
+interface CommentComponents {
+    /**
+     * Root comment composer
+     */
+    Composer?: ComponentType<CommentComposerProps>;
+    /**
+     * Comment header section
+     */
+    Header?: ComponentType<CommentHeaderProps>;
+    /**
+     * Comment content renderer
+     */
+    Content?: ComponentType<CommentContentProps>;
+    /**
+     * Like / Dislike / Reply actions
+     */
+    Actions?: ComponentType<CommentActionsProps>;
+    /**
+     * Comment menu (Edit/Delete/Report)
+     */
+    Menu?: ComponentType<CommentMenuProps>;
+    /**
+     * Reply composer shown below a comment
+     */
+    ReplyComposer?: ComponentType<ReplyComposerProps>;
+    /**
+     * Replies expand/collapse component
+     */
+    RepliesToggle?: ComponentType<CommentRepliesToggleProps>;
+}
+
 interface CommentThreadProps {
     postId: string;
     currentUser: CommentAuthor;
     dataSource: CommentDataSource;
     loading?: boolean;
+    components?: CommentComponents;
     onEdit?: (comment: CommentEntity) => void;
     onDelete?: (comment: CommentEntity) => void;
     onReport?: (comment: CommentEntity) => void;
 }
-declare function CommentThread({ currentUser, dataSource, loading, onEdit, onDelete, onReport, }: CommentThreadProps): react_jsx_runtime.JSX.Element;
+declare function CommentThread({ currentUser, dataSource, loading, components, onEdit, onDelete, onReport, }: CommentThreadProps): react_jsx_runtime.JSX.Element;
 
 type SortOption = {
     value: string;

package/dist/index.js

@@ -17550,15 +17550,16 @@ function CommentComposer({
 }
 var CommentComposer_default = CommentComposer;
 function CommentActions({
-  likes = 0,
-  dislikes = 0,
-  liked = false,
-  disliked = false,
-  canReply = true,
+  comment,
   onLike,
   onDislike,
   onReply
 }) {
+  const likes = comment.likes ?? 0;
+  const dislikes = comment.dislikes ?? 0;
+  const liked = comment.liked ?? false;
+  const disliked = comment.disliked ?? false;
+  const canReply = comment.permissions?.canReply ?? true;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -17611,14 +17612,8 @@ function CommentActions({
   );
 }
 var CommentActions_default = CommentActions;
-function CommentContent({ content }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: "\n        text-sm\n        leading-relaxed\n        whitespace-pre-wrap\n        break-words\n        text-gray-700\n        dark:text-gray-300\n      ",
-      children: content
-    }
-  );
+function CommentContent({ comment }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "whitespace-pre-wrap break-words text-sm text-gray-700 dark:text-gray-300", children: comment.content });
 }
 var CommentContent_default = CommentContent;
 
@@ -17657,31 +17652,29 @@ function formatCommentDate(date) {
   }
   return "Just now";
 }
-function CommentHeader({
-  avatar,
-  username,
-  firstName,
-  lastName,
-  createdAt,
-  edited
-}) {
-  const displayName = firstName || lastName ? `${firstName ?? ""} ${lastName ?? ""}`.trim() : username;
+function CommentHeader({ comment }) {
+  const author = comment.author;
+  const displayName = author?.firstName || author?.lastName ? `${author?.firstName ?? ""} ${author?.lastName ?? ""}`.trim() : author?.username ?? "Unknown";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: avatar, size: "sm" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: author?.avatar, size: "sm" }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap min-w-0", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-sm text-gray-900 dark:text-gray-100", children: displayName }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
-        "@",
-        username
+      author?.username && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+          "@",
+          author.username
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "\xB7" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "\xB7" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: formatCommentDate(createdAt) }),
-      edited && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: "(edited)" })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: formatCommentDate(comment.createdAt) }),
+      comment.edited && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: "(edited)" })
     ] })
   ] });
 }
 var CommentHeader_default = CommentHeader;
 function CommentMenu({
+  open,
+  setOpen,
   canEdit,
   canDelete,
   canReport,
@@ -17689,7 +17682,6 @@ function CommentMenu({
   onDelete,
   onReport
 }) {
-  const [open, setOpen] = React4.useState(false);
   const ref = React4.useRef(null);
   React4.useEffect(() => {
     function handleOutsideClick(event) {
@@ -17699,7 +17691,7 @@ function CommentMenu({
     }
     document.addEventListener("mousedown", handleOutsideClick);
     return () => document.removeEventListener("mousedown", handleOutsideClick);
-  }, []);
+  }, [setOpen]);
   const hasActions = canEdit || canDelete || canReport;
   if (!hasActions) {
     return null;
@@ -17709,7 +17701,7 @@ function CommentMenu({
       "button",
       {
         type: "button",
-        onClick: () => setOpen((prev) => !prev),
+        onClick: () => setOpen(!open),
         className: "\n          text-gray-500\n          hover:text-gray-900\n          dark:hover:text-gray-100\n          transition-colors\n        ",
         children: /* @__PURE__ */ jsxRuntime.jsx(bi.BiDotsVerticalRounded, { size: 18 })
       }
@@ -17818,6 +17810,7 @@ var COMMENT_INDENTATION = 24;
 function CommentItem({
   comment,
   depth = 0,
+  components,
   onLike,
   onDislike,
   onReply,
@@ -17828,10 +17821,19 @@ function CommentItem({
   const [collapsed, setCollapsed] = React4.useState(false);
   const [isReplying, setIsReplying] = React4.useState(false);
   const resolvedDepth = Math.min(depth, MAX_COMMENT_DEPTH);
+  const {
+    Header: HeaderComponent = CommentHeader_default,
+    Content: ContentComponent = CommentContent_default,
+    Actions: ActionsComponent = CommentActions_default,
+    Menu: MenuComponent = CommentMenu_default,
+    ReplyComposer: ReplyComposerComponent = ReplyComposer_default,
+    RepliesToggle: RepliesToggleComponent = CommentRepliesToggle_default
+  } = components ?? {};
   async function handleReply(content) {
     await onReply?.(comment, content);
     setIsReplying(false);
   }
+  const [menuOpen, setMenuOpen] = React4.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -17842,20 +17844,13 @@ function CommentItem({
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-3 min-w-0", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(HeaderComponent, { comment }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              CommentHeader_default,
-              {
-                avatar: comment.author?.avatar,
-                username: comment.author?.username ?? "unknown",
-                firstName: comment.author?.firstName,
-                lastName: comment.author?.lastName,
-                createdAt: comment.createdAt,
-                edited: comment.edited
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              CommentMenu_default,
+              MenuComponent,
               {
+                comment,
+                open: menuOpen,
+                setOpen: setMenuOpen,
                 canEdit: comment.permissions?.canEdit,
                 canDelete: comment.permissions?.canDelete,
                 canReport: comment.permissions?.canReport,
@@ -17865,22 +17860,18 @@ function CommentItem({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(CommentContent_default, { content: comment.content }),
+          /* @__PURE__ */ jsxRuntime.jsx(ContentComponent, { comment }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            CommentActions_default,
+            ActionsComponent,
             {
-              likes: comment.likes,
-              dislikes: comment.dislikes,
-              liked: comment.liked,
-              disliked: comment.disliked,
-              canReply: comment.permissions?.canReply,
+              comment,
               onLike: () => onLike?.(comment),
               onDislike: () => onDislike?.(comment),
               onReply: () => setIsReplying((prev) => !prev)
             }
           ),
           isReplying && /* @__PURE__ */ jsxRuntime.jsx(
-            ReplyComposer_default,
+            ReplyComposerComponent,
             {
               avatar: comment.author?.avatar,
               username: comment.author?.username,
@@ -17888,7 +17879,7 @@ function CommentItem({
             }
           ),
           !!comment.replies?.length && /* @__PURE__ */ jsxRuntime.jsx(
-            CommentRepliesToggle_default,
+            RepliesToggleComponent,
             {
               collapsed,
               repliesCount: comment.replies.length,
@@ -17908,6 +17899,7 @@ function CommentItem({
               {
                 comments: comment.replies,
                 depth: depth + 1,
+                components,
                 onLike,
                 onDislike,
                 onReply,
@@ -17926,6 +17918,7 @@ var CommentItem_default = CommentItem;
 function CommentList({
   comments,
   depth = 0,
+  components,
   onLike,
   onDislike,
   onReply,
@@ -17941,6 +17934,7 @@ function CommentList({
     {
       comment,
       depth,
+      components,
       onLike,
       onDislike,
       onReply,
@@ -18009,12 +18003,14 @@ function CommentThread({
   currentUser,
   dataSource,
   loading = false,
+  components,
   onEdit,
   onDelete,
   onReport
 }) {
   const [comments, setComments] = React4.useState([]);
   const [isLoadingComments, setIsLoadingComments] = React4.useState(true);
+  const ComposerComponent = components?.ReplyComposer ?? CommentComposer_default;
   React4.useEffect(() => {
     async function loadComments() {
       try {
@@ -18041,35 +18037,55 @@ function CommentThread({
     setComments((prev) => insertReply(prev, parentComment.id, reply));
   }
   async function handleLike(comment) {
-    const result = await dataSource.toggleLike(comment.id);
+    const optimistic = {
+      liked: !comment.liked,
+      disliked: false,
+      likes: comment.liked ? Math.max(comment.likes - 1, 0) : comment.likes + 1,
+      dislikes: comment.disliked ? Math.max(comment.dislikes - 1, 0) : comment.dislikes
+    };
     setComments(
       (prev) => updateComment(prev, comment.id, (item) => ({
         ...item,
-        likes: result.likes,
-        dislikes: result.dislikes,
-        liked: result.liked,
-        disliked: result.disliked
+        likes: optimistic.likes,
+        dislikes: optimistic.dislikes,
+        liked: optimistic.liked,
+        disliked: optimistic.disliked
       }))
     );
+    try {
+      await dataSource.toggleLike(comment.id);
+    } catch {
+      setComments((prev) => updateComment(prev, comment.id, () => comment));
+    }
   }
   async function handleDislike(comment) {
-    const result = await dataSource.toggleDislike(comment.id);
+    const optimistic = {
+      liked: false,
+      disliked: !comment.disliked,
+      likes: comment.liked ? Math.max(comment.likes - 1, 0) : comment.likes,
+      dislikes: comment.disliked ? Math.max(comment.dislikes - 1, 0) : comment.dislikes + 1
+    };
     setComments(
       (prev) => updateComment(prev, comment.id, (item) => ({
         ...item,
-        likes: result.likes,
-        dislikes: result.dislikes,
-        liked: result.liked,
-        disliked: result.disliked
+        likes: optimistic.likes,
+        dislikes: optimistic.dislikes,
+        liked: optimistic.liked,
+        disliked: optimistic.disliked
       }))
     );
+    try {
+      await dataSource.toggleDislike(comment.id);
+    } catch {
+      setComments((prev) => updateComment(prev, comment.id, () => comment));
+    }
   }
   if (loading || isLoadingComments) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-6", children: "Loading comments..." });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-8", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      CommentComposer_default,
+      ComposerComponent,
       {
         avatar: currentUser.avatar,
         onSubmit: handleCreateComment
@@ -18079,6 +18095,7 @@ function CommentThread({
       CommentList_default,
       {
         comments,
+        components,
         onLike: handleLike,
         onDislike: handleDislike,
         onReply: handleReply,