Merge pull request #1123 from GetStream/send-message-update

Send message update

Author: DanC5

CHANGELOG.md

@@ -4,7 +4,7 @@
 
 ### Feature
 
-- Add option to pass `customMessageData` to the `ChannelActionContext` `sendMessage` function [#1121](https://github.com/GetStream/stream-chat-react/pull/1121)
+- Add option to pass `customMessageData` to the `ChannelActionContext` `sendMessage` function [#1121](https://github.com/GetStream/stream-chat-react/pull/1123)
 
 ### Chore
 

docusaurus/docs/React/contexts/channel-action-context.mdx

@@ -100,15 +100,15 @@ The function to remove a `message` from `MessageList`, handled by the `Channel`
 
 ### retrySendMessage
 
-The function to resend a `message`, handled by the `Channel` component. Takes a `message` object.
+The function to resend a `message`, handled by the `Channel` component.
 
 | Type     |
 | -------- |
 | function |
 
 ### sendMessage
 
-The function to send a `message` on `Channel`, takes a `message` object.
+The function to send a `message` on `Channel`. Takes a `message` object with the basic message information as the first argument, and custom data as the second argument.
 
 | Type     |
 | -------- |

docusaurus/docs/React/contexts/message-input-context.mdx

@@ -202,9 +202,9 @@ Opens the `EmojiPicker` component on Enter or Spacebar key down.
 
 Function that runs onSubmit to the underlying `textarea` component.
 
-| Type                                      |
-| ----------------------------------------- |
-| (event: React.BaseSyntheticEvent) => void |
+| Type                                                                  |
+| --------------------------------------------------------------------- |
+| (event: React.BaseSyntheticEvent, customMessageData?: Message) => void |
 
 ### imageOrder
 

examples/typescript-app/src/components/ChannelInner.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+
+import {
+    ChannelHeader,
+    MessageList,
+    MessageInput,
+    Thread,
+    Window,
+  } from 'stream-chat-react';
+
+export const ChannelInner = () => {
+    return (
+        <>
+            <Window>
+                <ChannelHeader />
+                <MessageList />
+                <MessageInput focus />
+            </Window>
+            <Thread />
+      </>
+    )
+}

src/components/Channel/Channel.tsx

@@ -569,6 +569,7 @@ const ChannelInner = <
       message:
         | MessageToSend<At, Ch, Co, Ev, Me, Re, Us>
         | StreamMessage<At, Ch, Co, Ev, Me, Re, Us>,
+      customMessageData?: Partial<Message<At, Me, Us>>,
     ) => {
       if (!channel) return;
 
@@ -586,6 +587,7 @@ const ChannelInner = <
         parent_id,
         quoted_message_id: quotedMessage?.id,
         text,
+        ...customMessageData,
       } as Message<At, Me, Us>;
 
       try {
@@ -650,12 +652,15 @@ const ChannelInner = <
   );
 
   const sendMessage = useCallback(
-    async ({
-      attachments = [],
-      mentioned_users = [],
-      parent = undefined,
-      text = '',
-    }: MessageToSend<At, Ch, Co, Ev, Me, Re, Us>) => {
+    async (
+      {
+        attachments = [],
+        mentioned_users = [],
+        parent = undefined,
+        text = '',
+      }: MessageToSend<At, Ch, Co, Ev, Me, Re, Us>,
+      customMessageData?: Partial<Message<At, Me, Us>>,
+    ) => {
       if (!channel) return;
 
       // remove error messages upon submit
@@ -667,7 +672,7 @@ const ChannelInner = <
       // first we add the message to the UI
       updateMessage(messagePreview);
 
-      await doSendMessage(messagePreview);
+      await doSendMessage(messagePreview, customMessageData);
     },
     [channel?.state, createMessagePreview, doSendMessage, updateMessage],
   );

src/components/MessageInput/hooks/useMessageInputState.ts

@@ -12,7 +12,7 @@ import { usePasteHandler } from './usePasteHandler';
 
 import type { EmojiData, NimbleEmojiIndex } from 'emoji-mart';
 import type { FileLike } from 'react-file-utils';
-import type { Attachment, UserResponse } from 'stream-chat';
+import type { Attachment, Message, UserResponse } from 'stream-chat';
 
 import type { MessageInputProps } from '../MessageInput';
 
@@ -122,12 +122,19 @@ export type MessageInputReducerAction<Us extends DefaultUserType<Us> = DefaultUs
   | RemoveFileUploadAction
   | AddMentionedUserAction<Us>;
 
-export type MessageInputHookProps<Us extends DefaultUserType<Us> = DefaultUserType> = {
+export type MessageInputHookProps<
+  At extends DefaultAttachmentType = DefaultAttachmentType,
+  Me extends DefaultMessageType = DefaultMessageType,
+  Us extends DefaultUserType<Us> = DefaultUserType
+> = {
   closeEmojiPicker: React.MouseEventHandler<HTMLElement>;
   emojiPickerRef: React.MutableRefObject<HTMLDivElement | null>;
   handleChange: React.ChangeEventHandler<HTMLTextAreaElement>;
   handleEmojiKeyDown: React.KeyboardEventHandler<HTMLSpanElement>;
-  handleSubmit: (event: React.BaseSyntheticEvent) => void;
+  handleSubmit: (
+    event: React.BaseSyntheticEvent,
+    customMessageData?: Partial<Message<At, Me, Us>>,
+  ) => void;
   insertText: (textToInsert: string) => void;
   isUploadEnabled: boolean;
   maxFilesLeft: number;
@@ -344,7 +351,7 @@ export const useMessageInputState = <
   V extends CustomTrigger = CustomTrigger
 >(
   props: MessageInputProps<At, Ch, Co, Ev, Me, Re, Us, V>,
-): MessageInputState<At, Us> & MessageInputHookProps<Us> & CommandsListState => {
+): MessageInputState<At, Us> & MessageInputHookProps<At, Me, Us> & CommandsListState => {
   const { message } = props;
 
   const { channel } = useChannelStateContext<At, Ch, Co, Ev, Me, Re, Us>();

src/components/MessageInput/hooks/useSubmitHandler.ts

@@ -2,7 +2,7 @@ import { useChannelActionContext } from '../../../context/ChannelActionContext';
 import { useChannelStateContext } from '../../../context/ChannelStateContext';
 import { useTranslationContext } from '../../../context/TranslationContext';
 
-import type { Attachment, UpdatedMessage } from 'stream-chat';
+import type { Attachment, Message, UpdatedMessage } from 'stream-chat';
 
 import type { MessageInputReducerAction, MessageInputState } from './useMessageInputState';
 import type { MessageInputProps } from '../MessageInput';
@@ -102,7 +102,10 @@ export const useSubmitHandler = <
     ];
   };
 
-  const handleSubmit = async (event: React.BaseSyntheticEvent) => {
+  const handleSubmit = async (
+    event: React.BaseSyntheticEvent,
+    customMessageData?: Partial<Message<At, Me, Us>>,
+  ) => {
     event.preventDefault();
 
     const trimmedMessage = text.trim();
@@ -171,7 +174,13 @@ export const useSubmitHandler = <
             channel.cid,
           );
         } else {
-          await sendMessage({ ...updatedMessage, parent });
+          await sendMessage(
+            {
+              ...updatedMessage,
+              parent,
+            },
+            customMessageData,
+          );
         }
 
         if (publishTypingEvent) await channel.stopTyping();

src/components/MessageInput/icons.tsx

@@ -2,6 +2,10 @@ import React from 'react';
 
 import { useTranslationContext } from '../../context/TranslationContext';
 
+import type { Message } from 'stream-chat';
+
+import type { DefaultAttachmentType, DefaultMessageType, DefaultUserType } from '../../types/types';
+
 export const EmojiIconLarge: React.FC = () => {
   const { t } = useTranslationContext();
 
@@ -56,12 +60,24 @@ export const FileUploadIconFlat: React.FC = () => {
   );
 };
 
-export type SendButtonProps = {
-  /** Function to send a message to the currently active channel */
-  sendMessage: (event: React.BaseSyntheticEvent) => void;
+export type SendButtonProps<
+  At extends DefaultAttachmentType = DefaultAttachmentType,
+  Me extends DefaultMessageType = DefaultMessageType,
+  Us extends DefaultUserType<Us> = DefaultUserType
+> = {
+  sendMessage: (
+    event: React.BaseSyntheticEvent,
+    customMessageData?: Partial<Message<At, Me, Us>>,
+  ) => void;
 };
 
-export const SendButton: React.FC<SendButtonProps> = ({ sendMessage }) => {
+export const SendButton = <
+  At extends DefaultAttachmentType = DefaultAttachmentType,
+  Me extends DefaultMessageType = DefaultMessageType,
+  Us extends DefaultUserType<Us> = DefaultUserType
+>({
+  sendMessage,
+}: SendButtonProps<At, Me, Us>) => {
   const { t } = useTranslationContext();
 
   return (

src/context/ChannelActionContext.tsx

@@ -2,6 +2,7 @@ import React, { PropsWithChildren, useContext } from 'react';
 
 import type {
   Attachment,
+  Message,
   UpdatedMessage,
   UpdateMessageAPIResponse,
   UserResponse,
@@ -81,7 +82,10 @@ export type ChannelActionContextValue<
   ) => void;
   removeMessage: (message: StreamMessage<At, Ch, Co, Ev, Me, Re, Us>) => void;
   retrySendMessage: RetrySendMessage<At, Ch, Co, Ev, Me, Re, Us>;
-  sendMessage: (message: MessageToSend<At, Ch, Co, Ev, Me, Re, Us>) => Promise<void>;
+  sendMessage: (
+    message: MessageToSend<At, Ch, Co, Ev, Me, Re, Us>,
+    customMessageData?: Partial<Message<At, Me, Us>>,
+  ) => Promise<void>;
   setQuotedMessage: React.Dispatch<
     React.SetStateAction<StreamMessage<At, Ch, Co, Ev, Me, Re, Us> | undefined>
   >;

src/context/ComponentContext.tsx

@@ -81,7 +81,7 @@ export type ComponentContextValue<
   QuotedMessagePreview?: React.ComponentType<QuotedMessagePreviewProps<At, Ch, Co, Ev, Me, Re, Us>>;
   ReactionSelector?: React.ForwardRefExoticComponent<ReactionSelectorProps<Re, Us>>;
   ReactionsList?: React.ComponentType<ReactionsListProps<Re, Us>>;
-  SendButton?: React.ComponentType<SendButtonProps>;
+  SendButton?: React.ComponentType<SendButtonProps<At, Me, Us>>;
   ThreadHeader?: React.ComponentType<ThreadHeaderProps<At, Ch, Co, Ev, Me, Re, Us>>;
   ThreadInput?: React.ComponentType<MessageInputProps<At, Ch, Co, Ev, Me, Re, Us, V>>;
   ThreadStart?: React.ComponentType;