From 968abf52430d467e853f059bb49d4b21814af906 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
Date: Fri, 15 Mar 2024 11:38:40 +0100
Subject: [PATCH] :children_crossing: (calCom) Fix embed responsivity

Closes #1210
---
 apps/docs/openapi/viewer.json                    |  3 +++
 packages/bot-engine/forge/executeForgedBlock.ts  |  1 +
 packages/embeds/js/src/components/Bot.tsx        |  2 ++
 .../embed/components/CustomEmbedBubble.tsx       | 16 ++++++++++++++--
 .../js/src/utils/botContainerHeightSignal.ts     |  4 ++++
 .../forge/blocks/calCom/actions/bookEvent.ts     |  1 +
 packages/forge/core/types.ts                     |  1 +
 packages/schemas/features/chat/schema.ts         |  1 +
 8 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 packages/embeds/js/src/utils/botContainerHeightSignal.ts

diff --git a/apps/docs/openapi/viewer.json b/apps/docs/openapi/viewer.json
index e95bdae8e..f7867b46a 100644
--- 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
index 3fdcbdf27..0d9122912 100644
--- 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
index 8ba4ca878..901cfacb5 100644
--- 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
index b7f839fb9..ecd845474 100644
--- 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
new file mode 100644
index 000000000..133a72cd5
--- /dev/null
+++ 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
index 8378312cd..badd7cb8d 100644
--- 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
index 138d6d1db..9b30997e2 100644
--- 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
index 1794727de..60faacd45 100644
--- 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()),