🐛 (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,14 +30,38 @@ export const PreviewMessage = (props: PreviewMessageProps) => {
       onMouseEnter={() => setIsPreviewMessageHovered(true)}
       onMouseLeave={() => setIsPreviewMessageHovered(false)}
     >
+      <CloseButton
+        isHovered={isPreviewMessageHovered()}
+        previewMessageTheme={props.previewMessageTheme}
+        onClick={props.onCloseClick}
+      />
+      <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-3 -right-3 rounded-full w-6 h-6 p-1 hover:brightness-95 active:brightness-90 transition-all ` +
+      `absolute -top-2 -right-2 rounded-full w-6 h-6 p-1 hover:brightness-95 active:brightness-90 transition-all border ` +
-          (isPreviewMessageHovered() ? 'opacity-100' : 'opacity-0')
+      (props.isHovered ? 'opacity-100' : 'opacity-0')
     }
     onClick={(e) => {
       e.stopPropagation()
-          return props.onCloseClick()
+      return props.onClick()
     }}
     style={{
       'background-color':
@@ -60,12 +84,4 @@ export const PreviewMessage = (props: PreviewMessageProps) => {
       <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"
-      />
-      <p>{props.message}</p>
-    </div>
-  )
-}

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