🐛 Fix progress bar fixed position on Bubble embed

Closes #1328

packages/embeds/js/package.json

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

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

@@ -19,6 +19,7 @@ import { clsx } from 'clsx'
 import { HTTPError } from 'ky'
 import { injectFont } from '@/utils/injectFont'
 import { ProgressBar } from './ProgressBar'
+import { Portal } from 'solid-js/web'
 
 export type BotProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -28,6 +29,7 @@ export type BotProps = {
   prefilledVariables?: Record<string, unknown>
   apiHost?: string
   font?: Font
+  progressBarRef?: HTMLDivElement
   onNewInputBlock?: (inputBlock: InputBlock) => void
   onAnswer?: (answer: { message: string; blockId: string }) => void
   onInit?: () => void
@@ -177,6 +179,7 @@ export const Bot = (props: BotProps & { class?: string }) => {
               sessionId: initialChatReply.sessionId,
               typebot: initialChatReply.typebot,
             }}
+            progressBarRef={props.progressBarRef}
             onNewInputBlock={props.onNewInputBlock}
             onNewLogs={props.onNewLogs}
             onAnswer={props.onAnswer}
@@ -192,6 +195,7 @@ type BotContentProps = {
   initialChatReply: InitialChatReply
   context: BotContext
   class?: string
+  progressBarRef?: HTMLDivElement
   onNewInputBlock?: (inputBlock: InputBlock) => void
   onAnswer?: (answer: { message: string; blockId: string }) => void
   onEnd?: () => void
@@ -245,7 +249,19 @@ const BotContent = (props: BotContentProps) => {
           props.initialChatReply.typebot.theme.general?.progressBar?.isEnabled
         }
       >
-        <ProgressBar value={progressValue() as number} />
+        <Show
+          when={
+            props.progressBarRef &&
+            (props.initialChatReply.typebot.theme.general?.progressBar
+              ?.position ?? defaultTheme.general.progressBar.position) ===
+              'fixed'
+          }
+          fallback={<ProgressBar value={progressValue() as number} />}
+        >
+          <Portal mount={props.progressBarRef}>
+            <ProgressBar value={progressValue() as number} />
+          </Portal>
+        </Show>
       </Show>
       <div class="flex w-full h-full justify-center">
         <ConversationContainer

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

@@ -55,6 +55,8 @@ export const Bubble = (props: BubbleProps) => {
     setButtonSize(parseButtonSize(bubbleProps.theme?.button?.size ?? 'medium'))
   })
 
+  let progressBarContainerRef
+
   onMount(() => {
     window.addEventListener('message', processIncomingEvent)
     const autoShowDelay = bubbleProps.autoShowDelay
@@ -164,6 +166,7 @@ export const Bubble = (props: BubbleProps) => {
         isBotOpened={isBotOpened()}
         buttonSize={buttonSize()}
       />
+      <div ref={progressBarContainerRef} />
       <div
         part="bot"
         style={{
@@ -194,6 +197,7 @@ export const Bubble = (props: BubbleProps) => {
             {...botProps}
             prefilledVariables={prefilledVariables()}
             class="rounded-lg"
+            progressBarRef={progressBarContainerRef}
           />
         </Show>
       </div>

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.47",
+  "version": "0.2.48",
   "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.47",
+  "version": "0.2.48",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/schemas/features/typebot/theme/constants.ts

@@ -40,7 +40,7 @@ export const defaultTheme = {
       color: '#0042DA',
       backgroundColor: '#e0edff',
       thickness: 4,
-      position: 'fixed',
+      position: 'absolute',
       placement: 'Top',
     },
   },