gmakstutis/openrag
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add more mutation queries and fix backend to wait for updates

Browse source
This commit is contained in:
Cole Goldsmith 2025-09-19 15:21:18 -05:00
parent 03116937ad
commit 8f3b149034
10 changed files with 501 additions and 392 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

230
frontend/components/knowledge-filter-list.tsx
View file

@ -1,31 +1,22 @@
"use client"; "use client";
import { useState, useEffect, useRef } from "react"; import { useState } from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Card, CardContent } from "@/components/ui/card";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { import { Filter, X, Loader2, Plus, Save } from "lucide-react";
ChevronDown,
Filter,
Search,
X,
Loader2,
Plus,
Save,
} from "lucide-react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { import {
useGetFiltersSearchQuery, useGetFiltersSearchQuery,
type KnowledgeFilter, type KnowledgeFilter,
} from "@/src/app/api/queries/useGetFiltersSearchQuery"; } from "@/src/app/api/queries/useGetFiltersSearchQuery";
import { useCreateFilter } from "@/src/app/api/mutations/useCreateFilter";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
DialogDescription, DialogDescription,
DialogFooter,
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
@ -56,43 +47,22 @@ export function KnowledgeFilterList({
const [createDescription, setCreateDescription] = useState(""); const [createDescription, setCreateDescription] = useState("");
const [creating, setCreating] = useState(false); const [creating, setCreating] = useState(false);
const { const { data, isFetching: loading } = useGetFiltersSearchQuery(
data, searchQuery,
isFetching: loading, 20
refetch, );
} = useGetFiltersSearchQuery(searchQuery, 20, { enabled: true });
const filters: KnowledgeFilter[] = (data ?? []) as KnowledgeFilter[];
const deleteFilter = async (filterId: string, e: React.MouseEvent) => { const filters = data || [];
e.stopPropagation();
try { const createFilterMutation = useCreateFilter();
const response = await fetch(`/api/knowledge-filter/${filterId}`, {
method: "DELETE",
});
if (response.ok) {
// If this was the selected filter, clear selection
if (selectedFilter?.id === filterId) {
onFilterSelect(null);
}
// Refresh list
refetch();
} else {
console.error("Failed to delete knowledge filter");
}
} catch (error) {
console.error("Error deleting knowledge filter:", error);
}
};
const handleFilterSelect = (filter: KnowledgeFilter) => { const handleFilterSelect = (filter: KnowledgeFilter) => {
onFilterSelect(filter); onFilterSelect(filter);
}; };
const handleClearFilter = () => { // const handleClearFilter = () => {
onFilterSelect(null); // onFilterSelect(null);
}; // };
const handleCreateNew = () => { const handleCreateNew = () => {
setShowCreateModal(true); setShowCreateModal(true);
@ -115,43 +85,19 @@ export function KnowledgeFilterList({
scoreThreshold: 0, scoreThreshold: 0,
}; };
const response = await fetch("/api/knowledge-filter", { const result = await createFilterMutation.mutateAsync({
method: "POST", name: createName.trim(),
headers: { description: createDescription.trim(),
"Content-Type": "application/json", queryData: JSON.stringify(defaultFilterData),
},
body: JSON.stringify({
name: createName.trim(),
description: createDescription.trim(),
queryData: JSON.stringify(defaultFilterData),
}),
}); });
const result = await response.json(); // Select the new filter from API response
if (response.ok && result.success) { onFilterSelect(result.filter);
// Create the new filter object
const newFilter: KnowledgeFilter = {
id: result.filter.id,
name: createName.trim(),
description: createDescription.trim(),
query_data: JSON.stringify(defaultFilterData),
owner: result.filter.owner,
created_at: result.filter.created_at,
updated_at: result.filter.updated_at,
};
// Select the new filter // Close modal and reset form
onFilterSelect(newFilter); setShowCreateModal(false);
setCreateName("");
// Close modal and reset form setCreateDescription("");
setShowCreateModal(false);
setCreateName("");
setCreateDescription("");
// Refresh list to include newly created filter
refetch();
} else {
console.error("Failed to create knowledge filter:", result.error);
}
} catch (error) { } catch (error) {
console.error("Error creating knowledge filter:", error); console.error("Error creating knowledge filter:", error);
} finally { } finally {
@ -169,25 +115,6 @@ export function KnowledgeFilterList({
return JSON.parse(queryData) as ParsedQueryData; return JSON.parse(queryData) as ParsedQueryData;
}; };
const getFilterSummary = (filter: KnowledgeFilter): string => {
try {
const parsed = JSON.parse(filter.query_data) as ParsedQueryData;
const parts = [];
if (parsed.query) parts.push(`"${parsed.query}"`);
if (parsed.filters.data_sources.length > 0)
parts.push(`${parsed.filters.data_sources.length} sources`);
if (parsed.filters.document_types.length > 0)
parts.push(`${parsed.filters.document_types.length} types`);
if (parsed.filters.owners.length > 0)
parts.push(`${parsed.filters.owners.length} owners`);
return parts.join(" • ") || "No filters";
} catch {
return "Invalid filter";
}
};
return ( return (
<> <>
<div className="flex flex-col items-center gap-1 px-3"> <div className="flex flex-col items-center gap-1 px-3">
@ -199,6 +126,7 @@ export function KnowledgeFilterList({
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={handleCreateNew} onClick={handleCreateNew}
title="Create New Filter"
className="h-8 px-3" className="h-8 px-3"
> >
<Plus className="h-3 w-3" /> <Plus className="h-3 w-3" />
@ -255,14 +183,6 @@ export function KnowledgeFilterList({
</span> </span>
</div> </div>
</div> </div>
<Button
variant="ghost"
size="sm"
onClick={(e) => deleteFilter(filter.id, e)}
className="opacity-0 group-hover:opacity-100 h-6 w-6 p-0 bg-transparent hover:bg-gray-700 hover:text-white transition-all duration-200 border border-transparent hover:border-gray-600"
>
<X className="h-3 w-3 text-gray-400 hover:text-white" />
</Button>
</div> </div>
)) ))
)} )}
@ -277,62 +197,60 @@ export function KnowledgeFilterList({
knowledge base. knowledge base.
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-4"> <div className="flex flex-col gap-2 space-y-2">
<div className="flex flex-col gap-2 space-y-2"> <div>
<div> <Label htmlFor="filter-name" className="font-medium mb-2 gap-1">
<Label htmlFor="filter-name" className="font-medium"> Name<span className="text-red-400">*</span>
Name<span className="text-red-400">*</span> </Label>
</Label> <Input
<Input id="filter-name"
id="filter-name" type="text"
type="text" placeholder="Enter filter name"
placeholder="Enter filter name" value={createName}
value={createName} onChange={(e) => setCreateName(e.target.value)}
onChange={(e) => setCreateName(e.target.value)} className="mt-1"
className="mt-1" />
/>
</div>
<div>
<Label htmlFor="filter-description" className="font-medium">
Description (optional)
</Label>
<Textarea
id="filter-description"
placeholder="Brief description of this filter"
value={createDescription}
onChange={(e) => setCreateDescription(e.target.value)}
className="mt-1"
rows={3}
/>
</div>
</div> </div>
<div className="flex justify-end gap-2"> <div>
<Button <Label htmlFor="filter-description" className="font-medium mb-2">
variant="outline" Description (optional)
onClick={handleCancelCreate} </Label>
disabled={creating} <Textarea
> id="filter-description"
Cancel placeholder="Brief description of this filter"
</Button> value={createDescription}
<Button onChange={(e) => setCreateDescription(e.target.value)}
onClick={handleCreateFilter} className="mt-1"
disabled={!createName.trim() || creating} rows={3}
className="flex items-center gap-2" />
>
{creating ? (
<>
<Loader2 className="h-4 w-4 animate-spin" />
Creating...
</>
) : (
<>
<Save className="h-4 w-4" />
Create Filter
</>
)}
</Button>
</div> </div>
</div> </div>
<div className="flex justify-end gap-2">
<Button
variant="outline"
onClick={handleCancelCreate}
disabled={creating}
>
Cancel
</Button>
<Button
onClick={handleCreateFilter}
disabled={!createName.trim() || creating}
className="flex items-center gap-2"
>
{creating ? (
<>
<Loader2 className="h-4 w-4 animate-spin" />
Creating...
</>
) : (
<>
<Save className="h-4 w-4" />
Create Filter
</>
)}
</Button>
</div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</> </>

392
frontend/components/knowledge-filter-panel.tsx
View file

@ -1,93 +1,106 @@
"use client" "use client";
import { useState, useEffect } from 'react'
import { X, Edit3, Save, Settings, RefreshCw } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { MultiSelect } from '@/components/ui/multi-select'
import { Slider } from '@/components/ui/slider'
import { useKnowledgeFilter } from '@/contexts/knowledge-filter-context'
import { useState, useEffect } from "react";
import { X, Edit3, Save, Settings, RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { MultiSelect } from "@/components/ui/multi-select";
import { Slider } from "@/components/ui/slider";
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
import { useDeleteFilter } from "@/app/api/mutations/useDeleteFilter";
interface FacetBucket { interface FacetBucket {
key: string key: string;
count: number count: number;
} }
interface AvailableFacets { interface AvailableFacets {
data_sources: FacetBucket[] data_sources: FacetBucket[];
document_types: FacetBucket[] document_types: FacetBucket[];
owners: FacetBucket[] owners: FacetBucket[];
connector_types: FacetBucket[] connector_types: FacetBucket[];
} }
export function KnowledgeFilterPanel() { export function KnowledgeFilterPanel() {
const { selectedFilter, parsedFilterData, setSelectedFilter, isPanelOpen, closePanelOnly } = useKnowledgeFilter() const {
selectedFilter,
parsedFilterData,
setSelectedFilter,
isPanelOpen,
closePanelOnly,
} = useKnowledgeFilter();
const deleteFilterMutation = useDeleteFilter();
// Edit mode states // Edit mode states
const [isEditingMeta, setIsEditingMeta] = useState(false) const [isEditingMeta, setIsEditingMeta] = useState(false);
const [editingName, setEditingName] = useState('') const [editingName, setEditingName] = useState("");
const [editingDescription, setEditingDescription] = useState('') const [editingDescription, setEditingDescription] = useState("");
const [isSaving, setIsSaving] = useState(false) const [isSaving, setIsSaving] = useState(false);
// Filter configuration states (mirror search page exactly) // Filter configuration states (mirror search page exactly)
const [query, setQuery] = useState('') const [query, setQuery] = useState("");
const [selectedFilters, setSelectedFilters] = useState({ const [selectedFilters, setSelectedFilters] = useState({
data_sources: ["*"] as string[], // Default to wildcard data_sources: ["*"] as string[], // Default to wildcard
document_types: ["*"] as string[], // Default to wildcard document_types: ["*"] as string[], // Default to wildcard
owners: ["*"] as string[], // Default to wildcard owners: ["*"] as string[], // Default to wildcard
connector_types: ["*"] as string[] // Default to wildcard connector_types: ["*"] as string[], // Default to wildcard
}) });
const [resultLimit, setResultLimit] = useState(10) const [resultLimit, setResultLimit] = useState(10);
const [scoreThreshold, setScoreThreshold] = useState(0) const [scoreThreshold, setScoreThreshold] = useState(0);
// Available facets (loaded from API) // Available facets (loaded from API)
const [availableFacets, setAvailableFacets] = useState<AvailableFacets>({ const [availableFacets, setAvailableFacets] = useState<AvailableFacets>({
data_sources: [], data_sources: [],
document_types: [], document_types: [],
owners: [], owners: [],
connector_types: [] connector_types: [],
}) });
// Load current filter data into controls // Load current filter data into controls
useEffect(() => { useEffect(() => {
if (selectedFilter && parsedFilterData) { if (selectedFilter && parsedFilterData) {
setQuery(parsedFilterData.query || '') setQuery(parsedFilterData.query || "");
// Set the actual filter selections from the saved knowledge filter // Set the actual filter selections from the saved knowledge filter
const filters = parsedFilterData.filters const filters = parsedFilterData.filters;
// Use the exact selections from the saved filter // Use the exact selections from the saved filter
// Empty arrays mean "none selected" not "all selected" // Empty arrays mean "none selected" not "all selected"
const processedFilters = { const processedFilters = {
data_sources: filters.data_sources, data_sources: filters.data_sources,
document_types: filters.document_types, document_types: filters.document_types,
owners: filters.owners, owners: filters.owners,
connector_types: filters.connector_types || ["*"] connector_types: filters.connector_types || ["*"],
} };
console.log("[DEBUG] Loading filter selections:", processedFilters) console.log("[DEBUG] Loading filter selections:", processedFilters);
setSelectedFilters(processedFilters) setSelectedFilters(processedFilters);
setResultLimit(parsedFilterData.limit || 10) setResultLimit(parsedFilterData.limit || 10);
setScoreThreshold(parsedFilterData.scoreThreshold || 0) setScoreThreshold(parsedFilterData.scoreThreshold || 0);
setEditingName(selectedFilter.name) setEditingName(selectedFilter.name);
setEditingDescription(selectedFilter.description || '') setEditingDescription(selectedFilter.description || "");
} }
}, [selectedFilter, parsedFilterData]) }, [selectedFilter, parsedFilterData]);
// Load available facets from API // Load available facets from API
useEffect(() => { useEffect(() => {
if (isPanelOpen) { if (isPanelOpen) {
loadAvailableFacets() loadAvailableFacets();
} }
}, [isPanelOpen]) }, [isPanelOpen]);
const loadAvailableFacets = async () => { const loadAvailableFacets = async () => {
console.log("[DEBUG] Loading available facets...") console.log("[DEBUG] Loading available facets...");
try { try {
// Do a search to get facets (similar to search page) // Do a search to get facets (similar to search page)
const response = await fetch("/api/search", { const response = await fetch("/api/search", {
@ -95,39 +108,36 @@ export function KnowledgeFilterPanel() {
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
body: JSON.stringify({ body: JSON.stringify({
query: "*", // Use wildcard like search page to get all documents/facets query: "*", // Use wildcard like search page to get all documents/facets
limit: 1, limit: 1,
scoreThreshold: 0 scoreThreshold: 0,
// Omit filters entirely to get all available facets // Omit filters entirely to get all available facets
}), }),
}) });
const result = await response.json();
console.log("[DEBUG] Search API response:", result);
const result = await response.json()
console.log("[DEBUG] Search API response:", result)
if (response.ok && result.aggregations) { if (response.ok && result.aggregations) {
const facets = { const facets = {
data_sources: result.aggregations.data_sources?.buckets || [], data_sources: result.aggregations.data_sources?.buckets || [],
document_types: result.aggregations.document_types?.buckets || [], document_types: result.aggregations.document_types?.buckets || [],
owners: result.aggregations.owners?.buckets || [], owners: result.aggregations.owners?.buckets || [],
connector_types: result.aggregations.connector_types?.buckets || [] connector_types: result.aggregations.connector_types?.buckets || [],
} };
console.log("[DEBUG] Setting facets:", facets) console.log("[DEBUG] Setting facets:", facets);
setAvailableFacets(facets) setAvailableFacets(facets);
} else { } else {
console.log("[DEBUG] No aggregations in response or response not ok") console.log("[DEBUG] No aggregations in response or response not ok");
} }
} catch (error) { } catch (error) {
console.error("Failed to load available facets:", error) console.error("Failed to load available facets:", error);
} }
} };
// Don't render if panel is closed or no filter selected // Don't render if panel is closed or no filter selected
if (!isPanelOpen || !selectedFilter || !parsedFilterData) return null if (!isPanelOpen || !selectedFilter || !parsedFilterData) return null;
const selectAllFilters = () => { const selectAllFilters = () => {
// Use wildcards instead of listing all specific items // Use wildcards instead of listing all specific items
@ -135,116 +145,135 @@ export function KnowledgeFilterPanel() {
data_sources: ["*"], data_sources: ["*"],
document_types: ["*"], document_types: ["*"],
owners: ["*"], owners: ["*"],
connector_types: ["*"] connector_types: ["*"],
}) });
} };
const clearAllFilters = () => { const clearAllFilters = () => {
setSelectedFilters({ setSelectedFilters({
data_sources: [], data_sources: [],
document_types: [], document_types: [],
owners: [], owners: [],
connector_types: [] connector_types: [],
}) });
} };
const handleEditMeta = () => { const handleEditMeta = () => {
setIsEditingMeta(true) setIsEditingMeta(true);
} };
const handleCancelEdit = () => { const handleCancelEdit = () => {
setIsEditingMeta(false) setIsEditingMeta(false);
setEditingName(selectedFilter.name) setEditingName(selectedFilter.name);
setEditingDescription(selectedFilter.description || '') setEditingDescription(selectedFilter.description || "");
} };
const handleSaveMeta = async () => { const handleSaveMeta = async () => {
if (!editingName.trim()) return if (!editingName.trim()) return;
setIsSaving(true) setIsSaving(true);
try { try {
const response = await fetch(`/api/knowledge-filter/${selectedFilter.id}`, { const response = await fetch(
method: 'PUT', `/api/knowledge-filter/${selectedFilter.id}`,
headers: { {
'Content-Type': 'application/json', method: "PUT",
}, headers: {
body: JSON.stringify({ "Content-Type": "application/json",
name: editingName.trim(), },
description: editingDescription.trim(), body: JSON.stringify({
}), name: editingName.trim(),
}) description: editingDescription.trim(),
}),
}
);
const result = await response.json() const result = await response.json();
if (response.ok && result.success) { if (response.ok && result.success) {
const updatedFilter = { const updatedFilter = {
...selectedFilter, ...selectedFilter,
name: editingName.trim(), name: editingName.trim(),
description: editingDescription.trim(), description: editingDescription.trim(),
updated_at: new Date().toISOString(), updated_at: new Date().toISOString(),
} };
setSelectedFilter(updatedFilter) setSelectedFilter(updatedFilter);
setIsEditingMeta(false) setIsEditingMeta(false);
} }
} catch (error) { } catch (error) {
console.error('Error updating filter:', error) console.error("Error updating filter:", error);
} finally { } finally {
setIsSaving(false) setIsSaving(false);
} }
} };
const handleSaveConfiguration = async () => { const handleSaveConfiguration = async () => {
const filterData = { const filterData = {
query, query,
filters: selectedFilters, filters: selectedFilters,
limit: resultLimit, limit: resultLimit,
scoreThreshold scoreThreshold,
} };
setIsSaving(true) setIsSaving(true);
try { try {
const response = await fetch(`/api/knowledge-filter/${selectedFilter.id}`, { const response = await fetch(
method: 'PUT', `/api/knowledge-filter/${selectedFilter.id}`,
headers: { {
'Content-Type': 'application/json', method: "PUT",
}, headers: {
body: JSON.stringify({ "Content-Type": "application/json",
queryData: JSON.stringify(filterData) },
}), body: JSON.stringify({
}) queryData: JSON.stringify(filterData),
}),
}
);
const result = await response.json() const result = await response.json();
if (response.ok && result.success) { if (response.ok && result.success) {
// Update the filter in context // Update the filter in context
const updatedFilter = { const updatedFilter = {
...selectedFilter, ...selectedFilter,
query_data: JSON.stringify(filterData), query_data: JSON.stringify(filterData),
updated_at: new Date().toISOString(), updated_at: new Date().toISOString(),
} };
setSelectedFilter(updatedFilter) setSelectedFilter(updatedFilter);
} }
} catch (error) { } catch (error) {
console.error('Error updating filter configuration:', error) console.error("Error updating filter configuration:", error);
} finally { } finally {
setIsSaving(false) setIsSaving(false);
} }
} };
const formatDate = (dateString: string) => { const formatDate = (dateString: string) => {
return new Date(dateString).toLocaleDateString('en-US', { return new Date(dateString).toLocaleDateString("en-US", {
year: 'numeric', year: "numeric",
month: 'short', month: "short",
day: 'numeric', day: "numeric",
hour: '2-digit', hour: "2-digit",
minute: '2-digit' minute: "2-digit",
}) });
} };
const handleFilterChange = (facetType: keyof typeof selectedFilters, newValues: string[]) => { const handleFilterChange = (
setSelectedFilters(prev => ({ facetType: keyof typeof selectedFilters,
newValues: string[]
) => {
setSelectedFilters((prev) => ({
...prev, ...prev,
[facetType]: newValues [facetType]: newValues,
})) }));
} };
const handleDeleteFilter = async () => {
const result = await deleteFilterMutation.mutateAsync({
id: selectedFilter.id,
});
if (result.success) {
setSelectedFilter(null);
closePanelOnly();
}
};
return ( return (
<div className="fixed right-0 top-14 bottom-0 w-80 bg-background border-l border-border/40 z-40 overflow-y-auto"> <div className="fixed right-0 top-14 bottom-0 w-80 bg-background border-l border-border/40 z-40 overflow-y-auto">
@ -301,7 +330,7 @@ export function KnowledgeFilterPanel() {
className="flex-1" className="flex-1"
> >
<Save className="h-3 w-3 mr-1" /> <Save className="h-3 w-3 mr-1" />
{isSaving ? 'Saving...' : 'Save'} {isSaving ? "Saving..." : "Save"}
</Button> </Button>
<Button <Button
onClick={handleCancelEdit} onClick={handleCancelEdit}
@ -317,7 +346,9 @@ export function KnowledgeFilterPanel() {
<div className="space-y-3"> <div className="space-y-3">
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="flex-1"> <div className="flex-1">
<h3 className="font-semibold text-lg">{selectedFilter.name}</h3> <h3 className="font-semibold text-lg">
{selectedFilter.name}
</h3>
{selectedFilter.description && ( {selectedFilter.description && (
<p className="text-sm text-muted-foreground mt-1"> <p className="text-sm text-muted-foreground mt-1">
{selectedFilter.description} {selectedFilter.description}
@ -336,7 +367,10 @@ export function KnowledgeFilterPanel() {
<div className="text-xs text-muted-foreground"> <div className="text-xs text-muted-foreground">
Created {formatDate(selectedFilter.created_at)} Created {formatDate(selectedFilter.created_at)}
{selectedFilter.updated_at !== selectedFilter.created_at && ( {selectedFilter.updated_at !== selectedFilter.created_at && (
<span> • Updated {formatDate(selectedFilter.updated_at)}</span> <span>
{" "}
• Updated {formatDate(selectedFilter.updated_at)}
</span>
)} )}
</div> </div>
</div> </div>
@ -345,7 +379,9 @@ export function KnowledgeFilterPanel() {
{/* Search Query */} {/* Search Query */}
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="search-query" className="text-sm font-medium">Search Query</Label> <Label htmlFor="search-query" className="text-sm font-medium">
Search Query
</Label>
<Input <Input
id="search-query" id="search-query"
type="text" type="text"
@ -361,13 +397,15 @@ export function KnowledgeFilterPanel() {
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-sm font-medium">Data Sources</Label> <Label className="text-sm font-medium">Data Sources</Label>
<MultiSelect <MultiSelect
options={(availableFacets.data_sources || []).map(bucket => ({ options={(availableFacets.data_sources || []).map((bucket) => ({
value: bucket.key, value: bucket.key,
label: bucket.key, label: bucket.key,
count: bucket.count count: bucket.count,
}))} }))}
value={selectedFilters.data_sources} value={selectedFilters.data_sources}
onValueChange={(values) => handleFilterChange('data_sources', values)} onValueChange={(values) =>
handleFilterChange("data_sources", values)
}
placeholder="Select data sources..." placeholder="Select data sources..."
allOptionLabel="All Data Sources" allOptionLabel="All Data Sources"
/> />
@ -376,13 +414,17 @@ export function KnowledgeFilterPanel() {
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-sm font-medium">Document Types</Label> <Label className="text-sm font-medium">Document Types</Label>
<MultiSelect <MultiSelect
options={(availableFacets.document_types || []).map(bucket => ({ options={(availableFacets.document_types || []).map(
value: bucket.key, (bucket) => ({
label: bucket.key, value: bucket.key,
count: bucket.count label: bucket.key,
}))} count: bucket.count,
})
)}
value={selectedFilters.document_types} value={selectedFilters.document_types}
onValueChange={(values) => handleFilterChange('document_types', values)} onValueChange={(values) =>
handleFilterChange("document_types", values)
}
placeholder="Select document types..." placeholder="Select document types..."
allOptionLabel="All Document Types" allOptionLabel="All Document Types"
/> />
@ -391,13 +433,13 @@ export function KnowledgeFilterPanel() {
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-sm font-medium">Owners</Label> <Label className="text-sm font-medium">Owners</Label>
<MultiSelect <MultiSelect
options={(availableFacets.owners || []).map(bucket => ({ options={(availableFacets.owners || []).map((bucket) => ({
value: bucket.key, value: bucket.key,
label: bucket.key, label: bucket.key,
count: bucket.count count: bucket.count,
}))} }))}
value={selectedFilters.owners} value={selectedFilters.owners}
onValueChange={(values) => handleFilterChange('owners', values)} onValueChange={(values) => handleFilterChange("owners", values)}
placeholder="Select owners..." placeholder="Select owners..."
allOptionLabel="All Owners" allOptionLabel="All Owners"
/> />
@ -406,13 +448,17 @@ export function KnowledgeFilterPanel() {
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-sm font-medium">Sources</Label> <Label className="text-sm font-medium">Sources</Label>
<MultiSelect <MultiSelect
options={(availableFacets.connector_types || []).map(bucket => ({ options={(availableFacets.connector_types || []).map(
value: bucket.key, (bucket) => ({
label: bucket.key, value: bucket.key,
count: bucket.count label: bucket.key,
}))} count: bucket.count,
})
)}
value={selectedFilters.connector_types} value={selectedFilters.connector_types}
onValueChange={(values) => handleFilterChange('connector_types', values)} onValueChange={(values) =>
handleFilterChange("connector_types", values)
}
placeholder="Select sources..." placeholder="Select sources..."
allOptionLabel="All Sources" allOptionLabel="All Sources"
/> />
@ -420,18 +466,18 @@ export function KnowledgeFilterPanel() {
{/* All/None buttons */} {/* All/None buttons */}
<div className="flex gap-2"> <div className="flex gap-2">
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
onClick={selectAllFilters} onClick={selectAllFilters}
className="h-auto px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 border-border/50" className="h-auto px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 border-border/50"
> >
All All
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
onClick={clearAllFilters} onClick={clearAllFilters}
className="h-auto px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 border-border/50" className="h-auto px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 border-border/50"
> >
None None
@ -449,11 +495,14 @@ export function KnowledgeFilterPanel() {
max="1000" max="1000"
value={resultLimit} value={resultLimit}
onChange={(e) => { onChange={(e) => {
const newLimit = Math.max(1, Math.min(1000, parseInt(e.target.value) || 1)) const newLimit = Math.max(
setResultLimit(newLimit) 1,
Math.min(1000, parseInt(e.target.value) || 1)
);
setResultLimit(newLimit);
}} }}
className="h-6 text-xs text-right px-2 bg-muted/30 !border-0 rounded ml-auto focus:ring-0 focus:outline-none" className="h-6 text-xs text-right px-2 bg-muted/30 !border-0 rounded ml-auto focus:ring-0 focus:outline-none"
style={{ width: '70px' }} style={{ width: "70px" }}
/> />
</div> </div>
<Slider <Slider
@ -476,9 +525,11 @@ export function KnowledgeFilterPanel() {
max="5" max="5"
step="0.1" step="0.1"
value={scoreThreshold} value={scoreThreshold}
onChange={(e) => setScoreThreshold(parseFloat(e.target.value) || 0)} onChange={(e) =>
setScoreThreshold(parseFloat(e.target.value) || 0)
}
className="h-6 text-xs text-right px-2 bg-muted/30 !border-0 rounded ml-auto focus:ring-0 focus:outline-none" className="h-6 text-xs text-right px-2 bg-muted/30 !border-0 rounded ml-auto focus:ring-0 focus:outline-none"
style={{ width: '70px' }} style={{ width: "70px" }}
/> />
</div> </div>
<Slider <Slider
@ -493,7 +544,7 @@ export function KnowledgeFilterPanel() {
</div> </div>
{/* Save Configuration Button */} {/* Save Configuration Button */}
<div className="pt-4 border-t border-border/50"> <div className="flex flex-col gap-3 pt-4 border-t border-border/50">
<Button <Button
onClick={handleSaveConfiguration} onClick={handleSaveConfiguration}
disabled={isSaving} disabled={isSaving}
@ -512,10 +563,17 @@ export function KnowledgeFilterPanel() {
</> </>
)} )}
</Button> </Button>
<Button
variant="destructive"
className="w-full"
onClick={handleDeleteFilter}
>
Delete Filter
</Button>
</div> </div>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
) );
} }

2
frontend/components/ui/textarea.tsx
View file

@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
<textarea <textarea
data-slot="textarea" data-slot="textarea"
className={cn( className={cn(
"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "primary-input !placeholder-transparent",
className className
)} )}
{...props} {...props}

50
frontend/src/app/api/[...path]/route.ts
View file

@ -50,35 +50,61 @@ async function proxyRequest(
try { try {
let body: string | ArrayBuffer | undefined = undefined; let body: string | ArrayBuffer | undefined = undefined;
let willSendBody = false;
if (request.method !== 'GET' && request.method !== 'HEAD') { if (request.method !== 'GET' && request.method !== 'HEAD') {
const contentType = request.headers.get('content-type') || ''; const contentType = request.headers.get('content-type') || '';
const contentLength = request.headers.get('content-length');
// For file uploads (multipart/form-data), preserve binary data // For file uploads (multipart/form-data), preserve binary data
if (contentType.includes('multipart/form-data')) { if (contentType.includes('multipart/form-data')) {
body = await request.arrayBuffer(); const buf = await request.arrayBuffer();
if (buf && buf.byteLength > 0) {
body = buf;
willSendBody = true;
}
} else { } else {
// For JSON and other text-based content, use text // For JSON and other text-based content, use text
body = await request.text(); const text = await request.text();
if (text && text.length > 0) {
body = text;
willSendBody = true;
}
}
// Guard against incorrect non-zero content-length when there is no body
if (!willSendBody && contentLength) {
// We'll drop content-length/header below
} }
} }
const headers = new Headers(); const headers = new Headers();
// Copy relevant headers from the original request // Copy relevant headers from the original request
for (const [key, value] of request.headers.entries()) { for (const [key, value] of request.headers.entries()) {
if (!key.toLowerCase().startsWith('host') && const lower = key.toLowerCase();
!key.toLowerCase().startsWith('x-forwarded') && if (
!key.toLowerCase().startsWith('x-real-ip')) { lower.startsWith('host') ||
headers.set(key, value); lower.startsWith('x-forwarded') ||
lower.startsWith('x-real-ip') ||
lower === 'content-length' ||
(!willSendBody && lower === 'content-type')
) {
continue;
} }
headers.set(key, value);
} }
const response = await fetch(backendUrl, { const init: RequestInit = {
method: request.method, method: request.method,
headers, headers,
body, };
}); if (willSendBody) {
// Convert ArrayBuffer to Uint8Array to satisfy BodyInit in all environments
const bodyInit: BodyInit = typeof body === 'string' ? body : new Uint8Array(body as ArrayBuffer);
init.body = bodyInit;
}
const response = await fetch(backendUrl, init);
const responseBody = await response.text(); const responseBody = await response.text();
const responseHeaders = new Headers(); const responseHeaders = new Headers();

50
frontend/src/app/api/mutations/useCreateFilter.ts Normal file
View file

@ -0,0 +1,50 @@
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { KnowledgeFilter } from "../queries/useGetFiltersSearchQuery";
export interface CreateFilterRequest {
name: string;
description?: string;
queryData: string; // stringified ParsedQueryData
}
export interface CreateFilterResponse {
success: boolean;
filter: KnowledgeFilter;
message?: string;
}
async function createFilter(
data: CreateFilterRequest,
): Promise<CreateFilterResponse> {
const response = await fetch("/api/knowledge-filter", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
name: data.name,
description: data.description ?? "",
queryData: data.queryData,
}),
});
const json = await response.json().catch(() => ({}));
if (!response.ok) {
const errorMessage = (json && (json.error as string)) || "Failed to create knowledge filter";
throw new Error(errorMessage);
}
return json as CreateFilterResponse;
}
export const useCreateFilter = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: createFilter,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["knowledge-filters"], exact: false });
},
});
};

39
frontend/src/app/api/mutations/useDeleteFilter.ts Normal file
View file

@ -0,0 +1,39 @@
import { useMutation, useQueryClient } from "@tanstack/react-query";
export interface DeleteFilterRequest {
id: string;
}
export interface DeleteFilterResponse {
success: boolean;
message?: string;
}
async function deleteFilter(
data: DeleteFilterRequest,
): Promise<DeleteFilterResponse> {
const response = await fetch(`/api/knowledge-filter/${data.id}`, {
method: "DELETE",
});
const json = await response.json().catch(() => ({}));
if (!response.ok) {
const errorMessage = (json && (json.error as string)) || "Failed to delete knowledge filter";
throw new Error(errorMessage);
}
return (json as DeleteFilterResponse) || { success: true };
}
export const useDeleteFilter = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: deleteFilter,
onSuccess: () => {
// Invalidate filters queries so UI refreshes automatically
queryClient.invalidateQueries({ queryKey: ["knowledge-filters"], exact: false });
},
});
};

44
frontend/src/app/api/queries/useGetFiltersSearchQuery.ts
View file

@ -1,7 +1,7 @@
import { import {
type UseQueryOptions,
useQuery, useQuery,
useQueryClient, useQueryClient,
type UseQueryOptions,
} from "@tanstack/react-query"; } from "@tanstack/react-query";
export interface KnowledgeFilter { export interface KnowledgeFilter {
@ -14,50 +14,34 @@ export interface KnowledgeFilter {
updated_at: string; updated_at: string;
} }
export interface FiltersSearchResponse {
success: boolean;
filters: KnowledgeFilter[];
error?: string;
}
export const useGetFiltersSearchQuery = ( export const useGetFiltersSearchQuery = (
search: string, search: string,
limit = 20, limit = 20,
options?: Omit<UseQueryOptions, "queryKey" | "queryFn"> options?: Omit<UseQueryOptions<KnowledgeFilter[]>, "queryKey" | "queryFn">
) => { ) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
async function getFilters(): Promise<KnowledgeFilter[]> { async function getFilters(): Promise<KnowledgeFilter[]> {
try { const response = await fetch("/api/knowledge-filter/search", {
const response = await fetch("/api/knowledge-filter/search", { method: "POST",
method: "POST", headers: { "Content-Type": "application/json" },
headers: { body: JSON.stringify({ query: search, limit }),
"Content-Type": "application/json", });
},
body: JSON.stringify({ query: search, limit }),
});
const result: FiltersSearchResponse = await response.json(); const json = await response.json();
if (response.ok && result.success) { if (!response.ok || !json.success) {
return result.filters || []; // ensure we always return a KnowledgeFilter[] to satisfy the return type
}
console.error("Failed to load knowledge filters:", result.error);
return [];
} catch (error) {
console.error("Error loading knowledge filters:", error);
return []; return [];
} }
return (json.filters || []) as KnowledgeFilter[];
} }
const queryResult = useQuery( return useQuery<KnowledgeFilter[]>(
{ {
queryKey: ["knowledge-filters", search, limit], queryKey: ["knowledge-filters", search, limit],
placeholderData: (prev) => prev,
queryFn: getFilters, queryFn: getFilters,
...options, ...options,
}, },
queryClient, queryClient
); );
};
return queryResult;
};

43
frontend/src/app/knowledge/page.tsx
View file

@ -3,10 +3,12 @@
import { import {
Building2, Building2,
Cloud, Cloud,
Filter,
HardDrive, HardDrive,
Loader2, Loader2,
Search, Search,
Trash2, Trash2,
X,
} from "lucide-react"; } from "lucide-react";
import { AgGridReact, CustomCellRendererProps } from "ag-grid-react"; import { AgGridReact, CustomCellRendererProps } from "ag-grid-react";
import { import {
@ -22,7 +24,6 @@ import { TbBrandOnedrive } from "react-icons/tb";
import { KnowledgeDropdown } from "@/components/knowledge-dropdown"; import { KnowledgeDropdown } from "@/components/knowledge-dropdown";
import { ProtectedRoute } from "@/components/protected-route"; import { ProtectedRoute } from "@/components/protected-route";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context"; import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
import { useTask } from "@/contexts/task-context"; import { useTask } from "@/contexts/task-context";
import { type File, useGetSearchQuery } from "../api/queries/useGetSearchQuery"; import { type File, useGetSearchQuery } from "../api/queries/useGetSearchQuery";
@ -59,7 +60,8 @@ function getSourceIcon(connectorType?: string) {
function SearchPage() { function SearchPage() {
const router = useRouter(); const router = useRouter();
const { isMenuOpen } = useTask(); const { isMenuOpen } = useTask();
const { parsedFilterData, isPanelOpen } = useKnowledgeFilter(); const { selectedFilter, setSelectedFilter, parsedFilterData, isPanelOpen } =
useKnowledgeFilter();
const [query, setQuery] = useState(""); const [query, setQuery] = useState("");
const [queryInputText, setQueryInputText] = useState(""); const [queryInputText, setQueryInputText] = useState("");
const [selectedRows, setSelectedRows] = useState<File[]>([]); const [selectedRows, setSelectedRows] = useState<File[]>([]);
@ -244,18 +246,31 @@ function SearchPage() {
</div> </div>
{/* Search Input Area */} {/* Search Input Area */}
<div className="flex-shrink-0 mb-6 lg:max-w-[75%] xl:max-w-[50%]"> <div className="flex-shrink-0 mb-6 xl:max-w-[75%]">
<form onSubmit={handleSearch} className="flex gap-3"> <form onSubmit={handleSearch} className="flex gap-3">
<Input <div className="primary-input !flex items-center flex-nowrap gap-2 focus-within:border-foreground transition-colors !py-0">
name="search-query" {selectedFilter?.name && (
id="search-query" <div className="flex items-center gap-2 bg-accent text-accent-foreground px-1 py-0.5 rounded max-w-[300px]">
type="text" <Filter className="h-3 w-3 flex-shrink-0 ml-1" />
defaultValue={parsedFilterData?.query} <span className="truncate">{selectedFilter?.name}</span>
value={queryInputText} <X
onChange={(e) => setQueryInputText(e.target.value)} aria-label="Remove filter"
placeholder="Search your documents..." className="h-4 w-4 flex-shrink-0 cursor-pointer"
className="flex-1 bg-muted/20 rounded-lg border border-border/50 px-4 py-3 focus-visible:ring-1 focus-visible:ring-ring" onClick={() => setSelectedFilter(null)}
/> />
</div>
)}
<input
className="bg-transparent w-full h-full focus:outline-none focus-visible:outline-none placeholder:font-mono"
name="search-query"
id="search-query"
type="text"
placeholder="Search your documents..."
onChange={(e) => setQueryInputText(e.target.value)}
value={queryInputText}
defaultValue={parsedFilterData?.query}
/>
</div>
<Button <Button
type="submit" type="submit"
variant="outline" variant="outline"
@ -298,8 +313,8 @@ function SearchPage() {
rowMultiSelectWithClick={false} rowMultiSelectWithClick={false}
suppressRowClickSelection={true} suppressRowClickSelection={true}
getRowId={(params) => params.data.filename} getRowId={(params) => params.data.filename}
domLayout="autoHeight"
onSelectionChanged={onSelectionChanged} onSelectionChanged={onSelectionChanged}
suppressHorizontalScroll={false}
noRowsOverlayComponent={() => ( noRowsOverlayComponent={() => (
<div className="text-center"> <div className="text-center">
<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" />

9
frontend/src/components/layout-wrapper.tsx
View file

@ -6,7 +6,6 @@ import { Button } from "@/components/ui/button"
import { Navigation } from "@/components/navigation" import { Navigation } from "@/components/navigation"
import { UserNav } from "@/components/user-nav" import { UserNav } from "@/components/user-nav"
import { TaskNotificationMenu } from "@/components/task-notification-menu" import { TaskNotificationMenu } from "@/components/task-notification-menu"
import { KnowledgeFilterDropdown } from "@/components/knowledge-filter-dropdown"
import { KnowledgeFilterPanel } from "@/components/knowledge-filter-panel" import { KnowledgeFilterPanel } from "@/components/knowledge-filter-panel"
// import { GitHubStarButton } from "@/components/github-star-button" // import { GitHubStarButton } from "@/components/github-star-button"
// import { DiscordLink } from "@/components/discord-link" // import { DiscordLink } from "@/components/discord-link"
@ -18,7 +17,7 @@ import { Loader2 } from "lucide-react"
export function LayoutWrapper({ children }: { children: React.ReactNode }) { export function LayoutWrapper({ children }: { children: React.ReactNode }) {
const pathname = usePathname() const pathname = usePathname()
const { tasks, isMenuOpen, toggleMenu } = useTask() const { tasks, isMenuOpen, toggleMenu } = useTask()
const { selectedFilter, setSelectedFilter, isPanelOpen } = useKnowledgeFilter() const { isPanelOpen } = useKnowledgeFilter()
const { isLoading } = useAuth() const { isLoading } = useAuth()
// List of paths that should not show navigation // List of paths that should not show navigation
@ -68,12 +67,6 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
</div> </div>
<div className="header-end-division"> <div className="header-end-division">
<div className="header-end-display"> <div className="header-end-display">
{/* Knowledge Filter Dropdown */}
<KnowledgeFilterDropdown
selectedFilter={selectedFilter}
onFilterSelect={setSelectedFilter}
/>
{/* GitHub Star Button */} {/* GitHub Star Button */}
{/* <GitHubStarButton repo="phact/openrag" /> */} {/* <GitHubStarButton repo="phact/openrag" /> */}

34
src/services/knowledge_filter_service.py
View file

@ -19,10 +19,18 @@ class KnowledgeFilterService:
# Index the knowledge filter document # Index the knowledge filter document
result = await opensearch_client.index( result = await opensearch_client.index(
index=KNOWLEDGE_FILTERS_INDEX_NAME, id=filter_doc["id"], body=filter_doc index=KNOWLEDGE_FILTERS_INDEX_NAME,
id=filter_doc["id"],
body=filter_doc,
refresh="wait_for",
) )
if result.get("result") == "created": if result.get("result") == "created":
# Extra safety: ensure visibility in subsequent searches
try:
await opensearch_client.indices.refresh(index=KNOWLEDGE_FILTERS_INDEX_NAME)
except Exception:
pass
return {"success": True, "id": filter_doc["id"], "filter": filter_doc} return {"success": True, "id": filter_doc["id"], "filter": filter_doc}
else: else:
return {"success": False, "error": "Failed to create knowledge filter"} return {"success": False, "error": "Failed to create knowledge filter"}
@ -138,11 +146,19 @@ class KnowledgeFilterService:
# Update the document # Update the document
result = await opensearch_client.update( result = await opensearch_client.update(
index=KNOWLEDGE_FILTERS_INDEX_NAME, id=filter_id, body={"doc": updates} index=KNOWLEDGE_FILTERS_INDEX_NAME,
id=filter_id,
body={"doc": updates},
refresh="wait_for",
) )
if result.get("result") in ["updated", "noop"]: if result.get("result") in ["updated", "noop"]:
# Get the updated document # Get the updated document
# Ensure visibility before fetching/returning
try:
await opensearch_client.indices.refresh(index=KNOWLEDGE_FILTERS_INDEX_NAME)
except Exception:
pass
updated_doc = await opensearch_client.get( updated_doc = await opensearch_client.get(
index=KNOWLEDGE_FILTERS_INDEX_NAME, id=filter_id index=KNOWLEDGE_FILTERS_INDEX_NAME, id=filter_id
) )
@ -164,10 +180,17 @@ class KnowledgeFilterService:
) )
result = await opensearch_client.delete( result = await opensearch_client.delete(
index=KNOWLEDGE_FILTERS_INDEX_NAME, id=filter_id index=KNOWLEDGE_FILTERS_INDEX_NAME,
id=filter_id,
refresh="wait_for",
) )
if result.get("result") == "deleted": if result.get("result") == "deleted":
# Extra safety: ensure visibility in subsequent searches
try:
await opensearch_client.indices.refresh(index=KNOWLEDGE_FILTERS_INDEX_NAME)
except Exception:
pass
return { return {
"success": True, "success": True,
"message": "Knowledge filter deleted successfully", "message": "Knowledge filter deleted successfully",
@ -230,7 +253,10 @@ class KnowledgeFilterService:
} }
result = await opensearch_client.update( result = await opensearch_client.update(
index=KNOWLEDGE_FILTERS_INDEX_NAME, id=filter_id, body=update_body index=KNOWLEDGE_FILTERS_INDEX_NAME,
id=filter_id,
body=update_body,
refresh="wait_for",
) )
if result.get("result") in ["updated", "noop"]: if result.get("result") in ["updated", "noop"]: