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)}