From 1695f19c8802c7d26e0aacd3793595f8ada5c884 Mon Sep 17 00:00:00 2001
From: Prakriti Solankey <156313631+prakriti-solankey@users.noreply.github.com>
Date: Wed, 18 Sep 2024 18:41:07 +0530
Subject: [PATCH] Graph communities (#748)

* UI changes

* modes enable disable

* separated sources entities chunk communities

* communities added into separate component

* Update ChatInfoModal.tsx

* added filename and source for chunksinfo

* removed the console.log

* mode disable changes

---------

Co-authored-by: kartikpersistent <101251502+kartikpersistent@users.noreply.github.com>
---
 backend/src/chunkid_entities.py               |   3 +
 frontend/src/App.css                          |   2 +-
 .../src/components/ChatBot/ChatInfoModal.tsx  | 413 ++----------------
 .../src/components/ChatBot/ChatModeToggle.tsx |  64 +--
 frontend/src/components/ChatBot/ChunkInfo.tsx | 127 ++++++
 .../src/components/ChatBot/Communities.tsx    |  36 ++
 .../src/components/ChatBot/EntitiesInfo.tsx   |  91 ++++
 .../src/components/ChatBot/SourcesInfo.tsx    | 139 ++++++
 frontend/src/types.ts                         |  24 +
 frontend/src/utils/Utils.ts                   |  11 +
 10 files changed, 508 insertions(+), 402 deletions(-)
 create mode 100644 frontend/src/components/ChatBot/ChunkInfo.tsx
 create mode 100644 frontend/src/components/ChatBot/Communities.tsx
 create mode 100644 frontend/src/components/ChatBot/EntitiesInfo.tsx
 create mode 100644 frontend/src/components/ChatBot/SourcesInfo.tsx

diff --git a/backend/src/chunkid_entities.py b/backend/src/chunkid_entities.py
index 53a0544f6..3fd3c3a71 100644
--- a/backend/src/chunkid_entities.py
+++ b/backend/src/chunkid_entities.py
@@ -135,6 +135,9 @@ def process_entityids(driver, chunk_ids):
             logging.info(f"Nodes and relationships are processed")
             result["chunk_data"] = records[0]["chunks"]
             result["community_data"] = records[0]["communities"]
+        else:
+            result["chunk_data"] = list()
+            result["community_data"] = list()
         logging.info(f"Query process completed successfully for chunk ids: {chunk_ids}")
         return result
     except Exception as e:
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 615b8559b..e912a05e2 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -385,5 +385,5 @@
 
 .custom-menu {
   min-width: 250px;
-  max-width: 300px;
+  max-width: 305px;
 }
\ No newline at end of file
diff --git a/frontend/src/components/ChatBot/ChatInfoModal.tsx b/frontend/src/components/ChatBot/ChatInfoModal.tsx
index 192b37407..82fa25e26 100644
--- a/frontend/src/components/ChatBot/ChatInfoModal.tsx
+++ b/frontend/src/components/ChatBot/ChatInfoModal.tsx
@@ -1,48 +1,36 @@
 import {
   Box,
   Typography,
-  TextLink,
   Flex,
   Tabs,
-  LoadingSpinner,
   CypherCodeBlock,
   CypherCodeBlockProps,
   useCopyToClipboard,
   Banner,
   useMediaQuery,
 } from '@neo4j-ndl/react';
-import {
-  DocumentDuplicateIconOutline,
-  DocumentTextIconOutline,
-  ClipboardDocumentCheckIconOutline,
-  GlobeAltIconOutline,
-} from '@neo4j-ndl/react/icons';
+import { DocumentDuplicateIconOutline, ClipboardDocumentCheckIconOutline } from '@neo4j-ndl/react/icons';
 import '../../styling/info.css';
 import Neo4jRetrievalLogo from '../../assets/images/Neo4jRetrievalLogo.png';
-import wikipedialogo from '../../assets/images/wikipedia.svg';
-import youtubelogo from '../../assets/images/youtube.svg';
-import gcslogo from '../../assets/images/gcs.webp';
-import s3logo from '../../assets/images/s3logo.png';
 import {
   Chunk,
   Community,
   Entity,
   ExtendedNode,
   ExtendedRelationship,
-  GroupedEntity,
   UserCredentials,
   chatInfoMessage,
 } from '../../types';
 import { useContext, useEffect, useMemo, useState } from 'react';
-import HoverableLink from '../UI/HoverableLink';
 import GraphViewButton from '../Graph/GraphViewButton';
 import { chunkEntitiesAPI } from '../../services/ChunkEntitiesInfo';
 import { useCredentials } from '../../context/UserCredentials';
-import { calcWordColor } from '@neo4j-devtools/word-color';
-import ReactMarkdown from 'react-markdown';
-import { getLogo, parseEntity, youtubeLinkValidation } from '../../utils/Utils';
 import { ThemeWrapperContext } from '../../context/ThemeWrapper';
 import { tokens } from '@neo4j-ndl/base';
+import ChunkInfo from './ChunkInfo';
+import EntitiesInfo from './EntitiesInfo';
+import SourcesInfo from './SourcesInfo';
+import CommunitiesInfo from './Communities';
 
 const ChatInfoModal: React.FC<chatInfoMessage> = ({
   sources,
@@ -106,8 +94,13 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
           if (response.data.status === 'Failure') {
             throw new Error(response.data.error);
           }
+          const nodesData = response?.data?.data?.nodes;
+          const relationshipsData = response?.data?.data?.relationships;
+          const communitiesData = response?.data?.data?.community_data;
+          const chunksData = response?.data?.data?.chunk_data;
+
           setInfoEntities(
-            response.data.data.nodes.map((n: Entity) => {
+            nodesData.map((n: Entity) => {
               if (!n.labels.length && mode === 'entity search+vector') {
                 return {
                   ...n,
@@ -118,30 +111,34 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
             })
           );
           setNodes(
-            response.data.data.nodes.map((n: ExtendedNode) => {
+            nodesData.map((n: ExtendedNode) => {
               if (!n.labels.length && mode === 'entity search+vector') {
                 return {
                   ...n,
                   labels: ['Entity'],
                 };
               }
-              return n;
+              return n ?? [];
             })
           );
-          setRelationships(response.data.data.relationships);
-          setCommunities(response.data.data.community_data);
-          const chunks = response.data.data.chunk_data.map((chunk: any) => {
-            const chunkScore = chunk_ids.find((chunkdetail) => chunkdetail.id === chunk.id);
-            return {
-              ...chunk,
-              score: chunkScore?.score,
-            };
-          });
-          const sortedchunks = chunks.sort((a: any, b: any) => b.score - a.score);
-          setChunks(sortedchunks);
+          setRelationships(relationshipsData ?? []);
+          setCommunities(communitiesData ?? []);
+          setChunks(
+            chunksData
+              .map((chunk: any) => {
+                const chunkScore = chunk_ids.find((chunkdetail) => chunkdetail.id === chunk.id);
+                return (
+                  {
+                    ...chunk,
+                    score: chunkScore?.score,
+                  } ?? []
+                );
+              })
+              .sort((a: any, b: any) => b.score - a.score)
+          );
           setLoading(false);
         } catch (error) {
-          console.error('Error fetching entities:', error);
+          console.error('Error fetching information:', error);
           setLoading(false);
         }
       })();
@@ -151,50 +148,10 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
     };
   }, [chunk_ids, mode, error]);
 
-  const groupedEntities = useMemo<{ [key: string]: GroupedEntity }>(() => {
-    const items = infoEntities.reduce((acc, entity) => {
-      const { label, text } = parseEntity(entity);
-      if (!acc[label]) {
-        console.log({ label, text });
-        const newColor = calcWordColor(label);
-        acc[label] = { texts: new Set(), color: newColor };
-      }
-      acc[label].texts.add(text);
-      return acc;
-    }, {} as Record<string, { texts: Set<string>; color: string }>);
-    return items;
-  }, [infoEntities]);
-
   const onChangeTabs = (tabId: number) => {
     setActiveTab(tabId);
   };
 
-  const labelCounts = useMemo(() => {
-    const counts: { [label: string]: number } = {};
-    for (let index = 0; index < infoEntities?.length; index++) {
-      const entity = infoEntities[index];
-      const { labels } = entity;
-      const [label] = labels;
-      counts[label] = counts[label] ? counts[label] + 1 : 1;
-    }
-    return counts;
-  }, [infoEntities]);
-
-  const sortedLabels = useMemo(() => {
-    return Object.keys(labelCounts).sort((a, b) => labelCounts[b] - labelCounts[a]);
-  }, [labelCounts]);
-
-  const generateYouTubeLink = (url: string, startTime: string) => {
-    try {
-      const urlObj = new URL(url);
-      urlObj.searchParams.set('t', startTime);
-      return urlObj.toString();
-    } catch (error) {
-      console.error('Invalid URL:', error);
-      return '';
-    }
-  };
-
   return (
     <Box className='n-bg-palette-neutral-bg-weak p-4'>
       <Box className='flex flex-row pb-6 items-center mb-2'>
@@ -237,290 +194,18 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
       )}
       <Flex className='p-4'>
         <Tabs.TabPanel className='n-flex n-flex-col n-gap-token-4 n-p-token-6' value={activeTab} tabId={3}>
-          {loading ? (
-            <Box className='flex justify-center items-center'>
-              <LoadingSpinner size='small' />
-            </Box>
-          ) : mode === 'entity search+vector' && chunks?.length ? (
-            <ul>
-              {chunks
-                .map((c) => ({ fileName: c.fileName, fileSource: c.fileSource }))
-                .map((s, index) => {
-                  return (
-                    <li key={index} className='flex flex-row inline-block justify-between items-center p-2'>
-                      <div className='flex flex-row inline-block justify-between items-center'>
-                        {s.fileSource === 'local file' ? (
-                          <DocumentTextIconOutline className='n-size-token-7 mr-2' />
-                        ) : (
-                          <img
-                            src={getLogo(themeUtils.colorMode)[s.fileSource]}
-                            width={20}
-                            height={20}
-                            className='mr-2'
-                          />
-                        )}
-                        <Typography
-                          variant='body-medium'
-                          className='text-ellipsis whitespace-nowrap overflow-hidden max-w-lg'
-                        >
-                          {s.fileName}
-                        </Typography>
-                      </div>
-                    </li>
-                  );
-                })}
-            </ul>
-          ) : sources?.length ? (
-            <ul className='list-class list-none'>
-              {sources.map((link, index) => {
-                return (
-                  <li key={index} className='flex flex-row inline-block justify-between items-center p-2'>
-                    {link?.startsWith('http') || link?.startsWith('https') ? (
-                      <>
-                        {link?.includes('wikipedia.org') && (
-                          <div className='flex flex-row inline-block justify-between items-center'>
-                            <img src={wikipedialogo} width={20} height={20} className='mr-2' alt='Wikipedia Logo' />
-                            <TextLink href={link} externalLink={true}>
-                              <HoverableLink url={link}>
-                                <Typography
-                                  variant='body-medium'
-                                  className='text-ellipsis whitespace-nowrap overflow-hidden max-w-lg'
-                                >
-                                  {link}
-                                </Typography>
-                              </HoverableLink>
-                            </TextLink>
-                          </div>
-                        )}
-                        {link?.includes('storage.googleapis.com') && (
-                          <div className='flex flex-row inline-block justify-between items-center'>
-                            <img
-                              src={gcslogo}
-                              width={20}
-                              height={20}
-                              className='mr-2'
-                              alt='Google Cloud Storage Logo'
-                            />
-                            <Typography
-                              variant='body-medium'
-                              className='text-ellipsis whitespace-nowrap overflow-hidden max-w-lg'
-                            >
-                              {decodeURIComponent(link).split('/').at(-1)?.split('?')[0] ?? 'GCS File'}
-                            </Typography>
-                          </div>
-                        )}
-                        {youtubeLinkValidation(link) && (
-                          <>
-                            <div className='flex flex-row inline-block justiy-between items-center'>
-                              <img src={youtubelogo} width={20} height={20} className='mr-2' />
-                              <TextLink href={link} externalLink={true}>
-                                <HoverableLink url={link}>
-                                  <Typography
-                                    variant='body-medium'
-                                    className='text-ellipsis whitespace-nowrap overflow-hidden max-w-lg'
-                                  >
-                                    {link}
-                                  </Typography>
-                                </HoverableLink>
-                              </TextLink>
-                            </div>
-                          </>
-                        )}
-                        {!link?.startsWith('s3://') &&
-                          !link?.includes('storage.googleapis.com') &&
-                          !link?.includes('wikipedia.org') &&
-                          !link?.includes('youtube.com') && (
-                            <div className='flex flex-row inline-block justify-between items-center'>
-                              <GlobeAltIconOutline className='n-size-token-7' />
-                              <TextLink href={link} externalLink={true}>
-                                <Typography variant='body-medium'>{link}</Typography>
-                              </TextLink>
-                            </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' />
-                        <Typography
-                          variant='body-medium'
-                          className='text-ellipsis whitespace-nowrap overflow-hidden max-w-lg'
-                        >
-                          {link}
-                        </Typography>
-                      </div>
-                    )}
-                  </li>
-                );
-              })}
-            </ul>
-          ) : (
-            <span className='h6 text-center'>No Sources Found</span>
-          )}
+          <SourcesInfo loading={loading} sources={sources} mode={mode} chunks={chunks} />
         </Tabs.TabPanel>
         <Tabs.TabPanel className='n-flex n-flex-col n-gap-token-4 n-p-token-6' value={activeTab} tabId={4}>
-          {loading ? (
-            <Box className='flex justify-center items-center'>
-              <LoadingSpinner size='small' />
-            </Box>
-          ) : Object.keys(groupedEntities)?.length > 0 || Object.keys(graphonly_entities)?.length > 0 ? (
-            <ul className='list-none p-4 max-h-80 overflow-auto'>
-              {mode == 'graph'
-                ? graphonly_entities.map((label, index) => (
-                    <li
-                      key={index}
-                      className='flex items-center mb-2 text-ellipsis whitespace-nowrap max-w-[100%)] overflow-hidden'
-                    >
-                      <div style={{ backgroundColor: calcWordColor(Object.keys(label)[0]) }} className='legend mr-2'>
-                        {
-                          // @ts-ignore
-                          label[Object.keys(label)[0]].id ?? Object.keys(label)[0]
-                        }
-                      </div>
-                    </li>
-                  ))
-                : sortedLabels.map((label, index) => {
-                    const entity = groupedEntities[label == 'undefined' ? 'Entity' : label];
-                    return (
-                      <li
-                        key={index}
-                        className='flex items-center mb-2 text-ellipsis whitespace-nowrap max-w-[100%)] overflow-hidden'
-                      >
-                        <div key={index} style={{ backgroundColor: `${entity.color}` }} className='legend mr-2'>
-                          {label} ({labelCounts[label]})
-                        </div>
-                        <Typography
-                          className='entity-text text-ellipsis whitespace-nowrap max-w-[calc(100%-120px)] overflow-hidden'
-                          variant='body-medium'
-                        >
-                          {Array.from(entity.texts).slice(0, 3).join(', ')}
-                        </Typography>
-                      </li>
-                    );
-                  })}
-            </ul>
-          ) : (
-            <span className='h6 text-center'>No Entities Found</span>
-          )}
+          <EntitiesInfo
+            loading={loading}
+            mode={mode}
+            graphonly_entities={graphonly_entities}
+            infoEntities={infoEntities}
+          />
         </Tabs.TabPanel>
         <Tabs.TabPanel className='n-flex n-flex-col n-gap-token-4 n-p-token-6' value={activeTab} tabId={5}>
-          {loading ? (
-            <Box className='flex justify-center items-center'>
-              <LoadingSpinner size='small' />
-            </Box>
-          ) : chunks?.length > 0 ? (
-            <div className='p-4 h-80 overflow-auto'>
-              <ul className='list-disc list-inside'>
-                {chunks.map((chunk) => (
-                  <li key={chunk.id} className='mb-2'>
-                    {chunk?.page_number ? (
-                      <>
-                        <div className='flex flex-row inline-block justiy-between items-center'>
-                          <DocumentTextIconOutline className='w-4 h-4 inline-block mr-2' />
-                          <Typography
-                            variant='subheading-medium'
-                            className='text-ellipsis whitespace-nowrap max-w-[calc(100%-200px)] overflow-hidden'
-                          >
-                            {/* {chunk?.fileName}, Page: {chunk?.page_number} */}
-                            {chunk?.fileName}
-                          </Typography>
-                        </div>
-                        <Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
-                      </>
-                    ) : chunk?.url && chunk?.start_time ? (
-                      <>
-                        <div className='flex flex-row inline-block justiy-between items-center'>
-                          <img src={youtubelogo} width={20} height={20} className='mr-2' />
-                          <TextLink href={generateYouTubeLink(chunk?.url, chunk?.start_time)} externalLink={true}>
-                            <Typography
-                              variant='body-medium'
-                              className='text-ellipsis whitespace-nowrap overflow-hidden max-w-lg'
-                            >
-                              {chunk?.fileName}
-                            </Typography>
-                          </TextLink>
-                        </div>
-                        <Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
-                      </>
-                    ) : chunk?.url && chunk?.url.includes('wikipedia.org') ? (
-                      <>
-                        <div className='flex flex-row inline-block justiy-between items-center'>
-                          <img src={wikipedialogo} 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.includes('storage.googleapis.com') ? (
-                      <>
-                        <div className='flex flex-row inline-block justiy-between items-center'>
-                          <img src={gcslogo} 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://') ? (
-                      <>
-                        <div className='flex flex-row inline-block justiy-between items-center'>
-                          <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://') &&
-                      !chunk?.url.includes('storage.googleapis.com') &&
-                      !chunk?.url.includes('wikipedia.org') &&
-                      !chunk?.url.includes('youtube.com') ? (
-                      <>
-                        <div className='flex flex-row inline-block items-center'>
-                          <GlobeAltIconOutline className='n-size-token-7' />
-                          <TextLink href={chunk?.url} externalLink={true}>
-                            <Typography variant='body-medium'>{chunk?.url}</Typography>
-                          </TextLink>
-                        </div>
-                        <Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
-                      </>
-                    ) : (
-                      <>
-                        <div className='flex flex-row inline-block items-center'>
-                          {chunk.fileSource === 'local file' ? (
-                            <DocumentTextIconOutline className='n-size-token-7 mr-2' />
-                          ) : (
-                            <img
-                              src={getLogo(themeUtils.colorMode)[chunk.fileSource]}
-                              width={20}
-                              height={20}
-                              className='mr-2'
-                            />
-                          )}
-                          <Typography
-                            variant='body-medium'
-                            className='text-ellipsis whitespace-nowrap overflow-hidden max-w-lg'
-                          >
-                            {chunk.fileName}
-                          </Typography>
-                        </div>
-                      </>
-                    )}
-                    <span>
-                      Text: <ReactMarkdown>{chunk?.text}</ReactMarkdown>
-                    </span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          ) : (
-            <span className='h6 text-center'>No Chunks Found</span>
-          )}
+          <ChunkInfo chunks={chunks} loading={loading} />
         </Tabs.TabPanel>
         <Tabs.TabPanel value={activeTab} tabId={6}>
           <CypherCodeBlock
@@ -532,28 +217,8 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
           />
         </Tabs.TabPanel>
         {mode === 'entity search+vector' ? (
-          <Tabs.TabPanel value={activeTab} tabId={7}>
-            {loading ? (
-              <Box className='flex justify-center items-center'>
-                <LoadingSpinner size='small' />
-              </Box>
-            ) : (
-              <div className='p-4 h-80 overflow-auto'>
-                <ul className='list-disc list-inside'>
-                  {communities.map((community, index) => (
-                    <li key={`${community.id}${index}`} className='mb-2'>
-                      <div>
-                        <Flex flexDirection='row' gap='2'>
-                          <Typography variant='subheading-medium'>ID : </Typography>
-                          <Typography variant='subheading-medium'>{community.id}</Typography>
-                        </Flex>
-                        <ReactMarkdown>{community.summary}</ReactMarkdown>
-                      </div>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            )}
+          <Tabs.TabPanel className='n-flex n-flex-col n-gap-token-4 n-p-token-6' value={activeTab} tabId={7}>
+            <CommunitiesInfo loading={loading} communities={communities} />
           </Tabs.TabPanel>
         ) : (
           <></>
diff --git a/frontend/src/components/ChatBot/ChatModeToggle.tsx b/frontend/src/components/ChatBot/ChatModeToggle.tsx
index a0ebe879a..293706910 100644
--- a/frontend/src/components/ChatBot/ChatModeToggle.tsx
+++ b/frontend/src/components/ChatBot/ChatModeToggle.tsx
@@ -8,7 +8,7 @@ import { capitalizeWithPlus } from '../../utils/Utils';
 import { useCredentials } from '../../context/UserCredentials';
 export default function ChatModeToggle({
   menuAnchor,
-  closeHandler = () => {},
+  closeHandler = () => { },
   open,
   anchorPortal = true,
   disableBackdrop = false,
@@ -19,7 +19,7 @@ export default function ChatModeToggle({
   anchorPortal?: boolean;
   disableBackdrop?: boolean;
 }) {
-  const { setchatMode, chatMode, postProcessingTasks } = useFileContext();
+  const { setchatMode, chatMode, postProcessingTasks, selectedRows } = useFileContext();
   const isCommunityAllowed = postProcessingTasks.includes('create_communities');
   const { isGdsActive } = useCredentials();
   const memoizedChatModes = useMemo(() => {
@@ -27,34 +27,44 @@ export default function ChatModeToggle({
       ? chatModes
       : chatModes?.filter((m) => !m.mode.includes('entity search+vector'));
   }, [isGdsActive, isCommunityAllowed]);
+
+
   const menuItems = useMemo(() => {
-    return memoizedChatModes?.map((m) => ({
-      title: (
-        <div>
-          <Typography variant='subheading-small'>
-            {m.mode.includes('+') ? capitalizeWithPlus(m.mode) : capitalize(m.mode)}
-          </Typography>
+    return memoizedChatModes?.map((m) => {
+      const isDisabled = Boolean(selectedRows.length && !(m.mode === 'vector' || m.mode === 'graph+vector'));
+      return {
+        title: (
           <div>
-            <Typography variant='body-small'>{m.description}</Typography>
+            <Typography variant='subheading-small'>
+              {m.mode.includes('+') ? capitalizeWithPlus(m.mode) : capitalize(m.mode)}
+            </Typography>
+            <div>
+              <Typography variant='body-small'>{m.description}</Typography>
+            </div>
           </div>
-        </div>
-      ),
-      onClick: () => {
-        setchatMode(m.mode);
-        closeHandler(); // Close the menu after setting the chat mode
-      },
-      disabledCondition: false,
-      description: (
-        <span>
-          {chatMode === m.mode && (
-            <>
-              <StatusIndicator type='success' /> Selected
-            </>
-          )}
-        </span>
-      ),
-    }));
-  }, [chatMode, memoizedChatModes, setchatMode, closeHandler]);
+        ),
+        onClick: () => {
+          setchatMode(m.mode);
+          closeHandler();
+        },
+        disabledCondition: isDisabled,
+        description: (
+          <span>
+            {chatMode === m.mode && (
+              <>
+                <StatusIndicator type='success' /> Selected
+              </>
+            )}
+            {isDisabled && (
+              <>
+                <StatusIndicator type='warning' /> Chatmode not available
+              </>
+            )}
+          </span>
+        ),
+      };
+    });
+  }, [chatMode, memoizedChatModes, setchatMode, closeHandler, selectedRows]);
   return (
     <CustomMenu
       closeHandler={closeHandler}
diff --git a/frontend/src/components/ChatBot/ChunkInfo.tsx b/frontend/src/components/ChatBot/ChunkInfo.tsx
new file mode 100644
index 000000000..eb7b435bb
--- /dev/null
+++ b/frontend/src/components/ChatBot/ChunkInfo.tsx
@@ -0,0 +1,127 @@
+import { FC, useContext } from 'react';
+import { ChunkProps } from '../../types';
+import { Box, LoadingSpinner, TextLink, Typography } from '@neo4j-ndl/react';
+import { DocumentTextIconOutline, GlobeAltIconOutline } from '@neo4j-ndl/react/icons';
+import wikipedialogo from '../../assets/images/wikipedia.svg';
+import youtubelogo from '../../assets/images/youtube.svg';
+import gcslogo from '../../assets/images/gcs.webp';
+import s3logo from '../../assets/images/s3logo.png';
+import ReactMarkdown from 'react-markdown';
+import { generateYouTubeLink, getLogo } from '../../utils/Utils';
+import { ThemeWrapperContext } from '../../context/ThemeWrapper';
+
+const ChunkInfo: FC<ChunkProps> = ({ loading, chunks }) => {
+  const themeUtils = useContext(ThemeWrapperContext);
+
+  return (
+    <>
+      {loading ? (
+        <Box className='flex justify-center items-center'>
+          <LoadingSpinner size='small' />
+        </Box>
+      ) : chunks?.length > 0 ? (
+        <div className='p-4 h-80 overflow-auto'>
+          <ul className='list-disc list-inside'>
+            {chunks.map((chunk) => (
+              <li key={chunk.id} className='mb-2'>
+                {chunk?.page_number ? (
+                  <>
+                    <div className='flex flex-row inline-block justiy-between items-center'>
+                      <DocumentTextIconOutline className='w-4 h-4 inline-block mr-2' />
+                      <Typography
+                        variant='subheading-medium'
+                        className='text-ellipsis whitespace-nowrap max-w-[calc(100%-200px)] overflow-hidden'
+                      >
+                        {chunk?.fileName}
+                      </Typography>
+                    </div>
+                    <Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
+                  </>
+                ) : chunk?.url && chunk?.start_time ? (
+                  <>
+                    <div className='flex flex-row inline-block justiy-between items-center'>
+                      <img src={youtubelogo} width={20} height={20} className='mr-2' />
+                      <TextLink href={generateYouTubeLink(chunk?.url, chunk?.start_time)} externalLink={true}>
+                        <Typography
+                          variant='body-medium'
+                          className='text-ellipsis whitespace-nowrap overflow-hidden max-w-lg'
+                        >
+                          {chunk?.fileName}
+                        </Typography>
+                      </TextLink>
+                    </div>
+                    <Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
+                  </>
+                ) : chunk?.url && chunk?.url.includes('wikipedia.org') ? (
+                  <>
+                    <div className='flex flex-row inline-block justiy-between items-center'>
+                      <img src={wikipedialogo} 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.includes('storage.googleapis.com') ? (
+                  <>
+                    <div className='flex flex-row inline-block justiy-between items-center'>
+                      <img src={gcslogo} 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://') ? (
+                  <>
+                    <div className='flex flex-row inline-block justiy-between items-center'>
+                      <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://') &&
+                  !chunk?.url.includes('storage.googleapis.com') &&
+                  !chunk?.url.includes('wikipedia.org') &&
+                  !chunk?.url.includes('youtube.com') ? (
+                  <>
+                    <div className='flex flex-row inline-block items-center'>
+                      <GlobeAltIconOutline className='n-size-token-7' />
+                      <TextLink href={chunk?.url} externalLink={true}>
+                        <Typography variant='body-medium'>{chunk?.url}</Typography>
+                      </TextLink>
+                    </div>
+                    <Typography variant='subheading-small'>Similarity Score: {chunk?.score}</Typography>
+                  </>
+                ) : (
+                  <>
+                    <div className='flex flex-row inline-block items-center'>
+                      {chunk.fileSource === 'local file' ? (
+                        <DocumentTextIconOutline className='n-size-token-7 mr-2' />
+                      ) : (
+                        <img
+                          src={getLogo(themeUtils.colorMode)[chunk.fileSource]}
+                          width={20}
+                          height={20}
+                          className='mr-2'
+                        />
+                      )}
+                      <Typography
+                        variant='body-medium'
+                        className='text-ellipsis whitespace-nowrap overflow-hidden max-w-lg'
+                      >
+                        {chunk.fileName}
+                      </Typography>
+                    </div>
+                  </>
+                )}
+                <ReactMarkdown>{chunk?.text}</ReactMarkdown>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : (
+        <span className='h6 text-center'> No Chunks Found</span>
+      )}
+    </>
+  );
+};
+
+export default ChunkInfo;
diff --git a/frontend/src/components/ChatBot/Communities.tsx b/frontend/src/components/ChatBot/Communities.tsx
new file mode 100644
index 000000000..9b530fd0f
--- /dev/null
+++ b/frontend/src/components/ChatBot/Communities.tsx
@@ -0,0 +1,36 @@
+import { Box, LoadingSpinner, Flex, Typography } from '@neo4j-ndl/react';
+import { FC } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { CommunitiesProps } from '../../types';
+
+const CommunitiesInfo: FC<CommunitiesProps> = ({ loading, communities }) => {
+  return (
+    <>
+      {loading ? (
+        <Box className='flex justify-center items-center'>
+          <LoadingSpinner size='small' />
+        </Box>
+      ) : communities?.length > 0 ? (
+        <div className='p-4 h-80 overflow-auto'>
+          <ul className='list-disc list-inside'>
+            {communities.map((community, index) => (
+              <li key={`${community.id}${index}`} className='mb-2'>
+                <div>
+                  <Flex flexDirection='row' gap='2'>
+                    <Typography variant='subheading-medium'>ID : </Typography>
+                    <Typography variant='subheading-medium'>{community.id}</Typography>
+                  </Flex>
+                  <ReactMarkdown>{community.summary}</ReactMarkdown>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : (
+        <span className='h6 text-center'> No Communities Found</span>
+      )}
+    </>
+  );
+};
+
+export default CommunitiesInfo;
diff --git a/frontend/src/components/ChatBot/EntitiesInfo.tsx b/frontend/src/components/ChatBot/EntitiesInfo.tsx
new file mode 100644
index 000000000..6c6e0784e
--- /dev/null
+++ b/frontend/src/components/ChatBot/EntitiesInfo.tsx
@@ -0,0 +1,91 @@
+import { Box, GraphLabel, LoadingSpinner, Typography } from '@neo4j-ndl/react';
+import { FC, useMemo } from 'react';
+import { EntitiesProps, GroupedEntity } from '../../types';
+import { calcWordColor } from '@neo4j-devtools/word-color';
+import { graphLabels } from '../../utils/Constants';
+import { parseEntity } from '../../utils/Utils';
+
+const EntitiesInfo: FC<EntitiesProps> = ({ loading, mode, graphonly_entities, infoEntities }) => {
+  const groupedEntities = useMemo<{ [key: string]: GroupedEntity }>(() => {
+    const items = infoEntities.reduce((acc, entity) => {
+      const { label, text } = parseEntity(entity);
+      if (!acc[label]) {
+        const newColor = calcWordColor(label);
+        acc[label] = { texts: new Set(), color: newColor };
+      }
+      acc[label].texts.add(text);
+      return acc;
+    }, {} as Record<string, { texts: Set<string>; color: string }>);
+    return items;
+  }, [infoEntities]);
+
+  const labelCounts = useMemo(() => {
+    const counts: { [label: string]: number } = {};
+    for (let index = 0; index < infoEntities?.length; index++) {
+      const entity = infoEntities[index];
+      const { labels } = entity;
+      const [label] = labels;
+      counts[label] = counts[label] ? counts[label] + 1 : 1;
+    }
+    return counts;
+  }, [infoEntities]);
+
+  const sortedLabels = useMemo(() => {
+    return Object.keys(labelCounts).sort((a, b) => labelCounts[b] - labelCounts[a]);
+  }, [labelCounts]);
+  return (
+    <>
+      {loading ? (
+        <Box className='flex justify-center items-center'>
+          <LoadingSpinner size='small' />
+        </Box>
+      ) : Object.keys(groupedEntities)?.length > 0 || Object.keys(graphonly_entities)?.length > 0 ? (
+        <ul className='list-none p-4 max-h-80 overflow-auto'>
+          {mode == 'graph'
+            ? graphonly_entities.map((label, index) => (
+                <li
+                  key={index}
+                  className='flex items-center mb-2 text-ellipsis whitespace-nowrap max-w-[100%)] overflow-hidden'
+                >
+                  <div style={{ backgroundColor: calcWordColor(Object.keys(label)[0]) }} className='legend mr-2'>
+                    {
+                      // @ts-ignore
+                      label[Object.keys(label)[0]].id ?? Object.keys(label)[0]
+                    }
+                  </div>
+                </li>
+              ))
+            : sortedLabels.map((label, index) => {
+                const entity = groupedEntities[label == 'undefined' ? 'Entity' : label];
+                return (
+                  <li
+                    key={index}
+                    className='flex items-center mb-2 text-ellipsis whitespace-nowrap max-w-[100%)] overflow-hidden'
+                  >
+                    <GraphLabel
+                      type='node'
+                      className='legend'
+                      color={`${entity.color}`}
+                      selected={false}
+                      onClick={(e) => e.preventDefault()}
+                    >
+                      {label === '__Community__' ? graphLabels.community : label} ({labelCounts[label]})
+                    </GraphLabel>
+                    <Typography
+                      className='ml-2  text-ellipsis whitespace-nowrap max-w-[calc(100%-120px)] overflow-hidden'
+                      variant='body-medium'
+                    >
+                      {Array.from(entity.texts).slice(0, 3).join(', ')}
+                    </Typography>
+                  </li>
+                );
+              })}
+        </ul>
+      ) : (
+        <span className='h6 text-center'>No Entities Found</span>
+      )}
+    </>
+  );
+};
+
+export default EntitiesInfo;
diff --git a/frontend/src/components/ChatBot/SourcesInfo.tsx b/frontend/src/components/ChatBot/SourcesInfo.tsx
new file mode 100644
index 000000000..fd5d89949
--- /dev/null
+++ b/frontend/src/components/ChatBot/SourcesInfo.tsx
@@ -0,0 +1,139 @@
+import { FC, useContext } from 'react';
+import { SourcesProps } from '../../types';
+import { Box, LoadingSpinner, TextLink, Typography } from '@neo4j-ndl/react';
+import { DocumentTextIconOutline, GlobeAltIconOutline } from '@neo4j-ndl/react/icons';
+import { getLogo, youtubeLinkValidation } from '../../utils/Utils';
+import { ThemeWrapperContext } from '../../context/ThemeWrapper';
+import HoverableLink from '../UI/HoverableLink';
+import wikipedialogo from '../../assets/images/wikipedia.svg';
+import youtubelogo from '../../assets/images/youtube.svg';
+import gcslogo from '../../assets/images/gcs.webp';
+import s3logo from '../../assets/images/s3logo.png';
+
+const SourcesInfo: FC<SourcesProps> = ({ loading, mode, chunks, sources }) => {
+  const themeUtils = useContext(ThemeWrapperContext);
+  return (
+    <>
+      {loading ? (
+        <Box className='flex justify-center items-center'>
+          <LoadingSpinner size='small' />
+        </Box>
+      ) : mode === 'entity search+vector' && chunks?.length ? (
+        <ul>
+          {chunks
+            .map((c) => ({ fileName: c.fileName, fileSource: c.fileSource }))
+            .map((s, index) => {
+              return (
+                <li key={index} className='flex flex-row inline-block justify-between items-center p-2'>
+                  <div className='flex flex-row inline-block justify-between items-center'>
+                    {s.fileSource === 'local file' ? (
+                      <DocumentTextIconOutline className='n-size-token-7 mr-2' />
+                    ) : (
+                      <img src={getLogo(themeUtils.colorMode)[s.fileSource]} width={20} height={20} className='mr-2' />
+                    )}
+                    <Typography
+                      variant='body-medium'
+                      className='text-ellipsis whitespace-nowrap overflow-hidden max-w-lg'
+                    >
+                      {s.fileName}
+                    </Typography>
+                  </div>
+                </li>
+              );
+            })}
+        </ul>
+      ) : sources?.length ? (
+        <ul className='list-class list-none'>
+          {sources.map((link, index) => {
+            return (
+              <li key={index} className='flex flex-row inline-block justify-between items-center p-2'>
+                {link?.startsWith('http') || link?.startsWith('https') ? (
+                  <>
+                    {link?.includes('wikipedia.org') && (
+                      <div className='flex flex-row inline-block justify-between items-center'>
+                        <img src={wikipedialogo} width={20} height={20} className='mr-2' alt='Wikipedia Logo' />
+                        <TextLink href={link} externalLink={true}>
+                          <HoverableLink url={link}>
+                            <Typography
+                              variant='body-medium'
+                              className='text-ellipsis whitespace-nowrap overflow-hidden max-w-lg'
+                            >
+                              {link}
+                            </Typography>
+                          </HoverableLink>
+                        </TextLink>
+                      </div>
+                    )}
+                    {link?.includes('storage.googleapis.com') && (
+                      <div className='flex flex-row inline-block justify-between items-center'>
+                        <img src={gcslogo} width={20} height={20} className='mr-2' alt='Google Cloud Storage Logo' />
+                        <Typography
+                          variant='body-medium'
+                          className='text-ellipsis whitespace-nowrap overflow-hidden max-w-lg'
+                        >
+                          {decodeURIComponent(link).split('/').at(-1)?.split('?')[0] ?? 'GCS File'}
+                        </Typography>
+                      </div>
+                    )}
+                    {youtubeLinkValidation(link) && (
+                      <>
+                        <div className='flex flex-row inline-block justiy-between items-center'>
+                          <img src={youtubelogo} width={20} height={20} className='mr-2' />
+                          <TextLink href={link} externalLink={true}>
+                            <HoverableLink url={link}>
+                              <Typography
+                                variant='body-medium'
+                                className='text-ellipsis whitespace-nowrap overflow-hidden max-w-lg'
+                              >
+                                {link}
+                              </Typography>
+                            </HoverableLink>
+                          </TextLink>
+                        </div>
+                      </>
+                    )}
+                    {!link?.startsWith('s3://') &&
+                      !link?.includes('storage.googleapis.com') &&
+                      !link?.includes('wikipedia.org') &&
+                      !link?.includes('youtube.com') && (
+                        <div className='flex flex-row inline-block justify-between items-center'>
+                          <GlobeAltIconOutline className='n-size-token-7' />
+                          <TextLink href={link} externalLink={true}>
+                            <Typography variant='body-medium'>{link}</Typography>
+                          </TextLink>
+                        </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' />
+                    <Typography
+                      variant='body-medium'
+                      className='text-ellipsis whitespace-nowrap overflow-hidden max-w-lg'
+                    >
+                      {link}
+                    </Typography>
+                  </div>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      ) : (
+        <span className='h6 text-center'>No Sources Found</span>
+      )}
+    </>
+  );
+};
+
+export default SourcesInfo;
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 679756dd9..9631335a9 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -644,3 +644,27 @@ export interface DatabaseStatusProps {
   isGdsActive: boolean;
   uri: string | null;
 }
+
+export type SourcesProps = {
+  loading: boolean;
+  mode: string;
+  sources: string[];
+  chunks: Chunk[];
+};
+
+export type ChunkProps = {
+  loading: boolean;
+  chunks: Chunk[];
+};
+
+export type EntitiesProps = {
+  loading: boolean;
+  mode: string;
+  graphonly_entities: [];
+  infoEntities: Entity[];
+};
+
+export type CommunitiesProps = {
+  loading: boolean;
+  communities: Community[];
+};
diff --git a/frontend/src/utils/Utils.ts b/frontend/src/utils/Utils.ts
index b59c082fd..82a7cda3e 100644
--- a/frontend/src/utils/Utils.ts
+++ b/frontend/src/utils/Utils.ts
@@ -449,3 +449,14 @@ export const getLogo = (mode: string): Record<string, string> => {
     'gcs bucket': gcslogo,
   };
 };
+
+export const generateYouTubeLink = (url: string, startTime: string) => {
+  try {
+    const urlObj = new URL(url);
+    urlObj.searchParams.set('t', startTime);
+    return urlObj.toString();
+  } catch (error) {
+    console.error('Invalid URL:', error);
+    return '';
+  }
+};