stream-chat-react-native-core 4.12.0-beta.4 → 4.12.1-beta.1

package/lib/module/components/Attachment/FileAttachmentGroup.js

@@ -19,8 +19,6 @@ var _Attachment = require("./Attachment");
 
 var _MessageContext = require("../../contexts/messageContext/MessageContext");
 
-var _MessageInputContext = require("../../contexts/messageInputContext/MessageInputContext");
-
 var _MessagesContext = require("../../contexts/messagesContext/MessagesContext");
 
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
@@ -34,9 +32,20 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+var FILE_PREVIEW_HEIGHT = 60;
+
 var styles = _reactNative.StyleSheet.create({
   container: {
     padding: 4
+  },
+  fileContainer: {
+    borderRadius: 12,
+    borderWidth: 1,
+    flexDirection: 'row',
+    height: FILE_PREVIEW_HEIGHT,
+    justifyContent: 'space-between',
+    paddingLeft: 8,
+    paddingRight: 8
   }
 });
 
@@ -104,14 +113,18 @@ var FileAttachmentGroupWithContext = function FileAttachmentGroupWithContext(pro
   };
 
   var _useTheme = (0, _ThemeContext.useTheme)(),
-      container = _useTheme.theme.messageSimple.fileAttachmentGroup.container;
+      _useTheme$theme = _useTheme.theme,
+      _useTheme$theme$color = _useTheme$theme.colors,
+      grey_whisper = _useTheme$theme$color.grey_whisper,
+      white = _useTheme$theme$color.white,
+      container = _useTheme$theme.messageSimple.fileAttachmentGroup.container;
 
   return _react["default"].createElement(_reactNative.View, {
     style: [styles.container, container, stylesProp.container],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 123,
+      lineNumber: 131,
       columnNumber: 5
     }
   }, filesToDisplay.map(function (file, index) {
@@ -123,19 +136,25 @@ var FileAttachmentGroupWithContext = function FileAttachmentGroupWithContext(pro
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 125,
+        lineNumber: 133,
         columnNumber: 9
       }
     }, file.type === 'audio' && (0, _native.isAudioPackageAvailable)() ? _react["default"].createElement(_reactNative.View, {
       accessibilityLabel: "audio-attachment-preview",
+      style: [styles.fileContainer, index === filesToDisplay.length - 1 ? {
+        marginBottom: 0
+      } : {}, {
+        backgroundColor: white,
+        borderColor: grey_whisper,
+        width: -16
+      }],
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 133,
+        lineNumber: 141,
         columnNumber: 13
       }
     }, _react["default"].createElement(AudioAttachment, {
-      index: index,
       item: {
         duration: file.duration,
         file: {
@@ -153,7 +172,7 @@ var FileAttachmentGroupWithContext = function FileAttachmentGroupWithContext(pro
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 134,
+        lineNumber: 157,
         columnNumber: 15
       }
     })) : _react["default"].createElement(Attachment, {
@@ -161,7 +180,7 @@ var FileAttachmentGroupWithContext = function FileAttachmentGroupWithContext(pro
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 150,
+        lineNumber: 172,
         columnNumber: 13
       }
     }));
@@ -185,10 +204,8 @@ var FileAttachmentGroup = function FileAttachmentGroup(props) {
 
   var _useMessagesContext = (0, _MessagesContext.useMessagesContext)(),
       _useMessagesContext$A = _useMessagesContext.Attachment,
-      Attachment = _useMessagesContext$A === void 0 ? _Attachment.Attachment : _useMessagesContext$A;
-
-  var _useMessageInputConte = (0, _MessageInputContext.useMessageInputContext)(),
-      AudioAttachment = _useMessageInputConte.AudioAttachment;
+      Attachment = _useMessagesContext$A === void 0 ? _Attachment.Attachment : _useMessagesContext$A,
+      AudioAttachment = _useMessagesContext.AudioAttachment;
 
   var files = propFiles || contextFiles;
   if (!files.length) return null;
@@ -200,7 +217,7 @@ var FileAttachmentGroup = function FileAttachmentGroup(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 196,
+      lineNumber: 217,
       columnNumber: 5
     }
   });

package/lib/module/components/Attachment/FileAttachmentGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["FileAttachmentGroup.tsx"],"names":["styles","StyleSheet","create","container","padding","FileAttachmentGroupWithContext","props","Attachment","AudioAttachment","files","messageId","stylesProp","filesToDisplay","setFilesToDisplay","map","file","duration","paused","progress","onLoad","index","prevFilesToDisplay","fileToDisplay","id","toString","onProgress","currentTime","hasEnd","prevFileUploads","fileUpload","onPlayPause","pausedStatus","theme","messageSimple","fileAttachmentGroup","paddingBottom","length","attachmentContainer","type","name","title","uri","asset_url","areEqual","prevProps","nextProps","prevFiles","nextFiles","MemoizedFileAttachmentGroup","React","memo","FileAttachmentGroup","propFiles","contextFiles","AttachmentDefault","displayName"],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport type { Attachment } from 'stream-chat';\n\nimport { Attachment as AttachmentDefault } from './Attachment';\n\nimport {\n  MessageContextValue,\n  useMessageContext,\n} from '../../contexts/messageContext/MessageContext';\nimport {\n  MessageInputContextValue,\n  useMessageInputContext,\n} from '../../contexts/messageInputContext/MessageInputContext';\nimport {\n  MessagesContextValue,\n  useMessagesContext,\n} from '../../contexts/messagesContext/MessagesContext';\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport { isAudioPackageAvailable } from '../../native';\n\nimport type { DefaultStreamChatGenerics } from '../../types/types';\n\nconst styles = StyleSheet.create({\n  container: {\n    padding: 4,\n  },\n});\n\nexport type FileAttachmentGroupPropsWithContext<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<MessageContextValue<StreamChatGenerics>, 'files'> &\n  Pick<MessageInputContextValue<StreamChatGenerics>, 'AudioAttachment'> &\n  Pick<MessagesContextValue<StreamChatGenerics>, 'Attachment'> & {\n    /**\n     * The unique id for the message with file attachments\n     */\n    messageId: string;\n    styles?: Partial<{\n      attachmentContainer: StyleProp<ViewStyle>;\n      container: StyleProp<ViewStyle>;\n    }>;\n  };\n\ntype FilesToDisplayType<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Attachment<StreamChatGenerics> & {\n  duration: number;\n  paused: boolean;\n  progress: number;\n};\n\nconst FileAttachmentGroupWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: FileAttachmentGroupPropsWithContext<StreamChatGenerics>,\n) => {\n  const { Attachment, AudioAttachment, files, messageId, styles: stylesProp = {} } = props;\n  const [filesToDisplay, setFilesToDisplay] = useState<FilesToDisplayType[]>([]);\n\n  useEffect(() => {\n    setFilesToDisplay(files.map((file) => ({ ...file, duration: 0, paused: true, progress: 0 })));\n  }, [files]);\n\n  // Handler triggered when an audio is loaded in the message input. The initial state is defined for the audio here and the duration is set.\n  const onLoad = (index: string, duration: number) => {\n    setFilesToDisplay((prevFilesToDisplay) =>\n      prevFilesToDisplay.map((fileToDisplay, id) => ({\n        ...fileToDisplay,\n        duration: id.toString() === index ? duration : fileToDisplay.duration,\n      })),\n    );\n  };\n\n  // The handler which is triggered when the audio progresses/ the thumb is dragged in the progress control. The progressed duration is set here.\n  const onProgress = (index: string, currentTime?: number, hasEnd?: boolean) => {\n    setFilesToDisplay((prevFileUploads) =>\n      prevFileUploads.map((fileUpload, id) => ({\n        ...fileUpload,\n        progress:\n          id.toString() === index\n            ? hasEnd\n              ? 1\n              : currentTime\n              ? currentTime / (fileUpload.duration as number)\n              : 0\n            : fileUpload.progress,\n      })),\n    );\n  };\n\n  // The handler which controls or sets the paused/played state of the audio.\n  const onPlayPause = (index: string, pausedStatus?: boolean) => {\n    if (pausedStatus === false) {\n      // If the status is false we set the audio with the index as playing and the others as paused.\n      setFilesToDisplay((prevFileUploads) =>\n        prevFileUploads.map((fileUpload, id) => ({\n          ...fileUpload,\n          paused: id.toString() === index ? false : true,\n        })),\n      );\n    } else {\n      // If the status is true we simply set all the audio's paused state as true.\n      setFilesToDisplay((prevFileUploads) =>\n        prevFileUploads.map((fileUpload) => ({\n          ...fileUpload,\n          paused: true,\n        })),\n      );\n    }\n  };\n\n  const {\n    theme: {\n      messageSimple: {\n        fileAttachmentGroup: { container },\n      },\n    },\n  } = useTheme();\n\n  return (\n    <View style={[styles.container, container, stylesProp.container]}>\n      {filesToDisplay.map((file, index) => (\n        <View\n          key={`${messageId}-${index}`}\n          style={[\n            { paddingBottom: index !== files.length - 1 ? 4 : 0 },\n            stylesProp.attachmentContainer,\n          ]}\n        >\n          {file.type === 'audio' && isAudioPackageAvailable() ? (\n            <View accessibilityLabel='audio-attachment-preview'>\n              <AudioAttachment\n                index={index}\n                item={{\n                  duration: file.duration,\n                  file: { name: file.title as string, uri: file.asset_url },\n                  id: index.toString(),\n                  paused: file.paused,\n                  progress: file.progress,\n                }}\n                onLoad={onLoad}\n                onPlayPause={onPlayPause}\n                onProgress={onProgress}\n                testID='audio-attachment-preview'\n              />\n            </View>\n          ) : (\n            <Attachment attachment={file} />\n          )}\n        </View>\n      ))}\n    </View>\n  );\n};\n\nconst areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(\n  prevProps: FileAttachmentGroupPropsWithContext<StreamChatGenerics>,\n  nextProps: FileAttachmentGroupPropsWithContext<StreamChatGenerics>,\n) => {\n  const { files: prevFiles } = prevProps;\n  const { files: nextFiles } = nextProps;\n\n  return prevFiles.length === nextFiles.length;\n};\n\nconst MemoizedFileAttachmentGroup = React.memo(\n  FileAttachmentGroupWithContext,\n  areEqual,\n) as typeof FileAttachmentGroupWithContext;\n\nexport type FileAttachmentGroupProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Partial<Omit<FileAttachmentGroupPropsWithContext<StreamChatGenerics>, 'messageId'>> &\n  Pick<FileAttachmentGroupPropsWithContext<StreamChatGenerics>, 'messageId'>;\n\nexport const FileAttachmentGroup = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: FileAttachmentGroupProps<StreamChatGenerics>,\n) => {\n  const { files: propFiles, messageId } = props;\n\n  const { files: contextFiles } = useMessageContext<StreamChatGenerics>();\n\n  const { Attachment = AttachmentDefault } = useMessagesContext<StreamChatGenerics>();\n\n  const { AudioAttachment } = useMessageInputContext<StreamChatGenerics>();\n\n  const files = propFiles || contextFiles;\n\n  if (!files.length) return null;\n\n  return (\n    <MemoizedFileAttachmentGroup\n      {...{\n        Attachment,\n        AudioAttachment,\n        files,\n        messageId,\n      }}\n    />\n  );\n};\n\nFileAttachmentGroup.displayName = 'FileAttachmentGroup{messageSimple{fileAttachmentGroup}}';\n"]}
+{"version":3,"sources":["FileAttachmentGroup.tsx"],"names":["FILE_PREVIEW_HEIGHT","styles","StyleSheet","create","container","padding","fileContainer","borderRadius","borderWidth","flexDirection","height","justifyContent","paddingLeft","paddingRight","FileAttachmentGroupWithContext","props","Attachment","AudioAttachment","files","messageId","stylesProp","filesToDisplay","setFilesToDisplay","map","file","duration","paused","progress","onLoad","index","prevFilesToDisplay","fileToDisplay","id","toString","onProgress","currentTime","hasEnd","prevFileUploads","fileUpload","onPlayPause","pausedStatus","theme","colors","grey_whisper","white","messageSimple","fileAttachmentGroup","paddingBottom","length","attachmentContainer","type","marginBottom","backgroundColor","borderColor","width","name","title","uri","asset_url","areEqual","prevProps","nextProps","prevFiles","nextFiles","MemoizedFileAttachmentGroup","React","memo","FileAttachmentGroup","propFiles","contextFiles","AttachmentDefault","displayName"],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport type { Attachment } from 'stream-chat';\n\nimport { Attachment as AttachmentDefault } from './Attachment';\n\nimport {\n  MessageContextValue,\n  useMessageContext,\n} from '../../contexts/messageContext/MessageContext';\n\nimport {\n  MessagesContextValue,\n  useMessagesContext,\n} from '../../contexts/messagesContext/MessagesContext';\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport { isAudioPackageAvailable } from '../../native';\n\nimport type { DefaultStreamChatGenerics } from '../../types/types';\n\nconst FILE_PREVIEW_HEIGHT = 60;\n\nconst styles = StyleSheet.create({\n  container: {\n    padding: 4,\n  },\n  fileContainer: {\n    borderRadius: 12,\n    borderWidth: 1,\n    flexDirection: 'row',\n    height: FILE_PREVIEW_HEIGHT,\n    justifyContent: 'space-between',\n    paddingLeft: 8,\n    paddingRight: 8,\n  },\n});\n\nexport type FileAttachmentGroupPropsWithContext<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<MessageContextValue<StreamChatGenerics>, 'files'> &\n  Pick<MessagesContextValue<StreamChatGenerics>, 'Attachment' | 'AudioAttachment'> & {\n    /**\n     * The unique id for the message with file attachments\n     */\n    messageId: string;\n    styles?: Partial<{\n      attachmentContainer: StyleProp<ViewStyle>;\n      container: StyleProp<ViewStyle>;\n    }>;\n  };\n\ntype FilesToDisplayType<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Attachment<StreamChatGenerics> & {\n  duration: number;\n  paused: boolean;\n  progress: number;\n};\n\nconst FileAttachmentGroupWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: FileAttachmentGroupPropsWithContext<StreamChatGenerics>,\n) => {\n  const { Attachment, AudioAttachment, files, messageId, styles: stylesProp = {} } = props;\n  const [filesToDisplay, setFilesToDisplay] = useState<FilesToDisplayType[]>([]);\n\n  useEffect(() => {\n    setFilesToDisplay(files.map((file) => ({ ...file, duration: 0, paused: true, progress: 0 })));\n  }, [files]);\n\n  // Handler triggered when an audio is loaded in the message input. The initial state is defined for the audio here and the duration is set.\n  const onLoad = (index: string, duration: number) => {\n    setFilesToDisplay((prevFilesToDisplay) =>\n      prevFilesToDisplay.map((fileToDisplay, id) => ({\n        ...fileToDisplay,\n        duration: id.toString() === index ? duration : fileToDisplay.duration,\n      })),\n    );\n  };\n\n  // The handler which is triggered when the audio progresses/ the thumb is dragged in the progress control. The progressed duration is set here.\n  const onProgress = (index: string, currentTime?: number, hasEnd?: boolean) => {\n    setFilesToDisplay((prevFileUploads) =>\n      prevFileUploads.map((fileUpload, id) => ({\n        ...fileUpload,\n        progress:\n          id.toString() === index\n            ? hasEnd\n              ? 1\n              : currentTime\n              ? currentTime / (fileUpload.duration as number)\n              : 0\n            : fileUpload.progress,\n      })),\n    );\n  };\n\n  // The handler which controls or sets the paused/played state of the audio.\n  const onPlayPause = (index: string, pausedStatus?: boolean) => {\n    if (pausedStatus === false) {\n      // If the status is false we set the audio with the index as playing and the others as paused.\n      setFilesToDisplay((prevFileUploads) =>\n        prevFileUploads.map((fileUpload, id) => ({\n          ...fileUpload,\n          paused: id.toString() === index ? false : true,\n        })),\n      );\n    } else {\n      // If the status is true we simply set all the audio's paused state as true.\n      setFilesToDisplay((prevFileUploads) =>\n        prevFileUploads.map((fileUpload) => ({\n          ...fileUpload,\n          paused: true,\n        })),\n      );\n    }\n  };\n\n  const {\n    theme: {\n      colors: { grey_whisper, white },\n      messageSimple: {\n        fileAttachmentGroup: { container },\n      },\n    },\n  } = useTheme();\n\n  return (\n    <View style={[styles.container, container, stylesProp.container]}>\n      {filesToDisplay.map((file, index) => (\n        <View\n          key={`${messageId}-${index}`}\n          style={[\n            { paddingBottom: index !== files.length - 1 ? 4 : 0 },\n            stylesProp.attachmentContainer,\n          ]}\n        >\n          {file.type === 'audio' && isAudioPackageAvailable() ? (\n            <View\n              accessibilityLabel='audio-attachment-preview'\n              style={[\n                styles.fileContainer,\n                index === filesToDisplay.length - 1\n                  ? {\n                      marginBottom: 0,\n                    }\n                  : {},\n                {\n                  backgroundColor: white,\n                  borderColor: grey_whisper,\n                  width: -16,\n                },\n              ]}\n            >\n              <AudioAttachment\n                item={{\n                  duration: file.duration,\n                  file: { name: file.title as string, uri: file.asset_url },\n                  id: index.toString(),\n                  paused: file.paused,\n                  progress: file.progress,\n                }}\n                onLoad={onLoad}\n                onPlayPause={onPlayPause}\n                onProgress={onProgress}\n                testID='audio-attachment-preview'\n              />\n            </View>\n          ) : (\n            <Attachment attachment={file} />\n          )}\n        </View>\n      ))}\n    </View>\n  );\n};\n\nconst areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(\n  prevProps: FileAttachmentGroupPropsWithContext<StreamChatGenerics>,\n  nextProps: FileAttachmentGroupPropsWithContext<StreamChatGenerics>,\n) => {\n  const { files: prevFiles } = prevProps;\n  const { files: nextFiles } = nextProps;\n\n  return prevFiles.length === nextFiles.length;\n};\n\nconst MemoizedFileAttachmentGroup = React.memo(\n  FileAttachmentGroupWithContext,\n  areEqual,\n) as typeof FileAttachmentGroupWithContext;\n\nexport type FileAttachmentGroupProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Partial<Omit<FileAttachmentGroupPropsWithContext<StreamChatGenerics>, 'messageId'>> &\n  Pick<FileAttachmentGroupPropsWithContext<StreamChatGenerics>, 'messageId'>;\n\nexport const FileAttachmentGroup = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: FileAttachmentGroupProps<StreamChatGenerics>,\n) => {\n  const { files: propFiles, messageId } = props;\n\n  const { files: contextFiles } = useMessageContext<StreamChatGenerics>();\n\n  const { Attachment = AttachmentDefault, AudioAttachment } =\n    useMessagesContext<StreamChatGenerics>();\n\n  const files = propFiles || contextFiles;\n\n  if (!files.length) return null;\n\n  return (\n    <MemoizedFileAttachmentGroup\n      {...{\n        Attachment,\n        AudioAttachment,\n        files,\n        messageId,\n      }}\n    />\n  );\n};\n\nFileAttachmentGroup.displayName = 'FileAttachmentGroup{messageSimple{fileAttachmentGroup}}';\n"]}

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

@@ -1905,7 +1905,6 @@ var ChannelWithContext = function ChannelWithContext(props) {
   var inputMessageInputContext = (0, _useCreateInputMessageInputContext.useCreateInputMessageInputContext)({
     additionalTextInputProps: additionalTextInputProps,
     AttachButton: AttachButton,
-    AudioAttachment: AudioAttachment,
     autoCompleteSuggestionsLimit: autoCompleteSuggestionsLimit,
     autoCompleteTriggerSettings: autoCompleteTriggerSettings,
     channelId: channelId,
@@ -1961,6 +1960,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     additionalTouchableProps: additionalTouchableProps,
     Attachment: Attachment,
     AttachmentActions: AttachmentActions,
+    AudioAttachment: AudioAttachment,
     Card: Card,
     CardCover: CardCover,
     CardFooter: CardFooter,
@@ -2066,7 +2066,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1785,
+        lineNumber: 1786,
         columnNumber: 12
       }
     });
@@ -2081,7 +2081,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1790,
+        lineNumber: 1791,
         columnNumber: 7
       }
     }, t('Please select a channel first'));
@@ -2095,7 +2095,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1797,
+      lineNumber: 1798,
       columnNumber: 5
     }
   }), _react["default"].createElement(_ChannelContext.ChannelProvider, {
@@ -2103,7 +2103,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1803,
+      lineNumber: 1804,
       columnNumber: 7
     }
   }, _react["default"].createElement(_OwnCapabilitiesContext.OwnCapabilitiesProvider, {
@@ -2111,7 +2111,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1804,
+      lineNumber: 1805,
       columnNumber: 9
     }
   }, _react["default"].createElement(_TypingContext.TypingProvider, {
@@ -2119,7 +2119,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1805,
+      lineNumber: 1806,
       columnNumber: 11
     }
   }, _react["default"].createElement(_PaginatedMessageListContext.PaginatedMessageListProvider, {
@@ -2127,7 +2127,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1806,
+      lineNumber: 1807,
       columnNumber: 13
     }
   }, _react["default"].createElement(_MessagesContext.MessagesProvider, {
@@ -2135,7 +2135,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1807,
+      lineNumber: 1808,
       columnNumber: 15
     }
   }, _react["default"].createElement(_ThreadContext.ThreadProvider, {
@@ -2143,7 +2143,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1808,
+      lineNumber: 1809,
       columnNumber: 17
     }
   }, _react["default"].createElement(_SuggestionsContext.SuggestionsProvider, {
@@ -2151,7 +2151,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1809,
+      lineNumber: 1810,
       columnNumber: 19
     }
   }, _react["default"].createElement(_MessageInputContext.MessageInputProvider, {
@@ -2159,7 +2159,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1810,
+      lineNumber: 1811,
       columnNumber: 21
     }
   }, _react["default"].createElement(_reactNative.View, {
@@ -2169,7 +2169,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1811,
+      lineNumber: 1812,
       columnNumber: 23
     }
   }, children))))))))));
@@ -2224,7 +2224,7 @@ var Channel = function Channel(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1868,
+      lineNumber: 1869,
       columnNumber: 5
     }
   }));