🚸 Added host image bubble expansion on click (#2035)

Closes: #2018 --------- Co-authored-by: Baptiste Arnaud <[email protected]>
baptisteArno · Feb 26, 2025 · de6ae74 · de6ae74
1 parent 0c3ce76
commit de6ae74
Show file tree

Hide file tree

Showing 8 changed files with 1,606 additions and 690 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.3.57",
+  "version": "0.3.58",
   "description": "Javascript library to display typebots on your website",
   "license": "FSL-1.1-ALv2",
   "type": "module",
@@ -16,16 +16,16 @@
   },
   "devDependencies": {
     "@ai-sdk/ui-utils": "1.1.16",
-    "@ark-ui/solid": "4.2.1",
+    "@ark-ui/solid": "4.10.2",
     "@fix-webm-duration/fix": "1.0.1",
     "@stripe/stripe-js": "1.54.1",
     "clsx": "2.1.1",
     "dompurify": "3.0.6",
     "ky": "1.2.4",
     "marked": "9.0.3",
     "partysocket": "1.0.2",
-    "solid-element": "1.9.0",
-    "solid-js": "1.9.2",
+    "solid-element": "1.9.1",
+    "solid-js": "1.9.5",
     "@typebot.io/blocks-bubbles": "workspace:*",
     "@typebot.io/blocks-inputs": "workspace:*",
     "@typebot.io/blocks-logic": "workspace:*",

diff --git a/packages/embeds/js/src/components/Modal.tsx b/packages/embeds/js/src/components/Modal.tsx
@@ -1,5 +1,7 @@
-import { Dialog } from "@ark-ui/solid";
+import { botContainer } from "@/utils/botContainerSignal";
+import { Dialog } from "@ark-ui/solid/dialog";
 import type { JSX } from "solid-js";
+import { Portal } from "solid-js/web";
 import { CloseIcon } from "./icons/CloseIcon";
 
 type Props = {
@@ -13,15 +15,20 @@ export const Modal = (props: Props) => {
       open={props.isOpen}
       lazyMount
       unmountOnExit
-      onOpenChange={(e) => (!e.open ? props.onClose?.() : undefined)}
+      onOpenChange={props.onClose}
     >
-      <Dialog.Backdrop class="fixed inset-0 bg-[rgba(0,0,0,0.5)] h-screen z-50" />
-      <Dialog.Positioner class="fixed inset-0 z-50 flex items-center justify-center px-2">
-        <Dialog.Content>{props.children}</Dialog.Content>
-        <Dialog.CloseTrigger class="fixed top-2 right-2 z-50 rounded-md bg-white p-2 text-black">
-          <CloseIcon class="w-6 h-6" />
-        </Dialog.CloseTrigger>
-      </Dialog.Positioner>
+      {/* Ideally we would want to mount it on the parent's body but Tailwind classes are (potentially) not defined there. */}
+      <Portal mount={botContainer()}>
+        <Dialog.Backdrop class="fixed inset-0 bg-[rgba(0,0,0,0.8)] h-screen z-50" />
+        <Dialog.Positioner class="fixed inset-0 z-50 flex items-center justify-center px-2">
+          <Dialog.Content class="focus:outline-none">
+            {props.children}
+          </Dialog.Content>
+          <Dialog.CloseTrigger class="fixed top-4 right-4 z-50 rounded-md bg-[#202020] p-2 text-white">
+            <CloseIcon class="w-6 h-6" />
+          </Dialog.CloseTrigger>
+        </Dialog.Positioner>
+      </Portal>
     </Dialog.Root>
   );
 };
diff --git a/packages/embeds/js/src/components/bubbles/GuestBubble.tsx b/packages/embeds/js/src/components/bubbles/GuestBubble.tsx
@@ -138,7 +138,7 @@ const TextGuestBubble = (props: { answer: TextInputSubmitContent }) => {
         <img
           src={clickedImageSrc()}
           alt="Attachment"
-          style={{ "border-radius": "6px" }}
+          class="max-h-[90vh] max-w-[90vw] rounded-[6px]"
         />
       </Modal>
     </div>

diff --git a/packages/embeds/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx b/packages/embeds/js/src/features/blocks/bubbles/image/components/ImageBubble.tsx
@@ -1,3 +1,4 @@
+import { Modal } from "@/components/Modal";
 import { TypingBubble } from "@/components/TypingBubble";
 import { isMobile } from "@/utils/isMobileSignal";
 import { defaultImageBubbleContent } from "@typebot.io/blocks-bubbles/image/constants";
@@ -19,6 +20,7 @@ let typingTimeout: NodeJS.Timeout;
 export const ImageBubble = (props: Props) => {
   let ref: HTMLDivElement | undefined;
   let image: HTMLImageElement | undefined;
+  const [isExpanded, setIsExpanded] = createSignal(false);
   const [isTyping, setIsTyping] = createSignal(
     props.onTransitionEnd ? true : false,
   );
@@ -44,6 +46,14 @@ export const ImageBubble = (props: Props) => {
     if (typingTimeout) clearTimeout(typingTimeout);
   });
 
+  const openModal = () => {
+    setIsExpanded(true);
+  };
+
+  const closeModal = () => {
+    setIsExpanded(false);
+  };
+
   const Image = (
     <img
       ref={image}
@@ -101,16 +111,31 @@ export const ImageBubble = (props: Props) => {
           ) : (
             <figure
               class={clsx(
-                "z-10",
+                "z-10 cursor-pointer",
                 !isTyping() && "p-4",
                 isTyping() ? (isMobile() ? "h-8" : "h-9") : "",
               )}
+              on:click={
+                props.content?.url?.startsWith("data:image/svg")
+                  ? undefined
+                  : openModal
+              }
             >
               {Image}
             </figure>
           )}
         </div>
       </div>
+      <Modal isOpen={isExpanded()} onClose={closeModal}>
+        <img
+          src={props.content?.url}
+          alt={
+            props.content?.clickLink?.alt ??
+            defaultImageBubbleContent.clickLink.alt
+          }
+          class="max-h-[90vh] max-w-[90vw] rounded-[6px]"
+        />
+      </Modal>
     </div>
   );
 };
diff --git a/packages/embeds/nextjs/package.json b/packages/embeds/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.3.57",
+  "version": "0.3.58",
   "license": "FSL-1.1-ALv2",
   "description": "Convenient library to display typebots on your Next.js website",
   "type": "module",

diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.3.57",
+  "version": "0.3.58",
   "description": "Convenient library to display typebots on your React app",
   "license": "FSL-1.1-ALv2",
   "type": "module",