fix: typing indicator styles

sendbird · Aug 29, 2024 · a462e4a · a462e4a
1 parent 2332a70
commit a462e4a
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/src/components/CustomMessage.tsx b/src/components/CustomMessage.tsx
@@ -30,12 +30,12 @@ type Props = {
 
 export default function CustomMessage(props: Props) {
   const { message, activeSpinnerId, botUser } = props;
-  const { replacementTextList, enableEmojiFeedback, botStudioEditProps } = useConstantState();
+  const { replacementTextList, enableEmojiFeedback, botStudioEditProps = {} } = useConstantState();
   const { userId: currentUserId } = useWidgetSession();
-  const { profileUrl } = botStudioEditProps?.botInfo ?? {};
+  const { botInfo } = botStudioEditProps;
 
   const botUserId = botUser?.userId;
-  const botProfileUrl = profileUrl ?? botUser?.profileUrl ?? '';
+  const botProfileUrl = botInfo?.profileUrl ?? botUser?.profileUrl ?? '';
   const isWaitingForBotReply = activeSpinnerId === message.messageId && !!botUser;
 
   const shouldRenderFeedback = () => {
@@ -68,7 +68,7 @@ export default function CustomMessage(props: Props) {
       return (
         <div>
           <CurrentUserMessage message={message} />
-          {isWaitingForBotReply && <CustomTypingIndicatorBubble botProfileUrl={botProfileUrl} />}
+          {isWaitingForBotReply && <CustomTypingIndicatorBubble />}
         </div>
       );
     }

diff --git a/src/components/CustomTypingIndicatorBubble.tsx b/src/components/CustomTypingIndicatorBubble.tsx
@@ -1,7 +1,16 @@
 import BotProfileImage from './BotProfileImage';
+import { useChatContext } from './chat/context/ChatProvider';
+import { useConstantState } from '../context/ConstantContext';
 import { TypingBubble } from '../foundation/components/TypingBubble';
 
-function CustomTypingIndicatorBubble({ botProfileUrl }: { botProfileUrl: string }) {
+function CustomTypingIndicatorBubble() {
+  const { botStudioEditProps = {}, botId } = useConstantState();
+  const { channel } = useChatContext();
+
+  const botUser = channel?.members.find((member) => member.userId === botId);
+  const botInfo = botStudioEditProps.botInfo;
+  const botProfileUrl = botInfo?.profileUrl ?? botUser?.profileUrl;
+
   return (
     <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, marginTop: 16 }}>
       <BotProfileImage size={28} profileUrl={botProfileUrl} />

diff --git a/src/foundation/components/TypingBubble/css.ts b/src/foundation/components/TypingBubble/css.ts
@@ -2,7 +2,7 @@ import { css } from '@linaria/core';
 
 export const typingDotContainer = css`
   align-items: center;
-  border-radius: 16px;
+  border-radius: 100px;
   display: flex;
   gap: 6px;
   justify-content: center;