blsmedia/bot
2
0
Fork 0
Code Activity

⚡ Add maxWidth and maxHeight bubble them props

Browse Source 
Closes #458
This commit is contained in:
Baptiste Arnaud
2023-11-14 08:25:32 +01:00
parent c59df18f21
commit 74dd169b50
6 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/docs/docs/embed/html-javascript.md
View File

@@ -116,7 +116,7 @@ Here is an example:
theme: { theme: {
button: { backgroundColor: '#0042DA', iconColor: '#FFFFFF' }, button: { backgroundColor: '#0042DA', iconColor: '#FFFFFF' },
previewMessage: { backgroundColor: '#ffffff', textColor: 'black' }, previewMessage: { backgroundColor: '#ffffff', textColor: 'black' },
chatWindow: { backgroundColor: '#ffffff' }, chatWindow: { backgroundColor: '#ffffff', maxWidth: '100%' },
}, },
}) })
</script> </script>

2
packages/embeds/js/package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "@typebot.io/js", "name": "@typebot.io/js",
"version": "0.2.16", "version": "0.2.17",
"description": "Javascript library to display typebots on your website", "description": "Javascript library to display typebots on your website",
"type": "module", "type": "module",
"main": "dist/index.js", "main": "dist/index.js",

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

@@ -160,6 +160,8 @@ export const Bubble = (props: BubbleProps) => {
part="bot" part="bot"
style={{ style={{
height: 'calc(100% - 80px)', height: 'calc(100% - 80px)',
'max-height': props.theme?.chatWindow?.maxHeight ?? '704px',
'max-width': props.theme?.chatWindow?.maxWidth ?? '400px',
transition: transition:
'transform 200ms cubic-bezier(0, 1.2, 1, 1), opacity 150ms ease-out', 'transform 200ms cubic-bezier(0, 1.2, 1, 1), opacity 150ms ease-out',
'transform-origin': 'transform-origin':
@@ -170,7 +172,7 @@ export const Bubble = (props: BubbleProps) => {
'z-index': 42424242, 'z-index': 42424242,
}} }}
class={ class={
'fixed rounded-lg w-full sm:w-[400px] max-h-[704px]' + 'fixed rounded-lg w-full' +
(isBotOpened() ? ' opacity-1' : ' opacity-0 pointer-events-none') + (isBotOpened() ? ' opacity-1' : ' opacity-0 pointer-events-none') +
(props.theme?.button?.size === 'large' (props.theme?.button?.size === 'large'
? ' bottom-24' ? ' bottom-24'

2
packages/embeds/js/src/features/bubble/types.ts
View File

@@ -13,6 +13,8 @@ export type BubbleTheme = {
export type ChatWindowTheme = { export type ChatWindowTheme = {
backgroundColor?: string backgroundColor?: string
maxWidth?: string
maxHeight?: string
} }
export type ButtonTheme = { export type ButtonTheme = {

2
packages/embeds/nextjs/package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "@typebot.io/nextjs", "name": "@typebot.io/nextjs",
"version": "0.2.16", "version": "0.2.17",
"description": "Convenient library to display typebots on your Next.js website", "description": "Convenient library to display typebots on your Next.js website",
"main": "dist/index.js", "main": "dist/index.js",
"types": "dist/index.d.ts", "types": "dist/index.d.ts",

2
packages/embeds/react/package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "@typebot.io/react", "name": "@typebot.io/react",
"version": "0.2.16", "version": "0.2.17",
"description": "Convenient library to display typebots on your React app", "description": "Convenient library to display typebots on your React app",
"main": "dist/index.js", "main": "dist/index.js",
"types": "dist/index.d.ts", "types": "dist/index.d.ts",