From e861507bec62a2d7ff81da65d770753c8f064aec Mon Sep 17 00:00:00 2001 From: houmland Date: Mon, 4 Dec 2023 13:15:26 -0500 Subject: [PATCH 01/17] adding heigh width and fixed props --- example/App.tsx | 2 +- package-lock.json | 23 ++++++++++++++++++++--- package.json | 3 ++- src/Stack.tsx | 18 ++++++++++++++---- 4 files changed, 37 insertions(+), 9 deletions(-) diff --git a/example/App.tsx b/example/App.tsx index 1aa3919..2ba5076 100644 --- a/example/App.tsx +++ b/example/App.tsx @@ -5,7 +5,7 @@ function App() { return ( <>

Demo website

- + ); } diff --git a/package-lock.json b/package-lock.json index efb1973..87cfbda 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,18 +1,19 @@ { "name": "react-stackai", - "version": "0.1.4", + "version": "0.1.6", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "react-stackai", - "version": "0.1.4", + "version": "0.1.6", "dependencies": { "lodash.debounce": "^4.0.8", "react": ">=17.0.0", "react-dom": ">=17.0.0", "react-iframe": "^1.8.5", - "react-merge-refs": "^2.1.1" + "react-merge-refs": "^2.1.1", + "react-stackai": "^0.1.6" }, "devDependencies": { "@types/lodash.debounce": "^4.0.9", @@ -2165,6 +2166,22 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/react-stackai": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/react-stackai/-/react-stackai-0.1.6.tgz", + "integrity": "sha512-x5KCsQtYFlSOyorXy8207D2OI2T8BlwXkpFEmxcBVR+unST/PxwlIJj9K0EvsoX7yssj6+HM1BAsAqbErSuq1A==", + "dependencies": { + "lodash.debounce": "^4.0.8", + "react": ">=17.0.0", + "react-dom": ">=17.0.0", + "react-iframe": "^1.8.5", + "react-merge-refs": "^2.1.1" + }, + "peerDependencies": { + "react": ">=17.0.0", + "react-dom": ">=17.0.0" + } + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", diff --git a/package.json b/package.json index 6ee6527..db9c861 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,8 @@ "react": ">=17.0.0", "react-dom": ">=17.0.0", "react-iframe": "^1.8.5", - "react-merge-refs": "^2.1.1" + "react-merge-refs": "^2.1.1", + "react-stackai": "^0.1.6" }, "peerDependencies": { "react": ">=17.0.0", diff --git a/src/Stack.tsx b/src/Stack.tsx index d6d23f8..80c2058 100644 --- a/src/Stack.tsx +++ b/src/Stack.tsx @@ -3,16 +3,26 @@ import { forwardRef, useEffect, LegacyRef } from 'react'; type StackProps = { project: string; innerRef?: LegacyRef | undefined; + width?: string; + height?: string; + fixed?: boolean; }; // We are forwarding the ref to the iframe so that the user has access to it. -const Stack = forwardRef(function Stack({ project, innerRef }: StackProps) { +const Stack = forwardRef(function Stack({ + project, + innerRef, + width = '500px', // Default width value + height = '700px', // Default height value + fixed = false // Default fixed value +}: StackProps) { + // Resizes based on the open/close state of the chatbot useEffect(() => { const iframe = document.getElementById('responsiveIframe'); if (iframe) { - iframe.style.width = '90px'; - iframe.style.height = '90px'; + iframe.style.width = width; + iframe.style.height = height; } const handleMessage = (event: MessageEvent) => { @@ -52,7 +62,7 @@ const Stack = forwardRef(function Stack({ project, innerRef }: StackProps) { className="chatbot-container" allow="microphone" style={{ - position: 'fixed', + position: fixed? 'fixed' : 'relative', zIndex: '100', overflow: 'hidden', bottom: '0', From 4032f65c94e574da15a71f0a959ab8b70836a484 Mon Sep 17 00:00:00 2001 From: houmland Date: Mon, 4 Dec 2023 14:09:45 -0500 Subject: [PATCH 02/17] fixed issue with fixed open chatbot that was sized to 90x90px --- src/Stack.tsx | 29 +++++++++++------------------ 1 file changed, 11 insertions(+), 18 deletions(-) diff --git a/src/Stack.tsx b/src/Stack.tsx index 80c2058..3346d5e 100644 --- a/src/Stack.tsx +++ b/src/Stack.tsx @@ -12,9 +12,9 @@ type StackProps = { const Stack = forwardRef(function Stack({ project, innerRef, - width = '500px', // Default width value - height = '700px', // Default height value - fixed = false // Default fixed value + width = '35rem', // Default width value + height = '38.5rem', // Default height value + fixed = true // Default fixed value }: StackProps) { // Resizes based on the open/close state of the chatbot @@ -28,22 +28,15 @@ const Stack = forwardRef(function Stack({ const handleMessage = (event: MessageEvent) => { const iframe = document.getElementById('responsiveIframe'); if (iframe && event.data.type === 'chatbotStateChange') { - if (iframe && event.data.isClosed) { - setTimeout(() => { - iframe.style.width = '90px'; - iframe.style.height = '90px'; - }, 300); + const isMobile = window.innerWidth < 1000; + if (isMobile) { + // Mobile + iframe.style.width = '100vw'; + iframe.style.height = '38.5rem'; } else { - const isMobile = window.innerWidth < 1000; - if (isMobile) { - // Mobile - iframe.style.width = '100vw'; - iframe.style.height = '38.5rem'; - } else { - // Desktop - iframe.style.width = '35rem'; - iframe.style.height = '38.5rem'; - } + // Desktop + iframe.style.width = width; + iframe.style.height = height; } } }; From 6c9db6b8d924731203fcea36a7381f6129858bb4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pablo=20Ome=C3=B1aca=20Muro?= <43064045+houmland@users.noreply.github.com> Date: Fri, 8 Dec 2023 08:50:39 -0800 Subject: [PATCH 03/17] Update src/Stack.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Javi Sánchez <32944505+sanchezfdezjavier@users.noreply.github.com> --- src/Stack.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Stack.tsx b/src/Stack.tsx index 3346d5e..6207c02 100644 --- a/src/Stack.tsx +++ b/src/Stack.tsx @@ -12,9 +12,9 @@ type StackProps = { const Stack = forwardRef(function Stack({ project, innerRef, - width = '35rem', // Default width value - height = '38.5rem', // Default height value - fixed = true // Default fixed value + width = '35rem', + height = '38.5rem', + fixed = true }: StackProps) { // Resizes based on the open/close state of the chatbot From e3cf99e2910b4d347712622c5e7aef4bbc342e71 Mon Sep 17 00:00:00 2001 From: houmland Date: Fri, 8 Dec 2023 10:28:38 -0800 Subject: [PATCH 04/17] adding minimum sizes for height and width --- src/Stack.tsx | 39 +++++++++++++++++++++++++++------------ 1 file changed, 27 insertions(+), 12 deletions(-) diff --git a/src/Stack.tsx b/src/Stack.tsx index 3346d5e..ddbed68 100644 --- a/src/Stack.tsx +++ b/src/Stack.tsx @@ -3,8 +3,8 @@ import { forwardRef, useEffect, LegacyRef } from 'react'; type StackProps = { project: string; innerRef?: LegacyRef | undefined; - width?: string; - height?: string; + width?: number; + height?: number; fixed?: boolean; }; @@ -12,17 +12,30 @@ type StackProps = { const Stack = forwardRef(function Stack({ project, innerRef, - width = '35rem', // Default width value - height = '38.5rem', // Default height value - fixed = true // Default fixed value + width = 15, + height = 54, + fixed = true }: StackProps) { - // Resizes based on the open/close state of the chatbot + // Function to adjust width and height + const adjustDimensions = (w: number, h: number) => { + const minWidth = 15; // Minimum width in rem + const minHeight = 38; // Minimum height in rem + + return { + adjustedWidth: w < minWidth ? `${minWidth}rem` : `${w}rem`, + adjustedHeight: h < minHeight ? `${minHeight}rem` : `${h}rem`, + }; + }; + useEffect(() => { const iframe = document.getElementById('responsiveIframe'); if (iframe) { - iframe.style.width = width; - iframe.style.height = height; + // Adjust width and height based on the condition + const { adjustedWidth, adjustedHeight } = adjustDimensions(width, height); + + iframe.style.width = adjustedWidth; + iframe.style.height = adjustedHeight; } const handleMessage = (event: MessageEvent) => { @@ -35,8 +48,9 @@ const Stack = forwardRef(function Stack({ iframe.style.height = '38.5rem'; } else { // Desktop - iframe.style.width = width; - iframe.style.height = height; + const { adjustedWidth, adjustedHeight } = adjustDimensions(width, height); + iframe.style.width = adjustedWidth; + iframe.style.height = adjustedHeight; } } }; @@ -45,7 +59,7 @@ const Stack = forwardRef(function Stack({ return () => { window.removeEventListener('message', handleMessage); }; - }, []); + }, [width, height]); return (