From 8ddf04a9048d89075cf818f1e60d6fa1b87f19d6 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Thu, 17 Jul 2025 03:08:01 +0530
Subject: [PATCH] (feat:chunks) use common header, navigate

---
 frontend/src/components/DocumentChunks.tsx    | 48 +++++++--------
 frontend/src/components/FileTreeComponent.tsx | 59 +++++++++++--------
 2 files changed, 59 insertions(+), 48 deletions(-)

diff --git a/frontend/src/components/DocumentChunks.tsx b/frontend/src/components/DocumentChunks.tsx
index f619afb0..90718473 100644
--- a/frontend/src/components/DocumentChunks.tsx
+++ b/frontend/src/components/DocumentChunks.tsx
@@ -151,39 +151,39 @@ const DocumentChunks: React.FC<DocumentChunksProps> = ({
 
   return (
     <div className="mt-8 flex flex-col">
-      <div className="mb-4 flex items-center">
-        {showHeader && (
+      {showHeader && (
+        <div className="mb-4 flex items-center">
           <button
             className="mr-3 flex h-[29px] w-[29px] items-center justify-center rounded-full border p-2 text-sm text-gray-400 dark:border-0 dark:bg-[#28292D] dark:text-gray-500 dark:hover:bg-[#2E2F34]"
             onClick={handleGoBack}
           >
             <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
           </button>
-        )}
 
-        <div className="flex items-center">
-          <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5" />
-          <span className="text-[#7D54D1] font-semibold text-base leading-6">
-            {documentName}
-          </span>
+          <div className="flex items-center">
+            <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5" />
+            <span className="text-[#7D54D1] font-semibold text-base leading-6">
+              {documentName}
+            </span>
 
-          {pathParts.length > 0 && (
-            <>
-              <span className="mx-1 text-gray-500">/</span>
-              {pathParts.map((part, index) => (
-                <React.Fragment key={index}>
-                  <span className="font-normal text-base leading-6 text-gray-700 dark:text-gray-300">
-                    {part}
-                  </span>
-                  {index < pathParts.length - 1 && (
-                    <span className="mx-1 text-gray-500">/</span>
-                  )}
-                </React.Fragment>
-              ))}
-            </>
-          )}
+            {pathParts.length > 0 && (
+              <>
+                <span className="mx-1 text-gray-500">/</span>
+                {pathParts.map((part, index) => (
+                  <React.Fragment key={index}>
+                    <span className="font-normal text-base leading-6 text-gray-700 dark:text-gray-300">
+                      {part}
+                    </span>
+                    {index < pathParts.length - 1 && (
+                      <span className="mx-1 text-gray-500">/</span>
+                    )}
+                  </React.Fragment>
+                ))}
+              </>
+            )}
+          </div>
         </div>
-      </div>
+      )}
 
       <div className="my-3 flex items-center justify-between gap-3">
         <div className="flex-1 flex items-center border border-[#D1D9E0] dark:border-[#6A6A6A] rounded-md overflow-hidden h-[38px]">
diff --git a/frontend/src/components/FileTreeComponent.tsx b/frontend/src/components/FileTreeComponent.tsx
index d4252064..170c4cb9 100644
--- a/frontend/src/components/FileTreeComponent.tsx
+++ b/frontend/src/components/FileTreeComponent.tsx
@@ -114,7 +114,9 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
   };
 
   const handleBackNavigation = () => {
-    if (currentPath.length === 0) {
+    if (selectedFile) {
+      setSelectedFile(null);
+    } else if (currentPath.length === 0) {
       if (onBackToDocuments) {
         onBackToDocuments();
       }
@@ -187,7 +189,7 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
         >
           <img src={ArrowLeft} alt="left-arrow" className="h-3 w-3" />
         </button>
-
+  
         <div className="flex items-center">
           <img src={OutlineSource} alt="source" className="mr-2 h-5 w-5" />
           <span className="text-purple-30 font-medium">{sourceName}</span>
@@ -206,6 +208,14 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
               ))}
             </>
           )}
+          {selectedFile && (
+            <>
+              <span className="mx-1 text-gray-500">/</span>
+              <span className="text-gray-700 dark:text-gray-300">
+                {selectedFile.name}
+              </span>
+            </>
+          )}
         </div>
       </div>
     );
@@ -243,26 +253,26 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
     const parentRow =
       currentPath.length > 0
         ? [
-            <tr
-              key="parent-dir"
-              className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
-              onClick={navigateUp}
-            >
-              <td className="px-4 py-2">
-                <div className="flex items-center">
-                  <img
-                    src={FolderIcon}
-                    alt="Parent folder"
-                    className="mr-2 h-4 w-4"
-                  />
-                  <span className="text-sm dark:text-[#E0E0E0]">..</span>
-                </div>
-              </td>
-              <td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">-</td>
-              <td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">-</td>
-              <td className="w-10 px-4 py-2 text-sm"></td>
-            </tr>,
-          ]
+          <tr
+            key="parent-dir"
+            className="cursor-pointer border-b border-[#D1D9E0] hover:bg-[#ECEEEF] dark:border-[#6A6A6A] dark:hover:bg-[#27282D]"
+            onClick={navigateUp}
+          >
+            <td className="px-4 py-2">
+              <div className="flex items-center">
+                <img
+                  src={FolderIcon}
+                  alt="Parent folder"
+                  className="mr-2 h-4 w-4"
+                />
+                <span className="text-sm dark:text-[#E0E0E0]">..</span>
+              </div>
+            </td>
+            <td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">-</td>
+            <td className="px-4 py-2 text-sm dark:text-[#E0E0E0]">-</td>
+            <td className="w-10 px-4 py-2 text-sm"></td>
+          </tr>,
+        ]
         : [];
 
     // Render directories first, then files
@@ -377,16 +387,17 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
 
   return (
     <>
+      <div className="mb-4">{renderPathNavigation()}</div>
       {selectedFile ? (
         <DocumentChunks
           documentId={docId}
-          documentName={selectedFile.name}
+          documentName={sourceName}
           handleGoBack={() => setSelectedFile(null)}
           path={selectedFile.id}
+          showHeader={false}
         />
       ) : (
         <div className="mt-8 flex flex-col">
-          <div className="mb-4">{renderPathNavigation()}</div>
 
           <div className="overflow-x-auto rounded-[6px] border border-[#D1D9E0] dark:border-[#6A6A6A]">
             <table className="min-w-full table-fixed bg-transparent">