add actions menu
This commit is contained in:
Cole Goldsmith
parent
c7b213b365
commit
fa63e7b457
2 changed files with 49 additions and 200 deletions
25
frontend/components/knowledge-actions-dropdown.tsx
Normal file
25
frontend/components/knowledge-actions-dropdown.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -25,9 +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 } from "ag-grid-community";
|
||||
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) {
|
||||
|
|
@ -131,6 +132,24 @@ function SearchPage() {
|
|||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
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> = {
|
||||
|
|
@ -165,7 +184,7 @@ function SearchPage() {
|
|||
<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"
|
||||
|
|
@ -240,7 +259,9 @@ function SearchPage() {
|
|||
loading={isFetching}
|
||||
ref={gridRef}
|
||||
rowData={fileResults}
|
||||
onRowClicked={(params) => setSelectedFile(params.data?.filename)}
|
||||
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" />
|
||||
|
|
@ -257,203 +278,6 @@ function SearchPage() {
|
|||
</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">
|
||||
// {/* Search Input Area */}
|
||||
// <div className="flex-shrink-0 mb-6">
|
||||
// <form onSubmit={handleSearch} className="flex gap-3">
|
||||
// <Input
|
||||
// name="search-query"
|
||||
// id="search-query"
|
||||
// type="text"
|
||||
// defaultValue={parsedFilterData?.query}
|
||||
// value={queryInputText}
|
||||
// onChange={(e) => setQueryInputText(e.target.value)}
|
||||
// placeholder="Search your documents..."
|
||||
// className="flex-1 bg-muted/20 rounded-lg border border-border/50 px-4 py-3 h-12 focus-visible:ring-1 focus-visible:ring-ring"
|
||||
// />
|
||||
// <Button
|
||||
// type="submit"
|
||||
// variant="secondary"
|
||||
// className="rounded-lg h-12 w-12 p-0 flex-shrink-0"
|
||||
// >
|
||||
// {isFetching ? (
|
||||
// <Loader2 className="h-4 w-4 animate-spin" />
|
||||
// ) : (
|
||||
// <Search className="h-4 w-4" />
|
||||
// )}
|
||||
// </Button>
|
||||
// <div className="flex-shrink-0">
|
||||
// <KnowledgeDropdown variant="button" />
|
||||
// </div>
|
||||
// </form>
|
||||
// </div>
|
||||
|
||||
// {/* Results Area */}
|
||||
// <div className="flex-1 overflow-y-auto">
|
||||
// <div className="space-y-4">
|
||||
// {fileResults.length === 0 && !isFetching ? (
|
||||
// <div className="text-center py-12">
|
||||
// <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 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>
|
||||
// );
|
||||
}
|
||||
|
||||
export default function ProtectedSearchPage() {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue