(undefined);
+ const hasWindow = typeof window !== 'undefined';
const [isBotOpened, setIsBotOpened] = createSignal(false);
const [isBotStarted, setIsBotStarted] = createSignal(false);
+ const [viewport, setViewport] = createSignal({
+ height: hasWindow ? window.innerHeight : 0,
+ width: hasWindow ? window.innerWidth : 0,
+ });
const [buttonPosition, setButtonPosition] = createSignal({
bottom: bubbleProps.theme?.button?.bottom ?? 20,
right: bubbleProps.theme?.button?.right ?? 20,
@@ -36,6 +41,12 @@ export const Bubble = (props: BubbleProps) => {
isBotOpened() ? closeBot() : openBot();
};
+ onMount(() => {
+ const handleResize = () => setViewport({ height: window.innerHeight, width: window.innerWidth });
+ window.addEventListener('resize', handleResize);
+ onCleanup(() => window.removeEventListener('resize', handleResize));
+ });
+
onCleanup(() => {
setIsBotStarted(false);
});
@@ -44,6 +55,38 @@ export const Bubble = (props: BubbleProps) => {
const buttonBottom = props.theme?.button?.bottom ?? 20;
const chatWindowBottom = buttonBottom + buttonSize + 10; // Adjust the offset here for slight shift
+ const getChatWindowHeight = () => {
+ const rawHeight = bubbleProps.theme?.chatWindow?.height;
+ if (rawHeight === undefined) return `min(calc(100dvh - ${chatWindowBottom + 16}px), calc(100% - 150px))`;
+ if (typeof rawHeight === 'string') return rawHeight;
+ return `min(${rawHeight}px, calc(100dvh - ${chatWindowBottom + 16}px))`;
+ };
+
+ const getChatWindowMaxHeight = () => {
+ return `calc(100dvh - ${chatWindowBottom + 16}px)`;
+ };
+
+ const getChatWindowWidth = () => {
+ const rawWidth = bubbleProps.theme?.chatWindow?.width;
+ if (rawWidth === undefined) return undefined;
+ if (typeof rawWidth === 'string') return rawWidth;
+ return `${rawWidth}px`;
+ };
+
+ const hasCustomChatWindowWidth = () => {
+ return bubbleProps.theme?.chatWindow?.width !== undefined;
+ };
+
+ const getChatWindowWidthForPositioning = () => {
+ const rawWidth = bubbleProps.theme?.chatWindow?.width;
+ if (typeof rawWidth === 'number') return rawWidth;
+ if (typeof rawWidth === 'string') {
+ const pxMatch = rawWidth.trim().match(/^(\d+(?:\.\d+)?)px$/i);
+ if (pxMatch) return Number(pxMatch[1]);
+ }
+ return 410;
+ };
+
// Add viewport meta tag dynamically
createEffect(() => {
const meta = document.createElement('meta');
@@ -90,8 +133,9 @@ export const Bubble = (props: BubbleProps) => {
display: 'flex',
'flex-direction': 'column',
overflow: 'hidden',
- height: bubbleProps.theme?.chatWindow?.height ? `${bubbleProps.theme?.chatWindow?.height.toString()}px` : 'calc(100% - 150px)',
- width: bubbleProps.theme?.chatWindow?.width ? `${bubbleProps.theme?.chatWindow?.width.toString()}px` : undefined,
+ height: getChatWindowHeight(),
+ 'max-height': getChatWindowMaxHeight(),
+ width: getChatWindowWidth(),
transition: 'transform 200ms cubic-bezier(0, 1.2, 1, 1), opacity 150ms ease-out',
'transform-origin': 'bottom right',
transform: isBotOpened() ? 'scale3d(1, 1, 1)' : 'scale3d(0, 0, 1)',
@@ -102,11 +146,11 @@ export const Bubble = (props: BubbleProps) => {
'background-position': 'center',
'background-repeat': 'no-repeat',
'z-index': 42424242,
- bottom: `${Math.min(buttonPosition().bottom + buttonSize + 10, window.innerHeight - chatWindowBottom)}px`,
- right: `${Math.max(0, Math.min(buttonPosition().right, window.innerWidth - (bubbleProps.theme?.chatWindow?.width ?? 410) - 10))}px`,
+ bottom: `${Math.min(buttonPosition().bottom + buttonSize + 10, viewport().height - chatWindowBottom)}px`,
+ right: `${Math.max(0, Math.min(buttonPosition().right, viewport().width - getChatWindowWidthForPositioning() - 10))}px`,
}}
class={
- `fixed sm:right-5 rounded-lg w-full sm:w-[400px] max-h-[704px]` +
+ `fixed sm:right-5 rounded-lg ${hasCustomChatWindowWidth() ? '' : 'w-full sm:w-[400px]'}` +
(isBotOpened() ? ' opacity-1' : ' opacity-0 pointer-events-none') +
` bottom-${chatWindowBottom}px`
}
diff --git a/src/features/bubble/types.ts b/src/features/bubble/types.ts
index b4056af02..692184b19 100644
--- a/src/features/bubble/types.ts
+++ b/src/features/bubble/types.ts
@@ -68,8 +68,8 @@ export type ChatWindowTheme = {
errorMessage?: string;
backgroundColor?: string;
backgroundImage?: string;
- height?: number;
- width?: number;
+ height?: number | string;
+ width?: number | string;
fontSize?: number;
userMessage?: UserMessageTheme;
botMessage?: BotMessageTheme;
diff --git a/src/features/full/components/Full.tsx b/src/features/full/components/Full.tsx
index 974be215f..de3cca6e3 100644
--- a/src/features/full/components/Full.tsx
+++ b/src/features/full/components/Full.tsx
@@ -53,8 +53,17 @@ export const Full = (props: FullProps, { element }: { element: HTMLElement }) =>
();
+const MOBILE_BREAKPOINT = 640;
+const hasWindow = typeof window !== 'undefined';
+const MOBILE_RESIZE_HANDLER_KEY = '__flowise_mobile_resize_handler__';
+
+export const [isMobile, setIsMobile] = createSignal(hasWindow ? window.innerWidth <= MOBILE_BREAKPOINT : false);
+
+if (hasWindow) {
+ const browserWindow = window as Window & { [MOBILE_RESIZE_HANDLER_KEY]?: () => void };
+
+ if (browserWindow[MOBILE_RESIZE_HANDLER_KEY]) {
+ window.removeEventListener('resize', browserWindow[MOBILE_RESIZE_HANDLER_KEY] as EventListener);
+ }
+
+ const handleResize = () => {
+ setIsMobile(window.innerWidth <= MOBILE_BREAKPOINT);
+ };
+
+ browserWindow[MOBILE_RESIZE_HANDLER_KEY] = handleResize;
+ window.addEventListener('resize', handleResize);
+}