🚸 Make sure bubble is closing when other chat widget opens up

Closes #1829

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.3.20",
+  "version": "0.3.21",
   "description": "Javascript library to display typebots on your website",
   "license": "FSL-1.1-ALv2",
   "type": "module",
@@ -34,6 +34,7 @@
     "@typebot.io/rich-text": "workspace:*",
     "@typebot.io/settings": "workspace:*",
     "@typebot.io/theme": "workspace:*",
+    "@typebot.io/zendesk-block": "workspace:*",
     "clsx": "2.0.0",
     "dompurify": "3.0.6",
     "ky": "1.2.4",

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

@@ -41,7 +41,6 @@ import { ProgressBar } from "./ProgressBar";
 import { CloseIcon } from "./icons/CloseIcon";
 
 export type BotProps = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   typebot: string | any;
   isPreview?: boolean;
   resultId?: string;
@@ -57,6 +56,7 @@ export type BotProps = {
   onEnd?: () => void;
   onNewLogs?: (logs: OutgoingLog[]) => void;
   onChatStatePersisted?: (isEnabled: boolean) => void;
+  onScriptExecutionSuccess?: (message: string) => void;
 };
 
 export const Bot = (props: BotProps & { class?: string }) => {
@@ -262,6 +262,7 @@ export const Bot = (props: BotProps & { class?: string }) => {
             onNewLogs={props.onNewLogs}
             onAnswer={props.onAnswer}
             onEnd={props.onEnd}
+            onScriptExecutionSuccess={props.onScriptExecutionSuccess}
           />
         )}
       </Show>
@@ -278,6 +279,7 @@ type BotContentProps = {
   onAnswer?: (answer: { message: string; blockId: string }) => void;
   onEnd?: () => void;
   onNewLogs?: (logs: OutgoingLog[]) => void;
+  onScriptExecutionSuccess?: (message: string) => void;
 };
 
 const BotContent = (props: BotContentProps) => {
@@ -356,6 +358,7 @@ const BotContent = (props: BotContentProps) => {
         onEnd={props.onEnd}
         onNewLogs={props.onNewLogs}
         onProgressUpdate={setProgressValue}
+        onScriptExecutionSuccess={props.onScriptExecutionSuccess}
       />
       <Show
         when={

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

@@ -71,6 +71,7 @@ type Props = {
   onEnd?: () => void;
   onNewLogs?: (logs: OutgoingLog[]) => void;
   onProgressUpdate?: (progress: number) => void;
+  onScriptExecutionSuccess?: (message: string) => void;
 };
 
 export const ConversationContainer = (props: Props) => {
@@ -300,6 +301,8 @@ export const ConversationContainer = (props: Props) => {
       }
       if (response && "blockedPopupUrl" in response)
         setBlockedPopupUrl(response.blockedPopupUrl);
+      if (response && "scriptCallbackMessage" in response)
+        props.onScriptExecutionSuccess?.(response.scriptCallbackMessage);
     }
   };
 

packages/embeds/js/src/constants.ts

@@ -9,6 +9,10 @@ export const defaultBotProps: BotProps = {
   onEnd: undefined,
   onInit: undefined,
   onNewLogs: undefined,
+  onChatStatePersisted: undefined,
+  onScriptExecutionSuccess: undefined,
+  font: undefined,
+  progressBarRef: undefined,
   isPreview: undefined,
   startFrom: undefined,
   prefilledVariables: undefined,

packages/embeds/js/src/features/blocks/integrations/chatwoot/constants.ts

@@ -0,0 +1 @@
+export const chatwootWebWidgetOpenedMessage = "Chatwoot Web Widget Opened";

packages/embeds/js/src/features/blocks/integrations/chatwoot/utils/executeChatwoot.ts

@@ -1,8 +1,12 @@
 import { executeScript } from "@/features/blocks/logic/script/executeScript";
 import type { ScriptToExecute } from "@typebot.io/bot-engine/schemas/clientSideAction";
+import { chatwootWebWidgetOpenedMessage } from "../constants";
 
 export const executeChatwoot = (chatwoot: {
   scriptToExecute: ScriptToExecute;
 }) => {
   executeScript(chatwoot.scriptToExecute);
+  return {
+    scriptCallbackMessage: chatwootWebWidgetOpenedMessage,
+  };
 };

packages/embeds/js/src/features/blocks/logic/script/executeScript.ts

@@ -45,7 +45,11 @@ export const executeCode = async ({
 }) => {
   try {
     const func = AsyncFunction(...Object.keys(args), content);
-    await func(...Object.keys(args).map((key) => args[key]));
+    const result = await func(...Object.keys(args).map((key) => args[key]));
+    if (result && typeof result === "string")
+      return {
+        scriptCallbackMessage: result,
+      };
   } catch (err) {
     console.warn("Script threw an error:", err);
   }

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

@@ -1,5 +1,6 @@
 import { Bot, type BotProps } from "@/components/Bot";
 import { getPaymentInProgressInStorage } from "@/features/blocks/inputs/payment/helpers/paymentInProgressStorage";
+import { chatwootWebWidgetOpenedMessage } from "@/features/blocks/integrations/chatwoot/constants";
 import type { CommandData } from "@/features/commands/types";
 import {
   getBotOpenedStateFromStorage,
@@ -8,6 +9,7 @@ import {
 } from "@/utils/storage";
 import { EnvironmentProvider } from "@ark-ui/solid";
 import { isDefined } from "@typebot.io/lib/utils";
+import { zendeskWebWidgetOpenedMessage } from "@typebot.io/zendesk-block/constants";
 import {
   Show,
   createEffect,
@@ -156,6 +158,15 @@ export const Bubble = (props: BubbleProps) => {
     if (isPersisted) setBotOpenedStateInStorage();
   };
 
+  const handleScriptExecutionSuccessMessage = (message: string) => {
+    if (
+      message === zendeskWebWidgetOpenedMessage ||
+      message === chatwootWebWidgetOpenedMessage
+    )
+      unmount();
+    props.onScriptExecutionSuccess?.(message);
+  };
+
   return (
     <Show when={isMounted()}>
       <EnvironmentProvider
@@ -209,6 +220,7 @@ export const Bubble = (props: BubbleProps) => {
           <Show when={isBotStarted()}>
             <Bot
               {...botProps}
+              onScriptExecutionSuccess={handleScriptExecutionSuccessMessage}
               onChatStatePersisted={handleOnChatStatePersisted}
               prefilledVariables={prefilledVariables()}
               class="rounded-lg"

packages/embeds/js/src/features/popup/components/Popup.tsx

@@ -1,5 +1,6 @@
 import { Bot, type BotProps } from "@/components/Bot";
 import { getPaymentInProgressInStorage } from "@/features/blocks/inputs/payment/helpers/paymentInProgressStorage";
+import { chatwootWebWidgetOpenedMessage } from "@/features/blocks/integrations/chatwoot/constants";
 import {
   getBotOpenedStateFromStorage,
   removeBotOpenedStateInStorage,
@@ -7,6 +8,7 @@ import {
 } from "@/utils/storage";
 import { EnvironmentProvider } from "@ark-ui/solid";
 import { isDefined, isNotDefined } from "@typebot.io/lib/utils";
+import { zendeskWebWidgetOpenedMessage } from "@typebot.io/zendesk-block/constants";
 import {
   Show,
   createEffect,
@@ -119,6 +121,15 @@ export const Popup = (props: PopupProps) => {
     if (isPersisted) setBotOpenedStateInStorage();
   };
 
+  const handleScriptExecutionSuccessMessage = (message: string) => {
+    if (
+      message === zendeskWebWidgetOpenedMessage ||
+      message === chatwootWebWidgetOpenedMessage
+    )
+      closeBot();
+    props.onScriptExecutionSuccess?.(message);
+  };
+
   return (
     <Show when={isBotOpened()}>
       <EnvironmentProvider
@@ -155,6 +166,7 @@ export const Popup = (props: PopupProps) => {
               >
                 <Bot
                   {...botProps}
+                  onScriptExecutionSuccess={handleScriptExecutionSuccessMessage}
                   prefilledVariables={prefilledVariables()}
                   onChatStatePersisted={handleOnChatStatePersisted}
                 />

packages/embeds/js/src/utils/executeClientSideActions.ts

@@ -32,6 +32,7 @@ export const executeClientSideAction = async ({
   | { blockedPopupUrl: string }
   | { replyToSend: string | undefined; logs?: ChatLog[] }
   | { logs: ChatLog[] }
+  | { scriptCallbackMessage: string }
   | void
 > => {
   if ("chatwoot" in clientSideAction) {

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.3.20",
+  "version": "0.3.21",
   "license": "FSL-1.1-ALv2",
   "description": "Convenient library to display typebots on your Next.js website",
   "type": "module",

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.3.20",
+  "version": "0.3.21",
   "description": "Convenient library to display typebots on your React app",
   "license": "FSL-1.1-ALv2",
   "type": "module",

packages/embeds/stories/package.json

@@ -5,11 +5,8 @@
     "dev": "ladle serve -p 3006",
     "build": "ladle build"
   },
-  "exports": {
-    "./*": "./src/*.ts"
-  },
   "dependencies": {
-    "@ladle/react": "2.5.1",
+    "@ladle/react": "4.1.2",
     "@typebot.io/bot-engine": "workspace:*",
     "@typebot.io/conditions": "workspace:*",
     "@typebot.io/react": "workspace:*",

packages/embeds/stories/src/bubble.stories.tsx

@@ -1,5 +1,4 @@
 import {
-  Bubble,
   close,
   hidePreviewMessage,
   open,
@@ -7,7 +6,8 @@ import {
   setPrefilledVariables,
   showPreviewMessage,
   toggle,
-} from "@typebot.io/react";
+} from "@typebot.io/js";
+import { Bubble } from "@typebot.io/react";
 import { useState } from "react";
 import { leadGenerationTypebot } from "./assets/leadGenerationTypebot";
 
@@ -35,7 +35,7 @@ export const Default = () => {
       </div>
 
       <Bubble
-        typebot={leadGenerationTypebot}
+        typebot={"my-typebot-2b532x1"}
         apiHost="http://localhost:3001"
         prefilledVariables={{
           Name: ["John"],
@@ -51,7 +51,7 @@ export const Default = () => {
             iconColor: "white",
           },
         }}
-        isPreview
+        // isPreview
       />
     </div>
   );

packages/forge/blocks/zendesk/package.json

@@ -5,7 +5,8 @@
   "type": "module",
   "exports": {
     ".": "./src/index.ts",
-    "./schemas": "./src/schemas.ts"
+    "./schemas": "./src/schemas.ts",
+    "./constants": "./src/constants.ts"
   },
   "dependencies": {
     "@typebot.io/forge": "workspace:*",

packages/forge/blocks/zendesk/src/actions/openWebWidget.ts

@@ -1,6 +1,7 @@
 import { createAction, option } from "@typebot.io/forge";
 import { sign } from "jsonwebtoken";
 import { auth } from "../auth";
+import { zendeskWebWidgetOpenedMessage } from "../constants";
 
 export const openWebWidget = createAction({
   auth,
@@ -88,5 +89,7 @@ const parseOpenMessenger = () => {
       }
     };
   })(document, "script");
+
+  return "${zendeskWebWidgetOpenedMessage}"
   `;
 };

packages/forge/blocks/zendesk/src/constants.ts

@@ -0,0 +1 @@
+export const zendeskWebWidgetOpenedMessage = "Zendesk Web Widget Opened";