[AC-2230] fix: update types (#193)

* fix: update types * chore: remove unused code * chore: apply review * fix: incorrect types path * chore: export types
sendbird · May 3, 2024 · c99cf0b · c99cf0b
1 parent 2681a5b
commit c99cf0b
Show file tree

Hide file tree

Showing 25 changed files with 240 additions and 196 deletions.
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "description": "Sendbird Chat AI Widget,\n Detailed documentation can be found at https://github.com/sendbird/chat-ai-widget#readme",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/src/index.d.ts",
   "type": "module",
   "files": [
     "dist",

diff --git a/packages/self-service/tsconfig.json b/packages/self-service/tsconfig.json
@@ -20,10 +20,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": [
-    "src",
-    "./src/custom.d.ts",
-    "node_modules/@sendbird/uikit-react/index.d.ts",
-  ],
+  "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/packages/url-webdemo/tsconfig.json b/packages/url-webdemo/tsconfig.json
@@ -20,10 +20,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": [
-    "src",
-    "./src/custom.d.ts",
-    "node_modules/@sendbird/uikit-react/index.d.ts",
-  ],
+  "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,15 +1,17 @@
+import React from 'react';
+
+import { StringSet } from '@uikit/ui/Label/stringSet';
+
 import ChatAiWidget from './components/ChatAiWidget'; //import { ChatAiWidget } from "@sendbird/chat-ai-widget";
+import { ToggleButtonProps } from './components/WidgetToggleButton';
 import { Constant } from './const';
 
-interface Props extends Partial<Constant> {
+interface Props extends Omit<Partial<Constant>, 'stringSet'> {
   applicationId?: string;
   botId?: string;
   autoOpen?: boolean;
-  renderWidgetToggleButton?: (props: {
-    onClick: () => void;
-    accentColor: string;
-    isOpen: boolean;
-  }) => React.ReactElement;
+  renderWidgetToggleButton?: (props: ToggleButtonProps) => React.ReactElement;
+  stringSet?: Partial<StringSet>;
 }
 
 const App = (props: Props) => {

diff --git a/src/components/BotMessageFeedback.tsx b/src/components/BotMessageFeedback.tsx
@@ -1,16 +1,17 @@
-import { FeedbackRating, UserMessage, Feedback } from '@sendbird/chat/message';
+import { FeedbackRating, Feedback } from '@sendbird/chat/message';
 import { useState } from 'react';
 
 import FeedbackIconButton from '@uikit/ui/FeedbackIconButton';
 import Icon, { IconTypes } from '@uikit/ui/Icon';
 import MessageFeedbackFailedModal from '@uikit/ui/MessageFeedbackFailedModal';
 import MessageFeedbackModal from '@uikit/ui/MessageFeedbackModal';
 import MobileFeedbackMenu from '@uikit/ui/MobileFeedbackMenu';
+import { CoreMessageType } from '@uikit/utils';
 
 import { useConstantState } from '../context/ConstantContext';
 import { isMobile } from '../utils';
 
-function BotMessageFeedback({ message }: { message: UserMessage }) {
+function BotMessageFeedback({ message }: { message: CoreMessageType }) {
   const { stringSet } = useConstantState();
   const [showFeedbackOptionsMenu, setShowFeedbackOptionsMenu] =
     useState<boolean>(false);
@@ -117,31 +118,35 @@ function BotMessageFeedback({ message }: { message: UserMessage }) {
           showFeedbackModal && (
             <MessageFeedbackModal
               selectedFeedback={message.myFeedback.rating}
-              message={message as CoreMessageType}
+              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);
+                if (message.myFeedback) {
+                  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);
+                if (message.myFeedback) {
+                  try {
+                    await message.deleteFeedback(message.myFeedback.id);
+                  } catch (error) {
+                    console.error('Channel: Delete feedback failed.', error);
+                    setFeedbackFailedText(stringSet.FEEDBACK_FAILED_DELETE);
+                  }
                 }
                 onCloseFeedbackForm();
               }}

diff --git a/src/components/BotMessageWithBodyInput.tsx b/src/components/BotMessageWithBodyInput.tsx
@@ -1,10 +1,10 @@
 import { User } from '@sendbird/chat';
-import { BaseMessage } from '@sendbird/chat/message';
 import { ReactNode } from 'react';
 import styled from 'styled-components';
 
 import Avatar from '@uikit/ui/Avatar';
 import Label, { LabelColors, LabelTypography } from '@uikit/ui/Label';
+import { CoreMessageType } from '@uikit/utils';
 
 import BotMessageFeedback from './BotMessageFeedback';
 import BotProfileImage from './BotProfileImage';
@@ -33,8 +33,8 @@ const Content = styled.div`
 `;
 
 type Props = {
-  botUser: User;
-  message: BaseMessage;
+  botUser?: User;
+  message: CoreMessageType;
   bodyComponent: ReactNode;
   chainTop?: boolean;
   chainBottom?: boolean;
@@ -99,7 +99,7 @@ export default function BotMessageWithBodyInput(props: Props) {
             type={LabelTypography.CAPTION_2}
             color={LabelColors.ONBACKGROUND_2}
           >
-            {botUser.nickname}
+            {botUser?.nickname}
           </Sender>
         )}
         <Content>

diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx
@@ -11,6 +11,7 @@ const Chat = () => {
   useWidgetButtonActivityTimeout();
   useManualGroupChannelCreation();
   const { channelUrl } = useWidgetLocalStorage();
+  if (!channelUrl) return <></>;
 
   return (
     <GroupChannelProvider channelUrl={channelUrl} scrollBehavior="smooth">

diff --git a/src/components/CustomChannelComponent.tsx b/src/components/CustomChannelComponent.tsx
@@ -18,7 +18,11 @@ import StaticRepliesPanel from './StaticRepliesPanel';
 import { useConstantState } from '../context/ConstantContext';
 import useAutoDismissMobileKyeboardHandler from '../hooks/useAutoDismissMobileKyeboardHandler';
 import { useScrollOnStreaming } from '../hooks/useScrollOnStreaming';
-import { hideChatBottomBanner, isDashboardPreview, isIOSMobile } from '../utils';
+import {
+  hideChatBottomBanner,
+  isDashboardPreview,
+  isIOSMobile,
+} from '../utils';
 import {
   getBotWelcomeMessages,
   groupMessagesByShortSpanTime,
@@ -29,6 +33,7 @@ interface RootStyleProps {
   height: string;
   isStaticReplyVisible: boolean;
 }
+// Note: sendbird-conversation__scroll-bottom-button >> it seems a style issue
 const Root = styled.div<RootStyleProps>`
   & form {
     margin: initial;
@@ -73,8 +78,6 @@ const Root = styled.div<RootStyleProps>`
       font-size: ${isIOSMobile ? 16 : 14}px;
       font-family: 'Roboto', sans-serif;
       line-height: 20px;
-      color: ${({ theme }) =>
-        theme.textColor.messageInput}; // FIXME: messageInput does not exist
       resize: none;
       border: none;
       outline: none;
@@ -186,9 +189,7 @@ export function CustomChannelComponent() {
   );
 
   const botWelcomeMessages = useMemo(() => {
-    if (!botId) {
-      return [];
-    }
+    if (!botId) return [];
     return getBotWelcomeMessages(allMessages, botId);
   }, [messageCount]);
 
@@ -224,7 +225,13 @@ export function CustomChannelComponent() {
                 activeSpinnerId={activeSpinnerId}
                 botUser={botUser}
                 lastMessageRef={lastMessageRef}
-                chainTop={grouppedMessage?.chaintop}
+                // FIXME: Remove data pollution.
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                chainTop={grouppedMessage?.chainTop}
+                // FIXME: Remove data pollution.
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
                 chainBottom={grouppedMessage?.chainBottom}
                 isBotWelcomeMessage={isBotWelcomeMessage}
                 isLastBotMessage={isLastBotMessage}

diff --git a/src/components/CustomMessage.tsx b/src/components/CustomMessage.tsx
@@ -1,13 +1,15 @@
 import { User } from '@sendbird/chat';
-import { BaseMessage, UserMessage } from '@sendbird/chat/message';
+import React from 'react';
+
+import { CoreMessageType } from '@uikit/utils';
 
 import AdminMessage from './AdminMessage';
 import BotMessageWithBodyInput from './BotMessageWithBodyInput';
 import CurrentUserMessage from './CurrentUserMessage';
 import CustomMessageBody from './CustomMessageBody';
 import CustomTypingIndicatorBubble from './CustomTypingIndicatorBubble';
 import FileMessage from './FileMessage';
-import FormMessage, { Form } from './FormMessage';
+import FormMessage from './FormMessage';
 import ParsedBotMessageBody from './ParsedBotMessageBody';
 import SuggestedReplyMessageBody from './SuggestedReplyMessageBody';
 import UserMessageWithBodyInput from './UserMessageWithBodyInput';
@@ -19,12 +21,16 @@ import {
   replaceTextExtractsMultiple,
   Token,
 } from '../utils';
-import { isFormMessage, isLocalMessageCustomType } from '../utils/messages';
+import {
+  getSenderUserIdFromMessage,
+  isFormMessage,
+  isLocalMessageCustomType,
+} from '../utils/messages';
 
 type Props = {
-  message: BaseMessage;
+  message: CoreMessageType;
   activeSpinnerId: number;
-  botUser: User;
+  botUser?: User;
   lastMessageRef: React.RefObject<HTMLDivElement>;
   isBotWelcomeMessage: boolean;
   isLastBotMessage: boolean;
@@ -62,8 +68,7 @@ export default function CustomMessage(props: Props) {
   }
 
   if (isFormMessage(message)) {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const forms: Form[] = message.extendedMessagePayload!.forms as Form[];
+    const forms = message.extendedMessagePayload.forms;
     return (
       <BotMessageWithBodyInput
         {...commonProps}
@@ -75,19 +80,25 @@ export default function CustomMessage(props: Props) {
   }
 
   // Sent by current user
-  if ((message as UserMessage).sender?.userId === userId) {
+  if (
+    message.isUserMessage() &&
+    getSenderUserIdFromMessage(message) === userId
+  ) {
     return (
       <div>
-        {<CurrentUserMessage message={message as UserMessage} />}
-        {activeSpinnerId === message.messageId && (
-          <CustomTypingIndicatorBubble botProfileUrl={botUser?.profileUrl} />
+        {<CurrentUserMessage message={message} />}
+        {activeSpinnerId === message.messageId && botUser && (
+          <CustomTypingIndicatorBubble botProfileUrl={botUser.profileUrl} />
         )}
       </div>
     );
   }
 
   // Sent by other users
-  if (message.isUserMessage() && message.sender?.userId !== botUser.userId) {
+  if (
+    message.isUserMessage() &&
+    getSenderUserIdFromMessage(message) !== botUser?.userId
+  ) {
     return (
       <div ref={lastMessageRef}>
         {
@@ -110,9 +121,7 @@ export default function CustomMessage(props: Props) {
         <BotMessageWithBodyInput
           {...commonProps}
           botUser={botUser}
-          bodyComponent={
-            <SuggestedReplyMessageBody message={message as UserMessage} />
-          }
+          bodyComponent={<SuggestedReplyMessageBody message={message} />}
         />
       );
     }
@@ -128,33 +137,34 @@ export default function CustomMessage(props: Props) {
     );
   }
 
-  // Normal message
-  const tokens: Token[] = MessageTextParser((message as UserMessage).message);
-  tokens.forEach((token: Token) => {
-    if (token.type === 'String') {
-      // Redact text to replacementTextList
-      token.value = replaceTextExtractsMultiple(
-        token.value,
-        replacementTextList
-      );
+  if (message.isUserMessage()) {
+    // Normal message
+    const tokens: Token[] = MessageTextParser(message.message);
+    tokens.forEach((token: Token) => {
+      if (token.type === 'String') {
+        // Redact text to replacementTextList
+        token.value = replaceTextExtractsMultiple(
+          token.value,
+          replacementTextList
+        );
 
-      // Convert url string to component --> handled by ParsedBotMessageBody > RegexText
-      // token.value = replaceUrl(token.value);
-    }
-  });
+        // Convert url string to component --> handled by ParsedBotMessageBody > RegexText
+        // token.value = replaceUrl(token.value);
+      }
+    });
 
-  return (
-    <div ref={lastMessageRef}>
-      <BotMessageWithBodyInput
-        {...commonProps}
-        botUser={botUser}
-        bodyComponent={
-          <ParsedBotMessageBody
-            message={message as UserMessage}
-            tokens={tokens}
-          />
-        }
-      />
-    </div>
-  );
+    return (
+      <div ref={lastMessageRef}>
+        <BotMessageWithBodyInput
+          {...commonProps}
+          botUser={botUser}
+          bodyComponent={
+            <ParsedBotMessageBody message={message} tokens={tokens} />
+          }
+        />
+      </div>
+    );
+  }
+
+  return <></>;
 }
diff --git a/src/components/FormInput.tsx b/src/components/FormInput.tsx
@@ -17,7 +17,8 @@ const Label = styled(UIKitLabel)`
 export const InputLabel = ({ children }: InputLabelProps): ReactElement => (
   <Label
     className="sendbird-input-label"
-    style={{ marginBottom: 8 }}
+    // ? Label doesn't hav style prop
+    // style={{ marginBottom: 8 }}
     type={LabelTypography.CAPTION_2}
     color={LabelColors.ONBACKGROUND_2}
   >