From b2fa2024a7b735fa58559b342569602cdcd44297 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Tue, 7 Mar 2023 17:11:24 +0100
Subject: [PATCH] :lipstick: (js) Fix spacings related to avatars

---
 .github/workflows/publish_docker_images.yml           |  6 +-----
 packages/js/package.json                              |  2 +-
 .../components/ConversationContainer/ChatChunk.tsx    |  8 ++++++--
 .../components/ConversationContainer/LoadingChunk.tsx | 11 +----------
 packages/js/src/components/InputChatBlock.tsx         | 10 ++--------
 .../blocks/bubbles/audio/components/AudioBubble.tsx   |  2 +-
 .../blocks/bubbles/embed/components/EmbedBubble.tsx   |  2 +-
 .../blocks/bubbles/image/components/ImageBubble.tsx   |  2 +-
 .../blocks/bubbles/video/components/VideoBubble.tsx   |  2 +-
 .../blocks/inputs/email/components/EmailInput.tsx     |  2 --
 .../blocks/inputs/number/components/NumberInput.tsx   |  2 --
 .../blocks/inputs/phone/components/PhoneInput.tsx     |  2 --
 .../blocks/inputs/textInput/components/TextInput.tsx  |  2 --
 .../blocks/inputs/url/components/UrlInput.tsx         |  2 --
 packages/react/package.json                           |  2 +-
 15 files changed, 16 insertions(+), 41 deletions(-)

diff --git a/.github/workflows/publish_docker_images.yml b/.github/workflows/publish_docker_images.yml
index 5a20cf7608b..7a8ec747ba2 100644
--- a/.github/workflows/publish_docker_images.yml
+++ b/.github/workflows/publish_docker_images.yml
@@ -1,12 +1,8 @@
 name: Build Docker images
 
 on:
-  create:
-    tags:
-      - 'v*'
-      - '!js-v*'
-      - '!react-v*'
   push:
+    tags: ['v*']
     branches: [main]
   pull_request:
     branches: [main]
diff --git a/packages/js/package.json b/packages/js/package.json
index 08a020c567d..15e88175844 100644
--- a/packages/js/package.json
+++ b/packages/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",
diff --git a/packages/js/src/components/ConversationContainer/ChatChunk.tsx b/packages/js/src/components/ConversationContainer/ChatChunk.tsx
index 285ea398a5c..4a5282ed0ec 100644
--- a/packages/js/src/components/ConversationContainer/ChatChunk.tsx
+++ b/packages/js/src/components/ConversationContainer/ChatChunk.tsx
@@ -1,4 +1,5 @@
 import { BotContext } from '@/types'
+import { isMobile } from '@/utils/isMobileSignal'
 import type { ChatReply, Settings, Theme } from 'models'
 import { createSignal, For, onMount, Show } from 'solid-js'
 import { HostBubble } from '../bubbles/HostBubble'
@@ -60,8 +61,10 @@ export const ChatChunk = (props: Props) => {
             class="flex-1"
             style={{
               'margin-right': props.theme.chat.guestAvatar?.isEnabled
-                ? '50px'
-                : '8px',
+                ? isMobile()
+                  ? '32px'
+                  : '48px'
+                : undefined,
             }}
           >
             <For each={props.messages.slice(0, displayedMessageIndex() + 1)}>
@@ -81,6 +84,7 @@ export const ChatChunk = (props: Props) => {
             inputIndex={props.inputIndex}
             onSubmit={props.onSubmit}
             onSkip={props.onSkip}
+            hasHostAvatar={props.theme.chat.hostAvatar?.isEnabled ?? false}
             guestAvatar={props.theme.chat.guestAvatar}
             context={props.context}
             isInputPrefillEnabled={
diff --git a/packages/js/src/components/ConversationContainer/LoadingChunk.tsx b/packages/js/src/components/ConversationContainer/LoadingChunk.tsx
index 7869dabc9fe..2160dd8890a 100644
--- a/packages/js/src/components/ConversationContainer/LoadingChunk.tsx
+++ b/packages/js/src/components/ConversationContainer/LoadingChunk.tsx
@@ -16,16 +16,7 @@ export const LoadingChunk = (props: Props) => (
             hostAvatarSrc={props.theme.chat.hostAvatar?.url}
           />
         </Show>
-        <div
-          class="flex-1"
-          style={{
-            'margin-right': props.theme.chat.guestAvatar?.isEnabled
-              ? '50px'
-              : '8px',
-          }}
-        >
-          <LoadingBubble />
-        </div>
+        <LoadingBubble />
       </div>
     </div>
   </div>
diff --git a/packages/js/src/components/InputChatBlock.tsx b/packages/js/src/components/InputChatBlock.tsx
index 4afc44444b3..c5c3c75f8e6 100644
--- a/packages/js/src/components/InputChatBlock.tsx
+++ b/packages/js/src/components/InputChatBlock.tsx
@@ -32,6 +32,7 @@ import { PaymentForm } from '@/features/blocks/inputs/payment'
 
 type Props = {
   block: NonNullable<ChatReply['input']>
+  hasHostAvatar: boolean
   guestAvatar?: Theme['chat']['guestAvatar']
   inputIndex: number
   context: BotContext
@@ -66,7 +67,7 @@ export const InputChatBlock = (props: Props) => {
       </Match>
       <Match when={isNotDefined(answer())}>
         <div class="flex justify-end animate-fade-in">
-          {props.guestAvatar?.isEnabled && (
+          {props.hasHostAvatar && (
             <div
               class={
                 'flex mr-2 mb-2 mt-1 flex-shrink-0 items-center ' +
@@ -81,7 +82,6 @@ export const InputChatBlock = (props: Props) => {
             isInputPrefillEnabled={props.isInputPrefillEnabled}
             onSubmit={handleSubmit}
             onSkip={handleSkip}
-            hasGuestAvatar={props.guestAvatar?.isEnabled ?? false}
           />
         </div>
       </Match>
@@ -93,7 +93,6 @@ const Input = (props: {
   context: BotContext
   block: NonNullable<ChatReply['input']>
   inputIndex: number
-  hasGuestAvatar: boolean
   isInputPrefillEnabled: boolean
   onSubmit: (answer: InputSubmitContent) => void
   onSkip: (label: string) => void
@@ -117,7 +116,6 @@ const Input = (props: {
           block={props.block as TextInputBlock}
           defaultValue={getPrefilledValue()}
           onSubmit={onSubmit}
-          hasGuestAvatar={props.hasGuestAvatar}
         />
       </Match>
       <Match when={props.block.type === InputBlockType.NUMBER}>
@@ -125,7 +123,6 @@ const Input = (props: {
           block={props.block as NumberInputBlock}
           defaultValue={getPrefilledValue()}
           onSubmit={onSubmit}
-          hasGuestAvatar={props.hasGuestAvatar}
         />
       </Match>
       <Match when={props.block.type === InputBlockType.EMAIL}>
@@ -133,7 +130,6 @@ const Input = (props: {
           block={props.block as EmailInputBlock}
           defaultValue={getPrefilledValue()}
           onSubmit={onSubmit}
-          hasGuestAvatar={props.hasGuestAvatar}
         />
       </Match>
       <Match when={props.block.type === InputBlockType.URL}>
@@ -141,7 +137,6 @@ const Input = (props: {
           block={props.block as UrlInputBlock}
           defaultValue={getPrefilledValue()}
           onSubmit={onSubmit}
-          hasGuestAvatar={props.hasGuestAvatar}
         />
       </Match>
       <Match when={props.block.type === InputBlockType.PHONE}>
@@ -152,7 +147,6 @@ const Input = (props: {
           }
           defaultValue={getPrefilledValue()}
           onSubmit={onSubmit}
-          hasGuestAvatar={props.hasGuestAvatar}
         />
       </Match>
       <Match when={props.block.type === InputBlockType.DATE}>
diff --git a/packages/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx b/packages/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx
index 58991ff31ab..641cf44562e 100644
--- a/packages/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx
+++ b/packages/js/src/features/blocks/bubbles/audio/components/AudioBubble.tsx
@@ -30,7 +30,7 @@ export const AudioBubble = (props: Props) => {
 
   return (
     <div class="flex flex-col animate-fade-in">
-      <div class="flex mb-2 w-full lg:w-11/12 items-center">
+      <div class="flex mb-2 w-full items-center">
         <div class={'flex relative z-10 items-start typebot-host-bubble'}>
           <div
             class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
diff --git a/packages/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx b/packages/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx
index 86d1dbc4335..6300301f4e2 100644
--- a/packages/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx
+++ b/packages/js/src/features/blocks/bubbles/embed/components/EmbedBubble.tsx
@@ -29,7 +29,7 @@ export const EmbedBubble = (props: Props) => {
 
   return (
     <div class="flex flex-col w-full animate-fade-in">
-      <div class="flex mb-2 w-full lg:w-11/12 items-center">
+      <div class="flex mb-2 w-full items-center">
         <div
           class={'flex relative z-10 items-start typebot-host-bubble w-full'}
         >
diff --git a/packages/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx b/packages/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx
index 24d673c3712..884a24af067 100644
--- a/packages/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx
+++ b/packages/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx
@@ -40,7 +40,7 @@ export const ImageBubble = (props: Props) => {
 
   return (
     <div class="flex flex-col animate-fade-in">
-      <div class="flex mb-2 w-full lg:w-11/12 items-center">
+      <div class="flex mb-2 w-full items-center">
         <div class={'flex relative z-10 items-start typebot-host-bubble'}>
           <div
             class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
diff --git a/packages/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx b/packages/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx
index b9fce3a7f78..0dffcba4285 100644
--- a/packages/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx
+++ b/packages/js/src/features/blocks/bubbles/video/components/VideoBubble.tsx
@@ -33,7 +33,7 @@ export const VideoBubble = (props: Props) => {
 
   return (
     <div class="flex flex-col animate-fade-in">
-      <div class="flex mb-2 w-full lg:w-11/12 items-center">
+      <div class="flex mb-2 w-full items-center">
         <div class={'flex relative z-10 items-start typebot-host-bubble'}>
           <div
             class="flex items-center absolute px-4 py-2 rounded-lg bubble-typing z-10 "
diff --git a/packages/js/src/features/blocks/inputs/email/components/EmailInput.tsx b/packages/js/src/features/blocks/inputs/email/components/EmailInput.tsx
index 3be5b75d099..a3e7755aec4 100644
--- a/packages/js/src/features/blocks/inputs/email/components/EmailInput.tsx
+++ b/packages/js/src/features/blocks/inputs/email/components/EmailInput.tsx
@@ -8,7 +8,6 @@ import { createSignal, onMount } from 'solid-js'
 type Props = {
   block: EmailInputBlock
   defaultValue?: string
-  hasGuestAvatar: boolean
   onSubmit: (value: InputSubmitContent) => void
 }
 
@@ -40,7 +39,6 @@ export const EmailInput = (props: Props) => {
       }
       data-testid="input"
       style={{
-        'margin-right': props.hasGuestAvatar ? '50px' : '8px',
         'max-width': '350px',
       }}
       onKeyDown={submitWhenEnter}
diff --git a/packages/js/src/features/blocks/inputs/number/components/NumberInput.tsx b/packages/js/src/features/blocks/inputs/number/components/NumberInput.tsx
index dcbf24da756..34ae9188685 100644
--- a/packages/js/src/features/blocks/inputs/number/components/NumberInput.tsx
+++ b/packages/js/src/features/blocks/inputs/number/components/NumberInput.tsx
@@ -9,7 +9,6 @@ type NumberInputProps = {
   block: NumberInputBlock
   defaultValue?: string
   onSubmit: (value: InputSubmitContent) => void
-  hasGuestAvatar: boolean
 }
 
 export const NumberInput = (props: NumberInputProps) => {
@@ -40,7 +39,6 @@ export const NumberInput = (props: NumberInputProps) => {
       }
       data-testid="input"
       style={{
-        'margin-right': props.hasGuestAvatar ? '50px' : '8px',
         'max-width': '350px',
       }}
       onKeyDown={submitWhenEnter}
diff --git a/packages/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx b/packages/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx
index 6f3b09bb715..d238594c0bb 100644
--- a/packages/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx
+++ b/packages/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx
@@ -13,7 +13,6 @@ type PhoneInputProps = Pick<
 > & {
   defaultValue?: string
   onSubmit: (value: InputSubmitContent) => void
-  hasGuestAvatar: boolean
 }
 
 export const PhoneInput = (props: PhoneInputProps) => {
@@ -88,7 +87,6 @@ export const PhoneInput = (props: PhoneInputProps) => {
       class={'flex items-end justify-between rounded-lg pr-2 typebot-input'}
       data-testid="input"
       style={{
-        'margin-right': props.hasGuestAvatar ? '50px' : '8px',
         'max-width': '400px',
       }}
       onKeyDown={submitWhenEnter}
diff --git a/packages/js/src/features/blocks/inputs/textInput/components/TextInput.tsx b/packages/js/src/features/blocks/inputs/textInput/components/TextInput.tsx
index 06a3fd875d7..1b3a4652c2b 100644
--- a/packages/js/src/features/blocks/inputs/textInput/components/TextInput.tsx
+++ b/packages/js/src/features/blocks/inputs/textInput/components/TextInput.tsx
@@ -8,7 +8,6 @@ import { createSignal, onMount } from 'solid-js'
 type Props = {
   block: TextInputBlock
   defaultValue?: string
-  hasGuestAvatar: boolean
   onSubmit: (value: InputSubmitContent) => void
 }
 
@@ -41,7 +40,6 @@ export const TextInput = (props: Props) => {
       }
       data-testid="input"
       style={{
-        'margin-right': props.hasGuestAvatar ? '50px' : '8px',
         'max-width': props.block.options.isLong ? undefined : '350px',
       }}
       onKeyDown={submitWhenEnter}
diff --git a/packages/js/src/features/blocks/inputs/url/components/UrlInput.tsx b/packages/js/src/features/blocks/inputs/url/components/UrlInput.tsx
index 1853bbee7df..3dec8d13a76 100644
--- a/packages/js/src/features/blocks/inputs/url/components/UrlInput.tsx
+++ b/packages/js/src/features/blocks/inputs/url/components/UrlInput.tsx
@@ -9,7 +9,6 @@ type Props = {
   block: UrlInputBlock
   defaultValue?: string
   onSubmit: (value: InputSubmitContent) => void
-  hasGuestAvatar: boolean
 }
 
 export const UrlInput = (props: Props) => {
@@ -46,7 +45,6 @@ export const UrlInput = (props: Props) => {
       }
       data-testid="input"
       style={{
-        'margin-right': props.hasGuestAvatar ? '50px' : '8px',
         'max-width': '350px',
       }}
       onKeyDown={submitWhenEnter}
diff --git a/packages/react/package.json b/packages/react/package.json
index 292a7851040..d63421ad145 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",