From 527dc8a5b11b198a5cbc605a60487c6b5e469025 Mon Sep 17 00:00:00 2001 From: Baptiste Arnaud Date: Tue, 21 Feb 2023 14:29:53 +0100 Subject: [PATCH] :bug: Use position fixed for bubble --- packages/js/package.json | 12 +- .../ConversationContainer.tsx | 18 +-- .../inputs/buttons/components/ChoiceForm.tsx | 1 - .../inputs/payment/components/PaymentForm.tsx | 1 - .../src/features/bubble/components/Bubble.tsx | 3 +- .../bubble/components/BubbleButton.tsx | 3 +- .../bubble/components/PreviewMessage.tsx | 6 +- packages/react/package.json | 4 +- pnpm-lock.yaml | 148 +++++++++++------- 9 files changed, 115 insertions(+), 81 deletions(-) diff --git a/packages/js/package.json b/packages/js/package.json index b322352f4..703c1d8ac 100644 --- a/packages/js/package.json +++ b/packages/js/package.json @@ -1,6 +1,6 @@ { "name": "@typebot.io/js", - "version": "0.0.8", + "version": "0.0.9", "description": "Javascript library to display typebots on your website", "type": "module", "main": "dist/index.js", @@ -14,7 +14,7 @@ "dependencies": { "@stripe/stripe-js": "1.46.0", "solid-element": "1.6.3", - "solid-js": "1.6.9" + "solid-js": "1.6.11" }, "devDependencies": { "@rollup/plugin-babel": "6.0.3", @@ -22,18 +22,18 @@ "@rollup/plugin-terser": "^0.4.0", "@rollup/plugin-typescript": "11.0.0", "autoprefixer": "10.4.13", - "babel-preset-solid": "1.6.9", + "babel-preset-solid": "1.6.10", "eslint": "8.32.0", "eslint-config-custom": "workspace:*", "models": "workspace:*", "utils": "workspace:*", - "eslint-plugin-solid": "0.9.3", + "eslint-plugin-solid": "0.10.0", "postcss": "8.4.21", "react": "18.2.0", - "rollup": "3.12.0", + "rollup": "3.17.2", "rollup-plugin-postcss": "4.0.2", "rollup-plugin-typescript-paths": "^1.4.0", - "tailwindcss": "3.2.4", + "tailwindcss": "3.2.7", "tsconfig": "workspace:*", "typescript": "4.9.4" } diff --git a/packages/js/src/components/ConversationContainer/ConversationContainer.tsx b/packages/js/src/components/ConversationContainer/ConversationContainer.tsx index 15b166c8b..2d9344ae0 100644 --- a/packages/js/src/components/ConversationContainer/ConversationContainer.tsx +++ b/packages/js/src/components/ConversationContainer/ConversationContainer.tsx @@ -89,6 +89,15 @@ export const ConversationContainer = (props: Props) => { groupId: data.input.groupId, }) } + if (data.clientSideActions) { + const actionsToExecute = data.clientSideActions.filter((action) => + isNotDefined(action.lastBubbleBlockId) + ) + for (const action of actionsToExecute) { + const response = await executeClientSideAction(action) + if (response) setBlockedPopupUrl(response.blockedPopupUrl) + } + } setChatChunks((displayedChunks) => [ ...displayedChunks, { @@ -109,15 +118,6 @@ export const ConversationContainer = (props: Props) => { const handleAllBubblesDisplayed = async () => { const lastChunk = chatChunks().at(-1) if (!lastChunk) return - if (lastChunk.clientSideActions) { - const actionsToExecute = lastChunk.clientSideActions.filter((action) => - isNotDefined(action.lastBubbleBlockId) - ) - for (const action of actionsToExecute) { - const response = await executeClientSideAction(action) - if (response) setBlockedPopupUrl(response.blockedPopupUrl) - } - } if (isNotDefined(lastChunk.input)) { props.onEnd?.() } diff --git a/packages/js/src/features/blocks/inputs/buttons/components/ChoiceForm.tsx b/packages/js/src/features/blocks/inputs/buttons/components/ChoiceForm.tsx index ef9396923..e75ff94e6 100644 --- a/packages/js/src/features/blocks/inputs/buttons/components/ChoiceForm.tsx +++ b/packages/js/src/features/blocks/inputs/buttons/components/ChoiceForm.tsx @@ -56,7 +56,6 @@ export const ChoiceForm = (props: Props) => { ? '' : 'selectable') } - data-testid="button" data-itemid={item.id} > {item.content} diff --git a/packages/js/src/features/blocks/inputs/payment/components/PaymentForm.tsx b/packages/js/src/features/blocks/inputs/payment/components/PaymentForm.tsx index 2710836e8..8519068c2 100644 --- a/packages/js/src/features/blocks/inputs/payment/components/PaymentForm.tsx +++ b/packages/js/src/features/blocks/inputs/payment/components/PaymentForm.tsx @@ -14,7 +14,6 @@ export const PaymentForm = (props: Props) => ( { transform: isBotOpened() ? 'scale3d(1, 1, 1)' : 'scale3d(0, 0, 1)', 'box-shadow': 'rgb(0 0 0 / 16%) 0px 5px 40px', 'background-color': bubbleProps.theme?.chatWindow?.backgroundColor, + 'z-index': 42424242, }} class={ - 'absolute bottom-20 sm:right-4 rounded-lg w-full sm:w-[400px] max-h-[704px] ' + + 'fixed bottom-20 sm:right-4 rounded-lg w-full sm:w-[400px] max-h-[704px] ' + (isBotOpened() ? 'opacity-1' : 'opacity-0 pointer-events-none') } > diff --git a/packages/js/src/features/bubble/components/BubbleButton.tsx b/packages/js/src/features/bubble/components/BubbleButton.tsx index e3a22f535..bbb817f08 100644 --- a/packages/js/src/features/bubble/components/BubbleButton.tsx +++ b/packages/js/src/features/bubble/components/BubbleButton.tsx @@ -15,10 +15,11 @@ export const BubbleButton = (props: Props) => {