From 910b87155659c6592f20643ac7609cba0fb2c6f5 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Sun, 12 Jun 2022 19:27:59 +0200
Subject: [PATCH] =?UTF-8?q?feat(bot):=20=F0=9F=A7=91=E2=80=8D=F0=9F=92=BB?=
 =?UTF-8?q?=20Keep=20host=20avatar=20when=20group=20starts=20with=20input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ConversationContainer.tsx  | 41 +++++++++++++------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/packages/bot-engine/src/components/ConversationContainer.tsx b/packages/bot-engine/src/components/ConversationContainer.tsx
index 19a0e1cf093..4eff0b1b1b7 100644
--- a/packages/bot-engine/src/components/ConversationContainer.tsx
+++ b/packages/bot-engine/src/components/ConversationContainer.tsx
@@ -4,8 +4,15 @@ import { ChatGroup } from './ChatGroup'
 import { useFrame } from 'react-frame-component'
 import { setCssVariablesValue } from '../services/theme'
 import { useAnswers } from '../contexts/AnswersContext'
-import { Group, Edge, PublicTypebot, Theme, VariableWithValue } from 'models'
-import { byId, isDefined, isNotDefined } from 'utils'
+import {
+  Group,
+  Edge,
+  PublicTypebot,
+  Theme,
+  VariableWithValue,
+  Block,
+} from 'models'
+import { byId, isDefined, isInputBlock, isNotDefined } from 'utils'
 import { animateScroll as scroll } from 'react-scroll'
 import { LinkedTypebot, useTypebot } from 'contexts/TypebotContext'
 import { ChatContext } from 'contexts/ChatContext'
@@ -137,16 +144,26 @@ export const ConversationContainer = ({
       className="overflow-y-scroll w-full lg:w-3/4 min-h-full rounded lg:px-5 px-3 pt-10 relative scrollable-container typebot-chat-view"
     >
       <ChatContext onScroll={autoScrollToBottom}>
-        {displayedGroups.map((displayedGroup, idx) => (
-          <ChatGroup
-            key={displayedGroup.group.id + idx}
-            blocks={displayedGroup.group.blocks}
-            startBlockIndex={displayedGroup.startBlockIndex}
-            onGroupEnd={displayNextGroup}
-            groupTitle={displayedGroup.group.title}
-            keepShowingHostAvatar={idx === displayedGroups.length - 1}
-          />
-        ))}
+        {displayedGroups.map((displayedGroup, idx) => {
+          const groupAfter = displayedGroups[idx + 1]
+          const groupAfterStartsWithInput =
+            groupAfter &&
+            isInputBlock(
+              groupAfter.group.blocks[groupAfter.startBlockIndex] as Block
+            )
+          return (
+            <ChatGroup
+              key={displayedGroup.group.id + idx}
+              blocks={displayedGroup.group.blocks}
+              startBlockIndex={displayedGroup.startBlockIndex}
+              onGroupEnd={displayNextGroup}
+              groupTitle={displayedGroup.group.title}
+              keepShowingHostAvatar={
+                idx === displayedGroups.length - 1 || groupAfterStartsWithInput
+              }
+            />
+          )
+        })}
       </ChatContext>
 
       {/* We use a block to simulate padding because it makes iOS scroll flicker */}