feat(MessageComposer): introduce context for custom composers

examples/vite/src/App.tsx

@@ -68,6 +68,7 @@ import {
   SegmentedReactionsList,
 } from './CustomMessageUi';
 import { ConfigurableMessageActions } from './CustomMessageActions';
+import { InlineEditableMessage } from './InlineEditMessage';
 import { SidebarToggle } from './Sidebar/SidebarToggle.tsx';
 import { CommandModeAttachmentSelector } from './CommandModeAttachmentSelector.tsx';
 
@@ -424,6 +425,7 @@ const App = () => {
         HeaderStartContent: SidebarToggle,
         MessageActions: ConfigurableMessageActions,
         AttachmentSelector: CommandModeAttachmentSelector,
+        Message: InlineEditableMessage,
         ...messageUiOverrides,
       }}
     >

examples/vite/src/AppSettings/state.ts

@@ -25,6 +25,7 @@ export type MessageActionsSettingsState = {
     delete: {
       enableOptionConfiguration: boolean;
     };
+    inlineEdit: boolean;
     markOwnUnread: boolean;
     viewMessageInfo: boolean;
   };
@@ -121,6 +122,7 @@ const defaultAppSettingsState: AppSettingsState = {
       delete: {
         enableOptionConfiguration: false,
       },
+      inlineEdit: false,
       markOwnUnread: false,
       viewMessageInfo: false,
     },

examples/vite/src/AppSettings/tabs/MessageActions/MessageActionsTab.tsx

@@ -90,6 +90,33 @@ export const MessageActionsTab = ({ close }: MessageActionsTabProps) => {
             title='Show JSON viewer action in the message actions menu'
           />
         </div>
+
+        <div className='app__settings-modal__field'>
+          <div className='app__settings-modal__field-label'>
+            Enable inline message editing
+          </div>
+          <SwitchField
+            checked={customMessageActions.inlineEdit}
+            id='inline-edit-message-switch'
+            onChange={(event) =>
+              appSettingsStore.partialNext({
+                messageActions: {
+                  ...messageActions,
+                  customMessageActions: {
+                    ...customMessageActions,
+                    inlineEdit: event.target.checked,
+                  },
+                },
+              })
+            }
+            title='Add an "Edit inline" action that swaps the message bubble for a MessageComposer in place'
+          />
+          <div className='app__settings-modal__field-comment'>
+            Adds an <strong>&ldquo;Edit inline&rdquo;</strong> action that replaces the
+            message with a <code>MessageComposer</code> scoped to that message via
+            <code> MessageComposerControllerProvider</code>.
+          </div>
+        </div>
       </SettingsTabBody>
     </div>
   );

examples/vite/src/InlineEditMessage/InlineEditMessage.scss

@@ -0,0 +1,22 @@
+.app__inline-edit-message {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.5rem 0;
+  width: 100%;
+}
+
+.app__inline-edit-message__cancel {
+  align-self: flex-end;
+  background: transparent;
+  border: 1px solid var(--str-chat__secondary-surface-color, #dbdde1);
+  border-radius: 999px;
+  color: var(--str-chat__text-color, inherit);
+  cursor: pointer;
+  font-size: 0.85rem;
+  padding: 0.25rem 0.75rem;
+
+  &:hover {
+    background: var(--str-chat__secondary-surface-color, #f7f7f8);
+  }
+}

examples/vite/src/InlineEditMessage/InlineEditMessage.tsx

@@ -0,0 +1,183 @@
+import {
+  type ComponentProps,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { MessageComposer as MessageComposerController } from 'stream-chat';
+import type { MessageComposerState } from 'stream-chat';
+import { useChannelStateContext } from 'stream-chat-react';
+import {
+  ContextMenuButton,
+  defaultMessageActionSet,
+  MessageUI as DefaultMessageUI,
+  IconEdit,
+  MessageActions,
+  type MessageActionSetItem,
+  MessageComposer,
+  MessageComposerControllerProvider,
+  type MessageUIComponentProps,
+  useChatContext,
+  useComponentContext,
+  useContextMenuContext,
+  useMessageContext,
+  useStateStore,
+  useTranslationContext,
+  WithComponents,
+} from 'stream-chat-react';
+
+import { useAppSettingsSelector } from '../AppSettings';
+
+type InlineEditContextValue = {
+  isEditing: boolean;
+  startEditing: () => void;
+  stopEditing: () => void;
+};
+
+const InlineEditContext = createContext<InlineEditContextValue | undefined>(undefined);
+
+const useInlineEditContext = () => {
+  const value = useContext(InlineEditContext);
+  if (!value) {
+    throw new Error('useInlineEditContext must be used within an InlineEditableMessage');
+  }
+  return value;
+};
+
+const InlineEditAction = () => {
+  const { closeMenu } = useContextMenuContext();
+  const { startEditing } = useInlineEditContext();
+  const { t } = useTranslationContext();
+
+  return (
+    <ContextMenuButton
+      aria-label={t('aria/Edit Message Inline')}
+      className='str-chat__message-actions-list-item-button'
+      Icon={IconEdit}
+      onClick={() => {
+        startEditing();
+        closeMenu();
+      }}
+    >
+      {t('Edit inline')}
+    </ContextMenuButton>
+  );
+};
+
+const inlineEditActionSetItem: MessageActionSetItem = {
+  Component: InlineEditAction,
+  placement: 'dropdown',
+  type: 'editInline',
+};
+
+const insertInlineEditAction = (
+  actionSet: MessageActionSetItem[],
+): MessageActionSetItem[] => {
+  const editIndex = actionSet.findIndex((item) => 'type' in item && item.type === 'edit');
+
+  if (editIndex < 0) return [...actionSet, inlineEditActionSetItem];
+
+  return [
+    ...actionSet.slice(0, editIndex),
+    inlineEditActionSetItem,
+    ...actionSet.slice(editIndex),
+  ];
+};
+
+const InlineEditComposer = ({ onExit }: { onExit: () => void }) => {
+  const { t } = useTranslationContext();
+
+  return (
+    <div className='app__inline-edit-message'>
+      <MessageComposer preventClearingOnUnmount />
+      <button className='app__inline-edit-message__cancel' onClick={onExit} type='button'>
+        {t('Cancel')}
+      </button>
+    </div>
+  );
+};
+
+const selector = (state: MessageComposerState) => ({
+  editing: state.editedMessage != null,
+});
+
+export const InlineEditableMessage = (props: MessageUIComponentProps) => {
+  const { client } = useChatContext();
+  const { channel } = useChannelStateContext();
+  const { message } = useMessageContext();
+  const inlineEditEnabled = useAppSettingsSelector(
+    (state) => state.messageActions.customMessageActions,
+  ).inlineEdit;
+
+  const { MessageActions: OuterMessageActions = MessageActions } = useComponentContext();
+
+  const [editingComposer] = useState(
+    () =>
+      new MessageComposerController({
+        compositionContext: channel,
+        client,
+        config: { drafts: { enabled: false } },
+      }),
+  );
+
+  const { editing } = useStateStore(editingComposer.state, selector);
+
+  // If the setting is turned off mid-edit, abandon the in-progress edit so the
+  // message doesn't stay stuck in composer view with no way to submit it.
+  useEffect(() => {
+    if (!inlineEditEnabled && editing) editingComposer.clear();
+  }, [editing, editingComposer, inlineEditEnabled]);
+
+  const startEditing = useCallback(() => {
+    editingComposer.initState({ composition: message });
+  }, [editingComposer, message]);
+  const stopEditing = useCallback(() => {
+    editingComposer.clear();
+  }, [editingComposer]);
+
+  const contextValue = useMemo<InlineEditContextValue>(
+    () => ({ isEditing: editing, startEditing, stopEditing }),
+    [editing, startEditing, stopEditing],
+  );
+
+  const MessageActionsWithInlineEdit = useMemo(() => {
+    const Component = (actionsProps: ComponentProps<typeof MessageActions>) => {
+      const messageActionSet = useMemo(
+        () =>
+          insertInlineEditAction(
+            actionsProps.messageActionSet ?? defaultMessageActionSet,
+          ),
+        [actionsProps.messageActionSet],
+      );
+
+      return (
+        <OuterMessageActions {...actionsProps} messageActionSet={messageActionSet} />
+      );
+    };
+    Component.displayName = 'MessageActionsWithInlineEdit';
+    return Component;
+  }, [OuterMessageActions]);
+
+  if (!inlineEditEnabled) {
+    return <DefaultMessageUI {...props} />;
+  }
+
+  if (editing) {
+    return (
+      <MessageComposerControllerProvider messageComposerController={editingComposer}>
+        <InlineEditComposer onExit={stopEditing} />
+      </MessageComposerControllerProvider>
+    );
+  }
+
+  return (
+    <InlineEditContext.Provider value={contextValue}>
+      <WithComponents overrides={{ MessageActions: MessageActionsWithInlineEdit }}>
+        <DefaultMessageUI {...props} />
+      </WithComponents>
+    </InlineEditContext.Provider>
+  );
+};

examples/vite/src/InlineEditMessage/index.ts

@@ -0,0 +1 @@
+export { InlineEditableMessage } from './InlineEditMessage';

examples/vite/src/index.scss

@@ -9,6 +9,7 @@
 @import url('./AppSettings/AppSettings.scss') layer(stream-app-overrides);
 @import url('./CustomMessageActions/CustomMessageActions.scss')
 layer(stream-app-overrides);
+@import url('./InlineEditMessage/InlineEditMessage.scss') layer(stream-app-overrides);
 @import url('./SystemNotification/SystemNotification.scss') layer(stream-app-overrides);
 @import url('./AccessibilityNavigation/ReturnToSkipNavigation.scss')
 layer(stream-app-overrides);

src/components/MessageComposer/MessageComposer.tsx

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from 'react';
-import React, { useEffect } from 'react';
+import React, { useContext, useEffect } from 'react';
 
 import { MessageComposerUI as DefaultMessageComposerUI } from './MessageComposerUI';
 import { useMessageComposerController } from './hooks';
@@ -11,11 +11,34 @@ import { MessageComposerContextProvider } from '../../context/MessageComposerCon
 import { DialogManagerProvider } from '../../context';
 import { useStableId } from '../UtilityComponents/useStableId';
 
-import type { LocalMessage, Message, SendMessageOptions } from 'stream-chat';
+import type {
+  LocalMessage,
+  Message,
+  MessageComposer as MessageComposerController,
+  SendMessageOptions,
+} from 'stream-chat';
 
 import type { CustomAudioRecordingConfig } from '../MediaRecorder';
 import { useRegisterDropHandlers } from './WithDragAndDropUpload';
 
+const MessageComposerControllerContext = React.createContext<
+  MessageComposerController | undefined
+>(undefined);
+
+export const MessageComposerControllerProvider = ({
+  children,
+  messageComposerController,
+}: PropsWithChildren<{
+  messageComposerController?: MessageComposerController;
+}>) => (
+  <MessageComposerControllerContext.Provider value={messageComposerController}>
+    {children}
+  </MessageComposerControllerContext.Provider>
+);
+
+export const useMessageComposerControllerContext = () =>
+  useContext(MessageComposerControllerContext);
+
 export type EmojiSearchIndexResult = {
   id: string;
   name: string;
@@ -79,6 +102,10 @@ export type MessageComposerProps = {
    * ```
    */
   shouldSubmit?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => boolean;
+  /**
+   * When set to `true` disables clearing established state of the MessageComposerController upon component unmount.
+   */
+  preventClearingOnUnmount?: boolean;
 };
 
 const MessageComposerProvider = (props: PropsWithChildren<MessageComposerProps>) => {
@@ -99,9 +126,15 @@ const MessageComposerProvider = (props: PropsWithChildren<MessageComposerProps>)
       // for a disconnected channel
       if (messageComposer.channel.disconnected) return;
 
-      messageComposer.createDraft().finally(() => messageComposer.clear());
+      const promise = messageComposer.config.drafts.enabled
+        ? messageComposer.createDraft().catch(console.error)
+        : Promise.resolve();
+
+      if (props.preventClearingOnUnmount) return;
+
+      promise.finally(() => messageComposer.clear());
     },
-    [messageComposer],
+    [messageComposer, props.preventClearingOnUnmount],
   );
 
   useEffect(() => {