[CLNP-5022] feat: add message input related eventHandlers (#1214)

Addresses https://sendbird.atlassian.net/browse/CLNP-5022


### Main Changes 
```
eventHandlers?: {
 ...
  message?: {
    onSendMessageFailed?: (message: CoreMessageType, error: unknown) => void;
    onUpdateMessageFailed?: (message: CoreMessageType, error: unknown) => void;
    onFileUploadFailed?: (error: unknown) => void;
    // any message related event handlers can be added here
  }
}
```
The original request is only about sending message related event, but
just added two more (onUpdateMessageFailed / onFileUploadFailed)

Author: AhyoungRyu

src/lib/types.ts

@@ -61,6 +61,11 @@ export interface SBUEventHandlers {
   modal?: {
     onMounted?(params: { id: string; close(): void; }): void | (() => void);
   };
+  message?: {
+    onSendMessageFailed?: (message: CoreMessageType, error: unknown) => void;
+    onUpdateMessageFailed?: (message: CoreMessageType, error: unknown) => void;
+    onFileUploadFailed?: (error: unknown) => void;
+  }
 }
 
 export interface SendBirdStateConfig {

src/ui/MessageInput/__tests__/MessageInput.spec.js

@@ -238,3 +238,122 @@ describe('ui/MessageInput', () => {
     ).toBe(1);
   });
 });
+
+describe('MessageInput error handling', () => {
+  beforeEach(() => {
+    const stateContextValue = {
+      config: {
+        groupChannel: {
+          enableDocument: true,
+        },
+      },
+      eventHandlers: {
+        message: {
+          onSendMessageFailed: jest.fn(),
+          onUpdateMessageFailed: jest.fn(),
+          onFileUploadFailed: jest.fn(),
+        },
+      },
+    };
+    const localeContextValue = {
+      stringSet: {},
+    };
+
+    useContext.mockReturnValue(stateContextValue);
+    useLocalization.mockReturnValue(localeContextValue);
+
+    renderHook(() => useSendbirdStateContext());
+    renderHook(() => useLocalization());
+  });
+
+  it('should call onSendMessageFailed when sendMessage throws an error by onKeyDown event', async () => {
+    const mockErrorMessage = 'Send message failed';
+    const onSendMessage = jest.fn(() => {
+      throw new Error(mockErrorMessage);
+    });
+    const { eventHandlers } = useSendbirdStateContext();
+    const textRef = { current: { innerText: null } };
+    const mockText = 'Test Value';
+
+    render(<MessageInput onSendMessage={onSendMessage} ref={textRef} />);
+
+    const input = screen.getByRole('textbox');
+    await userEvent.type(input, mockText);
+
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(onSendMessage).toThrow(mockErrorMessage);
+    expect(eventHandlers.message.onSendMessageFailed).toHaveBeenCalled();
+  });
+
+  it('should call onSendMessageFailed when sendMessage throws an error by onClick event', async () => {
+    const mockErrorMessage = 'Send message failed';
+    const onSendMessage = jest.fn(() => {
+      throw new Error(mockErrorMessage);
+    });
+    const { eventHandlers } = useSendbirdStateContext();
+    const textRef = { current: { innerText: null } };
+    const mockText = 'Test Value';
+
+    render(<MessageInput onSendMessage={onSendMessage} ref={textRef} />);
+
+    const input = screen.getByRole('textbox');
+    await userEvent.type(input, mockText);
+
+    const sendIcon = document.getElementsByClassName('sendbird-message-input--send')[0];
+    fireEvent.click(sendIcon);
+
+    expect(onSendMessage).toThrow(mockErrorMessage);
+    expect(eventHandlers.message.onSendMessageFailed).toHaveBeenCalled();
+  });
+
+  it('should call onUpdateMessageFailed when editMessage throws an error', async () => {
+    const mockErrorMessage = 'Update message failed';
+    const onUpdateMessage = jest.fn(() => {
+      throw new Error(mockErrorMessage);
+    });
+    const { eventHandlers } = useSendbirdStateContext();
+    const messageId = 123;
+    const textRef = { current: { innerText: null } };
+    const mockText = 'Updated Text';
+
+    render(
+      <MessageInput
+        isEdit
+        message={{ messageId }}
+        onUpdateMessage={onUpdateMessage}
+        ref={textRef}
+      />
+    );
+
+    const input = screen.getByRole('textbox');
+    await userEvent.type(input, mockText);
+
+    const editButton = document.getElementsByClassName('sendbird-message-input--edit-action__save')[0];
+
+    fireEvent.click(editButton);
+
+    expect(onUpdateMessage).toThrow(mockErrorMessage);
+    expect(eventHandlers.message.onUpdateMessageFailed).toHaveBeenCalled();
+  });
+
+  it('should call onFileUploadFailed when file upload throws an error', async () => {
+    const mockErrorMessage = 'File upload failed';
+    const onFileUpload = jest.fn(() => {
+      throw new Error(mockErrorMessage);
+    });
+    const { eventHandlers } = useSendbirdStateContext();
+    const file = new File(['dummy content'], 'example.txt', { type: 'text/plain' });
+
+    render(<MessageInput onFileUpload={onFileUpload} />);
+
+    const fileInput = document.getElementsByClassName('sendbird-message-input--attach-input')[0];
+  
+    fireEvent.change(fileInput, { currentTarget: { files: [file] } });
+
+    expect(onFileUpload).toThrow(mockErrorMessage);
+    expect(eventHandlers.message.onFileUploadFailed).toHaveBeenCalled();
+  });
+});
+
+

src/ui/MessageInput/index.tsx

@@ -138,7 +138,7 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
 
   const textFieldId = messageFieldId || TEXT_FIELD_ID;
   const { stringSet } = useLocalization();
-  const { config } = useSendbirdStateContext();
+  const { config, eventHandlers } = useSendbirdStateContext();
 
   const isFileUploadEnabled = checkIfFileUploadEnabled({
     channel,
@@ -391,38 +391,45 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
   }, [isMentionEnabled]);
 
   const sendMessage = () => {
-    const textField = internalRef?.current;
-    if (!isEdit && textField?.textContent) {
-      const { messageText, mentionTemplate } = extractTextAndMentions(textField.childNodes);
-      const params = { message: messageText, mentionTemplate };
-      onSendMessage(params);
-      resetInput(internalRef);
+    try {
+      const textField = internalRef?.current;
+      if (!isEdit && textField?.textContent) {
+        const { messageText, mentionTemplate } = extractTextAndMentions(textField.childNodes);
+        const params = { message: messageText, mentionTemplate };
+        onSendMessage(params);
+        resetInput(internalRef);
+        /**
+         * Note: contentEditable does not work as expected in mobile WebKit (Safari).
+         * @see https://github.com/sendbird/sendbird-uikit-react/pull/1108
+         */
+        if (isMobileIOS(navigator.userAgent)) {
+          if (ghostInputRef.current) ghostInputRef.current.focus();
+          requestAnimationFrame(() => textField.focus());
+        } else {
+          // important: keeps the keyboard open -> must add test on refactor
+          textField.focus();
+        }
 
-      /**
-       * Note: contentEditable does not work as expected in mobile WebKit (Safari).
-       * @see https://github.com/sendbird/sendbird-uikit-react/pull/1108
-       */
-      if (isMobileIOS(navigator.userAgent)) {
-        if (ghostInputRef.current) ghostInputRef.current.focus();
-        requestAnimationFrame(() => textField.focus());
-      } else {
-        // important: keeps the keyboard open -> must add test on refactor
-        textField.focus();
+        setIsInput(false);
+        setHeight();
       }
-
-      setIsInput(false);
-      setHeight();
+    } catch (error) {
+      eventHandlers?.message?.onSendMessageFailed?.(message, error);
     }
   };
   const isEditDisabled = !internalRef?.current?.textContent?.trim();
   const editMessage = () => {
-    const textField = internalRef?.current;
-    const messageId = message?.messageId;
-    if (isEdit && messageId && textField) {
-      const { messageText, mentionTemplate } = extractTextAndMentions(textField.childNodes);
-      const params = { messageId, message: messageText, mentionTemplate };
-      onUpdateMessage(params);
-      resetInput(internalRef);
+    try {
+      const textField = internalRef?.current;
+      const messageId = message?.messageId;
+      if (isEdit && messageId && textField) {
+        const { messageText, mentionTemplate } = extractTextAndMentions(textField.childNodes);
+        const params = { messageId, message: messageText, mentionTemplate };
+        onUpdateMessage(params);
+        resetInput(internalRef);
+      }
+    } catch (error) {
+      eventHandlers?.message?.onUpdateMessageFailed?.(message, error);
     }
   };
   const onPaste = usePaste({
@@ -433,6 +440,19 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
     setHeight,
   });
 
+  const uploadFile = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { files } = event.currentTarget;
+    try {
+      if (files) {
+        onFileUpload(Array.from(files));
+      }
+    } catch (error) {
+      eventHandlers?.message?.onFileUploadFailed?.(error);
+    } finally {
+      event.target.value = '';
+    }
+  };
+
   return (
     <form className={classnames(
       ...(Array.isArray(className) ? className : [className]),
@@ -559,13 +579,7 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
                   type="file"
                   ref={fileInputRef}
                   // It will affect to <Channel /> and <Thread />
-                  onChange={(event) => {
-                    const { files } = event.currentTarget;
-                    if (files) {
-                      onFileUpload(files && files.length === 1 ? [files[0]] : Array.from(files));
-                    }
-                    event.target.value = '';
-                  }}
+                  onChange={(event) => uploadFile(event)}
                   accept={getMimeTypesUIKitAccepts(acceptableMimeTypes)}
                   multiple={isSelectingMultipleFilesEnabled && isChannelTypeSupportsMultipleFilesMessage(channel)}
                 />