Merge pull request #57 from langflow-ai/features/PRTL-3960

design sweep for chunks page

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

@@ -1,17 +1,14 @@
 "use client";
 
 import {
-  Building2,
-  Cloud,
-  FileText,
-  HardDrive,
+  ArrowLeft,
+  Copy,
+  File as FileIcon,
   Loader2,
   Search,
 } from "lucide-react";
-import { Suspense, useCallback, useEffect, useState } from "react";
+import { Suspense, useCallback, useEffect, useMemo, 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";
@@ -21,22 +18,16 @@ 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) {
-  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" />;
-  }
-}
+const getFileTypeLabel = (mimetype: string) => {
+  if (mimetype === "application/pdf") return "PDF";
+  if (mimetype === "text/plain") return "Text";
+  if (mimetype === "application/msword") return "Word Document";
+  return "Unknown";
+};
 
 function ChunksPageContent() {
   const router = useRouter();
@@ -46,10 +37,47 @@ function ChunksPageContent() {
 
   const filename = searchParams.get("filename");
   const [chunks, setChunks] = useState<ChunkResult[]>([]);
+  const [chunksFilteredByQuery, setChunksFilteredByQuery] = useState<
+    ChunkResult[]
+  >([]);
+  const [selectedChunks, setSelectedChunks] = useState<Set<number>>(new Set());
+
+  // Calculate average chunk length
+  const averageChunkLength = useMemo(
+    () =>
+      chunks.reduce((acc, chunk) => acc + chunk.text.length, 0) /
+        chunks.length || 0,
+    [chunks]
+  );
+
+  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);
 
+  useEffect(() => {
+    if (queryInputText === "") {
+      setChunksFilteredByQuery(chunks);
+    } else {
+      setChunksFilteredByQuery(
+        chunks.filter((chunk) =>
+          chunk.text.toLowerCase().includes(queryInputText.toLowerCase())
+        )
+      );
+    }
+  }, [queryInputText, chunks]);
+
+  const handleCopy = useCallback((text: string) => {
+    navigator.clipboard.writeText(text);
+  }, []);
+
+  const fileData = (data as File[]).find(
+    (file: File) => file.filename === filename
+  );
+
   // Extract chunks for the specific file
   useEffect(() => {
     if (!filename || !(data as File[]).length) {
@@ -57,16 +85,37 @@ function ChunksPageContent() {
       return;
     }
 
-    const fileData = (data as File[]).find(
-      (file: File) => file.filename === filename
-    );
     setChunks(fileData?.chunks || []);
   }, [data, filename]);
 
+  // Set selected state for all checkboxes when selectAll changes
+  useEffect(() => {
+    if (selectAll) {
+      setSelectedChunks(new Set(chunks.map((_, index) => index)));
+    } else {
+      setSelectedChunks(new Set());
+    }
+  }, [selectAll, setSelectedChunks, chunks]);
+
   const handleBack = useCallback(() => {
-    router.back();
+    router.push("/knowledge");
   }, [router]);
 
+  const handleChunkCardCheckboxChange = useCallback(
+    (index: number) => {
+      setSelectedChunks((prevSelected) => {
+        const newSelected = new Set(prevSelected);
+        if (newSelected.has(index)) {
+          newSelected.delete(index);
+        } else {
+          newSelected.add(index);
+        }
+        return newSelected;
+      });
+    },
+    [setSelectedChunks]
+  );
+
   if (!filename) {
     return (
       <div className="flex items-center justify-center h-64">
@@ -83,7 +132,7 @@ function ChunksPageContent() {
 
   return (
     <div
-      className={`fixed inset-0 md:left-72 top-[53px] flex flex-col transition-all duration-300 ${
+      className={`fixed inset-0 md:left-72 top-[53px] flex flex-row transition-all duration-300 ${
         isMenuOpen && isPanelOpen
           ? "md:right-[704px]"
           : // Both open: 384px (menu) + 320px (KF panel)
@@ -98,29 +147,47 @@ 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>
-          <div className="text-sm text-muted-foreground">
-            {!isFetching && chunks.length > 0 && (
-              <span>
-                {chunks.length} chunk{chunks.length !== 1 ? "s" : ""} found
-              </span>
-            )}
+          <div className="flex items-center gap-3 pl-4 mt-2">
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="selectAllChunks"
+                checked={selectAll}
+                onCheckedChange={(handleSelectAll) =>
+                  setSelectAll(!!handleSelectAll)
+                }
+              />
+              <Label
+                htmlFor="selectAllChunks"
+                className="font-medium text-muted-foreground whitespace-nowrap cursor-pointer"
+              >
+                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>
 
@@ -147,41 +214,130 @@ function ChunksPageContent() {
             </div>
           ) : (
             <div className="space-y-4 pb-6">
-              {chunks.map((chunk, index) => (
+              {chunksFilteredByQuery.map((chunk, index) => (
                 <div
                   key={chunk.filename + index}
-                  className="bg-muted/20 rounded-lg p-4 border border-border/50"
+                  className="bg-muted 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}
+                    <div className="flex items-center gap-3">
+                      <div>
+                        <Checkbox
+                          checked={selectedChunks.has(index)}
+                          onCheckedChange={() =>
+                            handleChunkCardCheckboxChange(index)
+                          }
+                        />
+                      </div>
+                      <span className="text-sm font-bold">
+                        Chunk {chunk.page}
                       </span>
-                      {chunk.connector_type && (
-                        <div className="ml-2">
-                          {getSourceIcon(chunk.connector_type)}
-                        </div>
-                      )}
+                      <span className="bg-background p-1 rounded text-xs text-muted-foreground/70">
+                        {chunk.text.length} chars
+                      </span>
+                      <div className="py-1">
+                        <Button
+                          className="p-1"
+                          onClick={() => handleCopy(chunk.text)}
+                          variant="ghost"
+                          size="xs"
+                        >
+                          <Copy className="text-muted-foreground" />
+                        </Button>
+                      </div>
                     </div>
-                    <span className="text-xs text-green-400 bg-green-400/20 px-2 py-1 rounded">
-                      {chunk.score.toFixed(2)}
-                    </span>
+
+                    {/* TODO: Update to use active toggle */}
+                    {/* <span className="px-2 py-1 text-green-500">
+                      <Switch
+                        className="ml-2 bg-green-500"
+                        checked={true}
+                      />
+                      Active
+                    </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">
+                  <blockquote className="text-sm text-muted-foreground leading-relaxed border-l-2 border-input ml-1.5 pl-4">
                     {chunk.text}
-                  </p>
+                  </blockquote>
                 </div>
               ))}
             </div>
           )}
         </div>
       </div>
+      {/* Right panel - Summary (TODO), Technical details,  */}
+      <div className="w-[320px] py-20 px-2">
+        <div className="mb-8">
+          <h2 className="text-xl font-semibold mt-3 mb-4">Technical details</h2>
+          <dl>
+            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+              <dt className="text-sm/6 text-muted-foreground">Total chunks</dt>
+              <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
+                {chunks.length}
+              </dd>
+            </div>
+            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+              <dt className="text-sm/6 text-muted-foreground">Avg length</dt>
+              <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
+                {averageChunkLength.toFixed(0)} chars
+              </dd>
+            </div>
+            {/* TODO: Uncomment after data is available */}
+            {/* <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+              <dt className="text-sm/6 text-muted-foreground">Process time</dt>
+              <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
+              </dd>
+            </div>
+            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+              <dt className="text-sm/6 text-muted-foreground">Model</dt>
+              <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
+              </dd>
+            </div> */}
+          </dl>
+        </div>
+        <div className="mb-8">
+          <h2 className="text-xl font-semibold mt-2 mb-3">Original document</h2>
+          <dl>
+            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+              <dt className="text-sm/6 text-muted-foreground">Name</dt>
+              <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
+                {fileData?.filename}
+              </dd>
+            </div>
+            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+              <dt className="text-sm/6 text-muted-foreground">Type</dt>
+              <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
+                {fileData ? getFileTypeLabel(fileData.mimetype) : "Unknown"}
+              </dd>
+            </div>
+            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+              <dt className="text-sm/6 text-muted-foreground">Size</dt>
+              <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
+                {fileData?.size
+                  ? `${Math.round(fileData.size / 1024)} KB`
+                  : "Unknown"}
+              </dd>
+            </div>
+            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+              <dt className="text-sm/6 text-muted-foreground">Uploaded</dt>
+              <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
+                N/A
+              </dd>
+            </div>
+            {/* TODO: Uncomment after data is available */}
+            {/* <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+              <dt className="text-sm/6 text-muted-foreground">Source</dt>
+              <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0"></dd>
+            </div> */}
+            <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 mb-2.5">
+              <dt className="text-sm/6 text-muted-foreground">Updated</dt>
+              <dd className="mt-1 text-sm/6 text-gray-100 sm:col-span-2 sm:mt-0">
+                N/A
+              </dd>
+            </div>
+          </dl>
+        </div>
+      </div>
     </div>
   );
 }