Use new useGetSearchQuery on knowledge page
This commit is contained in:
Lucas Oliveira
parent
67981531b4
commit
fa9075d35a
1 changed files with 180 additions and 365 deletions
|
|
@ -1,325 +1,109 @@
|
||||||
"use client"
|
"use client";
|
||||||
|
|
||||||
import { useState, useEffect, useCallback, useRef } from "react"
|
import {
|
||||||
|
Building2,
|
||||||
import { Button } from "@/components/ui/button"
|
Cloud,
|
||||||
import { Input } from "@/components/ui/input"
|
FileText,
|
||||||
import { Search, Loader2, FileText, HardDrive, Building2, Cloud } from "lucide-react"
|
HardDrive,
|
||||||
import { TbBrandOnedrive } from "react-icons/tb"
|
Loader2,
|
||||||
import { SiGoogledrive } from "react-icons/si"
|
Search,
|
||||||
import { ProtectedRoute } from "@/components/protected-route"
|
} from "lucide-react";
|
||||||
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context"
|
import { type FormEvent, useCallback, useEffect, useState } from "react";
|
||||||
import { useTask } from "@/contexts/task-context"
|
import { SiGoogledrive } from "react-icons/si";
|
||||||
import { KnowledgeDropdown } from "@/components/knowledge-dropdown"
|
import { TbBrandOnedrive } from "react-icons/tb";
|
||||||
|
import { KnowledgeDropdown } from "@/components/knowledge-dropdown";
|
||||||
|
import { ProtectedRoute } from "@/components/protected-route";
|
||||||
interface ChunkResult {
|
import { Button } from "@/components/ui/button";
|
||||||
filename: string
|
import { Input } from "@/components/ui/input";
|
||||||
mimetype: string
|
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
|
||||||
page: number
|
import { useTask } from "@/contexts/task-context";
|
||||||
text: string
|
import { type File, useGetSearchQuery } from "../api/queries/useGetSearchQuery";
|
||||||
score: number
|
|
||||||
source_url?: string
|
|
||||||
owner?: string
|
|
||||||
owner_name?: string
|
|
||||||
owner_email?: string
|
|
||||||
file_size?: number
|
|
||||||
connector_type?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface FileResult {
|
|
||||||
filename: string
|
|
||||||
mimetype: string
|
|
||||||
chunkCount: number
|
|
||||||
avgScore: number
|
|
||||||
source_url?: string
|
|
||||||
owner?: string
|
|
||||||
owner_name?: string
|
|
||||||
owner_email?: string
|
|
||||||
lastModified?: string
|
|
||||||
size?: number
|
|
||||||
connector_type?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface SearchResponse {
|
|
||||||
results: ChunkResult[]
|
|
||||||
files?: FileResult[]
|
|
||||||
error?: string
|
|
||||||
total?: number
|
|
||||||
aggregations?: {
|
|
||||||
data_sources?: { buckets?: Array<{ key: string | number; doc_count: number }> }
|
|
||||||
document_types?: { buckets?: Array<{ key: string | number; doc_count: number }> }
|
|
||||||
owners?: { buckets?: Array<{ key: string | number; doc_count: number }> }
|
|
||||||
connector_types?: { buckets?: Array<{ key: string | number; doc_count: number }> }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Function to get the appropriate icon for a connector type
|
// Function to get the appropriate icon for a connector type
|
||||||
function getSourceIcon(connectorType?: string) {
|
function getSourceIcon(connectorType?: string) {
|
||||||
switch (connectorType) {
|
switch (connectorType) {
|
||||||
case 'google_drive':
|
case "google_drive":
|
||||||
return <SiGoogledrive className="h-4 w-4 text-foreground" />
|
return <SiGoogledrive className="h-4 w-4 text-foreground" />;
|
||||||
case 'onedrive':
|
case "onedrive":
|
||||||
return <TbBrandOnedrive className="h-4 w-4 text-foreground" />
|
return <TbBrandOnedrive className="h-4 w-4 text-foreground" />;
|
||||||
case 'sharepoint':
|
case "sharepoint":
|
||||||
return <Building2 className="h-4 w-4 text-foreground" />
|
return <Building2 className="h-4 w-4 text-foreground" />;
|
||||||
case 's3':
|
case "s3":
|
||||||
return <Cloud className="h-4 w-4 text-foreground" />
|
return <Cloud className="h-4 w-4 text-foreground" />;
|
||||||
case 'local':
|
|
||||||
default:
|
default:
|
||||||
return <HardDrive className="h-4 w-4 text-muted-foreground" />
|
return <HardDrive className="h-4 w-4 text-muted-foreground" />;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function SearchPage() {
|
function SearchPage() {
|
||||||
const { isMenuOpen } = useTask()
|
const { isMenuOpen } = useTask();
|
||||||
const { parsedFilterData, isPanelOpen } = useKnowledgeFilter()
|
const { parsedFilterData, isPanelOpen } = useKnowledgeFilter();
|
||||||
const [query, setQuery] = useState("*")
|
const [query, setQuery] = useState("");
|
||||||
const [loading, setLoading] = useState(false)
|
const [queryInputText, setQueryInputText] = useState("");
|
||||||
const [chunkResults, setChunkResults] = useState<ChunkResult[]>([])
|
const [selectedFile, setSelectedFile] = useState<string | null>(null);
|
||||||
const [fileResults, setFileResults] = useState<FileResult[]>([])
|
|
||||||
const [selectedFile, setSelectedFile] = useState<string | null>(null)
|
|
||||||
const [searchPerformed, setSearchPerformed] = useState(false)
|
|
||||||
const prevFilterDataRef = useRef<string>("")
|
|
||||||
|
|
||||||
const handleSearch = useCallback(async (e?: React.FormEvent) => {
|
const {
|
||||||
if (e) e.preventDefault()
|
data = [],
|
||||||
if (!query.trim()) return
|
isFetching,
|
||||||
|
refetch: refetchSearch,
|
||||||
setLoading(true)
|
} = useGetSearchQuery(query, parsedFilterData);
|
||||||
setSearchPerformed(false)
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Build search payload with global filter data
|
|
||||||
interface SearchPayload {
|
|
||||||
query: string;
|
|
||||||
limit: number;
|
|
||||||
scoreThreshold: number;
|
|
||||||
filters?: {
|
|
||||||
data_sources?: string[];
|
|
||||||
document_types?: string[];
|
|
||||||
owners?: string[];
|
|
||||||
connector_types?: string[];
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const searchPayload: SearchPayload = {
|
|
||||||
query,
|
|
||||||
limit: parsedFilterData?.limit || (query.trim() === "*" ? 10000 : 10), // Maximum allowed limit for wildcard searches
|
|
||||||
scoreThreshold: parsedFilterData?.scoreThreshold || 0
|
|
||||||
}
|
|
||||||
|
|
||||||
// Debug logging for wildcard searches
|
|
||||||
if (query.trim() === "*") {
|
|
||||||
console.log("Wildcard search - parsedFilterData:", parsedFilterData)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add filters from global context if available and not wildcards
|
|
||||||
if (parsedFilterData?.filters) {
|
|
||||||
const filters = parsedFilterData.filters
|
|
||||||
|
|
||||||
// Only include filters if they're not wildcards (not "*")
|
|
||||||
const hasSpecificFilters =
|
|
||||||
!filters.data_sources.includes("*") ||
|
|
||||||
!filters.document_types.includes("*") ||
|
|
||||||
!filters.owners.includes("*") ||
|
|
||||||
(filters.connector_types && !filters.connector_types.includes("*"))
|
|
||||||
|
|
||||||
if (hasSpecificFilters) {
|
|
||||||
const processedFilters: SearchPayload['filters'] = {}
|
|
||||||
|
|
||||||
// Only add filter arrays that don't contain wildcards
|
|
||||||
if (!filters.data_sources.includes("*")) {
|
|
||||||
processedFilters.data_sources = filters.data_sources
|
|
||||||
}
|
|
||||||
if (!filters.document_types.includes("*")) {
|
|
||||||
processedFilters.document_types = filters.document_types
|
|
||||||
}
|
|
||||||
if (!filters.owners.includes("*")) {
|
|
||||||
processedFilters.owners = filters.owners
|
|
||||||
}
|
|
||||||
if (filters.connector_types && !filters.connector_types.includes("*")) {
|
|
||||||
processedFilters.connector_types = filters.connector_types
|
|
||||||
}
|
|
||||||
|
|
||||||
// Only add filters object if it has any actual filters
|
|
||||||
if (Object.keys(processedFilters).length > 0) {
|
|
||||||
searchPayload.filters = processedFilters
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// If all filters are wildcards, omit the filters object entirely
|
|
||||||
}
|
|
||||||
|
|
||||||
const response = await fetch("/api/search", {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
body: JSON.stringify(searchPayload),
|
|
||||||
})
|
|
||||||
|
|
||||||
const result: SearchResponse = await response.json()
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
const chunks = result.results || []
|
|
||||||
|
|
||||||
// Debug logging for wildcard searches
|
|
||||||
if (query.trim() === "*") {
|
|
||||||
console.log("Wildcard search results:", {
|
|
||||||
chunks: chunks.length,
|
|
||||||
totalFromBackend: result.total,
|
|
||||||
searchPayload,
|
|
||||||
firstChunk: chunks[0]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
setChunkResults(chunks)
|
|
||||||
|
|
||||||
// Group chunks by filename to create file results
|
|
||||||
const fileMap = new Map<string, {
|
|
||||||
filename: string
|
|
||||||
mimetype: string
|
|
||||||
chunks: ChunkResult[]
|
|
||||||
totalScore: number
|
|
||||||
source_url?: string
|
|
||||||
owner?: string
|
|
||||||
owner_name?: string
|
|
||||||
owner_email?: string
|
|
||||||
file_size?: number
|
|
||||||
connector_type?: string
|
|
||||||
}>()
|
|
||||||
|
|
||||||
chunks.forEach(chunk => {
|
|
||||||
const existing = fileMap.get(chunk.filename)
|
|
||||||
if (existing) {
|
|
||||||
existing.chunks.push(chunk)
|
|
||||||
existing.totalScore += chunk.score
|
|
||||||
} else {
|
|
||||||
fileMap.set(chunk.filename, {
|
|
||||||
filename: chunk.filename,
|
|
||||||
mimetype: chunk.mimetype,
|
|
||||||
chunks: [chunk],
|
|
||||||
totalScore: chunk.score,
|
|
||||||
source_url: chunk.source_url,
|
|
||||||
owner: chunk.owner,
|
|
||||||
owner_name: chunk.owner_name,
|
|
||||||
owner_email: chunk.owner_email,
|
|
||||||
file_size: chunk.file_size,
|
|
||||||
connector_type: chunk.connector_type
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const files: FileResult[] = Array.from(fileMap.values()).map(file => ({
|
|
||||||
filename: file.filename,
|
|
||||||
mimetype: file.mimetype,
|
|
||||||
chunkCount: file.chunks.length,
|
|
||||||
avgScore: file.totalScore / file.chunks.length,
|
|
||||||
source_url: file.source_url,
|
|
||||||
owner: file.owner,
|
|
||||||
owner_name: file.owner_name,
|
|
||||||
owner_email: file.owner_email,
|
|
||||||
size: file.file_size,
|
|
||||||
connector_type: file.connector_type
|
|
||||||
}))
|
|
||||||
|
|
||||||
setFileResults(files)
|
|
||||||
setSearchPerformed(true)
|
|
||||||
} else {
|
|
||||||
console.error("Search failed:", result.error)
|
|
||||||
setChunkResults([])
|
|
||||||
setFileResults([])
|
|
||||||
setSearchPerformed(true)
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Search error:", error)
|
|
||||||
setChunkResults([])
|
|
||||||
setFileResults([])
|
|
||||||
setSearchPerformed(true)
|
|
||||||
} finally {
|
|
||||||
setLoading(false)
|
|
||||||
}
|
|
||||||
}, [query, parsedFilterData])
|
|
||||||
|
|
||||||
// Update query when global filter changes
|
// Update query when global filter changes
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (parsedFilterData?.query) {
|
if (parsedFilterData?.query) {
|
||||||
setQuery(parsedFilterData.query)
|
setQueryInputText(parsedFilterData.query);
|
||||||
}
|
}
|
||||||
}, [parsedFilterData])
|
}, [parsedFilterData]);
|
||||||
|
|
||||||
// Auto-refresh search when filter changes (but only if search was already performed)
|
|
||||||
useEffect(() => {
|
|
||||||
if (!parsedFilterData) return
|
|
||||||
|
|
||||||
// Create a stable string representation of the filter data for comparison
|
|
||||||
const currentFilterString = JSON.stringify({
|
|
||||||
filters: parsedFilterData.filters,
|
|
||||||
limit: parsedFilterData.limit,
|
|
||||||
scoreThreshold: parsedFilterData.scoreThreshold
|
|
||||||
})
|
|
||||||
|
|
||||||
// Only trigger search if filter data actually changed and we've done a search before
|
|
||||||
if (prevFilterDataRef.current !== "" &&
|
|
||||||
prevFilterDataRef.current !== currentFilterString &&
|
|
||||||
searchPerformed &&
|
|
||||||
query.trim()) {
|
|
||||||
|
|
||||||
console.log("Filter changed, auto-refreshing search")
|
|
||||||
handleSearch()
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update the ref with current filter data
|
|
||||||
prevFilterDataRef.current = currentFilterString
|
|
||||||
}, [parsedFilterData, searchPerformed, query, handleSearch])
|
|
||||||
|
|
||||||
// Auto-search on mount with "*"
|
|
||||||
useEffect(() => {
|
|
||||||
// Only trigger initial search on mount when query is "*"
|
|
||||||
handleSearch()
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, []) // Only run once on mount - ignore handleSearch dependency
|
|
||||||
|
|
||||||
// Listen for knowledge updates and refresh search
|
|
||||||
useEffect(() => {
|
|
||||||
const handleKnowledgeUpdate = () => {
|
|
||||||
console.log("Knowledge updated, refreshing search")
|
|
||||||
handleSearch()
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('knowledgeUpdated', handleKnowledgeUpdate)
|
|
||||||
return () => window.removeEventListener('knowledgeUpdated', handleKnowledgeUpdate)
|
|
||||||
}, [handleSearch])
|
|
||||||
|
|
||||||
|
|
||||||
|
const handleSearch = useCallback(
|
||||||
|
(e?: FormEvent<HTMLFormElement>) => {
|
||||||
|
if (e) e.preventDefault();
|
||||||
|
if (query.trim() === queryInputText.trim()) {
|
||||||
|
refetchSearch();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setQuery(queryInputText);
|
||||||
|
},
|
||||||
|
[queryInputText, refetchSearch, query],
|
||||||
|
);
|
||||||
|
|
||||||
|
const fileResults = data as File[];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`fixed inset-0 md:left-72 top-[53px] flex flex-col transition-all duration-300 ${
|
<div
|
||||||
isMenuOpen && isPanelOpen ? 'md:right-[704px]' : // Both open: 384px (menu) + 320px (KF panel)
|
className={`fixed inset-0 md:left-72 top-[53px] flex flex-col transition-all duration-300 ${
|
||||||
isMenuOpen ? 'md:right-96' : // Only menu open: 384px
|
isMenuOpen && isPanelOpen
|
||||||
isPanelOpen ? 'md:right-80' : // Only KF panel open: 320px
|
? "md:right-[704px]"
|
||||||
'md:right-6' // Neither open: 24px
|
: // 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">
|
<div className="flex-1 flex flex-col min-h-0 px-6 py-6">
|
||||||
{/* Search Input Area */}
|
{/* Search Input Area */}
|
||||||
<div className="flex-shrink-0 mb-6">
|
<div className="flex-shrink-0 mb-6">
|
||||||
<form onSubmit={handleSearch} className="flex gap-3">
|
<form onSubmit={handleSearch} className="flex gap-3">
|
||||||
<Input
|
<Input
|
||||||
|
name="search-query"
|
||||||
id="search-query"
|
id="search-query"
|
||||||
type="text"
|
type="text"
|
||||||
|
defaultValue={parsedFilterData?.query}
|
||||||
|
value={queryInputText}
|
||||||
|
onChange={(e) => setQueryInputText(e.target.value)}
|
||||||
placeholder="Search your documents..."
|
placeholder="Search your documents..."
|
||||||
value={query}
|
|
||||||
onChange={(e) => setQuery(e.target.value)}
|
|
||||||
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"
|
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
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={!query.trim() || loading}
|
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
className="rounded-lg h-12 w-12 p-0 flex-shrink-0"
|
className="rounded-lg h-12 w-12 p-0 flex-shrink-0"
|
||||||
>
|
>
|
||||||
{loading ? (
|
{isFetching ? (
|
||||||
<Loader2 className="h-4 w-4 animate-spin" />
|
<Loader2 className="h-4 w-4 animate-spin" />
|
||||||
) : (
|
) : (
|
||||||
<Search className="h-4 w-4" />
|
<Search className="h-4 w-4" />
|
||||||
|
|
@ -334,48 +118,59 @@ function SearchPage() {
|
||||||
{/* Results Area */}
|
{/* Results Area */}
|
||||||
<div className="flex-1 overflow-y-auto">
|
<div className="flex-1 overflow-y-auto">
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
{fileResults.length === 0 && chunkResults.length === 0 && !loading ? (
|
{fileResults.length === 0 && !isFetching ? (
|
||||||
<div className="text-center py-12">
|
<div className="text-center py-12">
|
||||||
<Search className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
|
<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-lg text-muted-foreground">
|
||||||
|
No documents found
|
||||||
|
</p>
|
||||||
<p className="text-sm text-muted-foreground/70 mt-2">
|
<p className="text-sm text-muted-foreground/70 mt-2">
|
||||||
Try adjusting your search terms
|
Try adjusting your search terms
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<div className="space-y-4">
|
||||||
{/* Results Count */}
|
{/* Results Count */}
|
||||||
<div className="mb-4">
|
<div className="mb-4">
|
||||||
<div className="text-sm text-muted-foreground">
|
<div className="text-sm text-muted-foreground">
|
||||||
{fileResults.length} file{fileResults.length !== 1 ? 's' : ''} found
|
{fileResults.length} file
|
||||||
|
{fileResults.length !== 1 ? "s" : ""} found
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Results Display */}
|
{/* Results Display */}
|
||||||
<div className="space-y-4">
|
<div
|
||||||
|
className={isFetching ? "opacity-50 pointer-events-none" : ""}
|
||||||
|
>
|
||||||
{selectedFile ? (
|
{selectedFile ? (
|
||||||
// Show chunks for selected file
|
// Show chunks for selected file
|
||||||
<>
|
<>
|
||||||
<div className="flex items-center gap-2 mb-4">
|
<div className="flex items-center gap-2 mb-4">
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={() => setSelectedFile(null)}
|
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"
|
||||||
>
|
>
|
||||||
← Back to files
|
|
||||||
</Button>
|
|
||||||
<span className="text-sm text-muted-foreground">
|
|
||||||
Chunks from {selectedFile}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{chunkResults
|
|
||||||
.filter(chunk => chunk.filename === selectedFile)
|
|
||||||
.map((chunk, index) => (
|
|
||||||
<div key={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 justify-between mb-2">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<FileText className="h-4 w-4 text-blue-400" />
|
<FileText className="h-4 w-4 text-blue-400" />
|
||||||
<span className="font-medium truncate">{chunk.filename}</span>
|
<span className="font-medium truncate">
|
||||||
|
{chunk.filename}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-xs text-green-400 bg-green-400/20 px-2 py-1 rounded">
|
<span className="text-xs text-green-400 bg-green-400/20 px-2 py-1 rounded">
|
||||||
{chunk.score.toFixed(2)}
|
{chunk.score.toFixed(2)}
|
||||||
|
|
@ -389,67 +184,87 @@ function SearchPage() {
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
// Show files table
|
// Show files table
|
||||||
<div className="bg-muted/20 rounded-lg border border-border/50 overflow-hidden">
|
<div className="bg-muted/20 rounded-lg border border-border/50 overflow-hidden">
|
||||||
<table className="w-full">
|
<table className="w-full">
|
||||||
<thead>
|
<thead>
|
||||||
<tr className="border-b border-border/50 bg-muted/10">
|
<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">
|
||||||
<th className="text-left p-3 text-sm font-medium text-muted-foreground">Type</th>
|
Source
|
||||||
<th className="text-left p-3 text-sm font-medium text-muted-foreground">Size</th>
|
</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">
|
||||||
<th className="text-left p-3 text-sm font-medium text-muted-foreground">Average score</th>
|
Type
|
||||||
<th className="text-left p-3 text-sm font-medium text-muted-foreground">Owner</th>
|
</th>
|
||||||
</tr>
|
<th className="text-left p-3 text-sm font-medium text-muted-foreground">
|
||||||
</thead>
|
Size
|
||||||
<tbody>
|
</th>
|
||||||
{fileResults.map((file, index) => (
|
<th className="text-left p-3 text-sm font-medium text-muted-foreground">
|
||||||
<tr
|
Matching chunks
|
||||||
key={index}
|
</th>
|
||||||
className="border-b border-border/30 hover:bg-muted/20 cursor-pointer transition-colors"
|
<th className="text-left p-3 text-sm font-medium text-muted-foreground">
|
||||||
onClick={() => setSelectedFile(file.filename)}
|
Average score
|
||||||
>
|
</th>
|
||||||
<td className="p-3">
|
<th className="text-left p-3 text-sm font-medium text-muted-foreground">
|
||||||
<div className="flex items-center gap-2">
|
Owner
|
||||||
{getSourceIcon(file.connector_type)}
|
</th>
|
||||||
<span className="font-medium truncate" title={file.filename}>
|
</tr>
|
||||||
{file.filename}
|
</thead>
|
||||||
</span>
|
<tbody>
|
||||||
</div>
|
{fileResults.map((file) => (
|
||||||
</td>
|
<tr
|
||||||
<td className="p-3 text-sm text-muted-foreground">
|
key={file.filename}
|
||||||
{file.mimetype}
|
className="border-b border-border/30 hover:bg-muted/20 cursor-pointer transition-colors"
|
||||||
</td>
|
onClick={() => setSelectedFile(file.filename)}
|
||||||
<td className="p-3 text-sm text-muted-foreground">
|
>
|
||||||
{file.size ? `${Math.round(file.size / 1024)} KB` : '—'}
|
<td className="p-3">
|
||||||
</td>
|
<div className="flex items-center gap-2">
|
||||||
<td className="p-3 text-sm text-muted-foreground">
|
{getSourceIcon(file.connector_type)}
|
||||||
{file.chunkCount}
|
<span
|
||||||
</td>
|
className="font-medium truncate"
|
||||||
<td className="p-3">
|
title={file.filename}
|
||||||
<span className="text-xs text-green-400 bg-green-400/20 px-2 py-1 rounded">
|
>
|
||||||
{file.avgScore.toFixed(2)}
|
{file.filename}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</div>
|
||||||
<td className="p-3 text-sm text-muted-foreground" title={file.owner_email}>
|
</td>
|
||||||
{file.owner_name || file.owner || '—'}
|
<td className="p-3 text-sm text-muted-foreground">
|
||||||
</td>
|
{file.mimetype}
|
||||||
</tr>
|
</td>
|
||||||
))}
|
<td className="p-3 text-sm text-muted-foreground">
|
||||||
</tbody>
|
{file.size
|
||||||
</table>
|
? `${Math.round(file.size / 1024)} KB`
|
||||||
</div>
|
: "—"}
|
||||||
)}
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function ProtectedSearchPage() {
|
export default function ProtectedSearchPage() {
|
||||||
|
|
@ -457,5 +272,5 @@ export default function ProtectedSearchPage() {
|
||||||
<ProtectedRoute>
|
<ProtectedRoute>
|
||||||
<SearchPage />
|
<SearchPage />
|
||||||
</ProtectedRoute>
|
</ProtectedRoute>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue