Skip to content

Commit 4997361

Browse files
TheSonOfThompTheSonOfThomp
committed
feat: integrate chatbot component and temporary drawer layout
- Added a temporary drawer layout to manage the side navigation and chatbot. - Implemented a ChatbotComponent that utilizes the mongodb-chatbot-ui package. - Enhanced the template to include a toggle button for the drawer and integrated the chatbot within the drawer. - Removed unnecessary whitespace in layout-wrapper component.
1 parent f292e35 commit 4997361

File tree

5 files changed

+128
-44
lines changed

5 files changed

+128
-44
lines changed

‎.env.example

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
NEXT_PUBLIC_CONTENTSTACK_API_KEY='apikey'
2-
NEXT_PUBLIC_CONTENTSTACK_DELIVERY_TOKEN='token'
3-
NEXT_PUBLIC_GOOGLE_ANALYTICS='<Tracking_ID>'
4-
NEXT_PUBLIC_ENVIRONMENT='staging'
1+
NEXT_PUBLIC_CONTENTSTACK_API_KEY=<apikey>
2+
NEXT_PUBLIC_CONTENTSTACK_DELIVERY_TOKEN=<token>
3+
NEXT_PUBLIC_GOOGLE_ANALYTICS=<Tracking_ID>
4+
NEXT_PUBLIC_ENVIRONMENT=staging
55

6-
OKTA_OAUTH2_CLIENT_ID='<client_id>'
7-
OKTA_OAUTH2_CLIENT_SECRET='<client_secret>'
8-
OKTA_OAUTH2_ISSUER='<mongodb_okta_url>`
9-
NEXTAUTH_URL='<okta_redirect_url>'
10-
SECRET='<your_generated_secret>'
6+
OKTA_OAUTH2_CLIENT_ID=<client_id>
7+
OKTA_OAUTH2_CLIENT_SECRET=<client_secret>
8+
OKTA_OAUTH2_ISSUER=<mongodb_okta_url>
9+
NEXTAUTH_URL=<okta_redirect_url>
10+
SECRET=<your_generated_secret>
11+
12+
NEXT_PUBLIC_CHATBOT_ENDPOINT=http://localhost:3030/api/v1

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@
8888
"fuse.js": "^7.0.0",
8989
"lodash": "^4.17.21",
9090
"marked": "^12.0.2",
91+
"mongodb-chatbot-ui": "^0.14.1",
9192
"next": "14.2.25",
9293
"next-auth": "^5.0.0-beta.18",
9394
"polished": "^4.3.1",

‎src/app/template.tsx

Lines changed: 96 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,21 @@
11
'use client';
22

33
import { css, cx } from '@emotion/css';
4-
import React from 'react';
4+
import React, {
5+
Dispatch,
6+
PropsWithChildren,
7+
SetStateAction,
8+
useState,
9+
} from 'react';
510
import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
611
import { color, spacing } from '@leafygreen-ui/tokens';
712

13+
import {
14+
DisplayMode,
15+
Drawer,
16+
DrawerStackProvider,
17+
} from '@leafygreen-ui/drawer';
18+
819
import {
920
DarkModeToggle,
1021
Footer,
@@ -13,9 +24,14 @@ import {
1324
} from '@/components/global';
1425
import { useMediaQuery } from '@/hooks';
1526
import { SIDE_NAV_WIDTH } from '@/constants';
27+
import IconButton from '@leafygreen-ui/icon-button';
28+
import Icon from '@leafygreen-ui/icon';
29+
import { ChatbotComponent } from '@/components/chatbot';
1630

1731
export default function Template({ children }: { children: React.ReactNode }) {
1832
const { darkMode } = useDarkMode();
33+
const [isDrawerOpen, setDrawerOpen] = useState(true);
34+
1935
const [isMobile] = useMediaQuery(['(max-width: 640px)'], {
2036
fallback: [false],
2137
});
@@ -31,41 +47,87 @@ export default function Template({ children }: { children: React.ReactNode }) {
3147
: color.light.background.primary.default};
3248
`}
3349
>
34-
<SideNavigation />
50+
<TempDrawerLayout open={isDrawerOpen} setOpen={setDrawerOpen}>
51+
<SideNavigation />
3552

36-
<div
37-
className={css`
38-
width: 100%;
39-
padding-top: ${spacing[400]}px;
40-
padding-right: ${spacing[400]}px;
41-
display: flex;
42-
justify-content: flex-end;
43-
gap: ${spacing[150]}px;
44-
position: absolute;
45-
top: 0;
46-
right: 0;
47-
`}
48-
>
49-
<UserMenu />
50-
<DarkModeToggle />
51-
</div>
53+
<div
54+
className={css`
55+
width: 100%;
56+
padding-top: ${spacing[400]}px;
57+
padding-right: ${spacing[400]}px;
58+
display: flex;
59+
justify-content: flex-end;
60+
gap: ${spacing[150]}px;
61+
`}
62+
>
63+
<UserMenu />
64+
<IconButton onClick={() => setDrawerOpen(!isDrawerOpen)}>
65+
<Icon glyph="Sparkle" />
66+
</IconButton>
67+
<DarkModeToggle />
68+
</div>
5269

53-
<div
54-
className={cx(
55-
css`
56-
height: 100%;
57-
margin-left: ${isMobile
58-
? 0
59-
: `${SIDE_NAV_WIDTH}px`}; // SideNav override}))}
60-
padding-left: ${spacing[1000]}px;
61-
padding-right: ${spacing[1000]}px;
62-
padding-top: ${spacing[1600]}px;
63-
`,
64-
)}
65-
>
66-
{children}
67-
<Footer />
68-
</div>
70+
<div
71+
className={cx(
72+
css`
73+
height: 100%;
74+
margin-left: ${isMobile
75+
? 0
76+
: `${SIDE_NAV_WIDTH}px`}; // SideNav override}))}
77+
padding-left: ${spacing[1000]}px;
78+
padding-right: ${spacing[1000]}px;
79+
padding-top: ${spacing[1600]}px;
80+
`,
81+
)}
82+
>
83+
{children}
84+
<Footer />
85+
</div>
86+
</TempDrawerLayout>
6987
</div>
7088
);
7189
}
90+
91+
/**
92+
* Temporary Drawer Layout component.
93+
* To be removed when the next major Drawer version is ready.
94+
*/
95+
const TempDrawerLayout = ({
96+
children,
97+
open,
98+
setOpen,
99+
}: PropsWithChildren<{
100+
open: boolean;
101+
setOpen: Dispatch<SetStateAction<boolean>>;
102+
}>) => {
103+
return (
104+
<div
105+
className={cx(
106+
css`
107+
width: 100%;
108+
display: grid;
109+
grid-template-columns: auto 0;
110+
transition: grid-template-columns 0.2s ease-in-out;
111+
`,
112+
{
113+
[css`
114+
grid-template-columns: auto 384px;
115+
`]: open,
116+
},
117+
)}
118+
>
119+
<div>{children}</div>
120+
121+
<DrawerStackProvider>
122+
<Drawer
123+
open={open}
124+
onClose={() => setOpen(false)}
125+
title="LeafyGreen AI"
126+
displayMode={DisplayMode.Embedded}
127+
>
128+
<ChatbotComponent />
129+
</Drawer>
130+
</DrawerStackProvider>
131+
</div>
132+
);
133+
};

‎src/components/chatbot/index.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { css } from '@leafygreen-ui/emotion';
2+
import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
3+
import Chatbot, { ChatWindow } from 'mongodb-chatbot-ui';
4+
5+
export const ChatbotComponent = () => {
6+
const { darkMode } = useDarkMode();
7+
const endpoint = process.env.NEXT_PUBLIC_CHATBOT_ENDPOINT;
8+
9+
return endpoint ? (
10+
<Chatbot darkMode={darkMode} serverBaseUrl={endpoint}>
11+
<ChatWindow
12+
className={css`
13+
height: 100%;
14+
`}
15+
initialMessageText="Welcome to LeafyGreen AI. What can I help you with?"
16+
// initialMessageSuggestedPrompts={suggestedPrompts}
17+
/>
18+
</Chatbot>
19+
) : null;
20+
};

‎src/components/layout-wrapper/index.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ export default function LayoutWrapper({
4141
{children}
4242
</ContentStackContextProvider>
4343
</LeafyGreenProvider>
44-
4544
<GoogleAnalytics gaId="G-VFTH2BJVVK" />
4645
</body>
4746
</>

0 commit comments

Comments
 (0)