chatbot popover

Author: TheSonOfThomp

package.json

@@ -57,6 +57,7 @@
     "@leafygreen-ui/password-input": "^3.0.13",
     "@leafygreen-ui/pipeline": "^7.0.14",
     "@leafygreen-ui/polymorphic": "^2.0.9",
+    "@leafygreen-ui/popover": "^13.0.11",
     "@leafygreen-ui/radio-box-group": "^14.0.10",
     "@leafygreen-ui/radio-group": "^12.0.12",
     "@leafygreen-ui/search-input": "^5.0.14",

src/app/template.tsx

@@ -28,9 +28,10 @@ import IconButton from '@leafygreen-ui/icon-button';
 import Icon from '@leafygreen-ui/icon';
 import { ChatbotComponent } from '@/components/chatbot';
 
+const DRAWER_WIDTH = 432;
+
 export default function Template({ children }: { children: React.ReactNode }) {
   const { darkMode } = useDarkMode();
-  const [isDrawerOpen, setDrawerOpen] = useState(true);
 
   const [isMobile] = useMediaQuery(['(max-width: 640px)'], {
     fallback: [false],
@@ -47,43 +48,39 @@ export default function Template({ children }: { children: React.ReactNode }) {
           : color.light.background.primary.default};
       `}
     >
-      <TempDrawerLayout open={isDrawerOpen} setOpen={setDrawerOpen}>
-        <SideNavigation />
+      <SideNavigation />
 
-        <div
-          className={css`
-            width: 100%;
-            padding-top: ${spacing[400]}px;
-            padding-right: ${spacing[400]}px;
-            display: flex;
-            justify-content: flex-end;
-            gap: ${spacing[150]}px;
-          `}
-        >
-          <UserMenu />
-          <IconButton onClick={() => setDrawerOpen(!isDrawerOpen)}>
-            <Icon glyph="Sparkle" />
-          </IconButton>
-          <DarkModeToggle />
-        </div>
+      <div
+        className={css`
+          width: 100%;
+          padding-top: ${spacing[400]}px;
+          padding-right: ${spacing[400]}px;
+          display: flex;
+          justify-content: flex-end;
+          gap: ${spacing[150]}px;
+        `}
+      >
+        <UserMenu />
+        <DarkModeToggle />
+      </div>
 
-        <div
-          className={cx(
-            css`
-              height: 100%;
-              margin-left: ${isMobile
-                ? 0
-                : `${SIDE_NAV_WIDTH}px`}; // SideNav override}))}
-              padding-left: ${spacing[1000]}px;
-              padding-right: ${spacing[1000]}px;
-              padding-top: ${spacing[1600]}px;
-            `,
-          )}
-        >
-          {children}
-          <Footer />
-        </div>
-      </TempDrawerLayout>
+      <div
+        className={cx(
+          css`
+            height: 100%;
+            margin-left: ${isMobile
+              ? 0
+              : `${SIDE_NAV_WIDTH}px`}; // SideNav override}))}
+            padding-left: ${spacing[1000]}px;
+            padding-right: ${spacing[1000]}px;
+            padding-top: ${spacing[1600]}px;
+          `,
+        )}
+      >
+        {children}
+        <ChatbotComponent />
+        <Footer />
+      </div>
     </div>
   );
 }
@@ -111,7 +108,7 @@ const TempDrawerLayout = ({
         `,
         {
           [css`
-            grid-template-columns: auto 384px;
+            grid-template-columns: auto ${DRAWER_WIDTH}px;
           `]: open,
         },
       )}

src/components/chatbot/index.tsx

@@ -1,20 +1,66 @@
+import Button, { Variant } from '@leafygreen-ui/button';
+import Popover from '@leafygreen-ui/popover';
 import { css } from '@leafygreen-ui/emotion';
+import Icon from '@leafygreen-ui/icon';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
-import Chatbot, { ChatWindow } from 'mongodb-chatbot-ui';
+import Chatbot, {
+  ChatWindow,
+  FloatingActionButtonTrigger,
+} from 'mongodb-chatbot-ui';
+import { useRef, useState } from 'react';
+import Card from '@leafygreen-ui/card';
+import { spacing } from '@leafygreen-ui/tokens';
 
 export const ChatbotComponent = () => {
-  const { darkMode } = useDarkMode();
   const endpoint = process.env.NEXT_PUBLIC_CHATBOT_ENDPOINT;
+  const { darkMode } = useDarkMode();
+  const fabRef = useRef<HTMLButtonElement>(null);
+
+  const [isOpen, setIsOpen] = useState(false);
+  const handleFABClick = () => {
+    setIsOpen(prev => !prev);
+  };
 
   return endpoint ? (
     <Chatbot darkMode={darkMode} serverBaseUrl={endpoint}>
-      <ChatWindow
+      <Button
+        ref={fabRef}
+        onClick={handleFABClick}
+        variant={Variant.BaseGreen}
+        size="large"
+        leftGlyph={<Icon glyph="Sparkle" size="large" />}
         className={css`
-          height: 100%;
+          position: fixed;
+          bottom: 24px;
+          right: 24px;
         `}
-        initialMessageText="Welcome to LeafyGreen AI. What can I help you with?"
-        // initialMessageSuggestedPrompts={suggestedPrompts}
-      />
+      >
+        {/* <span>Chat with LeafyGreen AI</span> */}
+      </Button>
+
+      <Popover
+        active={isOpen}
+        refEl={fabRef}
+        spacing={spacing[200]}
+        align={'bottom'}
+        justify={'end'}
+        className={css`
+          min-width: 33vw;
+          max-width: 50vw;
+          /* max-height: 50vh; */
+        `}
+      >
+        <ChatWindow
+          className={css`
+            height: 100%;
+            width: 100%;
+          `}
+          windowTitle="LeafyGreen AI"
+
+          // initialMessageText="Welcome to LeafyGreen AI. What can I help you with?"
+          // initialMessageSuggestedPrompts={suggestedPrompts}
+        />
+      </Popover>
     </Chatbot>
   ) : null;
 };