From 3662c0d631383d3bd2cb24230e9fcc6b3b976999 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
Date: Thu, 16 May 2024 15:25:38 +0200
Subject: [PATCH] :lipstick: (bot) Fix bubble max widths and guest avatar
 shrinking

Closes #1514
---
 packages/embeds/js/package.json                      |  2 +-
 .../components/ConversationContainer/ChatChunk.tsx   | 12 ++++--------
 packages/embeds/js/src/components/InputChatBlock.tsx |  7 ++++---
 .../js/src/components/avatars/DefaultAvatar.tsx      |  2 +-
 .../embeds/js/src/components/bubbles/GuestBubble.tsx | 10 +++++++++-
 packages/embeds/nextjs/package.json                  |  2 +-
 packages/embeds/react/package.json                   |  2 +-
 7 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
index 8bd462f02..2ddd5da45 100644
--- a/packages/embeds/js/package.json
+++ b/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",
diff --git a/packages/embeds/js/src/components/ConversationContainer/ChatChunk.tsx b/packages/embeds/js/src/components/ConversationContainer/ChatChunk.tsx
index d8a4ef5bf..44abe6c94 100644
--- a/packages/embeds/js/src/components/ConversationContainer/ChatChunk.tsx
+++ b/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()
-                  ? 'calc(100% - 32px)'
-                  : 'calc(100% - 48px)',
+                  : '100%',
             }}
           >
             <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()
-                    ? 'calc(100% - 32px)'
-                    : 'calc(100% - 48px)',
+                    : '100%',
               }}
             >
               <StreamingBubble streamingMessageId={streamingMessageId} />
diff --git a/packages/embeds/js/src/components/InputChatBlock.tsx b/packages/embeds/js/src/components/InputChatBlock.tsx
index fd6d02e53..1d987ace0 100644
--- a/packages/embeds/js/src/components/InputChatBlock.tsx
+++ b/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}
diff --git a/packages/embeds/js/src/components/avatars/DefaultAvatar.tsx b/packages/embeds/js/src/components/avatars/DefaultAvatar.tsx
index 8cb33f9a1..410d6a14d 100644
--- a/packages/embeds/js/src/components/avatars/DefaultAvatar.tsx
+++ b/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"
diff --git a/packages/embeds/js/src/components/bubbles/GuestBubble.tsx b/packages/embeds/js/src/components/bubbles/GuestBubble.tsx
index 68a3ff138..75f929667 100644
--- a/packages/embeds/js/src/components/bubbles/GuestBubble.tsx
+++ b/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"
diff --git a/packages/embeds/nextjs/package.json b/packages/embeds/nextjs/package.json
index d54ecc6cc..9cea3f556 100644
--- a/packages/embeds/nextjs/package.json
+++ b/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",
diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
index a61edb383..526d569bd 100644
--- a/packages/embeds/react/package.json
+++ b/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",