Implement Chunks Page and Update SearchPage Component

- Introduced a new ChunksPage component to display chunks of a selected file, enhancing the knowledge management functionality.
- Updated the SearchPage component to navigate to the ChunksPage when a file is selected, improving user flow.
- Removed the previous file selection logic and integrated a more streamlined approach for chunk display.
- Enhanced UI elements for better user experience and accessibility.

frontend/src/app/knowledge/chunks/page.tsx

@@ -0,0 +1,212 @@
+"use client";
+
+import {
+  Building2,
+  Cloud,
+  FileText,
+  HardDrive,
+  Loader2,
+  Search,
+} from "lucide-react";
+import { Suspense, useCallback, useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { SiGoogledrive } from "react-icons/si";
+import { TbBrandOnedrive } from "react-icons/tb";
+import { ProtectedRoute } from "@/components/protected-route";
+import { Button } from "@/components/ui/button";
+import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
+import { useTask } from "@/contexts/task-context";
+import {
+  type ChunkResult,
+  type File,
+  useGetSearchQuery,
+} from "../../api/queries/useGetSearchQuery";
+
+// Function to get the appropriate icon for a connector type
+function getSourceIcon(connectorType?: string) {
+  switch (connectorType) {
+    case "google_drive":
+      return <SiGoogledrive className="h-4 w-4 text-foreground" />;
+    case "onedrive":
+      return <TbBrandOnedrive className="h-4 w-4 text-foreground" />;
+    case "sharepoint":
+      return <Building2 className="h-4 w-4 text-foreground" />;
+    case "s3":
+      return <Cloud className="h-4 w-4 text-foreground" />;
+    default:
+      return <HardDrive className="h-4 w-4 text-muted-foreground" />;
+  }
+}
+
+function ChunksPageContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { isMenuOpen } = useTask();
+  const { parsedFilterData, isPanelOpen } = useKnowledgeFilter();
+
+  const filename = searchParams.get("filename");
+  const [chunks, setChunks] = useState<ChunkResult[]>([]);
+
+  // Use the same search query as the knowledge page, but we'll filter for the specific file
+  const { data = [], isFetching } = useGetSearchQuery("*", parsedFilterData);
+
+  // Extract chunks for the specific file
+  useEffect(() => {
+    if (!filename || !(data as File[]).length) {
+      setChunks([]);
+      return;
+    }
+
+    const fileData = (data as File[]).find(
+      (file: File) => file.filename === filename
+    );
+    setChunks(fileData?.chunks || []);
+  }, [data, filename]);
+
+  const handleBack = useCallback(() => {
+    router.back();
+  }, [router]);
+
+  if (!filename) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-center">
+          <Search className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+          <p className="text-lg text-muted-foreground">No file specified</p>
+          <p className="text-sm text-muted-foreground/70 mt-2">
+            Please select a file from the knowledge page
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`fixed inset-0 md:left-72 top-[53px] flex flex-col transition-all duration-300 ${
+        isMenuOpen && isPanelOpen
+          ? "md:right-[704px]"
+          : // Both open: 384px (menu) + 320px (KF panel)
+          isMenuOpen
+          ? "md:right-96"
+          : // Only menu open: 384px
+          isPanelOpen
+          ? "md:right-80"
+          : // Only KF panel open: 320px
+            "md:right-6" // Neither open: 24px
+      }`}
+    >
+      <div className="flex-1 flex flex-col min-h-0 px-6 py-6">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-3">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleBack}
+              className="text-muted-foreground hover:text-foreground px-2"
+            >
+              ← Back
+            </Button>
+            <div className="flex flex-col">
+              <h2 className="text-lg font-semibold">Document Chunks</h2>
+              <p className="text-sm text-muted-foreground truncate max-w-md">
+                {decodeURIComponent(filename)}
+              </p>
+            </div>
+          </div>
+          <div className="text-sm text-muted-foreground">
+            {!isFetching && chunks.length > 0 && (
+              <span>
+                {chunks.length} chunk{chunks.length !== 1 ? "s" : ""} found
+              </span>
+            )}
+          </div>
+        </div>
+
+        {/* Content Area - matches knowledge page structure */}
+        <div className="flex-1 overflow-auto">
+          {isFetching ? (
+            <div className="flex items-center justify-center h-64">
+              <div className="text-center">
+                <Loader2 className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50 animate-spin" />
+                <p className="text-lg text-muted-foreground">
+                  Loading chunks...
+                </p>
+              </div>
+            </div>
+          ) : chunks.length === 0 ? (
+            <div className="flex items-center justify-center h-64">
+              <div className="text-center">
+                <Search className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+                <p className="text-lg text-muted-foreground">No chunks found</p>
+                <p className="text-sm text-muted-foreground/70 mt-2">
+                  This file may not have been indexed yet
+                </p>
+              </div>
+            </div>
+          ) : (
+            <div className="space-y-4 pb-6">
+              {chunks.map((chunk, index) => (
+                <div
+                  key={chunk.filename + index}
+                  className="bg-muted/20 rounded-lg p-4 border border-border/50"
+                >
+                  <div className="flex items-center justify-between mb-2">
+                    <div className="flex items-center gap-2">
+                      <FileText className="h-4 w-4 text-blue-400" />
+                      <span className="font-medium truncate">
+                        {chunk.filename}
+                      </span>
+                      {chunk.connector_type && (
+                        <div className="ml-2">
+                          {getSourceIcon(chunk.connector_type)}
+                        </div>
+                      )}
+                    </div>
+                    <span className="text-xs text-green-400 bg-green-400/20 px-2 py-1 rounded">
+                      {chunk.score.toFixed(2)}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-4 text-sm text-muted-foreground mb-3">
+                    <span>{chunk.mimetype}</span>
+                    <span>Page {chunk.page}</span>
+                    {chunk.owner_name && <span>Owner: {chunk.owner_name}</span>}
+                  </div>
+                  <p className="text-sm text-foreground/90 leading-relaxed">
+                    {chunk.text}
+                  </p>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ChunksPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex items-center justify-center h-64">
+          <div className="text-center">
+            <Loader2 className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50 animate-spin" />
+            <p className="text-lg text-muted-foreground">Loading...</p>
+          </div>
+        </div>
+      }
+    >
+      <ChunksPageContent />
+    </Suspense>
+  );
+}
+
+export default function ProtectedChunksPage() {
+  return (
+    <ProtectedRoute>
+      <ChunksPage />
+    </ProtectedRoute>
+  );
+}

frontend/src/app/knowledge/page.tsx

@@ -3,7 +3,6 @@
 import {
   Building2,
   Cloud,
-  FileText,
   HardDrive,
   Loader2,
   Search,
@@ -17,6 +16,7 @@ import {
   useState,
   useRef,
 } from "react";
+import { useRouter } from "next/navigation";
 import { SiGoogledrive } from "react-icons/si";
 import { TbBrandOnedrive } from "react-icons/tb";
 import { KnowledgeDropdown } from "@/components/knowledge-dropdown";
@@ -51,11 +51,11 @@ function getSourceIcon(connectorType?: string) {
 }
 
 function SearchPage() {
+  const router = useRouter();
   const { isMenuOpen } = useTask();
   const { parsedFilterData, isPanelOpen } = useKnowledgeFilter();
   const [query, setQuery] = useState("");
   const [queryInputText, setQueryInputText] = useState("");
-  const [selectedFile, setSelectedFile] = useState<string | null>(null);
   const [selectedRows, setSelectedRows] = useState<File[]>([]);
   const [showBulkDeleteDialog, setShowBulkDeleteDialog] = useState(false);
 
@@ -104,8 +104,13 @@ function SearchPage() {
             <div
               className="flex items-center gap-2 cursor-pointer hover:text-blue-600 transition-colors"
               onClick={e => {
+                e.preventDefault();
                 e.stopPropagation();
-                setSelectedFile(data?.filename ?? "");
+                router.push(
+                  `/knowledge/chunks?filename=${encodeURIComponent(
+                    data?.filename ?? ""
+                  )}`
+                );
               }}
             >
               {getSourceIcon(data?.connector_type)}
@@ -147,13 +152,13 @@ function SearchPage() {
     {
       field: "chunkCount",
       headerName: "Chunks",
-      flex: 1,
+      flex: 2,
       minWidth: 70,
     },
     {
       field: "avgScore",
       headerName: "Avg score",
-      flex: 1,
+      flex: 2,
       minWidth: 90,
       cellRenderer: ({ value }: CustomCellRendererProps<File>) => {
         return (
@@ -297,78 +302,31 @@ function SearchPage() {
             </Button>
           </form>
         </div>
-        {selectedFile ? (
+        <AgGridReact
-          // Show chunks for selected file
+          className="w-full overflow-auto"
-          <>
+          columnDefs={columnDefs}
-            <div className="flex items-center gap-2 mb-4">
+          defaultColDef={defaultColDef}
-              <Button
+          loading={isFetching}
-                variant="ghost"
+          ref={gridRef}
-                size="sm"
+          rowData={fileResults}
-                onClick={() => setSelectedFile(null)}
+          rowSelection="multiple"
-              >
+          rowMultiSelectWithClick={false}
-                ← Back to files
+          suppressRowClickSelection={true}
-              </Button>
+          getRowId={params => params.data.filename}
-              <span className="text-sm text-muted-foreground">
+          onSelectionChanged={onSelectionChanged}
-                Chunks from {selectedFile}
+          suppressHorizontalScroll={false}
-              </span>
+          noRowsOverlayComponent={() => (
+            <div className="text-center">
+              <Search className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
+              <p className="text-lg text-muted-foreground">
+                No documents found
+              </p>
+              <p className="text-sm text-muted-foreground/70 mt-2">
+                Try adjusting your search terms
+              </p>
             </div>
-            {fileResults
+          )}
-              .filter(file => file.filename === selectedFile)
+        />
-              .flatMap(file => file.chunks)
-              .map((chunk, index) => (
-                <div
-                  key={chunk.filename + index}
-                  className="bg-muted/20 rounded-lg p-4 border border-border/50"
-                >
-                  <div className="flex items-center justify-between mb-2">
-                    <div className="flex items-center gap-2">
-                      <FileText className="h-4 w-4 text-blue-400" />
-                      <span className="font-medium truncate">
-                        {chunk.filename}
-                      </span>
-                    </div>
-                    <span className="text-xs text-green-400 bg-green-400/20 px-2 py-1 rounded">
-                      {chunk.score.toFixed(2)}
-                    </span>
-                  </div>
-                  <div className="text-sm text-muted-foreground mb-2">
-                    {chunk.mimetype} • Page {chunk.page}
-                  </div>
-                  <p className="text-sm text-foreground/90 leading-relaxed">
-                    {chunk.text}
-                  </p>
-                </div>
-              ))}
-          </>
-        ) : (
-          // <div className="w-full overflow-auto" style={{ maxWidth: "100%" }}>
-          <AgGridReact
-            // className="w-full overflow-auto"
-            columnDefs={columnDefs}
-            defaultColDef={defaultColDef}
-            loading={isFetching}
-            ref={gridRef}
-            rowData={fileResults}
-            rowSelection="multiple"
-            rowMultiSelectWithClick={true}
-            suppressRowClickSelection={false}
-            getRowId={params => params.data.filename}
-            onSelectionChanged={onSelectionChanged}
-            suppressHorizontalScroll={false}
-            noRowsOverlayComponent={() => (
-              <div className="text-center">
-                <Search className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
-                <p className="text-lg text-muted-foreground">
-                  No documents found
-                </p>
-                <p className="text-sm text-muted-foreground/70 mt-2">
-                  Try adjusting your search terms
-                </p>
-              </div>
-            )}
-          />
-          // </div>
-        )}
       </div>
 
       {/* Bulk Delete Confirmation Dialog */}