🐛 (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,31 +86,30 @@ export const ConversationContainer = (props: Props) => {
   onMount(() => {
     ;(async () => {
       const initialChunk = chatChunks()[0]
-      if (initialChunk.clientSideActions) {
+      if (!initialChunk.clientSideActions) return
-        const actionsBeforeFirstBubble = initialChunk.clientSideActions.filter(
+      const actionsBeforeFirstBubble = initialChunk.clientSideActions.filter(
-          (action) => isNotDefined(action.lastBubbleBlockId)
+        (action) => isNotDefined(action.lastBubbleBlockId)
+      )
+      for (const action of actionsBeforeFirstBubble) {
+        if (
+          'streamOpenAiChatCompletion' in action ||
+          'webhookToExecute' in action
         )
-        for (const action of actionsBeforeFirstBubble) {
+          setIsSending(true)
-          if (
+        const response = await executeClientSideAction({
-            'streamOpenAiChatCompletion' in action ||
+          clientSideAction: action,
-            'webhookToExecute' in action
+          context: {
-          )
+            apiHost: props.context.apiHost,
-            setIsSending(true)
+            sessionId: props.initialChatReply.sessionId,
-          const response = await executeClientSideAction({
+          },
-            clientSideAction: action,
+          onMessageStream: streamMessage,
-            context: {
+        })
-              apiHost: props.context.apiHost,
+        if (response && 'replyToSend' in response) {
-              sessionId: props.initialChatReply.sessionId,
+          sendMessage(response.replyToSend, response.logs)
-            },
+          return
-            onMessageStream: streamMessage,
-          })
-          if (response && 'replyToSend' in response) {
-            sendMessage(response.replyToSend, response.logs)
-            return
-          }
-          if (response && 'blockedPopupUrl' in response)
-            setBlockedPopupUrl(response.blockedPopupUrl)
         }
+        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",