fix: make message input tests run

Author: MartinCupela

src/components/MediaRecorder/hooks/useMediaRecorder.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { MediaRecorderController } from '../classes';
 import { useTranslationContext } from '../../../context';
-import { useMessageComposer } from '../../MessageInput/hooks/messageComposer/useMessageComposer';
+import { useMessageComposer } from '../../MessageInput';
 
 import type { LocalVoiceRecordingAttachment } from 'stream-chat';
 import type { CustomAudioRecordingConfig, MediaRecordingState } from '../classes';

src/components/Message/MessageSimple.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import clsx from 'clsx';
 
 import { MessageErrorIcon } from './icons';
@@ -19,13 +19,8 @@ import {
 
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { Attachment as DefaultAttachment } from '../Attachment';
-import {
-  EditMessageForm as DefaultEditMessageForm,
-  MessageInput,
-  useMessageComposer,
-} from '../MessageInput';
+import { EditMessageModal } from '../MessageInput';
 import { MML } from '../MML';
-import { Modal } from '../Modal';
 import { Poll } from '../Poll';
 import { ReactionsList as DefaultReactionList } from '../Reactions';
 import { MessageBounceModal } from '../MessageBounce/MessageBounceModal';
@@ -41,34 +36,6 @@ import type { MessageUIComponentProps } from './types';
 import { StreamedMessageText as DefaultStreamedMessageText } from './StreamedMessageText';
 import { isDateSeparatorMessage } from '../MessageList';
 
-const EditMessageModal = ({
-  additionalMessageInputProps,
-}: Pick<MessageUIComponentProps, 'additionalMessageInputProps'>) => {
-  const { EditMessageInput = DefaultEditMessageForm } = useComponentContext();
-  const { clearEditingState } = useMessageContext();
-  const messageComposer = useMessageComposer();
-  const onEditModalClose = useCallback(() => {
-    clearEditingState();
-    messageComposer.restore();
-  }, [clearEditingState, messageComposer]);
-
-  return (
-    <Modal
-      className='str-chat__edit-message-modal'
-      onClose={onEditModalClose}
-      open={true}
-    >
-      <MessageInput
-        clearEditingState={clearEditingState}
-        grow
-        hideSendButton
-        Input={EditMessageInput}
-        {...additionalMessageInputProps}
-      />
-    </Modal>
-  );
-};
-
 type MessageSimpleWithContextProps = MessageContextValue;
 
 const MessageSimpleWithContext = (props: MessageSimpleWithContextProps) => {

src/components/MessageActions/MessageActionsBox.tsx

@@ -12,7 +12,7 @@ import {
 } from '../../context';
 
 import { CustomMessageActionsList as DefaultCustomMessageActionsList } from './CustomMessageActionsList';
-import { useMessageComposer } from '../MessageInput/hooks/messageComposer/useMessageComposer';
+import { useMessageComposer } from '../MessageInput';
 
 type PropsDrilledToMessageActionsBox =
   | 'getMessageActions'

src/components/MessageInput/AttachmentPreviewList/AttachmentPreviewList.tsx

@@ -14,7 +14,7 @@ import { UnsupportedAttachmentPreview as DefaultUnknownAttachmentPreview } from
 import { VoiceRecordingPreview as DefaultVoiceRecordingPreview } from './VoiceRecordingPreview';
 import { FileAttachmentPreview as DefaultFilePreview } from './FileAttachmentPreview';
 import { ImageAttachmentPreview as DefaultImagePreview } from './ImageAttachmentPreview';
-import { useMessageComposer } from '../hooks/messageComposer/useMessageComposer';
+import { useMessageComposer } from '../hooks';
 import { useAttachmentManagerState } from '../hooks/messageComposer/useAttachmentManagerState';
 import type { VoiceRecordingPreviewProps } from './VoiceRecordingPreview';
 import type { FileAttachmentPreviewProps } from './FileAttachmentPreview';

src/components/MessageInput/DropzoneProvider.tsx

@@ -15,20 +15,24 @@ import {
 import type { MessageInputProps } from './MessageInput';
 
 import type { UnknownType } from '../../types/types';
-import { useMessageComposer } from './hooks/messageComposer/useMessageComposer';
-import { useAttachmentManagerState } from './hooks/messageComposer/useAttachmentManagerState';
+import { useMessageComposer } from './hooks';
+import { useAttachmentManagerState } from './hooks';
+import { useStateStore } from '../../store';
+import type { MessageComposerConfig } from 'stream-chat';
 
-// const attachmentManagerStateSelector = <
-//
-// >(
-//   state: AttachmentManagerState,
-// ) => ({ isUploadEnabled: state.isUploadEnabled });
+const attachmentManagerConfigStateSelector = (state: MessageComposerConfig) => ({
+  maxNumberOfFilesPerMessage: state.attachments.maxNumberOfFilesPerMessage,
+});
 
 const DropzoneInner = ({ children }: PropsWithChildren<UnknownType>) => {
   const { acceptedFiles } = useChannelStateContext('DropzoneProvider');
 
   const { cooldownRemaining } = useMessageInputContext('DropzoneProvider');
   const messageComposer = useMessageComposer();
+  const { maxNumberOfFilesPerMessage } = useStateStore(
+    messageComposer.configState,
+    attachmentManagerConfigStateSelector,
+  );
   const { availableUploadSlots, isUploadEnabled } = useAttachmentManagerState();
 
   return (
@@ -37,7 +41,7 @@ const DropzoneInner = ({ children }: PropsWithChildren<UnknownType>) => {
       disabled={!isUploadEnabled || !!cooldownRemaining}
       handleFiles={messageComposer.attachmentManager.uploadFiles}
       maxNumberOfFiles={availableUploadSlots}
-      multiple={messageComposer.attachmentManager.maxNumberOfFilesPerMessage > 1}
+      multiple={maxNumberOfFilesPerMessage > 1}
     >
       {children}
     </ImageDropzone>

src/components/MessageInput/EditMessageForm.tsx

@@ -1,9 +1,17 @@
 import React, { useCallback, useEffect } from 'react';
+import { MessageInput } from './MessageInput';
 import { MessageInputFlat } from './MessageInputFlat';
-
-import { useMessageInputContext, useTranslationContext } from '../../context';
+import { Modal } from '../Modal';
+import {
+  useComponentContext,
+  useMessageContext,
+  useMessageInputContext,
+  useTranslationContext,
+} from '../../context';
 import { useMessageComposer, useMessageComposerHasSendableData } from './hooks';
 
+import type { MessageUIComponentProps } from '../Message';
+
 const EditMessageFormSendButton = () => {
   const { t } = useTranslationContext();
   const hasSendableData = useMessageComposerHasSendableData();
@@ -58,3 +66,31 @@ export const EditMessageForm = () => {
     </form>
   );
 };
+
+export const EditMessageModal = ({
+  additionalMessageInputProps,
+}: Pick<MessageUIComponentProps, 'additionalMessageInputProps'>) => {
+  const { EditMessageInput = EditMessageForm } = useComponentContext();
+  const { clearEditingState } = useMessageContext();
+  const messageComposer = useMessageComposer();
+  const onEditModalClose = useCallback(() => {
+    clearEditingState();
+    messageComposer.restore();
+  }, [clearEditingState, messageComposer]);
+
+  return (
+    <Modal
+      className='str-chat__edit-message-modal'
+      onClose={onEditModalClose}
+      open={true}
+    >
+      <MessageInput
+        clearEditingState={clearEditingState}
+        grow
+        hideSendButton
+        Input={EditMessageInput}
+        {...additionalMessageInputProps}
+      />
+    </Modal>
+  );
+};

src/components/MessageInput/LinkPreviewList.tsx

@@ -9,7 +9,7 @@ import { LinkPreviewsManager } from 'stream-chat';
 import { useStateStore } from '../../store';
 import { PopperTooltip } from '../Tooltip';
 import { useEnterLeaveHandlers } from '../Tooltip/hooks';
-import { useMessageComposer } from './hooks/messageComposer/useMessageComposer';
+import { useMessageComposer } from './hooks';
 import { CloseIcon, LinkIcon } from './icons';
 
 const linkPreviewsManagerStateSelector = (state: LinkPreviewsManagerState) => ({

src/components/MessageInput/MessageInput.tsx

@@ -2,7 +2,7 @@ import type { PropsWithChildren } from 'react';
 import React, { useEffect } from 'react';
 
 import { MessageInputFlat } from './MessageInputFlat';
-import { useMessageComposer } from './hooks/messageComposer/useMessageComposer';
+import { useMessageComposer } from './hooks';
 import { useCooldownTimer } from './hooks/useCooldownTimer';
 import { useCreateMessageInputContext } from './hooks/useCreateMessageInputContext';
 import { useMessageInputState } from './hooks/useMessageInputState';
@@ -40,8 +40,15 @@ export interface EmojiSearchIndex {
 }
 
 export type MessageInputProps = {
-  /** Additional props to be passed to the underlying `AutoCompleteTextarea` component, [available props](https://www.npmjs.com/package/react-textarea-autosize) */
-  additionalTextareaProps?: React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+  /**
+   * Additional props to be passed to the underlying `AutoCompleteTextarea` component.
+   * Default value is handled via MessageComposer.
+   * [Available props](https://www.npmjs.com/package/react-textarea-autosize)
+   */
+  additionalTextareaProps?: Omit<
+    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    'defaultValue'
+  >;
   /**
    * When enabled, recorded messages won’t be sent immediately.
    * Instead, they will “stack up” with other attachments in the message composer allowing the user to send multiple attachments as part of the same message.
@@ -71,8 +78,6 @@ export type MessageInputProps = {
   emojiSearchIndex?: ComponentContextValue['emojiSearchIndex'];
   /** If true, focuses the text input on component mount */
   focus?: boolean;
-  /** Generates the default value for the underlying textarea element. The function's return value takes precedence before additionalTextareaProps.defaultValue. */
-  getDefaultValue?: () => string | string[];
   /** If true, expands the text input vertically for new lines */
   grow?: boolean;
   /** Allows to hide MessageInput's send button. */

src/components/MessageInput/MessageInputFlat.tsx

@@ -20,7 +20,7 @@ import {
   QuotedMessagePreviewHeader,
 } from './QuotedMessagePreview';
 import { LinkPreviewList as DefaultLinkPreviewList } from './LinkPreviewList';
-import { useMessageComposer } from './hooks/messageComposer/useMessageComposer';
+import { useMessageComposer } from './hooks';
 import { TextAreaComposer } from '../TextAreaComposer';
 import { AIStates, useAIState } from '../AIStateIndicator';
 import { RecordingAttachmentType } from '../MediaRecorder/classes';

src/components/MessageInput/QuotedMessagePreview.tsx

@@ -10,7 +10,7 @@ import { useComponentContext } from '../../context/ComponentContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 
 import { useStateStore } from '../../store';
-import { useMessageComposer } from './hooks/messageComposer/useMessageComposer';
+import { useMessageComposer } from './hooks';
 import { renderText as defaultRenderText } from '../Message/renderText';
 import type { MessageComposerState, TranslationLanguages } from 'stream-chat';
 import type { MessageContextValue } from '../../context';