diff --git a/packages/bot-engine/src/components/ConversationContainer.tsx b/packages/bot-engine/src/components/ConversationContainer.tsx index 19a0e1cf0..4eff0b1b1 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" > - {displayedGroups.map((displayedGroup, idx) => ( - - ))} + {displayedGroups.map((displayedGroup, idx) => { + const groupAfter = displayedGroups[idx + 1] + const groupAfterStartsWithInput = + groupAfter && + isInputBlock( + groupAfter.group.blocks[groupAfter.startBlockIndex] as Block + ) + return ( + + ) + })} {/* We use a block to simulate padding because it makes iOS scroll flicker */}