blsmedia/bot
2
0
Fork 0
Code Activity

fix(engine): 🐛 Properly handle variable avatars

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-02-25 18:19:01 +01:00
parent 74b3464474
commit d21b1722b5
9 changed files with 36 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/bot-engine/src/components/ChatBlock/AvatarSideContainer.tsx
View File

@ -7,7 +7,7 @@ import { useHostAvatars } from '../../contexts/HostAvatarsContext'
export const AvatarSideContainer = ({
hostAvatarSrc,
}: {
hostAvatarSrc: string
hostAvatarSrc?: string
}) => {
const { lastBubblesTopOffset } = useHostAvatars()
const { window, document } = useFrame()

11
packages/bot-engine/src/components/ChatBlock/ChatBlock.tsx
View File

@ -110,17 +110,18 @@ export const ChatBlock = ({
if (nextStep) setDisplayedSteps([...displayedSteps, nextStep])
}
const avatarSrc = typebot.theme.chat.hostAvatar?.url
return (
<div className="flex">
<div className="flex w-full">
<HostAvatarsContext>
{(typebot.theme.chat.hostAvatar?.isEnabled ?? true) && (
<AvatarSideContainer
hostAvatarSrc={parseVariables(typebot.variables)(
typebot.theme.chat.hostAvatar?.url
)}
hostAvatarSrc={
avatarSrc && parseVariables(typebot.variables)(avatarSrc)
}
/>
)}
<div className="flex flex-col w-full">
<div className="flex flex-col w-full min-w-0">
<TransitionGroup>
{displayedSteps
.filter((step) => isInputStep(step) || isBubbleStep(step))

5
packages/bot-engine/src/components/ChatBlock/ChatStep/ChatStep.tsx
View File

@ -68,13 +68,12 @@ const InputChatStep = ({
}
if (answer) {
const avatarUrl = typebot.theme.chat.guestAvatar?.url
return (
<GuestBubble
message={answer}
showAvatar={typebot.theme.chat.guestAvatar?.isEnabled ?? false}
avatarSrc={parseVariables(typebot.variables)(
typebot.theme.chat.guestAvatar?.url
)}
avatarSrc={avatarUrl && parseVariables(typebot.variables)(avatarUrl)}
/>
)
}

20
packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/GuestBubble.tsx
View File

@ -5,7 +5,7 @@ import { CSSTransition } from 'react-transition-group'
interface Props {
message: string
showAvatar: boolean
avatarSrc: string
avatarSrc?: string
}
export const GuestBubble = ({
@ -15,16 +15,14 @@ export const GuestBubble = ({
}: Props): JSX.Element => {
return (
<CSSTransition classNames="bubble" timeout={1000}>
<div className="flex justify-end mb-2 items-center">
<div className="flex items-end w-11/12 lg:w-4/6 justify-end">
<div
className="inline-flex px-4 py-2 rounded-lg mr-2 whitespace-pre-wrap max-w-full typebot-guest-bubble"
data-testid="guest-bubble"
>
{message}
</div>
{showAvatar && <Avatar avatarSrc={avatarSrc} />}
</div>
<div className="flex justify-end mb-2 items-end">
<span
className="px-4 py-2 rounded-lg mr-2 whitespace-pre-wrap max-w-full typebot-guest-bubble"
data-testid="guest-bubble"
>
{message}
</span>
{showAvatar && <Avatar avatarSrc={avatarSrc} />}
</div>
</CSSTransition>
)

2
packages/bot-engine/src/components/ChatBlock/ChatStep/bubbles/TextBubble.tsx
View File

@ -61,7 +61,7 @@ export const TextBubble = ({ step, onTransitionEnd }: Props) => {
return (
<div className="flex flex-col" ref={messageContainer}>
<div className="flex mb-2 w-full lg:w-11/12 items-center">
<div className="flex mb-2 w-full items-center">
<div className={'flex relative z-10 items-start typebot-host-bubble'}>
<div
className="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "