Refetch search when a new file is added
This commit is contained in:
Lucas Oliveira
parent
fa9075d35a
commit
b9b0f204a8
3 changed files with 507 additions and 363 deletions
|
|
@ -1,82 +1,128 @@
|
|||
"use client"
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useRef } from "react"
|
||||
import { ChevronDown, Upload, FolderOpen, Cloud, PlugZap, Plus } from "lucide-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 { cn } from "@/lib/utils"
|
||||
import { useTask } from "@/contexts/task-context"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
ChevronDown,
|
||||
Cloud,
|
||||
FolderOpen,
|
||||
PlugZap,
|
||||
Plus,
|
||||
Upload,
|
||||
} 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 {
|
||||
active?: boolean
|
||||
variant?: 'navigation' | 'button'
|
||||
active?: boolean;
|
||||
variant?: "navigation" | "button";
|
||||
}
|
||||
|
||||
export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeDropdownProps) {
|
||||
const { addTask } = useTask()
|
||||
const router = useRouter()
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const [showFolderDialog, setShowFolderDialog] = useState(false)
|
||||
const [showS3Dialog, setShowS3Dialog] = useState(false)
|
||||
const [awsEnabled, setAwsEnabled] = useState(false)
|
||||
const [folderPath, setFolderPath] = useState("/app/documents/")
|
||||
const [bucketUrl, setBucketUrl] = useState("s3://")
|
||||
const [folderLoading, setFolderLoading] = useState(false)
|
||||
const [s3Loading, setS3Loading] = useState(false)
|
||||
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)
|
||||
export function KnowledgeDropdown({
|
||||
active,
|
||||
variant = "navigation",
|
||||
}: KnowledgeDropdownProps) {
|
||||
const { addTask } = useTask();
|
||||
const router = useRouter();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [showFolderDialog, setShowFolderDialog] = useState(false);
|
||||
const [showS3Dialog, setShowS3Dialog] = useState(false);
|
||||
const [awsEnabled, setAwsEnabled] = useState(false);
|
||||
const [folderPath, setFolderPath] = useState("/app/documents/");
|
||||
const [bucketUrl, setBucketUrl] = useState("s3://");
|
||||
const [folderLoading, setFolderLoading] = useState(false);
|
||||
const [s3Loading, setS3Loading] = useState(false);
|
||||
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
|
||||
useEffect(() => {
|
||||
const checkAvailability = async () => {
|
||||
try {
|
||||
// Check AWS
|
||||
const awsRes = await fetch("/api/upload_options")
|
||||
const awsRes = await fetch("/api/upload_options");
|
||||
if (awsRes.ok) {
|
||||
const awsData = await awsRes.json()
|
||||
setAwsEnabled(Boolean(awsData.aws))
|
||||
const awsData = await awsRes.json();
|
||||
setAwsEnabled(Boolean(awsData.aws));
|
||||
}
|
||||
|
||||
// Check cloud connectors
|
||||
const connectorsRes = await fetch('/api/connectors')
|
||||
const connectorsRes = await fetch("/api/connectors");
|
||||
if (connectorsRes.ok) {
|
||||
const connectorsResult = await connectorsRes.json()
|
||||
const cloudConnectorTypes = ['google_drive', 'onedrive', 'sharepoint']
|
||||
const connectorInfo: {[key: string]: {name: string, available: boolean, connected: boolean, hasToken: boolean}} = {}
|
||||
|
||||
const connectorsResult = await connectorsRes.json();
|
||||
const cloudConnectorTypes = [
|
||||
"google_drive",
|
||||
"onedrive",
|
||||
"sharepoint",
|
||||
];
|
||||
const connectorInfo: {
|
||||
[key: string]: {
|
||||
name: string;
|
||||
available: boolean;
|
||||
connected: boolean;
|
||||
hasToken: boolean;
|
||||
};
|
||||
} = {};
|
||||
|
||||
for (const type of cloudConnectorTypes) {
|
||||
if (connectorsResult.connectors[type]) {
|
||||
connectorInfo[type] = {
|
||||
name: connectorsResult.connectors[type].name,
|
||||
available: connectorsResult.connectors[type].available,
|
||||
connected: false,
|
||||
hasToken: false
|
||||
}
|
||||
hasToken: false,
|
||||
};
|
||||
|
||||
// Check connection status
|
||||
try {
|
||||
const statusRes = await fetch(`/api/connectors/${type}/status`)
|
||||
const statusRes = await fetch(`/api/connectors/${type}/status`);
|
||||
if (statusRes.ok) {
|
||||
const statusData = await statusRes.json()
|
||||
const connections = statusData.connections || []
|
||||
const activeConnection = connections.find((conn: {is_active: boolean, connection_id: string}) => conn.is_active)
|
||||
const isConnected = activeConnection !== undefined
|
||||
const statusData = await statusRes.json();
|
||||
const connections = statusData.connections || [];
|
||||
const activeConnection = connections.find(
|
||||
(conn: { is_active: boolean; connection_id: string }) =>
|
||||
conn.is_active,
|
||||
);
|
||||
const isConnected = activeConnection !== undefined;
|
||||
|
||||
if (isConnected && activeConnection) {
|
||||
connectorInfo[type].connected = true
|
||||
|
||||
connectorInfo[type].connected = true;
|
||||
|
||||
// Check token availability
|
||||
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) {
|
||||
const tokenData = await tokenRes.json()
|
||||
const tokenData = await tokenRes.json();
|
||||
if (tokenData.access_token) {
|
||||
connectorInfo[type].hasToken = true
|
||||
connectorInfo[type].hasToken = true;
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
|
|
@ -90,114 +136,136 @@ export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeD
|
|||
}
|
||||
}
|
||||
|
||||
setCloudConnectors(connectorInfo)
|
||||
setCloudConnectors(connectorInfo);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to check availability", err)
|
||||
console.error("Failed to check availability", err);
|
||||
}
|
||||
}
|
||||
checkAvailability()
|
||||
}, [])
|
||||
};
|
||||
checkAvailability();
|
||||
}, []);
|
||||
|
||||
// Handle click outside to close dropdown
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||
setIsOpen(false)
|
||||
if (
|
||||
dropdownRef.current &&
|
||||
!dropdownRef.current.contains(event.target as Node)
|
||||
) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (isOpen) {
|
||||
document.addEventListener("mousedown", handleClickOutside)
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside)
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () =>
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
}
|
||||
}, [isOpen])
|
||||
}, [isOpen]);
|
||||
|
||||
const handleFileUpload = () => {
|
||||
fileInputRef.current?.click()
|
||||
}
|
||||
fileInputRef.current?.click();
|
||||
};
|
||||
|
||||
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = e.target.files
|
||||
const files = e.target.files;
|
||||
if (files && files.length > 0) {
|
||||
// Close dropdown and disable button immediately after file selection
|
||||
setIsOpen(false)
|
||||
setFileUploading(true)
|
||||
|
||||
setIsOpen(false);
|
||||
setFileUploading(true);
|
||||
|
||||
// Trigger the same file upload event as the chat page
|
||||
window.dispatchEvent(new CustomEvent('fileUploadStart', {
|
||||
detail: { filename: files[0].name }
|
||||
}))
|
||||
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("fileUploadStart", {
|
||||
detail: { filename: files[0].name },
|
||||
}),
|
||||
);
|
||||
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('file', files[0])
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("file", files[0]);
|
||||
|
||||
// Use router upload and ingest endpoint (automatically routes based on configuration)
|
||||
const uploadIngestRes = await fetch('/api/router/upload_ingest', {
|
||||
method: 'POST',
|
||||
const uploadIngestRes = await fetch("/api/router/upload_ingest", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
})
|
||||
const uploadIngestJson = await uploadIngestRes.json()
|
||||
});
|
||||
const uploadIngestJson = await uploadIngestRes.json();
|
||||
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
|
||||
const fileId = uploadIngestJson?.upload?.id
|
||||
const filePath = uploadIngestJson?.upload?.path
|
||||
const runJson = uploadIngestJson?.ingestion
|
||||
const deleteResult = uploadIngestJson?.deletion
|
||||
|
||||
const fileId = uploadIngestJson?.upload?.id;
|
||||
const filePath = uploadIngestJson?.upload?.path;
|
||||
const runJson = uploadIngestJson?.ingestion;
|
||||
const deleteResult = uploadIngestJson?.deletion;
|
||||
|
||||
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
|
||||
if (deleteResult) {
|
||||
if (deleteResult.status === 'deleted') {
|
||||
console.log('File successfully cleaned up from Langflow:', deleteResult.file_id)
|
||||
} else if (deleteResult.status === 'delete_failed') {
|
||||
console.warn('Failed to cleanup file from Langflow:', deleteResult.error)
|
||||
if (deleteResult.status === "deleted") {
|
||||
console.log(
|
||||
"File successfully cleaned up from Langflow:",
|
||||
deleteResult.file_id,
|
||||
);
|
||||
} else if (deleteResult.status === "delete_failed") {
|
||||
console.warn(
|
||||
"Failed to cleanup file from Langflow:",
|
||||
deleteResult.error,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Notify UI
|
||||
window.dispatchEvent(new CustomEvent('fileUploaded', {
|
||||
detail: {
|
||||
file: files[0],
|
||||
result: {
|
||||
file_id: fileId,
|
||||
file_path: filePath,
|
||||
run: runJson,
|
||||
deletion: deleteResult,
|
||||
unified: true
|
||||
}
|
||||
}
|
||||
}))
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("fileUploaded", {
|
||||
detail: {
|
||||
file: files[0],
|
||||
result: {
|
||||
file_id: fileId,
|
||||
file_path: filePath,
|
||||
run: runJson,
|
||||
deletion: deleteResult,
|
||||
unified: true,
|
||||
},
|
||||
},
|
||||
}),
|
||||
);
|
||||
// Trigger search refresh after successful ingestion
|
||||
window.dispatchEvent(new CustomEvent('knowledgeUpdated'))
|
||||
window.dispatchEvent(new CustomEvent("knowledgeUpdated"));
|
||||
} catch (error) {
|
||||
window.dispatchEvent(new CustomEvent('fileUploadError', {
|
||||
detail: { filename: files[0].name, error: error instanceof Error ? error.message : 'Upload failed' }
|
||||
}))
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("fileUploadError", {
|
||||
detail: {
|
||||
filename: files[0].name,
|
||||
error: error instanceof Error ? error.message : "Upload failed",
|
||||
},
|
||||
}),
|
||||
);
|
||||
} finally {
|
||||
window.dispatchEvent(new CustomEvent('fileUploadComplete'))
|
||||
setFileUploading(false)
|
||||
window.dispatchEvent(new CustomEvent("fileUploadComplete"));
|
||||
setFileUploading(false);
|
||||
refetchSearch();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Reset file input
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = ''
|
||||
fileInputRef.current.value = "";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleFolderUpload = async () => {
|
||||
if (!folderPath.trim()) return
|
||||
if (!folderPath.trim()) return;
|
||||
|
||||
setFolderLoading(true)
|
||||
setShowFolderDialog(false)
|
||||
setFolderLoading(true);
|
||||
setShowFolderDialog(false);
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/upload_path", {
|
||||
|
|
@ -206,40 +274,40 @@ export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeD
|
|||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ path: folderPath }),
|
||||
})
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
if (response.status === 201) {
|
||||
const taskId = result.task_id || result.id
|
||||
|
||||
const taskId = result.task_id || result.id;
|
||||
|
||||
if (!taskId) {
|
||||
throw new Error("No task ID received from server")
|
||||
throw new Error("No task ID received from server");
|
||||
}
|
||||
|
||||
addTask(taskId)
|
||||
setFolderPath("")
|
||||
|
||||
addTask(taskId);
|
||||
setFolderPath("");
|
||||
// Trigger search refresh after successful folder processing starts
|
||||
window.dispatchEvent(new CustomEvent('knowledgeUpdated'))
|
||||
|
||||
window.dispatchEvent(new CustomEvent("knowledgeUpdated"));
|
||||
} else if (response.ok) {
|
||||
setFolderPath("")
|
||||
window.dispatchEvent(new CustomEvent('knowledgeUpdated'))
|
||||
setFolderPath("");
|
||||
window.dispatchEvent(new CustomEvent("knowledgeUpdated"));
|
||||
} else {
|
||||
console.error("Folder upload failed:", result.error)
|
||||
console.error("Folder upload failed:", result.error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Folder upload error:", error)
|
||||
console.error("Folder upload error:", error);
|
||||
} finally {
|
||||
setFolderLoading(false)
|
||||
setFolderLoading(false);
|
||||
refetchSearch();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleS3Upload = async () => {
|
||||
if (!bucketUrl.trim()) return
|
||||
if (!bucketUrl.trim()) return;
|
||||
|
||||
setS3Loading(true)
|
||||
setShowS3Dialog(false)
|
||||
setS3Loading(true);
|
||||
setShowS3Dialog(false);
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/upload_bucket", {
|
||||
|
|
@ -248,30 +316,31 @@ export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeD
|
|||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ s3_url: bucketUrl }),
|
||||
})
|
||||
});
|
||||
|
||||
const result = await response.json()
|
||||
const result = await response.json();
|
||||
|
||||
if (response.status === 201) {
|
||||
const taskId = result.task_id || result.id
|
||||
const taskId = result.task_id || result.id;
|
||||
|
||||
if (!taskId) {
|
||||
throw new Error("No task ID received from server")
|
||||
throw new Error("No task ID received from server");
|
||||
}
|
||||
|
||||
addTask(taskId)
|
||||
setBucketUrl("s3://")
|
||||
addTask(taskId);
|
||||
setBucketUrl("s3://");
|
||||
// Trigger search refresh after successful S3 processing starts
|
||||
window.dispatchEvent(new CustomEvent('knowledgeUpdated'))
|
||||
window.dispatchEvent(new CustomEvent("knowledgeUpdated"));
|
||||
} else {
|
||||
console.error("S3 upload failed:", result.error)
|
||||
console.error("S3 upload failed:", result.error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("S3 upload error:", error)
|
||||
console.error("S3 upload error:", error);
|
||||
} finally {
|
||||
setS3Loading(false)
|
||||
setS3Loading(false);
|
||||
refetchSearch();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cloudConnectorItems = Object.entries(cloudConnectors)
|
||||
.filter(([, info]) => info.available)
|
||||
|
|
@ -279,72 +348,99 @@ export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeD
|
|||
label: info.name,
|
||||
icon: PlugZap,
|
||||
onClick: () => {
|
||||
setIsOpen(false)
|
||||
setIsOpen(false);
|
||||
if (info.connected && info.hasToken) {
|
||||
router.push(`/upload/${type}`)
|
||||
router.push(`/upload/${type}`);
|
||||
} else {
|
||||
router.push('/settings')
|
||||
router.push("/settings");
|
||||
}
|
||||
},
|
||||
disabled: !info.connected || !info.hasToken,
|
||||
tooltip: !info.connected ? `Connect ${info.name} in Settings first` :
|
||||
!info.hasToken ? `Reconnect ${info.name} - access token required` :
|
||||
undefined
|
||||
}))
|
||||
tooltip: !info.connected
|
||||
? `Connect ${info.name} in Settings first`
|
||||
: !info.hasToken
|
||||
? `Reconnect ${info.name} - access token required`
|
||||
: undefined,
|
||||
}));
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
label: "Add File",
|
||||
icon: Upload,
|
||||
onClick: handleFileUpload
|
||||
onClick: handleFileUpload,
|
||||
},
|
||||
{
|
||||
label: "Process Folder",
|
||||
label: "Process Folder",
|
||||
icon: FolderOpen,
|
||||
onClick: () => {
|
||||
setIsOpen(false)
|
||||
setShowFolderDialog(true)
|
||||
}
|
||||
setIsOpen(false);
|
||||
setShowFolderDialog(true);
|
||||
},
|
||||
},
|
||||
...(awsEnabled ? [{
|
||||
label: "Process S3 Bucket",
|
||||
icon: Cloud,
|
||||
onClick: () => {
|
||||
setIsOpen(false)
|
||||
setShowS3Dialog(true)
|
||||
}
|
||||
}] : []),
|
||||
...cloudConnectorItems
|
||||
]
|
||||
...(awsEnabled
|
||||
? [
|
||||
{
|
||||
label: "Process S3 Bucket",
|
||||
icon: Cloud,
|
||||
onClick: () => {
|
||||
setIsOpen(false);
|
||||
setShowS3Dialog(true);
|
||||
},
|
||||
},
|
||||
]
|
||||
: []),
|
||||
...cloudConnectorItems,
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div ref={dropdownRef} className="relative">
|
||||
<button
|
||||
onClick={() => !(fileUploading || folderLoading || s3Loading) && setIsOpen(!isOpen)}
|
||||
onClick={() =>
|
||||
!(fileUploading || folderLoading || s3Loading) && setIsOpen(!isOpen)
|
||||
}
|
||||
disabled={fileUploading || folderLoading || s3Loading}
|
||||
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"
|
||||
: "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
|
||||
? "bg-accent text-accent-foreground shadow-sm"
|
||||
: variant === 'navigation' ? "text-foreground hover:text-accent-foreground" : "",
|
||||
variant === "navigation" && active
|
||||
? "bg-accent text-accent-foreground shadow-sm"
|
||||
: variant === "navigation"
|
||||
? "text-foreground hover:text-accent-foreground"
|
||||
: "",
|
||||
)}
|
||||
>
|
||||
{variant === 'button' ? (
|
||||
{variant === "button" ? (
|
||||
<>
|
||||
<Plus className="h-4 w-4" />
|
||||
<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">
|
||||
<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
|
||||
</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>
|
||||
|
|
@ -356,11 +452,13 @@ export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeD
|
|||
<button
|
||||
key={index}
|
||||
onClick={item.onClick}
|
||||
disabled={'disabled' in item ? item.disabled : false}
|
||||
title={'tooltip' in item ? item.tooltip : undefined}
|
||||
disabled={"disabled" in item ? item.disabled : false}
|
||||
title={"tooltip" in item ? item.tooltip : undefined}
|
||||
className={cn(
|
||||
"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}
|
||||
|
|
@ -429,7 +527,8 @@ export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeD
|
|||
Process S3 Bucket
|
||||
</DialogTitle>
|
||||
<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>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
|
|
@ -444,10 +543,7 @@ export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeD
|
|||
/>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setShowS3Dialog(false)}
|
||||
>
|
||||
<Button variant="outline" onClick={() => setShowS3Dialog(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
|
|
@ -460,7 +556,6 @@ export function KnowledgeDropdown({ active, variant = 'navigation' }: KnowledgeD
|
|||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
id: string
|
||||
name: string
|
||||
description: string
|
||||
query_data: string
|
||||
owner: string
|
||||
created_at: string
|
||||
updated_at: string
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
query_data: string;
|
||||
owner: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface ParsedQueryData {
|
||||
query: string
|
||||
export interface ParsedQueryData {
|
||||
query: string;
|
||||
filters: {
|
||||
data_sources: string[]
|
||||
document_types: string[]
|
||||
owners: string[]
|
||||
connector_types: string[]
|
||||
}
|
||||
limit: number
|
||||
scoreThreshold: number
|
||||
data_sources: string[];
|
||||
document_types: string[];
|
||||
owners: string[];
|
||||
connector_types: string[];
|
||||
};
|
||||
limit: number;
|
||||
scoreThreshold: number;
|
||||
}
|
||||
|
||||
interface KnowledgeFilterContextType {
|
||||
selectedFilter: KnowledgeFilter | null
|
||||
parsedFilterData: ParsedQueryData | null
|
||||
setSelectedFilter: (filter: KnowledgeFilter | null) => void
|
||||
clearFilter: () => void
|
||||
isPanelOpen: boolean
|
||||
openPanel: () => void
|
||||
closePanel: () => void
|
||||
closePanelOnly: () => void
|
||||
selectedFilter: KnowledgeFilter | null;
|
||||
parsedFilterData: ParsedQueryData | null;
|
||||
setSelectedFilter: (filter: KnowledgeFilter | null) => void;
|
||||
clearFilter: () => void;
|
||||
isPanelOpen: boolean;
|
||||
openPanel: () => void;
|
||||
closePanel: () => void;
|
||||
closePanelOnly: () => void;
|
||||
}
|
||||
|
||||
const KnowledgeFilterContext = createContext<KnowledgeFilterContextType | undefined>(undefined)
|
||||
const KnowledgeFilterContext = createContext<
|
||||
KnowledgeFilterContextType | undefined
|
||||
>(undefined);
|
||||
|
||||
export function useKnowledgeFilter() {
|
||||
const context = useContext(KnowledgeFilterContext)
|
||||
const context = useContext(KnowledgeFilterContext);
|
||||
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 {
|
||||
children: ReactNode
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function KnowledgeFilterProvider({ children }: KnowledgeFilterProviderProps) {
|
||||
const [selectedFilter, setSelectedFilterState] = useState<KnowledgeFilter | null>(null)
|
||||
const [parsedFilterData, setParsedFilterData] = useState<ParsedQueryData | null>(null)
|
||||
const [isPanelOpen, setIsPanelOpen] = useState(false)
|
||||
export function KnowledgeFilterProvider({
|
||||
children,
|
||||
}: KnowledgeFilterProviderProps) {
|
||||
const [selectedFilter, setSelectedFilterState] =
|
||||
useState<KnowledgeFilter | null>(null);
|
||||
const [parsedFilterData, setParsedFilterData] =
|
||||
useState<ParsedQueryData | null>(null);
|
||||
const [isPanelOpen, setIsPanelOpen] = useState(false);
|
||||
|
||||
const setSelectedFilter = (filter: KnowledgeFilter | null) => {
|
||||
setSelectedFilterState(filter)
|
||||
|
||||
setSelectedFilterState(filter);
|
||||
|
||||
if (filter) {
|
||||
try {
|
||||
const parsed = JSON.parse(filter.query_data) as ParsedQueryData
|
||||
setParsedFilterData(parsed)
|
||||
|
||||
const parsed = JSON.parse(filter.query_data) as ParsedQueryData;
|
||||
setParsedFilterData(parsed);
|
||||
|
||||
// Auto-open panel when filter is selected
|
||||
setIsPanelOpen(true)
|
||||
setIsPanelOpen(true);
|
||||
} catch (error) {
|
||||
console.error('Error parsing filter data:', error)
|
||||
setParsedFilterData(null)
|
||||
console.error("Error parsing filter data:", error);
|
||||
setParsedFilterData(null);
|
||||
}
|
||||
} else {
|
||||
setParsedFilterData(null)
|
||||
setIsPanelOpen(false)
|
||||
setParsedFilterData(null);
|
||||
setIsPanelOpen(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const clearFilter = () => {
|
||||
setSelectedFilter(null)
|
||||
}
|
||||
setSelectedFilter(null);
|
||||
};
|
||||
|
||||
const openPanel = () => {
|
||||
setIsPanelOpen(true)
|
||||
}
|
||||
setIsPanelOpen(true);
|
||||
};
|
||||
|
||||
const closePanel = () => {
|
||||
setSelectedFilter(null) // This will also close the panel
|
||||
}
|
||||
setSelectedFilter(null); // This will also close the panel
|
||||
};
|
||||
|
||||
const closePanelOnly = () => {
|
||||
setIsPanelOpen(false) // Close panel but keep filter selected
|
||||
}
|
||||
|
||||
setIsPanelOpen(false); // Close panel but keep filter selected
|
||||
};
|
||||
|
||||
const value: KnowledgeFilterContextType = {
|
||||
selectedFilter,
|
||||
|
|
@ -100,11 +112,11 @@ export function KnowledgeFilterProvider({ children }: KnowledgeFilterProviderPro
|
|||
openPanel,
|
||||
closePanel,
|
||||
closePanelOnly,
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<KnowledgeFilterContext.Provider value={value}>
|
||||
{children}
|
||||
</KnowledgeFilterContext.Provider>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,62 +1,88 @@
|
|||
"use client"
|
||||
"use client";
|
||||
|
||||
import React, { createContext, useContext, useState, useEffect, useCallback } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { useAuth } from '@/contexts/auth-context'
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import type React from "react";
|
||||
import {
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useState,
|
||||
} from "react";
|
||||
import { toast } from "sonner";
|
||||
import { useAuth } from "@/contexts/auth-context";
|
||||
|
||||
export interface Task {
|
||||
task_id: string
|
||||
status: 'pending' | 'running' | 'processing' | 'completed' | 'failed' | 'error'
|
||||
total_files?: number
|
||||
processed_files?: number
|
||||
successful_files?: number
|
||||
failed_files?: number
|
||||
created_at: string
|
||||
updated_at: string
|
||||
duration_seconds?: number
|
||||
result?: Record<string, unknown>
|
||||
error?: string
|
||||
files?: Record<string, Record<string, unknown>>
|
||||
task_id: string;
|
||||
status:
|
||||
| "pending"
|
||||
| "running"
|
||||
| "processing"
|
||||
| "completed"
|
||||
| "failed"
|
||||
| "error";
|
||||
total_files?: number;
|
||||
processed_files?: number;
|
||||
successful_files?: number;
|
||||
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 {
|
||||
tasks: Task[]
|
||||
addTask: (taskId: string) => void
|
||||
removeTask: (taskId: string) => void
|
||||
refreshTasks: () => Promise<void>
|
||||
cancelTask: (taskId: string) => Promise<void>
|
||||
isPolling: boolean
|
||||
isFetching: boolean
|
||||
isMenuOpen: boolean
|
||||
toggleMenu: () => void
|
||||
tasks: Task[];
|
||||
addTask: (taskId: string) => void;
|
||||
removeTask: (taskId: string) => void;
|
||||
refreshTasks: () => Promise<void>;
|
||||
cancelTask: (taskId: string) => Promise<void>;
|
||||
isPolling: boolean;
|
||||
isFetching: boolean;
|
||||
isMenuOpen: boolean;
|
||||
toggleMenu: () => void;
|
||||
}
|
||||
|
||||
const TaskContext = createContext<TaskContextType | undefined>(undefined)
|
||||
const TaskContext = createContext<TaskContextType | undefined>(undefined);
|
||||
|
||||
export function TaskProvider({ children }: { children: React.ReactNode }) {
|
||||
const [tasks, setTasks] = useState<Task[]>([])
|
||||
const [isPolling, setIsPolling] = useState(false)
|
||||
const [isFetching, setIsFetching] = useState(false)
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
||||
const { isAuthenticated, isNoAuthMode } = useAuth()
|
||||
const [tasks, setTasks] = useState<Task[]>([]);
|
||||
const [isPolling, setIsPolling] = useState(false);
|
||||
const [isFetching, setIsFetching] = useState(false);
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const { isAuthenticated, isNoAuthMode } = useAuth();
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const refetchSearch = () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["search"] });
|
||||
};
|
||||
|
||||
const fetchTasks = useCallback(async () => {
|
||||
if (!isAuthenticated && !isNoAuthMode) return
|
||||
if (!isAuthenticated && !isNoAuthMode) return;
|
||||
|
||||
setIsFetching(true)
|
||||
setIsFetching(true);
|
||||
try {
|
||||
const response = await fetch('/api/tasks')
|
||||
const response = await fetch("/api/tasks");
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
const newTasks = data.tasks || []
|
||||
|
||||
const data = await response.json();
|
||||
const newTasks = data.tasks || [];
|
||||
|
||||
// Update tasks and check for status changes in the same state update
|
||||
setTasks(prevTasks => {
|
||||
setTasks((prevTasks) => {
|
||||
// Check for newly completed tasks to show toasts
|
||||
if (prevTasks.length > 0) {
|
||||
newTasks.forEach((newTask: Task) => {
|
||||
const oldTask = prevTasks.find(t => t.task_id === newTask.task_id)
|
||||
if (oldTask && oldTask.status !== 'completed' && newTask.status === 'completed') {
|
||||
const oldTask = prevTasks.find(
|
||||
(t) => t.task_id === newTask.task_id,
|
||||
);
|
||||
if (
|
||||
oldTask &&
|
||||
oldTask.status !== "completed" &&
|
||||
newTask.status === "completed"
|
||||
) {
|
||||
// Task just completed - show success toast
|
||||
toast.success("Task completed successfully!", {
|
||||
description: `Task ${newTask.task_id} has finished processing.`,
|
||||
|
|
@ -64,121 +90,136 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
|
|||
label: "View",
|
||||
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
|
||||
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) {
|
||||
console.error('Failed to fetch tasks:', error)
|
||||
console.error("Failed to fetch tasks:", error);
|
||||
} 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) => {
|
||||
// Immediately start aggressive polling for the new task
|
||||
let pollAttempts = 0
|
||||
const maxPollAttempts = 30 // Poll for up to 30 seconds
|
||||
|
||||
let pollAttempts = 0;
|
||||
const maxPollAttempts = 30; // Poll for up to 30 seconds
|
||||
|
||||
const aggressivePoll = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/tasks')
|
||||
const response = await fetch("/api/tasks");
|
||||
if (response.ok) {
|
||||
const data = await response.json()
|
||||
const newTasks = data.tasks || []
|
||||
const foundTask = newTasks.find((task: Task) => task.task_id === taskId)
|
||||
|
||||
const data = await response.json();
|
||||
const newTasks = data.tasks || [];
|
||||
const foundTask = newTasks.find(
|
||||
(task: Task) => task.task_id === taskId,
|
||||
);
|
||||
|
||||
if (foundTask) {
|
||||
// Task found! Update the tasks state
|
||||
setTasks(prevTasks => {
|
||||
setTasks((prevTasks) => {
|
||||
// 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) {
|
||||
return [...prevTasks, foundTask]
|
||||
return [...prevTasks, foundTask];
|
||||
}
|
||||
// Update existing task
|
||||
return prevTasks.map(t => t.task_id === taskId ? foundTask : t)
|
||||
})
|
||||
return // Stop polling, we found it
|
||||
return prevTasks.map((t) =>
|
||||
t.task_id === taskId ? foundTask : t,
|
||||
);
|
||||
});
|
||||
return; // Stop polling, we found it
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Aggressive polling failed:', error)
|
||||
console.error("Aggressive polling failed:", error);
|
||||
}
|
||||
|
||||
pollAttempts++
|
||||
|
||||
pollAttempts++;
|
||||
if (pollAttempts < maxPollAttempts) {
|
||||
// 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
|
||||
setTimeout(aggressivePoll, 500)
|
||||
}, [])
|
||||
setTimeout(aggressivePoll, 500);
|
||||
}, []);
|
||||
|
||||
const refreshTasks = useCallback(async () => {
|
||||
await fetchTasks()
|
||||
}, [fetchTasks])
|
||||
await fetchTasks();
|
||||
}, [fetchTasks]);
|
||||
|
||||
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) => {
|
||||
try {
|
||||
const response = await fetch(`/api/tasks/${taskId}/cancel`, {
|
||||
method: 'POST',
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
// Immediately refresh tasks to show the updated status
|
||||
await fetchTasks()
|
||||
toast.success("Task cancelled", {
|
||||
description: `Task ${taskId.substring(0, 8)}... has been cancelled`
|
||||
})
|
||||
} else {
|
||||
const errorData = await response.json().catch(() => ({}))
|
||||
throw new Error(errorData.error || 'Failed to cancel task')
|
||||
const cancelTask = useCallback(
|
||||
async (taskId: string) => {
|
||||
try {
|
||||
const response = await fetch(`/api/tasks/${taskId}/cancel`, {
|
||||
method: "POST",
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
// Immediately refresh tasks to show the updated status
|
||||
await fetchTasks();
|
||||
toast.success("Task cancelled", {
|
||||
description: `Task ${taskId.substring(0, 8)}... has been cancelled`,
|
||||
});
|
||||
} else {
|
||||
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)
|
||||
toast.error("Failed to cancel task", {
|
||||
description: error instanceof Error ? error.message : 'Unknown error'
|
||||
})
|
||||
}
|
||||
}, [fetchTasks])
|
||||
},
|
||||
[fetchTasks],
|
||||
);
|
||||
|
||||
const toggleMenu = useCallback(() => {
|
||||
setIsMenuOpen(prev => !prev)
|
||||
}, [])
|
||||
setIsMenuOpen((prev) => !prev);
|
||||
}, []);
|
||||
|
||||
// Periodic polling for task updates
|
||||
useEffect(() => {
|
||||
if (!isAuthenticated && !isNoAuthMode) return
|
||||
if (!isAuthenticated && !isNoAuthMode) return;
|
||||
|
||||
setIsPolling(true);
|
||||
|
||||
setIsPolling(true)
|
||||
|
||||
// Initial fetch
|
||||
fetchTasks()
|
||||
|
||||
fetchTasks();
|
||||
|
||||
// Set up polling interval - every 3 seconds (more responsive for active tasks)
|
||||
const interval = setInterval(fetchTasks, 3000)
|
||||
|
||||
const interval = setInterval(fetchTasks, 3000);
|
||||
|
||||
return () => {
|
||||
clearInterval(interval)
|
||||
setIsPolling(false)
|
||||
}
|
||||
}, [isAuthenticated, isNoAuthMode, fetchTasks])
|
||||
clearInterval(interval);
|
||||
setIsPolling(false);
|
||||
};
|
||||
}, [isAuthenticated, isNoAuthMode, fetchTasks]);
|
||||
|
||||
const value: TaskContextType = {
|
||||
tasks,
|
||||
|
|
@ -190,19 +231,15 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
|
|||
isFetching,
|
||||
isMenuOpen,
|
||||
toggleMenu,
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<TaskContext.Provider value={value}>
|
||||
{children}
|
||||
</TaskContext.Provider>
|
||||
)
|
||||
return <TaskContext.Provider value={value}>{children}</TaskContext.Provider>;
|
||||
}
|
||||
|
||||
export function useTask() {
|
||||
const context = useContext(TaskContext)
|
||||
const context = useContext(TaskContext);
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue