stream-chat-react-native-core 5.5.1-beta.1 → 5.6.0-beta.0

package/lib/module/components/Channel/Channel.js

@@ -27,6 +27,8 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
 
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
 
+var _mimeTypes = require("mime-types");
+
 var _streamChat = require("stream-chat");
 
 var _useCreateChannelContext = require("./hooks/useCreateChannelContext");
@@ -75,6 +77,16 @@ var _icons = require("../../icons");
 
 var _native = require("../../native");
 
+var dbApi = _interopRequireWildcard(require("../../store/apis"));
+
+var _addReactionToLocalState = require("../../utils/addReactionToLocalState");
+
+var _DBSyncManager = require("../../utils/DBSyncManager");
+
+var _pendingTaskUtils = require("../../utils/pendingTaskUtils");
+
+var _removeReactionFromLocalState = require("../../utils/removeReactionFromLocalState");
+
 var _utils = require("../../utils/utils");
 
 var _Attachment = require("../Attachment/Attachment");
@@ -188,10 +200,10 @@ var _OverlayReactionList = require("../MessageOverlay/OverlayReactionList");
 var _Reply = require("../Reply/Reply");
 
 var _excluded = ["attachments", "mentioned_users", "parent_id", "text"],
-    _excluded2 = ["__html", "attachments", "created_at", "html", "id", "mentioned_users", "parent_id", "quoted_message", "reactions", "status", "text", "type", "updated_at", "user"];
+    _excluded2 = ["__html", "attachments", "created_at", "deleted_at", "html", "id", "latest_reactions", "mentioned_users", "own_reactions", "parent_id", "quoted_message", "reaction_counts", "reactions", "status", "text", "type", "updated_at", "user"];
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Channel/Channel.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/Channel/Channel.tsx";
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -229,12 +241,12 @@ var throttleOptions = {
   trailing: true
 };
 var debounceOptions = {
-  leading: true,
+  leading: false,
   trailing: true
 };
 
 var ChannelWithContext = function ChannelWithContext(props) {
-  var _client$user, _channel$data, _ref22, _ref23;
+  var _client$user, _channel$data, _ref26, _ref27;
 
   var additionalKeyboardAvoidingViewProps = props.additionalKeyboardAvoidingViewProps,
       additionalTextInputProps = props.additionalTextInputProps,
@@ -290,6 +302,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
       EmptyStateIndicator = _props$EmptyStateIndi === void 0 ? _EmptyStateIndicator.EmptyStateIndicator : _props$EmptyStateIndi,
       _props$enableMessageG = props.enableMessageGroupingByUser,
       enableMessageGroupingByUser = _props$enableMessageG === void 0 ? true : _props$enableMessageG,
+      enableOfflineSupport = props.enableOfflineSupport,
       _props$enforceUniqueR = props.enforceUniqueReaction,
       enforceUniqueReaction = _props$enforceUniqueR === void 0 ? false : _props$enforceUniqueR,
       _props$FileAttachment = props.FileAttachment,
@@ -621,11 +634,11 @@ var ChannelWithContext = function ChannelWithContext(props) {
       (0, _streamChat.logChatPromiseExecution)(channel.markRead(), 'mark read');
     }
   }, defaultThrottleInterval, throttleOptions)).current;
-  var copyMessagesState = (0, _react.useRef)((0, _throttle["default"])(function () {
+  var copyMessagesState = (0, _react.useRef)((0, _debounce["default"])(function () {
     if (channel) {
       setMessages((0, _toConsumableArray2["default"])(channel.state.messages));
     }
-  }, newMessageStateUpdateThrottleInterval, throttleOptions)).current;
+  }, newMessageStateUpdateThrottleInterval, debounceOptions)).current;
   var copyTypingState = (0, _react.useRef)((0, _throttle["default"])(function () {
     if (channel) {
       setTyping((0, _extends2["default"])({}, channel.state.typing));
@@ -636,7 +649,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
       setRead((0, _extends2["default"])({}, channel.state.read));
     }
   }, stateUpdateThrottleInterval, throttleOptions)).current;
-  var copyChannelState = (0, _react.useRef)((0, _throttle["default"])(function () {
+  var copyChannelState = (0, _react.useRef)((0, _debounce["default"])(function () {
     setLoading(false);
 
     if (channel) {
@@ -647,20 +660,10 @@ var ChannelWithContext = function ChannelWithContext(props) {
       setWatcherCount(channel.state.watcher_count);
       setWatchers((0, _extends2["default"])({}, channel.state.watchers));
     }
-  }, stateUpdateThrottleInterval, throttleOptions)).current;
-
-  var connectionRecoveredHandler = function connectionRecoveredHandler() {
-    if (channel && shouldSyncChannel) {
-      copyChannelState();
-
-      if (thread) {
-        setThreadMessages((0, _toConsumableArray2["default"])(channel.state.threads[thread.id]));
-      }
-    }
-  };
+  }, stateUpdateThrottleInterval, debounceOptions)).current;
 
-  var connectionChangedHandler = function connectionChangedHandler(event) {
-    if (event.online && shouldSyncChannel) {
+  var connectionChangedHandler = function connectionChangedHandler() {
+    if (shouldSyncChannel) {
       resyncChannel();
     }
   };
@@ -697,8 +700,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
 
     var subscribe = function subscribe() {
       if (!channel) return;
-      clientSubscriptions.push(client.on('connection.recovered', connectionRecoveredHandler));
-      clientSubscriptions.push(client.on('connection.changed', connectionChangedHandler));
+      clientSubscriptions.push(_DBSyncManager.DBSyncManager.onSyncStatusChange(connectionChangedHandler));
       clientSubscriptions.push(client.on('channel.deleted', function (event) {
         if (event.cid === channel.cid) {
           setDeleted(true);
@@ -716,7 +718,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
         return s.unsubscribe();
       });
     };
-  }, [channelId, connectionChangedHandler, connectionRecoveredHandler, handleEvent]);
+  }, [channelId, connectionChangedHandler, handleEvent]);
   var channelQueryCallRef = (0, _react.useRef)(function () {
     var _ref = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee(queryCall) {
       var onAfterQueryCall,
@@ -1369,56 +1371,201 @@ var ChannelWithContext = function ChannelWithContext(props) {
     return preview;
   };
 
-  var sendMessageRequest = function () {
-    var _ref16 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee12(message, retrying) {
-      var __html, attachments, created_at, html, id, mentioned_users, parent_id, quoted_message, reactions, status, text, type, updated_at, user, extraFields, messageData, messageResponse;
+  var uploadPendingAttachments = function () {
+    var _ref16 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee12(message) {
+      var _updatedMessage$attac;
+
+      var updatedMessage, i, _updatedMessage$attac2, attachment, file, filename, contentType, uploadResponse, response;
 
       return _regenerator["default"].wrap(function _callee12$(_context12) {
         while (1) {
           switch (_context12.prev = _context12.next) {
             case 0:
-              __html = message.__html, attachments = message.attachments, created_at = message.created_at, html = message.html, id = message.id, mentioned_users = message.mentioned_users, parent_id = message.parent_id, quoted_message = message.quoted_message, reactions = message.reactions, status = message.status, text = message.text, type = message.type, updated_at = message.updated_at, user = message.user, extraFields = (0, _objectWithoutProperties2["default"])(message, _excluded2);
-              messageData = (0, _extends2["default"])({
+              updatedMessage = (0, _extends2["default"])({}, message);
+
+              if (!((_updatedMessage$attac = updatedMessage.attachments) != null && _updatedMessage$attac.length)) {
+                _context12.next = 39;
+                break;
+              }
+
+              i = 0;
+
+            case 3:
+              if (!(i < ((_updatedMessage$attac2 = updatedMessage.attachments) == null ? void 0 : _updatedMessage$attac2.length))) {
+                _context12.next = 39;
+                break;
+              }
+
+              attachment = updatedMessage.attachments[i];
+              file = attachment.originalFile;
+
+              if (!(attachment.type === 'image' && file != null && file.uri && attachment.image_url && (0, _utils.isLocalUrl)(attachment.image_url))) {
+                _context12.next = 22;
+                break;
+              }
+
+              filename = file.uri.replace(/^(file:\/\/|content:\/\/|assets-library:\/\/)/, '');
+              contentType = (0, _mimeTypes.lookup)(filename) || 'multipart/form-data';
+
+              if (!doImageUploadRequest) {
+                _context12.next = 15;
+                break;
+              }
+
+              _context12.next = 12;
+              return doImageUploadRequest(file, channel);
+
+            case 12:
+              _context12.t0 = _context12.sent;
+              _context12.next = 18;
+              break;
+
+            case 15:
+              _context12.next = 17;
+              return channel.sendImage(file == null ? void 0 : file.uri, filename, contentType);
+
+            case 17:
+              _context12.t0 = _context12.sent;
+
+            case 18:
+              uploadResponse = _context12.t0;
+              attachment.image_url = uploadResponse.file;
+              delete attachment.originalFile;
+              dbApi.updateMessage({
+                message: (0, _extends2["default"])({}, updatedMessage, {
+                  cid: channel.cid
+                })
+              });
+
+            case 22:
+              if (!((attachment.type === 'file' || attachment.type === 'audio' || attachment.type === 'video') && attachment.asset_url && (0, _utils.isLocalUrl)(attachment.asset_url) && file != null && file.uri)) {
+                _context12.next = 36;
+                break;
+              }
+
+              if (!doDocUploadRequest) {
+                _context12.next = 29;
+                break;
+              }
+
+              _context12.next = 26;
+              return doDocUploadRequest(file, channel);
+
+            case 26:
+              _context12.t1 = _context12.sent;
+              _context12.next = 32;
+              break;
+
+            case 29:
+              _context12.next = 31;
+              return channel.sendFile(file.uri, file.name, file.type);
+
+            case 31:
+              _context12.t1 = _context12.sent;
+
+            case 32:
+              response = _context12.t1;
+              attachment.asset_url = response.file;
+              delete attachment.originalFile;
+              dbApi.updateMessage({
+                message: (0, _extends2["default"])({}, updatedMessage, {
+                  cid: channel.cid
+                })
+              });
+
+            case 36:
+              i++;
+              _context12.next = 3;
+              break;
+
+            case 39:
+              return _context12.abrupt("return", updatedMessage);
+
+            case 40:
+            case "end":
+              return _context12.stop();
+          }
+        }
+      }, _callee12);
+    }));
+
+    return function uploadPendingAttachments(_x5) {
+      return _ref16.apply(this, arguments);
+    };
+  }();
+
+  var sendMessageRequest = function () {
+    var _ref17 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee13(message, retrying) {
+      var _updatedMessage, __html, attachments, created_at, deleted_at, html, id, latest_reactions, mentioned_users, own_reactions, parent_id, quoted_message, reaction_counts, reactions, status, text, type, updated_at, user, extraFields, _messageData, messageResponse;
+
+      return _regenerator["default"].wrap(function _callee13$(_context13) {
+        while (1) {
+          switch (_context13.prev = _context13.next) {
+            case 0:
+              _context13.prev = 0;
+              _context13.next = 3;
+              return uploadPendingAttachments(message);
+
+            case 3:
+              _updatedMessage = _context13.sent;
+              __html = _updatedMessage.__html, attachments = _updatedMessage.attachments, created_at = _updatedMessage.created_at, deleted_at = _updatedMessage.deleted_at, html = _updatedMessage.html, id = _updatedMessage.id, latest_reactions = _updatedMessage.latest_reactions, mentioned_users = _updatedMessage.mentioned_users, own_reactions = _updatedMessage.own_reactions, parent_id = _updatedMessage.parent_id, quoted_message = _updatedMessage.quoted_message, reaction_counts = _updatedMessage.reaction_counts, reactions = _updatedMessage.reactions, status = _updatedMessage.status, text = _updatedMessage.text, type = _updatedMessage.type, updated_at = _updatedMessage.updated_at, user = _updatedMessage.user, extraFields = (0, _objectWithoutProperties2["default"])(_updatedMessage, _excluded2);
+
+              if (channel.id) {
+                _context13.next = 7;
+                break;
+              }
+
+              return _context13.abrupt("return");
+
+            case 7:
+              _messageData = (0, _extends2["default"])({
                 attachments: attachments,
-                id: retrying ? undefined : id,
+                id: id,
                 mentioned_users: (mentioned_users == null ? void 0 : mentioned_users.map(function (mentionedUser) {
                   return mentionedUser.id;
                 })) || [],
                 parent_id: parent_id,
                 text: text
               }, extraFields);
-              _context12.prev = 2;
               messageResponse = {};
 
               if (!doSendMessageRequest) {
-                _context12.next = 10;
+                _context13.next = 15;
                 break;
               }
 
-              _context12.next = 7;
-              return doSendMessageRequest((channel == null ? void 0 : channel.cid) || '', messageData);
+              _context13.next = 12;
+              return doSendMessageRequest((channel == null ? void 0 : channel.cid) || '', _messageData);
 
-            case 7:
-              messageResponse = _context12.sent;
-              _context12.next = 14;
+            case 12:
+              messageResponse = _context13.sent;
+              _context13.next = 19;
               break;
 
-            case 10:
+            case 15:
               if (!channel) {
-                _context12.next = 14;
+                _context13.next = 19;
                 break;
               }
 
-              _context12.next = 13;
-              return channel.sendMessage(messageData);
+              _context13.next = 18;
+              return channel.sendMessage(_messageData);
 
-            case 13:
-              messageResponse = _context12.sent;
+            case 18:
+              messageResponse = _context13.sent;
 
-            case 14:
+            case 19:
               if (messageResponse.message) {
                 messageResponse.message.status = _utils.MessageStatusTypes.RECEIVED;
 
+                if (enableOfflineSupport) {
+                  dbApi.updateMessage({
+                    message: (0, _extends2["default"])({}, messageResponse.message, {
+                      cid: channel.cid
+                    })
+                  });
+                }
+
                 if (retrying) {
                   replaceMessage(message, messageResponse.message);
                 } else {
@@ -1426,37 +1573,47 @@ var ChannelWithContext = function ChannelWithContext(props) {
                 }
               }
 
-              _context12.next = 22;
+              _context13.next = 28;
               break;
 
-            case 17:
-              _context12.prev = 17;
-              _context12.t0 = _context12["catch"](2);
-              console.log(_context12.t0);
+            case 22:
+              _context13.prev = 22;
+              _context13.t0 = _context13["catch"](0);
+              console.log(_context13.t0);
               message.status = _utils.MessageStatusTypes.FAILED;
-              updateMessage(message);
+              updateMessage((0, _extends2["default"])({}, message, {
+                cid: channel.cid
+              }));
 
-            case 22:
+              if (enableOfflineSupport) {
+                dbApi.updateMessage({
+                  message: (0, _extends2["default"])({}, message, {
+                    cid: channel.cid
+                  })
+                });
+              }
+
+            case 28:
             case "end":
-              return _context12.stop();
+              return _context13.stop();
           }
         }
-      }, _callee12, null, [[2, 17]]);
+      }, _callee13, null, [[0, 22]]);
     }));
 
-    return function sendMessageRequest(_x5, _x6) {
-      return _ref16.apply(this, arguments);
+    return function sendMessageRequest(_x6, _x7) {
+      return _ref17.apply(this, arguments);
     };
   }();
 
   var sendMessage = function () {
-    var _ref17 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee13(message) {
+    var _ref18 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee14(message) {
       var _channel$state;
 
       var messagePreview;
-      return _regenerator["default"].wrap(function _callee13$(_context13) {
+      return _regenerator["default"].wrap(function _callee14$(_context14) {
         while (1) {
-          switch (_context13.prev = _context13.next) {
+          switch (_context14.prev = _context14.next) {
             case 0:
               if (channel != null && (_channel$state = channel.state) != null && _channel$state.filterErrorMessages) {
                 channel.state.filterErrorMessages();
@@ -1467,11 +1624,11 @@ var ChannelWithContext = function ChannelWithContext(props) {
               }));
 
               if (channel != null && channel.state.isUpToDate) {
-                _context13.next = 5;
+                _context14.next = 5;
                 break;
               }
 
-              _context13.next = 5;
+              _context14.next = 5;
               return reloadChannel();
 
             case 5:
@@ -1479,46 +1636,56 @@ var ChannelWithContext = function ChannelWithContext(props) {
                 commands: [],
                 messageInput: ''
               });
-              _context13.next = 8;
+
+              if (enableOfflineSupport) {
+                dbApi.upsertMessages({
+                  messages: [(0, _extends2["default"])({}, messagePreview, {
+                    cid: channel.cid,
+                    status: _utils.MessageStatusTypes.FAILED
+                  })]
+                });
+              }
+
+              _context14.next = 9;
               return sendMessageRequest(messagePreview);
 
-            case 8:
+            case 9:
             case "end":
-              return _context13.stop();
+              return _context14.stop();
           }
         }
-      }, _callee13);
+      }, _callee14);
     }));
 
-    return function sendMessage(_x7) {
-      return _ref17.apply(this, arguments);
+    return function sendMessage(_x8) {
+      return _ref18.apply(this, arguments);
     };
   }();
 
   var retrySendMessage = function () {
-    var _ref18 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee14(message) {
+    var _ref19 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee15(message) {
       var statusPendingMessage;
-      return _regenerator["default"].wrap(function _callee14$(_context14) {
+      return _regenerator["default"].wrap(function _callee15$(_context15) {
         while (1) {
-          switch (_context14.prev = _context14.next) {
+          switch (_context15.prev = _context15.next) {
             case 0:
               statusPendingMessage = (0, _extends2["default"])({}, message, {
                 status: _utils.MessageStatusTypes.SENDING
               });
               updateMessage(statusPendingMessage);
-              _context14.next = 4;
+              _context15.next = 4;
               return sendMessageRequest(statusPendingMessage, true);
 
             case 4:
             case "end":
-              return _context14.stop();
+              return _context15.stop();
           }
         }
-      }, _callee14);
+      }, _callee15);
     }));
 
-    return function retrySendMessage(_x8) {
-      return _ref18.apply(this, arguments);
+    return function retrySendMessage(_x9) {
+      return _ref19.apply(this, arguments);
     };
   }();
 
@@ -1530,56 +1697,56 @@ var ChannelWithContext = function ChannelWithContext(props) {
   }, defaultDebounceInterval, debounceOptions)).current;
 
   var loadMore = function () {
-    var _ref19 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee15() {
+    var _ref20 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee16() {
       var limit,
           oldestMessage,
           oldestID,
           queryResponse,
           updatedHasMore,
-          _args15 = arguments;
-      return _regenerator["default"].wrap(function _callee15$(_context15) {
+          _args16 = arguments;
+      return _regenerator["default"].wrap(function _callee16$(_context16) {
         while (1) {
-          switch (_context15.prev = _context15.next) {
+          switch (_context16.prev = _context16.next) {
             case 0:
-              limit = _args15.length > 0 && _args15[0] !== undefined ? _args15[0] : 20;
+              limit = _args16.length > 0 && _args16[0] !== undefined ? _args16[0] : 20;
 
               if (!(loadingMore || hasMore === false)) {
-                _context15.next = 3;
+                _context16.next = 3;
                 break;
               }
 
-              return _context15.abrupt("return");
+              return _context16.abrupt("return");
 
             case 3:
               setLoadingMore(true);
 
               if (messages.length) {
-                _context15.next = 6;
+                _context16.next = 6;
                 break;
               }
 
-              return _context15.abrupt("return", setLoadingMore(false));
+              return _context16.abrupt("return", setLoadingMore(false));
 
             case 6:
               oldestMessage = messages && messages[0];
 
               if (!(oldestMessage && oldestMessage.status !== _utils.MessageStatusTypes.RECEIVED)) {
-                _context15.next = 9;
+                _context16.next = 9;
                 break;
               }
 
-              return _context15.abrupt("return", setLoadingMore(false));
+              return _context16.abrupt("return", setLoadingMore(false));
 
             case 9:
               oldestID = oldestMessage && oldestMessage.id;
-              _context15.prev = 10;
+              _context16.prev = 10;
 
               if (!channel) {
-                _context15.next = 17;
+                _context16.next = 17;
                 break;
               }
 
-              _context15.next = 14;
+              _context16.next = 14;
               return channel.query({
                 messages: {
                   id_lt: oldestID,
@@ -1588,80 +1755,80 @@ var ChannelWithContext = function ChannelWithContext(props) {
               });
 
             case 14:
-              queryResponse = _context15.sent;
+              queryResponse = _context16.sent;
               updatedHasMore = queryResponse.messages.length === limit;
               loadMoreFinished(updatedHasMore, channel.state.messages);
 
             case 17:
-              _context15.next = 24;
+              _context16.next = 24;
               break;
 
             case 19:
-              _context15.prev = 19;
-              _context15.t0 = _context15["catch"](10);
+              _context16.prev = 19;
+              _context16.t0 = _context16["catch"](10);
 
-              if (_context15.t0 instanceof Error) {
-                setError(_context15.t0);
+              if (_context16.t0 instanceof Error) {
+                setError(_context16.t0);
               } else {
                 setError(true);
               }
 
               setLoadingMore(false);
-              throw _context15.t0;
+              throw _context16.t0;
 
             case 24:
             case "end":
-              return _context15.stop();
+              return _context16.stop();
           }
         }
-      }, _callee15, null, [[10, 19]]);
+      }, _callee16, null, [[10, 19]]);
     }));
 
     return function loadMore() {
-      return _ref19.apply(this, arguments);
+      return _ref20.apply(this, arguments);
     };
   }();
 
   var loadMoreRecent = function () {
-    var _ref20 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee16() {
+    var _ref21 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee17() {
       var limit,
           recentMessage,
           state,
-          _args16 = arguments;
-      return _regenerator["default"].wrap(function _callee16$(_context16) {
+          _args17 = arguments;
+      return _regenerator["default"].wrap(function _callee17$(_context17) {
         while (1) {
-          switch (_context16.prev = _context16.next) {
+          switch (_context17.prev = _context17.next) {
             case 0:
-              limit = _args16.length > 0 && _args16[0] !== undefined ? _args16[0] : 5;
+              limit = _args17.length > 0 && _args17[0] !== undefined ? _args17[0] : 5;
 
               if (!hasNoMoreRecentMessagesToLoad) {
-                _context16.next = 3;
+                _context17.next = 3;
                 break;
               }
 
-              return _context16.abrupt("return");
+              return _context17.abrupt("return");
 
             case 3:
               setLoadingMoreRecent(true);
               recentMessage = messages[messages.length - 1];
 
               if (!((recentMessage == null ? void 0 : recentMessage.status) !== _utils.MessageStatusTypes.RECEIVED)) {
-                _context16.next = 8;
+                _context17.next = 8;
                 break;
               }
 
               setLoadingMoreRecent(false);
-              return _context16.abrupt("return");
+              return _context17.abrupt("return");
 
             case 8:
-              _context16.prev = 8;
+              _context17.prev = 8;
 
               if (!channel) {
-                _context16.next = 15;
+                _context17.next = 15;
                 break;
               }
 
-              _context16.next = 12;
+              _context17.next = 12;
               return channel.query({
                 messages: {
                   id_gte: recentMessage.id,
@@ -1671,38 +1838,38 @@ var ChannelWithContext = function ChannelWithContext(props) {
               });
 
             case 12:
-              state = _context16.sent;
+              state = _context17.sent;
               setHasNoMoreRecentMessagesToLoad(state.messages.length < limit);
               loadMoreRecentFinished(channel.state.messages);
 
             case 15:
-              _context16.next = 23;
+              _context17.next = 23;
               break;
 
             case 17:
-              _context16.prev = 17;
-              _context16.t0 = _context16["catch"](8);
-              console.warn('Message pagination request failed with error', _context16.t0);
+              _context17.prev = 17;
+              _context17.t0 = _context17["catch"](8);
+              console.warn('Message pagination request failed with error', _context17.t0);
 
-              if (_context16.t0 instanceof Error) {
-                setError(_context16.t0);
+              if (_context17.t0 instanceof Error) {
+                setError(_context17.t0);
               } else {
                 setError(true);
               }
 
               setLoadingMoreRecent(false);
-              throw _context16.t0;
+              throw _context17.t0;
 
             case 23:
             case "end":
-              return _context16.stop();
+              return _context17.stop();
           }
         }
-      }, _callee16, null, [[8, 17]]);
+      }, _callee17, null, [[8, 17]]);
     }));
 
     return function loadMoreRecent() {
-      return _ref20.apply(this, arguments);
+      return _ref21.apply(this, arguments);
     };
   }();
 
@@ -1741,8 +1908,218 @@ var ChannelWithContext = function ChannelWithContext(props) {
         setThreadMessages(channel.state.threads[thread.id] || []);
       }
     }
+
+    if (enableOfflineSupport) {
+      dbApi.deleteMessage({
+        id: message.id
+      });
+    }
   };
 
+  var sendReaction = function () {
+    var _ref22 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee18(type, messageId) {
+      var payload;
+      return _regenerator["default"].wrap(function _callee18$(_context18) {
+        while (1) {
+          switch (_context18.prev = _context18.next) {
+            case 0:
+              if (!(!(channel != null && channel.id) || !client.user)) {
+                _context18.next = 2;
+                break;
+              }
+
+              throw new Error('Channel has not been initialized');
+
+            case 2:
+              payload = [messageId, {
+                type: type
+              }, {
+                enforce_unique: enforceUniqueReaction
+              }];
+
+              if (enableOfflineSupport) {
+                _context18.next = 7;
+                break;
+              }
+
+              _context18.next = 6;
+              return channel.sendReaction.apply(channel, payload);
+
+            case 6:
+              return _context18.abrupt("return");
+
+            case 7:
+              (0, _addReactionToLocalState.addReactionToLocalState)({
+                channel: channel,
+                enforceUniqueReaction: enforceUniqueReaction,
+                messageId: messageId,
+                reactionType: type,
+                user: client.user
+              });
+              setMessages(channel.state.messages);
+              _context18.next = 11;
+              return (0, _pendingTaskUtils.queueTask)({
+                client: client,
+                task: {
+                  channelId: channel.id,
+                  channelType: channel.type,
+                  messageId: messageId,
+                  payload: payload,
+                  type: 'send-reaction'
+                }
+              });
+
+            case 11:
+            case "end":
+              return _context18.stop();
+          }
+        }
+      }, _callee18);
+    }));
+
+    return function sendReaction(_x10, _x11) {
+      return _ref22.apply(this, arguments);
+    };
+  }();
+
+  var deleteMessage = function () {
+    var _ref23 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee19(message) {
+      var data;
+      return _regenerator["default"].wrap(function _callee19$(_context19) {
+        while (1) {
+          switch (_context19.prev = _context19.next) {
+            case 0:
+              if (channel.id) {
+                _context19.next = 2;
+                break;
+              }
+
+              throw new Error('Channel has not been initialized yet');
+
+            case 2:
+              if (enableOfflineSupport) {
+                _context19.next = 6;
+                break;
+              }
+
+              _context19.next = 5;
+              return client.deleteMessage(message.id);
+
+            case 5:
+              return _context19.abrupt("return");
+
+            case 6:
+              if (!(message.status === _utils.MessageStatusTypes.FAILED)) {
+                _context19.next = 11;
+                break;
+              }
+
+              (0, _pendingTaskUtils.dropPendingTasks)({
+                messageId: message.id
+              });
+              removeMessage(message);
+              _context19.next = 16;
+              break;
+
+            case 11:
+              updateMessage((0, _extends2["default"])({}, message, {
+                cid: channel.cid,
+                deleted_at: new Date().toISOString(),
+                type: 'deleted'
+              }));
+              _context19.next = 14;
+              return (0, _pendingTaskUtils.queueTask)({
+                client: client,
+                task: {
+                  channelId: channel.id,
+                  channelType: channel.type,
+                  messageId: message.id,
+                  payload: [message.id],
+                  type: 'delete-message'
+                }
+              });
+
+            case 14:
+              data = _context19.sent;
+
+              if (data != null && data.message) {
+                updateMessage((0, _extends2["default"])({}, data.message));
+              }
+
+            case 16:
+            case "end":
+              return _context19.stop();
+          }
+        }
+      }, _callee19);
+    }));
+
+    return function deleteMessage(_x12) {
+      return _ref23.apply(this, arguments);
+    };
+  }();
+
+  var deleteReaction = function () {
+    var _ref24 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee20(type, messageId) {
+      var payload;
+      return _regenerator["default"].wrap(function _callee20$(_context20) {
+        while (1) {
+          switch (_context20.prev = _context20.next) {
+            case 0:
+              if (!(!(channel != null && channel.id) || !client.user)) {
+                _context20.next = 2;
+                break;
+              }
+
+              throw new Error('Channel has not been initialized');
+
+            case 2:
+              payload = [messageId, type];
+
+              if (enableOfflineSupport) {
+                _context20.next = 7;
+                break;
+              }
+
+              _context20.next = 6;
+              return channel.deleteReaction.apply(channel, payload);
+
+            case 6:
+              return _context20.abrupt("return");
+
+            case 7:
+              (0, _removeReactionFromLocalState.removeReactionFromLocalState)({
+                channel: channel,
+                messageId: messageId,
+                reactionType: type,
+                user: client.user
+              });
+              setMessages(channel.state.messages);
+              _context20.next = 11;
+              return (0, _pendingTaskUtils.queueTask)({
+                client: client,
+                task: {
+                  channelId: channel.id,
+                  channelType: channel.type,
+                  messageId: messageId,
+                  payload: payload,
+                  type: 'delete-reaction'
+                }
+              });
+
+            case 11:
+            case "end":
+              return _context20.stop();
+          }
+        }
+      }, _callee20);
+    }));
+
+    return function deleteReaction(_x13, _x14) {
+      return _ref24.apply(this, arguments);
+    };
+  }();
+
   var openThread = function openThread(message) {
     var _channel$state2;
 
@@ -1762,26 +2139,26 @@ var ChannelWithContext = function ChannelWithContext(props) {
   }, defaultDebounceInterval, debounceOptions)).current;
 
   var loadMoreThread = function () {
-    var _ref21 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee17() {
+    var _ref25 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee21() {
       var _threadMessages$, parentID, oldestMessageID, limit, queryResponse, updatedHasMore, updatedThreadMessages;
 
-      return _regenerator["default"].wrap(function _callee17$(_context17) {
+      return _regenerator["default"].wrap(function _callee21$(_context21) {
         while (1) {
-          switch (_context17.prev = _context17.next) {
+          switch (_context21.prev = _context21.next) {
             case 0:
               if (!(threadLoadingMore || !(thread != null && thread.id))) {
-                _context17.next = 2;
+                _context21.next = 2;
                 break;
               }
 
-              return _context17.abrupt("return");
+              return _context21.abrupt("return");
 
             case 2:
               setThreadLoadingMore(true);
-              _context17.prev = 3;
+              _context21.prev = 3;
 
               if (!channel) {
-                _context17.next = 15;
+                _context21.next = 15;
                 break;
               }
 
@@ -1789,46 +2166,46 @@ var ChannelWithContext = function ChannelWithContext(props) {
               channel.state.threads[parentID] = threadMessages;
               oldestMessageID = threadMessages == null ? void 0 : (_threadMessages$ = threadMessages[0]) == null ? void 0 : _threadMessages$.id;
               limit = 50;
-              _context17.next = 11;
+              _context21.next = 11;
               return channel.getReplies(parentID, {
                 id_lt: oldestMessageID,
                 limit: limit
               });
 
             case 11:
-              queryResponse = _context17.sent;
+              queryResponse = _context21.sent;
               updatedHasMore = queryResponse.messages.length === limit;
               updatedThreadMessages = channel.state.threads[parentID] || [];
               loadMoreThreadFinished(updatedHasMore, updatedThreadMessages);
 
             case 15:
-              _context17.next = 23;
+              _context21.next = 23;
               break;
 
             case 17:
-              _context17.prev = 17;
-              _context17.t0 = _context17["catch"](3);
-              console.warn('Message pagination request failed with error', _context17.t0);
+              _context21.prev = 17;
+              _context21.t0 = _context21["catch"](3);
+              console.warn('Message pagination request failed with error', _context21.t0);
 
-              if (_context17.t0 instanceof Error) {
-                setError(_context17.t0);
+              if (_context21.t0 instanceof Error) {
+                setError(_context21.t0);
               } else {
                 setError(true);
               }
 
               setThreadLoadingMore(false);
-              throw _context17.t0;
+              throw _context21.t0;
 
             case 23:
             case "end":
-              return _context17.stop();
+              return _context21.stop();
           }
         }
-      }, _callee17, null, [[3, 17]]);
+      }, _callee21, null, [[3, 17]]);
     }));
 
     return function loadMoreThread() {
-      return _ref21.apply(this, arguments);
+      return _ref25.apply(this, arguments);
     };
   }();
 
@@ -1843,7 +2220,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     enableMessageGroupingByUser: enableMessageGroupingByUser,
     enforceUniqueReaction: enforceUniqueReaction,
     error: error,
-    giphyEnabled: giphyEnabled != null ? giphyEnabled : !!((_ref22 = (clientChannelConfig == null ? void 0 : clientChannelConfig.commands) || []) != null && _ref22.some(function (command) {
+    giphyEnabled: giphyEnabled != null ? giphyEnabled : !!((_ref26 = (clientChannelConfig == null ? void 0 : clientChannelConfig.commands) || []) != null && _ref26.some(function (command) {
       return command.name === 'giphy';
     })),
     hideDateSeparators: hideDateSeparators,
@@ -1898,7 +2275,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     InputEditingStateHeader: InputEditingStateHeader,
     InputGiphySearch: InputGiphySearch,
     InputReplyStateHeader: InputReplyStateHeader,
-    maxMessageLength: (_ref23 = maxMessageLengthProp != null ? maxMessageLengthProp : clientChannelConfig == null ? void 0 : clientChannelConfig.max_message_length) != null ? _ref23 : undefined,
+    maxMessageLength: (_ref27 = maxMessageLengthProp != null ? maxMessageLengthProp : clientChannelConfig == null ? void 0 : clientChannelConfig.max_message_length) != null ? _ref27 : undefined,
     maxNumberOfFiles: maxNumberOfFiles,
     mentionAllAppUsersEnabled: mentionAllAppUsersEnabled,
     mentionAllAppUsersQuery: mentionAllAppUsersQuery,
@@ -1939,6 +2316,8 @@ var ChannelWithContext = function ChannelWithContext(props) {
     channelId: channelId,
     DateHeader: DateHeader,
     deletedMessagesVisibilityType: deletedMessagesVisibilityType,
+    deleteMessage: deleteMessage,
+    deleteReaction: deleteReaction,
     disableTypingIndicator: disableTypingIndicator,
     dismissKeyboardOnMessageTouch: dismissKeyboardOnMessageTouch,
     enableMessageGroupingByUser: enableMessageGroupingByUser,
@@ -1998,6 +2377,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     retrySendMessage: retrySendMessage,
     ScrollToBottomButton: ScrollToBottomButton,
     selectReaction: selectReaction,
+    sendReaction: sendReaction,
     setEditingState: setEditingState,
     setQuotedMessageState: setQuotedMessageState,
     supportedReactions: supportedReactions,
@@ -2038,7 +2418,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1754,
+        lineNumber: 1961,
         columnNumber: 12
       }
     });
@@ -2053,7 +2433,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1759,
+        lineNumber: 1966,
         columnNumber: 7
       }
     }, t('Please select a channel first'));
@@ -2067,7 +2447,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1766,
+      lineNumber: 1973,
       columnNumber: 5
     }
   }), _react["default"].createElement(_ChannelContext.ChannelProvider, {
@@ -2075,7 +2455,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1772,
+      lineNumber: 1979,
       columnNumber: 7
     }
   }, _react["default"].createElement(_OwnCapabilitiesContext.OwnCapabilitiesProvider, {
@@ -2083,7 +2463,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1773,
+      lineNumber: 1980,
       columnNumber: 9
     }
   }, _react["default"].createElement(_TypingContext.TypingProvider, {
@@ -2091,7 +2471,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1774,
+      lineNumber: 1981,
       columnNumber: 11
     }
   }, _react["default"].createElement(_PaginatedMessageListContext.PaginatedMessageListProvider, {
@@ -2099,7 +2479,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1775,
+      lineNumber: 1982,
       columnNumber: 13
     }
   }, _react["default"].createElement(_MessagesContext.MessagesProvider, {
@@ -2107,7 +2487,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1776,
+      lineNumber: 1983,
       columnNumber: 15
     }
   }, _react["default"].createElement(_ThreadContext.ThreadProvider, {
@@ -2115,7 +2495,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1777,
+      lineNumber: 1984,
       columnNumber: 17
     }
   }, _react["default"].createElement(_SuggestionsContext.SuggestionsProvider, {
@@ -2123,7 +2503,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1778,
+      lineNumber: 1985,
       columnNumber: 19
     }
   }, _react["default"].createElement(_MessageInputContext.MessageInputProvider, {
@@ -2131,7 +2511,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1779,
+      lineNumber: 1986,
       columnNumber: 21
     }
   }, _react["default"].createElement(_reactNative.View, {
@@ -2141,7 +2521,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1780,
+      lineNumber: 1987,
       columnNumber: 23
     }
   }, children))))))))));
@@ -2151,7 +2531,8 @@ var Channel = function Channel(props) {
   var _props$thread, _props$thread2;
 
   var _useChatContext = (0, _ChatContext.useChatContext)(),
-      client = _useChatContext.client;
+      client = _useChatContext.client,
+      enableOfflineSupport = _useChatContext.enableOfflineSupport;
 
   var _useTranslationContex = (0, _TranslationContext.useTranslationContext)(),
       t = _useTranslationContex.t;
@@ -2176,6 +2557,7 @@ var Channel = function Channel(props) {
 
   return _react["default"].createElement(ChannelWithContext, (0, _extends2["default"])({
     client: client,
+    enableOfflineSupport: enableOfflineSupport,
     t: t
   }, props, {
     shouldSyncChannel: shouldSyncChannel,
@@ -2196,7 +2578,7 @@ var Channel = function Channel(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1837,
+      lineNumber: 2044,
       columnNumber: 5
     }
   }));