stream-chat-react-native-core 7.0.0-rc.8 → 7.0.0

package/lib/commonjs/components/Channel/Channel.js

@@ -37,6 +37,7 @@ var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 var _ThreadContext = require("../../contexts/threadContext/ThreadContext");
 var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
 var _TypingContext = require("../../contexts/typingContext/TypingContext");
+var _hooks = require("../../hooks");
 var _useAppStateListener = require("../../hooks/useAppStateListener");
 var _icons = require("../../icons");
 var _native = require("../../native");
@@ -60,6 +61,7 @@ var _Gallery = require("../Attachment/Gallery");
 var _Giphy = require("../Attachment/Giphy");
 var _ImageLoadingFailedIndicator = require("../Attachment/ImageLoadingFailedIndicator");
 var _ImageLoadingIndicator = require("../Attachment/ImageLoadingIndicator");
+var _ImageReloadIndicator = require("../Attachment/ImageReloadIndicator");
 var _VideoThumbnail = require("../Attachment/VideoThumbnail");
 var _AutoCompleteSuggestionHeader = require("../AutoCompleteInput/AutoCompleteSuggestionHeader");
 var _AutoCompleteSuggestionItem = require("../AutoCompleteInput/AutoCompleteSuggestionItem");
@@ -169,7 +171,7 @@ var debounceOptions = {
   trailing: true
 };
 var ChannelWithContext = function ChannelWithContext(props) {
-  var _channel$getConfig, _channel$data, _ref19, _channelState$members, _channelState$read, _ref20, _channelMessagesState3, _channelState$typing, _channelMessagesState4;
+  var _channel$getConfig, _channel$data, _ref19, _channelState$members, _channelState$read, _getChannelConfigSafe, _getChannelConfigSafe2, _ref20, _channelMessagesState3, _channelState$typing, _channelMessagesState4;
   var additionalKeyboardAvoidingViewProps = props.additionalKeyboardAvoidingViewProps,
     additionalPressableProps = props.additionalPressableProps,
     additionalTextInputProps = props.additionalTextInputProps,
@@ -286,8 +288,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     handleThreadReply = props.handleThreadReply,
     _props$hasCameraPicke = props.hasCameraPicker,
     hasCameraPicker = _props$hasCameraPicke === void 0 ? (0, _native.isImagePickerAvailable)() : _props$hasCameraPicke,
-    _props$hasCommands = props.hasCommands,
-    hasCommands = _props$hasCommands === void 0 ? true : _props$hasCommands,
+    hasCommands = props.hasCommands,
     hasCreatePoll = props.hasCreatePoll,
     _props$hasFilePicker = props.hasFilePicker,
     hasFilePicker = _props$hasFilePicker === void 0 ? (0, _native.isDocumentPickerAvailable)() : _props$hasFilePicker,
@@ -301,6 +302,8 @@ var ChannelWithContext = function ChannelWithContext(props) {
     ImageLoadingFailedIndicator = _props$ImageLoadingFa === void 0 ? _ImageLoadingFailedIndicator.ImageLoadingFailedIndicator : _props$ImageLoadingFa,
     _props$ImageLoadingIn = props.ImageLoadingIndicator,
     ImageLoadingIndicator = _props$ImageLoadingIn === void 0 ? _ImageLoadingIndicator.ImageLoadingIndicator : _props$ImageLoadingIn,
+    _props$ImageReloadInd = props.ImageReloadIndicator,
+    ImageReloadIndicator = _props$ImageReloadInd === void 0 ? _ImageReloadIndicator.ImageReloadIndicator : _props$ImageReloadInd,
     _props$ImageUploadPre = props.ImageUploadPreview,
     ImageUploadPreview = _props$ImageUploadPre === void 0 ? _ImageUploadPreview.ImageUploadPreview : _props$ImageUploadPre,
     _props$initialScrollT = props.initialScrollToFirstUnreadMessage,
@@ -518,6 +521,9 @@ var ChannelWithContext = function ChannelWithContext(props) {
     setTargetedMessage = _useTargetedMessage.setTargetedMessage,
     targetedMessage = _useTargetedMessage.targetedMessage;
   var uploadAbortControllerRef = (0, _react.useRef)(new Map());
+  var optimisticallyUpdatedNewMessages = (0, _react.useMemo)(function () {
+    return new Set();
+  }, []);
   var channelId = (channel == null ? void 0 : channel.id) || '';
   var pollCreationEnabled = !channel.disconnected && !!(channel != null && channel.id) && (channel == null || (_channel$getConfig = channel.getConfig()) == null ? void 0 : _channel$getConfig.polls);
   var _useChannelDataState = (0, _useChannelDataState2.useChannelDataState)(channel),
@@ -537,23 +543,39 @@ var ChannelWithContext = function ChannelWithContext(props) {
     loadMore = _useMessageListPagina.loadMore,
     loadMoreRecent = _useMessageListPagina.loadMoreRecent,
     channelMessagesState = _useMessageListPagina.state;
-  var copyChannelStateThrottlingTime = newMessageStateUpdateThrottleInterval > stateUpdateThrottleInterval ? newMessageStateUpdateThrottleInterval : stateUpdateThrottleInterval;
+  var setReadThrottled = (0, _react.useMemo)(function () {
+    return (0, _throttle["default"])(function () {
+      if (channel) {
+        setRead(channel);
+      }
+    }, stateUpdateThrottleInterval, throttleOptions);
+  }, [channel, stateUpdateThrottleInterval, setRead]);
+  var copyMessagesStateFromChannelThrottled = (0, _react.useMemo)(function () {
+    return (0, _throttle["default"])(function () {
+      if (channel) {
+        copyMessagesStateFromChannel(channel);
+      }
+    }, newMessageStateUpdateThrottleInterval, throttleOptions);
+  }, [channel, newMessageStateUpdateThrottleInterval, copyMessagesStateFromChannel]);
   var copyChannelState = (0, _react.useMemo)(function () {
     return (0, _throttle["default"])(function () {
       if (channel) {
         copyStateFromChannel(channel);
         copyMessagesStateFromChannel(channel);
       }
-    }, copyChannelStateThrottlingTime, throttleOptions);
-  }, [channel, copyChannelStateThrottlingTime, copyMessagesStateFromChannel, copyStateFromChannel]);
-  var handleEvent = function handleEvent(event) {
+    }, stateUpdateThrottleInterval, throttleOptions);
+  }, [stateUpdateThrottleInterval, channel, copyStateFromChannel, copyMessagesStateFromChannel]);
+  var handleEvent = (0, _hooks.useStableCallback)(function (event) {
     if (shouldSyncChannel) {
       if (event.type.startsWith('poll.') || event.type === 'user.watching.start' || event.type === 'user.watching.stop') {
         return;
       }
-      var isTypingEvent = event.type === 'typing.start' || event.type === 'typing.stop';
-      if (isTypingEvent) {
-        setTyping(channel);
+      if (event.type === 'typing.start' || event.type === 'typing.stop') {
+        var _event$user;
+        if (((_event$user = event.user) == null ? void 0 : _event$user.id) !== client.userID) {
+          setTyping(channel);
+        }
+        return;
       } else {
         if (thread != null && thread.id) {
           var _event$message;
@@ -583,10 +605,23 @@ var ChannelWithContext = function ChannelWithContext(props) {
         setChannelUnreadState(undefined);
       }
       if (channel && channel.initialized) {
+        if (event.type === 'message.new' || event.type === 'notification.message_new') {
+          var _event$message$id, _event$message2, _event$user2;
+          var _messageId = (_event$message$id = (_event$message2 = event.message) == null ? void 0 : _event$message2.id) != null ? _event$message$id : '';
+          if (((_event$user2 = event.user) == null ? void 0 : _event$user2.id) !== client.userID || !optimisticallyUpdatedNewMessages.has(_messageId)) {
+            copyMessagesStateFromChannelThrottled();
+          }
+          optimisticallyUpdatedNewMessages["delete"](_messageId);
+          return;
+        }
+        if (event.type === 'message.read' || event.type === 'notification.mark_read') {
+          setReadThrottled();
+          return;
+        }
         copyChannelState();
       }
     }
-  };
+  });
   (0, _react.useEffect)(function () {
     var listener;
     var initChannel = function () {
@@ -598,7 +633,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
             case 0:
               setLastRead(new Date());
               unreadCount = channel.countUnread();
-              if (!(!channel || !shouldSyncChannel || channel.offlineMode)) {
+              if (!(!channel || !shouldSyncChannel)) {
                 _context.next = 4;
                 break;
               }
@@ -692,16 +727,6 @@ var ChannelWithContext = function ChannelWithContext(props) {
       unsubscribe = _client$on.unsubscribe;
     return unsubscribe;
   }, [channel == null ? void 0 : channel.cid, client]);
-  (0, _react.useEffect)(function () {
-    var handleEvent = function handleEvent(event) {
-      if (channel.cid === event.cid) {
-        setRead(channel);
-      }
-    };
-    var _client$on2 = client.on('notification.mark_read', handleEvent),
-      unsubscribe = _client$on2.unsubscribe;
-    return unsubscribe;
-  }, [channel, client, setRead]);
   var threadPropsExists = !!threadProps;
   (0, _react.useEffect)(function () {
     if (threadProps && shouldSyncChannel) {
@@ -725,7 +750,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     }
   }, [thread == null ? void 0 : thread.id, channelId]);
   (0, _useAppStateListener.useAppStateListener)(undefined, handleAppBackground);
-  var markRead = (0, _throttle["default"])(function () {
+  var markReadInternal = (0, _throttle["default"])(function () {
     var _ref2 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee2(options) {
       var _ref3, _ref3$updateChannelUn, updateChannelUnreadState, response;
       return _regenerator["default"].wrap(function _callee2$(_context2) {
@@ -757,6 +782,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
                 last_read_message_id: response == null ? void 0 : response.event.last_read_message_id,
                 unread_messages: 0
               });
+              setLastRead(new Date());
             }
             _context2.next = 17;
             break;
@@ -774,147 +800,138 @@ var ChannelWithContext = function ChannelWithContext(props) {
       return _ref2.apply(this, arguments);
     };
   }(), defaultThrottleInterval, throttleOptions);
-  var reloadThread = function () {
-    var _ref4 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee3() {
-      var parentID, limit, queryResponse, updatedHasMore, updatedThreadMessages, _yield$channel$getMes, messages, _messages, threadMessage, formattedMessage;
-      return _regenerator["default"].wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
-          case 0:
-            if (!(!channel || !(thread != null && thread.id))) {
-              _context3.next = 2;
-              break;
-            }
-            return _context3.abrupt("return");
-          case 2:
-            setThreadLoadingMore(true);
-            _context3.prev = 3;
-            parentID = thread.id;
-            limit = 50;
-            channel.state.threads[parentID] = [];
-            _context3.next = 9;
-            return channel.getReplies(parentID, {
-              limit: limit
-            });
-          case 9:
-            queryResponse = _context3.sent;
-            updatedHasMore = queryResponse.messages.length === limit;
-            updatedThreadMessages = channel.state.threads[parentID] || [];
-            loadMoreThreadFinished(updatedHasMore, updatedThreadMessages);
-            _context3.next = 15;
-            return channel.getMessagesById([parentID]);
-          case 15:
-            _yield$channel$getMes = _context3.sent;
-            messages = _yield$channel$getMes.messages;
-            _messages = (0, _slicedToArray2["default"])(messages, 1), threadMessage = _messages[0];
-            if (threadMessage && !threadInstance) {
-              formattedMessage = channel.state.formatMessage(threadMessage);
-              setThread(formattedMessage);
-            }
-            _context3.next = 27;
+  var markRead = (0, _hooks.useStableCallback)(markReadInternal);
+  var reloadThread = (0, _hooks.useStableCallback)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee3() {
+    var parentID, limit, queryResponse, updatedHasMore, updatedThreadMessages, _yield$channel$getMes, messages, _messages, threadMessage, formattedMessage;
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          if (!(!channel || !(thread != null && thread.id))) {
+            _context3.next = 2;
             break;
-          case 21:
-            _context3.prev = 21;
-            _context3.t0 = _context3["catch"](3);
-            console.warn('Thread loading request failed with error', _context3.t0);
-            if (_context3.t0 instanceof Error) {
-              setError(_context3.t0);
-            } else {
-              setError(true);
-            }
-            setThreadLoadingMore(false);
-            throw _context3.t0;
-          case 27:
-          case "end":
-            return _context3.stop();
-        }
-      }, _callee3, null, [[3, 21]]);
-    }));
-    return function reloadThread() {
-      return _ref4.apply(this, arguments);
-    };
-  }();
-  var resyncChannel = function () {
-    var _ref5 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee4() {
-      var parseMessage, _channelMessagesState, failedMessages, failedThreadMessages;
-      return _regenerator["default"].wrap(function _callee4$(_context4) {
-        while (1) switch (_context4.prev = _context4.next) {
-          case 0:
-            if (!(!channel || syncingChannelRef.current)) {
-              _context4.next = 2;
-              break;
-            }
-            return _context4.abrupt("return");
-          case 2:
-            syncingChannelRef.current = true;
-            setError(false);
-            if (!(channelMessagesState != null && channelMessagesState.messages)) {
-              _context4.next = 7;
-              break;
-            }
+          }
+          return _context3.abrupt("return");
+        case 2:
+          setThreadLoadingMore(true);
+          _context3.prev = 3;
+          parentID = thread.id;
+          limit = 50;
+          channel.state.threads[parentID] = [];
+          _context3.next = 9;
+          return channel.getReplies(parentID, {
+            limit: limit
+          });
+        case 9:
+          queryResponse = _context3.sent;
+          updatedHasMore = queryResponse.messages.length === limit;
+          updatedThreadMessages = channel.state.threads[parentID] || [];
+          loadMoreThreadFinished(updatedHasMore, updatedThreadMessages);
+          _context3.next = 15;
+          return channel.getMessagesById([parentID]);
+        case 15:
+          _yield$channel$getMes = _context3.sent;
+          messages = _yield$channel$getMes.messages;
+          _messages = (0, _slicedToArray2["default"])(messages, 1), threadMessage = _messages[0];
+          if (threadMessage && !threadInstance) {
+            formattedMessage = channel.state.formatMessage(threadMessage);
+            setThread(formattedMessage);
+          }
+          _context3.next = 27;
+          break;
+        case 21:
+          _context3.prev = 21;
+          _context3.t0 = _context3["catch"](3);
+          console.warn('Thread loading request failed with error', _context3.t0);
+          if (_context3.t0 instanceof Error) {
+            setError(_context3.t0);
+          } else {
+            setError(true);
+          }
+          setThreadLoadingMore(false);
+          throw _context3.t0;
+        case 27:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3, null, [[3, 21]]);
+  })));
+  var resyncChannel = (0, _hooks.useStableCallback)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee4() {
+    var parseMessage, _channelMessagesState, failedMessages, failedThreadMessages;
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          if (!(!channel || syncingChannelRef.current)) {
+            _context4.next = 2;
+            break;
+          }
+          return _context4.abrupt("return");
+        case 2:
+          syncingChannelRef.current = true;
+          setError(false);
+          if (!(channelMessagesState != null && channelMessagesState.messages)) {
             _context4.next = 7;
-            return channel == null ? void 0 : channel.watch({
-              messages: {
-                limit: channelMessagesState.messages.length + 30
-              }
-            });
-          case 7:
-            parseMessage = function parseMessage(message) {
-              var _message$pinned_at, _message$updated_at;
-              return Object.assign({}, message, {
-                created_at: message.created_at.toString(),
-                pinned_at: (_message$pinned_at = message.pinned_at) == null ? void 0 : _message$pinned_at.toString(),
-                updated_at: (_message$updated_at = message.updated_at) == null ? void 0 : _message$updated_at.toString()
-              });
-            };
-            _context4.prev = 8;
-            if (thread) {
-              _context4.next = 16;
-              break;
-            }
-            copyChannelState();
-            failedMessages = (_channelMessagesState = channelMessagesState.messages) == null ? void 0 : _channelMessagesState.filter(function (message) {
-              return message.status === _utils.MessageStatusTypes.FAILED;
-            }).map(parseMessage);
-            if (failedMessages != null && failedMessages.length) {
-              channel.state.addMessagesSorted(failedMessages);
-            }
-            channel.state.setIsUpToDate(true);
-            _context4.next = 20;
             break;
-          case 16:
-            _context4.next = 18;
-            return reloadThread();
-          case 18:
-            failedThreadMessages = thread ? threadMessages.filter(function (message) {
-              return message.status === _utils.MessageStatusTypes.FAILED;
-            }).map(parseMessage) : [];
-            if (failedThreadMessages.length) {
-              channel.state.addMessagesSorted(failedThreadMessages);
-              setThreadMessages((0, _toConsumableArray2["default"])(channel.state.threads[thread.id]));
+          }
+          _context4.next = 7;
+          return channel == null ? void 0 : channel.watch({
+            messages: {
+              limit: channelMessagesState.messages.length + 30
             }
-          case 20:
-            _context4.next = 25;
+          });
+        case 7:
+          parseMessage = function parseMessage(message) {
+            var _message$pinned_at, _message$updated_at;
+            return Object.assign({}, message, {
+              created_at: message.created_at.toString(),
+              pinned_at: (_message$pinned_at = message.pinned_at) == null ? void 0 : _message$pinned_at.toString(),
+              updated_at: (_message$updated_at = message.updated_at) == null ? void 0 : _message$updated_at.toString()
+            });
+          };
+          _context4.prev = 8;
+          if (thread) {
+            _context4.next = 16;
             break;
-          case 22:
-            _context4.prev = 22;
-            _context4.t0 = _context4["catch"](8);
-            if (_context4.t0 instanceof Error) {
-              setError(_context4.t0);
-            } else {
-              setError(true);
-            }
-          case 25:
-            syncingChannelRef.current = false;
-          case 26:
-          case "end":
-            return _context4.stop();
-        }
-      }, _callee4, null, [[8, 22]]);
-    }));
-    return function resyncChannel() {
-      return _ref5.apply(this, arguments);
-    };
-  }();
+          }
+          copyChannelState();
+          failedMessages = (_channelMessagesState = channelMessagesState.messages) == null ? void 0 : _channelMessagesState.filter(function (message) {
+            return message.status === _utils.MessageStatusTypes.FAILED;
+          }).map(parseMessage);
+          if (failedMessages != null && failedMessages.length) {
+            channel.state.addMessagesSorted(failedMessages);
+          }
+          channel.state.setIsUpToDate(true);
+          _context4.next = 20;
+          break;
+        case 16:
+          _context4.next = 18;
+          return reloadThread();
+        case 18:
+          failedThreadMessages = thread ? threadMessages.filter(function (message) {
+            return message.status === _utils.MessageStatusTypes.FAILED;
+          }).map(parseMessage) : [];
+          if (failedThreadMessages.length) {
+            channel.state.addMessagesSorted(failedThreadMessages);
+            setThreadMessages((0, _toConsumableArray2["default"])(channel.state.threads[thread.id]));
+          }
+        case 20:
+          _context4.next = 25;
+          break;
+        case 22:
+          _context4.prev = 22;
+          _context4.t0 = _context4["catch"](8);
+          if (_context4.t0 instanceof Error) {
+            setError(_context4.t0);
+          } else {
+            setError(true);
+          }
+        case 25:
+          syncingChannelRef.current = false;
+        case 26:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4, null, [[8, 22]]);
+  })));
   var resyncChannelRef = (0, _react.useRef)(resyncChannel);
   resyncChannelRef.current = resyncChannel;
   (0, _react.useEffect)(function () {
@@ -949,32 +966,27 @@ var ChannelWithContext = function ChannelWithContext(props) {
     }
   };
   var clientChannelConfig = getChannelConfigSafely();
-  var reloadChannel = function () {
-    var _ref6 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee5() {
-      return _regenerator["default"].wrap(function _callee5$(_context5) {
-        while (1) switch (_context5.prev = _context5.next) {
-          case 0:
-            _context5.prev = 0;
-            _context5.next = 3;
-            return loadLatestMessages();
-          case 3:
-            _context5.next = 8;
-            break;
-          case 5:
-            _context5.prev = 5;
-            _context5.t0 = _context5["catch"](0);
-            console.warn('Reloading channel failed with error:', _context5.t0);
-          case 8:
-          case "end":
-            return _context5.stop();
-        }
-      }, _callee5, null, [[0, 5]]);
-    }));
-    return function reloadChannel() {
-      return _ref6.apply(this, arguments);
-    };
-  }();
-  var loadChannelAroundMessage = function () {
+  var reloadChannel = (0, _hooks.useStableCallback)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee5() {
+    return _regenerator["default"].wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          _context5.prev = 0;
+          _context5.next = 3;
+          return loadLatestMessages();
+        case 3:
+          _context5.next = 8;
+          break;
+        case 5:
+          _context5.prev = 5;
+          _context5.t0 = _context5["catch"](0);
+          console.warn('Reloading channel failed with error:', _context5.t0);
+        case 8:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5, null, [[0, 5]]);
+  })));
+  var loadChannelAroundMessage = (0, _hooks.useStableCallback)(function () {
     var _ref8 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee6(_ref7) {
       var messageIdToLoadAround;
       return _regenerator["default"].wrap(function _callee6$(_context6) {
@@ -1035,23 +1047,28 @@ var ChannelWithContext = function ChannelWithContext(props) {
         }
       }, _callee6, null, [[3, 24], [6, 14]]);
     }));
-    return function loadChannelAroundMessage(_x2) {
+    return function (_x2) {
       return _ref8.apply(this, arguments);
     };
-  }();
-  var updateMessage = function updateMessage(updatedMessage) {
+  }());
+  var updateMessage = (0, _hooks.useStableCallback)(function (updatedMessage) {
     var extraState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var throttled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     if (!channel) {
       return;
     }
     channel.state.addMessageSorted(updatedMessage, true);
-    copyMessagesStateFromChannel(channel);
+    if (throttled) {
+      copyMessagesStateFromChannelThrottled();
+    } else {
+      copyMessagesStateFromChannel(channel);
+    }
     if (thread && updatedMessage.parent_id) {
       extraState.threadMessages = channel.state.threads[updatedMessage.parent_id] || [];
       setThreadMessages(extraState.threadMessages);
     }
-  };
-  var replaceMessage = function replaceMessage(oldMessage, newMessage) {
+  });
+  var replaceMessage = (0, _hooks.useStableCallback)(function (oldMessage, newMessage) {
     if (channel) {
       channel.state.removeMessage(oldMessage);
       channel.state.addMessageSorted(newMessage, true);
@@ -1061,8 +1078,8 @@ var ChannelWithContext = function ChannelWithContext(props) {
         setThreadMessages(_threadMessages);
       }
     }
-  };
-  var createMessagePreview = function createMessagePreview(_ref9) {
+  });
+  var createMessagePreview = (0, _hooks.useStableCallback)(function (_ref9) {
     var attachments = _ref9.attachments,
       mentioned_users = _ref9.mentioned_users,
       parent_id = _ref9.parent_id,
@@ -1103,8 +1120,8 @@ var ChannelWithContext = function ChannelWithContext(props) {
       preview.quoted_message = _quotedMessage;
     }
     return preview;
-  };
-  var uploadPendingAttachments = function () {
+  });
+  var uploadPendingAttachments = (0, _hooks.useStableCallback)(function () {
     var _ref10 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee7(message) {
       var _updatedMessage$attac;
       var updatedMessage, i, _updatedMessage$attac2, attachment, image, file, _image$name, filename, controller, compressedUri, contentType, uploadResponse, _controller, response;
@@ -1187,7 +1204,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
             break;
           case 38:
             _context7.next = 40;
-            return channel.sendFile(file.uri, file.name, file.mimeType);
+            return channel.sendFile(file.uri, file.name, file.type);
           case 40:
             _context7.t1 = _context7.sent;
           case 41:
@@ -1215,11 +1232,11 @@ var ChannelWithContext = function ChannelWithContext(props) {
         }
       }, _callee7);
     }));
-    return function uploadPendingAttachments(_x3) {
+    return function (_x3) {
       return _ref10.apply(this, arguments);
     };
-  }();
-  var sendMessageRequest = function () {
+  }());
+  var sendMessageRequest = (0, _hooks.useStableCallback)(function () {
     var _ref11 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee8(message, retrying) {
       var updatedMessage, extraFields, attachments, id, mentioned_users, parent_id, text, mentionedUserIds, messageData, messageResponse, _updatedMessage;
       return _regenerator["default"].wrap(function _callee8$(_context8) {
@@ -1270,7 +1287,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
             messageResponse = _context8.sent;
           case 21:
             if (!messageResponse.message) {
-              _context8.next = 28;
+              _context8.next = 27;
               break;
             }
             messageResponse.message.status = _utils.MessageStatusTypes.RECEIVED;
@@ -1288,16 +1305,13 @@ var ChannelWithContext = function ChannelWithContext(props) {
             if (retrying) {
               replaceMessage(message, messageResponse.message);
             } else {
-              updateMessage(messageResponse.message);
+              updateMessage(messageResponse.message, {}, true);
             }
-            threadInstance == null || threadInstance.upsertReplyLocally == null || threadInstance.upsertReplyLocally({
-              message: messageResponse.message
-            });
-          case 28:
+          case 27:
             _context8.next = 40;
             break;
-          case 30:
-            _context8.prev = 30;
+          case 29:
+            _context8.prev = 29;
             _context8.t0 = _context8["catch"](0);
             console.log(_context8.t0);
             message.status = _utils.MessageStatusTypes.FAILED;
@@ -1308,6 +1322,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
             threadInstance == null || threadInstance.upsertReplyLocally == null || threadInstance.upsertReplyLocally({
               message: _updatedMessage
             });
+            optimisticallyUpdatedNewMessages["delete"](message.id);
             if (!enableOfflineSupport) {
               _context8.next = 40;
               break;
@@ -1322,13 +1337,13 @@ var ChannelWithContext = function ChannelWithContext(props) {
           case "end":
             return _context8.stop();
         }
-      }, _callee8, null, [[0, 30]]);
+      }, _callee8, null, [[0, 29]]);
     }));
-    return function sendMessageRequest(_x4, _x5) {
+    return function (_x4, _x5) {
       return _ref11.apply(this, arguments);
     };
-  }();
-  var sendMessage = function () {
+  }());
+  var sendMessage = (0, _hooks.useStableCallback)(function () {
     var _ref12 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee9(message) {
       var _channel$state;
       var messagePreview;
@@ -1348,31 +1363,32 @@ var ChannelWithContext = function ChannelWithContext(props) {
             threadInstance == null || threadInstance.upsertReplyLocally == null || threadInstance.upsertReplyLocally({
               message: messagePreview
             });
+            optimisticallyUpdatedNewMessages.add(messagePreview.id);
             if (!enableOfflineSupport) {
-              _context9.next = 7;
+              _context9.next = 8;
               break;
             }
-            _context9.next = 7;
+            _context9.next = 8;
             return dbApi.upsertMessages({
               messages: [Object.assign({}, messagePreview, {
                 cid: channel.cid,
                 status: _utils.MessageStatusTypes.FAILED
               })]
             });
-          case 7:
-            _context9.next = 9;
+          case 8:
+            _context9.next = 10;
             return sendMessageRequest(messagePreview);
-          case 9:
+          case 10:
           case "end":
             return _context9.stop();
         }
       }, _callee9);
     }));
-    return function sendMessage(_x6) {
+    return function (_x6) {
       return _ref12.apply(this, arguments);
     };
-  }();
-  var retrySendMessage = function () {
+  }());
+  var retrySendMessage = (0, _hooks.useStableCallback)(function () {
     var _ref13 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee10(message) {
       var statusPendingMessage, messageWithoutReservedFields;
       return _regenerator["default"].wrap(function _callee10$(_context10) {
@@ -1393,27 +1409,27 @@ var ChannelWithContext = function ChannelWithContext(props) {
         }
       }, _callee10);
     }));
-    return function retrySendMessage(_x7) {
+    return function (_x7) {
       return _ref13.apply(this, arguments);
     };
-  }();
-  var editMessage = function editMessage(updatedMessage) {
+  }());
+  var editMessage = (0, _hooks.useStableCallback)(function (updatedMessage) {
     return doUpdateMessageRequest ? doUpdateMessageRequest((channel == null ? void 0 : channel.cid) || '', updatedMessage) : client.updateMessage(updatedMessage);
-  };
-  var setEditingState = function setEditingState(message) {
+  });
+  var setEditingState = (0, _hooks.useStableCallback)(function (message) {
     clearQuotedMessageState();
     setEditing(message);
-  };
-  var setQuotedMessageState = function setQuotedMessageState(messageOrBoolean) {
+  });
+  var setQuotedMessageState = (0, _hooks.useStableCallback)(function (messageOrBoolean) {
     setQuotedMessage(messageOrBoolean);
-  };
-  var clearEditingState = function clearEditingState() {
+  });
+  var clearEditingState = (0, _hooks.useStableCallback)(function () {
     return setEditing(undefined);
-  };
-  var clearQuotedMessageState = function clearQuotedMessageState() {
+  });
+  var clearQuotedMessageState = (0, _hooks.useStableCallback)(function () {
     return setQuotedMessage(undefined);
-  };
-  var removeMessage = function () {
+  });
+  var removeMessage = (0, _hooks.useStableCallback)(function () {
     var _ref14 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee11(message) {
       return _regenerator["default"].wrap(function _callee11$(_context11) {
         while (1) switch (_context11.prev = _context11.next) {
@@ -1439,11 +1455,11 @@ var ChannelWithContext = function ChannelWithContext(props) {
         }
       }, _callee11);
     }));
-    return function removeMessage(_x8) {
+    return function (_x8) {
       return _ref14.apply(this, arguments);
     };
-  }();
-  var sendReaction = function () {
+  }());
+  var sendReaction = (0, _hooks.useStableCallback)(function () {
     var _ref15 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee12(type, messageId) {
       var payload, sendReactionResponse;
       return _regenerator["default"].wrap(function _callee12$(_context12) {
@@ -1501,11 +1517,11 @@ var ChannelWithContext = function ChannelWithContext(props) {
         }
       }, _callee12);
     }));
-    return function sendReaction(_x9, _x10) {
+    return function (_x9, _x10) {
       return _ref15.apply(this, arguments);
     };
-  }();
-  var deleteMessage = function () {
+  }());
+  var deleteMessage = (0, _hooks.useStableCallback)(function () {
     var _ref16 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee13(message) {
       var updatedMessage, data;
       return _regenerator["default"].wrap(function _callee13$(_context13) {
@@ -1552,7 +1568,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
           case 17:
             updatedMessage = Object.assign({}, message, {
               cid: channel.cid,
-              deleted_at: new Date().toISOString(),
+              deleted_at: new Date(),
               type: 'deleted'
             });
             updateMessage(updatedMessage);
@@ -1581,11 +1597,11 @@ var ChannelWithContext = function ChannelWithContext(props) {
         }
       }, _callee13);
     }));
-    return function deleteMessage(_x11) {
+    return function (_x11) {
       return _ref16.apply(this, arguments);
     };
-  }();
-  var deleteReaction = function () {
+  }());
+  var deleteReaction = (0, _hooks.useStableCallback)(function () {
     var _ref17 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee14(type, messageId) {
       var payload;
       return _regenerator["default"].wrap(function _callee14$(_context14) {
@@ -1631,10 +1647,10 @@ var ChannelWithContext = function ChannelWithContext(props) {
         }
       }, _callee14);
     }));
-    return function deleteReaction(_x12, _x13) {
+    return function (_x12, _x13) {
       return _ref17.apply(this, arguments);
     };
-  }();
+  }());
   var openThread = (0, _react.useCallback)(function (message) {
     setThread(message);
     if (channel.initialized) {
@@ -1652,62 +1668,57 @@ var ChannelWithContext = function ChannelWithContext(props) {
     setThreadLoadingMore(false);
     setThreadMessages(updatedThreadMessages);
   }, defaultDebounceInterval, debounceOptions)).current;
-  var loadMoreThread = function () {
-    var _ref18 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee15() {
-      var _threadMessages$, parentID, oldestMessageID, limit, queryResponse, updatedHasMore, updatedThreadMessages;
-      return _regenerator["default"].wrap(function _callee15$(_context15) {
-        while (1) switch (_context15.prev = _context15.next) {
-          case 0:
-            if (!(threadLoadingMore || !(thread != null && thread.id))) {
-              _context15.next = 2;
-              break;
-            }
-            return _context15.abrupt("return");
-          case 2:
-            setThreadLoadingMore(true);
-            _context15.prev = 3;
-            if (!channel) {
-              _context15.next = 15;
-              break;
-            }
-            parentID = thread.id;
-            channel.state.threads[parentID] = threadMessages;
-            oldestMessageID = threadMessages == null || (_threadMessages$ = threadMessages[0]) == null ? void 0 : _threadMessages$.id;
-            limit = 50;
-            _context15.next = 11;
-            return channel.getReplies(parentID, {
-              id_lt: oldestMessageID,
-              limit: limit
-            });
-          case 11:
-            queryResponse = _context15.sent;
-            updatedHasMore = queryResponse.messages.length === limit;
-            updatedThreadMessages = channel.state.threads[parentID] || [];
-            loadMoreThreadFinished(updatedHasMore, updatedThreadMessages);
-          case 15:
-            _context15.next = 23;
+  var loadMoreThread = (0, _hooks.useStableCallback)((0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee15() {
+    var _threadMessages$, parentID, oldestMessageID, limit, queryResponse, updatedHasMore, updatedThreadMessages;
+    return _regenerator["default"].wrap(function _callee15$(_context15) {
+      while (1) switch (_context15.prev = _context15.next) {
+        case 0:
+          if (!(threadLoadingMore || !(thread != null && thread.id))) {
+            _context15.next = 2;
             break;
-          case 17:
-            _context15.prev = 17;
-            _context15.t0 = _context15["catch"](3);
-            console.warn('Message pagination request failed with error', _context15.t0);
-            if (_context15.t0 instanceof Error) {
-              setError(_context15.t0);
-            } else {
-              setError(true);
-            }
-            setThreadLoadingMore(false);
-            throw _context15.t0;
-          case 23:
-          case "end":
-            return _context15.stop();
-        }
-      }, _callee15, null, [[3, 17]]);
-    }));
-    return function loadMoreThread() {
-      return _ref18.apply(this, arguments);
-    };
-  }();
+          }
+          return _context15.abrupt("return");
+        case 2:
+          setThreadLoadingMore(true);
+          _context15.prev = 3;
+          if (!channel) {
+            _context15.next = 15;
+            break;
+          }
+          parentID = thread.id;
+          channel.state.threads[parentID] = threadMessages;
+          oldestMessageID = threadMessages == null || (_threadMessages$ = threadMessages[0]) == null ? void 0 : _threadMessages$.id;
+          limit = 50;
+          _context15.next = 11;
+          return channel.getReplies(parentID, {
+            id_lt: oldestMessageID,
+            limit: limit
+          });
+        case 11:
+          queryResponse = _context15.sent;
+          updatedHasMore = queryResponse.messages.length === limit;
+          updatedThreadMessages = channel.state.threads[parentID] || [];
+          loadMoreThreadFinished(updatedHasMore, updatedThreadMessages);
+        case 15:
+          _context15.next = 23;
+          break;
+        case 17:
+          _context15.prev = 17;
+          _context15.t0 = _context15["catch"](3);
+          console.warn('Message pagination request failed with error', _context15.t0);
+          if (_context15.t0 instanceof Error) {
+            setError(_context15.t0);
+          } else {
+            setError(true);
+          }
+          setThreadLoadingMore(false);
+          throw _context15.t0;
+        case 23:
+        case "end":
+          return _context15.stop();
+      }
+    }, _callee15, null, [[3, 17]]);
+  })));
   var ownCapabilitiesContext = (0, _useCreateOwnCapabilitiesContext.useCreateOwnCapabilitiesContext)({
     channel: channel,
     overrideCapabilities: overrideOwnCapabilities
@@ -1749,8 +1760,6 @@ var ChannelWithContext = function ChannelWithContext(props) {
     watcherCount: channelState.watcherCount,
     watchers: channelState.watchers
   });
-  var sendMessageRef = (0, _react.useRef)(sendMessage);
-  sendMessageRef.current = sendMessage;
   var inputMessageInputContext = (0, _useCreateInputMessageInputContext.useCreateInputMessageInputContext)({
     additionalTextInputProps: additionalTextInputProps,
     asyncMessagesLockDistance: asyncMessagesLockDistance,
@@ -1782,7 +1791,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     FileUploadPreview: FileUploadPreview,
     handleAttachButtonPress: handleAttachButtonPress,
     hasCameraPicker: hasCameraPicker,
-    hasCommands: hasCommands,
+    hasCommands: hasCommands != null ? hasCommands : ((_getChannelConfigSafe = (_getChannelConfigSafe2 = getChannelConfigSafely()) == null ? void 0 : _getChannelConfigSafe2.commands) != null ? _getChannelConfigSafe : []).length > 0,
     hasFilePicker: hasFilePicker,
     hasImagePicker: hasImagePicker,
     ImageUploadPreview: ImageUploadPreview,
@@ -1803,9 +1812,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     quotedMessage: quotedMessage,
     SendButton: SendButton,
     sendImageAsync: sendImageAsync,
-    sendMessage: function sendMessage() {
-      return sendMessageRef.current.apply(sendMessageRef, arguments);
-    },
+    sendMessage: sendMessage,
     SendMessageDisallowedIndicator: SendMessageDisallowedIndicator,
     setInputRef: setInputRef,
     setQuotedMessageState: setQuotedMessageState,
@@ -1867,6 +1874,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     hasCreatePoll: hasCreatePoll === undefined ? pollCreationEnabled : hasCreatePoll && pollCreationEnabled,
     ImageLoadingFailedIndicator: ImageLoadingFailedIndicator,
     ImageLoadingIndicator: ImageLoadingIndicator,
+    ImageReloadIndicator: ImageReloadIndicator,
     initialScrollToFirstUnreadMessage: !messageId && initialScrollToFirstUnreadMessage,
     InlineDateSeparator: InlineDateSeparator,
     InlineUnreadIndicator: InlineUnreadIndicator,
@@ -1931,11 +1939,13 @@ var ChannelWithContext = function ChannelWithContext(props) {
     UrlPreview: UrlPreview,
     VideoThumbnail: VideoThumbnail
   });
-  var suggestionsContext = {
-    AutoCompleteSuggestionHeader: AutoCompleteSuggestionHeader,
-    AutoCompleteSuggestionItem: AutoCompleteSuggestionItem,
-    AutoCompleteSuggestionList: AutoCompleteSuggestionList
-  };
+  var suggestionsContext = (0, _react.useMemo)(function () {
+    return {
+      AutoCompleteSuggestionHeader: AutoCompleteSuggestionHeader,
+      AutoCompleteSuggestionItem: AutoCompleteSuggestionItem,
+      AutoCompleteSuggestionList: AutoCompleteSuggestionList
+    };
+  }, [AutoCompleteSuggestionHeader, AutoCompleteSuggestionItem, AutoCompleteSuggestionList]);
   var threadContext = (0, _useCreateThreadContext.useCreateThreadContext)({
     allowThreadMessagesInChannel: allowThreadMessagesInChannel,
     closeThread: closeThread,