💄 (js) Fix spacings related to avatars

2023-03-07 17:11:24 +01:00
parent 2788d58e50
commit b2fa2024a7
15 changed files with 16 additions and 41 deletions
--- 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]
--- 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",
--- 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={
--- 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>
--- 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}>
--- 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 "
--- 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'}
        >
--- 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 "
--- 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 "
--- 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}
--- 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}
--- 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}
--- 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}
--- 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}
--- 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",