d47038e097
* reorganize folder structure * move folders from merge * fix import issue * run format * update configs
349 lines
13 KiB
TypeScript
349 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ArrowLeft, Check, Copy, Loader2, Search, X } from "lucide-react";
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|
import { Suspense, useCallback, useEffect, useMemo, useState } from "react";
|
|
// import { Label } from "@/components/ui/label";
|
|
// import { Checkbox } from "@/components/ui/checkbox";
|
|
import { ProtectedRoute } from "@/components/protected-route";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
|
|
import {
|
|
type ChunkResult,
|
|
type File,
|
|
useGetSearchQuery,
|
|
} from "../../api/queries/useGetSearchQuery";
|
|
// import { Label } from "@/components/ui/label";
|
|
// import { Checkbox } from "@/components/ui/checkbox";
|
|
import { KnowledgeSearchInput } from "@/components/knowledge-search-input";
|
|
|
|
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();
|
|
const searchParams = useSearchParams();
|
|
const { parsedFilterData, queryOverride } = useKnowledgeFilter();
|
|
const filename = searchParams.get("filename");
|
|
const [chunks, setChunks] = useState<ChunkResult[]>([]);
|
|
// const [chunksFilteredByQuery, setChunksFilteredByQuery] = useState<
|
|
// ChunkResult[]
|
|
// >([]);
|
|
// const [selectedChunks, setSelectedChunks] = useState<Set<number>>(new Set());
|
|
const [activeCopiedChunkIndex, setActiveCopiedChunkIndex] = useState<
|
|
number | null
|
|
>(null);
|
|
|
|
// 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);
|
|
|
|
// Use the same search query as the knowledge page, but we'll filter for the specific file
|
|
const { data = [], isFetching } = useGetSearchQuery(
|
|
queryOverride,
|
|
parsedFilterData,
|
|
);
|
|
|
|
const handleCopy = useCallback((text: string, index: number) => {
|
|
// 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), 10 * 1000); // 10 seconds
|
|
}, []);
|
|
|
|
const fileData = (data as File[]).find(
|
|
(file: File) => file.filename === filename,
|
|
);
|
|
|
|
// Extract chunks for the specific file
|
|
useEffect(() => {
|
|
if (!filename || !(data as File[]).length) {
|
|
setChunks([]);
|
|
return;
|
|
}
|
|
|
|
setChunks(
|
|
fileData?.chunks?.map((chunk, i) => ({ ...chunk, index: i + 1 })) || [],
|
|
);
|
|
}, [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.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">
|
|
<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 file specified</p>
|
|
<p className="text-sm text-muted-foreground/70 mt-2">
|
|
Please select a file from the knowledge page
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
{/* Header */}
|
|
<div className="flex flex-col mb-6">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={handleBack}
|
|
size="sm"
|
|
className="max-w-8 max-h-8 -m-2"
|
|
>
|
|
<ArrowLeft size={24} />
|
|
</Button>
|
|
<h1 className="text-lg font-semibold">
|
|
{/* Removes file extension from filename */}
|
|
{filename.replace(/\.[^/.]+$/, "")}
|
|
</h1>
|
|
</div>
|
|
<div className="flex flex-1">
|
|
<KnowledgeSearchInput />
|
|
{/* <div className="flex items-center pl-4 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>
|
|
</div>
|
|
|
|
<div className="grid gap-6 grid-cols-1 lg:grid-cols-[3fr_1fr]">
|
|
{/* Content Area */}
|
|
<div className="row-start-2 lg:row-start-1">
|
|
{isFetching ? (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-center">
|
|
<Loader2 className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50 animate-spin" />
|
|
<p className="text-lg text-muted-foreground">
|
|
Loading chunks...
|
|
</p>
|
|
</div>
|
|
</div>
|
|
) : chunks.length === 0 ? (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-center">
|
|
<p className="text-xl font-semibold mb-2">No knowledge</p>
|
|
<p className="text-sm text-secondary-foreground">
|
|
Clear the knowledge filter or return to the knowledge page
|
|
</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4 pb-6">
|
|
{chunks.map((chunk, index) => (
|
|
<div
|
|
key={chunk.filename + index}
|
|
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-3">
|
|
{/* <div>
|
|
<Checkbox
|
|
checked={selectedChunks.has(index)}
|
|
onCheckedChange={() =>
|
|
handleChunkCardCheckboxChange(index)
|
|
}
|
|
/>
|
|
</div> */}
|
|
<span className="text-sm font-bold">
|
|
Chunk {chunk.index}
|
|
</span>
|
|
<span className="bg-background p-1 rounded text-xs text-muted-foreground/70">
|
|
{chunk.text.length} chars
|
|
</span>
|
|
<div className="py-1">
|
|
<Button
|
|
onClick={() => handleCopy(chunk.text, index)}
|
|
variant="ghost"
|
|
size="sm"
|
|
>
|
|
{activeCopiedChunkIndex === index ? (
|
|
<Check className="text-muted-foreground" />
|
|
) : (
|
|
<Copy className="text-muted-foreground" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<span className="bg-background p-1 rounded text-xs text-muted-foreground/70">
|
|
{chunk.score.toFixed(2)} score
|
|
</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>
|
|
<blockquote className="text-sm text-muted-foreground leading-relaxed ml-1.5">
|
|
{chunk.text}
|
|
</blockquote>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{/* Right panel - Summary (TODO), Technical details, */}
|
|
{chunks.length > 0 && (
|
|
<div className="min-w-[200px]">
|
|
<div className="mb-8">
|
|
<h2 className="text-xl font-semibold 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-4">
|
|
<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>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ChunksPage() {
|
|
return (
|
|
<Suspense
|
|
fallback={
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-center">
|
|
<Loader2 className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50 animate-spin" />
|
|
<p className="text-lg text-muted-foreground">Loading...</p>
|
|
</div>
|
|
</div>
|
|
}
|
|
>
|
|
<ChunksPageContent />
|
|
</Suspense>
|
|
);
|
|
}
|
|
|
|
export default function ProtectedChunksPage() {
|
|
return (
|
|
<ProtectedRoute>
|
|
<ChunksPage />
|
|
</ProtectedRoute>
|
|
);
|
|
}
|