450 lines
17 KiB
TypeScript
450 lines
17 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect, useCallback, useRef } from "react"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Search, Loader2, FileText, HardDrive, Building2, Cloud } from "lucide-react"
|
|
import { TbBrandOnedrive } from "react-icons/tb"
|
|
import { SiGoogledrive } from "react-icons/si"
|
|
import { ProtectedRoute } from "@/components/protected-route"
|
|
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context"
|
|
import { useTask } from "@/contexts/task-context"
|
|
import { KnowledgeDropdown } from "@/components/knowledge-dropdown"
|
|
|
|
|
|
interface ChunkResult {
|
|
filename: string
|
|
mimetype: string
|
|
page: number
|
|
text: string
|
|
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 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" />
|
|
case 'local':
|
|
default:
|
|
return <HardDrive className="h-4 w-4 text-muted-foreground" />
|
|
}
|
|
}
|
|
|
|
function SearchPage() {
|
|
const { isMenuOpen } = useTask()
|
|
const { parsedFilterData, isPanelOpen } = useKnowledgeFilter()
|
|
const [query, setQuery] = useState("*")
|
|
const [loading, setLoading] = useState(false)
|
|
const [chunkResults, setChunkResults] = useState<ChunkResult[]>([])
|
|
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) => {
|
|
if (e) e.preventDefault()
|
|
if (!query.trim()) return
|
|
|
|
setLoading(true)
|
|
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
|
|
useEffect(() => {
|
|
if (parsedFilterData?.query) {
|
|
setQuery(parsedFilterData.query)
|
|
}
|
|
}, [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
|
|
|
|
|
|
|
|
|
|
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
|
|
id="search-query"
|
|
type="text"
|
|
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"
|
|
/>
|
|
<Button
|
|
type="submit"
|
|
disabled={!query.trim() || loading}
|
|
variant="secondary"
|
|
className="rounded-lg h-12 w-12 p-0 flex-shrink-0"
|
|
>
|
|
{loading ? (
|
|
<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 && chunkResults.length === 0 && !loading ? (
|
|
<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>
|
|
) : (
|
|
<>
|
|
{/* 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="space-y-4">
|
|
{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>
|
|
{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 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, index) => (
|
|
<tr
|
|
key={index}
|
|
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>
|
|
)
|
|
}
|
|
|
|
export default function ProtectedSearchPage() {
|
|
return (
|
|
<ProtectedRoute>
|
|
<SearchPage />
|
|
</ProtectedRoute>
|
|
)
|
|
}
|