blsmedia/bot
2
0
Fork 0
Code Activity

feat(bot): 🧑‍💻 Keep host avatar when group starts with input

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-06-12 19:27:59 +02:00
parent 353923e029
commit 910b871556
1 changed files with 29 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,8 +4,15 @@ import { ChatGroup } from './ChatGroup'
import { useFrame } from 'react-frame-component' import { useFrame } from 'react-frame-component'
import { setCssVariablesValue } from '../services/theme' import { setCssVariablesValue } from '../services/theme'
import { useAnswers } from '../contexts/AnswersContext' import { useAnswers } from '../contexts/AnswersContext'
import { Group, Edge, PublicTypebot, Theme, VariableWithValue } from 'models' import {
import { byId, isDefined, isNotDefined } from 'utils' Group,
Edge,
PublicTypebot,
Theme,
VariableWithValue,
Block,
} from 'models'
import { byId, isDefined, isInputBlock, isNotDefined } from 'utils'
import { animateScroll as scroll } from 'react-scroll' import { animateScroll as scroll } from 'react-scroll'
import { LinkedTypebot, useTypebot } from 'contexts/TypebotContext' import { LinkedTypebot, useTypebot } from 'contexts/TypebotContext'
import { ChatContext } from 'contexts/ChatContext' 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" 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}> <ChatContext onScroll={autoScrollToBottom}>
{displayedGroups.map((displayedGroup, idx) => ( {displayedGroups.map((displayedGroup, idx) => {
<ChatGroup const groupAfter = displayedGroups[idx + 1]
key={displayedGroup.group.id + idx} const groupAfterStartsWithInput =
blocks={displayedGroup.group.blocks} groupAfter &&
startBlockIndex={displayedGroup.startBlockIndex} isInputBlock(
onGroupEnd={displayNextGroup} groupAfter.group.blocks[groupAfter.startBlockIndex] as Block
groupTitle={displayedGroup.group.title} )
keepShowingHostAvatar={idx === displayedGroups.length - 1} 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> </ChatContext>
{/* We use a block to simulate padding because it makes iOS scroll flicker */} {/* We use a block to simulate padding because it makes iOS scroll flicker */}