feat: add top level obot page to admin ui (#1993)

* fix: ensure project inherits parent from copied project

- additionally ensure project IDs are converted properly when forwarding to the UI

Signed-off-by: Ryan Hopper-Lowe <[email protected]>

* feat: add top level obots page to admin ui

* chore: fix tests

* fix: invalid json tag on project type

* feat: add filtering to threads page by obotId in admin ui

* feat: add filters for obot children and parents in admin ui

* feat: enable filtering obots by userID

* feat: add ability to filter out spawned obots from obots page

* feat: add column filters to top level obot page

* chore: update tests in admin UI

* chore: generate new types

* chore: update obot page icon

---------

Signed-off-by: Ryan Hopper-Lowe <[email protected]>

apiclient/types/project.go

@@ -5,6 +5,8 @@ type Project struct {
 	ProjectManifest
 	AssistantID string `json:"assistantID,omitempty"`
 	Editor      bool   `json:"editor"`
+	ParentID    string `json:"parentID,omitempty"`
+	UserID      string `json:"userID,omitempty"`
 }
 
 type ProjectManifest struct {

pkg/api/handlers/projects.go

@@ -494,8 +494,10 @@ func convertProject(thread *v1.Thread) types.Project {
 		ProjectManifest: types.ProjectManifest{
 			ThreadManifest: thread.Spec.Manifest,
 		},
+		ParentID:    strings.Replace(thread.Spec.ParentThreadName, system.ThreadPrefix, system.ProjectPrefix, 1),
 		AssistantID: thread.Spec.AgentName,
 		Editor:      thread.IsEditor(),
+		UserID:      thread.Spec.UserID,
 	}
 	p.Type = "project"
 	p.ID = strings.Replace(p.ID, system.ThreadPrefix, system.ProjectPrefix, 1)

pkg/api/handlers/threads.go

@@ -11,6 +11,7 @@ import (
 	"github.com/obot-platform/obot/pkg/api"
 	"github.com/obot-platform/obot/pkg/events"
 	v1 "github.com/obot-platform/obot/pkg/storage/apis/obot.obot.ai/v1"
+	"github.com/obot-platform/obot/pkg/system"
 	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 )
 
@@ -49,7 +50,7 @@ func convertThread(thread v1.Thread) types.Thread {
 		LastRunID:       thread.Status.LastRunName,
 		CurrentRunID:    thread.Status.CurrentRunName,
 		State:           state,
-		ProjectID:       thread.Spec.ParentThreadName,
+		ProjectID:       strings.Replace(thread.Spec.ParentThreadName, system.ThreadPrefix, system.ProjectPrefix, 1),
 		UserID:          thread.Spec.UserID,
 		Abort:           thread.Spec.Abort,
 		SystemTask:      thread.Spec.SystemTask,

ui/admin/app/components/composed/Filters.tsx

@@ -4,6 +4,7 @@ import { useNavigate, useSearchParams } from "react-router";
 import { $path, Routes } from "safe-routes";
 
 import { Agent } from "~/lib/model/agents";
+import { Project } from "~/lib/model/project";
 import { Task } from "~/lib/model/tasks";
 import { User } from "~/lib/model/users";
 import { RouteService } from "~/lib/service/routeService";
@@ -14,6 +15,8 @@ type QueryParams = {
 	agentId?: string;
 	userId?: string;
 	taskId?: string;
+	obotId?: string;
+	parentObotId?: string;
 	createdStart?: string;
 	createdEnd?: string;
 };
@@ -22,11 +25,13 @@ export function Filters({
 	agentMap,
 	userMap,
 	taskMap,
+	projectMap,
 	url,
 }: {
 	agentMap?: Map<string, Agent>;
 	userMap?: Map<string, User>;
 	taskMap?: Map<string, Task>;
+	projectMap?: Map<string, Project>;
 	url: keyof Routes;
 }) {
 	const [searchParams] = useSearchParams();
@@ -85,8 +90,25 @@ export function Filters({
 					value: `${new Date(filters.createdStart).toLocaleDateString()} ${filters.createdEnd ? `- ${new Date(filters.createdEnd).toLocaleDateString()}` : ""}`,
 					onRemove: () => deleteFilters("createdStart", "createdEnd"),
 				},
+			"obotId" in filters &&
+				filters.obotId &&
+				projectMap && {
+					key: "obotId",
+					label: "Obot",
+					value: projectMap.get(filters.obotId)?.name ?? filters.obotId,
+					onRemove: () => deleteFilters("obotId"),
+				},
+			"parentObotId" in filters &&
+				filters.parentObotId &&
+				projectMap && {
+					key: "parentObotId",
+					label: "Spawned from",
+					value:
+						projectMap.get(filters.parentObotId)?.name ?? filters.parentObotId,
+					onRemove: () => deleteFilters("parentObotId"),
+				},
 		].filter((x) => !!x);
-	}, [navigate, searchParams, agentMap, userMap, taskMap, url]);
+	}, [url, searchParams, agentMap, userMap, taskMap, projectMap, navigate]);
 
 	return (
 		<div className="flex gap-2 pb-2">

ui/admin/app/components/composed/typography.tsx

@@ -53,6 +53,7 @@ export function Truncate({
 					"line-clamp-2": clamp && clampLength === 2,
 					truncate: !clamp,
 				},
+				"break-all",
 				classNames?.content
 			)}
 		>

ui/admin/app/components/sidebar/Sidebar.tsx

@@ -1,5 +1,6 @@
 import {
 	BotIcon,
+	BotMessageSquareIcon,
 	BoxesIcon,
 	CpuIcon,
 	InfoIcon,
@@ -46,6 +47,11 @@ const items = [
 		url: $path("/agents"),
 		icon: BotIcon,
 	},
+	{
+		title: "Obots",
+		url: $path("/obots"),
+		icon: BotMessageSquareIcon,
+	},
 	{
 		title: "Chat Threads",
 		url: $path("/chat-threads"),

ui/admin/app/components/thread/ThreadMeta.tsx

@@ -160,10 +160,10 @@ export function ThreadMeta({ entity, thread, className }: ThreadMetaProps) {
 									<td className="text-right">{thread.currentRunId}</td>
 								</tr>
 							)}
-							{thread.parentThreadId && (
+							{thread.projectID && (
 								<tr className="border-foreground/25">
 									<td className="py-2 pr-4 font-medium">Parent Thread ID</td>
-									<td className="text-right">{thread.parentThreadId}</td>
+									<td className="text-right">{thread.projectID}</td>
 								</tr>
 							)}
 							{thread.lastRunID && (

ui/admin/app/components/tools/ToolCatalogGroup.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { Fragment, useState } from "react";
 
 import {
 	ToolReference,
@@ -67,7 +67,7 @@ export function ToolCatalogGroup({
 				const configured = configuredTools.has(tool.id);
 
 				return (
-					<>
+					<Fragment key={tool.id}>
 						<ToolItem
 							key={tool.id}
 							tool={tool}
@@ -100,7 +100,7 @@ export function ToolCatalogGroup({
 									}
 								/>
 							))}
-					</>
+					</Fragment>
 				);
 			})}
 		</CommandGroup>

ui/admin/app/components/user/UserMenu.tsx

@@ -1,8 +1,8 @@
 import { LogOutIcon, User } from "lucide-react";
 import React from "react";
 
-import { AuthDisabledUsername, CommonAuthProviderIds } from "~/lib/model/auth";
-import { User as UserModel, roleLabel } from "~/lib/model/users";
+import { AuthDisabledUsername } from "~/lib/model/auth";
+import { getUserDisplayName, roleLabel } from "~/lib/model/users";
 import { BootstrapApiService } from "~/lib/service/api/bootstrapApiService";
 import { cn } from "~/lib/utils";
 
@@ -32,7 +32,7 @@ export const UserMenu: React.FC<UserMenuProps> = ({
 		return null;
 	}
 
-	const displayName = getDisplayName(me);
+	const displayName = getUserDisplayName(me);
 
 	return (
 		<DropdownMenu>
@@ -80,12 +80,4 @@ export const UserMenu: React.FC<UserMenuProps> = ({
 			</DropdownMenuContent>
 		</DropdownMenu>
 	);
-
-	function getDisplayName(user?: UserModel) {
-		if (user?.currentAuthProvider === CommonAuthProviderIds.GITHUB) {
-			return user.username;
-		}
-
-		return user?.email;
-	}
 };

ui/admin/app/hooks/useRouteInfo.ts

@@ -1,7 +1,13 @@
-import { useMemo } from "react";
-import { Location, useLocation, useParams } from "react-router";
+import { useCallback, useMemo } from "react";
+import {
+	Location,
+	useLocation,
+	useParams,
+	useSearchParams,
+} from "react-router";
+import { Routes } from "safe-routes";
 
-import { RouteService } from "~/lib/service/routeService";
+import { QueryInfo, RouteService } from "~/lib/service/routeService";
 
 const urlFromLocation = (location: Location) => {
 	const { pathname, search, hash } = location;
@@ -23,3 +29,37 @@ export function useUnknownPathParams() {
 		[url, params]
 	);
 }
+
+export function useQueryInfo<T extends keyof Routes>(route: T) {
+	const [searchParams, setSearchParams] = useSearchParams();
+
+	const params = useMemo(
+		() => RouteService.getQueryParams(route, searchParams.toString()),
+		[route, searchParams]
+	);
+
+	const update = useCallback(
+		<TKey extends keyof QueryInfo<T>>(
+			param: TKey,
+			value: QueryInfo<T>[TKey]
+		) => {
+			setSearchParams((prev) => {
+				prev.set(param as string, String(value));
+				return prev;
+			});
+		},
+		[setSearchParams]
+	);
+
+	const remove = useCallback(
+		(param: keyof QueryInfo<T>) => {
+			setSearchParams((prev) => {
+				prev.delete(param as string);
+				return prev;
+			});
+		},
+		[setSearchParams]
+	);
+
+	return { params, update, remove };
+}

ui/admin/app/lib/model/project.ts

@@ -0,0 +1,11 @@
+import { EntityMeta } from "~/lib/model/primitives";
+import { ThreadManifest } from "~/lib/model/threads";
+
+type ProjectManifest = ThreadManifest & {
+	parentID?: Nullish<string>;
+	assistantID: string;
+	editor: boolean;
+	userID: string;
+};
+
+export type Project = EntityMeta & ProjectManifest;

ui/admin/app/lib/model/threads.ts

@@ -1,17 +1,25 @@
 import { RunState } from "@gptscript-ai/gptscript";
 
+import { AgentIcons } from "~/lib/model/agents";
 import { EntityMeta } from "~/lib/model/primitives";
 
-export type ThreadBase = {
+export type ThreadManifest = {
+	name: string;
 	description?: string;
 	tools?: string[];
+	icons?: Nullish<AgentIcons>;
+	revision?: string;
+	prompt: string;
+	knowledgeDescription: string;
+	introductionMessage: string;
+	starterMessages: Nullish<string[]>;
 };
 
 export type Thread = EntityMeta &
-	ThreadBase & {
+	ThreadManifest & {
 		state?: RunState;
 		currentRunId?: string;
-		parentThreadId?: string;
+		projectID?: string;
 		lastRunID?: string;
 		userID?: string;
 		project?: boolean;
@@ -20,4 +28,4 @@ export type Thread = EntityMeta &
 		| { agentID?: never; workflowID: string }
 	);
 
-export type UpdateThread = ThreadBase;
+export type UpdateThread = ThreadManifest;

ui/admin/app/lib/model/users.ts

@@ -1,4 +1,4 @@
-import { CommonAuthProviderId } from "~/lib/model/auth";
+import { CommonAuthProviderId, CommonAuthProviderIds } from "~/lib/model/auth";
 import { EntityMeta } from "~/lib/model/primitives";
 
 export type User = EntityMeta & {
@@ -31,3 +31,11 @@ export const roleFromString = (role: string) => {
 
 export const ExplicitAdminDescription =
 	"This user is explicitly set as an admin at the system level and their role cannot be changed.";
+
+export function getUserDisplayName(user?: User) {
+	if (user?.currentAuthProvider === CommonAuthProviderIds.GITHUB) {
+		return user.username;
+	}
+
+	return user?.email;
+}

ui/admin/app/lib/routers/apiRoutes.ts

@@ -202,6 +202,11 @@ export const ApiRoutes = {
 		base: () => buildUrl("/prompt"),
 		promptResponse: () => buildUrl("/prompt"),
 	},
+	projects: {
+		getAll: () => buildUrl("/projects", { all: true }),
+		deleteProject: (agentId: string, projectId: string) =>
+			buildUrl(`/assistants/${agentId}/projects/${projectId}`),
+	},
 	runs: {
 		base: () => buildUrl("/runs"),
 		getRunById: (runId: string) => buildUrl(`/runs/${runId}`),

ui/admin/app/lib/routers/baseRouter.ts

@@ -17,6 +17,6 @@ export const ApiUrl = () => {
 	return window.location.origin + "/api";
 };
 
-export const ConsumptionUrl = (route: string) => {
+export const ConsumptionUrl = (route: string = "") => {
 	return window.location.protocol + "//" + window.location.host + route;
 };

ui/admin/app/lib/routers/userRoutes.ts

@@ -0,0 +1,23 @@
+import queryString from "query-string";
+
+import { ConsumptionUrl } from "~/lib/routers/baseRouter";
+
+const buildUrl = (path: string, params?: Record<string, string>) => {
+	const url = new URL(ConsumptionUrl(path));
+
+	if (params) {
+		url.search = queryString.stringify(params, { skipNull: true });
+	}
+
+	return {
+		url: url.toString(),
+		path: url.pathname,
+	};
+};
+
+export const UserRoutes = {
+	root: () => buildUrl("/"),
+	obot: (projectId: string) => buildUrl(`/o/${projectId}`),
+	thread: (projectId: string, threadId: string) =>
+		buildUrl(`/o/${projectId}/t/${threadId}`),
+};