blsmedia/bot
2
0
Fork 0
Code Activity

🐛 Use position fixed for bubble

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-02-21 14:29:53 +01:00
parent ab43d809c3
commit 527dc8a5b1
9 changed files with 115 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/js/package.json
View File

@ -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"
}

18
packages/js/src/components/ConversationContainer/ConversationContainer.tsx
View File

@ -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?.()
}

1
packages/js/src/features/blocks/inputs/buttons/components/ChoiceForm.tsx
View File

@ -56,7 +56,6 @@ export const ChoiceForm = (props: Props) => {
? ''
: 'selectable')
}
data-testid="button"
data-itemid={item.id}
>
{item.content}

1
packages/js/src/features/blocks/inputs/payment/components/PaymentForm.tsx
View File

@ -14,7 +14,6 @@ export const PaymentForm = (props: Props) => (
<Switch>
<Match when={props.options.provider === PaymentProvider.STRIPE}>
<StripePaymentForm
// eslint-disable-next-line solid/reactivity
onSuccess={props.onSuccess}
options={props.options}
context={props.context}

3
packages/js/src/features/bubble/components/Bubble.tsx
View File

@ -125,9 +125,10 @@ export const Bubble = (props: BubbleProps) => {
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')
}
>

3
packages/js/src/features/bubble/components/BubbleButton.tsx
View File

@ -15,10 +15,11 @@ export const BubbleButton = (props: Props) => {
<button
onClick={() => props.toggleBot()}
class={
'absolute bottom-4 right-4 shadow-md w-12 h-12 rounded-full hover:scale-110 active:scale-95 transition-transform duration-200 flex justify-center items-center animate-fade-in'
'fixed bottom-4 right-4 shadow-md w-12 h-12 rounded-full hover:scale-110 active:scale-95 transition-transform duration-200 flex justify-center items-center animate-fade-in'
}
style={{
'background-color': props.backgroundColor ?? defaultButtonColor,
'z-index': 42424242,
}}
>
<Show when={isNotDefined(props.customIconSrc)} keyed>

6
packages/js/src/features/bubble/components/PreviewMessage.tsx
View File

@ -19,13 +19,13 @@ export const PreviewMessage = (props: PreviewMessageProps) => {
return (
<div
// eslint-disable-next-line solid/reactivity
onClick={props.onClick}
class="absolute bottom-20 right-4 w-64 rounded-md duration-200 flex items-center gap-4 shadow-md animate-fade-in cursor-pointer hover:shadow-lg p-4"
onClick={() => props.onClick()}
class="fixed bottom-20 right-4 w-64 rounded-md duration-200 flex items-center gap-4 shadow-md animate-fade-in cursor-pointer hover:shadow-lg p-4"
style={{
'background-color':
props.previewMessageTheme?.backgroundColor ?? defaultBackgroundColor,
color: props.previewMessageTheme?.textColor ?? defaultTextColor,
'z-index': 42424242,
}}
onMouseEnter={() => setIsPreviewMessageHovered(true)}
onMouseLeave={() => setIsPreviewMessageHovered(false)}

4
packages/react/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@typebot.io/react",
"version": "0.0.8",
"version": "0.0.9",
"description": "React library to display typebots on your website",
"main": "dist/index.js",
"types": "dist/index.d.ts",
@ -32,7 +32,7 @@
"eslint-config-custom": "workspace:*",
"models": "workspace:*",
"react": "18.2.0",
"rollup": "3.12.0",
"rollup": "3.17.2",
"rollup-plugin-typescript-paths": "^1.4.0",
"tsconfig": "workspace:*",
"tslib": "^2.5.0",

148
pnpm-lock.yaml generated
View File

@ -585,43 +585,43 @@ importers:
'@rollup/plugin-typescript': 11.0.0
'@stripe/stripe-js': 1.46.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:*
eslint-plugin-solid: 0.9.3
eslint-plugin-solid: 0.10.0
models: workspace:*
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
solid-element: 1.6.3
solid-js: 1.6.9
tailwindcss: 3.2.4
solid-js: 1.6.11
tailwindcss: 3.2.7
tsconfig: workspace:*
typescript: 4.9.4
utils: workspace:*
dependencies:
'@stripe/stripe-js': 1.46.0
solid-element: 1.6.3_solid-js@1.6.9
solid-js: 1.6.9
solid-element: 1.6.3_solid-js@1.6.11
solid-js: 1.6.11
devDependencies:
'@rollup/plugin-babel': 6.0.3_47rlmjyel4xatve6tpwvwuyiju
'@rollup/plugin-node-resolve': 15.0.1_rollup@3.12.0
'@rollup/plugin-terser': 0.4.0_rollup@3.12.0
'@rollup/plugin-typescript': 11.0.0_tkwgik6422u3whqaozmypsnvni
'@rollup/plugin-babel': 6.0.3_z62ir75jo4vtjd3xuow3aofoei
'@rollup/plugin-node-resolve': 15.0.1_rollup@3.17.2
'@rollup/plugin-terser': 0.4.0_rollup@3.17.2
'@rollup/plugin-typescript': 11.0.0_wpdpur4kpujfydhh5gfebievia
autoprefixer: 10.4.13_postcss@8.4.21
babel-preset-solid: 1.6.9_@babel+core@7.20.12
babel-preset-solid: 1.6.10_@babel+core@7.20.12
eslint: 8.32.0
eslint-config-custom: link:../eslint-config-custom
eslint-plugin-solid: 0.9.3_7uibuqfxkfaozanbtbziikiqje
eslint-plugin-solid: 0.10.0_7uibuqfxkfaozanbtbziikiqje
models: link:../models
postcss: 8.4.21
react: 18.2.0
rollup: 3.12.0
rollup: 3.17.2
rollup-plugin-postcss: 4.0.2_postcss@8.4.21
rollup-plugin-typescript-paths: 1.4.0_typescript@4.9.4
tailwindcss: 3.2.4_postcss@8.4.21
tailwindcss: 3.2.7_postcss@8.4.21
tsconfig: link:../tsconfig
typescript: 4.9.4
utils: link:../utils
@ -659,7 +659,7 @@ importers:
eslint-config-custom: workspace:*
models: workspace:*
react: 18.2.0
rollup: 3.12.0
rollup: 3.17.2
rollup-plugin-typescript-paths: ^1.4.0
tsconfig: workspace:*
tslib: ^2.5.0
@ -670,10 +670,10 @@ importers:
'@ladle/react': 2.5.2_gkjzc5kkpbuaafw6p6qyth4wbi
devDependencies:
'@babel/preset-react': 7.18.6_@babel+core@7.20.12
'@rollup/plugin-babel': 6.0.3_47rlmjyel4xatve6tpwvwuyiju
'@rollup/plugin-node-resolve': 15.0.1_rollup@3.12.0
'@rollup/plugin-terser': 0.4.0_rollup@3.12.0
'@rollup/plugin-typescript': 11.0.0_rhlcksimi4ycfgwevqw3afkobq
'@rollup/plugin-babel': 6.0.3_z62ir75jo4vtjd3xuow3aofoei
'@rollup/plugin-node-resolve': 15.0.1_rollup@3.17.2
'@rollup/plugin-terser': 0.4.0_rollup@3.17.2
'@rollup/plugin-typescript': 11.0.0_xfpw33j3x77vb3zt44uxqu5fey
'@typebot.io/js': link:../js
'@types/node': 18.11.18
'@types/react': 18.0.27
@ -682,7 +682,7 @@ importers:
eslint-config-custom: link:../eslint-config-custom
models: link:../models
react: 18.2.0
rollup: 3.12.0
rollup: 3.17.2
rollup-plugin-typescript-paths: 1.4.0_typescript@4.9.5
tsconfig: link:../tsconfig
tslib: 2.5.0
@ -6015,7 +6015,7 @@ packages:
reselect: 4.1.7
dev: false
/@rollup/plugin-babel/6.0.3_47rlmjyel4xatve6tpwvwuyiju:
/@rollup/plugin-babel/6.0.3_z62ir75jo4vtjd3xuow3aofoei:
resolution: {integrity: sha512-fKImZKppa1A/gX73eg4JGo+8kQr/q1HBQaCGKECZ0v4YBBv3lFqi14+7xyApECzvkLTHCifx+7ntcrvtBIRcpg==}
engines: {node: '>=14.0.0'}
peerDependencies:
@ -6030,8 +6030,8 @@ packages:
dependencies:
'@babel/core': 7.20.12
'@babel/helper-module-imports': 7.18.6
'@rollup/pluginutils': 5.0.2_rollup@3.12.0
rollup: 3.12.0
'@rollup/pluginutils': 5.0.2_rollup@3.17.2
rollup: 3.17.2
dev: true
/@rollup/plugin-commonjs/24.0.0_rollup@2.78.0:
@ -6052,7 +6052,7 @@ packages:
rollup: 2.78.0
dev: false
/@rollup/plugin-node-resolve/15.0.1_rollup@3.12.0:
/@rollup/plugin-node-resolve/15.0.1_rollup@3.17.2:
resolution: {integrity: sha512-ReY88T7JhJjeRVbfCyNj+NXAG3IIsVMsX9b5/9jC98dRP8/yxlZdz7mHZbHk5zHr24wZZICS5AcXsFZAXYUQEg==}
engines: {node: '>=14.0.0'}
peerDependencies:
@ -6061,16 +6061,16 @@ packages:
rollup:
optional: true
dependencies:
'@rollup/pluginutils': 5.0.2_rollup@3.12.0
'@rollup/pluginutils': 5.0.2_rollup@3.17.2
'@types/resolve': 1.20.2
deepmerge: 4.3.0
is-builtin-module: 3.2.1
is-module: 1.0.0
resolve: 1.22.1
rollup: 3.12.0
rollup: 3.17.2
dev: true
/@rollup/plugin-terser/0.4.0_rollup@3.12.0:
/@rollup/plugin-terser/0.4.0_rollup@3.17.2:
resolution: {integrity: sha512-Ipcf3LPNerey1q9ZMjiaWHlNPEHNU/B5/uh9zXLltfEQ1lVSLLeZSgAtTPWGyw8Ip1guOeq+mDtdOlEj/wNxQw==}
engines: {node: '>=14.0.0'}
peerDependencies:
@ -6079,13 +6079,13 @@ packages:
rollup:
optional: true
dependencies:
rollup: 3.12.0
rollup: 3.17.2
serialize-javascript: 6.0.1
smob: 0.0.6
terser: 5.16.3
dev: true
/@rollup/plugin-typescript/11.0.0_rhlcksimi4ycfgwevqw3afkobq:
/@rollup/plugin-typescript/11.0.0_wpdpur4kpujfydhh5gfebievia:
resolution: {integrity: sha512-goPyCWBiimk1iJgSTgsehFD5OOFHiAknrRJjqFCudcW8JtWiBlK284Xnn4flqMqg6YAjVG/EE+3aVzrL5qNSzQ==}
engines: {node: '>=14.0.0'}
peerDependencies:
@ -6098,14 +6098,13 @@ packages:
tslib:
optional: true
dependencies:
'@rollup/pluginutils': 5.0.2_rollup@3.12.0
'@rollup/pluginutils': 5.0.2_rollup@3.17.2
resolve: 1.22.1
rollup: 3.12.0
tslib: 2.5.0
typescript: 4.9.5
rollup: 3.17.2
typescript: 4.9.4
dev: true
/@rollup/plugin-typescript/11.0.0_tkwgik6422u3whqaozmypsnvni:
/@rollup/plugin-typescript/11.0.0_xfpw33j3x77vb3zt44uxqu5fey:
resolution: {integrity: sha512-goPyCWBiimk1iJgSTgsehFD5OOFHiAknrRJjqFCudcW8JtWiBlK284Xnn4flqMqg6YAjVG/EE+3aVzrL5qNSzQ==}
engines: {node: '>=14.0.0'}
peerDependencies:
@ -6118,10 +6117,11 @@ packages:
tslib:
optional: true
dependencies:
'@rollup/pluginutils': 5.0.2_rollup@3.12.0
'@rollup/pluginutils': 5.0.2_rollup@3.17.2
resolve: 1.22.1
rollup: 3.12.0
typescript: 4.9.4
rollup: 3.17.2
tslib: 2.5.0
typescript: 4.9.5
dev: true
/@rollup/pluginutils/5.0.2_rollup@2.78.0:
@ -6139,7 +6139,7 @@ packages:
rollup: 2.78.0
dev: false
/@rollup/pluginutils/5.0.2_rollup@3.12.0:
/@rollup/pluginutils/5.0.2_rollup@3.17.2:
resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
engines: {node: '>=14.0.0'}
peerDependencies:
@ -6151,7 +6151,7 @@ packages:
'@types/estree': 1.0.0
estree-walker: 2.0.2
picomatch: 2.3.1
rollup: 3.12.0
rollup: 3.17.2
dev: true
/@rushstack/eslint-patch/1.2.0:
@ -8588,8 +8588,8 @@ packages:
babel-preset-current-node-syntax: 1.0.1_@babel+core@7.20.12
dev: true
/babel-preset-solid/1.6.9_@babel+core@7.20.12:
resolution: {integrity: sha512-Dz4xROTGtAZ2B9+79KYUzi/bhjNGsx+8c+AD3VO/Cg1CisM1qq29XsnkWrRJeTMMn3XZkAI/Bf5Rz37d/gvPVQ==}
/babel-preset-solid/1.6.10_@babel+core@7.20.12:
resolution: {integrity: sha512-qBLjzeWmgY5jX11sJg/lriXABYdClfJrJJrIHaT6G5EuGhxhm6jn7XjqXjLBZHBgy5n/Z+iqJ5YfQj8KG2jKTA==}
peerDependencies:
'@babel/core': ^7.0.0
dependencies:
@ -11124,8 +11124,8 @@ packages:
string.prototype.matchall: 4.0.8
dev: false
/eslint-plugin-solid/0.9.3_7uibuqfxkfaozanbtbziikiqje:
resolution: {integrity: sha512-UoCoFwN5FjkspugmBTZrQYgX0Vr9eaPufY3Hl1sVqGhpmlLCkPua1Mgt+BW/d1q1k1XotAZhu0gIiWOKiJ/KBw==}
/eslint-plugin-solid/0.10.0_7uibuqfxkfaozanbtbziikiqje:
resolution: {integrity: sha512-x8Jpe1EI44neuMuXG8safkIHWozkjJ2UCi9k6204OYL5sK+1+fSOOHuwd9i6bG2NcHV49SIykG3rbZCuojwtfA==}
engines: {node: '>=12.0.0'}
peerDependencies:
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@ -17743,13 +17743,6 @@ packages:
fsevents: 2.3.2
dev: false
/rollup/3.12.0:
resolution: {integrity: sha512-4MZ8kA2HNYahIjz63rzrMMRvDqQDeS9LoriJvMuV0V6zIGysP36e9t4yObUfwdT9h/szXoHQideICftcdZklWg==}
engines: {node: '>=14.18.0', npm: '>=8.0.0'}
hasBin: true
optionalDependencies:
fsevents: 2.3.2
/rollup/3.13.0:
resolution: {integrity: sha512-HJwQtrXAc0AmyDohTJ/2c+Bx/sWPScJLlAUJ1kuD7rAkCro8Cr2SnVB2gVYBiSLxpgD2kZ24jbyXtG++GumrYQ==}
engines: {node: '>=14.18.0', npm: '>=8.0.0'}
@ -17758,6 +17751,13 @@ packages:
fsevents: 2.3.2
dev: true
/rollup/3.17.2:
resolution: {integrity: sha512-qMNZdlQPCkWodrAZ3qnJtvCAl4vpQ8q77uEujVCCbC/6CLB7Lcmvjq7HyiOSnf4fxTT9XgsE36oLHJBH49xjqA==}
engines: {node: '>=14.18.0', npm: '>=8.0.0'}
hasBin: true
optionalDependencies:
fsevents: 2.3.2
/rtl-css-js/1.16.1:
resolution: {integrity: sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==}
dependencies:
@ -18226,17 +18226,17 @@ packages:
websocket-driver: 0.7.4
dev: false
/solid-element/1.6.3_solid-js@1.6.9:
/solid-element/1.6.3_solid-js@1.6.11:
resolution: {integrity: sha512-yS/sePJNYsbdyZUL5LDIDVIW8VxDMbmx+qm8XRZ7WlR+cr5dHNjp1lIYqCku8DmGLzuYEoumHQAK2oPvEieqfQ==}
peerDependencies:
solid-js: ^1.6.3
dependencies:
component-register: 0.8.3
solid-js: 1.6.9
solid-js: 1.6.11
dev: false
/solid-js/1.6.9:
resolution: {integrity: sha512-kV3fMmm+1C2J95c8eDOPKGfZHnuAkHUBLG4hX1Xu08bXeAIPqmxuz/QdH3B8SIdTp3EatBVIyA6RCes3hrGzpg==}
/solid-js/1.6.11:
resolution: {integrity: sha512-JquQQHPArGq+i2PLURxJ99Pcz2/1docpbycSio/cKSA0SeI3z5zRjy0TNcH4NRYvbOLrcini+iovXwnexKabyw==}
dependencies:
csstype: 3.1.1
dev: false
@ -18833,6 +18833,40 @@ packages:
- ts-node
dev: true
/tailwindcss/3.2.7_postcss@8.4.21:
resolution: {integrity: sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==}
engines: {node: '>=12.13.0'}
hasBin: true
peerDependencies:
postcss: ^8.0.9
dependencies:
arg: 5.0.2
chokidar: 3.5.3
color-name: 1.1.4
detective: 5.2.1
didyoumean: 1.2.2
dlv: 1.1.3
fast-glob: 3.2.12
glob-parent: 6.0.2
is-glob: 4.0.3
lilconfig: 2.0.6
micromatch: 4.0.5
normalize-path: 3.0.0
object-hash: 3.0.0
picocolors: 1.0.0
postcss: 8.4.21
postcss-import: 14.1.0_postcss@8.4.21
postcss-js: 4.0.0_postcss@8.4.21
postcss-load-config: 3.1.4_postcss@8.4.21
postcss-nested: 6.0.0_postcss@8.4.21
postcss-selector-parser: 6.0.11
postcss-value-parser: 4.2.0
quick-lru: 5.1.1
resolve: 1.22.1
transitivePeerDependencies:
- ts-node
dev: true
/tapable/1.1.3:
resolution: {integrity: sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==}
engines: {node: '>=6'}
@ -19194,7 +19228,7 @@ packages:
joycon: 3.1.1
postcss-load-config: 3.1.4
resolve-from: 5.0.0
rollup: 3.13.0
rollup: 3.17.2
source-map: 0.8.0-beta.0
sucrase: 3.29.0
tree-kill: 1.2.2
@ -19881,7 +19915,7 @@ packages:
esbuild: 0.16.17
postcss: 8.4.21
resolve: 1.22.1
rollup: 3.12.0
rollup: 3.17.2
optionalDependencies:
fsevents: 2.3.2
dev: false