🐛 (js) Fix preview message without avatar

Was showing a broken link instead of nothing

.github/workflows/auto-create-tags.yml

@@ -22,19 +22,13 @@ jobs:
         if: ${{ contains(steps.main.outputs.tagname, 'v') }}
         uses: EndBug/latest-tag@latest
 
-      - name: 'Create typebot-js tag'
+      - name: 'Create js tag'
-        uses: Klemensas/action-autotag@stable
-        with:
-          package_root: '/packages/typebot-js'
-          tag_prefix: 'js-lib-v'
-
-      - name: 'Create typebot-js tag'
         uses: Klemensas/action-autotag@stable
         with:
           package_root: '/packages/js'
           tag_prefix: 'js-v'
 
-      - name: 'Create typebot-js tag'
+      - name: 'Create react tag'
         uses: Klemensas/action-autotag@stable
         with:
           package_root: '/packages/react'

packages/js/package.json

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

packages/js/src/features/bubble/components/PreviewMessage.tsx

@@ -1,4 +1,4 @@
-import { createSignal } from 'solid-js'
+import { createSignal, Show } from 'solid-js'
 import { PreviewMessageParams, PreviewMessageTheme } from '../types'
 
 export type PreviewMessageProps = Pick<
@@ -20,7 +20,7 @@ export const PreviewMessage = (props: PreviewMessageProps) => {
   return (
     <div
       onClick={() => props.onClick()}
-      class="fixed bottom-20 right-4 w-64 rounded-md duration-200 flex items-center gap-4 shadow-md animate-fade-in cursor-pointer hover:shadow-lg p-4"
+      class="fixed bottom-20 right-4 max-w-[256px] rounded-md duration-200 flex items-center gap-4 shadow-md animate-fade-in cursor-pointer hover:shadow-lg p-4"
       style={{
         'background-color':
           props.previewMessageTheme?.backgroundColor ?? defaultBackgroundColor,
@@ -30,42 +30,58 @@ export const PreviewMessage = (props: PreviewMessageProps) => {
       onMouseEnter={() => setIsPreviewMessageHovered(true)}
       onMouseLeave={() => setIsPreviewMessageHovered(false)}
     >
-      <button
+      <CloseButton
-        class={
+        isHovered={isPreviewMessageHovered()}
-          `absolute -top-3 -right-3 rounded-full w-6 h-6 p-1 hover:brightness-95 active:brightness-90 transition-all ` +
+        previewMessageTheme={props.previewMessageTheme}
-          (isPreviewMessageHovered() ? 'opacity-100' : 'opacity-0')
+        onClick={props.onCloseClick}
-        }
-        onClick={(e) => {
-          e.stopPropagation()
-          return props.onCloseClick()
-        }}
-        style={{
-          'background-color':
-            props.previewMessageTheme?.closeButtonBackgroundColor ??
-            defaultBackgroundColor,
-          color:
-            props.previewMessageTheme?.closeButtonIconColor ?? defaultTextColor,
-        }}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <line x1="18" y1="6" x2="6" y2="18" />
-          <line x1="6" y1="6" x2="18" y2="18" />
-        </svg>
-      </button>
-      <img
-        src={props.avatarUrl}
-        class="rounded-full w-8 h-8 object-cover"
-        alt="Bot avatar"
       />
+      <Show when={props.avatarUrl} keyed>
+        {(avatarUrl) => (
+          <img
+            src={avatarUrl}
+            class="rounded-full w-8 h-8 object-cover"
+            alt="Bot avatar"
+          />
+        )}
+      </Show>
       <p>{props.message}</p>
     </div>
   )
 }
+
+const CloseButton = (props: {
+  isHovered: boolean
+  previewMessageTheme?: PreviewMessageTheme
+  onClick: () => void
+}) => (
+  <button
+    class={
+      `absolute -top-2 -right-2 rounded-full w-6 h-6 p-1 hover:brightness-95 active:brightness-90 transition-all border ` +
+      (props.isHovered ? 'opacity-100' : 'opacity-0')
+    }
+    onClick={(e) => {
+      e.stopPropagation()
+      return props.onClick()
+    }}
+    style={{
+      'background-color':
+        props.previewMessageTheme?.closeButtonBackgroundColor ??
+        defaultBackgroundColor,
+      color:
+        props.previewMessageTheme?.closeButtonIconColor ?? defaultTextColor,
+    }}
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <line x1="18" y1="6" x2="6" y2="18" />
+      <line x1="6" y1="6" x2="18" y2="18" />
+    </svg>
+  </button>
+)

packages/react/package.json

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