feat(engine): 💄 Hide avatar if not last block

baptisteArno · May 17, 2022 · 0de0d12 · 0de0d12 · vercel · May 17, 2022
1 parent d9e273b
commit 0de0d12
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/packages/bot-engine/src/components/ChatBlock/AvatarSideContainer.tsx b/packages/bot-engine/src/components/ChatBlock/AvatarSideContainer.tsx
@@ -10,10 +10,10 @@ import { Avatar } from '../avatars/Avatar'
 import { useFrame } from 'react-frame-component'
 import { CSSTransition } from 'react-transition-group'
 
-type Props = { hostAvatarSrc?: string }
+type Props = { hostAvatarSrc?: string; keepShowing: boolean }
 
 export const AvatarSideContainer = forwardRef(
-  ({ hostAvatarSrc }: Props, ref: ForwardedRef<unknown>) => {
+  ({ hostAvatarSrc, keepShowing }: Props, ref: ForwardedRef<unknown>) => {
     const { document } = useFrame()
     const [show, setShow] = useState(false)
     const [avatarTopOffset, setAvatarTopOffset] = useState(0)
@@ -49,7 +49,7 @@ export const AvatarSideContainer = forwardRef(
         <CSSTransition
           classNames="bubble"
           timeout={500}
-          in={show}
+          in={show && keepShowing}
           unmountOnExit
         >
           <div

diff --git a/packages/bot-engine/src/components/ChatBlock/ChatBlock.tsx b/packages/bot-engine/src/components/ChatBlock/ChatBlock.tsx
@@ -25,6 +25,7 @@ type ChatBlockProps = {
   steps: Step[]
   startStepIndex: number
   blockTitle: string
+  keepShowingHostAvatar: boolean
   onScroll: () => void
   onBlockEnd: (
     edgeId?: string,
@@ -40,6 +41,7 @@ export const ChatBlock = ({
   blockTitle,
   onScroll,
   onBlockEnd,
+  keepShowingHostAvatar,
 }: ChatBlockProps) => {
   const {
     currentTypebotId,
@@ -188,6 +190,7 @@ export const ChatBlock = ({
             }}
             hasGuestAvatar={typebot.theme.chat.guestAvatar?.isEnabled ?? false}
             onDisplayNextStep={displayNextStep}
+            keepShowingHostAvatar={keepShowingHostAvatar}
           />
         ))}
       </div>
@@ -199,12 +202,14 @@ type Props = {
   displayChunk: ChatDisplayChunk
   hostAvatar: { isEnabled: boolean; src?: string }
   hasGuestAvatar: boolean
+  keepShowingHostAvatar: boolean
   onDisplayNextStep: (answerContent?: string, isRetry?: boolean) => void
 }
 const ChatChunks = ({
   displayChunk: { bubbles, input },
   hostAvatar,
   hasGuestAvatar,
+  keepShowingHostAvatar,
   onDisplayNextStep,
 }: Props) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -224,6 +229,7 @@ const ChatChunks = ({
           <AvatarSideContainer
             ref={avatarSideContainerRef}
             hostAvatarSrc={hostAvatar.src}
+            keepShowing={keepShowingHostAvatar || isDefined(input)}
           />
         )}
         <div

diff --git a/packages/bot-engine/src/components/ConversationContainer.tsx b/packages/bot-engine/src/components/ConversationContainer.tsx
@@ -112,6 +112,7 @@ export const ConversationContainer = ({
           onScroll={autoScrollToBottom}
           onBlockEnd={displayNextBlock}
           blockTitle={displayedBlock.block.title}
+          keepShowingHostAvatar={idx === displayedBlocks.length - 1}
         />
       ))}
       {/* We use a block to simulate padding because it makes iOS scroll flicker */}