feat: add message feedback (#134)

sendbird · Mar 27, 2024 · 6d0244c · 6d0244c
1 parent 122b11a
commit 6d0244c
Show file tree

Hide file tree

Showing 8 changed files with 198 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,8 +29,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sendbird/chat": "^4.10.1",
-    "@sendbird/uikit-react": "^3.13.1",
+    "@sendbird/chat": "^4.11.0",
+    "@sendbird/uikit-react": "^3.13.4",
     "@tanstack/react-query": "^5.17.19",
     "dompurify": "^3.0.4",
     "react-popper-tooltip": "^4.4.2",

diff --git a/src/components/BotMessageFeedback.tsx b/src/components/BotMessageFeedback.tsx
@@ -0,0 +1,163 @@
+import { FeedbackRating, UserMessage, Feedback } from '@sendbird/chat/message';
+import FeedbackIconButton from '@sendbird/uikit-react/ui/FeedbackIconButton';
+import Icon, { IconTypes } from '@sendbird/uikit-react/ui/Icon';
+import MessageFeedbackFailedModal from '@sendbird/uikit-react/ui/MessageFeedbackFailedModal';
+import MessageFeedbackModal from '@sendbird/uikit-react/ui/MessageFeedbackModal';
+import MobileFeedbackMenu from '@sendbird/uikit-react/ui/MobileFeedbackMenu';
+import { useState } from 'react';
+
+import { useConstantState } from '../context/ConstantContext';
+import { isMobile } from '../utils';
+
+function BotMessageFeedback({ message }: { message: UserMessage }) {
+  const { stringSet } = useConstantState();
+  const [showFeedbackOptionsMenu, setShowFeedbackOptionsMenu] =
+    useState<boolean>(false);
+  const [showFeedbackModal, setShowFeedbackModal] = useState<boolean>(false);
+  const [feedbackFailedText, setFeedbackFailedText] = useState<string>('');
+
+  const openFeedbackFormOrMenu = () => {
+    if (isMobile) {
+      setShowFeedbackOptionsMenu(true);
+    } else {
+      setShowFeedbackModal(true);
+    }
+  };
+
+  const onCloseFeedbackForm = () => {
+    setShowFeedbackModal(false);
+  };
+
+  return (
+    <>
+      {/** Feedback icons */}
+      <div className="sendbird-message-content__middle__body-container__feedback-buttons-container">
+        <FeedbackIconButton
+          isSelected={message?.myFeedback?.rating === FeedbackRating.GOOD}
+          onClick={async () => {
+            if (!message?.myFeedback?.rating) {
+              try {
+                await message.submitFeedback({
+                  rating: FeedbackRating.GOOD,
+                });
+                openFeedbackFormOrMenu();
+              } catch (error) {
+                console.error?.('Channel: Submit feedback failed.', error);
+                setFeedbackFailedText(stringSet.FEEDBACK_FAILED_SUBMIT);
+              }
+            } else {
+              openFeedbackFormOrMenu();
+            }
+          }}
+          disabled={
+            message?.myFeedback != null &&
+            message.myFeedback.rating !== FeedbackRating.GOOD
+          }
+        >
+          <Icon type={IconTypes.FEEDBACK_LIKE} width="24px" height="24px" />
+        </FeedbackIconButton>
+        <FeedbackIconButton
+          isSelected={message?.myFeedback?.rating === FeedbackRating.BAD}
+          onClick={async () => {
+            if (!message?.myFeedback?.rating) {
+              try {
+                await message.submitFeedback({
+                  rating: FeedbackRating.BAD,
+                });
+                openFeedbackFormOrMenu();
+              } catch (error) {
+                console.error?.('Channel: Submit feedback failed.', error);
+                setFeedbackFailedText(stringSet.FEEDBACK_FAILED_SUBMIT);
+              }
+            } else {
+              openFeedbackFormOrMenu();
+            }
+          }}
+          disabled={
+            message?.myFeedback != null &&
+            message.myFeedback.rating !== FeedbackRating.BAD
+          }
+        >
+          <Icon type={IconTypes.FEEDBACK_DISLIKE} width="24px" height="24px" />
+        </FeedbackIconButton>
+      </div>
+      {
+        // Feedback menu
+        message.myFeedback?.rating && showFeedbackOptionsMenu && (
+          <MobileFeedbackMenu
+            hideMenu={() => {
+              setShowFeedbackOptionsMenu(false);
+            }}
+            onEditFeedback={() => {
+              setShowFeedbackOptionsMenu(false);
+              setShowFeedbackModal(true);
+            }}
+            onRemoveFeedback={async () => {
+              try {
+                if (message.myFeedback?.id == null) {
+                  throw new Error('Invalid feedback id');
+                }
+                await message.deleteFeedback(message.myFeedback.id);
+              } catch (error) {
+                console.error?.('Channel: Delete feedback failed.', error);
+                setFeedbackFailedText(stringSet.FEEDBACK_FAILED_DELETE);
+              }
+              setShowFeedbackOptionsMenu(false);
+            }}
+          />
+        )
+      }
+      {
+        // Feedback modal
+        message.myFeedback != null &&
+          message?.myFeedback?.rating &&
+          showFeedbackModal && (
+            <MessageFeedbackModal
+              selectedFeedback={message.myFeedback.rating}
+              message={message}
+              onUpdate={async (
+                selectedFeedback: FeedbackRating,
+                comment: string
+              ) => {
+                const newFeedback: Feedback = new Feedback({
+                  id: message.myFeedback.id,
+                  rating: selectedFeedback,
+                  comment,
+                });
+                try {
+                  await message.updateFeedback(newFeedback);
+                } catch (error) {
+                  console.error('Channel: Update feedback failed.', error);
+                  setFeedbackFailedText(stringSet.FEEDBACK_FAILED_SAVE);
+                }
+                onCloseFeedbackForm();
+              }}
+              onClose={onCloseFeedbackForm}
+              onRemove={async () => {
+                try {
+                  await message.deleteFeedback(message.myFeedback.id);
+                } catch (error) {
+                  console.error('Channel: Delete feedback failed.', error);
+                  setFeedbackFailedText(stringSet.FEEDBACK_FAILED_DELETE);
+                }
+                onCloseFeedbackForm();
+              }}
+            />
+          )
+      }
+      {
+        // Feedback failed modal
+        feedbackFailedText && (
+          <MessageFeedbackFailedModal
+            text={feedbackFailedText}
+            onCancel={() => {
+              setFeedbackFailedText('');
+            }}
+          />
+        )
+      }
+    </>
+  );
+}
+
+export default BotMessageFeedback;
diff --git a/src/components/BotMessageWithBodyInput.tsx b/src/components/BotMessageWithBodyInput.tsx
@@ -8,9 +8,9 @@ import Label, {
 import { ReactNode } from 'react';
 import styled from 'styled-components';
 
+import BotMessageFeedback from './BotMessageFeedback';
 import BotProfileImage from './BotProfileImage';
 import { SentTime, BodyContainer } from './MessageComponent';
-import { ReactionContainer } from './ReactionContainer';
 import { useConstantState } from '../context/ConstantContext';
 import { formatCreatedAtToAMPM } from '../utils';
 import { isLastMessageInStreaming } from '../utils/messages';
@@ -111,7 +111,7 @@ export default function BotMessageWithBodyInput(props: Props) {
               displayProfileImage &&
               !isBotWelcomeMessage &&
               !(isLastBotMessage && isLastMessageInStreaming(message)) &&
-              !isFormMessage && <ReactionContainer message={message} />}
+              !isFormMessage && <BotMessageFeedback message={message} />}
           </>
           <SentTime>{formatCreatedAtToAMPM(message.createdAt)}</SentTime>
         </Content>

diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx
@@ -27,6 +27,7 @@ const SBComponent = () => {
     userNickName,
     configureSession,
     enableMention,
+    enableEmojiFeedback,
     customUserAgentParam,
     stringSet,
   } = useConstantState();
@@ -89,6 +90,7 @@ const SBComponent = () => {
             enableDocument: false,
           },
           enableVoiceMessage: false,
+          enableFeedback: enableEmojiFeedback,
         },
       }}
     >

diff --git a/src/const.ts b/src/const.ts
@@ -97,7 +97,7 @@ export interface Constant {
   enableMention: boolean;
   enableMobileView: boolean;
   firstMessageData: FirstMessageItem[];
-  stringSet: Partial<StringSet> | undefined;
+  stringSet: Partial<StringSet>;
 }
 
 export interface SuggestedReply {

diff --git a/src/context/ConstantContext.tsx b/src/context/ConstantContext.tsx
@@ -1,3 +1,4 @@
+import { LabelStringSet } from '@sendbird/uikit-react/ui/Label';
 import { createContext, useContext, useMemo } from 'react';
 
 import { type Constant, DEFAULT_CONSTANT } from '../const';
@@ -67,7 +68,10 @@ export const ConstantStateProvider = (props: ProviderProps) => {
       },
       customUserAgentParam: props.customUserAgentParam,
       configureSession: props.configureSession,
-      stringSet: props.stringSet,
+      stringSet: {
+        ...LabelStringSet,
+        ...props.stringSet,
+      },
       enableSourceMessage:
         props.enableSourceMessage ?? initialState.enableSourceMessage,
       enableEmojiFeedback:

diff --git a/src/css/index.css b/src/css/index.css
@@ -52,3 +52,7 @@
 .sendbird-message-input .sendbird-message-input-text-field {
   overflow-y: hidden;
 }
+
+.sendbird-modal__content {
+  width: calc(100% - 20px);
+}