@myrjfa/ui 1.0.9 → 1.1.0

package/dist/chat/ChatMain.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMain.d.ts","sourceRoot":"","sources":["../../src/chat/ChatMain.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAYvE,UAAU,aAAa;IACnB,YAAY,EAAE,YAAY,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,QAAQ,CAAC,EACrB,YAAY,EACZ,aAAa,EACb,MAAM,GACT,EAAE,aAAa,2CAsYf"}
+{"version":3,"file":"ChatMain.d.ts","sourceRoot":"","sources":["../../src/chat/ChatMain.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAYvE,UAAU,aAAa;IACnB,YAAY,EAAE,YAAY,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,QAAQ,CAAC,EACrB,YAAY,EACZ,aAAa,EACb,MAAM,GACT,EAAE,aAAa,2CA6Yf"}

package/dist/chat/ChatMain.js

@@ -57,7 +57,7 @@ export function ChatMain(_a) {
     var _this = this;
     var _b, _c;
     var conversation = _a.conversation, currentUserId = _a.currentUserId, onBack = _a.onBack;
-    var _d = useChatContext(), socket = _d.socket, messages = _d.messages, setMessages = _d.setMessages, sendMessage = _d.sendMessage, typingUsers = _d.typingUsers, onlineUsers = _d.onlineUsers, editMessage = _d.editMessage, addMessageReaction = _d.addMessageReaction, deleteMessage = _d.deleteMessage, refreshConversations = _d.refreshConversations;
+    var _d = useChatContext(), socket = _d.socket, messages = _d.messages, setMessages = _d.setMessages, sendMessage = _d.sendMessage, typingUsers = _d.typingUsers, onlineUsers = _d.onlineUsers, editMessage = _d.editMessage, toggleMessageReaction = _d.toggleMessageReaction, deleteMessage = _d.deleteMessage, refreshConversations = _d.refreshConversations;
     var messagesEndRef = useRef(null);
     var messagesContainerRef = useRef(null);
     var _e = React.useState("chat"), activePanel = _e[0], setActivePanel = _e[1];
@@ -109,7 +109,12 @@ export function ChatMain(_a) {
     };
     var handleReact = function (messageId, emoji) {
         if (emoji) {
-            addMessageReaction(messageId, emoji);
+            toggleMessageReaction(messageId, emoji);
+        }
+    };
+    var handleUnreact = function (messageId) {
+        if (messageId) {
+            toggleMessageReaction(messageId, undefined);
         }
     };
     var handleDelete = function (messageId) {
@@ -234,6 +239,6 @@ export function ChatMain(_a) {
                                             var showSender = isGroup &&
                                                 msg.senderId !== currentUserId &&
                                                 (!prevMsg || prevMsg.senderId !== msg.senderId);
-                                            return (_jsx("div", { id: "message-".concat(msg._id), className: "transition-all", children: _jsx(MessageBubble, { message: msg, isOwn: msg.senderId === currentUserId, showSender: showSender, senderProfilePic: getSenderImage(msg.senderId), onEdit: handleEdit, onDelete: handleDelete, onReply: function (msg) { return setReplyMessage(msg); }, onReactionAdd: handleReact, onScrollToReply: handleScrollToReply }) }, msg._id));
+                                            return (_jsx("div", { id: "message-".concat(msg._id), className: "transition-all", children: _jsx(MessageBubble, { message: msg, currentUserId: currentUserId, showSender: showSender, senderProfilePic: getSenderImage(msg.senderId), onEdit: handleEdit, onDelete: handleDelete, onReply: function (msg) { return setReplyMessage(msg); }, onReactionAdd: handleReact, onReactionRemove: handleUnreact, onScrollToReply: handleScrollToReply }) }, msg._id));
                                         }), _jsx("div", { ref: messagesEndRef })] })) }), _jsx(MessageInput, { onSend: handleSend, onTypingStart: handleTypingStart, onTypingStop: handleTypingStop, replyTo: replyMessage, onCancelReply: function () { return setReplyMessage(null); }, onAddMilestone: function () { return setActivePanel("milestones"); }, onAddExpense: function () { return setActivePanel("expenses"); }, activePanel: activePanel })] }), isGroup && (_jsxs(_Fragment, { children: [activePanel === "milestones" && (_jsx("div", { className: "hidden md:flex md:flex-col w-80 border-l border-gray-200 dark:border-gray-700 min-w-0", children: _jsx(MilestonePanel, { conversationId: conversation._id, currentUserId: currentUserId }) })), activePanel === "expenses" && (_jsx("div", { className: "hidden md:flex md:flex-col w-80 border-l border-gray-200 dark:border-gray-700 min-w-0", children: _jsx(ExpensePanel, { conversationId: conversation._id, currentUserId: currentUserId }) }))] })), isGroup && activePanel === "milestones" && (_jsx("div", { className: "md:hidden w-full h-full overflow-hidden", children: _jsx(MilestonePanel, { conversationId: conversation._id, currentUserId: currentUserId, isFullScreen: true }) })), isGroup && activePanel === "expenses" && (_jsx("div", { className: "md:hidden w-full h-full overflow-hidden", children: _jsx(ExpensePanel, { conversationId: conversation._id, currentUserId: currentUserId, isFullScreen: true }) }))] }), _jsx(ParticipantsDialog, { open: isParticipantsOpen, onOpenChange: setIsParticipantsOpen, conversation: conversation, currentUserId: currentUserId, onUpdate: refreshConversations }), isGroup && (_jsx(GroupInfoDialog, { open: isGroupInfoOpen, onOpenChange: setIsGroupInfoOpen, conversation: conversation, onUpdate: refreshConversations })), isGroup && (_jsx(GroupInfoViewDialog, { open: isGroupInfoViewOpen, onOpenChange: setIsGroupInfoViewOpen, conversation: conversation }))] }));
 }

package/dist/chat/MessageBubble.d.ts

@@ -1,15 +1,16 @@
 import type { Message } from "@myrjfa/state/dist/lib/models/chat";
 interface MessageBubbleProps {
     message: Message;
-    isOwn: boolean;
+    currentUserId: string;
     showSender?: boolean;
     senderProfilePic?: string;
     onEdit?: (messageId: string, text: string) => void;
     onDelete?: (messageId: string) => void;
     onReply?: (message: Message) => void;
     onReactionAdd?: (messageId: string, emoji: string) => void;
+    onReactionRemove?: (messageId: string) => void;
     onScrollToReply?: (messageId: string) => void;
 }
-export declare function MessageBubble({ message, isOwn, showSender, senderProfilePic, onEdit, onDelete, onReply, onReactionAdd, onScrollToReply }: MessageBubbleProps): import("react/jsx-runtime").JSX.Element;
+export declare function MessageBubble({ message, currentUserId, showSender, senderProfilePic, onEdit, onDelete, onReply, onReactionAdd, onReactionRemove, onScrollToReply }: MessageBubbleProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=MessageBubble.d.ts.map

package/dist/chat/MessageBubble.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../src/chat/MessageBubble.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oCAAoC,CAAC;AAUlE,UAAU,kBAAkB;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAWD,wBAAgB,aAAa,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,UAAU,EACV,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,OAAO,EACP,aAAa,EACb,eAAe,EAClB,EAAE,kBAAkB,2CAkdpB"}
+{"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../src/chat/MessageBubble.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oCAAoC,CAAC;AAUlE,UAAU,kBAAkB;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAWD,wBAAgB,aAAa,CAAC,EAC1B,OAAO,EACP,aAAa,EACb,UAAU,EACV,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,OAAO,EACP,aAAa,EACb,gBAAgB,EAChB,eAAe,EAClB,EAAE,kBAAkB,2CAwdpB"}

package/dist/chat/MessageBubble.js

@@ -16,7 +16,7 @@ var QUICK_REACTIONS = [
 ];
 export function MessageBubble(_a) {
     var _b, _c, _d, _e;
-    var message = _a.message, isOwn = _a.isOwn, showSender = _a.showSender, senderProfilePic = _a.senderProfilePic, onEdit = _a.onEdit, onDelete = _a.onDelete, onReply = _a.onReply, onReactionAdd = _a.onReactionAdd, onScrollToReply = _a.onScrollToReply;
+    var message = _a.message, currentUserId = _a.currentUserId, showSender = _a.showSender, senderProfilePic = _a.senderProfilePic, onEdit = _a.onEdit, onDelete = _a.onDelete, onReply = _a.onReply, onReactionAdd = _a.onReactionAdd, onReactionRemove = _a.onReactionRemove, onScrollToReply = _a.onScrollToReply;
     var _f = useState(false), showQuickReactions = _f[0], setShowQuickReactions = _f[1];
     var _g = useState(false), showReactionPicker = _g[0], setShowReactionPicker = _g[1];
     var _h = useState(false), showActionMenu = _h[0], setShowActionMenu = _h[1];
@@ -26,6 +26,7 @@ export function MessageBubble(_a) {
     var mobileMenuRef = useRef(null);
     var mobilePopupRef = useRef(null);
     var messageBubbleRef = useRef(null);
+    var isOwn = message.senderId == currentUserId;
     // Close reaction picker when clicking outside
     useEffect(function () {
         var handleClickOutside = function (event) {
@@ -167,7 +168,11 @@ export function MessageBubble(_a) {
                                     return acc;
                                 }, {})).map(function (_a) {
                                     var emoji = _a[0], count = _a[1];
-                                    return (_jsxs("span", { className: "bg-gray-100 dark:bg-gray-700 rounded-full px-2 py-0.5 text-xs shadow-sm hover:bg-gray-200 dark:hover:bg-gray-600 cursor-pointer transition-colors", children: [emoji, " ", count > 1 && count] }, emoji));
+                                    return (_jsxs("span", { className: "bg-gray-100 dark:bg-gray-700 rounded-full px-2 py-0.5 text-xs shadow-sm hover:bg-gray-200 dark:hover:bg-gray-600 cursor-pointer transition-colors", onClick: function () {
+                                            if (message.reactions.find(function (r) { return r.emoji == emoji && r.userId == currentUserId; })) {
+                                                onReactionRemove === null || onReactionRemove === void 0 ? void 0 : onReactionRemove(message._id);
+                                            }
+                                        }, children: [emoji, " ", count > 1 && count] }, emoji));
                                 }) }))] }), !message.isDeleted && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "hidden md:flex gap-1 items-center flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity my-auto", children: [_jsxs("div", { className: "relative", ref: reactionRef, children: [_jsx("button", { onClick: function () {
                                                     setShowQuickReactions(!showQuickReactions);
                                                     setShowReactionPicker(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myrjfa/ui",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "Shared UI components for my apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -52,7 +52,7 @@
     "zod": "*"
   },
   "devDependencies": {
-    "@myrjfa/state": "1.0.8",
+    "@myrjfa/state": "1.1.0",
     "@types/react": "19.0.10",
     "@types/react-dom": "^19.0.4",
     "date-fns": "^3.0.0",