Merge pull request #54 from langflow-ai/feat/move-filters
Move knowledge filters list to left nav
This commit is contained in:
Cole Goldsmith
GitHub
commit
8b26de02bb
18 changed files with 888 additions and 311 deletions
|
|
@ -12,6 +12,7 @@ import { Button } from "./ui/button";
|
|||
import { DeleteConfirmationDialog } from "./confirmation-dialog";
|
||||
import { useDeleteDocument } from "@/app/api/mutations/useDeleteDocument";
|
||||
import { toast } from "sonner";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
interface KnowledgeActionsDropdownProps {
|
||||
filename: string;
|
||||
|
|
@ -22,6 +23,7 @@ export const KnowledgeActionsDropdown = ({
|
|||
}: KnowledgeActionsDropdownProps) => {
|
||||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||||
const deleteDocumentMutation = useDeleteDocument();
|
||||
const router = useRouter();
|
||||
|
||||
const handleDelete = async () => {
|
||||
try {
|
||||
|
|
@ -43,7 +45,17 @@ export const KnowledgeActionsDropdown = ({
|
|||
<EllipsisVertical className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="right" sideOffset={-10}>
|
||||
<DropdownMenuContent side="right" align="start" sideOffset={-10}>
|
||||
<DropdownMenuItem
|
||||
className="text-primary focus:text-primary"
|
||||
onClick={() => {
|
||||
router.push(
|
||||
`/knowledge/chunks?filename=${encodeURIComponent(filename)}`
|
||||
);
|
||||
}}
|
||||
>
|
||||
View chunks
|
||||
</DropdownMenuItem>
|
||||
{/* //TODO: Implement rename and sync */}
|
||||
{/* <DropdownMenuItem
|
||||
className="text-primary focus:text-primary"
|
||||
|
|
|
|||
271
frontend/components/knowledge-filter-list.tsx
Normal file
271
frontend/components/knowledge-filter-list.tsx
Normal file
|
|
@ -0,0 +1,271 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Filter, Loader2, Plus, Save, X } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
useGetFiltersSearchQuery,
|
||||
type KnowledgeFilter,
|
||||
} from "@/src/app/api/queries/useGetFiltersSearchQuery";
|
||||
import { useCreateFilter } from "@/src/app/api/mutations/useCreateFilter";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
|
||||
interface ParsedQueryData {
|
||||
query: string;
|
||||
filters: {
|
||||
data_sources: string[];
|
||||
document_types: string[];
|
||||
owners: string[];
|
||||
};
|
||||
limit: number;
|
||||
scoreThreshold: number;
|
||||
}
|
||||
|
||||
interface KnowledgeFilterListProps {
|
||||
selectedFilter: KnowledgeFilter | null;
|
||||
onFilterSelect: (filter: KnowledgeFilter | null) => void;
|
||||
}
|
||||
|
||||
export function KnowledgeFilterList({
|
||||
selectedFilter,
|
||||
onFilterSelect,
|
||||
}: KnowledgeFilterListProps) {
|
||||
const [searchQuery] = useState("");
|
||||
const [showCreateModal, setShowCreateModal] = useState(false);
|
||||
const [createName, setCreateName] = useState("");
|
||||
const [createDescription, setCreateDescription] = useState("");
|
||||
const [creating, setCreating] = useState(false);
|
||||
|
||||
const { data, isFetching: loading } = useGetFiltersSearchQuery(
|
||||
searchQuery,
|
||||
20
|
||||
);
|
||||
|
||||
const filters = data || [];
|
||||
|
||||
const createFilterMutation = useCreateFilter();
|
||||
|
||||
const handleFilterSelect = (filter: KnowledgeFilter) => {
|
||||
onFilterSelect(filter);
|
||||
};
|
||||
|
||||
const handleCreateNew = () => {
|
||||
setShowCreateModal(true);
|
||||
};
|
||||
|
||||
const handleCreateFilter = async () => {
|
||||
if (!createName.trim()) return;
|
||||
|
||||
setCreating(true);
|
||||
try {
|
||||
// Create a basic filter with wildcards (match everything by default)
|
||||
const defaultFilterData = {
|
||||
query: "",
|
||||
filters: {
|
||||
data_sources: ["*"],
|
||||
document_types: ["*"],
|
||||
owners: ["*"],
|
||||
},
|
||||
limit: 10,
|
||||
scoreThreshold: 0,
|
||||
};
|
||||
|
||||
const result = await createFilterMutation.mutateAsync({
|
||||
name: createName.trim(),
|
||||
description: createDescription.trim(),
|
||||
queryData: JSON.stringify(defaultFilterData),
|
||||
});
|
||||
|
||||
// Select the new filter from API response
|
||||
onFilterSelect(result.filter);
|
||||
|
||||
// Close modal and reset form
|
||||
setShowCreateModal(false);
|
||||
setCreateName("");
|
||||
setCreateDescription("");
|
||||
} catch (error) {
|
||||
console.error("Error creating knowledge filter:", error);
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelCreate = () => {
|
||||
setShowCreateModal(false);
|
||||
setCreateName("");
|
||||
setCreateDescription("");
|
||||
};
|
||||
|
||||
const parseQueryData = (queryData: string): ParsedQueryData => {
|
||||
return JSON.parse(queryData) as ParsedQueryData;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col items-center gap-1 px-3 !mb-12 mt-0 h-full overflow-y-auto">
|
||||
<div className="flex items-center w-full justify-between pl-3">
|
||||
<div className="text-sm font-medium text-muted-foreground">
|
||||
Knowledge Filters
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleCreateNew}
|
||||
title="Create New Filter"
|
||||
className="h-8 px-3 text-muted-foreground"
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center p-4">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<span className="ml-2 text-sm text-muted-foreground">
|
||||
Loading...
|
||||
</span>
|
||||
</div>
|
||||
) : filters.length === 0 ? (
|
||||
<div className="p-4 text-center text-sm text-muted-foreground">
|
||||
{searchQuery ? "No filters found" : "No saved filters"}
|
||||
</div>
|
||||
) : (
|
||||
filters.map((filter) => (
|
||||
<div
|
||||
key={filter.id}
|
||||
onClick={() => handleFilterSelect(filter)}
|
||||
className={cn(
|
||||
"flex items-center gap-3 px-3 py-2 w-full rounded-lg hover:bg-accent hover:text-accent-foreground cursor-pointer group transition-colors",
|
||||
selectedFilter?.id === filter.id &&
|
||||
"bg-accent text-accent-foreground"
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col gap-1 flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center justify-center bg-blue-500/20 w-5 h-5 rounded">
|
||||
<Filter className="h-3 w-3 text-blue-400" />
|
||||
</div>
|
||||
<div className="text-sm font-medium truncate group-hover:text-accent-foreground">
|
||||
{filter.name}
|
||||
</div>
|
||||
</div>
|
||||
{filter.description && (
|
||||
<div className="text-xs text-muted-foreground group-hover:text-accent-foreground/70 line-clamp-2">
|
||||
{filter.description}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="text-xs text-muted-foreground group-hover:text-accent-foreground/70">
|
||||
{new Date(filter.created_at).toLocaleDateString(undefined, {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
})}
|
||||
</div>
|
||||
<span className="text-xs bg-muted text-muted-foreground px-1 py-0.5 rounded-sm">
|
||||
{(() => {
|
||||
const dataSources = parseQueryData(filter.query_data)
|
||||
.filters.data_sources;
|
||||
if (dataSources[0] === "*") return "All sources";
|
||||
const count = dataSources.length;
|
||||
return `${count} ${count === 1 ? "source" : "sources"}`;
|
||||
})()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{selectedFilter?.id === filter.id && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="px-0"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onFilterSelect(null);
|
||||
}}
|
||||
>
|
||||
<X className="h-4 w-4 flex-shrink-0 opacity-0 group-hover:opacity-100 text-muted-foreground" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
{/* Create Filter Dialog */}
|
||||
<Dialog open={showCreateModal} onOpenChange={setShowCreateModal}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create a new knowledge filter</DialogTitle>
|
||||
<DialogDescription>
|
||||
Save a reusable filter to quickly scope searches across your
|
||||
knowledge base.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="flex flex-col gap-2 space-y-2">
|
||||
<div>
|
||||
<Label htmlFor="filter-name" className="font-medium mb-2 gap-1">
|
||||
Name<span className="text-red-400">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="filter-name"
|
||||
type="text"
|
||||
placeholder="Enter filter name"
|
||||
value={createName}
|
||||
onChange={(e) => setCreateName(e.target.value)}
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="filter-description" className="font-medium mb-2">
|
||||
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 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>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,133 +1,115 @@
|
|||
"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'
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { X, Edit3, Save, RefreshCw } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, 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";
|
||||
import { useUpdateFilter } from "@/app/api/mutations/useUpdateFilter";
|
||||
import { useGetSearchAggregations } from "@/src/app/api/queries/useGetSearchAggregations";
|
||||
|
||||
interface FacetBucket {
|
||||
key: string
|
||||
count: number
|
||||
key: string;
|
||||
count: number;
|
||||
}
|
||||
|
||||
interface AvailableFacets {
|
||||
data_sources: FacetBucket[]
|
||||
document_types: FacetBucket[]
|
||||
owners: FacetBucket[]
|
||||
connector_types: FacetBucket[]
|
||||
data_sources: FacetBucket[];
|
||||
document_types: FacetBucket[];
|
||||
owners: FacetBucket[];
|
||||
connector_types: FacetBucket[];
|
||||
}
|
||||
|
||||
export function KnowledgeFilterPanel() {
|
||||
const { selectedFilter, parsedFilterData, setSelectedFilter, isPanelOpen, closePanelOnly } = useKnowledgeFilter()
|
||||
|
||||
const {
|
||||
selectedFilter,
|
||||
parsedFilterData,
|
||||
setSelectedFilter,
|
||||
isPanelOpen,
|
||||
closePanelOnly,
|
||||
} = useKnowledgeFilter();
|
||||
const deleteFilterMutation = useDeleteFilter();
|
||||
const updateFilterMutation = useUpdateFilter();
|
||||
|
||||
// Edit mode states
|
||||
const [isEditingMeta, setIsEditingMeta] = useState(false)
|
||||
const [editingName, setEditingName] = useState('')
|
||||
const [editingDescription, setEditingDescription] = useState('')
|
||||
const [isSaving, setIsSaving] = useState(false)
|
||||
const [isEditingMeta, setIsEditingMeta] = useState(false);
|
||||
const [editingName, setEditingName] = useState("");
|
||||
const [editingDescription, setEditingDescription] = useState("");
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
// Filter configuration states (mirror search page exactly)
|
||||
const [query, setQuery] = useState('')
|
||||
const [query, setQuery] = useState("");
|
||||
const [selectedFilters, setSelectedFilters] = useState({
|
||||
data_sources: ["*"] as string[], // Default to wildcard
|
||||
document_types: ["*"] as string[], // Default to wildcard
|
||||
owners: ["*"] as string[], // Default to wildcard
|
||||
connector_types: ["*"] as string[] // Default to wildcard
|
||||
})
|
||||
const [resultLimit, setResultLimit] = useState(10)
|
||||
const [scoreThreshold, setScoreThreshold] = useState(0)
|
||||
|
||||
connector_types: ["*"] as string[], // Default to wildcard
|
||||
});
|
||||
const [resultLimit, setResultLimit] = useState(10);
|
||||
const [scoreThreshold, setScoreThreshold] = useState(0);
|
||||
|
||||
// Available facets (loaded from API)
|
||||
const [availableFacets, setAvailableFacets] = useState<AvailableFacets>({
|
||||
data_sources: [],
|
||||
document_types: [],
|
||||
owners: [],
|
||||
connector_types: []
|
||||
})
|
||||
connector_types: [],
|
||||
});
|
||||
|
||||
// Load current filter data into controls
|
||||
useEffect(() => {
|
||||
if (selectedFilter && parsedFilterData) {
|
||||
setQuery(parsedFilterData.query || '')
|
||||
|
||||
setQuery(parsedFilterData.query || "");
|
||||
|
||||
// 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
|
||||
// Empty arrays mean "none selected" not "all selected"
|
||||
const processedFilters = {
|
||||
data_sources: filters.data_sources,
|
||||
document_types: filters.document_types,
|
||||
owners: filters.owners,
|
||||
connector_types: filters.connector_types || ["*"]
|
||||
}
|
||||
|
||||
console.log("[DEBUG] Loading filter selections:", processedFilters)
|
||||
|
||||
setSelectedFilters(processedFilters)
|
||||
setResultLimit(parsedFilterData.limit || 10)
|
||||
setScoreThreshold(parsedFilterData.scoreThreshold || 0)
|
||||
setEditingName(selectedFilter.name)
|
||||
setEditingDescription(selectedFilter.description || '')
|
||||
}
|
||||
}, [selectedFilter, parsedFilterData])
|
||||
connector_types: filters.connector_types || ["*"],
|
||||
};
|
||||
|
||||
console.log("[DEBUG] Loading filter selections:", processedFilters);
|
||||
|
||||
setSelectedFilters(processedFilters);
|
||||
setResultLimit(parsedFilterData.limit || 10);
|
||||
setScoreThreshold(parsedFilterData.scoreThreshold || 0);
|
||||
setEditingName(selectedFilter.name);
|
||||
setEditingDescription(selectedFilter.description || "");
|
||||
}
|
||||
}, [selectedFilter, parsedFilterData]);
|
||||
|
||||
// Load available facets using search aggregations hook
|
||||
const { data: aggregations } = useGetSearchAggregations("*", 1, 0, {
|
||||
enabled: isPanelOpen,
|
||||
placeholderData: (prev) => prev,
|
||||
staleTime: 60_000,
|
||||
gcTime: 5 * 60_000,
|
||||
});
|
||||
|
||||
// Load available facets from API
|
||||
useEffect(() => {
|
||||
if (isPanelOpen) {
|
||||
loadAvailableFacets()
|
||||
}
|
||||
}, [isPanelOpen])
|
||||
|
||||
const loadAvailableFacets = async () => {
|
||||
console.log("[DEBUG] Loading available facets...")
|
||||
try {
|
||||
// Do a search to get facets (similar to search page)
|
||||
const response = await fetch("/api/search", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
query: "*", // Use wildcard like search page to get all documents/facets
|
||||
limit: 1,
|
||||
scoreThreshold: 0
|
||||
// Omit filters entirely to get all available facets
|
||||
}),
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
console.log("[DEBUG] Search API response:", result)
|
||||
|
||||
if (response.ok && result.aggregations) {
|
||||
const facets = {
|
||||
data_sources: result.aggregations.data_sources?.buckets || [],
|
||||
document_types: result.aggregations.document_types?.buckets || [],
|
||||
owners: result.aggregations.owners?.buckets || [],
|
||||
connector_types: result.aggregations.connector_types?.buckets || []
|
||||
}
|
||||
console.log("[DEBUG] Setting facets:", facets)
|
||||
setAvailableFacets(facets)
|
||||
} else {
|
||||
console.log("[DEBUG] No aggregations in response or response not ok")
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to load available facets:", error)
|
||||
}
|
||||
}
|
||||
if (!aggregations) return;
|
||||
const facets = {
|
||||
data_sources: aggregations.data_sources?.buckets || [],
|
||||
document_types: aggregations.document_types?.buckets || [],
|
||||
owners: aggregations.owners?.buckets || [],
|
||||
connector_types: aggregations.connector_types?.buckets || [],
|
||||
};
|
||||
setAvailableFacets(facets);
|
||||
}, [aggregations]);
|
||||
|
||||
// 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 = () => {
|
||||
// Use wildcards instead of listing all specific items
|
||||
|
|
@ -135,116 +117,105 @@ export function KnowledgeFilterPanel() {
|
|||
data_sources: ["*"],
|
||||
document_types: ["*"],
|
||||
owners: ["*"],
|
||||
connector_types: ["*"]
|
||||
})
|
||||
}
|
||||
connector_types: ["*"],
|
||||
});
|
||||
};
|
||||
|
||||
const clearAllFilters = () => {
|
||||
setSelectedFilters({
|
||||
data_sources: [],
|
||||
document_types: [],
|
||||
owners: [],
|
||||
connector_types: []
|
||||
})
|
||||
}
|
||||
connector_types: [],
|
||||
});
|
||||
};
|
||||
|
||||
const handleEditMeta = () => {
|
||||
setIsEditingMeta(true)
|
||||
}
|
||||
setIsEditingMeta(true);
|
||||
};
|
||||
|
||||
const handleCancelEdit = () => {
|
||||
setIsEditingMeta(false)
|
||||
setEditingName(selectedFilter.name)
|
||||
setEditingDescription(selectedFilter.description || '')
|
||||
}
|
||||
setIsEditingMeta(false);
|
||||
setEditingName(selectedFilter.name);
|
||||
setEditingDescription(selectedFilter.description || "");
|
||||
};
|
||||
|
||||
const handleSaveMeta = async () => {
|
||||
if (!editingName.trim()) return
|
||||
if (!editingName.trim()) return;
|
||||
|
||||
setIsSaving(true)
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const response = await fetch(`/api/knowledge-filter/${selectedFilter.id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: editingName.trim(),
|
||||
description: editingDescription.trim(),
|
||||
}),
|
||||
})
|
||||
const result = await updateFilterMutation.mutateAsync({
|
||||
id: selectedFilter.id,
|
||||
name: editingName.trim(),
|
||||
description: editingDescription.trim(),
|
||||
});
|
||||
|
||||
const result = await response.json()
|
||||
if (response.ok && result.success) {
|
||||
const updatedFilter = {
|
||||
...selectedFilter,
|
||||
name: editingName.trim(),
|
||||
description: editingDescription.trim(),
|
||||
updated_at: new Date().toISOString(),
|
||||
}
|
||||
setSelectedFilter(updatedFilter)
|
||||
setIsEditingMeta(false)
|
||||
if (result.success && result.filter) {
|
||||
setSelectedFilter(result.filter);
|
||||
setIsEditingMeta(false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating filter:', error)
|
||||
console.error("Error updating filter:", error);
|
||||
} finally {
|
||||
setIsSaving(false)
|
||||
setIsSaving(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveConfiguration = async () => {
|
||||
const filterData = {
|
||||
query,
|
||||
filters: selectedFilters,
|
||||
limit: resultLimit,
|
||||
scoreThreshold
|
||||
}
|
||||
scoreThreshold,
|
||||
};
|
||||
|
||||
setIsSaving(true)
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const response = await fetch(`/api/knowledge-filter/${selectedFilter.id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
queryData: JSON.stringify(filterData)
|
||||
}),
|
||||
})
|
||||
const result = await updateFilterMutation.mutateAsync({
|
||||
id: selectedFilter.id,
|
||||
queryData: JSON.stringify(filterData),
|
||||
});
|
||||
|
||||
const result = await response.json()
|
||||
if (response.ok && result.success) {
|
||||
// Update the filter in context
|
||||
const updatedFilter = {
|
||||
...selectedFilter,
|
||||
query_data: JSON.stringify(filterData),
|
||||
updated_at: new Date().toISOString(),
|
||||
}
|
||||
setSelectedFilter(updatedFilter)
|
||||
if (result.success && result.filter) {
|
||||
setSelectedFilter(result.filter);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating filter configuration:', error)
|
||||
console.error("Error updating filter configuration:", error);
|
||||
} finally {
|
||||
setIsSaving(false)
|
||||
setIsSaving(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})
|
||||
}
|
||||
return new Date(dateString).toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
};
|
||||
|
||||
const handleFilterChange = (facetType: keyof typeof selectedFilters, newValues: string[]) => {
|
||||
setSelectedFilters(prev => ({
|
||||
const handleFilterChange = (
|
||||
facetType: keyof typeof selectedFilters,
|
||||
newValues: string[]
|
||||
) => {
|
||||
setSelectedFilters((prev) => ({
|
||||
...prev,
|
||||
[facetType]: newValues
|
||||
}))
|
||||
}
|
||||
[facetType]: newValues,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleDeleteFilter = async () => {
|
||||
const result = await deleteFilterMutation.mutateAsync({
|
||||
id: selectedFilter.id,
|
||||
});
|
||||
if (result.success) {
|
||||
setSelectedFilter(null);
|
||||
closePanelOnly();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed right-0 top-14 bottom-0 w-80 bg-background border-l border-border/40 z-40 overflow-y-auto">
|
||||
|
|
@ -252,7 +223,6 @@ export function KnowledgeFilterPanel() {
|
|||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<Settings className="h-5 w-5" />
|
||||
Knowledge Filter
|
||||
</CardTitle>
|
||||
<Button
|
||||
|
|
@ -264,9 +234,6 @@ export function KnowledgeFilterPanel() {
|
|||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<CardDescription>
|
||||
Configure your knowledge filter settings
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-6">
|
||||
|
|
@ -301,7 +268,7 @@ export function KnowledgeFilterPanel() {
|
|||
className="flex-1"
|
||||
>
|
||||
<Save className="h-3 w-3 mr-1" />
|
||||
{isSaving ? 'Saving...' : 'Save'}
|
||||
{isSaving ? "Saving..." : "Save"}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleCancelEdit}
|
||||
|
|
@ -315,9 +282,11 @@ export function KnowledgeFilterPanel() {
|
|||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-lg">{selectedFilter.name}</h3>
|
||||
<h3 className="font-semibold text-lg">
|
||||
{selectedFilter.name}
|
||||
</h3>
|
||||
{selectedFilter.description && (
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{selectedFilter.description}
|
||||
|
|
@ -336,7 +305,10 @@ export function KnowledgeFilterPanel() {
|
|||
<div className="text-xs text-muted-foreground">
|
||||
Created {formatDate(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>
|
||||
|
|
@ -345,14 +317,15 @@ export function KnowledgeFilterPanel() {
|
|||
|
||||
{/* Search Query */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="search-query" className="text-sm font-medium">Search Query</Label>
|
||||
<Input
|
||||
<Label htmlFor="search-query" className="text-sm font-medium">
|
||||
Search Query
|
||||
</Label>
|
||||
<Textarea
|
||||
id="search-query"
|
||||
type="text"
|
||||
placeholder="e.g., 'financial reports from Q4'"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
className="bg-background/50 border-border/50"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -361,13 +334,15 @@ export function KnowledgeFilterPanel() {
|
|||
<div className="space-y-2">
|
||||
<Label className="text-sm font-medium">Data Sources</Label>
|
||||
<MultiSelect
|
||||
options={(availableFacets.data_sources || []).map(bucket => ({
|
||||
options={(availableFacets.data_sources || []).map((bucket) => ({
|
||||
value: bucket.key,
|
||||
label: bucket.key,
|
||||
count: bucket.count
|
||||
count: bucket.count,
|
||||
}))}
|
||||
value={selectedFilters.data_sources}
|
||||
onValueChange={(values) => handleFilterChange('data_sources', values)}
|
||||
onValueChange={(values) =>
|
||||
handleFilterChange("data_sources", values)
|
||||
}
|
||||
placeholder="Select data sources..."
|
||||
allOptionLabel="All Data Sources"
|
||||
/>
|
||||
|
|
@ -376,13 +351,17 @@ export function KnowledgeFilterPanel() {
|
|||
<div className="space-y-2">
|
||||
<Label className="text-sm font-medium">Document Types</Label>
|
||||
<MultiSelect
|
||||
options={(availableFacets.document_types || []).map(bucket => ({
|
||||
value: bucket.key,
|
||||
label: bucket.key,
|
||||
count: bucket.count
|
||||
}))}
|
||||
options={(availableFacets.document_types || []).map(
|
||||
(bucket) => ({
|
||||
value: bucket.key,
|
||||
label: bucket.key,
|
||||
count: bucket.count,
|
||||
})
|
||||
)}
|
||||
value={selectedFilters.document_types}
|
||||
onValueChange={(values) => handleFilterChange('document_types', values)}
|
||||
onValueChange={(values) =>
|
||||
handleFilterChange("document_types", values)
|
||||
}
|
||||
placeholder="Select document types..."
|
||||
allOptionLabel="All Document Types"
|
||||
/>
|
||||
|
|
@ -391,13 +370,13 @@ export function KnowledgeFilterPanel() {
|
|||
<div className="space-y-2">
|
||||
<Label className="text-sm font-medium">Owners</Label>
|
||||
<MultiSelect
|
||||
options={(availableFacets.owners || []).map(bucket => ({
|
||||
options={(availableFacets.owners || []).map((bucket) => ({
|
||||
value: bucket.key,
|
||||
label: bucket.key,
|
||||
count: bucket.count
|
||||
count: bucket.count,
|
||||
}))}
|
||||
value={selectedFilters.owners}
|
||||
onValueChange={(values) => handleFilterChange('owners', values)}
|
||||
onValueChange={(values) => handleFilterChange("owners", values)}
|
||||
placeholder="Select owners..."
|
||||
allOptionLabel="All Owners"
|
||||
/>
|
||||
|
|
@ -406,13 +385,17 @@ export function KnowledgeFilterPanel() {
|
|||
<div className="space-y-2">
|
||||
<Label className="text-sm font-medium">Sources</Label>
|
||||
<MultiSelect
|
||||
options={(availableFacets.connector_types || []).map(bucket => ({
|
||||
value: bucket.key,
|
||||
label: bucket.key,
|
||||
count: bucket.count
|
||||
}))}
|
||||
options={(availableFacets.connector_types || []).map(
|
||||
(bucket) => ({
|
||||
value: bucket.key,
|
||||
label: bucket.key,
|
||||
count: bucket.count,
|
||||
})
|
||||
)}
|
||||
value={selectedFilters.connector_types}
|
||||
onValueChange={(values) => handleFilterChange('connector_types', values)}
|
||||
onValueChange={(values) =>
|
||||
handleFilterChange("connector_types", values)
|
||||
}
|
||||
placeholder="Select sources..."
|
||||
allOptionLabel="All Sources"
|
||||
/>
|
||||
|
|
@ -420,18 +403,18 @@ export function KnowledgeFilterPanel() {
|
|||
|
||||
{/* All/None buttons */}
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={selectAllFilters}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
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"
|
||||
>
|
||||
All
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={clearAllFilters}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
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"
|
||||
>
|
||||
None
|
||||
|
|
@ -442,18 +425,23 @@ export function KnowledgeFilterPanel() {
|
|||
<div className="space-y-4 pt-4 border-t border-border/50">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-sm font-medium">Limit</Label>
|
||||
<Label className="text-sm font-medium text-nowrap">
|
||||
Response limit
|
||||
</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min="1"
|
||||
max="1000"
|
||||
value={resultLimit}
|
||||
onChange={(e) => {
|
||||
const newLimit = Math.max(1, Math.min(1000, parseInt(e.target.value) || 1))
|
||||
setResultLimit(newLimit)
|
||||
const newLimit = Math.max(
|
||||
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"
|
||||
style={{ width: '70px' }}
|
||||
style={{ width: "70px" }}
|
||||
/>
|
||||
</div>
|
||||
<Slider
|
||||
|
|
@ -469,16 +457,20 @@ export function KnowledgeFilterPanel() {
|
|||
{/* Score Threshold Control - exactly like search page */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-sm font-medium">Score Threshold</Label>
|
||||
<Label className="text-sm font-medium text-nowrap">
|
||||
Score threshold
|
||||
</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min="0"
|
||||
max="5"
|
||||
step="0.1"
|
||||
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"
|
||||
style={{ width: '70px' }}
|
||||
style={{ width: "70px" }}
|
||||
/>
|
||||
</div>
|
||||
<Slider
|
||||
|
|
@ -493,7 +485,7 @@ export function KnowledgeFilterPanel() {
|
|||
</div>
|
||||
|
||||
{/* 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
|
||||
onClick={handleSaveConfiguration}
|
||||
disabled={isSaving}
|
||||
|
|
@ -512,10 +504,17 @@ export function KnowledgeFilterPanel() {
|
|||
</>
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
className="w-full"
|
||||
onClick={handleDeleteFilter}
|
||||
>
|
||||
Delete Filter
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@ import { useCallback, useEffect, useRef, useState } from "react";
|
|||
|
||||
import { EndpointType } from "@/contexts/chat-context";
|
||||
import { useLoadingStore } from "@/stores/loadingStore";
|
||||
import { KnowledgeFilterList } from "./knowledge-filter-list";
|
||||
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
|
||||
|
||||
interface RawConversation {
|
||||
response_id: string;
|
||||
|
|
@ -74,6 +76,8 @@ export function Navigation() {
|
|||
const [previousConversationCount, setPreviousConversationCount] = useState(0);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const { selectedFilter, setSelectedFilter } = useKnowledgeFilter();
|
||||
|
||||
const handleNewConversation = () => {
|
||||
setLoadingNewConversation(true);
|
||||
refreshConversations();
|
||||
|
|
@ -194,6 +198,7 @@ export function Navigation() {
|
|||
];
|
||||
|
||||
const isOnChatPage = pathname === "/" || pathname === "/chat";
|
||||
const isOnKnowledgePage = pathname.startsWith("/knowledge");
|
||||
|
||||
const createDefaultPlaceholder = useCallback(() => {
|
||||
return {
|
||||
|
|
@ -310,7 +315,7 @@ export function Navigation() {
|
|||
]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4 py-4 flex flex-col h-full bg-background">
|
||||
<div className="flex flex-col h-full bg-background">
|
||||
<div className="px-3 py-2 flex-shrink-0">
|
||||
<div className="space-y-1">
|
||||
{routes.map((route) => (
|
||||
|
|
@ -344,6 +349,13 @@ export function Navigation() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{isOnKnowledgePage && (
|
||||
<KnowledgeFilterList
|
||||
selectedFilter={selectedFilter}
|
||||
onFilterSelect={setSelectedFilter}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Chat Page Specific Sections */}
|
||||
{isOnChatPage && (
|
||||
<div className="flex-1 min-h-0 flex flex-col">
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
import * as React from "react"
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
||||
return (
|
||||
<textarea
|
||||
data-slot="textarea"
|
||||
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 flex field-sizing-content min-h-16 w-full rounded-md border bg-background 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:font-mono placeholder:text-placeholder-foreground min-h-fit",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export { Textarea }
|
||||
export { Textarea };
|
||||
|
|
|
|||
9
frontend/package-lock.json
generated
9
frontend/package-lock.json
generated
|
|
@ -28,6 +28,7 @@
|
|||
"@radix-ui/react-tabs": "^1.1.13",
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
"@tailwindcss/forms": "^0.5.10",
|
||||
"@tailwindcss/line-clamp": "^0.4.4",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@tanstack/react-query": "^5.86.0",
|
||||
"ag-grid-community": "^34.2.0",
|
||||
|
|
@ -2317,6 +2318,14 @@
|
|||
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/line-clamp": {
|
||||
"version": "0.4.4",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz",
|
||||
"integrity": "sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==",
|
||||
"peerDependencies": {
|
||||
"tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/typography": {
|
||||
"version": "0.5.16",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.16.tgz",
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@
|
|||
"@radix-ui/react-tabs": "^1.1.13",
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
"@tailwindcss/forms": "^0.5.10",
|
||||
"@tailwindcss/line-clamp": "^0.4.4",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@tanstack/react-query": "^5.86.0",
|
||||
"ag-grid-community": "^34.2.0",
|
||||
|
|
|
|||
|
|
@ -50,35 +50,61 @@ async function proxyRequest(
|
|||
|
||||
try {
|
||||
let body: string | ArrayBuffer | undefined = undefined;
|
||||
|
||||
let willSendBody = false;
|
||||
|
||||
if (request.method !== 'GET' && request.method !== 'HEAD') {
|
||||
const contentType = request.headers.get('content-type') || '';
|
||||
|
||||
const contentLength = request.headers.get('content-length');
|
||||
|
||||
// For file uploads (multipart/form-data), preserve binary 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 {
|
||||
// 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();
|
||||
|
||||
|
||||
// Copy relevant headers from the original request
|
||||
for (const [key, value] of request.headers.entries()) {
|
||||
if (!key.toLowerCase().startsWith('host') &&
|
||||
!key.toLowerCase().startsWith('x-forwarded') &&
|
||||
!key.toLowerCase().startsWith('x-real-ip')) {
|
||||
headers.set(key, value);
|
||||
const lower = key.toLowerCase();
|
||||
if (
|
||||
lower.startsWith('host') ||
|
||||
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,
|
||||
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 responseHeaders = new Headers();
|
||||
|
|
|
|||
50
frontend/src/app/api/mutations/useCreateFilter.ts
Normal file
50
frontend/src/app/api/mutations/useCreateFilter.ts
Normal 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"]});
|
||||
},
|
||||
});
|
||||
};
|
||||
39
frontend/src/app/api/mutations/useDeleteFilter.ts
Normal file
39
frontend/src/app/api/mutations/useDeleteFilter.ts
Normal 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"] });
|
||||
},
|
||||
});
|
||||
};
|
||||
52
frontend/src/app/api/mutations/useUpdateFilter.ts
Normal file
52
frontend/src/app/api/mutations/useUpdateFilter.ts
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { KnowledgeFilter } from "../queries/useGetFiltersSearchQuery";
|
||||
|
||||
export interface UpdateFilterRequest {
|
||||
id: string;
|
||||
name?: string;
|
||||
description?: string;
|
||||
queryData?: string; // stringified ParsedQueryData
|
||||
}
|
||||
|
||||
export interface UpdateFilterResponse {
|
||||
success: boolean;
|
||||
filter: KnowledgeFilter;
|
||||
message?: string;
|
||||
}
|
||||
|
||||
async function updateFilter(data: UpdateFilterRequest): Promise<UpdateFilterResponse> {
|
||||
// Build a body with only provided fields
|
||||
const body: Record<string, unknown> = {};
|
||||
if (typeof data.name !== "undefined") body.name = data.name;
|
||||
if (typeof data.description !== "undefined") body.description = data.description;
|
||||
if (typeof data.queryData !== "undefined") body.queryData = data.queryData;
|
||||
|
||||
const response = await fetch(`/api/knowledge-filter/${data.id}`, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
const json = await response.json().catch(() => ({}));
|
||||
|
||||
if (!response.ok) {
|
||||
const errorMessage = (json && (json.error as string)) || "Failed to update knowledge filter";
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
|
||||
return json as UpdateFilterResponse;
|
||||
}
|
||||
|
||||
export const useUpdateFilter = () => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: updateFilter,
|
||||
onSuccess: () => {
|
||||
// Refresh any knowledge filter lists/searches
|
||||
queryClient.invalidateQueries({ queryKey: ["knowledge-filters"] });
|
||||
},
|
||||
});
|
||||
};
|
||||
47
frontend/src/app/api/queries/useGetFiltersSearchQuery.ts
Normal file
47
frontend/src/app/api/queries/useGetFiltersSearchQuery.ts
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import {
|
||||
useQuery,
|
||||
useQueryClient,
|
||||
type UseQueryOptions,
|
||||
} from "@tanstack/react-query";
|
||||
|
||||
export interface KnowledgeFilter {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
query_data: string;
|
||||
owner: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export const useGetFiltersSearchQuery = (
|
||||
search: string,
|
||||
limit = 20,
|
||||
options?: Omit<UseQueryOptions<KnowledgeFilter[]>, "queryKey" | "queryFn">
|
||||
) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
async function getFilters(): Promise<KnowledgeFilter[]> {
|
||||
const response = await fetch("/api/knowledge-filter/search", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ query: search, limit }),
|
||||
});
|
||||
|
||||
const json = await response.json();
|
||||
if (!response.ok || !json.success) {
|
||||
// ensure we always return a KnowledgeFilter[] to satisfy the return type
|
||||
return [];
|
||||
}
|
||||
return (json.filters || []) as KnowledgeFilter[];
|
||||
}
|
||||
|
||||
return useQuery<KnowledgeFilter[]>(
|
||||
{
|
||||
queryKey: ["knowledge-filters", search, limit],
|
||||
queryFn: getFilters,
|
||||
...options,
|
||||
},
|
||||
queryClient
|
||||
);
|
||||
};
|
||||
47
frontend/src/app/api/queries/useGetSearchAggregations.ts
Normal file
47
frontend/src/app/api/queries/useGetSearchAggregations.ts
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import { useQuery, useQueryClient, type UseQueryOptions } from "@tanstack/react-query";
|
||||
|
||||
export interface FacetBucket {
|
||||
key: string;
|
||||
count: number;
|
||||
}
|
||||
|
||||
export interface SearchAggregations {
|
||||
data_sources?: { buckets: FacetBucket[] };
|
||||
document_types?: { buckets: FacetBucket[] };
|
||||
owners?: { buckets: FacetBucket[] };
|
||||
connector_types?: { buckets: FacetBucket[] };
|
||||
}
|
||||
|
||||
type Options = Omit<UseQueryOptions<SearchAggregations>, "queryKey" | "queryFn">;
|
||||
|
||||
export const useGetSearchAggregations = (
|
||||
query: string,
|
||||
limit: number,
|
||||
scoreThreshold: number,
|
||||
options?: Options
|
||||
) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
async function fetchAggregations(): Promise<SearchAggregations> {
|
||||
const response = await fetch("/api/search", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ query, limit, scoreThreshold }),
|
||||
});
|
||||
|
||||
const json = await response.json().catch(() => ({}));
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error((json && json.error) || "Failed to load search aggregations");
|
||||
}
|
||||
|
||||
return (json.aggregations || {}) as SearchAggregations;
|
||||
}
|
||||
|
||||
return useQuery<SearchAggregations>({
|
||||
queryKey: ["search-aggregations", query, limit, scoreThreshold],
|
||||
queryFn: fetchAggregations,
|
||||
placeholderData: prev => prev,
|
||||
...options,
|
||||
}, queryClient);
|
||||
};
|
||||
|
|
@ -162,7 +162,7 @@
|
|||
}
|
||||
|
||||
.side-bar-arrangement {
|
||||
@apply flex h-full w-[14.5rem] flex-col overflow-hidden border-r scrollbar-hide;
|
||||
@apply flex h-full w-[18rem] flex-col overflow-hidden border-r scrollbar-hide;
|
||||
}
|
||||
|
||||
.side-bar-search-div-placement {
|
||||
|
|
|
|||
|
|
@ -4,25 +4,18 @@ import {
|
|||
Building2,
|
||||
Cloud,
|
||||
HardDrive,
|
||||
Loader2,
|
||||
Search,
|
||||
Trash2,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { AgGridReact, CustomCellRendererProps } from "ag-grid-react";
|
||||
import {
|
||||
type FormEvent,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useState,
|
||||
useRef,
|
||||
} from "react";
|
||||
import { useCallback, useState, useRef, ChangeEvent } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { SiGoogledrive } from "react-icons/si";
|
||||
import { TbBrandOnedrive } from "react-icons/tb";
|
||||
import { KnowledgeDropdown } from "@/components/knowledge-dropdown";
|
||||
import { ProtectedRoute } from "@/components/protected-route";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
|
||||
import { useTask } from "@/contexts/task-context";
|
||||
import { type File, useGetSearchQuery } from "../api/queries/useGetSearchQuery";
|
||||
|
|
@ -59,39 +52,22 @@ function getSourceIcon(connectorType?: string) {
|
|||
function SearchPage() {
|
||||
const router = useRouter();
|
||||
const { isMenuOpen } = useTask();
|
||||
const { parsedFilterData, isPanelOpen } = useKnowledgeFilter();
|
||||
const [query, setQuery] = useState("");
|
||||
const [queryInputText, setQueryInputText] = useState("");
|
||||
const { selectedFilter, setSelectedFilter, parsedFilterData, isPanelOpen } =
|
||||
useKnowledgeFilter();
|
||||
const [selectedRows, setSelectedRows] = useState<File[]>([]);
|
||||
const [showBulkDeleteDialog, setShowBulkDeleteDialog] = useState(false);
|
||||
|
||||
const deleteDocumentMutation = useDeleteDocument();
|
||||
|
||||
const {
|
||||
data = [],
|
||||
isFetching,
|
||||
refetch: refetchSearch,
|
||||
} = useGetSearchQuery(query, parsedFilterData);
|
||||
|
||||
// Update query when global filter changes
|
||||
useEffect(() => {
|
||||
if (parsedFilterData?.query) {
|
||||
setQueryInputText(parsedFilterData.query);
|
||||
}
|
||||
}, [parsedFilterData]);
|
||||
|
||||
const handleSearch = useCallback(
|
||||
(e?: FormEvent<HTMLFormElement>) => {
|
||||
if (e) e.preventDefault();
|
||||
if (query.trim() === queryInputText.trim()) {
|
||||
refetchSearch();
|
||||
return;
|
||||
}
|
||||
setQuery(queryInputText);
|
||||
},
|
||||
[queryInputText, refetchSearch, query]
|
||||
const { data = [], isFetching } = useGetSearchQuery(
|
||||
parsedFilterData?.query || "*",
|
||||
parsedFilterData
|
||||
);
|
||||
|
||||
const handleTableSearch = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
gridRef.current?.api.setGridOption("quickFilterText", e.target.value);
|
||||
};
|
||||
|
||||
const fileResults = data as File[];
|
||||
|
||||
const gridRef = useRef<AgGridReact>(null);
|
||||
|
|
@ -147,6 +123,7 @@ function SearchPage() {
|
|||
{
|
||||
field: "avgScore",
|
||||
headerName: "Avg score",
|
||||
initialFlex: 0.5,
|
||||
cellRenderer: ({ value }: CustomCellRendererProps<File>) => {
|
||||
return (
|
||||
<span className="text-xs text-green-400 bg-green-400/20 px-2 py-1 rounded">
|
||||
|
|
@ -167,9 +144,8 @@ function SearchPage() {
|
|||
},
|
||||
colId: "actions",
|
||||
filter: false,
|
||||
width: 60,
|
||||
minWidth: 60,
|
||||
maxWidth: 60,
|
||||
minWidth: 0,
|
||||
width: 40,
|
||||
resizable: false,
|
||||
sortable: false,
|
||||
initialFlex: 0,
|
||||
|
|
@ -244,19 +220,29 @@ function SearchPage() {
|
|||
</div>
|
||||
|
||||
{/* Search Input Area */}
|
||||
<div className="flex-shrink-0 mb-6 lg:max-w-[75%] xl:max-w-[50%]">
|
||||
<form onSubmit={handleSearch} className="flex gap-3">
|
||||
<Input
|
||||
name="search-query"
|
||||
id="search-query"
|
||||
type="text"
|
||||
defaultValue={parsedFilterData?.query}
|
||||
value={queryInputText}
|
||||
onChange={(e) => setQueryInputText(e.target.value)}
|
||||
placeholder="Search your documents..."
|
||||
className="flex-1 bg-muted/20 rounded-lg border border-border/50 px-4 py-3 focus-visible:ring-1 focus-visible:ring-ring"
|
||||
/>
|
||||
<Button
|
||||
<div className="flex-shrink-0 mb-6 xl:max-w-[75%]">
|
||||
<form className="flex gap-3">
|
||||
<div className="primary-input min-h-10 !flex items-center flex-nowrap gap-2 focus-within:border-foreground transition-colors !py-0">
|
||||
{selectedFilter?.name && (
|
||||
<div className="flex items-center gap-1 bg-blue-500/20 text-blue-400 px-1.5 py-0.5 rounded max-w-[300px]">
|
||||
<span className="truncate">{selectedFilter?.name}</span>
|
||||
<X
|
||||
aria-label="Remove filter"
|
||||
className="h-4 w-4 flex-shrink-0 cursor-pointer"
|
||||
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={handleTableSearch}
|
||||
/>
|
||||
</div>
|
||||
{/* <Button
|
||||
type="submit"
|
||||
variant="outline"
|
||||
className="rounded-lg p-0 flex-shrink-0"
|
||||
|
|
@ -266,7 +252,7 @@ function SearchPage() {
|
|||
) : (
|
||||
<Search className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</Button> */}
|
||||
{/* //TODO: Implement sync button */}
|
||||
{/* <Button
|
||||
type="button"
|
||||
|
|
@ -276,15 +262,16 @@ function SearchPage() {
|
|||
>
|
||||
Sync
|
||||
</Button> */}
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
className="rounded-lg flex-shrink-0"
|
||||
onClick={() => setShowBulkDeleteDialog(true)}
|
||||
disabled={selectedRows.length === 0}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" /> Delete
|
||||
</Button>
|
||||
{selectedRows.length > 0 && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
className="rounded-lg flex-shrink-0"
|
||||
onClick={() => setShowBulkDeleteDialog(true)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" /> Delete
|
||||
</Button>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
<AgGridReact
|
||||
|
|
@ -298,8 +285,8 @@ function SearchPage() {
|
|||
rowMultiSelectWithClick={false}
|
||||
suppressRowClickSelection={true}
|
||||
getRowId={(params) => params.data.filename}
|
||||
domLayout="autoHeight"
|
||||
onSelectionChanged={onSelectionChanged}
|
||||
suppressHorizontalScroll={false}
|
||||
noRowsOverlayComponent={() => (
|
||||
<div className="text-center">
|
||||
<Search className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
"use client";
|
||||
|
||||
import { Bell, Loader2 } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useGetSettingsQuery } from "@/app/api/queries/useGetSettingsQuery";
|
||||
import { KnowledgeFilterDropdown } from "@/components/knowledge-filter-dropdown";
|
||||
import { KnowledgeFilterPanel } from "@/components/knowledge-filter-panel";
|
||||
import { Navigation } from "@/components/navigation";
|
||||
import { TaskNotificationMenu } from "@/components/task-notification-menu";
|
||||
|
|
@ -20,8 +18,7 @@ import Logo from "@/components/logo/logo";
|
|||
export function LayoutWrapper({ children }: { children: React.ReactNode }) {
|
||||
const pathname = usePathname();
|
||||
const { tasks, isMenuOpen, toggleMenu } = useTask();
|
||||
const { selectedFilter, setSelectedFilter, isPanelOpen } =
|
||||
useKnowledgeFilter();
|
||||
const { isPanelOpen } = useKnowledgeFilter();
|
||||
const { isLoading, isAuthenticated, isNoAuthMode } = useAuth();
|
||||
const { isLoading: isSettingsLoading, data: settings } = useGetSettingsQuery({
|
||||
enabled: isAuthenticated || isNoAuthMode,
|
||||
|
|
@ -36,7 +33,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
|
|||
(task) =>
|
||||
task.status === "pending" ||
|
||||
task.status === "running" ||
|
||||
task.status === "processing",
|
||||
task.status === "processing"
|
||||
);
|
||||
|
||||
// Show loading state when backend isn't ready
|
||||
|
|
@ -70,10 +67,10 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
|
|||
<div className="header-end-division">
|
||||
<div className="header-end-display">
|
||||
{/* Knowledge Filter Dropdown */}
|
||||
<KnowledgeFilterDropdown
|
||||
{/* <KnowledgeFilterDropdown
|
||||
selectedFilter={selectedFilter}
|
||||
onFilterSelect={setSelectedFilter}
|
||||
/>
|
||||
/> */}
|
||||
|
||||
{/* GitHub Star Button */}
|
||||
{/* <GitHubStarButton repo="phact/openrag" /> */}
|
||||
|
|
@ -115,10 +112,10 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
|
|||
isPanelOpen
|
||||
? "md:pr-80"
|
||||
: // Only KF panel open: 320px
|
||||
"md:pr-6" // Neither open: 24px
|
||||
"md:pr-0" // Neither open: 24px
|
||||
}`}
|
||||
>
|
||||
<div className="container py-6 lg:py-8">{children}</div>
|
||||
<div className="container py-6 lg:py-8 px-4 lg:px-6">{children}</div>
|
||||
</main>
|
||||
<TaskNotificationMenu />
|
||||
<KnowledgeFilterPanel />
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import tailwindcssTypography from "@tailwindcss/typography";
|
|||
import { fontFamily } from "tailwindcss/defaultTheme";
|
||||
import plugin from "tailwindcss/plugin";
|
||||
import tailwindcssAnimate from "tailwindcss-animate";
|
||||
import tailwindcssLineClamp from "@tailwindcss/line-clamp";
|
||||
|
||||
const config = {
|
||||
darkMode: ["class"],
|
||||
|
|
@ -175,6 +176,7 @@ const config = {
|
|||
},
|
||||
plugins: [
|
||||
tailwindcssAnimate,
|
||||
tailwindcssLineClamp,
|
||||
tailwindcssForms({
|
||||
strategy: "class",
|
||||
}),
|
||||
|
|
|
|||
|
|
@ -19,10 +19,18 @@ class KnowledgeFilterService:
|
|||
|
||||
# Index the knowledge filter document
|
||||
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":
|
||||
# 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}
|
||||
else:
|
||||
return {"success": False, "error": "Failed to create knowledge filter"}
|
||||
|
|
@ -138,11 +146,19 @@ class KnowledgeFilterService:
|
|||
|
||||
# Update the document
|
||||
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"]:
|
||||
# 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(
|
||||
index=KNOWLEDGE_FILTERS_INDEX_NAME, id=filter_id
|
||||
)
|
||||
|
|
@ -164,10 +180,17 @@ class KnowledgeFilterService:
|
|||
)
|
||||
|
||||
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":
|
||||
# Extra safety: ensure visibility in subsequent searches
|
||||
try:
|
||||
await opensearch_client.indices.refresh(index=KNOWLEDGE_FILTERS_INDEX_NAME)
|
||||
except Exception:
|
||||
pass
|
||||
return {
|
||||
"success": True,
|
||||
"message": "Knowledge filter deleted successfully",
|
||||
|
|
@ -230,7 +253,10 @@ class KnowledgeFilterService:
|
|||
}
|
||||
|
||||
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"]:
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue