From 0de0d128b39716d9ababb468bbefc448fa04575c Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Tue, 17 May 2022 13:28:33 -0700
Subject: [PATCH] =?UTF-8?q?feat(engine):=20=F0=9F=92=84=20Hide=20avatar=20?=
 =?UTF-8?q?if=20not=20last=20block?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ChatBlock/AvatarSideContainer.tsx        | 6 +++---
 packages/bot-engine/src/components/ChatBlock/ChatBlock.tsx  | 6 ++++++
 .../bot-engine/src/components/ConversationContainer.tsx     | 1 +
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/bot-engine/src/components/ChatBlock/AvatarSideContainer.tsx b/packages/bot-engine/src/components/ChatBlock/AvatarSideContainer.tsx
index 692651349..700bc5467 100644
--- 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
index b43a56d21..b233bbdde 100644
--- 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
index 0ea69565f..862f8c4af 100644
--- 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 */}