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

Refetch search when a new file is added

Browse source
This commit is contained in:
Lucas Oliveira 2025-09-10 17:58:46 -03:00
parent fa9075d35a
commit b9b0f204a8
3 changed files with 507 additions and 363 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

461
frontend/components/knowledge-dropdown.tsx
View file

@ -1,82 +1,128 @@
"use client" "use client";
import { useState, useEffect, useRef } from "react" import { useQueryClient } from "@tanstack/react-query";
import { ChevronDown, Upload, FolderOpen, Cloud, PlugZap, Plus } from "lucide-react" import {
import { Button } from "@/components/ui/button" ChevronDown,
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" Cloud,
import { Input } from "@/components/ui/input" FolderOpen,
import { Label } from "@/components/ui/label" PlugZap,
import { cn } from "@/lib/utils" Plus,
import { useTask } from "@/contexts/task-context" Upload,
import { useRouter } from "next/navigation" } from "lucide-react";
import { useRouter } from "next/navigation";
import { useEffect, useRef, useState } from "react";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useTask } from "@/contexts/task-context";
import { cn } from "@/lib/utils";
interface KnowledgeDropdownProps { interface KnowledgeDropdownProps {
active?: boolean active?: boolean;
variant?: 'navigation' | 'button' variant?: "navigation" | "button";
} }
export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeDropdownProps) { export function KnowledgeDropdown({
const { addTask } = useTask() active,
const router = useRouter() variant = "navigation",
const [isOpen, setIsOpen] = useState(false) }: KnowledgeDropdownProps) {
const [showFolderDialog, setShowFolderDialog] = useState(false) const { addTask } = useTask();
const [showS3Dialog, setShowS3Dialog] = useState(false) const router = useRouter();
const [awsEnabled, setAwsEnabled] = useState(false) const [isOpen, setIsOpen] = useState(false);
const [folderPath, setFolderPath] = useState("/app/documents/") const [showFolderDialog, setShowFolderDialog] = useState(false);
const [bucketUrl, setBucketUrl] = useState("s3://") const [showS3Dialog, setShowS3Dialog] = useState(false);
const [folderLoading, setFolderLoading] = useState(false) const [awsEnabled, setAwsEnabled] = useState(false);
const [s3Loading, setS3Loading] = useState(false) const [folderPath, setFolderPath] = useState("/app/documents/");
const [fileUploading, setFileUploading] = useState(false) const [bucketUrl, setBucketUrl] = useState("s3://");
const [cloudConnectors, setCloudConnectors] = useState<{[key: string]: {name: string, available: boolean, connected: boolean, hasToken: boolean}}>({}) const [folderLoading, setFolderLoading] = useState(false);
const fileInputRef = useRef<HTMLInputElement>(null) const [s3Loading, setS3Loading] = useState(false);
const dropdownRef = useRef<HTMLDivElement>(null) const [fileUploading, setFileUploading] = useState(false);
const [cloudConnectors, setCloudConnectors] = useState<{
[key: string]: {
name: string;
available: boolean;
connected: boolean;
hasToken: boolean;
};
}>({});
const fileInputRef = useRef<HTMLInputElement>(null);
const dropdownRef = useRef<HTMLDivElement>(null);
const queryClient = useQueryClient();
const refetchSearch = () => {
queryClient.invalidateQueries({ queryKey: ["search"] });
};
// Check AWS availability and cloud connectors on mount // Check AWS availability and cloud connectors on mount
useEffect(() => { useEffect(() => {
const checkAvailability = async () => { const checkAvailability = async () => {
try { try {
// Check AWS // Check AWS
const awsRes = await fetch("/api/upload_options") const awsRes = await fetch("/api/upload_options");
if (awsRes.ok) { if (awsRes.ok) {
const awsData = await awsRes.json() const awsData = await awsRes.json();
setAwsEnabled(Boolean(awsData.aws)) setAwsEnabled(Boolean(awsData.aws));
} }
// Check cloud connectors // Check cloud connectors
const connectorsRes = await fetch('/api/connectors') const connectorsRes = await fetch("/api/connectors");
if (connectorsRes.ok) { if (connectorsRes.ok) {
const connectorsResult = await connectorsRes.json() const connectorsResult = await connectorsRes.json();
const cloudConnectorTypes = ['google_drive', 'onedrive', 'sharepoint'] const cloudConnectorTypes = [
const connectorInfo: {[key: string]: {name: string, available: boolean, connected: boolean, hasToken: boolean}} = {} "google_drive",
"onedrive",
"sharepoint",
];
const connectorInfo: {
[key: string]: {
name: string;
available: boolean;
connected: boolean;
hasToken: boolean;
};
} = {};
for (const type of cloudConnectorTypes) { for (const type of cloudConnectorTypes) {
if (connectorsResult.connectors[type]) { if (connectorsResult.connectors[type]) {
connectorInfo[type] = { connectorInfo[type] = {
name: connectorsResult.connectors[type].name, name: connectorsResult.connectors[type].name,
available: connectorsResult.connectors[type].available, available: connectorsResult.connectors[type].available,
connected: false, connected: false,
hasToken: false hasToken: false,
} };
// Check connection status // Check connection status
try { try {
const statusRes = await fetch(`/api/connectors/${type}/status`) const statusRes = await fetch(`/api/connectors/${type}/status`);
if (statusRes.ok) { if (statusRes.ok) {
const statusData = await statusRes.json() const statusData = await statusRes.json();
const connections = statusData.connections || [] const connections = statusData.connections || [];
const activeConnection = connections.find((conn: {is_active: boolean, connection_id: string}) => conn.is_active) const activeConnection = connections.find(
const isConnected = activeConnection !== undefined (conn: { is_active: boolean; connection_id: string }) =>
conn.is_active,
);
const isConnected = activeConnection !== undefined;
if (isConnected && activeConnection) { if (isConnected && activeConnection) {
connectorInfo[type].connected = true connectorInfo[type].connected = true;
// Check token availability // Check token availability
try { try {
const tokenRes = await fetch(`/api/connectors/${type}/token?connection_id=${activeConnection.connection_id}`) const tokenRes = await fetch(
`/api/connectors/${type}/token?connection_id=${activeConnection.connection_id}`,
);
if (tokenRes.ok) { if (tokenRes.ok) {
const tokenData = await tokenRes.json() const tokenData = await tokenRes.json();
if (tokenData.access_token) { if (tokenData.access_token) {
connectorInfo[type].hasToken = true connectorInfo[type].hasToken = true;
} }
} }
} catch { } catch {
@ -90,114 +136,136 @@ export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeD
} }
} }
setCloudConnectors(connectorInfo) setCloudConnectors(connectorInfo);
} }
} catch (err) { } catch (err) {
console.error("Failed to check availability", err) console.error("Failed to check availability", err);
} }
} };
checkAvailability() checkAvailability();
}, []) }, []);
// Handle click outside to close dropdown // Handle click outside to close dropdown
useEffect(() => { useEffect(() => {
const handleClickOutside = (event: MouseEvent) => { const handleClickOutside = (event: MouseEvent) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { if (
setIsOpen(false) dropdownRef.current &&
!dropdownRef.current.contains(event.target as Node)
) {
setIsOpen(false);
} }
} };
if (isOpen) { if (isOpen) {
document.addEventListener("mousedown", handleClickOutside) document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside) return () =>
document.removeEventListener("mousedown", handleClickOutside);
} }
}, [isOpen]) }, [isOpen]);
const handleFileUpload = () => { const handleFileUpload = () => {
fileInputRef.current?.click() fileInputRef.current?.click();
} };
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => { const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
const files = e.target.files const files = e.target.files;
if (files && files.length > 0) { if (files && files.length > 0) {
// Close dropdown and disable button immediately after file selection // Close dropdown and disable button immediately after file selection
setIsOpen(false) setIsOpen(false);
setFileUploading(true) setFileUploading(true);
// Trigger the same file upload event as the chat page // Trigger the same file upload event as the chat page
window.dispatchEvent(new CustomEvent('fileUploadStart', { window.dispatchEvent(
detail: { filename: files[0].name } new CustomEvent("fileUploadStart", {
})) detail: { filename: files[0].name },
}),
);
try { try {
const formData = new FormData() const formData = new FormData();
formData.append('file', files[0]) formData.append("file", files[0]);
// Use router upload and ingest endpoint (automatically routes based on configuration) // Use router upload and ingest endpoint (automatically routes based on configuration)
const uploadIngestRes = await fetch('/api/router/upload_ingest', { const uploadIngestRes = await fetch("/api/router/upload_ingest", {
method: 'POST', method: "POST",
body: formData, body: formData,
}) });
const uploadIngestJson = await uploadIngestRes.json() const uploadIngestJson = await uploadIngestRes.json();
if (!uploadIngestRes.ok) { if (!uploadIngestRes.ok) {
throw new Error(uploadIngestJson?.error || 'Upload and ingest failed') throw new Error(
uploadIngestJson?.error || "Upload and ingest failed",
);
} }
// Extract results from the unified response // Extract results from the unified response
const fileId = uploadIngestJson?.upload?.id const fileId = uploadIngestJson?.upload?.id;
const filePath = uploadIngestJson?.upload?.path const filePath = uploadIngestJson?.upload?.path;
const runJson = uploadIngestJson?.ingestion const runJson = uploadIngestJson?.ingestion;
const deleteResult = uploadIngestJson?.deletion const deleteResult = uploadIngestJson?.deletion;
if (!fileId || !filePath) { if (!fileId || !filePath) {
throw new Error('Upload successful but no file id/path returned') throw new Error("Upload successful but no file id/path returned");
} }
// Log deletion status if provided // Log deletion status if provided
if (deleteResult) { if (deleteResult) {
if (deleteResult.status === 'deleted') { if (deleteResult.status === "deleted") {
console.log('File successfully cleaned up from Langflow:', deleteResult.file_id) console.log(
} else if (deleteResult.status === 'delete_failed') { "File successfully cleaned up from Langflow:",
console.warn('Failed to cleanup file from Langflow:', deleteResult.error) deleteResult.file_id,
);
} else if (deleteResult.status === "delete_failed") {
console.warn(
"Failed to cleanup file from Langflow:",
deleteResult.error,
);
} }
} }
// Notify UI // Notify UI
window.dispatchEvent(new CustomEvent('fileUploaded', { window.dispatchEvent(
detail: { new CustomEvent("fileUploaded", {
file: files[0], detail: {
result: { file: files[0],
file_id: fileId, result: {
file_path: filePath, file_id: fileId,
run: runJson, file_path: filePath,
deletion: deleteResult, run: runJson,
unified: true deletion: deleteResult,
} unified: true,
} },
})) },
}),
);
// Trigger search refresh after successful ingestion // Trigger search refresh after successful ingestion
window.dispatchEvent(new CustomEvent('knowledgeUpdated')) window.dispatchEvent(new CustomEvent("knowledgeUpdated"));
} catch (error) { } catch (error) {
window.dispatchEvent(new CustomEvent('fileUploadError', { window.dispatchEvent(
detail: { filename: files[0].name, error: error instanceof Error ? error.message : 'Upload failed' } new CustomEvent("fileUploadError", {
})) detail: {
filename: files[0].name,
error: error instanceof Error ? error.message : "Upload failed",
},
}),
);
} finally { } finally {
window.dispatchEvent(new CustomEvent('fileUploadComplete')) window.dispatchEvent(new CustomEvent("fileUploadComplete"));
setFileUploading(false) setFileUploading(false);
refetchSearch();
} }
} }
// Reset file input // Reset file input
if (fileInputRef.current) { if (fileInputRef.current) {
fileInputRef.current.value = '' fileInputRef.current.value = "";
} }
} };
const handleFolderUpload = async () => { const handleFolderUpload = async () => {
if (!folderPath.trim()) return if (!folderPath.trim()) return;
setFolderLoading(true) setFolderLoading(true);
setShowFolderDialog(false) setShowFolderDialog(false);
try { try {
const response = await fetch("/api/upload_path", { const response = await fetch("/api/upload_path", {
@ -206,40 +274,40 @@ export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeD
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
body: JSON.stringify({ path: folderPath }), body: JSON.stringify({ path: folderPath }),
}) });
const result = await response.json();
const result = await response.json()
if (response.status === 201) { if (response.status === 201) {
const taskId = result.task_id || result.id const taskId = result.task_id || result.id;
if (!taskId) { if (!taskId) {
throw new Error("No task ID received from server") throw new Error("No task ID received from server");
} }
addTask(taskId) addTask(taskId);
setFolderPath("") setFolderPath("");
// Trigger search refresh after successful folder processing starts // Trigger search refresh after successful folder processing starts
window.dispatchEvent(new CustomEvent('knowledgeUpdated')) window.dispatchEvent(new CustomEvent("knowledgeUpdated"));
} else if (response.ok) { } else if (response.ok) {
setFolderPath("") setFolderPath("");
window.dispatchEvent(new CustomEvent('knowledgeUpdated')) window.dispatchEvent(new CustomEvent("knowledgeUpdated"));
} else { } else {
console.error("Folder upload failed:", result.error) console.error("Folder upload failed:", result.error);
} }
} catch (error) { } catch (error) {
console.error("Folder upload error:", error) console.error("Folder upload error:", error);
} finally { } finally {
setFolderLoading(false) setFolderLoading(false);
refetchSearch();
} }
} };
const handleS3Upload = async () => { const handleS3Upload = async () => {
if (!bucketUrl.trim()) return if (!bucketUrl.trim()) return;
setS3Loading(true) setS3Loading(true);
setShowS3Dialog(false) setShowS3Dialog(false);
try { try {
const response = await fetch("/api/upload_bucket", { const response = await fetch("/api/upload_bucket", {
@ -248,30 +316,31 @@ export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeD
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
body: JSON.stringify({ s3_url: bucketUrl }), body: JSON.stringify({ s3_url: bucketUrl }),
}) });
const result = await response.json() const result = await response.json();
if (response.status === 201) { if (response.status === 201) {
const taskId = result.task_id || result.id const taskId = result.task_id || result.id;
if (!taskId) { if (!taskId) {
throw new Error("No task ID received from server") throw new Error("No task ID received from server");
} }
addTask(taskId) addTask(taskId);
setBucketUrl("s3://") setBucketUrl("s3://");
// Trigger search refresh after successful S3 processing starts // Trigger search refresh after successful S3 processing starts
window.dispatchEvent(new CustomEvent('knowledgeUpdated')) window.dispatchEvent(new CustomEvent("knowledgeUpdated"));
} else { } else {
console.error("S3 upload failed:", result.error) console.error("S3 upload failed:", result.error);
} }
} catch (error) { } catch (error) {
console.error("S3 upload error:", error) console.error("S3 upload error:", error);
} finally { } finally {
setS3Loading(false) setS3Loading(false);
refetchSearch();
} }
} };
const cloudConnectorItems = Object.entries(cloudConnectors) const cloudConnectorItems = Object.entries(cloudConnectors)
.filter(([, info]) => info.available) .filter(([, info]) => info.available)
@ -279,72 +348,99 @@ export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeD
label: info.name, label: info.name,
icon: PlugZap, icon: PlugZap,
onClick: () => { onClick: () => {
setIsOpen(false) setIsOpen(false);
if (info.connected && info.hasToken) { if (info.connected && info.hasToken) {
router.push(`/upload/${type}`) router.push(`/upload/${type}`);
} else { } else {
router.push('/settings') router.push("/settings");
} }
}, },
disabled: !info.connected || !info.hasToken, disabled: !info.connected || !info.hasToken,
tooltip: !info.connected ? `Connect ${info.name} in Settings first` : tooltip: !info.connected
!info.hasToken ? `Reconnect ${info.name} - access token required` : ? `Connect ${info.name} in Settings first`
undefined : !info.hasToken
})) ? `Reconnect ${info.name} - access token required`
: undefined,
}));
const menuItems = [ const menuItems = [
{ {
label: "Add File", label: "Add File",
icon: Upload, icon: Upload,
onClick: handleFileUpload onClick: handleFileUpload,
}, },
{ {
label: "Process Folder", label: "Process Folder",
icon: FolderOpen, icon: FolderOpen,
onClick: () => { onClick: () => {
setIsOpen(false) setIsOpen(false);
setShowFolderDialog(true) setShowFolderDialog(true);
} },
}, },
...(awsEnabled ? [{ ...(awsEnabled
label: "Process S3 Bucket", ? [
icon: Cloud, {
onClick: () => { label: "Process S3 Bucket",
setIsOpen(false) icon: Cloud,
setShowS3Dialog(true) onClick: () => {
} setIsOpen(false);
}] : []), setShowS3Dialog(true);
...cloudConnectorItems },
] },
]
: []),
...cloudConnectorItems,
];
return ( return (
<> <>
<div ref={dropdownRef} className="relative"> <div ref={dropdownRef} className="relative">
<button <button
onClick={() => !(fileUploading || folderLoading || s3Loading) && setIsOpen(!isOpen)} onClick={() =>
!(fileUploading || folderLoading || s3Loading) && setIsOpen(!isOpen)
}
disabled={fileUploading || folderLoading || s3Loading} disabled={fileUploading || folderLoading || s3Loading}
className={cn( className={cn(
variant === 'button' variant === "button"
? "rounded-lg h-12 px-4 flex items-center gap-2 bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed" ? "rounded-lg h-12 px-4 flex items-center gap-2 bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
: "text-sm group flex p-3 w-full justify-start font-medium cursor-pointer hover:bg-accent hover:text-accent-foreground rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed", : "text-sm group flex p-3 w-full justify-start font-medium cursor-pointer hover:bg-accent hover:text-accent-foreground rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed",
variant === 'navigation' && active variant === "navigation" && active
? "bg-accent text-accent-foreground shadow-sm" ? "bg-accent text-accent-foreground shadow-sm"
: variant === 'navigation' ? "text-foreground hover:text-accent-foreground" : "", : variant === "navigation"
? "text-foreground hover:text-accent-foreground"
: "",
)} )}
> >
{variant === 'button' ? ( {variant === "button" ? (
<> <>
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
<span>Add Knowledge</span> <span>Add Knowledge</span>
<ChevronDown className={cn("h-4 w-4 transition-transform", isOpen && "rotate-180")} /> <ChevronDown
className={cn(
"h-4 w-4 transition-transform",
isOpen && "rotate-180",
)}
/>
</> </>
) : ( ) : (
<> <>
<div className="flex items-center flex-1"> <div className="flex items-center flex-1">
<Upload className={cn("h-4 w-4 mr-3 shrink-0", active ? "text-accent-foreground" : "text-muted-foreground group-hover:text-foreground")} /> <Upload
className={cn(
"h-4 w-4 mr-3 shrink-0",
active
? "text-accent-foreground"
: "text-muted-foreground group-hover:text-foreground",
)}
/>
Knowledge Knowledge
</div> </div>
<ChevronDown className={cn("h-4 w-4 transition-transform", isOpen && "rotate-180")} /> <ChevronDown
className={cn(
"h-4 w-4 transition-transform",
isOpen && "rotate-180",
)}
/>
</> </>
)} )}
</button> </button>
@ -356,11 +452,13 @@ export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeD
<button <button
key={index} key={index}
onClick={item.onClick} onClick={item.onClick}
disabled={'disabled' in item ? item.disabled : false} disabled={"disabled" in item ? item.disabled : false}
title={'tooltip' in item ? item.tooltip : undefined} title={"tooltip" in item ? item.tooltip : undefined}
className={cn( className={cn(
"w-full px-3 py-2 text-left text-sm hover:bg-accent hover:text-accent-foreground", "w-full px-3 py-2 text-left text-sm hover:bg-accent hover:text-accent-foreground",
'disabled' in item && item.disabled && "opacity-50 cursor-not-allowed hover:bg-transparent hover:text-current" "disabled" in item &&
item.disabled &&
"opacity-50 cursor-not-allowed hover:bg-transparent hover:text-current",
)} )}
> >
{item.label} {item.label}
@ -429,7 +527,8 @@ export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeD
Process S3 Bucket Process S3 Bucket
</DialogTitle> </DialogTitle>
<DialogDescription> <DialogDescription>
Process all documents from an S3 bucket. AWS credentials must be configured. Process all documents from an S3 bucket. AWS credentials must be
configured.
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-4"> <div className="space-y-4">
@ -444,10 +543,7 @@ export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeD
/> />
</div> </div>
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<Button <Button variant="outline" onClick={() => setShowS3Dialog(false)}>
variant="outline"
onClick={() => setShowS3Dialog(false)}
>
Cancel Cancel
</Button> </Button>
<Button <Button
@ -460,7 +556,6 @@ export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeD
</div> </div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</> </>
) );
} }

128
frontend/src/contexts/knowledge-filter-context.tsx
View file

@ -1,95 +1,107 @@
"use client" "use client";
import React, { createContext, useContext, useState, ReactNode } from 'react' import React, {
createContext,
type ReactNode,
useContext,
useState,
} from "react";
interface KnowledgeFilter { interface KnowledgeFilter {
id: string id: string;
name: string name: string;
description: string description: string;
query_data: string query_data: string;
owner: string owner: string;
created_at: string created_at: string;
updated_at: string updated_at: string;
} }
interface ParsedQueryData { export interface ParsedQueryData {
query: string query: string;
filters: { filters: {
data_sources: string[] data_sources: string[];
document_types: string[] document_types: string[];
owners: string[] owners: string[];
connector_types: string[] connector_types: string[];
} };
limit: number limit: number;
scoreThreshold: number scoreThreshold: number;
} }
interface KnowledgeFilterContextType { interface KnowledgeFilterContextType {
selectedFilter: KnowledgeFilter | null selectedFilter: KnowledgeFilter | null;
parsedFilterData: ParsedQueryData | null parsedFilterData: ParsedQueryData | null;
setSelectedFilter: (filter: KnowledgeFilter | null) => void setSelectedFilter: (filter: KnowledgeFilter | null) => void;
clearFilter: () => void clearFilter: () => void;
isPanelOpen: boolean isPanelOpen: boolean;
openPanel: () => void openPanel: () => void;
closePanel: () => void closePanel: () => void;
closePanelOnly: () => void closePanelOnly: () => void;
} }
const KnowledgeFilterContext = createContext<KnowledgeFilterContextType | undefined>(undefined) const KnowledgeFilterContext = createContext<
KnowledgeFilterContextType | undefined
>(undefined);
export function useKnowledgeFilter() { export function useKnowledgeFilter() {
const context = useContext(KnowledgeFilterContext) const context = useContext(KnowledgeFilterContext);
if (context === undefined) { if (context === undefined) {
throw new Error('useKnowledgeFilter must be used within a KnowledgeFilterProvider') throw new Error(
"useKnowledgeFilter must be used within a KnowledgeFilterProvider",
);
} }
return context return context;
} }
interface KnowledgeFilterProviderProps { interface KnowledgeFilterProviderProps {
children: ReactNode children: ReactNode;
} }
export function KnowledgeFilterProvider({ children }: KnowledgeFilterProviderProps) { export function KnowledgeFilterProvider({
const [selectedFilter, setSelectedFilterState] = useState<KnowledgeFilter | null>(null) children,
const [parsedFilterData, setParsedFilterData] = useState<ParsedQueryData | null>(null) }: KnowledgeFilterProviderProps) {
const [isPanelOpen, setIsPanelOpen] = useState(false) const [selectedFilter, setSelectedFilterState] =
useState<KnowledgeFilter | null>(null);
const [parsedFilterData, setParsedFilterData] =
useState<ParsedQueryData | null>(null);
const [isPanelOpen, setIsPanelOpen] = useState(false);
const setSelectedFilter = (filter: KnowledgeFilter | null) => { const setSelectedFilter = (filter: KnowledgeFilter | null) => {
setSelectedFilterState(filter) setSelectedFilterState(filter);
if (filter) { if (filter) {
try { try {
const parsed = JSON.parse(filter.query_data) as ParsedQueryData const parsed = JSON.parse(filter.query_data) as ParsedQueryData;
setParsedFilterData(parsed) setParsedFilterData(parsed);
// Auto-open panel when filter is selected // Auto-open panel when filter is selected
setIsPanelOpen(true) setIsPanelOpen(true);
} catch (error) { } catch (error) {
console.error('Error parsing filter data:', error) console.error("Error parsing filter data:", error);
setParsedFilterData(null) setParsedFilterData(null);
} }
} else { } else {
setParsedFilterData(null) setParsedFilterData(null);
setIsPanelOpen(false) setIsPanelOpen(false);
} }
} };
const clearFilter = () => { const clearFilter = () => {
setSelectedFilter(null) setSelectedFilter(null);
} };
const openPanel = () => { const openPanel = () => {
setIsPanelOpen(true) setIsPanelOpen(true);
} };
const closePanel = () => { const closePanel = () => {
setSelectedFilter(null) // This will also close the panel setSelectedFilter(null); // This will also close the panel
} };
const closePanelOnly = () => { const closePanelOnly = () => {
setIsPanelOpen(false) // Close panel but keep filter selected setIsPanelOpen(false); // Close panel but keep filter selected
} };
const value: KnowledgeFilterContextType = { const value: KnowledgeFilterContextType = {
selectedFilter, selectedFilter,
@ -100,11 +112,11 @@ export function KnowledgeFilterProvider({ children }: KnowledgeFilterProviderPro
openPanel, openPanel,
closePanel, closePanel,
closePanelOnly, closePanelOnly,
} };
return ( return (
<KnowledgeFilterContext.Provider value={value}> <KnowledgeFilterContext.Provider value={value}>
{children} {children}
</KnowledgeFilterContext.Provider> </KnowledgeFilterContext.Provider>
) );
} }

281
frontend/src/contexts/task-context.tsx
View file

@ -1,62 +1,88 @@
"use client" "use client";
import React, { createContext, useContext, useState, useEffect, useCallback } from 'react' import { useQueryClient } from "@tanstack/react-query";
import { toast } from 'sonner' import type React from "react";
import { useAuth } from '@/contexts/auth-context' import {
createContext,
useCallback,
useContext,
useEffect,
useState,
} from "react";
import { toast } from "sonner";
import { useAuth } from "@/contexts/auth-context";
export interface Task { export interface Task {
task_id: string task_id: string;
status: 'pending' | 'running' | 'processing' | 'completed' | 'failed' | 'error' status:
total_files?: number | "pending"
processed_files?: number | "running"
successful_files?: number | "processing"
failed_files?: number | "completed"
created_at: string | "failed"
updated_at: string | "error";
duration_seconds?: number total_files?: number;
result?: Record<string, unknown> processed_files?: number;
error?: string successful_files?: number;
files?: Record<string, Record<string, unknown>> failed_files?: number;
created_at: string;
updated_at: string;
duration_seconds?: number;
result?: Record<string, unknown>;
error?: string;
files?: Record<string, Record<string, unknown>>;
} }
interface TaskContextType { interface TaskContextType {
tasks: Task[] tasks: Task[];
addTask: (taskId: string) => void addTask: (taskId: string) => void;
removeTask: (taskId: string) => void removeTask: (taskId: string) => void;
refreshTasks: () => Promise<void> refreshTasks: () => Promise<void>;
cancelTask: (taskId: string) => Promise<void> cancelTask: (taskId: string) => Promise<void>;
isPolling: boolean isPolling: boolean;
isFetching: boolean isFetching: boolean;
isMenuOpen: boolean isMenuOpen: boolean;
toggleMenu: () => void toggleMenu: () => void;
} }
const TaskContext = createContext<TaskContextType | undefined>(undefined) const TaskContext = createContext<TaskContextType | undefined>(undefined);
export function TaskProvider({ children }: { children: React.ReactNode }) { export function TaskProvider({ children }: { children: React.ReactNode }) {
const [tasks, setTasks] = useState<Task[]>([]) const [tasks, setTasks] = useState<Task[]>([]);
const [isPolling, setIsPolling] = useState(false) const [isPolling, setIsPolling] = useState(false);
const [isFetching, setIsFetching] = useState(false) const [isFetching, setIsFetching] = useState(false);
const [isMenuOpen, setIsMenuOpen] = useState(false) const [isMenuOpen, setIsMenuOpen] = useState(false);
const { isAuthenticated, isNoAuthMode } = useAuth() const { isAuthenticated, isNoAuthMode } = useAuth();
const queryClient = useQueryClient();
const refetchSearch = () => {
queryClient.invalidateQueries({ queryKey: ["search"] });
};
const fetchTasks = useCallback(async () => { const fetchTasks = useCallback(async () => {
if (!isAuthenticated && !isNoAuthMode) return if (!isAuthenticated && !isNoAuthMode) return;
setIsFetching(true) setIsFetching(true);
try { try {
const response = await fetch('/api/tasks') const response = await fetch("/api/tasks");
if (response.ok) { if (response.ok) {
const data = await response.json() const data = await response.json();
const newTasks = data.tasks || [] const newTasks = data.tasks || [];
// Update tasks and check for status changes in the same state update // Update tasks and check for status changes in the same state update
setTasks(prevTasks => { setTasks((prevTasks) => {
// Check for newly completed tasks to show toasts // Check for newly completed tasks to show toasts
if (prevTasks.length > 0) { if (prevTasks.length > 0) {
newTasks.forEach((newTask: Task) => { newTasks.forEach((newTask: Task) => {
const oldTask = prevTasks.find(t => t.task_id === newTask.task_id) const oldTask = prevTasks.find(
if (oldTask && oldTask.status !== 'completed' && newTask.status === 'completed') { (t) => t.task_id === newTask.task_id,
);
if (
oldTask &&
oldTask.status !== "completed" &&
newTask.status === "completed"
) {
// Task just completed - show success toast // Task just completed - show success toast
toast.success("Task completed successfully!", { toast.success("Task completed successfully!", {
description: `Task ${newTask.task_id} has finished processing.`, description: `Task ${newTask.task_id} has finished processing.`,
@ -64,121 +90,136 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
label: "View", label: "View",
onClick: () => console.log("View task", newTask.task_id), onClick: () => console.log("View task", newTask.task_id),
}, },
}) });
} else if (oldTask && oldTask.status !== 'failed' && oldTask.status !== 'error' && (newTask.status === 'failed' || newTask.status === 'error')) { refetchSearch();
} else if (
oldTask &&
oldTask.status !== "failed" &&
oldTask.status !== "error" &&
(newTask.status === "failed" || newTask.status === "error")
) {
// Task just failed - show error toast // Task just failed - show error toast
toast.error("Task failed", { toast.error("Task failed", {
description: `Task ${newTask.task_id} failed: ${newTask.error || 'Unknown error'}`, description: `Task ${newTask.task_id} failed: ${
}) newTask.error || "Unknown error"
}`,
});
} }
}) });
} }
return newTasks return newTasks;
}) });
} }
} catch (error) { } catch (error) {
console.error('Failed to fetch tasks:', error) console.error("Failed to fetch tasks:", error);
} finally { } finally {
setIsFetching(false) setIsFetching(false);
} }
}, [isAuthenticated, isNoAuthMode]) // Removed 'tasks' from dependencies to prevent infinite loop! }, [isAuthenticated, isNoAuthMode]); // Removed 'tasks' from dependencies to prevent infinite loop!
const addTask = useCallback((taskId: string) => { const addTask = useCallback((taskId: string) => {
// Immediately start aggressive polling for the new task // Immediately start aggressive polling for the new task
let pollAttempts = 0 let pollAttempts = 0;
const maxPollAttempts = 30 // Poll for up to 30 seconds const maxPollAttempts = 30; // Poll for up to 30 seconds
const aggressivePoll = async () => { const aggressivePoll = async () => {
try { try {
const response = await fetch('/api/tasks') const response = await fetch("/api/tasks");
if (response.ok) { if (response.ok) {
const data = await response.json() const data = await response.json();
const newTasks = data.tasks || [] const newTasks = data.tasks || [];
const foundTask = newTasks.find((task: Task) => task.task_id === taskId) const foundTask = newTasks.find(
(task: Task) => task.task_id === taskId,
);
if (foundTask) { if (foundTask) {
// Task found! Update the tasks state // Task found! Update the tasks state
setTasks(prevTasks => { setTasks((prevTasks) => {
// Check if task is already in the list // Check if task is already in the list
const exists = prevTasks.some(t => t.task_id === taskId) const exists = prevTasks.some((t) => t.task_id === taskId);
if (!exists) { if (!exists) {
return [...prevTasks, foundTask] return [...prevTasks, foundTask];
} }
// Update existing task // Update existing task
return prevTasks.map(t => t.task_id === taskId ? foundTask : t) return prevTasks.map((t) =>
}) t.task_id === taskId ? foundTask : t,
return // Stop polling, we found it );
});
return; // Stop polling, we found it
} }
} }
} catch (error) { } catch (error) {
console.error('Aggressive polling failed:', error) console.error("Aggressive polling failed:", error);
} }
pollAttempts++ pollAttempts++;
if (pollAttempts < maxPollAttempts) { if (pollAttempts < maxPollAttempts) {
// Continue polling every 1 second for new tasks // Continue polling every 1 second for new tasks
setTimeout(aggressivePoll, 1000) setTimeout(aggressivePoll, 1000);
} }
} };
// Start aggressive polling after a short delay to allow backend to process // Start aggressive polling after a short delay to allow backend to process
setTimeout(aggressivePoll, 500) setTimeout(aggressivePoll, 500);
}, []) }, []);
const refreshTasks = useCallback(async () => { const refreshTasks = useCallback(async () => {
await fetchTasks() await fetchTasks();
}, [fetchTasks]) }, [fetchTasks]);
const removeTask = useCallback((taskId: string) => { const removeTask = useCallback((taskId: string) => {
setTasks(prev => prev.filter(task => task.task_id !== taskId)) setTasks((prev) => prev.filter((task) => task.task_id !== taskId));
}, []) }, []);
const cancelTask = useCallback(async (taskId: string) => { const cancelTask = useCallback(
try { async (taskId: string) => {
const response = await fetch(`/api/tasks/${taskId}/cancel`, { try {
method: 'POST', const response = await fetch(`/api/tasks/${taskId}/cancel`, {
}) method: "POST",
});
if (response.ok) {
// Immediately refresh tasks to show the updated status if (response.ok) {
await fetchTasks() // Immediately refresh tasks to show the updated status
toast.success("Task cancelled", { await fetchTasks();
description: `Task ${taskId.substring(0, 8)}... has been cancelled` toast.success("Task cancelled", {
}) description: `Task ${taskId.substring(0, 8)}... has been cancelled`,
} else { });
const errorData = await response.json().catch(() => ({})) } else {
throw new Error(errorData.error || 'Failed to cancel task') const errorData = await response.json().catch(() => ({}));
throw new Error(errorData.error || "Failed to cancel task");
}
} catch (error) {
console.error("Failed to cancel task:", error);
toast.error("Failed to cancel task", {
description: error instanceof Error ? error.message : "Unknown error",
});
} }
} catch (error) { },
console.error('Failed to cancel task:', error) [fetchTasks],
toast.error("Failed to cancel task", { );
description: error instanceof Error ? error.message : 'Unknown error'
})
}
}, [fetchTasks])
const toggleMenu = useCallback(() => { const toggleMenu = useCallback(() => {
setIsMenuOpen(prev => !prev) setIsMenuOpen((prev) => !prev);
}, []) }, []);
// Periodic polling for task updates // Periodic polling for task updates
useEffect(() => { useEffect(() => {
if (!isAuthenticated && !isNoAuthMode) return if (!isAuthenticated && !isNoAuthMode) return;
setIsPolling(true);
setIsPolling(true)
// Initial fetch // Initial fetch
fetchTasks() fetchTasks();
// Set up polling interval - every 3 seconds (more responsive for active tasks) // Set up polling interval - every 3 seconds (more responsive for active tasks)
const interval = setInterval(fetchTasks, 3000) const interval = setInterval(fetchTasks, 3000);
return () => { return () => {
clearInterval(interval) clearInterval(interval);
setIsPolling(false) setIsPolling(false);
} };
}, [isAuthenticated, isNoAuthMode, fetchTasks]) }, [isAuthenticated, isNoAuthMode, fetchTasks]);
const value: TaskContextType = { const value: TaskContextType = {
tasks, tasks,
@ -190,19 +231,15 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
isFetching, isFetching,
isMenuOpen, isMenuOpen,
toggleMenu, toggleMenu,
} };
return ( return <TaskContext.Provider value={value}>{children}</TaskContext.Provider>;
<TaskContext.Provider value={value}>
{children}
</TaskContext.Provider>
)
} }
export function useTask() { export function useTask() {
const context = useContext(TaskContext) const context = useContext(TaskContext);
if (context === undefined) { if (context === undefined) {
throw new Error('useTask must be used within a TaskProvider') throw new Error("useTask must be used within a TaskProvider");
} }
return context return context;
} }