🚸 (calCom) Fix embed responsivity

Closes #1210
baptisteArno · Mar 15, 2024 · 968abf5 · 968abf5
1 parent f6d2b15
commit 968abf5
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 2 deletions.
diff --git a/apps/docs/openapi/viewer.json b/apps/docs/openapi/viewer.json
@@ -9986,6 +9986,9 @@
           "content": {
             "type": "object",
             "properties": {
+              "maxBubbleWidth": {
+                "type": "number"
+              },
               "waitForEventFunction": {
                 "type": "object",
                 "properties": {

diff --git a/packages/bot-engine/forge/executeForgedBlock.ts b/packages/bot-engine/forge/executeForgedBlock.ts
@@ -150,6 +150,7 @@ export const executeForgedBlock = async (
       ? {
           type: 'custom-embed',
           content: {
+            maxBubbleWidth: action.run.web.displayEmbedBubble.maxBubbleWidth,
             initFunction: action.run.web.displayEmbedBubble.parseInitFunction({
               options: parsedOptions,
             }),

diff --git a/packages/embeds/js/src/components/Bot.tsx b/packages/embeds/js/src/components/Bot.tsx
@@ -25,6 +25,7 @@ import { ProgressBar } from './ProgressBar'
 import { Portal } from 'solid-js/web'
 import { defaultSettings } from '@typebot.io/schemas/features/typebot/settings/constants'
 import { persist } from '@/utils/persist'
+import { setBotContainerHeight } from '@/utils/botContainerHeightSignal'
 
 export type BotProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -257,6 +258,7 @@ const BotContent = (props: BotContentProps) => {
   onMount(() => {
     if (!botContainer) return
     resizeObserver.observe(botContainer)
+    setBotContainerHeight(`${botContainer.clientHeight}px`)
   })
 
   createEffect(() => {

diff --git a/packages/embeds/js/src/features/blocks/bubbles/embed/components/CustomEmbedBubble.tsx b/packages/embeds/js/src/features/blocks/bubbles/embed/components/CustomEmbedBubble.tsx
@@ -4,6 +4,7 @@ import { createSignal, onCleanup, onMount } from 'solid-js'
 import { clsx } from 'clsx'
 import { CustomEmbedBubble as CustomEmbedBubbleProps } from '@typebot.io/schemas'
 import { executeCode } from '@/features/blocks/logic/script/executeScript'
+import { botContainerHeight } from '@/utils/botContainerHeightSignal'
 
 type Props = {
   content: CustomEmbedBubbleProps['content']
@@ -62,7 +63,14 @@ export const CustomEmbedBubble = (props: Props) => {
       ref={ref}
     >
       <div class="flex w-full items-center">
-        <div class="flex relative z-10 items-start typebot-host-bubble w-full max-w-full">
+        <div
+          class="flex relative z-10 items-start typebot-host-bubble w-full"
+          style={{
+            'max-width': props.content.maxBubbleWidth
+              ? `${props.content.maxBubbleWidth}px`
+              : '100%',
+          }}
+        >
           <div
             class="flex items-center absolute px-4 py-2 bubble-typing z-10 "
             style={{
@@ -81,7 +89,11 @@ export const CustomEmbedBubble = (props: Props) => {
               height: isTyping() ? (isMobile() ? '32px' : '36px') : undefined,
             }}
           >
-            <div class="w-full h-full overflow-scroll" ref={containerRef} />
+            <div
+              class="w-full overflow-y-auto"
+              style={{ 'max-height': `calc(${botContainerHeight()} - 100px)` }}
+              ref={containerRef}
+            />
           </div>
         </div>
       </div>

diff --git a/packages/embeds/js/src/utils/botContainerHeightSignal.ts b/packages/embeds/js/src/utils/botContainerHeightSignal.ts
@@ -0,0 +1,4 @@
+import { createSignal } from 'solid-js'
+
+export const [botContainerHeight, setBotContainerHeight] =
+  createSignal<string>('100%')
diff --git a/packages/forge/blocks/calCom/actions/bookEvent.ts b/packages/forge/blocks/calCom/actions/bookEvent.ts
@@ -42,6 +42,7 @@ export const bookEvent = createAction({
   run: {
     web: {
       displayEmbedBubble: {
+        maxBubbleWidth: 780,
         waitForEvent: {
           getSaveVariableId: ({ saveBookedDateInVariableId }) =>
             saveBookedDateInVariableId,

diff --git a/packages/forge/core/types.ts b/packages/forge/core/types.ts
@@ -82,6 +82,7 @@ export type ActionDefinition<
         parseInitFunction: (params: {
           options: z.infer<BaseOptions> & z.infer<Options>
         }) => FunctionToExecute
+        maxBubbleWidth?: number
       }
       parseFunction?: (params: {
         options: z.infer<BaseOptions> & z.infer<Options>

diff --git a/packages/schemas/features/chat/schema.ts b/packages/schemas/features/chat/schema.ts
@@ -92,6 +92,7 @@ const embedMessageSchema = z
   })
 
 const displayEmbedBubbleSchema = z.object({
+  maxBubbleWidth: z.number().optional(),
   waitForEventFunction: z
     .object({
       args: z.record(z.string(), z.unknown()),