💄 (js) Fix spacings related to avatars

.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]

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

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'
+                ? isMobile()
-                : '8px',
+                  ? '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={

packages/js/src/components/ConversationContainer/LoadingChunk.tsx

@@ -16,16 +16,7 @@ export const LoadingChunk = (props: Props) => (
             hostAvatarSrc={props.theme.chat.hostAvatar?.url}
           />
         </Show>
-        <div
+        <LoadingBubble />
-          class="flex-1"
-          style={{
-            'margin-right': props.theme.chat.guestAvatar?.isEnabled
-              ? '50px'
-              : '8px',
-          }}
-        >
-          <LoadingBubble />
-        </div>
       </div>
     </div>
   </div>

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}>

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 "

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'}
         >

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 "

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 "

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}

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}

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}

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}

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}

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