blsmedia/bot
2
0
Fork 0
Code Activity

fix(engine): 💄 Scroll when payment form appears

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-06-01 09:29:13 +02:00
parent 4f208a2d05
commit caa6015359
4 changed files with 52 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
packages/bot-engine/src/components/ConversationContainer.tsx
View File

@ -8,6 +8,7 @@ import { Block, Edge, PublicTypebot, Theme, VariableWithValue } from 'models'
import { byId, isNotDefined } from 'utils'
import { animateScroll as scroll } from 'react-scroll'
import { LinkedTypebot, useTypebot } from 'contexts/TypebotContext'
import { ChatContext } from 'contexts/ChatContext'
type Props = {
theme: Theme
@ -104,17 +105,19 @@ export const ConversationContainer = ({
ref={scrollableContainer}
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"
>
{displayedBlocks.map((displayedBlock, idx) => (
<ChatBlock
key={displayedBlock.block.id + idx}
steps={displayedBlock.block.steps}
startStepIndex={displayedBlock.startStepIndex}
onScroll={autoScrollToBottom}
onBlockEnd={displayNextBlock}
blockTitle={displayedBlock.block.title}
keepShowingHostAvatar={idx === displayedBlocks.length - 1}
/>
))}
<ChatContext onScroll={autoScrollToBottom}>
{displayedBlocks.map((displayedBlock, idx) => (
<ChatBlock
key={displayedBlock.block.id + idx}
steps={displayedBlock.block.steps}
startStepIndex={displayedBlock.startStepIndex}
onBlockEnd={displayNextBlock}
blockTitle={displayedBlock.block.title}
keepShowingHostAvatar={idx === displayedBlocks.length - 1}
/>
))}
</ChatContext>
{/* We use a block to simulate padding because it makes iOS scroll flicker */}
<div className="w-full h-32" ref={bottomAnchor} />
</div>