fix: display error if tool creation failed (#738)

* fix: display error if tool creation failed Update CreateTool.tsx * fix: move ErrorDialog to composed and nit changes
obot-platform · Dec 3, 2024 · 91dcd71 · 91dcd71
1 parent 98568da
commit 91dcd71
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 21 deletions.
diff --git a/.../app/components/knowledge/ErrorDialog.tsx → ...n/app/components/composed/ErrorDialog.tsx b/.../app/components/knowledge/ErrorDialog.tsx → ...n/app/components/composed/ErrorDialog.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 import { Button } from "~/components/ui/button";
 import {
     Dialog,
@@ -16,11 +14,7 @@ type ErrorDialogProps = {
     onClose: () => void;
 };
 
-const ErrorDialog: React.FC<ErrorDialogProps> = ({
-    error,
-    isOpen,
-    onClose,
-}) => {
+export function ErrorDialog({ error, isOpen, onClose }: ErrorDialogProps) {
     return (
         <Dialog open={isOpen} onOpenChange={onClose}>
             <DialogContent className="max-w-[850px]">
@@ -36,6 +30,4 @@ const ErrorDialog: React.FC<ErrorDialogProps> = ({
             </DialogContent>
         </Dialog>
     );
-};
-
-export default ErrorDialog;
+}
diff --git a/ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx b/ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx
@@ -26,8 +26,8 @@ import {
 import { KnowledgeService } from "~/lib/service/api/knowledgeService";
 import { assetUrl } from "~/lib/utils";
 
+import { ErrorDialog } from "~/components/composed/ErrorDialog";
 import AddSourceModal from "~/components/knowledge/AddSourceModal";
-import ErrorDialog from "~/components/knowledge/ErrorDialog";
 import FileStatusIcon from "~/components/knowledge/FileStatusIcon";
 import RemoteFileAvatar from "~/components/knowledge/KnowledgeSourceAvatar";
 import KnowledgeSourceDetail from "~/components/knowledge/KnowledgeSourceDetail";

diff --git a/ui/admin/app/components/knowledge/KnowledgeSourceDetail.tsx b/ui/admin/app/components/knowledge/KnowledgeSourceDetail.tsx
@@ -15,8 +15,8 @@ import {
 } from "~/lib/model/knowledge";
 import { KnowledgeService } from "~/lib/service/api/knowledgeService";
 
+import { ErrorDialog } from "~/components/composed/ErrorDialog";
 import CronDialog from "~/components/knowledge/CronDialog";
-import ErrorDialog from "~/components/knowledge/ErrorDialog";
 import FileTreeNode, { FileNode } from "~/components/knowledge/FileTree";
 import KnowledgeSourceAvatar from "~/components/knowledge/KnowledgeSourceAvatar";
 import OauthSignDialog from "~/components/knowledge/OAuthSignDialog";

diff --git a/ui/admin/app/components/tools/CreateTool.tsx b/ui/admin/app/components/tools/CreateTool.tsx
@@ -1,30 +1,71 @@
 import { PlusCircle } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
+import useSWR 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";
 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<CreateToolReference>();
 
+    const [loadingToolId, setLoadingToolId] = useState("");
+    const getLoadingTool = 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 (
         <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
             <div>
@@ -37,9 +78,13 @@ export function CreateTool({ onSuccess }: CreateToolProps) {
                 />
             </div>
             <div className="flex justify-end">
-                <Button type="submit" disabled={isLoading}>
-                    <PlusCircle className="w-4 h-4 mr-2" />
-                    {isLoading ? "Creating..." : "Register Tool"}
+                <Button
+                    type="submit"
+                    disabled={pending}
+                    loading={pending}
+                    startContent={<PlusCircle />}
+                >
+                    Register Tool
                 </Button>
             </div>
         </form>

diff --git 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<string, string>;
 };
 

diff --git 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/composed/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 (
         <ScrollArea className="h-full p-8 flex flex-col gap-4">
             <div className="flex justify-between items-center">
@@ -81,9 +89,17 @@ export default function Tools() {
                                     agents.
                                 </DialogDescription>
                             </DialogHeader>
-                            <CreateTool onSuccess={handleCreateSuccess} />
+                            <CreateTool
+                                onError={handleErrorDialogError}
+                                onSuccess={handleCreateSuccess}
+                            />
                         </DialogContent>
                     </Dialog>
+                    <ErrorDialog
+                        error={errorDialogError}
+                        isOpen={errorDialogError !== ""}
+                        onClose={() => setErrorDialogError("")}
+                    />
                 </div>
             </div>