Skip to content

Commit 2a943e6

Browse files
prakriti-solankeykartikpersistent
prakriti-solankey
authored and
kartikpersistent
committed
Added Description to chat mode menu (#743)
* added tooltips to chat mode menu * addition of description to menu * 741-tooltips-to-selectOptions * menu changes * acommunities name change * close changes * name changes * format fixes
1 parent 4789a05 commit 2a943e6

File tree

6 files changed

+139
-54
lines changed

6 files changed

+139
-54
lines changed

‎frontend/src/App.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -379,4 +379,9 @@
379379

380380
.text-input-container.search-initiated {
381381
width: 60dvh;
382+
}
383+
384+
.custom-menu {
385+
min-width: 250px;
386+
max-width: 300px;
382387
}

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

Lines changed: 35 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { StatusIndicator, Typography } from '@neo4j-ndl/react';
2-
import { useMemo, useEffect } from 'react';
2+
import { useMemo } from 'react';
33
import { useFileContext } from '../../context/UsersFiles';
44
import CustomMenu from '../UI/Menu';
55
import { chatModeLables, chatModes } from '../../utils/Constants';
@@ -22,55 +22,47 @@ export default function ChatModeToggle({
2222
const { setchatMode, chatMode, postProcessingTasks } = useFileContext();
2323
const isCommunityAllowed = postProcessingTasks.includes('create_communities');
2424
const { isGdsActive } = useCredentials();
25+
const memoizedChatModes = useMemo(() => {
26+
return isGdsActive && isCommunityAllowed
27+
? chatModes
28+
: chatModes?.filter((m) => !m.mode.includes('entity search+vector'));
29+
}, [isGdsActive, isCommunityAllowed]);
30+
const menuItems = useMemo(() => {
31+
return memoizedChatModes?.map((m) => ({
32+
title: (
33+
<div>
34+
<Typography variant='subheading-small'>
35+
{m.mode.includes('+') ? capitalizeWithPlus(m.mode) : capitalize(m.mode)}
36+
</Typography>
37+
<div>
38+
<Typography variant='body-small'>{m.description}</Typography>
39+
</div>
40+
</div>
41+
),
42+
onClick: () => {
43+
setchatMode(m.mode);
44+
closeHandler(); // Close the menu after setting the chat mode
45+
},
46+
disabledCondition: false,
47+
description: (
48+
<span>
49+
{chatMode === m.mode && (
50+
<>
51+
<StatusIndicator type='success' /> Selected
52+
</>
53+
)}
54+
</span>
55+
),
56+
}));
57+
}, [chatMode, memoizedChatModes, setchatMode, closeHandler]);
2558
return (
2659
<CustomMenu
2760
closeHandler={closeHandler}
2861
open={open}
2962
MenuAnchor={menuAnchor}
3063
anchorPortal={anchorPortal}
3164
disableBackdrop={disableBackdrop}
32-
items={useMemo(() => {
33-
if (isGdsActive && isCommunityAllowed) {
34-
return chatModes?.map((m) => {
35-
return {
36-
title: m.includes('+') ? capitalizeWithPlus(m) : capitalize(m),
37-
onClick: () => {
38-
setchatMode(m);
39-
},
40-
disabledCondition: false,
41-
description: (
42-
<span>
43-
{chatMode === m && (
44-
<>
45-
<StatusIndicator type={`${chatMode === m ? 'success' : 'unknown'}`} /> Selected
46-
</>
47-
)}
48-
</span>
49-
),
50-
};
51-
});
52-
}
53-
return chatModes
54-
?.filter((s) => !s.includes('community'))
55-
?.map((m) => {
56-
return {
57-
title: m.includes('+') ? capitalizeWithPlus(m) : capitalize(m),
58-
onClick: () => {
59-
setchatMode(m);
60-
},
61-
disabledCondition: false,
62-
description: (
63-
<span>
64-
{chatMode === m && (
65-
<>
66-
<StatusIndicator type={`${chatMode === m ? 'success' : 'unknown'}`} /> Selected
67-
</>
68-
)}
69-
</span>
70-
),
71-
};
72-
});
73-
}, [chatMode, chatModes, isCommunityAllowed, isGdsActive])}
65+
items={menuItems}
7466
/>
7567
);
7668
}

‎frontend/src/components/Graph/LegendsChip.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,13 @@ import { graphLabels } from '../../utils/Constants';
33
import Legend from '../UI/Legend';
44

55
export const LegendsChip: React.FunctionComponent<LegendChipProps> = ({ scheme, label, type, count, onClick }) => {
6-
return <Legend title={label} count={count} bgColor={scheme[label]} type={type} onClick={onClick} />;
6+
return (
7+
<Legend
8+
title={label === '__Community__' ? graphLabels.community : label}
9+
count={count}
10+
bgColor={scheme[label]}
11+
type={type}
12+
onClick={onClick}
13+
/>
14+
);
715
};

‎frontend/src/components/Popups/GraphEnhancementDialog/Deduplication/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,12 +80,12 @@ export default function DeduplicationTab() {
8080
const onRemove = (nodeid: string, similarNodeId: string) => {
8181
setDuplicateNodes((prev) => {
8282
return prev.map((d) =>
83-
(d.e.elementId === nodeid
83+
d.e.elementId === nodeid
8484
? {
8585
...d,
8686
similar: d.similar.filter((n) => n.elementId != similarNodeId),
8787
}
88-
: d)
88+
: d
8989
);
9090
});
9191
};

‎frontend/src/utils/Constants.ts‎

Lines changed: 40 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -59,18 +59,50 @@ export const defaultLLM = llms?.includes('openai-gpt-4o')
5959
: llms?.includes('gemini-1.0-pro')
6060
? 'gemini-1.0-pro'
6161
: 'diffbot';
62+
63+
// export const chatModes =
64+
// process.env?.VITE_CHAT_MODES?.trim() != ''
65+
// ? process.env.VITE_CHAT_MODES?.split(',')
66+
// : ['vector', 'graph', 'graph+vector', 'fulltext', 'graph+vector+fulltext', 'local community', 'global community'];
67+
6268
export const chatModes =
6369
process.env?.VITE_CHAT_MODES?.trim() != ''
64-
? process.env.VITE_CHAT_MODES?.split(',')
70+
? process.env.VITE_CHAT_MODES?.split(',').map((mode) => ({
71+
mode: mode.trim(),
72+
description: getDescriptionForChatMode(mode.trim()),
73+
}))
6574
: [
66-
'vector',
67-
'graph',
68-
'graph+vector',
69-
'fulltext',
70-
'graph+vector+fulltext',
71-
'entity search+vector',
72-
'global community',
75+
{
76+
mode: 'vector',
77+
description: 'Utilizes vector indexing on text chunks to enable semantic similarity search.',
78+
},
79+
{
80+
mode: 'graph',
81+
description:
82+
'Leverages text-to-cypher translation to query a database and retrieve relevant data, ensuring a highly targeted and contextually accurate response.',
83+
},
84+
{
85+
mode: 'graph+vector',
86+
description:
87+
'Combines vector indexing on text chunks with graph connections, enhancing search results with contextual relevance by considering relationships between concepts.',
88+
},
89+
{
90+
mode: 'fulltext',
91+
description:
92+
'Employs a fulltext index on text chunks for rapid keyword-based search, efficiently identifying documents containing specific words or phrases.',
93+
},
94+
{
95+
mode: 'graph+vector+fulltext',
96+
description:
97+
'Merges vector indexing, graph connections, and fulltext indexing for a comprehensive search approach, combining semantic similarity, contextual relevance, and keyword-based search for optimal results.',
98+
},
99+
{
100+
mode: 'entity search+vector',
101+
description:
102+
'Combines entity node vector indexing with graph connections for accurate entity-based search, providing the most relevant response.',
103+
},
73104
];
105+
74106
export const chunkSize = process.env.VITE_CHUNK_SIZE ? parseInt(process.env.VITE_CHUNK_SIZE) : 1 * 1024 * 1024;
75107
export const timeperpage = process.env.VITE_TIME_PER_PAGE ? parseInt(process.env.VITE_TIME_PER_PAGE) : 50;
76108
export const timePerByte = 0.2;

‎frontend/src/utils/Utils.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -372,6 +372,35 @@ export const titleCheck = (title: string) => {
372372
return title === 'Chunk' || title === 'Document';
373373
};
374374

375+
export const getFileSourceStatus = (item: SourceNode) => {
376+
if (item?.fileSource === 's3 bucket' && localStorage.getItem('accesskey') === item?.awsAccessKeyId) {
377+
return item?.status;
378+
}
379+
if (item?.fileSource === 'local file') {
380+
return item?.status;
381+
}
382+
if (item?.status === 'Completed' || item.status === 'Failed' || item.status === 'Reprocess') {
383+
return item?.status;
384+
}
385+
if (
386+
item?.fileSource === 'Wikipedia' ||
387+
item?.fileSource === 'youtube' ||
388+
item?.fileSource === 'gcs bucket' ||
389+
item?.fileSource === 'web-url'
390+
) {
391+
return item?.status;
392+
}
393+
return 'N/A';
394+
};
395+
export const isFileCompleted = (waitingFile: CustomFile, item: SourceNode) =>
396+
waitingFile && item.status === 'Completed';
397+
398+
export const calculateProcessedCount = (prev: number, batchSize: number) =>
399+
prev === batchSize ? batchSize - 1 : prev + 1;
400+
401+
export const isProcessingFileValid = (item: SourceNode, userCredentials: UserCredentials) => {
402+
return item.status === 'Processing' && item.fileName != undefined && userCredentials && userCredentials.database;
403+
};
375404
export const sortAlphabetically = (a: Relationship, b: Relationship) => {
376405
const captionOne = a.caption?.toLowerCase() || '';
377406
const captionTwo = b.caption?.toLowerCase() || '';
@@ -384,6 +413,25 @@ export const capitalizeWithPlus = (s: string) => {
384413
.map((s) => capitalize(s))
385414
.join('+');
386415
};
416+
417+
export const getDescriptionForChatMode = (mode: string): string => {
418+
switch (mode.toLowerCase()) {
419+
case 'vector':
420+
return 'Utilizes vector indexing on text chunks to enable semantic similarity search.';
421+
case 'graph':
422+
return 'Leverages text-to-cypher translation to query a database and retrieve relevant data, ensuring a highly targeted and contextually accurate response.';
423+
case 'graph+vector':
424+
return 'Combines vector indexing on text chunks with graph connections, enhancing search results with contextual relevance by considering relationships between concepts.';
425+
case 'fulltext':
426+
return 'Employs a fulltext index on text chunks for rapid keyword-based search, efficiently identifying documents containing specific words or phrases.';
427+
case 'graph+vector+fulltext':
428+
return 'Merges vector indexing, graph connections, and fulltext indexing for a comprehensive search approach, combining semantic similarity, contextual relevance, and keyword-based search for optimal results.';
429+
case 'entity search+vector':
430+
return 'Combines entity node vector indexing with graph connections for accurate entity-based search, providing the most relevant response.';
431+
default:
432+
return 'Chat mode description not available'; // Fallback description
433+
}
434+
};
387435
export const getLogo = (mode: string): Record<string, string> => {
388436
if (mode === 'light') {
389437
return {

0 commit comments

Comments
 (0)