neo4j-labs · prakriti-solankey · Oct 23, 2024 · Oct 21, 2024 · Oct 21, 2024 · Oct 22, 2024
diff --git a/backend/src/shared/constants.py b/backend/src/shared/constants.py
@@ -560,12 +560,12 @@
 
 CHAT_VECTOR_MODE = "vector"
 CHAT_FULLTEXT_MODE = "fulltext"
-CHAT_ENTITY_VECTOR_MODE = "entity search+vector"
-CHAT_VECTOR_GRAPH_MODE = "graph+vector"
-CHAT_VECTOR_GRAPH_FULLTEXT_MODE = "graph+vector+fulltext"
-CHAT_GLOBAL_VECTOR_FULLTEXT_MODE = "global search+vector+fulltext"
+CHAT_ENTITY_VECTOR_MODE = "entity_vector"
+CHAT_VECTOR_GRAPH_MODE = "graph_vector"
+CHAT_VECTOR_GRAPH_FULLTEXT_MODE = "graph_vector_fulltext"
+CHAT_GLOBAL_VECTOR_FULLTEXT_MODE = "global_vector"
 CHAT_GRAPH_MODE = "graph"
-CHAT_DEFAULT_MODE = "graph+vector+fulltext"
+CHAT_DEFAULT_MODE = "graph_vector_fulltext"
 
 CHAT_MODE_CONFIG_MAP= {
         CHAT_VECTOR_MODE : {

diff --git a/frontend/src/components/ChatBot/ChatInfoModal.tsx b/frontend/src/components/ChatBot/ChatInfoModal.tsx
@@ -24,7 +24,7 @@ import ChunkInfo from './ChunkInfo';
 import EntitiesInfo from './EntitiesInfo';
 import SourcesInfo from './SourcesInfo';
 import CommunitiesInfo from './CommunitiesInfo';
-import { chatModeLables, supportedLLmsForRagas } from '../../utils/Constants';
+import { chatModeLables, chatModeReadableLables, supportedLLmsForRagas } from '../../utils/Constants';
 import { Relationship } from '@neo4j-nvl/base';
 import { getChatMetrics } from '../../services/GetRagasMetric';
 import MetricsTab from './MetricsTab';
@@ -71,14 +71,20 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
   const { breakpoints } = tokens;
   const isTablet = useMediaQuery(`(min-width:${breakpoints.xs}) and (max-width: ${breakpoints.lg})`);
   const [activeTab, setActiveTab] = useState<number>(
-    error?.length ? 10 : mode === chatModeLables.global_vector ? 7 : mode === chatModeLables.graph ? 4 : 3
+    error?.length
+      ? 10
+      : mode === chatModeLables['global search+vector+fulltext']
+      ? 7
+      : mode === chatModeLables.graph
+      ? 4
+      : 3
   );
   const { userCredentials } = useCredentials();
   const themeUtils = useContext(ThemeWrapperContext);
   const [, copy] = useCopyToClipboard();
   const [copiedText, setcopiedText] = useState<boolean>(false);
   const [showMetricsTable, setShowMetricsTable] = useState<boolean>(Boolean(metricDetails));
-  const [showMultiModeMetrics, setShowMultiModeMetrics] = useState<boolean>(Boolean(multiModelMetrics.length))
+  const [showMultiModeMetrics, setShowMultiModeMetrics] = useState<boolean>(Boolean(multiModelMetrics.length));
   const [multiModeError, setMultiModeError] = useState<string>('');
 
   const actions: CypherCodeBlockProps['actions'] = useMemo(
@@ -201,7 +207,7 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
           }
         }
       } else {
-        setShowMultiModeMetrics(true)
+        setShowMultiModeMetrics(true);
         toggleMetricsLoading();
         const contextarray = Object.values(activeChatmodes).map((r) => {
           return r.metric_contexts;
@@ -255,24 +261,24 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
             To generate this response, the process took <span className='font-bold'>{response_time} seconds,</span>
             utilizing <span className='font-bold'>{total_tokens}</span> tokens with the model{' '}
             <span className='font-bold'>{model}</span> in{' '}
-            <span className='font-bold'>{mode !== 'vector' ? mode.replace(/\+/g, ' & ') : mode}</span> mode.
+            <span className='font-bold'>{chatModeReadableLables[mode] !== 'vector' ? chatModeReadableLables[mode].replace(/\+/g, ' & ') : chatModeReadableLables[mode]}</span> mode.
           </Typography>
         </Box>
       </Box>
       {error?.length > 0 ? (
         <Banner type='danger'>{error}</Banner>
       ) : (
         <Tabs size='large' fill='underline' onChange={onChangeTabs} value={activeTab}>
-          {mode === chatModeLables.global_vector ? (
+          {mode === chatModeLables['global search+vector+fulltext'] ? (
             <Tabs.Tab tabId={7}>Communities</Tabs.Tab>
           ) : (
             <>
               {mode != chatModeLables.graph ? <Tabs.Tab tabId={3}>Sources used</Tabs.Tab> : <></>}
               {mode != chatModeLables.graph ? <Tabs.Tab tabId={5}>Chunks</Tabs.Tab> : <></>}
-              {mode === chatModeLables.graph_vector ||
+              {mode === chatModeLables['graph+vector'] ||
               mode === chatModeLables.graph ||
-              mode === chatModeLables.graph_vector_fulltext ||
-              mode === chatModeLables.entity_vector ? (
+              mode === chatModeLables['graph+vector+fulltext'] ||
+              mode === chatModeLables['entity search+vector'] ? (
                 <Tabs.Tab tabId={4}>Top Entities used</Tabs.Tab>
               ) : (
                 <></>
@@ -282,7 +288,7 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
               ) : (
                 <></>
               )}
-              {mode === chatModeLables.entity_vector && communities.length ? (
+              {mode === chatModeLables['entity search+vector'] && communities.length ? (
                 <Tabs.Tab tabId={7}>Communities</Tabs.Tab>
               ) : (
                 <></>
@@ -387,7 +393,7 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
             className='min-h-40'
           />
         </Tabs.TabPanel>
-        {mode === chatModeLables.entity_vector || mode === chatModeLables.global_vector ? (
+        {mode === chatModeLables['entity search+vector'] || mode === chatModeLables['global search+vector+fulltext'] ? (
           <Tabs.TabPanel className='n-flex n-flex-col n-gap-token-4 n-p-token-6' value={activeTab} tabId={7}>
             <CommunitiesInfo loading={infoLoading} communities={communities} mode={mode} />
           </Tabs.TabPanel>

diff --git a/frontend/src/components/ChatBot/ChatModeToggle.tsx b/frontend/src/components/ChatBot/ChatModeToggle.tsx
@@ -2,7 +2,7 @@ import { StatusIndicator, Typography } from '@neo4j-ndl/react';
 import { useMemo, useEffect } from 'react';
 import { useFileContext } from '../../context/UsersFiles';
 import CustomMenu from '../UI/Menu';
-import { chatModeLables, chatModes as AvailableModes } from '../../utils/Constants';
+import { chatModeLables, chatModes as AvailableModes, chatModeReadableLables } from '../../utils/Constants';
 import { capitalize } from '@mui/material';
 import { capitalizeWithPlus } from '../../utils/Utils';
 import { useCredentials } from '../../context/UserCredentials';
@@ -30,33 +30,33 @@ export default function ChatModeToggle({
       if (
         chatModes.includes(chatModeLables.graph) ||
         chatModes.includes(chatModeLables.fulltext) ||
-        chatModes.includes(chatModeLables.graph_vector_fulltext)
+        chatModes.includes(chatModeLables['global search+vector+fulltext'])
       ) {
         setchatModes((prev) =>
           prev.filter(
-            (m) => ![chatModeLables.graph, chatModeLables.fulltext, chatModeLables.graph_vector_fulltext].includes(m)
+            (m) => ![chatModeLables.graph, chatModeLables.fulltext, chatModeLables['graph+vector+fulltext']].includes(m)
           )
         );
       }
-      if (!chatModes.includes(chatModeLables.vector)) {
-        setchatModes([chatModeLables.vector]);
+      if (!(chatModes.includes(chatModeLables.vector) || chatModes.includes(chatModeLables['graph+vector']))) {
+        setchatModes([chatModeLables['graph+vector']]);
       }
     }
   }, [selectedRows.length, chatModes.length]);
 
   const memoizedChatModes = useMemo(() => {
     return isGdsActive && isCommunityAllowed
       ? AvailableModes
-      : AvailableModes?.filter((m) => !m.mode.includes(chatModeLables.global_vector));
+      : AvailableModes?.filter((m) => !m.mode.includes(chatModeLables['global search+vector+fulltext']));
   }, [isGdsActive, isCommunityAllowed]);
   const menuItems = useMemo(() => {
     return memoizedChatModes?.map((m) => {
       const isDisabled = Boolean(
-        selectedRows.length && !(m.mode === chatModeLables.vector || m.mode === chatModeLables.graph_vector)
+        selectedRows.length && !(m.mode === chatModeLables.vector || m.mode === chatModeLables['graph+vector'])
       );
       const handleModeChange = () => {
         if (isDisabled) {
-          setchatModes([chatModeLables.graph_vector]);
+          setchatModes([chatModeLables['graph+vector']]);
         } else if (chatModes.includes(m.mode)) {
           setchatModes((prev) => prev.filter((i) => i != m.mode));
         } else {
@@ -68,7 +68,9 @@ export default function ChatModeToggle({
         title: (
           <div>
             <Typography variant='subheading-small'>
-              {m.mode.includes('+') ? capitalizeWithPlus(m.mode) : capitalize(m.mode)}
+              {chatModeReadableLables[m.mode].includes('+')
+                ? capitalizeWithPlus(chatModeReadableLables[m.mode])
+                : capitalize(chatModeReadableLables[m.mode])}
             </Typography>
             <div>
               <Typography variant='body-small'>{m.description}</Typography>
@@ -97,7 +99,7 @@ export default function ChatModeToggle({
 
   useEffect(() => {
     if (!selectedRows.length && !chatModes.length) {
-      setchatModes([chatModeLables.graph_vector_fulltext]);
+      setchatModes([]);
     }
   }, [selectedRows.length, chatModes.length]);
   return (

diff --git a/frontend/src/components/ChatBot/ChatModesSwitch.tsx b/frontend/src/components/ChatBot/ChatModesSwitch.tsx
@@ -2,6 +2,7 @@ import { Flex, IconButton } from '@neo4j-ndl/react';
 import { ChevronLeftIconSolid, ChevronRightIconSolid } from '@neo4j-ndl/react/icons';
 import TipWrapper from '../UI/TipWrapper';
 import { capitalize, capitalizeWithPlus } from '../../utils/Utils';
+import { chatModeReadableLables } from '../../utils/Constants';
 
 export default function ChatModesSwitch({
   switchToOtherMode,
@@ -16,7 +17,7 @@ export default function ChatModesSwitch({
   currentMode: string;
   isFullScreen: boolean;
 }) {
-  const chatmodetoshow = currentMode.includes('+') ? capitalizeWithPlus(currentMode) : capitalize(currentMode);
+  const chatmodetoshow =chatModeReadableLables[currentMode].includes('+') ? capitalizeWithPlus(chatModeReadableLables[currentMode]) : capitalize(chatModeReadableLables[currentMode]);
   return (
     <Flex flexDirection='row' gap='1' alignItems='center'>
       <IconButton

diff --git a/frontend/src/components/ChatBot/Chatbot.tsx b/frontend/src/components/ChatBot/Chatbot.tsx
@@ -64,7 +64,7 @@ const Chatbot: FC<ChatbotProps> = (props) => {
   const [responseTime, setResponseTime] = useState<number>(0);
   const [tokensUsed, setTokensUsed] = useState<number>(0);
   const [cypherQuery, setcypherQuery] = useState<string>('');
-  const [chatsMode, setChatsMode] = useState<string>(chatModeLables.graph_vector_fulltext);
+  const [chatsMode, setChatsMode] = useState<string>(chatModeLables['graph+vector+fulltext']);
   const [graphEntitites, setgraphEntitites] = useState<[]>([]);
   const [messageError, setmessageError] = useState<string>('');
   const [entitiesModal, setEntitiesModal] = useState<string[]>([]);
@@ -583,7 +583,7 @@ const Chatbot: FC<ChatbotProps> = (props) => {
           }}
           onClose={() => setShowInfoModal(false)}
           open={showInfoModal}
-          size={activeChat?.currentMode === chatModeLables.entity_vector ? 'large' : 'medium'}
+          size={activeChat?.currentMode === chatModeLables['entity search+vector'] ? 'large' : 'medium'}
         >
           <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
             <IconButton

diff --git a/frontend/src/components/ChatBot/ChunkInfo.tsx b/frontend/src/components/ChatBot/ChunkInfo.tsx
@@ -60,8 +60,8 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
                         </Typography>
                       </>
                     </div>
-                    {mode !== chatModeLables.global_vector &&
-                      mode !== chatModeLables.entity_vector &&
+                    {mode !== chatModeLables['global search+vector+fulltext'] &&
+                      mode !== chatModeLables['entity search+vector'] &&
                       mode !== chatModeLables.graph &&
                       chunk.score && (
                         <Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
@@ -71,11 +71,10 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
                     </div>
                     <div>
                       <TextLink
-                       as='medium'
                         label='Graph view'
                         className={`${loadingGraphView ? 'cursor-wait' : 'cursor-pointer'}`}
                         onClick={() => handleChunkClick(chunk.element_id, 'Chunk')}
-                      >{'Graph'}
+                      >{'View Graph'}
                       </TextLink>
                     </div>
                   </>
@@ -92,14 +91,13 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
                         </Typography>
                       </TextLink>
                     </div>
-                    {mode !== chatModeLables.global_vector &&
-                      mode !== chatModeLables.entity_vector &&
+                    {mode !== chatModeLables['global search+vector+fulltext'] &&
+                      mode !== chatModeLables['entity search+vector'] &&
                       mode !== chatModeLables.graph && (
                         <>
                           <Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
                           <div>
                             <TextLink
-                             as='small'
                              className={`${loadingGraphView ? 'cursor-wait' : 'cursor-pointer'}`}
                               label='Graph view'
                               onClick={() => handleChunkClick(chunk.element_id, 'Chunk')}
@@ -115,18 +113,17 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
                       <img src={wikipedialogo} width={20} height={20} className='mr-2' />
                       <Typography variant='subheading-medium'>{chunk?.fileName}</Typography>
                     </div>
-                    {mode !== chatModeLables.global_vector &&
-                      mode !== chatModeLables.entity_vector &&
+                    {mode !== chatModeLables['global search+vector+fulltext'] &&
+                      mode !== chatModeLables['entity search+vector'] &&
                       mode !== chatModeLables.graph && (
                         <>
                           <Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
                           <div>
                             <TextLink
-                             as='medium'
                              className={`${loadingGraphView ? 'cursor-wait' : 'cursor-pointer'}`}
                               label='Graph view'
                               onClick={() => handleChunkClick(chunk.element_id, 'Chunk')}
-                            >{'Graph'}
+                            >{'View Graph'}
                             </TextLink>
                           </div>
                         </>
@@ -138,18 +135,17 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
                       <img src={gcslogo} width={20} height={20} className='mr-2' />
                       <Typography variant='subheading-medium'>{chunk?.fileName}</Typography>
                     </div>
-                    {mode !== chatModeLables.global_vector &&
-                      mode !== chatModeLables.entity_vector &&
+                    {mode !== chatModeLables['global search+vector+fulltext'] &&
+                      mode !== chatModeLables['entity search+vector'] &&
                       mode !== chatModeLables.graph && (
                         <>
                           <Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
                           <div>
                             <TextLink
-                             as='medium'
                              className={`${loadingGraphView ? 'cursor-wait' : 'cursor-pointer'}`}
                               label='Graph view'
                               onClick={() => handleChunkClick(chunk.element_id, 'Chunk')}
-                            >{'Graph'}
+                            >{'View Graph'}
                             </TextLink>
                           </div>
                         </>
@@ -161,18 +157,17 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
                       <img src={s3logo} width={20} height={20} className='mr-2' />
                       <Typography variant='subheading-medium'>{chunk?.fileName}</Typography>
                     </div>
-                    {mode !== chatModeLables.global_vector &&
-                      mode !== chatModeLables.entity_vector &&
+                    {mode !== chatModeLables['global search+vector+fulltext'] &&
+                      mode !== chatModeLables['entity search+vector'] &&
                       mode !== chatModeLables.graph && (
                         <>
                           <Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
                           <div>
                             <TextLink
-                             as='medium'
                              className={`${loadingGraphView ? 'cursor-wait' : 'cursor-pointer'}`}
                               label='Graph view'
                               onClick={() => handleChunkClick(chunk.element_id, 'Chunk')}
-                            >{'Graph'}
+                            >{'View Graph'}
                             </TextLink>
                           </div>
                         </>
@@ -188,18 +183,17 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
                         <Typography variant='body-medium'>{chunk?.url}</Typography>
                       </TextLink>
                     </div>
-                    {mode !== chatModeLables.global_vector &&
-                      mode !== chatModeLables.entity_vector &&
+                    {mode !== chatModeLables['global search+vector+fulltext'] &&
+                      mode !== chatModeLables['entity search+vector'] &&
                       mode !== chatModeLables.graph && (
                         <>
                           <Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
                           <div>
                             <TextLink
-                             as='medium'
                              className={`${loadingGraphView ? 'cursor-wait' : 'cursor-pointer'}`}
                               label='Graph view'
                               onClick={() => handleChunkClick(chunk.element_id, 'Chunk')}
-                            >{'Graph'}
+                            >{'View Graph'}
                             </TextLink>
                           </div>
                         </>
@@ -227,11 +221,10 @@ const ChunkInfo: FC<ChunkProps> = ({ loading, chunks, mode }) => {
                         </Typography>
                         <div>
                           <TextLink
-                           as='medium'
                            className={`${loadingGraphView ? 'cursor-wait' : 'cursor-pointer'}`}
                             label='Graph view'
                             onClick={() => handleChunkClick(chunk.element_id, 'Chunk')}
-                          >{'Graph'}
+                          >{'View Graph'}
                           </TextLink>
                         </div>
                       </>

diff --git a/frontend/src/components/ChatBot/CommunitiesInfo.tsx b/frontend/src/components/ChatBot/CommunitiesInfo.tsx
@@ -47,7 +47,7 @@ const CommunitiesInfo: FC<CommunitiesProps> = ({ loading, communities, mode }) =
                       onClick={() => handleCommunityClick(community.element_id, 'chatInfoView')}
                     >{`ID : ${community.id}`}</TextLink>
                   </Flex>
-                  {mode === chatModeLables.global_vector && community.score && (
+                  {mode === chatModeLables['global search+vector+fulltext'] && community.score && (
                     <Flex flexDirection='row' gap='2'>
                       <Typography variant='subheading-medium'>Score : </Typography>
                       <Typography variant='subheading-medium'>{community.score}</Typography>

diff --git a/frontend/src/components/ChatBot/SourcesInfo.tsx b/frontend/src/components/ChatBot/SourcesInfo.tsx
@@ -16,10 +16,9 @@ const filterUniqueChunks = (chunks: Chunk[]) => {
     const sourceCheck = `${chunk.fileName}-${chunk.fileSource}`;
     if (chunkSource.has(sourceCheck)) {
       return false;
-    } 
-      chunkSource.add(sourceCheck);
-      return true;
-
+    }
+    chunkSource.add(sourceCheck);
+    return true;
   });
 };