refactor: access message composer configuration

Author: MartinCupela

src/components/MessageInput/LinkPreviewList.tsx

@@ -1,25 +1,23 @@
 import clsx from 'clsx';
 import React, { useState } from 'react';
-import { LinkPreviewStatus } from 'stream-chat';
-import { useStateStore } from '../../store';
-import { PopperTooltip } from '../Tooltip';
-import { useEnterLeaveHandlers } from '../Tooltip/hooks';
-import { useMessageComposer } from './hooks/messageComposer/useMessageComposer';
-import { CloseIcon, LinkIcon } from './icons';
-
 import type {
   LinkPreview,
-  LinkPreviewsManagerConfig,
   LinkPreviewsManagerState,
   MessageComposerState,
 } from 'stream-chat';
+import { LinkPreviewStatus, type MessageComposerConfig } from 'stream-chat';
+import { useStateStore } from '../../store';
+import { PopperTooltip } from '../Tooltip';
+import { useEnterLeaveHandlers } from '../Tooltip/hooks';
+import { useMessageComposer } from './hooks/messageComposer/useMessageComposer';
+import { CloseIcon, LinkIcon } from './icons';
 
 const linkPreviewsManagerStateSelector = (state: LinkPreviewsManagerState) => ({
   linkPreviews: Array.from(state.previews.values()),
 });
 
-const linkPreviewsManagerConfigStateSelector = (state: LinkPreviewsManagerConfig) => ({
-  linkPreviewsEnabled: state.enabled,
+const linkPreviewsManagerConfigStateSelector = (state: MessageComposerConfig) => ({
+  linkPreviewsEnabled: state.linkPreviews.enabled,
 });
 
 const messageComposerStateSelector = (state: MessageComposerState) => ({
@@ -38,7 +36,7 @@ export const LinkPreviewList = () => {
     linkPreviewsManagerStateSelector,
   );
   const { linkPreviewsEnabled } = useStateStore(
-    linkPreviewsManager.configState,
+    messageComposer.configState,
     linkPreviewsManagerConfigStateSelector,
   );
   const showLinkPreviews =

src/components/MessageInput/MessageInputFlat.tsx

@@ -31,12 +31,12 @@ import { useTranslationContext } from '../../context/TranslationContext';
 import { useMessageInputContext } from '../../context/MessageInputContext';
 import { useComponentContext } from '../../context/ComponentContext';
 import { useStateStore } from '../../store';
-import type { AttachmentManagerConfig } from 'stream-chat';
 import { useAttachmentManagerState } from './hooks/messageComposer/useAttachmentManagerState';
 import { useMessageContext } from '../../context';
+import type { MessageComposerConfig } from 'stream-chat';
 
-const attachmentManagerConfigStateSelector = (state: AttachmentManagerConfig) => ({
-  maxNumberOfFilesPerMessage: state.maxNumberOfFilesPerMessage,
+const attachmentManagerConfigStateSelector = (state: MessageComposerConfig) => ({
+  maxNumberOfFilesPerMessage: state.attachments.maxNumberOfFilesPerMessage,
 });
 
 export const MessageInputFlat = () => {
@@ -66,7 +66,8 @@ export const MessageInputFlat = () => {
   } = useComponentContext('MessageInputFlat');
   const { acceptedFiles = [] } = useChannelStateContext('MessageInputFlat');
   const { channel } = useChatContext('MessageInputFlat');
-  const { attachmentManager } = useMessageComposer();
+  const messageComposer = useMessageComposer();
+  const { attachmentManager } = messageComposer;
   const { aiState } = useAIState(channel);
 
   const stopGenerating = useCallback(() => channel?.stopAIResponse(), [channel]);
@@ -90,7 +91,7 @@ export const MessageInputFlat = () => {
 
   const { attachments, isUploadEnabled } = useAttachmentManagerState();
   const { maxNumberOfFilesPerMessage } = useStateStore(
-    attachmentManager.configState,
+    messageComposer.configState,
     attachmentManagerConfigStateSelector,
   );
 

src/components/MessageInput/hooks/useSubmitHandler.ts

@@ -42,7 +42,7 @@ export const useSubmitHandler = (props: MessageInputProps) => {
             await sendMessage({ localMessage, message, options: sendOptions });
           }
           messageComposer.clear();
-          if (messageComposer.config.publishTypingEvents)
+          if (messageComposer.config.text.publishTypingEvents)
             await messageComposer.channel.stopTyping();
         } catch (err) {
           addNotification(t('Send message request failed'), 'error');

src/components/ReactFileUtilities/UploadButton.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import { nanoid } from 'nanoid';
+import type { ComponentProps } from 'react';
 import React, { forwardRef, useCallback, useMemo } from 'react';
 
 import { useHandleFileChangeWrapper } from './utils';
@@ -11,12 +12,11 @@ import {
 import { useMessageComposer } from '../MessageInput/hooks/messageComposer/useMessageComposer';
 import { useAttachmentManagerState } from '../MessageInput/hooks/messageComposer/useAttachmentManagerState';
 import { useStateStore } from '../../store';
-import type { ComponentProps } from 'react';
-import type { AttachmentManagerConfig } from 'stream-chat';
+import type { MessageComposerConfig } from 'stream-chat';
 import type { PartialSelected } from '../../types/types';
 
-const attachmentManagerConfigStateSelector = (state: AttachmentManagerConfig) => ({
-  maxNumberOfFilesPerMessage: state.maxNumberOfFilesPerMessage,
+const attachmentManagerConfigStateSelector = (state: MessageComposerConfig) => ({
+  maxNumberOfFilesPerMessage: state.attachments.maxNumberOfFilesPerMessage,
 });
 
 /**
@@ -55,10 +55,11 @@ export const UploadFileInput = forwardRef(function UploadFileInput(
   const { t } = useTranslationContext('UploadFileInput');
   const { cooldownRemaining } = useMessageInputContext();
   const { acceptedFiles = [] } = useChannelStateContext('UploadFileInput');
-  const { attachmentManager } = useMessageComposer();
+  const messageComposer = useMessageComposer();
+  const { attachmentManager } = messageComposer;
   const { isUploadEnabled } = useAttachmentManagerState();
   const { maxNumberOfFilesPerMessage } = useStateStore(
-    attachmentManager.configState,
+    messageComposer.configState,
     attachmentManagerConfigStateSelector,
   );
   const id = useMemo(() => nanoid(), []);