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]>

Author: ryanhopperlowe

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,

pkg/storage/openapi/generated/openapi_generated.go

@@ -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/Filters.tsx

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

ui/admin/app/components/composed/typography.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/sidebar/Sidebar.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/thread/ThreadMeta.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/tools/ToolCatalogGroup.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;
-	}
 };