Skip to content

Commit e790343

Browse files
kartikpersistentkartikpersistent
authored
Change chat mode view (#515)
* added the chat mode menu * fixed closing of the menu on dialog
1 parent e96fbf8 commit e790343

File tree

8 files changed

+105
-48
lines changed

8 files changed

+105
-48
lines changed

‎frontend/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"re-resizable": "^6.9.16",
2929
"react": "^18.3.1",
3030
"react-dom": "^18.3.1",
31+
"react-icons": "^5.2.1",
3132
"react-markdown": "^9.0.1",
3233
"react-router": "^6.23.1",
3334
"react-router-dom": "^6.23.1",

‎frontend/src/components/ChatBot/ChatModeToggle.tsx‎

Lines changed: 40 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,46 @@
1-
import { SegmentedControl, Tip } from '@neo4j-ndl/react';
2-
import { ChatModeOptions } from '../../utils/Constants';
31
import { useFileContext } from '../../context/UsersFiles';
4-
import { DbmsIcon } from '@neo4j-ndl/react/icons';
5-
import { capitalize } from '@mui/material';
2+
import CustomMenu from '../UI/Menu';
63

7-
export default function ChatModeToggle({ inSidenav = false }) {
8-
const [vector, _] = ChatModeOptions;
9-
const { chatMode, setchatMode } = useFileContext();
4+
export default function ChatModeToggle({
5+
menuAnchor,
6+
closeHandler = () => {},
7+
open,
8+
anchorPortal = true,
9+
disableBackdrop = false,
10+
}: {
11+
menuAnchor: HTMLElement | null;
12+
closeHandler?: () => void;
13+
open: boolean;
14+
anchorPortal?: boolean;
15+
disableBackdrop?: boolean;
16+
}) {
17+
const { setchatMode, chatMode } = useFileContext();
1018

1119
return (
12-
<SegmentedControl
13-
className={inSidenav ? 'flex-col !h-full !ml-1' : ''}
14-
onChange={setchatMode}
15-
hasOnlyIcons={true}
16-
selected={chatMode}
17-
size={'large'}
18-
>
19-
{ChatModeOptions.map((i, idx) => {
20-
return (
21-
<Tip key={`insidenav${idx}`} allowedPlacements={inSidenav ? ['left'] : ['bottom']}>
22-
<Tip.Trigger>
23-
<SegmentedControl.Item
24-
className={
25-
idx == ChatModeOptions.length - 1 && inSidenav
26-
? '!h-[85px]'
27-
: idx == ChatModeOptions.length - 1
28-
? '!w-[80px]'
29-
: ''
30-
}
31-
value={i.value}
32-
>
33-
{i.Icon === 'abc' ? (
34-
<span className={!inSidenav ? 'flex justify-center' : ''}>
35-
<DbmsIcon className='n-size-token-7' />
36-
<span>+</span>
37-
<vector.Icon className='n-size-token-7' />
38-
</span>
39-
) : (
40-
<i.Icon className='n-size-token-7' />
41-
)}
42-
</SegmentedControl.Item>
43-
</Tip.Trigger>
44-
<Tip.Content className={!inSidenav ? `!z-[61]` : ''}>{capitalize(i.value)}</Tip.Content>
45-
</Tip>
46-
);
47-
})}
48-
</SegmentedControl>
20+
<CustomMenu
21+
closeHandler={closeHandler}
22+
open={open}
23+
MenuAnchor={menuAnchor}
24+
anchorPortal={anchorPortal}
25+
disableBackdrop={disableBackdrop}
26+
items={[
27+
{
28+
title: 'Vector',
29+
onClick: () => {
30+
setchatMode('vector');
31+
},
32+
disabledCondition: false,
33+
description: `${chatMode === 'vector' ? 'selected' : ''}`,
34+
},
35+
{
36+
title: 'Vector + Graph',
37+
onClick: () => {
38+
setchatMode('graph+vector');
39+
},
40+
disabledCondition: false,
41+
description: `${chatMode === 'graph+vector' ? 'selected' : ''}`,
42+
},
43+
]}
44+
></CustomMenu>
4945
);
5046
}

‎frontend/src/components/ChatBot/ExpandedChatButtonContainer.tsx‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { Box, IconButton } from '@neo4j-ndl/react';
44
import { Messages } from '../../types';
55
import IconButtonWithToolTip from '../UI/IconButtonToolTip';
66
import { tooltips } from '../../utils/Constants';
7+
import { useState } from 'react';
8+
import { RiChatSettingsLine } from 'react-icons/ri';
79

810
interface IconProps {
911
closeChatBot: () => void;
@@ -12,10 +14,30 @@ interface IconProps {
1214
}
1315

1416
const ExpandedChatButtonContainer: React.FC<IconProps> = ({ closeChatBot, deleteOnClick, messages }) => {
17+
const [chatAnchor, setchatAnchor] = useState<HTMLElement | null>(null);
18+
const [showChatModeOption, setshowChatModeOption] = useState<boolean>(false);
1519
return (
1620
<div className='flex items-end justify-end'>
17-
<ChatModeToggle />
21+
<ChatModeToggle
22+
closeHandler={() => setshowChatModeOption(false)}
23+
anchorPortal={true}
24+
disableBackdrop={true}
25+
open={showChatModeOption}
26+
menuAnchor={chatAnchor}
27+
/>
1828
<Box className='!h-[48px] mx-2'>
29+
<IconButtonWithToolTip
30+
onClick={(e) => {
31+
setchatAnchor(e.currentTarget);
32+
setshowChatModeOption(true);
33+
}}
34+
clean
35+
text='Chat mode'
36+
placement='bottom'
37+
label='Chat mode'
38+
>
39+
<RiChatSettingsLine />
40+
</IconButtonWithToolTip>
1941
<IconButtonWithToolTip
2042
text={tooltips.clearChat}
2143
aria-label='Remove chat history'

‎frontend/src/components/Layout/SideNav.tsx‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { getIsLoading } from '../../utils/Utils';
1616
import ExpandedChatButtonContainer from '../ChatBot/ExpandedChatButtonContainer';
1717
import { tooltips } from '../../utils/Constants';
1818
import ChatModeToggle from '../ChatBot/ChatModeToggle';
19+
import { RiChatSettingsLine } from 'react-icons/ri';
1920

2021
const SideNav: React.FC<SideNavProps> = ({
2122
position,
@@ -30,6 +31,8 @@ const SideNav: React.FC<SideNavProps> = ({
3031
const [isChatModalOpen, setIsChatModalOpen] = useState(false);
3132
const [isFullScreen, setIsFullScreen] = useState(false);
3233
const { setMessages } = useMessageContext();
34+
const [chatModeAnchor, setchatModeAnchor] = useState<HTMLElement | null>(null);
35+
const [showChatMode, setshowChatMode] = useState<boolean>(false);
3336
const date = new Date();
3437
useEffect(() => {
3538
if (clearHistoryData) {
@@ -127,7 +130,29 @@ const SideNav: React.FC<SideNavProps> = ({
127130
}
128131
/>
129132
</Tip>
130-
{!isChatModalOpen && <ChatModeToggle inSidenav={true} />}
133+
{!isChatModalOpen && (
134+
<Tip allowedPlacements={['left']}>
135+
<SideNavigation.Item
136+
onClick={(e) => {
137+
setchatModeAnchor(e.currentTarget);
138+
setshowChatMode(true);
139+
}}
140+
icon={
141+
<>
142+
<Tip.Trigger>
143+
<RiChatSettingsLine className='n-size-token-7' />
144+
</Tip.Trigger>
145+
<Tip.Content>Chat Mode</Tip.Content>
146+
<ChatModeToggle
147+
open={showChatMode}
148+
closeHandler={() => setshowChatMode(false)}
149+
menuAnchor={chatModeAnchor}
150+
></ChatModeToggle>
151+
</>
152+
}
153+
></SideNavigation.Item>
154+
</Tip>
155+
)}
131156
</>
132157
)}
133158
</SideNavigation.List>

‎frontend/src/components/UI/IconButtonToolTip.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const IconButtonWithToolTip = ({
1414
label: string;
1515
text: string | React.ReactNode;
1616
children: React.ReactNode;
17-
onClick?: () => void;
17+
onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
1818
size?: 'small' | 'medium' | 'large';
1919
clean?: boolean;
2020
grouped?: boolean;

‎frontend/src/components/UI/Menu.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,27 @@ export default function CustomMenu({
88
MenuAnchor,
99
anchorOrigin,
1010
transformOrigin,
11+
anchorPortal = true,
12+
disableBackdrop = false,
1113
}: {
1214
open: boolean;
1315
closeHandler: () => void;
1416
items: Menuitems[];
1517
MenuAnchor: HTMLElement | null;
1618
anchorOrigin?: Origin;
1719
transformOrigin?: Origin;
20+
anchorPortal?: boolean;
21+
disableBackdrop?: boolean;
1822
}) {
1923
return (
2024
<Menu
2125
open={open}
2226
onClose={closeHandler}
2327
anchorOrigin={anchorOrigin}
2428
transformOrigin={transformOrigin}
25-
anchorPortal={true}
29+
anchorPortal={anchorPortal}
2630
anchorEl={MenuAnchor}
31+
disableBackdrop={disableBackdrop}
2732
>
2833
{items.map((i, idx) => {
2934
return (
@@ -33,6 +38,7 @@ export default function CustomMenu({
3338
title={i.title}
3439
onClick={i.onClick}
3540
disabled={i.disabledCondition}
41+
className={i.isSelected ? i.selectedClassName : ''}
3642
/>
3743
);
3844
})}

‎frontend/src/types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -515,6 +515,8 @@ export interface Menuitems {
515515
onClick: () => void;
516516
disabledCondition: boolean;
517517
description?: string;
518+
isSelected?: boolean;
519+
selectedClassName?: string;
518520
}
519521
export type Vertical = 'top' | 'bottom';
520522
export type Horizontal = 'left' | 'right' | 'center';

‎frontend/yarn.lock‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5389,6 +5389,11 @@ [email protected]:
53895389
use-callback-ref "^1.3.0"
53905390
use-sidecar "^1.1.2"
53915391

5392+
react-icons@^5.2.1:
5393+
version "5.2.1"
5394+
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.2.1.tgz#28c2040917b2a2eda639b0f797bff1888e018e4a"
5395+
integrity sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==
5396+
53925397
react-is@^16.13.1, react-is@^16.7.0:
53935398
version "16.13.1"
53945399
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"

0 commit comments

Comments
 (0)