Ui/feat/optional-agent-tools

ui/admin/app/components/TruncatedText.tsx

@@ -1,3 +1,5 @@
+import { cn } from "~/lib/utils";
+
 import { TypographyP } from "~/components/Typography";
 import {
     Tooltip,
@@ -8,16 +10,16 @@ import {
 
 export function TruncatedText({
     content,
-    maxWidth,
+    className,
 }: {
-    content: string;
-    maxWidth: string;
+    content: React.ReactNode;
+    className?: string;
 }) {
     return (
         <TooltipProvider>
             <Tooltip>
                 <TooltipTrigger asChild>
-                    <div className={`${maxWidth} truncate cursor-pointer`}>
+                    <div className={cn(`truncate cursor-pointer`, className)}>
                         <TypographyP className="truncate">
                             {content}
                         </TypographyP>

ui/admin/app/components/agent/Agent.tsx

@@ -73,9 +73,12 @@ function AgentContent({ className, onRefresh }: AgentProps) {
                         such as searching the web, reading files, or interacting
                         with other systems.
                     </TypographyP>
+
                     <ToolForm
                         agent={agentUpdates}
-                        onChange={debouncedSetAgentInfo}
+                        onChange={({ tools }) =>
+                            debouncedSetAgentInfo(convertTools(tools))
+                        }
                     />
                 </div>
 
@@ -126,3 +129,27 @@ function AgentContent({ className, onRefresh }: AgentProps) {
         </div>
     );
 }
+function convertTools(
+    tools: { tool: string; variant: "fixed" | "default" | "available" }[]
+) {
+    type ToolObj = Pick<
+        AgentType,
+        "tools" | "defaultThreadTools" | "availableThreadTools"
+    >;
+
+    return tools.reduce(
+        (acc, { tool, variant }) => {
+            if (variant === "fixed") acc.tools?.push(tool);
+            else if (variant === "default") acc.defaultThreadTools?.push(tool);
+            else if (variant === "available")
+                acc.availableThreadTools?.push(tool);
+
+            return acc;
+        },
+        {
+            tools: [],
+            defaultThreadTools: [],
+            availableThreadTools: [],
+        } as ToolObj
+    );
+}

ui/admin/app/components/agent/ToolEntry.tsx

@@ -3,16 +3,19 @@ import useSWR from "swr";
 
 import { ToolReferenceService } from "~/lib/service/api/toolreferenceService";
 
+import { TruncatedText } from "~/components/TruncatedText";
 import { ToolIcon } from "~/components/tools/ToolIcon";
 import { LoadingSpinner } from "~/components/ui/LoadingSpinner";
 import { Button } from "~/components/ui/button";
 
 export function ToolEntry({
     tool,
     onDelete,
+    actions,
 }: {
     tool: string;
     onDelete: () => void;
+    actions?: React.ReactNode;
 }) {
     const { data: toolReference, isLoading } = useSWR(
         ToolReferenceService.getToolReferenceById.key(tool),
@@ -22,26 +25,34 @@ export function ToolEntry({
 
     return (
         <div className="flex items-center space-x-2 justify-between mt-1">
-            <div className="border text-sm px-3 shadow-sm rounded-md p-2 w-full flex items-center gap-2">
-                {isLoading ? (
-                    <LoadingSpinner className="w-4 h-4" />
-                ) : (
-                    <ToolIcon
-                        className="w-4 h-4"
-                        name={toolReference?.name || tool}
-                        icon={toolReference?.metadata?.icon}
-                    />
-                )}
-                {toolReference?.name || tool}
+            <div className="border text-sm px-3 shadow-sm rounded-md p-2 w-full flex items-center justify-between gap-2">
+                <div className="flex items-center gap-2">
+                    {isLoading ? (
+                        <LoadingSpinner className="w-5 h-5" />
+                    ) : (
+                        <ToolIcon
+                            className="w-5 h-5"
+                            name={toolReference?.name || tool}
+                            icon={toolReference?.metadata?.icon}
+                        />
+                    )}
+
+                    <TruncatedText content={toolReference?.name || tool} />
+                </div>
+
+                <div className="flex items-center gap-2">
+                    {actions}
+
+                    <Button
+                        type="button"
+                        variant="secondary"
+                        size="icon"
+                        onClick={() => onDelete()}
+                    >
+                        <TrashIcon className="w-5 h-5" />
+                    </Button>
+                </div>
             </div>
-            <Button
-                type="button"
-                variant="secondary"
-                size="icon"
-                onClick={() => onDelete()}
-            >
-                <TrashIcon className="w-4 h-4" />
-            </Button>
         </div>
     );
 }