From 2598292eff40e8f23ac2ba91bbc24670e2007f67 Mon Sep 17 00:00:00 2001 From: Ivan Sekovanikj Date: Thu, 5 Jun 2025 20:05:46 +0200 Subject: [PATCH 1/2] perf: abstract away composer api and usage --- package/src/components/Channel/Channel.tsx | 16 +----- .../useCreateInputMessageInputContext.ts | 8 +-- .../Channel/hooks/useCreateMessagesContext.ts | 2 - package/src/components/Message/Message.tsx | 20 +++---- .../Message/MessageSimple/MessageBounce.tsx | 11 ++-- .../Message/hooks/useMessageActionHandlers.ts | 11 ++-- .../Message/hooks/useMessageActions.tsx | 4 +- .../components/MessageInput/MessageInput.tsx | 14 ++--- .../components/InputEditingStateHeader.tsx | 12 ++--- .../MessageComposerAPIContext.tsx | 52 +++++++++++++++++++ .../MessageComposerContext.tsx | 45 ++++++++++++++-- .../messageContext/MessageContext.tsx | 7 +-- .../MessageInputContext.tsx | 11 ++-- .../hooks/useCreateMessageInputContext.ts | 6 --- .../hooks/useMessageComposer.ts | 23 +++++--- .../messagesContext/MessagesContext.tsx | 1 - 16 files changed, 153 insertions(+), 90 deletions(-) create mode 100644 package/src/contexts/messageComposerContext/MessageComposerAPIContext.tsx diff --git a/package/src/components/Channel/Channel.tsx b/package/src/components/Channel/Channel.tsx index a21f2dadff..a01cfb0097 100644 --- a/package/src/components/Channel/Channel.tsx +++ b/package/src/components/Channel/Channel.tsx @@ -721,7 +721,6 @@ const ChannelWithContext = (props: PropsWithChildren) = }, } = useTheme(); const [deleted, setDeleted] = useState(false); - const [editing, setEditing] = useState(undefined); const [error, setError] = useState(false); const [lastRead, setLastRead] = useState(); const [thread, setThread] = useState(threadProps || null); @@ -1456,14 +1455,6 @@ const ChannelWithContext = (props: PropsWithChildren) = : client.updateMessage(localMessage, undefined, options), ); - const setEditingState: MessagesContextValue['setEditingState'] = useStableCallback((message) => { - setEditing(message); - }); - - const clearEditingState: InputMessageInputContextValue['clearEditingState'] = useStableCallback( - () => setEditing(undefined), - ); - /** * Removes the message from local state */ @@ -1766,7 +1757,6 @@ const ChannelWithContext = (props: PropsWithChildren) = AutoCompleteSuggestionList, CameraSelectorIcon, channelId, - clearEditingState, CommandInput, CommandsButton, compressImageQuality, @@ -1774,7 +1764,6 @@ const ChannelWithContext = (props: PropsWithChildren) = CreatePollContent, CreatePollIcon, doFileUploadRequest, - editing, editMessage, FileAttachmentUploadPreview, FileSelectorIcon, @@ -1915,7 +1904,6 @@ const ChannelWithContext = (props: PropsWithChildren) = ScrollToBottomButton, selectReaction, sendReaction, - setEditingState, shouldShowUnreadUnderlay, StreamingMessageView, supportedReactions, @@ -1947,8 +1935,8 @@ const ChannelWithContext = (props: PropsWithChildren) = }); const messageComposerContext = useMemo( - () => ({ channel, editing, thread, threadInstance }), - [channel, editing, thread, threadInstance], + () => ({ channel, thread, threadInstance }), + [channel, thread, threadInstance], ); // TODO: replace the null view with appropriate message. Currently this is waiting a design decision. diff --git a/package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts b/package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts index 73fbc9a862..0c59718abb 100644 --- a/package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts +++ b/package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts @@ -26,7 +26,6 @@ export const useCreateInputMessageInputContext = ({ AutoCompleteSuggestionItem, AutoCompleteSuggestionList, channelId, - clearEditingState, CameraSelectorIcon, CommandInput, CommandsButton, @@ -35,7 +34,6 @@ export const useCreateInputMessageInputContext = ({ CreatePollContent, CreatePollIcon, doFileUploadRequest, - editing, editMessage, FileAttachmentUploadPreview, FileSelectorIcon, @@ -72,7 +70,7 @@ export const useCreateInputMessageInputContext = ({ */ channelId?: string; }) => { - const editingDep = editing ? editing.id : ''; + // const editingDep = editing ? editing.id : ''; const inputMessageInputContext: InputMessageInputContextValue = useMemo( () => ({ @@ -99,7 +97,6 @@ export const useCreateInputMessageInputContext = ({ AutoCompleteSuggestionItem, AutoCompleteSuggestionList, CameraSelectorIcon, - clearEditingState, CommandInput, CommandsButton, compressImageQuality, @@ -107,7 +104,6 @@ export const useCreateInputMessageInputContext = ({ CreatePollContent, CreatePollIcon, doFileUploadRequest, - editing, editMessage, FileAttachmentUploadPreview, FileSelectorIcon, @@ -140,7 +136,7 @@ export const useCreateInputMessageInputContext = ({ VideoRecorderSelectorIcon, }), // eslint-disable-next-line react-hooks/exhaustive-deps - [compressImageQuality, channelId, editingDep, CreatePollContent, showPollCreationDialog], + [compressImageQuality, channelId, CreatePollContent, showPollCreationDialog], ); return inputMessageInputContext; diff --git a/package/src/components/Channel/hooks/useCreateMessagesContext.ts b/package/src/components/Channel/hooks/useCreateMessagesContext.ts index 7fc58ad9a2..a6ff1ef0a8 100644 --- a/package/src/components/Channel/hooks/useCreateMessagesContext.ts +++ b/package/src/components/Channel/hooks/useCreateMessagesContext.ts @@ -96,7 +96,6 @@ export const useCreateMessagesContext = ({ ScrollToBottomButton, selectReaction, sendReaction, - setEditingState, shouldShowUnreadUnderlay, StreamingMessageView, supportedReactions, @@ -212,7 +211,6 @@ export const useCreateMessagesContext = ({ ScrollToBottomButton, selectReaction, sendReaction, - setEditingState, shouldShowUnreadUnderlay, StreamingMessageView, supportedReactions, diff --git a/package/src/components/Message/Message.tsx b/package/src/components/Message/Message.tsx index 5faafd56d3..b3f42cd86d 100644 --- a/package/src/components/Message/Message.tsx +++ b/package/src/components/Message/Message.tsx @@ -9,7 +9,6 @@ import { useMessageActions } from './hooks/useMessageActions'; import { useProcessReactions } from './hooks/useProcessReactions'; import { messageActions as defaultMessageActions } from './utils/messageActions'; -import { useMessageComposer } from '../../contexts'; import { ChannelContextValue, useChannelContext, @@ -19,6 +18,10 @@ import { KeyboardContextValue, useKeyboardContext, } from '../../contexts/keyboardContext/KeyboardContext'; +import { + MessageComposerAPIContextValue, + useMessageComposerAPIContext, +} from '../../contexts/messageComposerContext/MessageComposerAPIContext'; import { MessageContextValue, MessageProvider } from '../../contexts/messageContext/MessageContext'; import { MessagesContextValue, @@ -32,7 +35,6 @@ import { useTranslationContext, } from '../../contexts/translationContext/TranslationContext'; -import { useStableCallback } from '../../hooks'; import { isVideoPlayerAvailable, NativeHandlers } from '../../native'; import { FileTypes } from '../../types/types'; import { @@ -143,10 +145,7 @@ export type MessagePropsWithContext = Pick< 'groupStyles' | 'handleReaction' | 'message' | 'isMessageAIGenerated' | 'readBy' > > & - Pick< - MessageContextValue, - 'groupStyles' | 'message' | 'isMessageAIGenerated' | 'readBy' | 'setQuotedMessage' - > & + Pick & Pick< MessagesContextValue, | 'sendReaction' @@ -178,7 +177,6 @@ export type MessagePropsWithContext = Pick< | 'deleteReaction' | 'retrySendMessage' | 'selectReaction' - | 'setEditingState' | 'supportedReactions' | 'updateMessage' | 'PollContent' @@ -201,7 +199,7 @@ export type MessagePropsWithContext = Pick< onThreadSelect?: (message: LocalMessage) => void; showUnreadUnderlay?: boolean; style?: StyleProp; - }; + } & Pick; /** * Since this component doesn't consume `messages` from `MessagesContext`, @@ -944,10 +942,7 @@ export const Message = (props: MessageProps) => { const { openThread } = useThreadContext(); const { t } = useTranslationContext(); const readBy = useMemo(() => getReadState(message, read), [message, read]); - const messageComposer = useMessageComposer(); - const setQuotedMessage = useStableCallback((message: LocalMessage | null) => - messageComposer.setQuotedMessage(message), - ); + const { setQuotedMessage, setEditingState } = useMessageComposerAPIContext(); return ( { messagesContext, openThread, readBy, + setEditingState, setQuotedMessage, t, }} diff --git a/package/src/components/Message/MessageSimple/MessageBounce.tsx b/package/src/components/Message/MessageSimple/MessageBounce.tsx index 093f99d3ca..eecf289a98 100644 --- a/package/src/components/Message/MessageSimple/MessageBounce.tsx +++ b/package/src/components/Message/MessageSimple/MessageBounce.tsx @@ -1,6 +1,10 @@ import React from 'react'; import { Alert } from 'react-native'; +import { + MessageComposerAPIContextValue, + useMessageComposerAPIContext, +} from '../../../contexts/messageComposerContext/MessageComposerAPIContext'; import { MessageContextValue, useMessageContext, @@ -13,11 +17,11 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran export type MessageBouncePropsWithContext = Pick< MessagesContextValue, - 'setEditingState' | 'removeMessage' | 'retrySendMessage' + 'removeMessage' | 'retrySendMessage' > & Pick & { setIsBounceDialogOpen: React.Dispatch>; - }; + } & Pick; export const MessageBounceWithContext = (props: MessageBouncePropsWithContext) => { const { t } = useTranslationContext(); @@ -91,7 +95,8 @@ export type MessageBounceProps = Partial & { export const MessageBounce = (props: MessageBounceProps) => { const { message } = useMessageContext(); - const { removeMessage, retrySendMessage, setEditingState } = useMessagesContext(); + const { removeMessage, retrySendMessage } = useMessagesContext(); + const { setEditingState } = useMessageComposerAPIContext(); return ( & Pick & Pick & - Pick) => { + Pick & + Pick) => { const { t } = useTranslationContext(); const handleResendMessage = () => retrySendMessage(message); diff --git a/package/src/components/Message/hooks/useMessageActions.tsx b/package/src/components/Message/hooks/useMessageActions.tsx index 767e89d473..b901ffbd32 100644 --- a/package/src/components/Message/hooks/useMessageActions.tsx +++ b/package/src/components/Message/hooks/useMessageActions.tsx @@ -6,6 +6,7 @@ import { useMessageActionHandlers } from './useMessageActionHandlers'; import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext'; import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext'; +import { MessageComposerAPIContextValue } from '../../../contexts/messageComposerContext/MessageComposerAPIContext'; import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext'; import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; @@ -50,7 +51,6 @@ export type MessageActionsHookProps = Pick< | 'removeMessage' | 'deleteReaction' | 'retrySendMessage' - | 'setEditingState' | 'selectReaction' | 'supportedReactions' | 'updateMessage' @@ -61,7 +61,7 @@ export type MessageActionsHookProps = Pick< Pick & Pick & { onThreadSelect?: (message: LocalMessage) => void; - }; + } & Pick; export const useMessageActions = ({ channel, diff --git a/package/src/components/MessageInput/MessageInput.tsx b/package/src/components/MessageInput/MessageInput.tsx index d883f8d595..9430901f36 100644 --- a/package/src/components/MessageInput/MessageInput.tsx +++ b/package/src/components/MessageInput/MessageInput.tsx @@ -36,9 +36,9 @@ import { useChannelContext, } from '../../contexts/channelContext/ChannelContext'; import { - MessageComposerContextValue, - useMessageComposerContext, -} from '../../contexts/messageComposerContext/MessageComposerContext'; + MessageComposerAPIContextValue, + useMessageComposerAPIContext, +} from '../../contexts/messageComposerContext/MessageComposerAPIContext'; import { useAttachmentManagerState } from '../../contexts/messageInputContext/hooks/useAttachmentManagerState'; import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer'; import { useMessageComposerHasSendableData } from '../../contexts/messageInputContext/hooks/useMessageComposerHasSendableData'; @@ -142,7 +142,6 @@ type MessageInputPropsWithContext = Partial< | 'AutoCompleteSuggestionList' | 'cooldownEndsAt' | 'CooldownTimer' - | 'clearEditingState' | 'closeAttachmentPicker' | 'compressImageQuality' | 'doFileUploadRequest' @@ -173,7 +172,7 @@ type MessageInputPropsWithContext = Partial< > & Pick & Pick & - Pick; + Pick & { editing: boolean }; const textComposerStateSelector = (state: TextComposerState) => ({ command: state.command, @@ -773,7 +772,6 @@ export const MessageInput = (props: MessageInputProps) => { const ownCapabilities = useOwnCapabilitiesContext(); const { channel, members, threadList, watchers } = useChannelContext(); - const { editing } = useMessageComposerContext(); const { additionalTextInputProps, @@ -794,7 +792,6 @@ export const MessageInput = (props: MessageInputProps) => { AudioRecordingWaveform, AutoCompleteSuggestionList, CameraSelectorIcon, - clearEditingState, closeAttachmentPicker, closePollCreationDialog, compressImageQuality, @@ -826,6 +823,9 @@ export const MessageInput = (props: MessageInputProps) => { VideoRecorderSelectorIcon, } = useMessageInputContext(); const { bottomInset, bottomSheetRef, selectedPicker } = useAttachmentPickerContext(); + const messageComposer = useMessageComposer(); + const editing = !!messageComposer.editedMessage; + const { clearEditingState } = useMessageComposerAPIContext(); const { Reply } = useMessagesContext(); diff --git a/package/src/components/MessageInput/components/InputEditingStateHeader.tsx b/package/src/components/MessageInput/components/InputEditingStateHeader.tsx index f3d4215390..a30d3478dc 100644 --- a/package/src/components/MessageInput/components/InputEditingStateHeader.tsx +++ b/package/src/components/MessageInput/components/InputEditingStateHeader.tsx @@ -1,18 +1,18 @@ import React, { useCallback } from 'react'; import { Pressable, StyleSheet, Text, View } from 'react-native'; -import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/useMessageComposer'; import { - MessageInputContextValue, - useMessageInputContext, -} from '../../../contexts/messageInputContext/MessageInputContext'; + MessageComposerAPIContextValue, + useMessageComposerAPIContext, +} from '../../../contexts/messageComposerContext/MessageComposerAPIContext'; +import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/useMessageComposer'; import { useTheme } from '../../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext'; import { CircleClose, Edit } from '../../../icons'; export type InputEditingStateHeaderProps = Partial< - Pick + Pick >; export const InputEditingStateHeader = ({ @@ -20,7 +20,7 @@ export const InputEditingStateHeader = ({ }: InputEditingStateHeaderProps) => { const messageComposer = useMessageComposer(); const { t } = useTranslationContext(); - const { clearEditingState: contextClearEditingState } = useMessageInputContext(); + const { clearEditingState: contextClearEditingState } = useMessageComposerAPIContext(); const clearEditingState = propClearEditingState || contextClearEditingState; diff --git a/package/src/contexts/messageComposerContext/MessageComposerAPIContext.tsx b/package/src/contexts/messageComposerContext/MessageComposerAPIContext.tsx new file mode 100644 index 0000000000..a75bc894ce --- /dev/null +++ b/package/src/contexts/messageComposerContext/MessageComposerAPIContext.tsx @@ -0,0 +1,52 @@ +import React, { useContext, useMemo } from 'react'; + +import { LocalMessage, type MessageComposer } from 'stream-chat'; + +import { useStableCallback } from '../../hooks'; +import { useMessageComposer } from '../messageInputContext/hooks/useMessageComposer'; +import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue'; +import { isTestEnvironment } from '../utils/isTestEnvironment'; + +export type MessageComposerAPIContextValue = { + setQuotedMessage: MessageComposer['setQuotedMessage']; + setEditingState: (message?: LocalMessage) => void; + clearEditingState: () => void; +}; + +export const MessageComposerAPIContext = React.createContext( + DEFAULT_BASE_CONTEXT_VALUE as MessageComposerAPIContextValue, +); + +type Props = React.PropsWithChildren<{ + value: Pick; +}>; + +export const MessageComposerAPIProvider = ({ children, value }: Props) => { + const messageComposer = useMessageComposer(); + + const setQuotedMessage = useStableCallback((message: LocalMessage | null) => + messageComposer.setQuotedMessage(message), + ); + + const contextValue = useMemo(() => ({ setQuotedMessage, ...value }), [setQuotedMessage, value]); + + return ( + + {children} + + ); +}; + +export const useMessageComposerAPIContext = () => { + const contextValue = useContext( + MessageComposerAPIContext, + ) as unknown as MessageComposerAPIContextValue; + + if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) { + throw new Error( + 'The useMessageComposerAPIContext hook was called outside of the MessageComposerAPIContext provider.', + ); + } + + return contextValue; +}; diff --git a/package/src/contexts/messageComposerContext/MessageComposerContext.tsx b/package/src/contexts/messageComposerContext/MessageComposerContext.tsx index e06833ad29..58ba49be93 100644 --- a/package/src/contexts/messageComposerContext/MessageComposerContext.tsx +++ b/package/src/contexts/messageComposerContext/MessageComposerContext.tsx @@ -1,8 +1,14 @@ -import React, { useContext } from 'react'; +import React, { useContext, useMemo, useState } from 'react'; import { LocalMessage } from 'stream-chat'; +import { + MessageComposerAPIContextValue, + MessageComposerAPIProvider, +} from './MessageComposerAPIContext'; + import { ChannelProps } from '../../components'; +import { useStableCallback } from '../../hooks'; import { ThreadContextValue } from '../threadContext/ThreadContext'; import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue'; import { isTestEnvironment } from '../utils/isTestEnvironment'; @@ -11,6 +17,10 @@ export type MessageComposerContextValue = { channel: ChannelProps['channel']; thread: ThreadContextValue['thread']; threadInstance: ThreadContextValue['threadInstance']; + /** + * Variable that tracks the editing state. + * It is defined with message type if the editing state is true, else its undefined. + */ editing?: LocalMessage; }; @@ -19,12 +29,37 @@ export const MessageComposerContext = React.createContext( ); type Props = React.PropsWithChildren<{ - value: MessageComposerContextValue; + value: Pick; }>; -export const MessageComposerProvider = ({ children, value }: Props) => ( - {children} -); +export const MessageComposerProvider = ({ children, value }: Props) => { + const [editing, setEditing] = useState(undefined); + + const setEditingState: MessageComposerAPIContextValue['setEditingState'] = useStableCallback( + (message) => { + setEditing(message); + }, + ); + + const clearEditingState: MessageComposerAPIContextValue['clearEditingState'] = useStableCallback( + () => setEditing(undefined), + ); + + const messageComposerContextValue = useMemo(() => ({ editing, ...value }), [editing, value]); + + const messageComposerAPIContextValue = useMemo( + () => ({ clearEditingState, setEditingState }), + [clearEditingState, setEditingState], + ); + + return ( + + + {children} + + + ); +}; export const useMessageComposerContext = () => { const contextValue = useContext(MessageComposerContext) as unknown as MessageComposerContextValue; diff --git a/package/src/contexts/messageContext/MessageContext.tsx b/package/src/contexts/messageContext/MessageContext.tsx index 78d75da95f..824e217a40 100644 --- a/package/src/contexts/messageContext/MessageContext.tsx +++ b/package/src/contexts/messageContext/MessageContext.tsx @@ -1,6 +1,6 @@ import React, { PropsWithChildren, useContext } from 'react'; -import type { Attachment, LocalMessage, MessageComposer } from 'stream-chat'; +import type { Attachment, LocalMessage } from 'stream-chat'; import type { ActionHandler } from '../../components/Attachment/Attachment'; import { ReactionSummary } from '../../components/Message/hooks/useProcessReactions'; @@ -14,6 +14,7 @@ import type { MessageContentType } from '../../contexts/messagesContext/Messages import type { DeepPartial } from '../../contexts/themeContext/ThemeContext'; import type { Theme } from '../../contexts/themeContext/utils/theme'; +import { MessageComposerAPIContextValue } from '../messageComposerContext/MessageComposerAPIContext'; import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue'; export type Alignment = 'right' | 'left'; @@ -119,8 +120,8 @@ export type MessageContextValue = { preventPress?: boolean; /** Whether or not the avatar show show next to Message */ showAvatar?: boolean; - setQuotedMessage: MessageComposer['setQuotedMessage']; -} & Pick; +} & Pick & + Pick; export const MessageContext = React.createContext( DEFAULT_BASE_CONTEXT_VALUE as MessageContextValue, diff --git a/package/src/contexts/messageInputContext/MessageInputContext.tsx b/package/src/contexts/messageInputContext/MessageInputContext.tsx index b40bc80be4..505700b0a4 100644 --- a/package/src/contexts/messageInputContext/MessageInputContext.tsx +++ b/package/src/contexts/messageInputContext/MessageInputContext.tsx @@ -70,6 +70,7 @@ import { } from '../attachmentPickerContext/AttachmentPickerContext'; import { useChannelContext } from '../channelContext/ChannelContext'; import { useChatContext } from '../chatContext/ChatContext'; +import { useMessageComposerAPIContext } from '../messageComposerContext/MessageComposerAPIContext'; import { useThreadContext } from '../threadContext/ThreadContext'; import { useTranslationContext } from '../translationContext/TranslationContext'; import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue'; @@ -242,8 +243,6 @@ export type InputMessageInputContextValue = { ImageAttachmentUploadPreview: React.ComponentType; FileAttachmentUploadPreview: React.ComponentType; VideoAttachmentUploadPreview: React.ComponentType; - - clearEditingState: () => void; /** * Custom UI component for commands button. * @@ -365,11 +364,6 @@ export type InputMessageInputContextValue = { */ doFileUploadRequest?: UploadRequestFn; - /** - * Variable that tracks the editing state. - * It is defined with message type if the editing state is true, else its undefined. - */ - editing?: LocalMessage; /** * Handler for when the attach button is pressed. */ @@ -434,6 +428,7 @@ export const MessageInputProvider = ({ const { client, enableOfflineSupport } = useChatContext(); const { isCommandUIEnabled, uploadAbortControllerRef } = useChannelContext(); + const { clearEditingState } = useMessageComposerAPIContext(); const { thread } = useThreadContext(); const { t } = useTranslationContext(); const inputBoxRef = useRef(null); @@ -607,7 +602,7 @@ export const MessageInputProvider = ({ if (editedMessage && editedMessage.type !== 'error') { try { - value.clearEditingState(); + clearEditingState(); await value.editMessage({ localMessage, options: sendOptions }); } catch (error) { console.log('Failed to edit message:', error); diff --git a/package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts b/package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts index 68386e4b30..cc0cc268df 100644 --- a/package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts +++ b/package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts @@ -27,7 +27,6 @@ export const useCreateMessageInputContext = ({ AutoCompleteSuggestionItem, AutoCompleteSuggestionList, CameraSelectorIcon, - clearEditingState, closeAttachmentPicker, closePollCreationDialog, CommandInput, @@ -37,7 +36,6 @@ export const useCreateMessageInputContext = ({ CooldownTimer, CreatePollContent, CreatePollIcon, - editing, editMessage, FileAttachmentUploadPreview, FileSelectorIcon, @@ -82,7 +80,6 @@ export const useCreateMessageInputContext = ({ VideoAttachmentUploadPreview, VideoRecorderSelectorIcon, }: MessageInputContextValue & Pick) => { - const editingdep = editing?.id; const threadId = thread?.id; const messageInputContext: MessageInputContextValue = useMemo( @@ -110,7 +107,6 @@ export const useCreateMessageInputContext = ({ AutoCompleteSuggestionItem, AutoCompleteSuggestionList, CameraSelectorIcon, - clearEditingState, closeAttachmentPicker, closePollCreationDialog, CommandInput, @@ -120,7 +116,6 @@ export const useCreateMessageInputContext = ({ CooldownTimer, CreatePollContent, CreatePollIcon, - editing, editMessage, FileAttachmentUploadPreview, FileSelectorIcon, @@ -167,7 +162,6 @@ export const useCreateMessageInputContext = ({ // eslint-disable-next-line react-hooks/exhaustive-deps [ cooldownEndsAt, - editingdep, isCommandUIEnabled, sendThreadMessageInChannel, threadId, diff --git a/package/src/contexts/messageInputContext/hooks/useMessageComposer.ts b/package/src/contexts/messageInputContext/hooks/useMessageComposer.ts index d1d46ccf1b..a2e3038a9b 100644 --- a/package/src/contexts/messageInputContext/hooks/useMessageComposer.ts +++ b/package/src/contexts/messageInputContext/hooks/useMessageComposer.ts @@ -3,19 +3,26 @@ import { useEffect, useMemo } from 'react'; import { FixedSizeQueueCache, MessageComposer } from 'stream-chat'; import { useChatContext } from '../../../contexts/chatContext/ChatContext'; -import { useMessageComposerContext } from '../../messageComposerContext/MessageComposerContext'; +import { + MessageComposerContextValue, + useMessageComposerContext, +} from '../../messageComposerContext/MessageComposerContext'; const queueCache = new FixedSizeQueueCache(64); export const useMessageComposer = () => { - const { client } = useChatContext(); - const { - channel, - editing: editedMessage, - thread: parentMessage, - threadInstance, - } = useMessageComposerContext(); + const messageComposerContext = useMessageComposerContext(); + + return useCreateMessageComposer(messageComposerContext); +}; +export const useCreateMessageComposer = ({ + editing: editedMessage, + thread: parentMessage, + threadInstance, + channel, +}: Pick) => { + const { client } = useChatContext(); // legacy thread will receive new composer const cachedEditedMessage = useMemo(() => { diff --git a/package/src/contexts/messagesContext/MessagesContext.tsx b/package/src/contexts/messagesContext/MessagesContext.tsx index 3d3e35212c..6910bf09a8 100644 --- a/package/src/contexts/messagesContext/MessagesContext.tsx +++ b/package/src/contexts/messagesContext/MessagesContext.tsx @@ -302,7 +302,6 @@ export type MessagesContextValue = Pick; sendReaction: (type: string, messageId: string) => Promise; - setEditingState: (message?: LocalMessage) => void; /** * UI component for StreamingMessageView. Displays the text of a message with a typewriter animation. */ From 82df86477a5786064c7be5b9816aeda02992c7c8 Mon Sep 17 00:00:00 2001 From: Khushal Agarwal Date: Fri, 6 Jun 2025 10:39:52 +0530 Subject: [PATCH 2/2] fix: remove props inport and remove comments --- .../Channel/hooks/useCreateInputMessageInputContext.ts | 2 -- .../src/components/Message/hooks/useMessageActionHandlers.ts | 4 ++-- package/src/components/Message/hooks/useMessageActions.tsx | 4 ++-- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts b/package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts index 0c59718abb..f88315702a 100644 --- a/package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts +++ b/package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts @@ -70,8 +70,6 @@ export const useCreateInputMessageInputContext = ({ */ channelId?: string; }) => { - // const editingDep = editing ? editing.id : ''; - const inputMessageInputContext: InputMessageInputContextValue = useMemo( () => ({ additionalTextInputProps, diff --git a/package/src/components/Message/hooks/useMessageActionHandlers.ts b/package/src/components/Message/hooks/useMessageActionHandlers.ts index 96d68c3492..3f835dca3c 100644 --- a/package/src/components/Message/hooks/useMessageActionHandlers.ts +++ b/package/src/components/Message/hooks/useMessageActionHandlers.ts @@ -25,8 +25,8 @@ export const useMessageActionHandlers = ({ > & Pick & Pick & - Pick & - Pick) => { + Pick & + Pick) => { const { t } = useTranslationContext(); const handleResendMessage = () => retrySendMessage(message); diff --git a/package/src/components/Message/hooks/useMessageActions.tsx b/package/src/components/Message/hooks/useMessageActions.tsx index b901ffbd32..7f45b451ec 100644 --- a/package/src/components/Message/hooks/useMessageActions.tsx +++ b/package/src/components/Message/hooks/useMessageActions.tsx @@ -58,10 +58,10 @@ export type MessageActionsHookProps = Pick< Pick & Pick & Pick & - Pick & + Pick & Pick & { onThreadSelect?: (message: LocalMessage) => void; - } & Pick; + } & Pick; export const useMessageActions = ({ channel,