@plusscommunities/pluss-circles-web 1.5.1-auth.0 → 1.5.2-beta.0

package/dist/index.cjs.js

@@ -347,6 +347,35 @@ var circleActions = {
     }
 
     return sendMessage;
+  }(),
+  deleteMessage: function () {
+    var _deleteMessage = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee3(messageId, groupId) {
+      return _regeneratorRuntime__default['default'].wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              return _context3.abrupt("return", Session$4.authedFunction({
+                method: 'POST',
+                url: Helper$3.getUrl(values.serviceKey, 'update/deletemessage'),
+                data: {
+                  messageId: messageId,
+                  groupId: groupId
+                }
+              }));
+
+            case 1:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }));
+
+    function deleteMessage(_x7, _x8) {
+      return _deleteMessage.apply(this, arguments);
+    }
+
+    return deleteMessage;
   }()
 };
 
@@ -802,9 +831,9 @@ var Circles$1 = reactRedux.connect(mapStateToProps$3, {
   circleRemoved: circleRemoved
 })(Circles);
 
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _createSuper$6(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$6(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
@@ -843,7 +872,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
             users: ___default['default'].sortBy(res.data.results.Items, function (u) {
               return (u.displayName || '').toLowerCase();
             }).map(function (u) {
-              return _objectSpread$3(_objectSpread$3({}, u), {}, {
+              return _objectSpread$4(_objectSpread$4({}, u), {}, {
                 userId: u.userId || u.Id
               });
             })
@@ -1105,7 +1134,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         this.setState({
           image: url
         });
-        this.imageInput.setValue(url);
+        this.imageInput.getWrappedInstance().setValue(url);
       } else {
         setTimeout(function () {
           _this2.checkSetImage(url);
@@ -1379,6 +1408,10 @@ var AddCircle$1 = reactRedux.connect(mapStateToProps$2, {
   addRecentlyCreated: Actions$1.addRecentlyCreated
 })(reactRouter.withRouter(AddCircle));
 
+function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _createSuper$5(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$5(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
 function _isNativeReflectConstruct$5() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -1649,6 +1682,96 @@ var Circle = /*#__PURE__*/function (_Component) {
       }
     });
 
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onDeleteMessage", function (message) {
+      _this.setState({
+        showDeleteConfirm: true,
+        messageToDelete: message
+      });
+    });
+
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onConfirmDelete", /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee4() {
+      var messageToDelete, updatedMessages, revertedMessages;
+      return _regeneratorRuntime__default['default'].wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              messageToDelete = _this.state.messageToDelete;
+
+              if (messageToDelete) {
+                _context4.next = 3;
+                break;
+              }
+
+              return _context4.abrupt("return");
+
+            case 3:
+              // Optimistically update UI - mark as deleted immediately
+              updatedMessages = _this.state.messages.map(function (m) {
+                if (m._id === messageToDelete._id) {
+                  return _objectSpread$3(_objectSpread$3({}, m), {}, {
+                    deleted: true,
+                    text: ' '
+                  });
+                }
+
+                return m;
+              });
+
+              _this.setState({
+                messages: updatedMessages,
+                showDeleteConfirm: false,
+                deletingMessageId: messageToDelete._id,
+                messageToDelete: null
+              });
+
+              _context4.prev = 5;
+              _context4.next = 8;
+              return circleActions.deleteMessage(messageToDelete._id, _this.state.circleId);
+
+            case 8:
+              // Message already marked as deleted, just clear the deleting state
+              _this.setState({
+                deletingMessageId: null
+              });
+
+              _context4.next = 17;
+              break;
+
+            case 11:
+              _context4.prev = 11;
+              _context4.t0 = _context4["catch"](5);
+              console.error('Failed to delete message:', _context4.t0); // Revert the optimistic update on failure
+
+              revertedMessages = _this.state.messages.map(function (m) {
+                if (m._id === messageToDelete._id) {
+                  return messageToDelete;
+                }
+
+                return m;
+              });
+
+              _this.setState({
+                messages: revertedMessages,
+                deletingMessageId: null
+              });
+
+              alert('Failed to delete message. Please try again.');
+
+            case 17:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4, null, [[5, 11]]);
+    })));
+
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onCancelDelete", function () {
+      _this.setState({
+        showDeleteConfirm: false,
+        messageToDelete: null
+      });
+    });
+
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "sendMessage", function () {
       var message = {
         _id: Helper.randomString(),
@@ -1702,8 +1825,8 @@ var Circle = /*#__PURE__*/function (_Component) {
 
         _this.scrollToBottom();
 
-        _this.imageInput && _this.imageInput.setValue(null);
-        _this.fileInput && _this.fileInput.setValue(null);
+        _this.imageInput && _this.imageInput.getWrappedInstance().setValue(null);
+        _this.fileInput && _this.fileInput.getWrappedInstance().setValue(null);
       }, 100);
     });
 
@@ -1718,7 +1841,14 @@ var Circle = /*#__PURE__*/function (_Component) {
       images: [],
       files: [],
       membersExpanded: true,
-      replyingTo: null
+      replyingTo: null,
+      showDeleteConfirm: false,
+      messageToDelete: null,
+      deletingMessageId: null,
+      imageInput: null,
+      fileInput: null,
+      imageInputShowing: false,
+      fileInputShowing: false
     };
     return _this;
   }
@@ -1862,8 +1992,8 @@ var Circle = /*#__PURE__*/function (_Component) {
           display: this.state.imageInputShowing ? 'block' : 'none'
         }
       }, /*#__PURE__*/React__default['default'].createElement(Components$2.ImageInput, {
-        ref: function ref(_ref4) {
-          _this5.imageInput = _ref4;
+        ref: function ref(_ref5) {
+          _this5.imageInput = _ref5;
         },
         multiple: true,
         limit: 10,
@@ -1877,8 +2007,8 @@ var Circle = /*#__PURE__*/function (_Component) {
           display: this.state.fileInputShowing ? 'block' : 'none'
         }
       }, /*#__PURE__*/React__default['default'].createElement(Components$2.FileInput, {
-        ref: function ref(_ref5) {
-          _this5.fileInput = _ref5;
+        ref: function ref(_ref6) {
+          _this5.fileInput = _ref6;
         },
         multiple: true,
         limit: 10,
@@ -1904,9 +2034,11 @@ var Circle = /*#__PURE__*/function (_Component) {
       }
 
       var isSelf = m.user._id === this.props.user.Id;
+      var isDeleted = m.deleted === true;
+      var isDeleting = this.state.deletingMessageId === m._id;
       return /*#__PURE__*/React__default['default'].createElement("div", {
         key: m._id,
-        className: "message".concat(isSelf ? ' message-self' : '').concat(m.uploading ? ' message-uploading' : '')
+        className: "message".concat(isSelf ? ' message-self' : '').concat(m.uploading ? ' message-uploading' : '').concat(isDeleting ? ' message-deleting' : '')
       }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
         type: "h5-noUpper",
         className: "message_time"
@@ -1921,7 +2053,7 @@ var Circle = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
         type: "body",
         className: "message_name"
-      }, m.user.name, m.replyingTo ? " replied to ".concat(m.replyingTo.user.name) : ''), m.replyingTo && /*#__PURE__*/React__default['default'].createElement("div", {
+      }, m.user.name, m.replyingTo && !isDeleted ? " replied to ".concat(m.replyingTo.user.name) : ''), m.replyingTo && !isDeleted && /*#__PURE__*/React__default['default'].createElement("div", {
         className: "message_replyBubble"
       }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
         type: "body",
@@ -1931,7 +2063,7 @@ var Circle = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
         type: "body",
         className: "message_text"
-      }, Helper.toParagraphed(m.text)), /*#__PURE__*/React__default['default'].createElement("div", null, (m.image || []).map(function (url, i) {
+      }, isDeleted ? '[Message deleted]' : Helper.toParagraphed(m.text)), !isDeleted && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", null, (m.image || []).map(function (url, i) {
         return /*#__PURE__*/React__default['default'].createElement("a", {
           href: url,
           target: "_blank",
@@ -1947,14 +2079,23 @@ var Circle = /*#__PURE__*/function (_Component) {
           key: i,
           white: isSelf
         });
-      }))), /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "message_reply"
+      })))), !isDeleted && /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "message_reply",
+        style: {
+          display: 'flex',
+          gap: '16px'
+        }
       }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
         type: "button",
         onClick: function onClick() {
           _this6.onReply(m);
         }
-      }, "Reply")))));
+      }, "Reply"), isSelf && /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
+        type: "button",
+        onClick: function onClick() {
+          _this6.onDeleteMessage(m);
+        }
+      }, "Delete")))));
     }
   }, {
     key: "renderHeaderRight",
@@ -2020,7 +2161,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         type: "formTitleMedium"
       }, "Image", Helper.getPluralS(this.state.images.length), " (", this.state.images.length, ")"))), this.state.imagesExpanded && /*#__PURE__*/React__default['default'].createElement("div", {
         className: "paddingTop-8"
-      }, this.state.images.map(function (image, i) {
+      }, this.state.images.map(function (image) {
         return /*#__PURE__*/React__default['default'].createElement("a", {
           href: image.Url,
           target: "_blank"
@@ -2079,6 +2220,29 @@ var Circle = /*#__PURE__*/function (_Component) {
         colour: Colours$1.COLOUR_DUSK
       })));
     }
+  }, {
+    key: "renderDeleteConfirmPopup",
+    value: function renderDeleteConfirmPopup() {
+      if (!this.state.showDeleteConfirm) return null;
+      return /*#__PURE__*/React__default['default'].createElement(Components$2.Popup, {
+        title: "Delete Message",
+        buttons: [{
+          text: 'Delete',
+          onClick: this.onConfirmDelete,
+          type: 'primary',
+          isActive: true
+        }, {
+          text: 'Cancel',
+          onClick: this.onCancelDelete,
+          type: 'tertiary',
+          isActive: true
+        }],
+        onClose: this.onCancelDelete,
+        hasPadding: true
+      }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
+        type: "body"
+      }, "Are you sure you want to delete this message? This action cannot be undone."));
+    }
   }, {
     key: "render",
     value: function render() {
@@ -2090,7 +2254,7 @@ var Circle = /*#__PURE__*/function (_Component) {
           display: 'flex',
           flexDirection: 'column'
         }
-      }, /*#__PURE__*/React__default['default'].createElement(Components$2.Header, {
+      }, this.renderDeleteConfirmPopup(), /*#__PURE__*/React__default['default'].createElement(Components$2.Header, {
         rightContent: this.renderHeaderRight()
       }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
         className: "header_back",
@@ -2138,8 +2302,8 @@ var Circle = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React__default['default'].createElement("div", {
         className: "chat_newMessage"
       }, this.renderChatInput()), this.renderReplyTo(), /*#__PURE__*/React__default['default'].createElement("div", {
-        ref: function ref(_ref6) {
-          return _this8.chat = _ref6;
+        ref: function ref(_ref7) {
+          return _this8.chat = _ref7;
         },
         className: "chat_messages"
       }, ___default['default'].isEmpty(this.state.messages) && !___default['default'].isEmpty(this.state.messageDate) && this.renderEmptyDate(), this.state.messages.map(function (m) {

package/dist/index.esm.js

@@ -304,6 +304,35 @@ var circleActions = {
     }
 
     return sendMessage;
+  }(),
+  deleteMessage: function () {
+    var _deleteMessage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(messageId, groupId) {
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              return _context3.abrupt("return", Session$4.authedFunction({
+                method: 'POST',
+                url: Helper$3.getUrl(values.serviceKey, 'update/deletemessage'),
+                data: {
+                  messageId: messageId,
+                  groupId: groupId
+                }
+              }));
+
+            case 1:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }));
+
+    function deleteMessage(_x7, _x8) {
+      return _deleteMessage.apply(this, arguments);
+    }
+
+    return deleteMessage;
   }()
 };
 
@@ -759,9 +788,9 @@ var Circles$1 = connect(mapStateToProps$3, {
   circleRemoved: circleRemoved
 })(Circles);
 
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _createSuper$6(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$6(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -800,7 +829,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
             users: _.sortBy(res.data.results.Items, function (u) {
               return (u.displayName || '').toLowerCase();
             }).map(function (u) {
-              return _objectSpread$3(_objectSpread$3({}, u), {}, {
+              return _objectSpread$4(_objectSpread$4({}, u), {}, {
                 userId: u.userId || u.Id
               });
             })
@@ -1062,7 +1091,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         this.setState({
           image: url
         });
-        this.imageInput.setValue(url);
+        this.imageInput.getWrappedInstance().setValue(url);
       } else {
         setTimeout(function () {
           _this2.checkSetImage(url);
@@ -1336,6 +1365,10 @@ var AddCircle$1 = connect(mapStateToProps$2, {
   addRecentlyCreated: Actions$1.addRecentlyCreated
 })(withRouter(AddCircle));
 
+function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _createSuper$5(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$5(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct$5() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -1606,6 +1639,96 @@ var Circle = /*#__PURE__*/function (_Component) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "onDeleteMessage", function (message) {
+      _this.setState({
+        showDeleteConfirm: true,
+        messageToDelete: message
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onConfirmDelete", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+      var messageToDelete, updatedMessages, revertedMessages;
+      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              messageToDelete = _this.state.messageToDelete;
+
+              if (messageToDelete) {
+                _context4.next = 3;
+                break;
+              }
+
+              return _context4.abrupt("return");
+
+            case 3:
+              // Optimistically update UI - mark as deleted immediately
+              updatedMessages = _this.state.messages.map(function (m) {
+                if (m._id === messageToDelete._id) {
+                  return _objectSpread$3(_objectSpread$3({}, m), {}, {
+                    deleted: true,
+                    text: ' '
+                  });
+                }
+
+                return m;
+              });
+
+              _this.setState({
+                messages: updatedMessages,
+                showDeleteConfirm: false,
+                deletingMessageId: messageToDelete._id,
+                messageToDelete: null
+              });
+
+              _context4.prev = 5;
+              _context4.next = 8;
+              return circleActions.deleteMessage(messageToDelete._id, _this.state.circleId);
+
+            case 8:
+              // Message already marked as deleted, just clear the deleting state
+              _this.setState({
+                deletingMessageId: null
+              });
+
+              _context4.next = 17;
+              break;
+
+            case 11:
+              _context4.prev = 11;
+              _context4.t0 = _context4["catch"](5);
+              console.error('Failed to delete message:', _context4.t0); // Revert the optimistic update on failure
+
+              revertedMessages = _this.state.messages.map(function (m) {
+                if (m._id === messageToDelete._id) {
+                  return messageToDelete;
+                }
+
+                return m;
+              });
+
+              _this.setState({
+                messages: revertedMessages,
+                deletingMessageId: null
+              });
+
+              alert('Failed to delete message. Please try again.');
+
+            case 17:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4, null, [[5, 11]]);
+    })));
+
+    _defineProperty(_assertThisInitialized(_this), "onCancelDelete", function () {
+      _this.setState({
+        showDeleteConfirm: false,
+        messageToDelete: null
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "sendMessage", function () {
       var message = {
         _id: Helper.randomString(),
@@ -1659,8 +1782,8 @@ var Circle = /*#__PURE__*/function (_Component) {
 
         _this.scrollToBottom();
 
-        _this.imageInput && _this.imageInput.setValue(null);
-        _this.fileInput && _this.fileInput.setValue(null);
+        _this.imageInput && _this.imageInput.getWrappedInstance().setValue(null);
+        _this.fileInput && _this.fileInput.getWrappedInstance().setValue(null);
       }, 100);
     });
 
@@ -1675,7 +1798,14 @@ var Circle = /*#__PURE__*/function (_Component) {
       images: [],
       files: [],
       membersExpanded: true,
-      replyingTo: null
+      replyingTo: null,
+      showDeleteConfirm: false,
+      messageToDelete: null,
+      deletingMessageId: null,
+      imageInput: null,
+      fileInput: null,
+      imageInputShowing: false,
+      fileInputShowing: false
     };
     return _this;
   }
@@ -1819,8 +1949,8 @@ var Circle = /*#__PURE__*/function (_Component) {
           display: this.state.imageInputShowing ? 'block' : 'none'
         }
       }, /*#__PURE__*/React.createElement(Components$2.ImageInput, {
-        ref: function ref(_ref4) {
-          _this5.imageInput = _ref4;
+        ref: function ref(_ref5) {
+          _this5.imageInput = _ref5;
         },
         multiple: true,
         limit: 10,
@@ -1834,8 +1964,8 @@ var Circle = /*#__PURE__*/function (_Component) {
           display: this.state.fileInputShowing ? 'block' : 'none'
         }
       }, /*#__PURE__*/React.createElement(Components$2.FileInput, {
-        ref: function ref(_ref5) {
-          _this5.fileInput = _ref5;
+        ref: function ref(_ref6) {
+          _this5.fileInput = _ref6;
         },
         multiple: true,
         limit: 10,
@@ -1861,9 +1991,11 @@ var Circle = /*#__PURE__*/function (_Component) {
       }
 
       var isSelf = m.user._id === this.props.user.Id;
+      var isDeleted = m.deleted === true;
+      var isDeleting = this.state.deletingMessageId === m._id;
       return /*#__PURE__*/React.createElement("div", {
         key: m._id,
-        className: "message".concat(isSelf ? ' message-self' : '').concat(m.uploading ? ' message-uploading' : '')
+        className: "message".concat(isSelf ? ' message-self' : '').concat(m.uploading ? ' message-uploading' : '').concat(isDeleting ? ' message-deleting' : '')
       }, /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "h5-noUpper",
         className: "message_time"
@@ -1878,7 +2010,7 @@ var Circle = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "body",
         className: "message_name"
-      }, m.user.name, m.replyingTo ? " replied to ".concat(m.replyingTo.user.name) : ''), m.replyingTo && /*#__PURE__*/React.createElement("div", {
+      }, m.user.name, m.replyingTo && !isDeleted ? " replied to ".concat(m.replyingTo.user.name) : ''), m.replyingTo && !isDeleted && /*#__PURE__*/React.createElement("div", {
         className: "message_replyBubble"
       }, /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "body",
@@ -1888,7 +2020,7 @@ var Circle = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "body",
         className: "message_text"
-      }, Helper.toParagraphed(m.text)), /*#__PURE__*/React.createElement("div", null, (m.image || []).map(function (url, i) {
+      }, isDeleted ? '[Message deleted]' : Helper.toParagraphed(m.text)), !isDeleted && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, (m.image || []).map(function (url, i) {
         return /*#__PURE__*/React.createElement("a", {
           href: url,
           target: "_blank",
@@ -1904,14 +2036,23 @@ var Circle = /*#__PURE__*/function (_Component) {
           key: i,
           white: isSelf
         });
-      }))), /*#__PURE__*/React.createElement("div", {
-        className: "message_reply"
+      })))), !isDeleted && /*#__PURE__*/React.createElement("div", {
+        className: "message_reply",
+        style: {
+          display: 'flex',
+          gap: '16px'
+        }
       }, /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "button",
         onClick: function onClick() {
           _this6.onReply(m);
         }
-      }, "Reply")))));
+      }, "Reply"), isSelf && /*#__PURE__*/React.createElement(Components$2.Text, {
+        type: "button",
+        onClick: function onClick() {
+          _this6.onDeleteMessage(m);
+        }
+      }, "Delete")))));
     }
   }, {
     key: "renderHeaderRight",
@@ -1977,7 +2118,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         type: "formTitleMedium"
       }, "Image", Helper.getPluralS(this.state.images.length), " (", this.state.images.length, ")"))), this.state.imagesExpanded && /*#__PURE__*/React.createElement("div", {
         className: "paddingTop-8"
-      }, this.state.images.map(function (image, i) {
+      }, this.state.images.map(function (image) {
         return /*#__PURE__*/React.createElement("a", {
           href: image.Url,
           target: "_blank"
@@ -2036,6 +2177,29 @@ var Circle = /*#__PURE__*/function (_Component) {
         colour: Colours$1.COLOUR_DUSK
       })));
     }
+  }, {
+    key: "renderDeleteConfirmPopup",
+    value: function renderDeleteConfirmPopup() {
+      if (!this.state.showDeleteConfirm) return null;
+      return /*#__PURE__*/React.createElement(Components$2.Popup, {
+        title: "Delete Message",
+        buttons: [{
+          text: 'Delete',
+          onClick: this.onConfirmDelete,
+          type: 'primary',
+          isActive: true
+        }, {
+          text: 'Cancel',
+          onClick: this.onCancelDelete,
+          type: 'tertiary',
+          isActive: true
+        }],
+        onClose: this.onCancelDelete,
+        hasPadding: true
+      }, /*#__PURE__*/React.createElement(Components$2.Text, {
+        type: "body"
+      }, "Are you sure you want to delete this message? This action cannot be undone."));
+    }
   }, {
     key: "render",
     value: function render() {
@@ -2047,7 +2211,7 @@ var Circle = /*#__PURE__*/function (_Component) {
           display: 'flex',
           flexDirection: 'column'
         }
-      }, /*#__PURE__*/React.createElement(Components$2.Header, {
+      }, this.renderDeleteConfirmPopup(), /*#__PURE__*/React.createElement(Components$2.Header, {
         rightContent: this.renderHeaderRight()
       }, /*#__PURE__*/React.createElement(FontAwesome, {
         className: "header_back",
@@ -2095,8 +2259,8 @@ var Circle = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement("div", {
         className: "chat_newMessage"
       }, this.renderChatInput()), this.renderReplyTo(), /*#__PURE__*/React.createElement("div", {
-        ref: function ref(_ref6) {
-          return _this8.chat = _ref6;
+        ref: function ref(_ref7) {
+          return _this8.chat = _ref7;
         },
         className: "chat_messages"
       }, _.isEmpty(this.state.messages) && !_.isEmpty(this.state.messageDate) && this.renderEmptyDate(), this.state.messages.map(function (m) {

package/dist/index.umd.js

@@ -327,6 +327,35 @@
       }
 
       return sendMessage;
+    }(),
+    deleteMessage: function () {
+      var _deleteMessage = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee3(messageId, groupId) {
+        return _regeneratorRuntime__default['default'].wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                return _context3.abrupt("return", Session$4.authedFunction({
+                  method: 'POST',
+                  url: Helper$3.getUrl(values.serviceKey, 'update/deletemessage'),
+                  data: {
+                    messageId: messageId,
+                    groupId: groupId
+                  }
+                }));
+
+              case 1:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3);
+      }));
+
+      function deleteMessage(_x7, _x8) {
+        return _deleteMessage.apply(this, arguments);
+      }
+
+      return deleteMessage;
     }()
   };
 
@@ -782,9 +811,9 @@
     circleRemoved: circleRemoved
   })(Circles);
 
-  function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+  function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-  function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
   function _createSuper$6(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$6(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
@@ -823,7 +852,7 @@
               users: ___default['default'].sortBy(res.data.results.Items, function (u) {
                 return (u.displayName || '').toLowerCase();
               }).map(function (u) {
-                return _objectSpread$3(_objectSpread$3({}, u), {}, {
+                return _objectSpread$4(_objectSpread$4({}, u), {}, {
                   userId: u.userId || u.Id
                 });
               })
@@ -1085,7 +1114,7 @@
           this.setState({
             image: url
           });
-          this.imageInput.setValue(url);
+          this.imageInput.getWrappedInstance().setValue(url);
         } else {
           setTimeout(function () {
             _this2.checkSetImage(url);
@@ -1359,6 +1388,10 @@
     addRecentlyCreated: Actions$1.addRecentlyCreated
   })(reactRouter.withRouter(AddCircle));
 
+  function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+  function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
   function _createSuper$5(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$5(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
   function _isNativeReflectConstruct$5() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -1629,6 +1662,96 @@
         }
       });
 
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onDeleteMessage", function (message) {
+        _this.setState({
+          showDeleteConfirm: true,
+          messageToDelete: message
+        });
+      });
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onConfirmDelete", /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee4() {
+        var messageToDelete, updatedMessages, revertedMessages;
+        return _regeneratorRuntime__default['default'].wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                messageToDelete = _this.state.messageToDelete;
+
+                if (messageToDelete) {
+                  _context4.next = 3;
+                  break;
+                }
+
+                return _context4.abrupt("return");
+
+              case 3:
+                // Optimistically update UI - mark as deleted immediately
+                updatedMessages = _this.state.messages.map(function (m) {
+                  if (m._id === messageToDelete._id) {
+                    return _objectSpread$3(_objectSpread$3({}, m), {}, {
+                      deleted: true,
+                      text: ' '
+                    });
+                  }
+
+                  return m;
+                });
+
+                _this.setState({
+                  messages: updatedMessages,
+                  showDeleteConfirm: false,
+                  deletingMessageId: messageToDelete._id,
+                  messageToDelete: null
+                });
+
+                _context4.prev = 5;
+                _context4.next = 8;
+                return circleActions.deleteMessage(messageToDelete._id, _this.state.circleId);
+
+              case 8:
+                // Message already marked as deleted, just clear the deleting state
+                _this.setState({
+                  deletingMessageId: null
+                });
+
+                _context4.next = 17;
+                break;
+
+              case 11:
+                _context4.prev = 11;
+                _context4.t0 = _context4["catch"](5);
+                console.error('Failed to delete message:', _context4.t0); // Revert the optimistic update on failure
+
+                revertedMessages = _this.state.messages.map(function (m) {
+                  if (m._id === messageToDelete._id) {
+                    return messageToDelete;
+                  }
+
+                  return m;
+                });
+
+                _this.setState({
+                  messages: revertedMessages,
+                  deletingMessageId: null
+                });
+
+                alert('Failed to delete message. Please try again.');
+
+              case 17:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4, null, [[5, 11]]);
+      })));
+
+      _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "onCancelDelete", function () {
+        _this.setState({
+          showDeleteConfirm: false,
+          messageToDelete: null
+        });
+      });
+
       _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "sendMessage", function () {
         var message = {
           _id: Helper.randomString(),
@@ -1682,8 +1805,8 @@
 
           _this.scrollToBottom();
 
-          _this.imageInput && _this.imageInput.setValue(null);
-          _this.fileInput && _this.fileInput.setValue(null);
+          _this.imageInput && _this.imageInput.getWrappedInstance().setValue(null);
+          _this.fileInput && _this.fileInput.getWrappedInstance().setValue(null);
         }, 100);
       });
 
@@ -1698,7 +1821,14 @@
         images: [],
         files: [],
         membersExpanded: true,
-        replyingTo: null
+        replyingTo: null,
+        showDeleteConfirm: false,
+        messageToDelete: null,
+        deletingMessageId: null,
+        imageInput: null,
+        fileInput: null,
+        imageInputShowing: false,
+        fileInputShowing: false
       };
       return _this;
     }
@@ -1842,8 +1972,8 @@
             display: this.state.imageInputShowing ? 'block' : 'none'
           }
         }, /*#__PURE__*/React__default['default'].createElement(Components$2.ImageInput, {
-          ref: function ref(_ref4) {
-            _this5.imageInput = _ref4;
+          ref: function ref(_ref5) {
+            _this5.imageInput = _ref5;
           },
           multiple: true,
           limit: 10,
@@ -1857,8 +1987,8 @@
             display: this.state.fileInputShowing ? 'block' : 'none'
           }
         }, /*#__PURE__*/React__default['default'].createElement(Components$2.FileInput, {
-          ref: function ref(_ref5) {
-            _this5.fileInput = _ref5;
+          ref: function ref(_ref6) {
+            _this5.fileInput = _ref6;
           },
           multiple: true,
           limit: 10,
@@ -1884,9 +2014,11 @@
         }
 
         var isSelf = m.user._id === this.props.user.Id;
+        var isDeleted = m.deleted === true;
+        var isDeleting = this.state.deletingMessageId === m._id;
         return /*#__PURE__*/React__default['default'].createElement("div", {
           key: m._id,
-          className: "message".concat(isSelf ? ' message-self' : '').concat(m.uploading ? ' message-uploading' : '')
+          className: "message".concat(isSelf ? ' message-self' : '').concat(m.uploading ? ' message-uploading' : '').concat(isDeleting ? ' message-deleting' : '')
         }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
           type: "h5-noUpper",
           className: "message_time"
@@ -1901,7 +2033,7 @@
         }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
           type: "body",
           className: "message_name"
-        }, m.user.name, m.replyingTo ? " replied to ".concat(m.replyingTo.user.name) : ''), m.replyingTo && /*#__PURE__*/React__default['default'].createElement("div", {
+        }, m.user.name, m.replyingTo && !isDeleted ? " replied to ".concat(m.replyingTo.user.name) : ''), m.replyingTo && !isDeleted && /*#__PURE__*/React__default['default'].createElement("div", {
           className: "message_replyBubble"
         }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
           type: "body",
@@ -1911,7 +2043,7 @@
         }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
           type: "body",
           className: "message_text"
-        }, Helper.toParagraphed(m.text)), /*#__PURE__*/React__default['default'].createElement("div", null, (m.image || []).map(function (url, i) {
+        }, isDeleted ? '[Message deleted]' : Helper.toParagraphed(m.text)), !isDeleted && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", null, (m.image || []).map(function (url, i) {
           return /*#__PURE__*/React__default['default'].createElement("a", {
             href: url,
             target: "_blank",
@@ -1927,14 +2059,23 @@
             key: i,
             white: isSelf
           });
-        }))), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "message_reply"
+        })))), !isDeleted && /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "message_reply",
+          style: {
+            display: 'flex',
+            gap: '16px'
+          }
         }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
           type: "button",
           onClick: function onClick() {
             _this6.onReply(m);
           }
-        }, "Reply")))));
+        }, "Reply"), isSelf && /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
+          type: "button",
+          onClick: function onClick() {
+            _this6.onDeleteMessage(m);
+          }
+        }, "Delete")))));
       }
     }, {
       key: "renderHeaderRight",
@@ -2000,7 +2141,7 @@
           type: "formTitleMedium"
         }, "Image", Helper.getPluralS(this.state.images.length), " (", this.state.images.length, ")"))), this.state.imagesExpanded && /*#__PURE__*/React__default['default'].createElement("div", {
           className: "paddingTop-8"
-        }, this.state.images.map(function (image, i) {
+        }, this.state.images.map(function (image) {
           return /*#__PURE__*/React__default['default'].createElement("a", {
             href: image.Url,
             target: "_blank"
@@ -2059,6 +2200,29 @@
           colour: Colours$1.COLOUR_DUSK
         })));
       }
+    }, {
+      key: "renderDeleteConfirmPopup",
+      value: function renderDeleteConfirmPopup() {
+        if (!this.state.showDeleteConfirm) return null;
+        return /*#__PURE__*/React__default['default'].createElement(Components$2.Popup, {
+          title: "Delete Message",
+          buttons: [{
+            text: 'Delete',
+            onClick: this.onConfirmDelete,
+            type: 'primary',
+            isActive: true
+          }, {
+            text: 'Cancel',
+            onClick: this.onCancelDelete,
+            type: 'tertiary',
+            isActive: true
+          }],
+          onClose: this.onCancelDelete,
+          hasPadding: true
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
+          type: "body"
+        }, "Are you sure you want to delete this message? This action cannot be undone."));
+      }
     }, {
       key: "render",
       value: function render() {
@@ -2070,7 +2234,7 @@
             display: 'flex',
             flexDirection: 'column'
           }
-        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Header, {
+        }, this.renderDeleteConfirmPopup(), /*#__PURE__*/React__default['default'].createElement(Components$2.Header, {
           rightContent: this.renderHeaderRight()
         }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
           className: "header_back",
@@ -2118,8 +2282,8 @@
         }, /*#__PURE__*/React__default['default'].createElement("div", {
           className: "chat_newMessage"
         }, this.renderChatInput()), this.renderReplyTo(), /*#__PURE__*/React__default['default'].createElement("div", {
-          ref: function ref(_ref6) {
-            return _this8.chat = _ref6;
+          ref: function ref(_ref7) {
+            return _this8.chat = _ref7;
           },
           className: "chat_messages"
         }, ___default['default'].isEmpty(this.state.messages) && !___default['default'].isEmpty(this.state.messageDate) && this.renderEmptyDate(), this.state.messages.map(function (m) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-circles-web",
-  "version": "1.5.1-auth.0",
+  "version": "1.5.2-beta.0",
   "description": "Extension package to enable circles on Pluss Communities Platform",
   "main": "dist/index.cjs.js",
   "scripts": {
@@ -9,16 +9,12 @@
     "patch": "npm version patch",
     "betaupload": "npm run build && npm publish --access public --tag beta && rm -rf node_modules",
     "betaupload:p": "npm run betapatch && npm run betaupload",
-    "authpatch": "npm version prepatch --preid=auth",
-    "authupload": "npm run build && npm publish --access public --tag auth && rm -rf node_modules",
-    "authupload:p": "npm run authpatch && npm run authupload",
     "upload": "npm run build && npm publish --access public && rm -rf node_modules",
     "upload:p": "npm run patch && npm run upload",
     "copy:add": "run(){ ext=${1:-default}; test -f src/values.config.$ext.js || cp src/values.config.default.js src/values.config.$ext.js; }; run",
     "copy:get": "echo $npm_package_name",
     "copy:set": "run(){ target='\\@plusscommunities\\/pluss-circles-web'; ext=${1:-default}; [ $ext == 'default' ] && replace=$target || replace=$target'-'$ext; echo 'Setting target to '$replace; test -f src/values.config.$ext.js && cp -f src/values.config.$ext.js src/values.config.js; sed -i '' -e 's/'$target'.*\"/'$replace'\"/g' package.json; }; run",
     "copy:betaupload": "npm run betapatch; for file in `ls ./src/values.config.*.js`; do dup=`echo $file | sed 's/.*values\\.config\\.\\(.*\\)\\.js/\\1/'`; npm run copy:set $dup; npm run betaupload; done; npm run copy:set;",
-    "copy:authupload": "npm run authpatch; for file in `ls ./src/values.config.*.js`; do dup=`echo $file | sed 's/.*values\\.config\\.\\(.*\\)\\.js/\\1/'`; npm run copy:set $dup; npm run authupload; done; npm run copy:set;",
     "copy:upload": "npm run patch; for file in `ls ./src/values.config.*.js`; do dup=`echo $file | sed 's/.*values\\.config\\.\\(.*\\)\\.js/\\1/'`; npm run copy:set $dup; npm run upload; done; npm run copy:set;"
   },
   "author": "Phillip Suh",
@@ -38,8 +34,10 @@
     "rollup-plugin-styles": "^3.14.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.14.0",
-    "@plusscommunities/pluss-core-web": "1.5.0-auth.0",
+    "@babel/runtime": "^7.14.0"
+  },
+  "peerDependencies": {
+    "@plusscommunities/pluss-core-web": "^1.5.0",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
@@ -50,8 +48,5 @@
     "react-dom": "^16.14.0",
     "react-fontawesome": "^1.6.1"
   },
-  "peerDependencies": {
-    "react-redux": "^7.2.9"
-  },
   "keywords": []
 }

package/src/apis/circleActions.js

@@ -103,4 +103,14 @@ export const circleActions = {
       },
     });
   },
+  deleteMessage: async (messageId, groupId) => {
+    return Session.authedFunction({
+      method: 'POST',
+      url: Helper.getUrl(values.serviceKey, 'update/deletemessage'),
+      data: {
+        messageId,
+        groupId,
+      },
+    });
+  },
 };

package/src/screens/AddCircle.js

@@ -105,7 +105,7 @@ class AddCircle extends Component {
       this.setState({
         image: url,
       });
-      this.imageInput.setValue(url);
+      this.imageInput.getWrappedInstance().setValue(url);
     } else {
       setTimeout(() => {
         this.checkSetImage(url);

package/src/screens/Circle.js

@@ -26,6 +26,13 @@ class Circle extends Component {
       files: [],
       membersExpanded: true,
       replyingTo: null,
+      showDeleteConfirm: false,
+      messageToDelete: null,
+      deletingMessageId: null,
+      imageInput: null,
+      fileInput: null,
+      imageInputShowing: false,
+      fileInputShowing: false,
     };
   }
 
@@ -256,6 +263,60 @@ class Circle extends Component {
     }
   };
 
+  onDeleteMessage = (message) => {
+    this.setState({
+      showDeleteConfirm: true,
+      messageToDelete: message,
+    });
+  };
+
+  onConfirmDelete = async () => {
+    const { messageToDelete } = this.state;
+    if (!messageToDelete) return;
+
+    // Optimistically update UI - mark as deleted immediately
+    const updatedMessages = this.state.messages.map((m) => {
+      if (m._id === messageToDelete._id) {
+        return { ...m, deleted: true, text: ' ' };
+      }
+      return m;
+    });
+
+    this.setState({
+      messages: updatedMessages,
+      showDeleteConfirm: false,
+      deletingMessageId: messageToDelete._id,
+      messageToDelete: null,
+    });
+
+    try {
+      await circleActions.deleteMessage(messageToDelete._id, this.state.circleId);
+      // Message already marked as deleted, just clear the deleting state
+      this.setState({ deletingMessageId: null });
+    } catch (error) {
+      console.error('Failed to delete message:', error);
+      // Revert the optimistic update on failure
+      const revertedMessages = this.state.messages.map((m) => {
+        if (m._id === messageToDelete._id) {
+          return messageToDelete;
+        }
+        return m;
+      });
+      this.setState({
+        messages: revertedMessages,
+        deletingMessageId: null,
+      });
+      alert('Failed to delete message. Please try again.');
+    }
+  };
+
+  onCancelDelete = () => {
+    this.setState({
+      showDeleteConfirm: false,
+      messageToDelete: null,
+    });
+  };
+
   sendMessage = () => {
     const message = {
       _id: Helper.randomString(),
@@ -304,8 +365,8 @@ class Circle extends Component {
     setTimeout(() => {
       this.onReply(null);
       this.scrollToBottom();
-      this.imageInput && this.imageInput.setValue(null);
-      this.fileInput && this.fileInput.setValue(null);
+      this.imageInput && this.imageInput.getWrappedInstance().setValue(null);
+      this.fileInput && this.fileInput.getWrappedInstance().setValue(null);
     }, 100);
   };
 
@@ -397,8 +458,11 @@ class Circle extends Component {
       );
     }
     const isSelf = m.user._id === this.props.user.Id;
+    const isDeleted = m.deleted === true;
+    const isDeleting = this.state.deletingMessageId === m._id;
+    
     return (
-      <div key={m._id} className={`message${isSelf ? ' message-self' : ''}${m.uploading ? ' message-uploading' : ''}`}>
+      <div key={m._id} className={`message${isSelf ? ' message-self' : ''}${m.uploading ? ' message-uploading' : ''}${isDeleting ? ' message-deleting' : ''}`}>
         <Components.Text type="h5-noUpper" className="message_time">
           {moment.utc(m.createdAt).local().format('D MMM YYYY • h:mma')}
         </Components.Text>
@@ -407,9 +471,9 @@ class Circle extends Component {
           <div className="message_bubbleContainer">
             <Components.Text type="body" className="message_name">
               {m.user.name}
-              {m.replyingTo ? ` replied to ${m.replyingTo.user.name}` : ''}
+              {m.replyingTo && !isDeleted ? ` replied to ${m.replyingTo.user.name}` : ''}
             </Components.Text>
-            {m.replyingTo && (
+            {m.replyingTo && !isDeleted && (
               <div className="message_replyBubble">
                 <Components.Text type="body" className="message_text">
                   {Helper.toParagraphed((m.replyingTo.text || '').substr(0, 100))}
@@ -418,33 +482,49 @@ class Circle extends Component {
             )}
             <div className="message_bubble">
               <Components.Text type="body" className="message_text">
-                {Helper.toParagraphed(m.text)}
-              </Components.Text>
-              <div>
-                {(m.image || []).map((url, i) => {
-                  return (
-                    <a href={url} target="_blank" key={i}>
-                      <img className="message_image" src={url} alt={Helper.getFileName(url)} />
-                    </a>
-                  );
-                })}
-              </div>
-              <div>
-                {(m.attachments || []).map((url, i) => {
-                  return <Components.Attachment source={url} key={i} white={isSelf} />;
-                })}
-              </div>
-            </div>
-            <div className="message_reply">
-              <Components.Text
-                type="button"
-                onClick={() => {
-                  this.onReply(m);
-                }}
-              >
-                Reply
+                {isDeleted ? '[Message deleted]' : Helper.toParagraphed(m.text)}
               </Components.Text>
+              {!isDeleted && (
+                <>
+                  <div>
+                    {(m.image || []).map((url, i) => {
+                      return (
+                        <a href={url} target="_blank" key={i}>
+                          <img className="message_image" src={url} alt={Helper.getFileName(url)} />
+                        </a>
+                      );
+                    })}
+                  </div>
+                  <div>
+                    {(m.attachments || []).map((url, i) => {
+                      return <Components.Attachment source={url} key={i} white={isSelf} />;
+                    })}
+                  </div>
+                </>
+              )}
             </div>
+            {!isDeleted && (
+              <div className="message_reply" style={{ display: 'flex', gap: '16px' }}>
+                <Components.Text
+                  type="button"
+                  onClick={() => {
+                    this.onReply(m);
+                  }}
+                >
+                  Reply
+                </Components.Text>
+                {isSelf && (
+                  <Components.Text
+                    type="button"
+                    onClick={() => {
+                      this.onDeleteMessage(m);
+                    }}
+                  >
+                    Delete
+                  </Components.Text>
+                )}
+              </div>
+            )}
           </div>
         </div>
       </div>
@@ -511,7 +591,7 @@ class Circle extends Component {
           </div>
           {this.state.imagesExpanded && (
             <div className="paddingTop-8">
-              {this.state.images.map((image, i) => {
+              {this.state.images.map((image) => {
                 return (
                   <a href={image.Url} target="_blank">
                     <img src={image.Url} className="chat_section_image" alt={Helper.getFileName(image.Url)} />
@@ -571,9 +651,40 @@ class Circle extends Component {
     );
   }
 
+  renderDeleteConfirmPopup() {
+    if (!this.state.showDeleteConfirm) return null;
+    
+    return (
+      <Components.Popup
+        title="Delete Message"
+        buttons={[
+          {
+            text: 'Delete',
+            onClick: this.onConfirmDelete,
+            type: 'primary',
+            isActive: true,
+          },
+          {
+            text: 'Cancel',
+            onClick: this.onCancelDelete,
+            type: 'tertiary',
+            isActive: true,
+          },
+        ]}
+        onClose={this.onCancelDelete}
+        hasPadding
+      >
+        <Components.Text type="body">
+          Are you sure you want to delete this message? This action cannot be undone.
+        </Components.Text>
+      </Components.Popup>
+    );
+  }
+
   render() {
     return (
       <Components.OverlayPage fullPage fullPageStyle={{ display: 'flex', flexDirection: 'column' }}>
+        {this.renderDeleteConfirmPopup()}
         <Components.Header rightContent={this.renderHeaderRight()}>
           <FontAwesome
             className="header_back"
@@ -636,8 +747,6 @@ class Circle extends Component {
   }
 }
 
-const styles = {};
-
 const mapStateToProps = (state) => {
   const { circles } = state[values.reducerKey];
   const { auth } = state;