feat: Feedback message (#898)

Fixes: [AC-745](https://sendbird.atlassian.net/browse/AC-745)

### Changelogs

### Feedback Message
Now we are supporting Feedback Message feature!<br/>
Feedback feature is applied to message with non default
`myFeedbackStatus` value.<br/>

* Added `MessageFeedbackModal`, `FeedbackIconButton`, and
`MobileFeedbackMenu`

### Documentation
-
https://sendbird.atlassian.net/wiki/spaces/SDK/pages/2184347696/Feedback+for+message

### Figma design
-
https://www.figma.com/file/SVbXU00FhjztekD8AiVukK/UIKit_Work-file_React?node-id=1819%3A12270&mode=dev

### How to test
- https://sendbird.slack.com/archives/C05QD5M7XDH/p1703230285124509


[AC-745]:
https://sendbird.atlassian.net/browse/AC-745?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

---------

Co-authored-by: Ahyoung Ryu <[email protected]>

Author: chohongm

package.json

@@ -67,7 +67,7 @@
     "react-dom": "^16.8.6 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@sendbird/chat": "^4.10.1",
+    "@sendbird/chat": "^4.10.6",
     "@sendbird/uikit-tools": "0.0.1-alpha.43",
     "css-vars-ponyfill": "^2.3.2",
     "date-fns": "^2.16.1",

rollup.module-exports.mjs

@@ -71,6 +71,7 @@ export default {
   'Channel/components/MessageInput': 'src/modules/Channel/components/MessageInput/index.tsx',
   'Channel/components/MessageList': 'src/modules/Channel/components/MessageList/index.tsx',
   'Channel/components/RemoveMessageModal': 'src/modules/Channel/components/RemoveMessageModal.tsx',
+  'Channel/components/MessageFeedbackModal': 'src/modules/Channel/components/MessageFeedbackModal/index.tsx',
   'Channel/components/TypingIndicator': 'src/modules/Channel/components/TypingIndicator.tsx',
   'Channel/components/UnreadCount': 'src/modules/Channel/components/UnreadCount/index.tsx',
   'Channel/components/SuggestedMentionList': 'src/modules/Channel/components/SuggestedMentionList/index.tsx',
@@ -205,4 +206,6 @@ export default {
   'ui/VoiceMessageInput': 'src/ui/VoiceMessageInput/index.tsx',
   'ui/VoiceMessageItemBody': 'src/ui/VoiceMessageItemBody/index.tsx',
   'ui/Word': 'src/ui/Word/index.tsx',
+  'ui/FeedbackIconButton': 'src/ui/FeedbackIconButton/index.tsx',
+  'ui/MobileFeedbackMenu': 'src/ui/MobileFeedbackMenu/index.tsx',
 };

src/hooks/useKeyDown/data.mock.ts

@@ -0,0 +1,22 @@
+import { FileInfo } from '../../ui/FileViewer/types';
+
+const PROFILE_FILE_INFO: FileInfo = {
+  name: 'profile image',
+  url: 'https://static.sendbird.com/sample/profiles/profile_12_512px.png',
+  type: 'image/png',
+};
+
+const EARTH_FILE_INFO: FileInfo = {
+  name: 'earth image',
+  url: 'https://sendbird-upload.s3.amazonaws.com/2D7B4CDB-932F-4082-9B09-A1153792DC8D/'
+    + 'upload/n/8af7775ca1d34d7681d7e61b56067136.jpg',
+  type: 'image/jpg',
+};
+
+export const FILE_INFO_LIST: FileInfo[] = [
+  PROFILE_FILE_INFO,
+  EARTH_FILE_INFO,
+  PROFILE_FILE_INFO,
+  EARTH_FILE_INFO,
+  PROFILE_FILE_INFO,
+];

…FileViewer/__tests__/useKeyDown.spec.tsx …ooks/useKeyDown/test/useKeyDown.spec.tsxsrc/ui/FileViewer/__tests__/useKeyDown.spec.tsx renamed to src/hooks/useKeyDown/test/useKeyDown.spec.tsx src/ui/FileViewer/__tests__/useKeyDown.spec.tsx renamed to src/hooks/useKeyDown/test/useKeyDown.spec.tsx

@@ -1,14 +1,19 @@
 import { act, render, screen, fireEvent } from '@testing-library/react';
-import { useKeyDown } from '../hooks/useKeyDown';
-import { FileViewerComponentProps, ViewerTypes } from '../types';
 import { FILE_INFO_LIST } from '../data.mock';
 import React, { useRef } from 'react';
+import { useKeyDown } from '../useKeyDown';
+import { FileViewerComponentProps, MultiFilesViewer, ViewerTypes } from '../../../ui/FileViewer/types';
 
 const testId = 'dummy';
 
 function DummyComponent(props: FileViewerComponentProps): React.ReactElement {
   const ref = useRef<HTMLDivElement>(null);
-  const { onKeyDown } = useKeyDown({ props, ref });
+  const { onClose, onClickLeft, onClickRight } = props as MultiFilesViewer;
+  const onKeyDown = useKeyDown(ref, {
+    Escape: (e) => onClose?.(e),
+    ArrowLeft: () => onClickLeft?.(),
+    ArrowRight: () => onClickRight?.(),
+  });
   return <div
     ref={ref}
     onKeyDown={onKeyDown}

src/hooks/useKeyDown/useKeyDown.ts

@@ -0,0 +1,22 @@
+import { useLayoutEffect } from 'react';
+import { usePreservedCallback } from '@sendbird/uikit-tools';
+
+type KeyDownCallbackMap = Record<string, (event: React.KeyboardEvent<HTMLDivElement>) => void>;
+
+export function useKeyDown(
+  ref: React.RefObject<HTMLDivElement>,
+  keyDownCallbackMap: KeyDownCallbackMap,
+): React.KeyboardEventHandler<HTMLDivElement> {
+
+  useLayoutEffect(() => {
+    ref.current?.focus();
+  }, [ref.current]);
+
+  const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = usePreservedCallback((event) => {
+    const callback = keyDownCallbackMap[event.key];
+    callback?.(event);
+    event.stopPropagation();
+  });
+
+  return onKeyDown;
+}

src/modules/Channel/components/MessageFeedbackModal/index.scss

@@ -0,0 +1,30 @@
+@import '../../../../styles/variables';
+
+.sendbird-message-feedback-modal-content__mobile {
+  @include mobile() {
+    max-width: 280px;
+    padding: 16px;
+  }
+}
+
+.sendbird-message-feedback-modal-footer__root {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sendbird-message-feedback-modal-footer__right-content {
+  display: flex;
+  gap: 8px;
+}
+
+.sendbird-message-feedback-modal-body__root {
+  margin: 21px 0;
+}
+
+.sendbird-message-feedback-modal-header {
+  @include mobile() {
+    font-size: 18px;
+    line-height: 1.33;
+  }
+}

src/modules/Channel/components/MessageFeedbackModal/index.tsx

@@ -0,0 +1,102 @@
+import React, { ReactElement, useContext, useRef } from 'react';
+import { LocalizationContext } from '../../../../lib/LocalizationContext';
+import Modal from '../../../../ui/Modal';
+import Button, { ButtonTypes } from '../../../../ui/Button';
+import Input from '../../../../ui/Input';
+import Label, { LabelColors, LabelTypography } from '../../../../ui/Label';
+import './index.scss';
+import { useMediaQueryContext } from '../../../../lib/MediaQueryContext';
+import { CoreMessageType } from '../../../../utils';
+import { FeedbackRating } from '@sendbird/chat/message';
+import { useKeyDown } from '../../../../hooks/useKeyDown/useKeyDown';
+
+export interface MessageFeedbackModalProps {
+  selectedFeedback: FeedbackRating;
+  message: CoreMessageType;
+  onCancel?: () => void;
+  onSubmit?: (comment: string) => void;
+  onRemove?: () => void;
+}
+
+export default function MessageFeedbackModal(props: MessageFeedbackModalProps): ReactElement {
+  const {
+    selectedFeedback,
+    message,
+    onCancel,
+    onSubmit,
+    onRemove,
+  } = props;
+
+  const { stringSet } = useContext(LocalizationContext);
+  const { isMobile } = useMediaQueryContext();
+
+  const modalRef = useRef(null);
+  const inputRef = useRef(null);
+  const onKeyDown = useKeyDown(modalRef, {
+    Enter: () => onSubmit?.(inputRef.current.value ?? ''),
+    Escape: () => onCancel?.(),
+  });
+
+  return (
+    <div onKeyDown={onKeyDown}>
+      <Modal
+        contentClassName='sendbird-message-feedback-modal-content__mobile'
+        type={ButtonTypes.PRIMARY}
+        onCancel={onCancel}
+        onSubmit={() => {
+          onSubmit?.(inputRef.current.value ?? '');
+        }}
+        submitText={stringSet.BUTTON__SUBMIT}
+        renderHeader={() => (
+          <div className='sendbird-modal__header'>
+            <Label
+              type={LabelTypography.H_1}
+              color={LabelColors.ONBACKGROUND_1}
+              className='sendbird-message-feedback-modal-header'
+            >
+              {stringSet.FEEDBACK_MODAL_TITLE}
+            </Label>
+          </div>
+        )}
+        customFooter={
+          <div className='sendbird-message-feedback-modal-footer__root'>
+            {
+              !isMobile && message?.myFeedback && selectedFeedback === message.myFeedback.rating
+                ? <Button type={ButtonTypes.WARNING} onClick={onRemove}>
+                  <Label type={LabelTypography.BUTTON_3} color={LabelColors.ERROR}>
+                    {stringSet.BUTTON__REMOVE_FEEDBACK}
+                  </Label>
+                </Button>
+                : <div/>
+            }
+            <div className='sendbird-message-feedback-modal-footer__right-content'>
+              <Button type={ButtonTypes.SECONDARY} onClick={onCancel}>
+                <Label type={LabelTypography.BUTTON_3} color={LabelColors.ONBACKGROUND_1}>
+                  {stringSet.BUTTON__CANCEL}
+                </Label>
+              </Button>
+              <Button onClick={() => onSubmit?.(inputRef.current.value ?? '')}>
+                <Label type={LabelTypography.BUTTON_3} color={LabelColors.ONCONTENT_1}>
+                  {stringSet.BUTTON__SUBMIT}
+                </Label>
+              </Button>
+            </div>
+          </div>
+        }
+      >
+        <div className='sendbird-message-feedback-modal-body__root'>
+          <Input
+            name='sendbird-message-feedback-modal-body__root'
+            ref={inputRef}
+            value={(message?.myFeedback && selectedFeedback === message.myFeedback.rating)
+              ? message.myFeedback?.comment
+              : undefined
+            }
+            placeHolder={stringSet.FEEDBACK_CONTENT_PLACEHOLDER}
+            autoFocus={true}
+          />
+        </div>
+      </Modal>
+    </div>
+  );
+}