Merge pull request #43 from langflow-ai/feat/ag-grid

Refactor Knowledge table with AgGrid

Makefile

@@ -75,6 +75,14 @@ infra:
 	@echo "   OpenSearch: http://localhost:9200"
 	@echo "   Dashboards: http://localhost:5601"
 
+infra-cpu:
+	@echo "🔧 Starting infrastructure services only..."
+	docker-compose -f docker-compose-cpu.yml up -d opensearch dashboards langflow
+	@echo "✅ Infrastructure services started!"
+	@echo "   Langflow: http://localhost:7860"
+	@echo "   OpenSearch: http://localhost:9200"
+	@echo "   Dashboards: http://localhost:5601"
+
 # Container management
 stop:
 	@echo "🛑 Stopping all containers..."

frontend/components/knowledge-actions-dropdown.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { EllipsisVertical } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "./ui/button";
+
+export function KnowledgeActionsDropdown() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Button variant="ghost" className="hover:bg-transparent">
+          <EllipsisVertical className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent side="right" sideOffset={-10}>
+        <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

frontend/components/ui/input.tsx

@@ -29,7 +29,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         />
         <span
           className={cn(
-            "pointer-events-none absolute top-1/2 -translate-y-1/2 pl-px text-placeholder-foreground",
+            "pointer-events-none absolute top-1/2 -translate-y-1/2 pl-px text-placeholder-foreground font-mono",
             icon ? "left-9" : "left-3",
             props.value && "hidden",
           )}

frontend/package-lock.json

@@ -25,6 +25,8 @@
         "@tailwindcss/forms": "^0.5.10",
         "@tailwindcss/typography": "^0.5.16",
         "@tanstack/react-query": "^5.86.0",
+        "ag-grid-community": "^34.2.0",
+        "ag-grid-react": "^34.2.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
@@ -2950,6 +2952,32 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/ag-charts-types": {
+      "version": "12.2.0",
+      "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-12.2.0.tgz",
+      "integrity": "sha512-d2qQrQirt9wP36YW5HPuOvXsiajyiFnr1CTsoCbs02bavPDz7Lk2jHp64+waM4YKgXb3GN7gafbBI9Qgk33BmQ=="
+    },
+    "node_modules/ag-grid-community": {
+      "version": "34.2.0",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-34.2.0.tgz",
+      "integrity": "sha512-peS7THEMYwpIrwLQHmkRxw/TlOnddD/F5A88RqlBxf8j+WqVYRWMOOhU5TqymGcha7z2oZ8IoL9ROl3gvtdEjg==",
+      "dependencies": {
+        "ag-charts-types": "12.2.0"
+      }
+    },
+    "node_modules/ag-grid-react": {
+      "version": "34.2.0",
+      "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-34.2.0.tgz",
+      "integrity": "sha512-dLKFw6hz75S0HLuZvtcwjm+gyiI4gXVzHEu7lWNafWAX0mb8DhogEOP5wbzAlsN6iCfi7bK/cgZImZFjenlqwg==",
+      "dependencies": {
+        "ag-grid-community": "34.2.0",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",

frontend/package.json

@@ -26,6 +26,8 @@
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/typography": "^0.5.16",
     "@tanstack/react-query": "^5.86.0",
+    "ag-grid-community": "^34.2.0",
+    "ag-grid-react": "^34.2.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",

frontend/src/app/knowledge/page.tsx

@@ -8,7 +8,14 @@ import {
   Loader2,
   Search,
 } from "lucide-react";
-import { type FormEvent, useCallback, useEffect, useState } from "react";
+import { AgGridReact, CustomCellRendererProps } from "ag-grid-react";
+import {
+  type FormEvent,
+  useCallback,
+  useEffect,
+  useState,
+  useRef,
+} from "react";
 import { SiGoogledrive } from "react-icons/si";
 import { TbBrandOnedrive } from "react-icons/tb";
 import { KnowledgeDropdown } from "@/components/knowledge-dropdown";
@@ -18,6 +25,10 @@ import { Input } from "@/components/ui/input";
 import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
 import { useTask } from "@/contexts/task-context";
 import { type File, useGetSearchQuery } from "../api/queries/useGetSearchQuery";
+import { ColDef, RowClickedEvent } from "ag-grid-community";
+import "@/components/AgGrid/registerAgGridModules";
+import "@/components/AgGrid/agGridStyles.css";
+import { KnowledgeActionsDropdown } from "@/components/knowledge-actions-dropdown";
 
 // Function to get the appropriate icon for a connector type
 function getSourceIcon(connectorType?: string) {
@@ -64,11 +75,94 @@ function SearchPage() {
       }
       setQuery(queryInputText);
     },
-    [queryInputText, refetchSearch, query],
+    [queryInputText, refetchSearch, query]
   );
 
   const fileResults = data as File[];
 
+  const gridRef = useRef<AgGridReact>(null);
+
+  const [columnDefs] = useState<ColDef<File>[]>([
+    {
+      field: "filename",
+      headerName: "Source",
+      cellRenderer: ({ data, value }: CustomCellRendererProps<File>) => {
+        return (
+          <div className="flex items-center gap-2">
+            {getSourceIcon(data?.connector_type)}
+            <span className="font-medium text-foreground truncate">
+              {value}
+            </span>
+          </div>
+        );
+      },
+    },
+    {
+      field: "size",
+      headerName: "Size",
+      valueFormatter: (params) =>
+        params.value ? `${Math.round(params.value / 1024)} KB` : "-",
+    },
+    {
+      field: "mimetype",
+      headerName: "Type",
+    },
+    {
+      field: "owner",
+      headerName: "Owner",
+      valueFormatter: (params) =>
+        params.value ||
+        params.data?.owner_name ||
+        params.data?.owner_email ||
+        "—",
+    },
+
+    {
+      field: "chunkCount",
+      headerName: "Chunks",
+    },
+    {
+      field: "avgScore",
+      headerName: "Avg score",
+      cellRenderer: ({ value }: CustomCellRendererProps<File>) => {
+        return (
+          <span className="text-xs text-green-400 bg-green-400/20 px-2 py-1 rounded">
+            {value.toFixed(2)}
+          </span>
+        );
+      },
+    },
+    {
+      cellRenderer: () => {
+        return <KnowledgeActionsDropdown />;
+      },
+      cellStyle: {
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'center',
+        padding: 0,
+      },
+      colId: 'actions',
+      filter: false,
+      maxWidth: 60,
+      minWidth: 60,
+      resizable: false,
+      sortable: false,
+      initialFlex: 0,
+    },
+  ]);
+
+  const defaultColDef: ColDef<File> = {
+    cellStyle: () => ({
+      display: "flex",
+      alignItems: "center",
+    }),
+    initialFlex: 1,
+    minWidth: 100,
+    resizable: false,
+    suppressMovable: true,
+  };
+
   return (
     <div
       className={`fixed inset-0 md:left-72 top-[53px] flex flex-col transition-all duration-300 ${
@@ -85,8 +179,12 @@ function SearchPage() {
       }`}
     >
       <div className="flex-1 flex flex-col min-h-0 px-6 py-6">
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-lg font-semibold">Project Knowledge</h2>
+          <KnowledgeDropdown variant="button" />
+        </div>
         {/* Search Input Area */}
-        <div className="flex-shrink-0 mb-6">
+        <div className="flex-shrink-0 mb-6 lg:max-w-[75%] xl:max-w-[50%]">
           <form onSubmit={handleSearch} className="flex gap-3">
             <Input
               name="search-query"
@@ -100,7 +198,7 @@ function SearchPage() {
             />
             <Button
               type="submit"
-              variant="secondary"
+              variant="outline"
               className="rounded-lg h-12 w-12 p-0 flex-shrink-0"
             >
               {isFetching ? (
@@ -109,17 +207,63 @@ function SearchPage() {
                 <Search className="h-4 w-4" />
               )}
             </Button>
-            <div className="flex-shrink-0">
-              <KnowledgeDropdown variant="button" />
-            </div>
           </form>
         </div>
-
+        {selectedFile ? (
-        {/* Results Area */}
+          // Show chunks for selected file
-        <div className="flex-1 overflow-y-auto">
+          <>
-          <div className="space-y-4">
+            <div className="flex items-center gap-2 mb-4">
-            {fileResults.length === 0 && !isFetching ? (
+              <Button
-              <div className="text-center py-12">
+                variant="ghost"
+                size="sm"
+                onClick={() => setSelectedFile(null)}
+              >
+                ← Back to files
+              </Button>
+              <span className="text-sm text-muted-foreground">
+                Chunks from {selectedFile}
+              </span>
+            </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>
+              ))}
+          </>
+        ) : (
+          <AgGridReact
+            columnDefs={columnDefs}
+            defaultColDef={defaultColDef}
+            loading={isFetching}
+            ref={gridRef}
+            rowData={fileResults}
+            onRowClicked={(params: RowClickedEvent<File>) => {
+              setSelectedFile(params.data?.filename ?? "");
+            }}
+            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
@@ -128,140 +272,9 @@ function SearchPage() {
                   Try adjusting your search terms
                 </p>
               </div>
-            ) : (
-              <div className="space-y-4">
-                {/* Results Count */}
-                <div className="mb-4">
-                  <div className="text-sm text-muted-foreground">
-                    {fileResults.length} file
-                    {fileResults.length !== 1 ? "s" : ""} found
-                  </div>
-                </div>
-
-                {/* Results Display */}
-                <div
-                  className={isFetching ? "opacity-50 pointer-events-none" : ""}
-                >
-                  {selectedFile ? (
-                    // Show chunks for selected file
-                    <>
-                      <div className="flex items-center gap-2 mb-4">
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => setSelectedFile(null)}
-                        >
-                          ← Back to files
-                        </Button>
-                        <span className="text-sm text-muted-foreground">
-                          Chunks from {selectedFile}
-                        </span>
-                      </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>
-                        ))}
-                    </>
-                  ) : (
-                    // Show files table
-                    <div className="bg-muted/20 rounded-lg border border-border/50 overflow-hidden">
-                      <table className="w-full">
-                        <thead>
-                          <tr className="border-b border-border/50 bg-muted/10">
-                            <th className="text-left p-3 text-sm font-medium text-muted-foreground">
-                              Source
-                            </th>
-                            <th className="text-left p-3 text-sm font-medium text-muted-foreground">
-                              Type
-                            </th>
-                            <th className="text-left p-3 text-sm font-medium text-muted-foreground">
-                              Size
-                            </th>
-                            <th className="text-left p-3 text-sm font-medium text-muted-foreground">
-                              Matching chunks
-                            </th>
-                            <th className="text-left p-3 text-sm font-medium text-muted-foreground">
-                              Average score
-                            </th>
-                            <th className="text-left p-3 text-sm font-medium text-muted-foreground">
-                              Owner
-                            </th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {fileResults.map((file) => (
-                            <tr
-                              key={file.filename}
-                              className="border-b border-border/30 hover:bg-muted/20 cursor-pointer transition-colors"
-                              onClick={() => setSelectedFile(file.filename)}
-                            >
-                              <td className="p-3">
-                                <div className="flex items-center gap-2">
-                                  {getSourceIcon(file.connector_type)}
-                                  <span
-                                    className="font-medium truncate"
-                                    title={file.filename}
-                                  >
-                                    {file.filename}
-                                  </span>
-                                </div>
-                              </td>
-                              <td className="p-3 text-sm text-muted-foreground">
-                                {file.mimetype}
-                              </td>
-                              <td className="p-3 text-sm text-muted-foreground">
-                                {file.size
-                                  ? `${Math.round(file.size / 1024)} KB`
-                                  : "—"}
-                              </td>
-                              <td className="p-3 text-sm text-muted-foreground">
-                                {file.chunkCount}
-                              </td>
-                              <td className="p-3">
-                                <span className="text-xs text-green-400 bg-green-400/20 px-2 py-1 rounded">
-                                  {file.avgScore.toFixed(2)}
-                                </span>
-                              </td>
-                              <td
-                                className="p-3 text-sm text-muted-foreground"
-                                title={file.owner_email}
-                              >
-                                {file.owner_name || file.owner || "—"}
-                              </td>
-                            </tr>
-                          ))}
-                        </tbody>
-                      </table>
-                    </div>
-                  )}
-                </div>
-              </div>
             )}
-          </div>
+          />
-        </div>
+        )}
       </div>
     </div>
   );

frontend/src/components/AgGrid/agGridStyles.css

@@ -0,0 +1,21 @@
+body {
+  --ag-text-color: hsl(var(--muted-foreground));
+  --ag-background-color: hsl(var(--background));
+  --ag-header-background-color: hsl(var(--background));
+  --ag-header-text-color: hsl(var(--muted-foreground));
+  --ag-header-column-resize-handle-color: hsl(var(--border));
+  --ag-header-row-border: hsl(var(--border));
+  --ag-header-font-weight: var(--font-medium);
+  --ag-row-border: undefined;
+  --ag-row-hover-color: hsl(var(--muted));
+  --ag-wrapper-border: none;
+  --ag-font-family: var(--font-sans);
+
+  .ag-header {
+    border-bottom: 1px solid hsl(var(--border));
+    margin-bottom: 0.5rem;
+  }
+  .ag-row {
+    cursor: pointer;
+  }
+}

frontend/src/components/AgGrid/registerAgGridModules.ts

@@ -0,0 +1,33 @@
+import {
+    ModuleRegistry,
+    ValidationModule,
+    ColumnAutoSizeModule,
+    ColumnApiModule,
+    PaginationModule,
+    CellStyleModule,
+    QuickFilterModule,
+    ClientSideRowModelModule,
+    TextFilterModule,
+    DateFilterModule,
+    EventApiModule,
+    GridStateModule,
+  } from 'ag-grid-community';
+  
+  // Importing necessary modules from ag-grid-community
+  // https://www.ag-grid.com/javascript-data-grid/modules/#selecting-modules
+  
+  ModuleRegistry.registerModules([
+    ColumnAutoSizeModule,
+    ColumnApiModule,
+    PaginationModule,
+    CellStyleModule,
+    QuickFilterModule,
+    ClientSideRowModelModule,
+    TextFilterModule,
+    DateFilterModule,
+    EventApiModule,
+    GridStateModule,
+    // The ValidationModule adds helpful console warnings/errors that can help identify bad configuration during development.
+    ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []),
+  ]);
+