stream-chat-react-native-core 8.13.7 → 9.0.0-beta.1

package/lib/module/components/MessageInput/MessageInput.js

@@ -3,169 +3,184 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MessageInput = void 0;
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
-var _useAudioController2 = require("./hooks/useAudioController");
-var _useCountdown2 = require("./hooks/useCountdown");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _MicPositionContext = require("./contexts/MicPositionContext");
+var _audioRecorderSelectors = require("./utils/audioRecorderSelectors");
 var _contexts = require("../../contexts");
-var _AttachmentPickerContext = require("../../contexts/attachmentPickerContext/AttachmentPickerContext");
 var _ChannelContext = require("../../contexts/channelContext/ChannelContext");
 var _MessageComposerAPIContext = require("../../contexts/messageComposerContext/MessageComposerAPIContext");
-var _useAttachmentManagerState = require("../../contexts/messageInputContext/hooks/useAttachmentManagerState");
 var _useMessageComposer = require("../../contexts/messageInputContext/hooks/useMessageComposer");
-var _useMessageComposerHasSendableData = require("../../contexts/messageInputContext/hooks/useMessageComposerHasSendableData");
 var _MessageInputContext = require("../../contexts/messageInputContext/MessageInputContext");
 var _MessagesContext = require("../../contexts/messagesContext/MessagesContext");
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
+var _useAttachmentPickerState = require("../../hooks/useAttachmentPickerState");
+var _useKeyboardVisibility = require("../../hooks/useKeyboardVisibility");
 var _useStateStore3 = require("../../hooks/useStateStore");
-var _native = require("../../native");
-var _AITypingIndicatorView = require("../AITypingIndicatorView");
-var _AutoCompleteInput = require("../AutoCompleteInput/AutoCompleteInput");
+var _theme = require("../../theme");
 var _CreatePollContent = require("../Poll/CreatePollContent");
+var _PortalWhileClosingView = require("../UIComponents/PortalWhileClosingView");
 var _SafeAreaViewWrapper = require("../UIComponents/SafeAreaViewWrapper");
 var _jsxRuntime = require("react/jsx-runtime");
 var _this = this,
   _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageInput/MessageInput.tsx";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var styles = _reactNative.StyleSheet.create({
-  attachmentSeparator: {
-    borderBottomWidth: 1,
-    marginBottom: 10
-  },
-  autoCompleteInputContainer: {
-    alignItems: 'center',
-    flexDirection: 'row'
-  },
-  composerContainer: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'space-between'
-  },
-  container: {
-    borderTopWidth: 1,
-    padding: 10
-  },
-  inputBoxContainer: {
-    borderRadius: 20,
-    borderWidth: 1,
-    flex: 1,
-    marginHorizontal: 10
-  },
-  micButtonContainer: {},
-  optionsContainer: {
-    flexDirection: 'row'
-  },
-  replyContainer: {
-    paddingBottom: 0,
-    paddingHorizontal: 8,
-    paddingTop: 8
-  },
-  sendButtonContainer: {},
-  suggestionsListContainer: {
-    position: 'absolute',
-    width: '100%'
-  }
-});
-var textComposerStateSelector = function textComposerStateSelector(state) {
-  return {
-    command: state.command,
-    hasText: !!state.text,
-    mentionedUsers: state.mentionedUsers,
-    suggestions: state.suggestions
-  };
+var useStyles = function useStyles() {
+  var _useTheme = (0, _ThemeContext.useTheme)(),
+    semantics = _useTheme.theme.semantics;
+  return (0, _react.useMemo)(function () {
+    return _reactNative.StyleSheet.create({
+      autocompleteInputContainer: {
+        flex: 1,
+        flexShrink: 1,
+        minWidth: 0
+      },
+      pollModalWrapper: {
+        alignItems: 'center',
+        flex: 1,
+        justifyContent: 'center',
+        backgroundColor: semantics.backgroundCoreElevation1
+      },
+      pollSafeArea: {
+        flex: 1,
+        backgroundColor: semantics.backgroundCoreElevation1
+      },
+      container: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        gap: _theme.primitives.spacingXs,
+        justifyContent: 'space-between'
+      },
+      contentContainer: {
+        gap: _theme.primitives.spacingXxs,
+        overflow: 'hidden',
+        paddingHorizontal: _theme.primitives.spacingXs
+      },
+      floatingWrapper: {
+        left: 0,
+        position: 'absolute',
+        right: 0
+      },
+      giphyContainer: {
+        padding: _theme.primitives.spacingXs
+      },
+      inputBoxContainer: {
+        flex: 1
+      },
+      inputBoxWrapper: {
+        borderRadius: 24,
+        borderWidth: 1,
+        flex: 1,
+        flexDirection: 'row',
+        backgroundColor: semantics.backgroundCoreElevation1,
+        borderColor: semantics.borderCoreDefault
+      },
+      inputButtonsContainer: {
+        alignSelf: 'flex-end'
+      },
+      inputContainer: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        justifyContent: 'space-between'
+      },
+      micButtonContainer: {},
+      outputButtonsContainer: {
+        alignSelf: 'flex-end',
+        padding: _theme.primitives.spacingXs
+      },
+      shadow: {
+        elevation: 6,
+        shadowColor: 'hsla(0, 0%, 0%, 0.24)',
+        shadowOffset: {
+          height: 4,
+          width: 0
+        },
+        shadowOpacity: 0.24,
+        shadowRadius: 12
+      },
+      suggestionsListContainer: {
+        backgroundColor: semantics.backgroundCoreElevation1,
+        position: 'absolute',
+        width: '100%'
+      },
+      wrapper: {
+        paddingHorizontal: _theme.primitives.spacingMd,
+        paddingTop: _theme.primitives.spacingMd
+      },
+      audioLockIndicatorWrapper: {
+        position: 'absolute',
+        right: _theme.primitives.spacingMd,
+        padding: 4
+      }
+    });
+  }, [semantics]);
 };
-var messageComposerStateStoreSelector = function messageComposerStateStoreSelector(state) {
+var messageInputHeightStoreSelector = function messageInputHeightStoreSelector(state) {
   return {
-    quotedMessage: state.quotedMessage
+    height: state.height
   };
 };
 var MessageInputWithContext = function MessageInputWithContext(props) {
   var _inputBoxRef$current;
-  var AttachmentPickerSelectionBar = props.AttachmentPickerSelectionBar,
-    attachmentPickerBottomSheetHeight = props.attachmentPickerBottomSheetHeight,
-    attachmentSelectionBarHeight = props.attachmentSelectionBarHeight,
-    bottomInset = props.bottomInset,
-    selectedPicker = props.selectedPicker,
-    additionalTextInputProps = props.additionalTextInputProps,
+  var additionalTextInputProps = props.additionalTextInputProps,
     asyncMessagesLockDistance = props.asyncMessagesLockDistance,
-    asyncMessagesMinimumPressDuration = props.asyncMessagesMinimumPressDuration,
-    asyncMessagesMultiSendEnabled = props.asyncMessagesMultiSendEnabled,
     asyncMessagesSlideToCancelDistance = props.asyncMessagesSlideToCancelDistance,
-    AttachmentUploadPreviewList = props.AttachmentUploadPreviewList,
     AudioRecorder = props.AudioRecorder,
-    audioRecordingEnabled = props.audioRecordingEnabled,
     AudioRecordingInProgress = props.AudioRecordingInProgress,
     AudioRecordingLockIndicator = props.AudioRecordingLockIndicator,
     AudioRecordingPreview = props.AudioRecordingPreview,
     AutoCompleteSuggestionList = props.AutoCompleteSuggestionList,
-    channel = props.channel,
     closeAttachmentPicker = props.closeAttachmentPicker,
     closePollCreationDialog = props.closePollCreationDialog,
-    cooldownEndsAt = props.cooldownEndsAt,
-    CooldownTimer = props.CooldownTimer,
     CreatePollContent = props.CreatePollContent,
-    disableAttachmentPicker = props.disableAttachmentPicker,
+    createPollOptionGap = props.createPollOptionGap,
     editing = props.editing,
+    InputView = props.InputView,
+    MessageComposerLeadingView = props.MessageComposerLeadingView,
+    MessageComposerTrailingView = props.MessageComposerTrailingView,
+    messageInputFloating = props.messageInputFloating,
+    messageInputHeightStore = props.messageInputHeightStore,
+    MessageInputHeaderView = props.MessageInputHeaderView,
+    MessageInputTrailingView = props.MessageInputTrailingView,
     Input = props.Input,
     inputBoxRef = props.inputBoxRef,
-    InputButtons = props.InputButtons,
-    InputEditingStateHeader = props.InputEditingStateHeader,
-    CommandInput = props.CommandInput,
-    InputReplyStateHeader = props.InputReplyStateHeader,
-    isOnline = props.isOnline,
+    isKeyboardVisible = props.isKeyboardVisible,
     members = props.members,
-    Reply = props.Reply,
-    threadList = props.threadList,
-    SendButton = props.SendButton,
     sendMessage = props.sendMessage,
     showPollCreationDialog = props.showPollCreationDialog,
-    ShowThreadMessageInChannelButton = props.ShowThreadMessageInChannelButton,
-    StartAudioRecordingButton = props.StartAudioRecordingButton,
-    StopMessageStreamingButton = props.StopMessageStreamingButton,
     TextInputComponent = props.TextInputComponent,
-    watchers = props.watchers;
+    watchers = props.watchers,
+    micLocked = props.micLocked,
+    isRecordingStateIdle = props.isRecordingStateIdle,
+    recordingStatus = props.recordingStatus;
+  var styles = useStyles();
+  var _useAttachmentPickerS = (0, _useAttachmentPickerState.useAttachmentPickerState)(),
+    selectedPicker = _useAttachmentPickerS.selectedPicker;
+  var _useAttachmentPickerC = (0, _contexts.useAttachmentPickerContext)(),
+    attachmentPickerBottomSheetHeight = _useAttachmentPickerC.attachmentPickerBottomSheetHeight,
+    bottomInset = _useAttachmentPickerC.bottomInset;
   var messageComposer = (0, _useMessageComposer.useMessageComposer)();
-  var textComposer = messageComposer.textComposer;
-  var _useStateStore = (0, _useStateStore3.useStateStore)(textComposer.state, textComposerStateSelector),
-    command = _useStateStore.command,
-    hasText = _useStateStore.hasText;
-  var _useStateStore2 = (0, _useStateStore3.useStateStore)(messageComposer.state, messageComposerStateStoreSelector),
-    quotedMessage = _useStateStore2.quotedMessage;
-  var _useAttachmentManager = (0, _useAttachmentManagerState.useAttachmentManagerState)(),
-    attachments = _useAttachmentManager.attachments;
-  var hasSendableData = (0, _useMessageComposerHasSendableData.useMessageComposerHasSendableData)();
-  var _useState = (0, _react.useState)(0),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    height = _useState2[0],
-    setHeight = _useState2[1];
-  var _useTheme = (0, _ThemeContext.useTheme)(),
-    _useTheme$theme = _useTheme.theme,
-    _useTheme$theme$color = _useTheme$theme.colors,
-    border = _useTheme$theme$color.border,
-    grey_whisper = _useTheme$theme$color.grey_whisper,
-    white = _useTheme$theme$color.white,
-    white_smoke = _useTheme$theme$color.white_smoke,
-    _useTheme$theme$messa = _useTheme$theme.messageInput,
-    attachmentSelectionBar = _useTheme$theme$messa.attachmentSelectionBar,
-    autoCompleteInputContainer = _useTheme$theme$messa.autoCompleteInputContainer,
-    composerContainer = _useTheme$theme$messa.composerContainer,
-    container = _useTheme$theme$messa.container,
-    focusedInputBoxContainer = _useTheme$theme$messa.focusedInputBoxContainer,
-    inputBoxContainer = _useTheme$theme$messa.inputBoxContainer,
-    micButtonContainer = _useTheme$theme$messa.micButtonContainer,
-    optionsContainer = _useTheme$theme$messa.optionsContainer,
-    replyContainer = _useTheme$theme$messa.replyContainer,
-    sendButtonContainer = _useTheme$theme$messa.sendButtonContainer,
-    suggestionListContainer = _useTheme$theme$messa.suggestionsListContainer.container;
-  var _useCountdown = (0, _useCountdown2.useCountdown)(cooldownEndsAt),
-    cooldownRemainingSeconds = _useCountdown.seconds;
+  var _useStateStore = (0, _useStateStore3.useStateStore)(messageInputHeightStore.store, messageInputHeightStoreSelector),
+    height = _useStateStore.height;
+  var _useTheme2 = (0, _ThemeContext.useTheme)(),
+    _useTheme2$theme = _useTheme2.theme,
+    semantics = _useTheme2$theme.semantics,
+    _useTheme2$theme$mess = _useTheme2$theme.messageInput,
+    container = _useTheme2$theme$mess.container,
+    floatingWrapper = _useTheme2$theme$mess.floatingWrapper,
+    focusedInputBoxContainer = _useTheme2$theme$mess.focusedInputBoxContainer,
+    inputBoxContainer = _useTheme2$theme$mess.inputBoxContainer,
+    inputBoxWrapper = _useTheme2$theme$mess.inputBoxWrapper,
+    inputContainer = _useTheme2$theme$mess.inputContainer,
+    inputFloatingContainer = _useTheme2$theme$mess.inputFloatingContainer,
+    suggestionListContainer = _useTheme2$theme$mess.suggestionsListContainer.container,
+    wrapper = _useTheme2$theme$mess.wrapper;
   (0, _react.useEffect)(function () {
     return function () {
       closeAttachmentPicker();
@@ -211,78 +226,10 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
     return result;
   };
   var isFocused = (_inputBoxRef$current = inputBoxRef.current) == null ? void 0 : _inputBoxRef$current.isFocused();
-  var _useAudioController = (0, _useAudioController2.useAudioController)(),
-    deleteVoiceRecording = _useAudioController.deleteVoiceRecording,
-    micLocked = _useAudioController.micLocked,
-    onVoicePlayerPlayPause = _useAudioController.onVoicePlayerPlayPause,
-    paused = _useAudioController.paused,
-    permissionsGranted = _useAudioController.permissionsGranted,
-    position = _useAudioController.position,
-    progress = _useAudioController.progress,
-    recording = _useAudioController.recording,
-    recordingDuration = _useAudioController.recordingDuration,
-    recordingStatus = _useAudioController.recordingStatus,
-    setMicLocked = _useAudioController.setMicLocked,
-    startVoiceRecording = _useAudioController.startVoiceRecording,
-    stopVoiceRecording = _useAudioController.stopVoiceRecording,
-    uploadVoiceRecording = _useAudioController.uploadVoiceRecording,
-    waveformData = _useAudioController.waveformData;
-  var asyncAudioEnabled = audioRecordingEnabled && (0, _native.isAudioRecorderAvailable)();
-  var showSendingButton = hasText || attachments.length || command;
-  var isSendingButtonVisible = (0, _react.useMemo)(function () {
-    return asyncAudioEnabled ? showSendingButton && !recording : true;
-  }, [asyncAudioEnabled, recording, showSendingButton]);
   var micPositionX = (0, _reactNativeReanimated.useSharedValue)(0);
   var micPositionY = (0, _reactNativeReanimated.useSharedValue)(0);
   var X_AXIS_POSITION = -asyncMessagesSlideToCancelDistance;
   var Y_AXIS_POSITION = -asyncMessagesLockDistance;
-  var resetAudioRecording = function () {
-    var _ref = (0, _asyncToGenerator2.default)(function* () {
-      yield deleteVoiceRecording();
-    });
-    return function resetAudioRecording() {
-      return _ref.apply(this, arguments);
-    };
-  }();
-  var micLockHandler = function micLockHandler() {
-    setMicLocked(true);
-    _native.NativeHandlers.triggerHaptic('impactMedium');
-  };
-  var panGestureMic = _reactNativeGestureHandler.Gesture.Pan().activateAfterLongPress(asyncMessagesMinimumPressDuration + 100).onChange(function (event) {
-    var newPositionX = event.translationX;
-    var newPositionY = event.translationY;
-    if (newPositionX <= 0 && newPositionX >= X_AXIS_POSITION) {
-      micPositionX.value = newPositionX;
-    }
-    if (newPositionY <= 0 && newPositionY >= Y_AXIS_POSITION) {
-      micPositionY.value = newPositionY;
-    }
-  }).onEnd(function () {
-    var belowThresholdY = micPositionY.value > Y_AXIS_POSITION / 2;
-    var belowThresholdX = micPositionX.value > X_AXIS_POSITION / 2;
-    if (belowThresholdY && belowThresholdX) {
-      micPositionY.value = (0, _reactNativeReanimated.withSpring)(0);
-      micPositionX.value = (0, _reactNativeReanimated.withSpring)(0);
-      if (recordingStatus === 'recording') {
-        (0, _reactNativeReanimated.runOnJS)(uploadVoiceRecording)(asyncMessagesMultiSendEnabled);
-      }
-      return;
-    }
-    if (!belowThresholdY) {
-      micPositionY.value = (0, _reactNativeReanimated.withSpring)(Y_AXIS_POSITION);
-      (0, _reactNativeReanimated.runOnJS)(micLockHandler)();
-    }
-    if (!belowThresholdX) {
-      micPositionX.value = (0, _reactNativeReanimated.withSpring)(X_AXIS_POSITION);
-      (0, _reactNativeReanimated.runOnJS)(resetAudioRecording)();
-    }
-    micPositionX.value = 0;
-    micPositionY.value = 0;
-  }).onStart(function () {
-    micPositionX.value = 0;
-    micPositionY.value = 0;
-    (0, _reactNativeReanimated.runOnJS)(setMicLocked)(false);
-  });
   var lockIndicatorAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(function () {
     return {
       transform: [{
@@ -290,149 +237,97 @@ var MessageInputWithContext = function MessageInputWithContext(props) {
       }]
     };
   });
-  var micButttonAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(function () {
+  var slideToCancelAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(function () {
     return {
-      opacity: (0, _reactNativeReanimated.interpolate)(micPositionX.value, [0, X_AXIS_POSITION], [1, 0], _reactNativeReanimated.Extrapolation.CLAMP),
-      transform: [{
-        translateX: micPositionX.value
-      }, {
-        translateY: micPositionY.value
-      }]
+      opacity: (0, _reactNativeReanimated.interpolate)(micPositionX.value, [0, X_AXIS_POSITION], [1, 0], _reactNativeReanimated.Extrapolation.CLAMP)
     };
   });
-  var slideToCancelAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(function () {
+  var _useSafeAreaInsets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)(),
+    bottom = _useSafeAreaInsets.bottom;
+  var BOTTOM_OFFSET = isKeyboardVisible || selectedPicker ? 16 : bottom ? bottom : 16;
+  var micPositionContextValue = (0, _react.useMemo)(function () {
     return {
-      opacity: (0, _reactNativeReanimated.interpolate)(micPositionX.value, [0, X_AXIS_POSITION], [1, 0], _reactNativeReanimated.Extrapolation.CLAMP),
-      transform: [{
-        translateX: (0, _reactNativeReanimated.interpolate)(micPositionX.value, [0, X_AXIS_POSITION], [0, X_AXIS_POSITION / 2], _reactNativeReanimated.Extrapolation.CLAMP)
-      }]
+      micPositionX: micPositionX,
+      micPositionY: micPositionY
     };
-  });
-  var _useAIState = (0, _AITypingIndicatorView.useAIState)(channel),
-    aiState = _useAIState.aiState;
-  var stopGenerating = (0, _react.useCallback)(function () {
-    return channel == null ? void 0 : channel.stopAIResponse();
-  }, [channel]);
-  var shouldDisplayStopAIGeneration = [_AITypingIndicatorView.AIStates.Thinking, _AITypingIndicatorView.AIStates.Generating].includes(aiState) && !!StopMessageStreamingButton;
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      onLayout: function onLayout(_ref2) {
-        var newHeight = _ref2.nativeEvent.layout.height;
-        return setHeight(newHeight);
-      },
-      style: [styles.container, {
-        backgroundColor: white,
-        borderColor: border
-      }, container],
-      children: [editing && (0, _jsxRuntime.jsx)(InputEditingStateHeader, {}), quotedMessage && !editing && (0, _jsxRuntime.jsx)(InputReplyStateHeader, {}), recording && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [(0, _jsxRuntime.jsx)(AudioRecordingLockIndicator, {
-          messageInputHeight: height,
-          micLocked: micLocked,
-          style: lockIndicatorAnimatedStyle
-        }), recordingStatus === 'stopped' ? (0, _jsxRuntime.jsx)(AudioRecordingPreview, {
-          onVoicePlayerPlayPause: onVoicePlayerPlayPause,
-          paused: paused,
-          position: position,
-          progress: progress,
-          recordingDuration: recordingDuration,
-          uri: typeof recording !== 'string' ? recording == null ? void 0 : recording.getURI() : recording,
-          waveformData: waveformData
-        }) : micLocked ? (0, _jsxRuntime.jsx)(AudioRecordingInProgress, {
-          recordingDuration: recordingDuration,
-          waveformData: waveformData
-        }) : null]
-      }), (0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.composerContainer, composerContainer],
-        children: Input ? (0, _jsxRuntime.jsx)(Input, {
-          additionalTextInputProps: additionalTextInputProps,
-          getUsers: getUsers
-        }) : (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [recording ? (0, _jsxRuntime.jsx)(AudioRecorder, {
-            deleteVoiceRecording: deleteVoiceRecording,
-            micLocked: micLocked,
-            recording: recording,
-            recordingDuration: recordingDuration,
-            recordingStopped: recordingStatus === 'stopped',
-            slideToCancelStyle: slideToCancelAnimatedStyle,
-            stopVoiceRecording: stopVoiceRecording,
-            uploadVoiceRecording: uploadVoiceRecording
-          }) : (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: [styles.optionsContainer, optionsContainer],
-              children: InputButtons && (0, _jsxRuntime.jsx)(InputButtons, {})
-            }), (0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: [styles.inputBoxContainer, {
-                borderColor: grey_whisper
-              }, inputBoxContainer, isFocused ? focusedInputBoxContainer : null],
-              children: [quotedMessage && (0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: [styles.replyContainer, replyContainer],
-                children: (0, _jsxRuntime.jsx)(Reply, {})
-              }), (0, _jsxRuntime.jsx)(AttachmentUploadPreviewList, {}), command ? (0, _jsxRuntime.jsx)(CommandInput, {
-                disabled: !isOnline
-              }) : (0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: [styles.autoCompleteInputContainer, autoCompleteInputContainer],
-                children: (0, _jsxRuntime.jsx)(_AutoCompleteInput.AutoCompleteInput, Object.assign({
-                  cooldownActive: !!cooldownRemainingSeconds,
-                  TextInputComponent: TextInputComponent
-                }, additionalTextInputProps))
-              })]
-            })]
-          }), shouldDisplayStopAIGeneration ? (0, _jsxRuntime.jsx)(StopMessageStreamingButton, {
-            onPress: stopGenerating
-          }) : isSendingButtonVisible ? cooldownRemainingSeconds ? (0, _jsxRuntime.jsx)(CooldownTimer, {
-            seconds: cooldownRemainingSeconds
-          }) : (0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [styles.sendButtonContainer, sendButtonContainer],
-            children: (0, _jsxRuntime.jsx)(SendButton, {
-              disabled: !hasSendableData || !!command && !isOnline
-            })
-          }) : null, audioRecordingEnabled && (0, _native.isAudioRecorderAvailable)() && !micLocked && (0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
-            gesture: panGestureMic,
-            children: (0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-              style: [styles.micButtonContainer, micButttonAnimatedStyle, micButtonContainer],
-              children: (0, _jsxRuntime.jsx)(StartAudioRecordingButton, {
-                permissionsGranted: permissionsGranted,
-                recording: recording,
-                startVoiceRecording: startVoiceRecording
+  }, [micPositionX, micPositionY]);
+  return (0, _jsxRuntime.jsxs)(_MicPositionContext.MicPositionProvider, {
+    value: micPositionContextValue,
+    children: [messageInputFloating ? (0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        paddingBottom: selectedPicker && !isKeyboardVisible ? attachmentPickerBottomSheetHeight - bottomInset : 0
+      }
+    }) : null, (0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+      style: messageInputFloating ? [styles.floatingWrapper, {
+        bottom: selectedPicker && !isKeyboardVisible ? attachmentPickerBottomSheetHeight - bottomInset + BOTTOM_OFFSET : BOTTOM_OFFSET
+      }, floatingWrapper] : null,
+      layout: _reactNativeReanimated.LinearTransition.duration(200),
+      children: (0, _jsxRuntime.jsxs)(_PortalWhileClosingView.PortalWhileClosingView, {
+        portalHostName: "overlay-composer",
+        portalName: "message-input-composer",
+        children: [(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          onLayout: function onLayout(_ref) {
+            var newHeight = _ref.nativeEvent.layout.height;
+            messageInputHeightStore.setHeight(newHeight);
+          },
+          style: messageInputFloating ? [styles.wrapper] : [styles.wrapper, {
+            borderTopWidth: 1,
+            backgroundColor: semantics.backgroundCoreElevation1,
+            borderColor: semantics.borderCoreDefault,
+            paddingBottom: selectedPicker && !isKeyboardVisible ? attachmentPickerBottomSheetHeight - bottomInset + BOTTOM_OFFSET : BOTTOM_OFFSET
+          }, wrapper],
+          children: [Input ? (0, _jsxRuntime.jsx)(Input, {
+            additionalTextInputProps: additionalTextInputProps,
+            getUsers: getUsers
+          }) : (0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: [styles.container, container],
+            children: [(0, _jsxRuntime.jsx)(MessageComposerLeadingView, {}), (0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+              layout: _reactNativeReanimated.LinearTransition.duration(200),
+              style: [styles.inputBoxWrapper, messageInputFloating ? [styles.shadow, inputFloatingContainer] : null, inputBoxWrapper, isFocused ? focusedInputBoxContainer : null],
+              children: (0, _jsxRuntime.jsxs)(_reactNative.View, {
+                style: [styles.inputBoxContainer, inputBoxContainer],
+                children: [recordingStatus === 'stopped' ? (0, _jsxRuntime.jsx)(AudioRecordingPreview, {}) : micLocked ? (0, _jsxRuntime.jsx)(AudioRecordingInProgress, {}) : null, (0, _jsxRuntime.jsx)(MessageInputHeaderView, {}), (0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
+                  style: [styles.inputContainer, inputContainer],
+                  layout: _reactNativeReanimated.LinearTransition.duration(200),
+                  children: [!isRecordingStateIdle ? (0, _jsxRuntime.jsx)(AudioRecorder, {
+                    slideToCancelStyle: slideToCancelAnimatedStyle
+                  }) : (0, _jsxRuntime.jsx)(InputView, Object.assign({
+                    TextInputComponent: TextInputComponent
+                  }, additionalTextInputProps)), (0, _jsxRuntime.jsx)(MessageInputTrailingView, {})]
+                })]
               })
+            })]
+          }), !isRecordingStateIdle ? (0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.audioLockIndicatorWrapper, {
+              bottom: messageInputFloating ? 0 : 16
+            }],
+            children: (0, _jsxRuntime.jsx)(AudioRecordingLockIndicator, {
+              messageInputHeight: height,
+              micLocked: micLocked,
+              style: lockIndicatorAnimatedStyle
             })
-          })]
-        })
-      }), (0, _jsxRuntime.jsx)(ShowThreadMessageInChannelButton, {
-        threadList: threadList
-      })]
-    }), (0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.suggestionsListContainer, {
-        bottom: height
-      }, suggestionListContainer],
-      children: (0, _jsxRuntime.jsx)(AutoCompleteSuggestionList, {})
-    }), !disableAttachmentPicker && selectedPicker ? (0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [{
-        backgroundColor: white_smoke,
-        height: attachmentPickerBottomSheetHeight + attachmentSelectionBarHeight - bottomInset
-      }, attachmentSelectionBar],
-      children: (0, _jsxRuntime.jsx)(AttachmentPickerSelectionBar, {})
-    }) : null, showPollCreationDialog ? (0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        alignItems: 'center',
-        flex: 1,
-        justifyContent: 'center'
-      },
+          }) : (0, _jsxRuntime.jsx)(MessageComposerTrailingView, {})]
+        }), (0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.suggestionsListContainer, {
+            bottom: height
+          }, suggestionListContainer],
+          children: (0, _jsxRuntime.jsx)(AutoCompleteSuggestionList, {})
+        })]
+      })
+    }), showPollCreationDialog ? (0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.pollModalWrapper,
       children: (0, _jsxRuntime.jsx)(_reactNative.Modal, {
         animationType: "slide",
         onRequestClose: closePollCreationDialog,
         visible: showPollCreationDialog,
         children: (0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureHandlerRootView, {
-          style: {
-            flex: 1
-          },
+          style: styles.pollSafeArea,
           children: (0, _jsxRuntime.jsx)(_SafeAreaViewWrapper.SafeAreaViewWrapper, {
-            style: {
-              flex: 1
-            },
+            style: styles.pollSafeArea,
             children: (0, _jsxRuntime.jsx)(_CreatePollContent.CreatePoll, {
               closePollCreationDialog: closePollCreationDialog,
               CreatePollContent: CreatePollContent,
+              createPollOptionGap: createPollOptionGap,
               sendMessage: sendMessage
             })
           })
@@ -449,14 +344,16 @@ var areEqual = function areEqual(prevProps, nextProps) {
     prevAsyncMessagesEnabled = prevProps.audioRecordingEnabled,
     prevChannel = prevProps.channel,
     prevClosePollCreationDialog = prevProps.closePollCreationDialog,
-    prevCooldownEndsAt = prevProps.cooldownEndsAt,
+    prevCreatePollOptionGap = prevProps.createPollOptionGap,
     prevEditing = prevProps.editing,
+    prevIsKeyboardVisible = prevProps.isKeyboardVisible,
     prevIsOnline = prevProps.isOnline,
     prevOpenPollCreationDialog = prevProps.openPollCreationDialog,
-    prevSelectedPicker = prevProps.selectedPicker,
     prevShowPollCreationDialog = prevProps.showPollCreationDialog,
     prevT = prevProps.t,
-    prevThreadList = prevProps.threadList;
+    prevMicLocked = prevProps.micLocked,
+    prevIsRecordingStateIdle = prevProps.isRecordingStateIdle,
+    prevRecordingStatus = prevProps.recordingStatus;
   var nextAdditionalTextInputProps = nextProps.additionalTextInputProps,
     nextAsyncMessagesLockDistance = nextProps.asyncMessagesLockDistance,
     nextAsyncMessagesMinimumPressDuration = nextProps.asyncMessagesMinimumPressDuration,
@@ -464,19 +361,21 @@ var areEqual = function areEqual(prevProps, nextProps) {
     nextAsyncMessagesEnabled = nextProps.audioRecordingEnabled,
     nextChannel = nextProps.channel,
     nextClosePollCreationDialog = nextProps.closePollCreationDialog,
-    nextCooldownEndsAt = nextProps.cooldownEndsAt,
+    nextCreatePollOptionGap = nextProps.createPollOptionGap,
     nextEditing = nextProps.editing,
+    nextIsKeyboardVisible = nextProps.isKeyboardVisible,
     nextIsOnline = nextProps.isOnline,
     nextOpenPollCreationDialog = nextProps.openPollCreationDialog,
-    nextSelectedPicker = nextProps.selectedPicker,
     nextShowPollCreationDialog = nextProps.showPollCreationDialog,
     nextT = nextProps.t,
-    nextThreadList = nextProps.threadList;
+    nextMicLocked = nextProps.micLocked,
+    nextIsRecordingStateIdle = nextProps.isRecordingStateIdle,
+    nextRecordingStatus = nextProps.recordingStatus;
   var tEqual = prevT === nextT;
   if (!tEqual) {
     return false;
   }
-  var pollCreationInputPropsEqual = prevOpenPollCreationDialog === nextOpenPollCreationDialog && prevClosePollCreationDialog === nextClosePollCreationDialog && prevShowPollCreationDialog === nextShowPollCreationDialog;
+  var pollCreationInputPropsEqual = prevOpenPollCreationDialog === nextOpenPollCreationDialog && prevClosePollCreationDialog === nextClosePollCreationDialog && prevCreatePollOptionGap === nextCreatePollOptionGap && prevShowPollCreationDialog === nextShowPollCreationDialog;
   if (!pollCreationInputPropsEqual) {
     return false;
   }
@@ -508,20 +407,24 @@ var areEqual = function areEqual(prevProps, nextProps) {
   if (!editingEqual) {
     return false;
   }
+  var isKeyboardVisibleEqual = prevIsKeyboardVisible === nextIsKeyboardVisible;
+  if (!isKeyboardVisibleEqual) {
+    return false;
+  }
   var isOnlineEqual = prevIsOnline === nextIsOnline;
   if (!isOnlineEqual) {
     return false;
   }
-  var cooldownEndsAtEqual = prevCooldownEndsAt === nextCooldownEndsAt;
-  if (!cooldownEndsAtEqual) {
+  var micLockedEqual = prevMicLocked === nextMicLocked;
+  if (!micLockedEqual) {
     return false;
   }
-  var threadListEqual = prevThreadList === nextThreadList;
-  if (!threadListEqual) {
+  var isRecordingStateIdleEqual = prevIsRecordingStateIdle === nextIsRecordingStateIdle;
+  if (!isRecordingStateIdleEqual) {
     return false;
   }
-  var selectedPickerEqual = prevSelectedPicker === nextSelectedPicker;
-  if (!selectedPickerEqual) {
+  var recordingStatusEqual = prevRecordingStatus === nextRecordingStatus;
+  if (!recordingStatusEqual) {
     return false;
   }
   return true;
@@ -534,19 +437,14 @@ var MessageInput = exports.MessageInput = function MessageInput(props) {
   var _useChannelContext = (0, _ChannelContext.useChannelContext)(),
     channel = _useChannelContext.channel,
     members = _useChannelContext.members,
-    threadList = _useChannelContext.threadList,
     watchers = _useChannelContext.watchers;
   var _useMessageInputConte = (0, _MessageInputContext.useMessageInputContext)(),
+    audioRecorderManager = _useMessageInputConte.audioRecorderManager,
     additionalTextInputProps = _useMessageInputConte.additionalTextInputProps,
     asyncMessagesLockDistance = _useMessageInputConte.asyncMessagesLockDistance,
     asyncMessagesMinimumPressDuration = _useMessageInputConte.asyncMessagesMinimumPressDuration,
     asyncMessagesMultiSendEnabled = _useMessageInputConte.asyncMessagesMultiSendEnabled,
     asyncMessagesSlideToCancelDistance = _useMessageInputConte.asyncMessagesSlideToCancelDistance,
-    AttachmentPickerBottomSheetHandle = _useMessageInputConte.AttachmentPickerBottomSheetHandle,
-    attachmentPickerBottomSheetHandleHeight = _useMessageInputConte.attachmentPickerBottomSheetHandleHeight,
-    attachmentPickerBottomSheetHeight = _useMessageInputConte.attachmentPickerBottomSheetHeight,
-    AttachmentPickerSelectionBar = _useMessageInputConte.AttachmentPickerSelectionBar,
-    attachmentSelectionBarHeight = _useMessageInputConte.attachmentSelectionBarHeight,
     AttachmentUploadPreviewList = _useMessageInputConte.AttachmentUploadPreviewList,
     AudioRecorder = _useMessageInputConte.AudioRecorder,
     audioRecordingEnabled = _useMessageInputConte.audioRecordingEnabled,
@@ -555,59 +453,54 @@ var MessageInput = exports.MessageInput = function MessageInput(props) {
     AudioRecordingPreview = _useMessageInputConte.AudioRecordingPreview,
     AudioRecordingWaveform = _useMessageInputConte.AudioRecordingWaveform,
     AutoCompleteSuggestionList = _useMessageInputConte.AutoCompleteSuggestionList,
-    CameraSelectorIcon = _useMessageInputConte.CameraSelectorIcon,
     closeAttachmentPicker = _useMessageInputConte.closeAttachmentPicker,
     closePollCreationDialog = _useMessageInputConte.closePollCreationDialog,
     compressImageQuality = _useMessageInputConte.compressImageQuality,
-    cooldownEndsAt = _useMessageInputConte.cooldownEndsAt,
-    CooldownTimer = _useMessageInputConte.CooldownTimer,
     CreatePollContent = _useMessageInputConte.CreatePollContent,
-    CreatePollIcon = _useMessageInputConte.CreatePollIcon,
-    FileSelectorIcon = _useMessageInputConte.FileSelectorIcon,
-    ImageSelectorIcon = _useMessageInputConte.ImageSelectorIcon,
     Input = _useMessageInputConte.Input,
+    InputView = _useMessageInputConte.InputView,
     inputBoxRef = _useMessageInputConte.inputBoxRef,
     InputButtons = _useMessageInputConte.InputButtons,
-    InputEditingStateHeader = _useMessageInputConte.InputEditingStateHeader,
-    CommandInput = _useMessageInputConte.CommandInput,
-    InputReplyStateHeader = _useMessageInputConte.InputReplyStateHeader,
+    MessageComposerLeadingView = _useMessageInputConte.MessageComposerLeadingView,
+    MessageComposerTrailingView = _useMessageInputConte.MessageComposerTrailingView,
+    messageInputFloating = _useMessageInputConte.messageInputFloating,
+    messageInputHeightStore = _useMessageInputConte.messageInputHeightStore,
+    MessageInputHeaderView = _useMessageInputConte.MessageInputHeaderView,
+    MessageInputTrailingView = _useMessageInputConte.MessageInputTrailingView,
     openPollCreationDialog = _useMessageInputConte.openPollCreationDialog,
     SendButton = _useMessageInputConte.SendButton,
     sendMessage = _useMessageInputConte.sendMessage,
     SendMessageDisallowedIndicator = _useMessageInputConte.SendMessageDisallowedIndicator,
     showPollCreationDialog = _useMessageInputConte.showPollCreationDialog,
-    ShowThreadMessageInChannelButton = _useMessageInputConte.ShowThreadMessageInChannelButton,
     StartAudioRecordingButton = _useMessageInputConte.StartAudioRecordingButton,
     StopMessageStreamingButton = _useMessageInputConte.StopMessageStreamingButton,
-    uploadNewFile = _useMessageInputConte.uploadNewFile,
-    VideoRecorderSelectorIcon = _useMessageInputConte.VideoRecorderSelectorIcon;
-  var _useAttachmentPickerC = (0, _AttachmentPickerContext.useAttachmentPickerContext)(),
-    bottomInset = _useAttachmentPickerC.bottomInset,
-    bottomSheetRef = _useAttachmentPickerC.bottomSheetRef,
-    disableAttachmentPicker = _useAttachmentPickerC.disableAttachmentPicker,
-    selectedPicker = _useAttachmentPickerC.selectedPicker;
+    uploadNewFile = _useMessageInputConte.uploadNewFile;
   var messageComposer = (0, _useMessageComposer.useMessageComposer)();
   var editing = !!messageComposer.editedMessage;
   var _useMessageComposerAP = (0, _MessageComposerAPIContext.useMessageComposerAPIContext)(),
     clearEditingState = _useMessageComposerAP.clearEditingState;
   var _useMessagesContext = (0, _MessagesContext.useMessagesContext)(),
     Reply = _useMessagesContext.Reply;
+  var isKeyboardVisible = (0, _useKeyboardVisibility.useKeyboardVisibility)();
+  var _useStateStore2 = (0, _useStateStore3.useStateStore)(audioRecorderManager.state, _audioRecorderSelectors.audioRecorderSelector),
+    micLocked = _useStateStore2.micLocked,
+    isRecordingStateIdle = _useStateStore2.isRecordingStateIdle,
+    recordingStatus = _useStateStore2.recordingStatus;
   var _useTranslationContex = (0, _TranslationContext.useTranslationContext)(),
     t = _useTranslationContex.t;
   if (!ownCapabilities.sendMessage && !editing && SendMessageDisallowedIndicator) {
     return (0, _jsxRuntime.jsx)(SendMessageDisallowedIndicator, {});
   }
   return (0, _jsxRuntime.jsx)(MemoizedMessageInput, Object.assign({
+    audioRecorderManager: audioRecorderManager,
+    isRecordingStateIdle: isRecordingStateIdle,
+    recordingStatus: recordingStatus,
+    micLocked: micLocked,
     additionalTextInputProps: additionalTextInputProps,
     asyncMessagesLockDistance: asyncMessagesLockDistance,
     asyncMessagesMinimumPressDuration: asyncMessagesMinimumPressDuration,
     asyncMessagesMultiSendEnabled: asyncMessagesMultiSendEnabled,
     asyncMessagesSlideToCancelDistance: asyncMessagesSlideToCancelDistance,
-    AttachmentPickerBottomSheetHandle: AttachmentPickerBottomSheetHandle,
-    attachmentPickerBottomSheetHandleHeight: attachmentPickerBottomSheetHandleHeight,
-    attachmentPickerBottomSheetHeight: attachmentPickerBottomSheetHeight,
-    AttachmentPickerSelectionBar: AttachmentPickerSelectionBar,
-    attachmentSelectionBarHeight: attachmentSelectionBarHeight,
     AttachmentUploadPreviewList: AttachmentUploadPreviewList,
     AudioRecorder: AudioRecorder,
     audioRecordingEnabled: audioRecordingEnabled,
@@ -616,44 +509,36 @@ var MessageInput = exports.MessageInput = function MessageInput(props) {
     AudioRecordingPreview: AudioRecordingPreview,
     AudioRecordingWaveform: AudioRecordingWaveform,
     AutoCompleteSuggestionList: AutoCompleteSuggestionList,
-    bottomInset: bottomInset,
-    bottomSheetRef: bottomSheetRef,
-    CameraSelectorIcon: CameraSelectorIcon,
     channel: channel,
     clearEditingState: clearEditingState,
     closeAttachmentPicker: closeAttachmentPicker,
     closePollCreationDialog: closePollCreationDialog,
-    CommandInput: CommandInput,
     compressImageQuality: compressImageQuality,
-    cooldownEndsAt: cooldownEndsAt,
-    CooldownTimer: CooldownTimer,
     CreatePollContent: CreatePollContent,
-    CreatePollIcon: CreatePollIcon,
-    disableAttachmentPicker: disableAttachmentPicker,
     editing: editing,
-    FileSelectorIcon: FileSelectorIcon,
-    ImageSelectorIcon: ImageSelectorIcon,
     Input: Input,
+    InputView: InputView,
     inputBoxRef: inputBoxRef,
     InputButtons: InputButtons,
-    InputEditingStateHeader: InputEditingStateHeader,
-    InputReplyStateHeader: InputReplyStateHeader,
+    MessageComposerLeadingView: MessageComposerLeadingView,
+    MessageComposerTrailingView: MessageComposerTrailingView,
+    isKeyboardVisible: isKeyboardVisible,
     isOnline: isOnline,
     members: members,
+    messageInputFloating: messageInputFloating,
+    messageInputHeightStore: messageInputHeightStore,
+    MessageInputHeaderView: MessageInputHeaderView,
+    MessageInputTrailingView: MessageInputTrailingView,
     openPollCreationDialog: openPollCreationDialog,
     Reply: Reply,
-    selectedPicker: selectedPicker,
     SendButton: SendButton,
     sendMessage: sendMessage,
     SendMessageDisallowedIndicator: SendMessageDisallowedIndicator,
     showPollCreationDialog: showPollCreationDialog,
-    ShowThreadMessageInChannelButton: ShowThreadMessageInChannelButton,
     StartAudioRecordingButton: StartAudioRecordingButton,
     StopMessageStreamingButton: StopMessageStreamingButton,
     t: t,
-    threadList: threadList,
     uploadNewFile: uploadNewFile,
-    VideoRecorderSelectorIcon: VideoRecorderSelectorIcon,
     watchers: watchers
   }, props));
 };