diff --git a/ui/admin/app/components/tools/CreateTool.tsx b/ui/admin/app/components/tools/CreateTool.tsx index 8005130b..35a61fff 100644 --- a/ui/admin/app/components/tools/CreateTool.tsx +++ b/ui/admin/app/components/tools/CreateTool.tsx @@ -1,7 +1,9 @@ import { PlusCircle } from "lucide-react"; +import { useCallback, useEffect, useState } from "react"; import { useForm } from "react-hook-form"; +import useSWR, { SWRResponse } from "swr"; -import { CreateToolReference } from "~/lib/model/toolReferences"; +import { CreateToolReference, ToolReference } from "~/lib/model/toolReferences"; import { ToolReferenceService } from "~/lib/service/api/toolreferenceService"; import { Button } from "~/components/ui/button"; @@ -9,22 +11,61 @@ import { Input } from "~/components/ui/input"; import { useAsync } from "~/hooks/useAsync"; interface CreateToolProps { + onError: (error: string) => void; onSuccess: () => void; } -export function CreateTool({ onSuccess }: CreateToolProps) { +export function CreateTool({ onError, onSuccess }: CreateToolProps) { const { register, handleSubmit, reset } = useForm(); + const [loadingToolId, setLoadingToolId] = useState(""); + const getLoadingTool: SWRResponse = useSWR( + loadingToolId + ? ToolReferenceService.getToolReferenceById.key(loadingToolId) + : null, + ({ toolReferenceId }) => + ToolReferenceService.getToolReferenceById(toolReferenceId), + { + revalidateOnFocus: false, + refreshInterval: 2000, + } + ); + + const handleCreatedTool = useCallback( + (loadedTool: ToolReference) => { + setLoadingToolId(""); + reset(); + if (loadedTool.error) { + onError(loadedTool.error); + } else { + onSuccess(); + } + }, + [onError, reset, onSuccess] + ); + + useEffect(() => { + if (!loadingToolId) return; + + const { isLoading, data } = getLoadingTool; + if (isLoading) return; + + if (data?.resolved) { + handleCreatedTool(data); + } + }, [getLoadingTool, handleCreatedTool, loadingToolId]); + const { execute: onSubmit, isLoading } = useAsync( async (data: CreateToolReference) => { - await ToolReferenceService.createToolReference({ + const response = await ToolReferenceService.createToolReference({ toolReference: { ...data, toolType: "tool" }, }); - reset(); - onSuccess(); + + setLoadingToolId(response.id); } ); + const pending = isLoading || !!loadingToolId; return (
@@ -37,9 +78,9 @@ export function CreateTool({ onSuccess }: CreateToolProps) { />
-
diff --git a/ui/admin/app/lib/model/toolReferences.ts b/ui/admin/app/lib/model/toolReferences.ts index 9bbfffa7..cb9943e0 100644 --- a/ui/admin/app/lib/model/toolReferences.ts +++ b/ui/admin/app/lib/model/toolReferences.ts @@ -5,6 +5,7 @@ export type ToolReferenceBase = { name: string; toolType: ToolReferenceType; reference: string; + resolved?: boolean; metadata?: Record; }; diff --git a/ui/admin/app/routes/_auth.tools._index.tsx b/ui/admin/app/routes/_auth.tools._index.tsx index 06a8e916..8b2ddd06 100644 --- a/ui/admin/app/routes/_auth.tools._index.tsx +++ b/ui/admin/app/routes/_auth.tools._index.tsx @@ -5,6 +5,7 @@ import useSWR, { preload } from "swr"; import { ToolReferenceService } from "~/lib/service/api/toolreferenceService"; import { TypographyH2 } from "~/components/Typography"; +import ErrorDialog from "~/components/knowledge/ErrorDialog"; import { CreateTool } from "~/components/tools/CreateTool"; import { ToolGrid } from "~/components/tools/toolGrid"; import { Button } from "~/components/ui/button"; @@ -38,6 +39,7 @@ export default function Tools() { const [isDialogOpen, setIsDialogOpen] = useState(false); const [searchQuery, setSearchQuery] = useState(""); + const [errorDialogError, setErrorDialogError] = useState(""); const handleCreateSuccess = () => { mutate(); @@ -49,6 +51,12 @@ export default function Tools() { mutate(); }; + const handleErrorDialogError = (error: string) => { + mutate(); + setErrorDialogError(error); + setIsDialogOpen(false); + }; + return (
@@ -81,9 +89,17 @@ export default function Tools() { agents. - + + setErrorDialogError("")} + />