🐛 (web) Dynamic first host avatar not displaying in viewer

packages/embeds/js/package.json

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

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

@@ -86,7 +86,7 @@ export const ConversationContainer = (props: Props) => {
   onMount(() => {
     ;(async () => {
       const initialChunk = chatChunks()[0]
-      if (initialChunk.clientSideActions) {
+      if (!initialChunk.clientSideActions) return
       const actionsBeforeFirstBubble = initialChunk.clientSideActions.filter(
         (action) => isNotDefined(action.lastBubbleBlockId)
       )
@@ -111,7 +111,6 @@ export const ConversationContainer = (props: Props) => {
         if (response && 'blockedPopupUrl' in response)
           setBlockedPopupUrl(response.blockedPopupUrl)
       }
-      }
     })()
   })
 

packages/embeds/js/src/components/avatars/Avatar.tsx

@@ -8,7 +8,7 @@ export const Avatar = (props: { initialAvatarSrc?: string }) => {
 
   createEffect(() => {
     if (
-      avatarSrc()?.startsWith('{{') &&
+      (avatarSrc()?.startsWith('{{') || !avatarSrc()) &&
       props.initialAvatarSrc?.startsWith('http')
     )
       setAvatarSrc(props.initialAvatarSrc)

packages/embeds/js/src/features/bubble/components/BubbleButton.tsx

@@ -34,6 +34,8 @@ export const BubbleButton = (props: Props) => (
   >
     <Show when={isNotDefined(props.customIconSrc)} keyed>
       <svg
+        //@ts-expect-error part exists
+        part="button-icon"
         viewBox="0 0 24 24"
         style={{
           stroke:
@@ -70,6 +72,7 @@ export const BubbleButton = (props: Props) => (
     </Show>
     <Show when={props.customIconSrc && !isImageSrc(props.customIconSrc)}>
       <span
+        part="button-icon"
         class={clsx(
           'text-4xl duration-200 transition',
           props.isBotOpened ? 'scale-0 opacity-0' : 'scale-100 opacity-100'
@@ -84,6 +87,8 @@ export const BubbleButton = (props: Props) => (
     </Show>
     <Show when={isNotDefined(props.customCloseIconSrc)}>
       <svg
+        //@ts-expect-error part exists
+        part="button-icon"
         viewBox="0 0 24 24"
         style={{
           fill:
@@ -132,6 +137,7 @@ export const BubbleButton = (props: Props) => (
       when={props.customCloseIconSrc && !isImageSrc(props.customCloseIconSrc)}
     >
       <span
+        part="button-icon"
         class={clsx(
           'absolute text-4xl duration-200 transition',
           props.isBotOpened

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.31",
+  "version": "0.2.33",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/react/package.json

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