cleanup

obot-platform · Jan 14, 2025 · 21252d5 · 21252d5
1 parent 1768570
commit 21252d5
Show file tree

Hide file tree

Showing 11 changed files with 270 additions and 304 deletions.
diff --git a/ui/admin/app/components/composed/typography.tsx b/ui/admin/app/components/composed/typography.tsx
@@ -24,7 +24,7 @@ export function Truncate({
 	disableTooltip?: boolean;
 	tooltipContent?: React.ReactNode;
 	clamp?: boolean;
-	clampLength?: 1 | 2 | 3;
+	clampLength?: 1 | 2;
 	classNames?: {
 		root?: string;
 	};
@@ -37,7 +37,6 @@ export function Truncate({
 				{
 					"line-clamp-1": clamp && clampLength === 1,
 					"line-clamp-2": clamp && clampLength === 2,
-					"line-clamp-3": clamp && clampLength === 3,
 					truncate: !clamp,
 				},
 				classNames?.root

diff --git a/ui/admin/app/components/tools/CreateTool.tsx b/ui/admin/app/components/tools/CreateTool.tsx
@@ -1,94 +1,55 @@
-import { PlusCircle } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import useSWR from "swr";
-
-import { CreateToolReference, ToolReference } from "~/lib/model/toolReferences";
-import { ToolReferenceService } from "~/lib/service/api/toolreferenceService";
+import { PlusIcon } from "lucide-react";
+import { useState } from "react";
 
+import { ErrorDialog } from "~/components/composed/ErrorDialog";
+import { CreateToolForm } from "~/components/tools/CreateToolForm";
 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({ 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 {
-				toast.success(`"${loadedTool.reference}" registered successfully.`);
-				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) => {
-			const response = await ToolReferenceService.createToolReference({
-				toolReference: { ...data, toolType: "tool" },
-			});
-
-			setLoadingToolId(response.id);
-		}
-	);
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "~/components/ui/dialog";
+
+export function CreateTool() {
+	const [isDialogOpen, setIsDialogOpen] = useState(false);
+	const [errorDialogError, setErrorDialogError] = useState("");
+
+	const handleSuccess = () => {
+		setIsDialogOpen(false);
+	};
+
+	const handleError = (error: string) => {
+		setIsDialogOpen(false);
+		setErrorDialogError(error);
+	};
 
-	const pending = isLoading || !!loadingToolId;
 	return (
-		<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-			<div>
-				<Input
-					autoComplete="off"
-					{...register("reference", {
-						required: "Reference is required",
-					})}
-					placeholder="github.com/user/repo or https://example.com/tool.gpt"
-				/>
-			</div>
-			<div className="flex justify-end">
-				<Button
-					type="submit"
-					disabled={pending}
-					loading={pending}
-					startContent={<PlusCircle />}
-				>
-					Register Tool
-				</Button>
-			</div>
-		</form>
+		<>
+			<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+				<DialogTrigger asChild>
+					<Button variant="outline">
+						<PlusIcon className="mr-2 h-4 w-4" />
+						Register New Tool
+					</Button>
+				</DialogTrigger>
+				<DialogContent className="max-w-2xl">
+					<DialogHeader>
+						<DialogTitle>Create New Tool Reference</DialogTitle>
+						<DialogDescription>
+							Register a new tool reference to use in your agents.
+						</DialogDescription>
+					</DialogHeader>
+					<CreateToolForm onSuccess={handleSuccess} onError={handleError} />
+				</DialogContent>
+			</Dialog>
+			<ErrorDialog
+				error={errorDialogError}
+				isOpen={errorDialogError !== ""}
+				onClose={() => setErrorDialogError("")}
+			/>
+		</>
 	);
 }
diff --git a/ui/admin/app/components/tools/CreateToolForm.tsx b/ui/admin/app/components/tools/CreateToolForm.tsx
@@ -0,0 +1,99 @@
+import { PlusCircle } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import useSWR, { mutate } from "swr";
+
+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 { Label } from "~/components/ui/label";
+import { useAsync } from "~/hooks/useAsync";
+
+export function CreateToolForm({
+	onSuccess,
+	onError,
+}: {
+	onSuccess: () => void;
+	onError: (error: string) => void;
+}) {
+	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();
+			mutate(ToolReferenceService.getToolReferences.key("tool"));
+			if (loadedTool.error) {
+				onError(loadedTool.error);
+			} else {
+				onSuccess();
+				toast.success(`"${loadedTool.reference}" registered successfully.`);
+			}
+		},
+		[reset, onError, 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) => {
+			const response = await ToolReferenceService.createToolReference({
+				toolReference: { ...data, toolType: "tool" },
+			});
+
+			setLoadingToolId(response.id);
+		}
+	);
+
+	const pending = isLoading || !!loadingToolId;
+	return (
+		<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+			<div>
+				<Label htmlFor="reference">Tool URL</Label>
+				<Input
+					id="reference"
+					autoComplete="off"
+					{...register("reference", {
+						required: "Reference is required",
+					})}
+					placeholder="github.com/user/repo/tools or https://example.com/tool.gpt"
+				/>
+			</div>
+			<div className="flex justify-end">
+				<Button
+					type="submit"
+					disabled={pending}
+					loading={pending}
+					startContent={<PlusCircle />}
+				>
+					Register Tool
+				</Button>
+			</div>
+		</form>
+	);
+}
diff --git a/ui/admin/app/components/tools/ToolCatalog.tsx b/ui/admin/app/components/tools/ToolCatalog.tsx
@@ -2,6 +2,7 @@ import { AlertTriangleIcon, PlusIcon } from "lucide-react";
 import { useMemo, useState } from "react";
 import useSWR from "swr";
 
+import { OAuthProvider } from "~/lib/model/oauthApps/oauth-helpers";
 import {
 	ToolCategory,
 	convertToolReferencesToCategoryMap,
@@ -55,15 +56,17 @@ export function ToolCatalog({
 	const [search, setSearch] = useState("");
 
 	const oauthApps = useOAuthAppList();
-	const configuredOauthApps = new Set(
-		oauthApps
-			.filter(
-				(app) =>
-					!app.noGatewayIntegration ||
-					(app.noGatewayIntegration && app.appOverride)
-			)
-			.map((app) => app.appOverride?.integration ?? app.type)
-	);
+	const configuredOauthApps = useMemo(() => {
+		return new Set(
+			oauthApps
+				.filter(
+					(app) =>
+						!app.noGatewayIntegration ||
+						(app.noGatewayIntegration && app.appOverride)
+				)
+				.map((app) => app.type)
+		);
+	}, [oauthApps]);
 
 	const sortedValidCategories = useMemo(() => {
 		return Object.entries(toolCategories).sort(
@@ -112,7 +115,7 @@ export function ToolCatalog({
 						configured={
 							categoryTools.bundleTool?.metadata?.oauth
 								? configuredOauthApps.has(
-										categoryTools.bundleTool.metadata.oauth
+										categoryTools.bundleTool.metadata.oauth as OAuthProvider
 									)
 								: true
 						}