From 340bef217572e60585bb0425b41e562a0c24b135 Mon Sep 17 00:00:00 2001
From: Brent O'Neill <brent.oneill@datastax.com>
Date: Mon, 29 Sep 2025 11:16:55 -0600
Subject: [PATCH 1/4] fix: issues with chunk copy

---
 frontend/src/app/knowledge/chunks/page.tsx | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/knowledge/chunks/page.tsx b/frontend/src/app/knowledge/chunks/page.tsx
index cdc9fcc3..d680ebc5 100644
--- a/frontend/src/app/knowledge/chunks/page.tsx
+++ b/frontend/src/app/knowledge/chunks/page.tsx
@@ -2,6 +2,7 @@
 
 import {
   ArrowLeft,
+  Check,
   Copy,
   File as FileIcon,
   Loader2,
@@ -41,6 +42,9 @@ function ChunksPageContent() {
     ChunkResult[]
   >([]);
   const [selectedChunks, setSelectedChunks] = useState<Set<number>>(new Set());
+  const [activeCopiedChunkIndex, setActiveCopiedChunkIndex] = useState<
+    number | null
+  >(null);
 
   // Calculate average chunk length
   const averageChunkLength = useMemo(
@@ -70,8 +74,11 @@ function ChunksPageContent() {
     }
   }, [queryInputText, chunks]);
 
-  const handleCopy = useCallback((text: string) => {
-    navigator.clipboard.writeText(text);
+  const handleCopy = useCallback((text: string, index: number) => {
+    // Trime whitespace and remove new lines/tabs for cleaner copy
+    navigator.clipboard.writeText(text.trim().replace(/[\n\r\t]/gm, ""));
+    setActiveCopiedChunkIndex(index);
+    setTimeout(() => setActiveCopiedChunkIndex(null), 30 * 1000); // 30 seconds
   }, []);
 
   const fileData = (data as File[]).find(
@@ -86,7 +93,7 @@ function ChunksPageContent() {
     }
 
     setChunks(fileData?.chunks || []);
-  }, [data, filename]);
+  }, [data, filename, setChunks, fileData]);
 
   // Set selected state for all checkboxes when selectAll changes
   useEffect(() => {
@@ -238,11 +245,15 @@ function ChunksPageContent() {
                       <div className="py-1">
                         <Button
                           className="p-1"
-                          onClick={() => handleCopy(chunk.text)}
+                          onClick={() => handleCopy(chunk.text, index)}
                           variant="ghost"
                           size="xs"
                         >
-                          <Copy className="text-muted-foreground" />
+                          {activeCopiedChunkIndex === index ? (
+                            <Check className="text-muted-foreground" />
+                          ) : (
+                            <Copy className="text-muted-foreground" />
+                          )}
                         </Button>
                       </div>
                     </div>

From 677a01d634cc0f670a308d4da3cb7842be243f38 Mon Sep 17 00:00:00 2001
From: Brent O'Neill <brent.oneill@datastax.com>
Date: Mon, 29 Sep 2025 11:17:41 -0600
Subject: [PATCH 2/4] fix typo

---
 frontend/src/app/knowledge/chunks/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/knowledge/chunks/page.tsx b/frontend/src/app/knowledge/chunks/page.tsx
index d680ebc5..264af4dc 100644
--- a/frontend/src/app/knowledge/chunks/page.tsx
+++ b/frontend/src/app/knowledge/chunks/page.tsx
@@ -75,7 +75,7 @@ function ChunksPageContent() {
   }, [queryInputText, chunks]);
 
   const handleCopy = useCallback((text: string, index: number) => {
-    // Trime whitespace and remove new lines/tabs for cleaner copy
+    // Trim whitespace and remove new lines/tabs for cleaner copy
     navigator.clipboard.writeText(text.trim().replace(/[\n\r\t]/gm, ""));
     setActiveCopiedChunkIndex(index);
     setTimeout(() => setActiveCopiedChunkIndex(null), 30 * 1000); // 30 seconds

From 58ca7de2825393ee986c08e4b3e376c36b8d182c Mon Sep 17 00:00:00 2001
From: Brent O'Neill <brent.oneill@datastax.com>
Date: Tue, 30 Sep 2025 11:51:49 -0600
Subject: [PATCH 3/4] design sweep for chunks page

---
 frontend/src/app/knowledge/chunks/page.tsx | 61 +++++++++-------------
 1 file changed, 25 insertions(+), 36 deletions(-)

diff --git a/frontend/src/app/knowledge/chunks/page.tsx b/frontend/src/app/knowledge/chunks/page.tsx
index 264af4dc..908ad6d3 100644
--- a/frontend/src/app/knowledge/chunks/page.tsx
+++ b/frontend/src/app/knowledge/chunks/page.tsx
@@ -1,13 +1,6 @@
 "use client";
 
-import {
-  ArrowLeft,
-  Check,
-  Copy,
-  File as FileIcon,
-  Loader2,
-  Search,
-} from "lucide-react";
+import { ArrowLeft, Check, Copy, Loader2, Search } from "lucide-react";
 import { Suspense, useCallback, useEffect, useMemo, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { ProtectedRoute } from "@/components/protected-route";
@@ -78,7 +71,7 @@ function ChunksPageContent() {
     // Trim whitespace and remove new lines/tabs for cleaner copy
     navigator.clipboard.writeText(text.trim().replace(/[\n\r\t]/gm, ""));
     setActiveCopiedChunkIndex(index);
-    setTimeout(() => setActiveCopiedChunkIndex(null), 30 * 1000); // 30 seconds
+    setTimeout(() => setActiveCopiedChunkIndex(null), 10 * 1000); // 10 seconds
   }, []);
 
   const fileData = (data as File[]).find(
@@ -155,17 +148,29 @@ function ChunksPageContent() {
       <div className="flex-1 flex flex-col min-h-0 px-6 py-6">
         {/* Header */}
         <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>
+          <div className="flex flex-row items-center gap-3 mb-6">
+            <Button variant="ghost" onClick={handleBack} size="sm">
+              <ArrowLeft size={24} />
             </Button>
+            <h1 className="text-lg font-semibold">
+              {/* Removes file extension from filename */}
+              {filename.replace(/\.[^/.]+$/, "")}
+            </h1>
           </div>
-          <div className="flex items-center gap-3 pl-4 mt-2">
-            <div className="flex items-center gap-2">
+          <div className="flex flex-col items-start mt-2">
+            <div className="flex-1 flex items-center gap-2 w-full max-w-[616px] mb-8">
+              <Input
+                name="search-query"
+                icon={!queryInputText.length ? <Search size={18} /> : null}
+                id="search-query"
+                type="text"
+                defaultValue={parsedFilterData?.query}
+                value={queryInputText}
+                onChange={(e) => setQueryInputText(e.target.value)}
+                placeholder="Search chunks..."
+              />
+            </div>
+            <div className="flex items-center pl-4 gap-2">
               <Checkbox
                 id="selectAllChunks"
                 checked={selectAll}
@@ -180,26 +185,11 @@ function ChunksPageContent() {
                 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>
 
         {/* Content Area - matches knowledge page structure */}
-        <div className="flex-1 overflow-auto">
+        <div className="flex-1 overflow-scroll pr-6">
           {isFetching ? (
             <div className="flex items-center justify-center h-64">
               <div className="text-center">
@@ -244,10 +234,9 @@ function ChunksPageContent() {
                       </span>
                       <div className="py-1">
                         <Button
-                          className="p-1"
                           onClick={() => handleCopy(chunk.text, index)}
                           variant="ghost"
-                          size="xs"
+                          size="sm"
                         >
                           {activeCopiedChunkIndex === index ? (
                             <Check className="text-muted-foreground" />

From c8a1c51c05f3cb996f3e22f2527636ebb2ae4d91 Mon Sep 17 00:00:00 2001
From: boneill-ds <brent.oneill@datastax.com>
Date: Tue, 30 Sep 2025 11:52:57 -0600
Subject: [PATCH 4/4] Update frontend/src/app/knowledge/chunks/page.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 frontend/src/app/knowledge/chunks/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/knowledge/chunks/page.tsx b/frontend/src/app/knowledge/chunks/page.tsx
index 908ad6d3..cb96eddc 100644
--- a/frontend/src/app/knowledge/chunks/page.tsx
+++ b/frontend/src/app/knowledge/chunks/page.tsx
@@ -86,7 +86,7 @@ function ChunksPageContent() {
     }
 
     setChunks(fileData?.chunks || []);
-  }, [data, filename, setChunks, fileData]);
+  }, [data, filename]);
 
   // Set selected state for all checkboxes when selectAll changes
   useEffect(() => {