Tooltip and other UI fixes

README.md

@@ -78,7 +78,7 @@ If none of the mode is mentioned in the chat modes variable all modes will be av
 CHAT_MODES=""
 ```
 
-If however you want to specifiy the only vector mode or only graph mode you can do that by specifying the mode in the env:
+If however you want to specify the only vector mode or only graph mode you can do that by specifying the mode in the env:
 ```env
 CHAT_MODES="vector,graph+vector"
 ```
@@ -154,12 +154,7 @@ Allow unauthenticated request : Yes
 | GOOGLE_CLIENT_ID        | Optional           |               | Client ID for Google authentication                                                              |
 | GCS_FILE_CACHE        | Optional           | False              | If set to True, will save the files to process into GCS. If set to False, will save the files locally   |
 | ENTITY_EMBEDDING        | Optional           | False              | If set to True, It will add embeddings for each entity in database |
-| LLM_MODEL_CONFIG_azure_ai_<azure_deployment_name>        | Optional           |              | Set azure config as - azure_deployment_name,azure_endpoint or base_url,azure_api_key,api_version|
-| LLM_MODEL_CONFIG_groq_<model_name>        | Optional           |               | Set groq config as - model_name,base_url,groq_api_key |
-| LLM_MODEL_CONFIG_anthropic_<model_name>        | Optional           |               | Set anthropic config as - model_name,anthropic_api_key |
-| LLM_MODEL_CONFIG_fireworks_<model_name>        | Optional           |               | Set fireworks config as - model_name,fireworks_api_key |
-| LLM_MODEL_CONFIG_bedrock_<model_name>        | Optional           |               | Set bedrock config as - model_name,aws_access_key_id,aws_secret__access_key,region_name |
-| LLM_MODEL_CONFIG_ollama_<model_name>        | Optional           |               | Set ollama config as - model_name,model_local_url |
+| LLM_MODEL_CONFIG_ollama_<model_name>        | Optional           |               | Set ollama config as - model_name,model_local_url for local deployments |
 
 
 
@@ -187,4 +182,4 @@ Allow unauthenticated request : Yes
 For any inquiries or support, feel free to raise [Github Issue](https://github.com/neo4j-labs/llm-graph-builder/issues)
 
 
-## Happy Graph Building!
+## Happy Graph Building!

backend/src/graphDB_dataAccess.py

@@ -212,7 +212,6 @@ def delete_file_from_graph(self, filenames, source_types, deleteEntities:str, me
         else :
             result = self.execute_query(query_to_delete_document, param)    
             logging.info(f"Deleting {len(filename_list)} documents = '{filename_list}' from '{source_types_list}' with their entities from database")
-
         return result, len(filename_list)
 
     def list_unconnected_nodes(self):

frontend/src/App.css

@@ -347,14 +347,13 @@
   margin-bottom: 0 !important;
 }
 
-.node_label__value-container--has-value {
+.node_label__value-container--has-value ,.relationship_label__value-container--has-value{
   max-height: 215px;
   overflow-y: scroll !important;
   scrollbar-width: thin;
 }
-
-.relationship_label__value-container--has-value {
-  max-height: 215px;
+.entity_extraction_Tab_node_label__value-container--has-value,.entity_extraction_Tab_relationship_label__value-container--has-value{
+  max-height: 100px;
   overflow-y: scroll !important;
-  scrollbar-width: thin
-}
+  scrollbar-width: thin;
+}

frontend/src/components/ChatBot/ChatInfoModal.tsx

@@ -8,6 +8,7 @@ import {
   CypherCodeBlock,
   CypherCodeBlockProps,
   useCopyToClipboard,
+  Banner,
 } from '@neo4j-ndl/react';
 import { DocumentDuplicateIconOutline, DocumentTextIconOutline } from '@neo4j-ndl/react/icons';
 import '../../styling/info.css';
@@ -39,8 +40,9 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
   mode,
   cypher_query,
   graphonly_entities,
+  error,
 }) => {
-  const [activeTab, setActiveTab] = useState<number>(mode === 'graph' ? 4 : 3);
+  const [activeTab, setActiveTab] = useState<number>(error.length ? 10 : mode === 'graph' ? 4 : 3);
   const [infoEntities, setInfoEntities] = useState<Entity[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
   const { userCredentials } = useCredentials();
@@ -80,7 +82,7 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
     [copiedText, cypher_query]
   );
   useEffect(() => {
-    if (mode != 'graph') {
+    if (mode != 'graph' || error?.trim() !== '') {
       setLoading(true);
       chunkEntitiesAPI(userCredentials as UserCredentials, chunk_ids.map((c) => c.id).join(','))
         .then((response) => {
@@ -107,7 +109,7 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
     () => {
       setcopiedText(false);
     };
-  }, [chunk_ids, mode]);
+  }, [chunk_ids, mode, error]);
   const groupedEntities = useMemo<{ [key: string]: GroupedEntity }>(() => {
     return infoEntities.reduce((acc, entity) => {
       const { label, text } = parseEntity(entity);
@@ -159,16 +161,20 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
           </Typography>
         </Box>
       </Box>
-      <Tabs size='large' fill='underline' onChange={onChangeTabs} value={activeTab}>
-        {mode != 'graph' ? <Tabs.Tab tabId={3}>Sources used</Tabs.Tab> : <></>}
-        {mode === 'graph+vector' || mode === 'graph' ? <Tabs.Tab tabId={4}>Top Entities used</Tabs.Tab> : <></>}
-        {mode === 'graph' && cypher_query?.trim().length ? (
-          <Tabs.Tab tabId={6}>Generated Cypher Query</Tabs.Tab>
-        ) : (
-          <></>
-        )}
-        {mode != 'graph' ? <Tabs.Tab tabId={5}>Chunks</Tabs.Tab> : <></>}
-      </Tabs>
+      {error?.length > 0 ? (
+        <Banner type='danger'>{error}</Banner>
+      ) : (
+        <Tabs size='large' fill='underline' onChange={onChangeTabs} value={activeTab}>
+          {mode != 'graph' ? <Tabs.Tab tabId={3}>Sources used</Tabs.Tab> : <></>}
+          {mode === 'graph+vector' || mode === 'graph' ? <Tabs.Tab tabId={4}>Top Entities used</Tabs.Tab> : <></>}
+          {mode === 'graph' && cypher_query?.trim().length ? (
+            <Tabs.Tab tabId={6}>Generated Cypher Query</Tabs.Tab>
+          ) : (
+            <></>
+          )}
+          {mode != 'graph' ? <Tabs.Tab tabId={5}>Chunks</Tabs.Tab> : <></>}
+        </Tabs>
+      )}
       <Flex className='p-4'>
         <Tabs.TabPanel className='n-flex n-flex-col n-gap-token-4 n-p-token-6' value={activeTab} tabId={3}>
           {sources.length ? (
@@ -210,17 +216,6 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
                             </Typography>
                           </div>
                         )}
-                        {link?.startsWith('s3://') && (
-                          <div className='flex flex-row inline-block justify-between items-center'>
-                            <img src={s3logo} width={20} height={20} className='mr-2' alt='S3 Logo' />
-                            <Typography
-                              variant='body-medium'
-                              className='text-ellipsis whitespace-nowrap overflow-hidden max-w-lg'
-                            >
-                              {decodeURIComponent(link).split('/').at(-1) ?? 'S3 File'}
-                            </Typography>
-                          </div>
-                        )}
                         {youtubeLinkValidation(link) && (
                           <>
                             <div className='flex flex-row inline-block justiy-between items-center'>
@@ -250,6 +245,16 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
                             </div>
                           )}
                       </>
+                    ) : link?.startsWith('s3://') ? (
+                      <div className='flex flex-row inline-block justify-between items-center'>
+                        <img src={s3logo} width={20} height={20} className='mr-2' alt='S3 Logo' />
+                        <Typography
+                          variant='body-medium'
+                          className='text-ellipsis whitespace-nowrap overflow-hidden max-w-lg'
+                        >
+                          {decodeURIComponent(link).split('/').at(-1) ?? 'S3 File'}
+                        </Typography>
+                      </div>
                     ) : (
                       <div className='flex flex-row inline-block justify-between items-center'>
                         <DocumentTextIconOutline className='n-size-token-7 mr-2' />
@@ -385,6 +390,7 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
                           <img src={s3logo} width={20} height={20} className='mr-2' />
                           <Typography variant='subheading-medium'>{chunk?.fileName}</Typography>
                         </div>
+                        <Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
                       </>
                     ) : chunk?.url &&
                       !chunk?.url.startsWith('s3://') &&
@@ -400,6 +406,10 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
                         </div>
                         <Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
                       </>
+                    ) : chunk.fileSource === 'local file' ? (
+                      <>
+                        <Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
+                      </>
                     ) : (
                       <></>
                     )}