💄 (bot) Fix bubble max widths and guest avatar shrinking

Closes #1514

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.2.82",
+  "version": "0.2.83",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/embeds/js/src/components/ConversationContainer/ChatChunk.tsx

@@ -96,11 +96,9 @@ export const ChatChunk = (props: Props) => {
                 props.theme.chat?.guestAvatar?.isEnabled ??
                 defaultGuestAvatarIsEnabled
                   ? isMobile()
-                    ? 'calc(100% - 32px - 32px)'
+                    ? 'calc(100% - 60px)'
                     : 'calc(100% - 48px - 48px)'
-                  : isMobile()
+                  : '100%',
-                  ? 'calc(100% - 32px)'
-                  : 'calc(100% - 48px)',
             }}
           >
             <For each={props.messages.slice(0, displayedMessageIndex() + 1)}>
@@ -168,11 +166,9 @@ export const ChatChunk = (props: Props) => {
                   props.theme.chat?.guestAvatar?.isEnabled ??
                   defaultGuestAvatarIsEnabled
                     ? isMobile()
-                      ? 'calc(100% - 32px - 32px)'
+                      ? 'calc(100% - 60px)'
                       : 'calc(100% - 48px - 48px)'
-                    : isMobile()
+                    : '100%',
-                    ? 'calc(100% - 32px)'
-                    : 'calc(100% - 48px)',
               }}
             >
               <StreamingBubble streamingMessageId={streamingMessageId} />

packages/embeds/js/src/components/InputChatBlock.tsx

@@ -24,7 +24,7 @@ import { PhoneInput } from '@/features/blocks/inputs/phone'
 import { DateForm } from '@/features/blocks/inputs/date'
 import { RatingForm } from '@/features/blocks/inputs/rating'
 import { FileUploadForm } from '@/features/blocks/inputs/fileUpload'
-import { createSignal, Switch, Match, createEffect } from 'solid-js'
+import { createSignal, Switch, Match, createEffect, Show } from 'solid-js'
 import { isNotDefined } from '@typebot.io/lib'
 import { isMobile } from '@/utils/isMobileSignal'
 import { PaymentForm } from '@/features/blocks/inputs/payment'
@@ -85,6 +85,7 @@ export const InputChatBlock = (props: Props) => {
             props.guestAvatar?.isEnabled ?? defaultGuestAvatarIsEnabled
           }
           avatarSrc={props.guestAvatar?.url && props.guestAvatar.url}
+          hasHostAvatar={props.hasHostAvatar}
         />
       </Match>
       <Match when={isNotDefined(answer()) || props.hasError}>
@@ -93,14 +94,14 @@ export const InputChatBlock = (props: Props) => {
           data-blockid={props.block.id}
           ref={props.ref}
         >
-          {props.hasHostAvatar && (
+          <Show when={props.hasHostAvatar}>
             <div
               class={
                 'flex flex-shrink-0 items-center ' +
                 (isMobile() ? 'w-6 h-6' : 'w-10 h-10')
               }
             />
-          )}
+          </Show>
           <Input
             context={props.context}
             block={props.block}

packages/embeds/js/src/components/avatars/DefaultAvatar.tsx

@@ -4,7 +4,7 @@ export const DefaultAvatar = () => {
   return (
     <figure
       class={
-        'flex justify-center items-center rounded-full text-white relative ' +
+        'flex justify-center items-center rounded-full text-white relative flex-shrink-0 ' +
         (isMobile() ? 'w-6 h-6 text-sm' : 'w-10 h-10 text-xl')
       }
       data-testid="default-avatar"

packages/embeds/js/src/components/bubbles/GuestBubble.tsx

@@ -1,16 +1,24 @@
 import { Show } from 'solid-js'
 import { Avatar } from '../avatars/Avatar'
+import { isMobile } from '@/utils/isMobileSignal'
 
 type Props = {
   message: string
   showAvatar: boolean
   avatarSrc?: string
+  hasHostAvatar: boolean
 }
 
 export const GuestBubble = (props: Props) => (
   <div
     class="flex justify-end items-end animate-fade-in gap-2 guest-container"
-    style={{ 'margin-left': '50px' }}
+    style={{
+      'margin-left': props.hasHostAvatar
+        ? isMobile()
+          ? '28px'
+          : '50px'
+        : undefined,
+    }}
   >
     <span
       class="px-4 py-2 whitespace-pre-wrap max-w-full typebot-guest-bubble"

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.82",
+  "version": "0.2.83",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.2.82",
+  "version": "0.2.83",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",