From 99bf3772b50131ddbdee9e8c09435bb900f0ff3b Mon Sep 17 00:00:00 2001
From: Brent O'Neill <brent.oneill@datastax.com>
Date: Fri, 19 Sep 2025 12:16:20 -0600
Subject: [PATCH] updated header for chunks page

---
 frontend/src/app/knowledge/chunks/page.tsx | 67 ++++++++++++++++------
 1 file changed, 50 insertions(+), 17 deletions(-)

diff --git a/frontend/src/app/knowledge/chunks/page.tsx b/frontend/src/app/knowledge/chunks/page.tsx
index 9385c474..254eb511 100644
--- a/frontend/src/app/knowledge/chunks/page.tsx
+++ b/frontend/src/app/knowledge/chunks/page.tsx
@@ -1,8 +1,10 @@
 "use client";
 
 import {
+  ArrowLeft,
   Building2,
   Cloud,
+  File as FileIcon,
   FileText,
   HardDrive,
   Loader2,
@@ -21,6 +23,9 @@ import {
   type File,
   useGetSearchQuery,
 } from "../../api/queries/useGetSearchQuery";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
 
 // Function to get the appropriate icon for a connector type
 function getSourceIcon(connectorType?: string) {
@@ -47,9 +52,14 @@ function ChunksPageContent() {
   const filename = searchParams.get("filename");
   const [chunks, setChunks] = useState<ChunkResult[]>([]);
 
+  const [selectAll, setSelectAll] = useState(false);
+  const [queryInputText, setQueryInputText] = useState(
+    parsedFilterData?.query ?? ""
+  );
+
   // Use the same search query as the knowledge page, but we'll filter for the specific file
   const { data = [], isFetching } = useGetSearchQuery("*", parsedFilterData);
-
+  console.log({ data });
   // Extract chunks for the specific file
   useEffect(() => {
     if (!filename || !(data as File[]).length) {
@@ -98,30 +108,53 @@ function ChunksPageContent() {
     >
       <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
+        <div className="flex flex-col mb-6">
+          <div className="flex items-center gap-3 mb-2">
+            <Button variant="ghost" onClick={handleBack}>
+              <ArrowLeft size={18} />
+              <FileIcon className="text-muted-foreground" size={18} />
+              <h1 className="text-lg font-semibold">
+                {filename.replace(/\.[^/.]+$/, "")}
+              </h1>
             </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 className="flex items-center gap-3 pl-6 mt-2">
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="selectAllChunks"
+                checked={selectAll}
+                onCheckedChange={(checked) => setSelectAll(checked === true)}
+              />
+              <Label
+                htmlFor="selectAllChunks"
+                className="font-medium text-muted-foreground whitespace-nowrap"
+              >
+                Select all
+              </Label>
+            </div>
+            <div className="flex-1 flex items-center gap-2">
+              <Input
+                name="search-query"
+                id="search-query"
+                type="text"
+                defaultValue={parsedFilterData?.query}
+                value={queryInputText}
+                onChange={(e) => setQueryInputText(e.target.value)}
+                placeholder="Search chunks..."
+                className="flex-1 bg-muted/20 rounded-lg border border-border/50 px-4 py-3 focus-visible:ring-1 focus-visible:ring-ring"
+              />
+              <Button variant="outline" size="sm">
+                <Search />
+              </Button>
             </div>
           </div>
-          <div className="text-sm text-muted-foreground">
+          {/* <div className="text-sm text-muted-foreground">
             {!isFetching && chunks.length > 0 && (
               <span>
                 {chunks.length} chunk{chunks.length !== 1 ? "s" : ""} found
               </span>
             )}
-          </div>
+          </div> */}
         </div>
 
         {/* Content Area - matches knowledge page structure */}