Merge pull request #94 from trilitech/bot-responsive-ui

Responsive mobile UI for the bot
trilitech · Jul 17, 2023 · 9a0a89a · 9a0a89a · vercel · Jul 17, 2023
2 parents 26a07f3 + 2db16e3
commit 9a0a89a
Showing 1 changed file with 48 additions and 13 deletions.
diff --git a/src/components/ChatBob.jsx b/src/components/ChatBob.jsx
@@ -1,18 +1,38 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import Fab from '@mui/material/Fab';
 import ChatIcon from '@mui/icons-material/Chat';
+import CloseIcon from '@mui/icons-material/Close';
 
 export function ChatBob() {
   const [isVisible, setIsVisible] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    // Ensure window object is defined
+    if (typeof window !== 'undefined') {
+      setIsMobile(window.innerWidth <= 768);
+
+      function handleResize() {
+        setIsMobile(window.innerWidth <= 768);
+      }
+
+      window.addEventListener('resize', handleResize);
+
+      // Cleanup
+      return () => {
+        window.removeEventListener('resize', handleResize);
+      };
+    }
+  }, []);
 
   const toggleVisibility = () => {
     setIsVisible(!isVisible);
   };
 
   return (
     <>
-      <Fab
+      {!(isVisible&&isMobile)&&(<Fab
         color="primary"
         aria-label="chat"
         sx={{
@@ -23,27 +43,42 @@ export function ChatBob() {
         style={{ backgroundColor: '#0f172a', border: '1px solid white' }}
         onClick={toggleVisibility}
       >
-        <ChatIcon/>
-      </Fab>
-        <div style={{ borderRadius: '100px', zIndex: 20}}>
+        <ChatIcon />
+      </Fab>)}
+      <div style={{ borderRadius: '100px', zIndex: 100 }}>
         <iframe
           src="https://tezosbot.vercel.app/chatbox?history_enabled=true"
           title="chatbox"
-          key='0'
+          key="0"
           style={{
             position: 'fixed',
-            bottom: '100px',
-            right: '50px',
-            width: '500px',
-            height: '500px',
+            bottom: isMobile ? '0px' : '100px',
+            right: isMobile ? '0px' : '50px',
+            width: isMobile ? '100%' : '500px',
+            height: isMobile ? '100vh' : '500px',
             border: 'none',
             boxShadow: '0 0 10px rgba(0, 0, 0, 0.5)',
             borderRadius: '6px',
             display: isVisible ? 'block' : 'none',
-            zIndex: 20
+            zIndex: 100,
           }}
         />
-        </div>
+        {isVisible && isMobile && (
+          <Fab
+            color="primary"
+            aria-label="close chat"
+            sx={{
+              position: 'fixed',
+              top: '10px',
+              right: '10px',
+            }}
+            style={{ backgroundColor: '#0f172a', border: '1px solid white' }}
+            onClick={toggleVisibility}
+          >
+            <CloseIcon />
+          </Fab>
+        )}
+      </div>
     </>
   );
-};
+}