fix(engine): 🐛 Properly handle variable avatars

packages/bot-engine/src/assets/icons.tsx

@@ -5,6 +5,7 @@ export const SendIcon = (props: React.SVGProps<SVGSVGElement>) => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 512 512"
     width="19px"
+    color="white"
     {...props}
   >
     <path d="M476.59 227.05l-.16-.07L49.35 49.84A23.56 23.56 0 0027.14 52 24.65 24.65 0 0016 72.59v113.29a24 24 0 0019.52 23.57l232.93 43.07a4 4 0 010 7.86L35.53 303.45A24 24 0 0016 327v113.31A23.57 23.57 0 0026.59 460a23.94 23.94 0 0013.22 4 24.55 24.55 0 009.52-1.93L476.4 285.94l.19-.09a32 32 0 000-58.8z" />

packages/bot-engine/src/assets/style.css

@@ -184,7 +184,7 @@ textarea {
 }
 
 .typebot-button > .send-icon {
-  fill: var(--typebot-button-active-color);
+  fill: var(--typebot-button-color);
 }
 
 .typebot-chat-view {

packages/bot-engine/src/components/ChatBlock/AvatarSideContainer.tsx

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

packages/bot-engine/src/components/ChatBlock/ChatBlock.tsx

@@ -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))

packages/bot-engine/src/components/ChatBlock/ChatStep/ChatStep.tsx

@@ -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)}
       />
     )
   }

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

@@ -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>
   )

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

@@ -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 "

packages/bot-engine/src/components/avatars/Avatar.tsx

@@ -1,10 +1,12 @@
 import React from 'react'
+import { isDefined } from 'utils'
 import { DefaultAvatar } from './DefaultAvatar'
 
-export const Avatar = ({ avatarSrc }: { avatarSrc: string }): JSX.Element => {
+export const Avatar = ({ avatarSrc }: { avatarSrc?: string }): JSX.Element => {
+  if (avatarSrc === '') return <></>
   return (
-    <div className="w-full h-full rounded-full text-2xl md:text-4xl text-center xs:w-10 xs:h-10">
-      {avatarSrc !== '' ? (
+    <div className="w-full h-full rounded-full text-2xl md:text-4xl text-center xs:w-10 xs:h-10 flex-shrink-0">
+      {isDefined(avatarSrc) ? (
         <figure
           className={
             'flex justify-center items-center rounded-full text-white w-6 h-6 text-sm relative xs:w-full xs:h-full xs:text-xl'