Multiple chat modes selection (#780)

* added Multi modes selection

* multimodes state mangement

* fix: state handling of chat details of the default mode

* Added the ChatModeSwitch Component

* modes switch statemangement

* added the chatmodes switch in both view

* removed the copied text

* Handled the error scenario

* fix: speech issue between modes

* fix: Handled activespeech speech and othermessage modes switch

* used requestanimationframe instead of setTimeOut

* removed the commented code

Author: kartikpersistent

backend/score.py

@@ -323,7 +323,7 @@ async def chat_bot(uri=Form(),model=Form(None),userName=Form(), password=Form(),
         message="Unable to get chat response"
         error_message = str(e)
         logging.exception(f'Exception in chat bot:{error_message}')
-        return create_api_response(job_status, message=message, error=error_message)
+        return create_api_response(job_status, message=message, error=error_message,data=mode)
     finally:
         gc.collect()
 

frontend/src/assets/ChatbotMessages.json

@@ -1,40 +1,15 @@
 {
   "listMessages": [
-    {
-      "id": 1,
-      "message": "Hi, I need help with creating a Cypher query for Neo4j.",
-      "user": "user",
-      "datetime": "01/01/2024 00:00:00"
-    },
     {
       "id": 2,
-      "message": " Welcome to the Neo4j Knowledge Graph Chat. You can ask questions related to documents which have been completely processed.",
-      "user": "chatbot",
-      "datetime": "01/01/2024 00:00:00"
-    },
-    {
-      "id": 3,
-      "message": "I need to find all employees who work in the IT department.",
-      "user": "user",
-      "datetime": "01/01/2024 00:00:00"
-    },
-    {
-      "id": 4,
-      "message": "Alright, you can use the following query: `MATCH (e:Employee)-[:WORKS_IN]->(d:Department {name: 'IT'}) RETURN e.name`. This query matches nodes labeled 'Employee' related to the 'IT' department and returns their names.",
-      "user": "chatbot",
-      "datetime": "01/01/2024 00:00:00"
-    },
-    {
-      "id": 5,
-      "message": "Thanks! And how do I get the total number of such employees?",
-      "user": "user",
-      "datetime": "01/01/2024 00:00:00"
-    },
-    {
-      "id": 6,
-      "message": "To get the count, use: `MATCH (e:Employee)-[:WORKS_IN]->(d:Department {name: 'IT'}) RETURN count(e)`. This counts all the distinct 'Employee' nodes related to the 'IT' department.",
+      "modes":{
+        "graph+vector+fulltext":{
+          "message": " Welcome to the Neo4j Knowledge Graph Chat. You can ask questions related to documents which have been completely processed."
+        }
+      },
       "user": "chatbot",
-      "datetime": "01/01/2024 00:00:00"
+      "datetime": "01/01/2024 00:00:00",
+      "currentMode":"graph+vector+fulltext"
     }
   ]
 }

frontend/src/components/ChatBot/ChatModeToggle.tsx

@@ -2,10 +2,11 @@ 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 } from '../../utils/Constants';
+import { chatModeLables, chatModes as AvailableModes } from '../../utils/Constants';
 import { capitalize } from '@mui/material';
 import { capitalizeWithPlus } from '../../utils/Utils';
 import { useCredentials } from '../../context/UserCredentials';
+
 export default function ChatModeToggle({
   menuAnchor,
   closeHandler = () => {},
@@ -19,22 +20,22 @@ export default function ChatModeToggle({
   anchorPortal?: boolean;
   disableBackdrop?: boolean;
 }) {
-  const { setchatMode, chatMode, postProcessingTasks, selectedRows } = useFileContext();
+  const { setchatModes, chatModes, postProcessingTasks, selectedRows } = useFileContext();
   const isCommunityAllowed = postProcessingTasks.includes('enable_communities');
   const { isGdsActive } = useCredentials();
 
   useEffect(() => {
     // If rows are selected, the mode is valid (either vector or graph+vector)
     if (selectedRows.length > 0) {
-      if (!(chatMode === chatModeLables.vector || chatMode === chatModeLables.graph_vector)) {
-        setchatMode(chatModeLables.graph_vector);
+      if (!(chatModes.includes(chatModeLables.vector) || chatModes.includes(chatModeLables.graph_vector))) {
+        setchatModes([chatModeLables.graph_vector]);
       }
     }
-  }, [selectedRows.length, chatMode, setchatMode]);
+  }, [selectedRows.length, chatModes.length]);
   const memoizedChatModes = useMemo(() => {
     return isGdsActive && isCommunityAllowed
-      ? chatModes
-      : chatModes?.filter(
+      ? AvailableModes
+      : AvailableModes?.filter(
           (m) => !m.mode.includes(chatModeLables.entity_vector) && !m.mode.includes(chatModeLables.global_vector)
         );
   }, [isGdsActive, isCommunityAllowed]);
@@ -45,9 +46,11 @@ export default function ChatModeToggle({
       );
       const handleModeChange = () => {
         if (isDisabled) {
-          setchatMode(chatModeLables.graph_vector);
+          setchatModes([chatModeLables.graph_vector]);
+        } else if (chatModes.includes(m.mode)) {
+          setchatModes((prev) => prev.filter((i) => i != m.mode));
         } else {
-          setchatMode(m.mode);
+          setchatModes((prev) => [...prev, m.mode]);
         }
         closeHandler();
       };
@@ -66,7 +69,7 @@ export default function ChatModeToggle({
         disabledCondition: isDisabled,
         description: (
           <span>
-            {chatMode === m.mode && (
+            {chatModes.includes(m.mode) && (
               <>
                 <StatusIndicator type='success' /> {chatModeLables.selected}
               </>
@@ -80,13 +83,13 @@ export default function ChatModeToggle({
         ),
       };
     });
-  }, [chatMode, memoizedChatModes, setchatMode, closeHandler, selectedRows]);
+  }, [chatModes.length, memoizedChatModes, closeHandler, selectedRows]);
 
   useEffect(() => {
-    if (!selectedRows.length && !chatMode) {
-      setchatMode(chatModeLables.graph_vector_fulltext);
+    if (!selectedRows.length && !chatModes.length) {
+      setchatModes([chatModeLables.graph_vector_fulltext]);
     }
-  }, [setchatMode, selectedRows.length, chatMode]);
+  }, [selectedRows.length, chatModes.length]);
   return (
     <CustomMenu
       closeHandler={closeHandler}

frontend/src/components/ChatBot/ChatModesSwitch.tsx

@@ -0,0 +1,47 @@
+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';
+
+export default function ChatModesSwitch({
+  switchToOtherMode,
+  currentModeIndex,
+  modescount,
+  currentMode,
+  isFullScreen,
+}: {
+  switchToOtherMode: (index: number) => void;
+  currentModeIndex: number;
+  modescount: number;
+  currentMode: string;
+  isFullScreen: boolean;
+}) {
+  const chatmodetoshow = currentMode.includes('+') ? capitalizeWithPlus(currentMode) : capitalize(currentMode);
+  return (
+    <Flex flexDirection='row' gap='1' alignItems='center'>
+      <IconButton
+        disabled={currentModeIndex === 0}
+        size='small'
+        clean
+        onClick={() => switchToOtherMode(currentModeIndex - 1)}
+      >
+        <ChevronLeftIconSolid />
+      </IconButton>
+      <TipWrapper tooltip={chatmodetoshow} placement='top'>
+        <span
+          className={`n-body-medium  ${!isFullScreen ? 'max-w-[50px] text-ellipsis text-nowrap overflow-hidden' : ''}`}
+        >
+          {chatmodetoshow}
+        </span>
+      </TipWrapper>
+      <IconButton
+        disabled={currentModeIndex === modescount - 1}
+        size='small'
+        clean
+        onClick={() => switchToOtherMode(currentModeIndex + 1)}
+      >
+        <ChevronRightIconSolid />
+      </IconButton>
+    </Flex>
+  );
+}