From c99cf0be8081547efd635e8216db2d7c02554edd Mon Sep 17 00:00:00 2001 From: Hyungu Kang | Airen Date: Fri, 3 May 2024 15:44:41 +0900 Subject: [PATCH] [AC-2230] fix: update types (#193) * fix: update types * chore: remove unused code * chore: apply review * fix: incorrect types path * chore: export types --- package.json | 2 +- packages/self-service/tsconfig.json | 6 +- packages/url-webdemo/tsconfig.json | 6 +- src/App.tsx | 14 +-- src/components/BotMessageFeedback.tsx | 41 +++++---- src/components/BotMessageWithBodyInput.tsx | 8 +- src/components/Chat.tsx | 1 + src/components/CustomChannelComponent.tsx | 21 +++-- src/components/CustomMessage.tsx | 94 +++++++++++--------- src/components/FormInput.tsx | 3 +- src/components/FormMessage.tsx | 5 +- src/components/MessageDataContent.tsx | 2 +- src/components/ProviderContainer.tsx | 73 +++++++-------- src/components/StaticRepliesPanel.tsx | 4 +- src/components/SuggestedReplyMessageBody.tsx | 4 +- src/components/WidgetToggleButton.tsx | 2 +- src/const.ts | 15 ++-- src/context/ConstantContext.tsx | 20 +++-- src/context/WidgetOpenContext.tsx | 19 ++-- src/custom.d.ts | 10 +-- src/hooks/useSendLocalMessage.ts | 1 + src/index.ts | 2 + src/{interfaces.ts => types.ts} | 0 src/utils/index.ts | 1 + src/utils/messages.ts | 82 +++++++++++------ 25 files changed, 240 insertions(+), 196 deletions(-) rename src/{interfaces.ts => types.ts} (100%) diff --git a/package.json b/package.json index 09aead563..c6e811fa4 100644 --- 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 index 6687889d1..a7fc6fbf2 100644 --- 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 index 6687889d1..a7fc6fbf2 100644 --- 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 index 94425320e..99a1ff5bb 100644 --- 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 { +interface Props extends Omit, 'stringSet'> { applicationId?: string; botId?: string; autoOpen?: boolean; - renderWidgetToggleButton?: (props: { - onClick: () => void; - accentColor: string; - isOpen: boolean; - }) => React.ReactElement; + renderWidgetToggleButton?: (props: ToggleButtonProps) => React.ReactElement; + stringSet?: Partial; } const App = (props: Props) => { diff --git a/src/components/BotMessageFeedback.tsx b/src/components/BotMessageFeedback.tsx index dcc693848..d18a7c0f9 100644 --- a/src/components/BotMessageFeedback.tsx +++ b/src/components/BotMessageFeedback.tsx @@ -1,4 +1,4 @@ -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'; @@ -6,11 +6,12 @@ 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(false); @@ -117,31 +118,35 @@ function BotMessageFeedback({ message }: { message: UserMessage }) { showFeedbackModal && ( { - 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 index c70485898..7dfe47ad7 100644 --- 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} )} diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx index 98d1e0e70..cdcff946a 100644 --- 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 ( diff --git a/src/components/CustomChannelComponent.tsx b/src/components/CustomChannelComponent.tsx index f2c54999f..72791cde9 100644 --- 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` & form { margin: initial; @@ -73,8 +78,6 @@ const Root = styled.div` 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 index 2008050e4..3fe9a8916 100644 --- a/src/components/CustomMessage.tsx +++ b/src/components/CustomMessage.tsx @@ -1,5 +1,7 @@ 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'; @@ -7,7 +9,7 @@ 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; 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 ( - {} - {activeSpinnerId === message.messageId && ( - + {} + {activeSpinnerId === message.messageId && botUser && ( + )} ); } // Sent by other users - if (message.isUserMessage() && message.sender?.userId !== botUser.userId) { + if ( + message.isUserMessage() && + getSenderUserIdFromMessage(message) !== botUser?.userId + ) { return (
{ @@ -110,9 +121,7 @@ export default function CustomMessage(props: Props) { - } + bodyComponent={} /> ); } @@ -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 ( -
- - } - /> -
- ); + return ( +
+ + } + /> +
+ ); + } + + return <>; } diff --git a/src/components/FormInput.tsx b/src/components/FormInput.tsx index dd03a0eb1..f5e12ea62 100644 --- a/src/components/FormInput.tsx +++ b/src/components/FormInput.tsx @@ -17,7 +17,8 @@ const Label = styled(UIKitLabel)` export const InputLabel = ({ children }: InputLabelProps): ReactElement => (