Add tools

coder · johnstcn · May 2, 2025 · Apr 9, 2025 · Apr 9, 2025 · Apr 10, 2025
commit 113473621c99bdc6747cd1ebf51da11bcf28ba7f
diff --git a/site/package.json b/site/package.json
@@ -35,6 +35,7 @@
 		"update-emojis": "cp -rf ./node_modules/emoji-datasource-apple/img/apple/64/* ./static/emojis"
 	},
 	"dependencies": {
+		"@ai-sdk/provider-utils": "2.2.6",
 		"@ai-sdk/react": "1.2.6",
 		"@ai-sdk/ui-utils": "1.2.7",
 		"@emoji-mart/data": "1.2.1",

diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/pages/ChatPage/ChatMessages.tsx b/site/src/pages/ChatPage/ChatMessages.tsx
@@ -17,6 +17,7 @@ import { Loader } from "components/Loader/Loader";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
+import { ChatToolInvocation } from "./ChatToolInvocation";
 
 const fadeIn = keyframes`
 	from {
@@ -259,7 +260,7 @@ const MessageBubble: FC<MessageBubbleProps> = memo(({ message }) => {
 								case "tool-invocation":
 									return (
 										<div key={partIndex}>
-											{renderToolInvocation(part.toolInvocation, theme)}
+                                            <ChatToolInvocation toolInvocation={part.toolInvocation as any} />
 										</div>
 									);
 								case "reasoning":

diff --git a/site/src/pages/ChatPage/ChatToolInvocation.stories.tsx b/site/src/pages/ChatPage/ChatToolInvocation.stories.tsx
@@ -0,0 +1,42 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ChatToolInvocation } from "./ChatToolInvocation";
+import { MockWorkspace } from "testHelpers/entities";
+
+const meta: Meta<typeof ChatToolInvocation> = {
+	title: "pages/ChatPage/ChatToolInvocation",
+	component: ChatToolInvocation,
+};
+
+export default meta;
+type Story = StoryObj<typeof ChatToolInvocation>;
+
+export const GetWorkspace: Story = {
+	args: {
+		toolInvocation: {
+			toolName: "coder_get_workspace",
+			args: {
+				id: MockWorkspace.id,
+			},
+			result: MockWorkspace,
+			state: "result",
+			toolCallId: "some-id",
+		},
+	},
+};
+
+export const CreateWorkspace: Story = {
+	args: {
+		toolInvocation: {
+			toolName: "coder_create_workspace",
+			args: {
+				name: MockWorkspace.name,
+				rich_parameters: {},
+				template_version_id: MockWorkspace.template_active_version_id,
+				user: MockWorkspace.owner_name,
+			},
+			result: MockWorkspace,
+			state: "result",
+			toolCallId: "some-id",
+		},
+	},
+};
diff --git a/site/src/pages/ChatPage/ChatToolInvocation.tsx b/site/src/pages/ChatPage/ChatToolInvocation.tsx
@@ -1,78 +1,252 @@
-import { FC } from "react";
-import type { ToolInvocation } from "@ai-sdk/ui-utils";
+import { FC, useMemo } from "react";
 import { useTheme } from "@emotion/react";
+import type { ToolCall, ToolResult } from "@ai-sdk/provider-utils";
+import * as TypesGen from "api/typesGenerated";
+import CheckCircle from "@mui/icons-material/CheckCircle";
+import CircularProgress from "@mui/material/CircularProgress";
+import ErrorIcon from "@mui/icons-material/Error";
 
 interface ChatToolInvocationProps {
-	toolInvocation: ToolInvocation;
+	toolInvocation: ChatToolInvocations;
 }
 
 export const ChatToolInvocation: FC<ChatToolInvocationProps> = ({
 	toolInvocation,
 }) => {
 	const theme = useTheme();
+
+	let preview: React.ReactNode;
+	switch (toolInvocation.toolName) {
+		case "coder_get_workspace":
+			switch (toolInvocation.state) {
+				case "partial-call":
+				case "call":
+					preview = <div>Getting Workspace By ID...</div>;
+					break;
+				case "result":
+					preview = (
+						<div css={{ display: "flex", alignItems: "center" }}>
+							<img
+								src={toolInvocation.result.template_icon || "/icon/code.svg"}
+								alt={toolInvocation.result.name}
+							/>
+							<div>
+								<div>{toolInvocation.result.name}</div>
+								<div>{toolInvocation.result.template_display_name}</div>
+							</div>
+						</div>
+					);
+					break;
+			}
+			break;
+		default:
+			switch (toolInvocation.state) {
+				case "partial-call":
+				case "call":
+					preview = <div>Running Tool...</div>;
+					break;
+				case "result":
+					preview = <pre>{JSON.stringify(toolInvocation.result, null, 2)}</pre>;
+					break;
+			}
+	}
+
+	const hasError = useMemo(() => {
+		if (toolInvocation.state !== "result") {
+			return false;
+		}
+		return (
+			typeof toolInvocation.result === "object" &&
+			"error" in toolInvocation.result
+		);
+	}, [toolInvocation]);
+	const statusColor = useMemo(() => {
+		if (toolInvocation.state !== "result") {
+			return theme.palette.primary.main;
+		}
+		return hasError ? theme.palette.error.main : theme.palette.success.main;
+	}, [toolInvocation, hasError]);
+	const friendlyName = useMemo(() => {
+		return toolInvocation.toolName
+			.replace("coder_", "")
+			.replace("_", " ")
+			.replace(/\b\w/g, (char) => char.toUpperCase());
+	}, [toolInvocation.toolName]);
+
 	return (
 		<div
 			css={{
 				marginTop: theme.spacing(1),
 				marginLeft: theme.spacing(2),
 				borderLeft: `2px solid ${theme.palette.info.light}`,
 				paddingLeft: theme.spacing(1.5),
-				fontSize: "0.875em",
-				fontFamily: "monospace",
+				display: "flex",
+				flexDirection: "column",
+				gap: theme.spacing(1),
 			}}
 		>
-			<div
-				css={{
-					color: theme.palette.info.light,
-					fontStyle: "italic",
-					fontWeight: 500,
-					marginBottom: theme.spacing(0.5),
-				}}
-			>
-				🛠️ Tool Call: {toolInvocation.toolName}
-			</div>
-			<div
-				css={{
-					backgroundColor: theme.palette.action.hover,
-					padding: theme.spacing(1.5),
-					borderRadius: "6px",
-					marginTop: theme.spacing(0.5),
-					color: theme.palette.text.secondary,
-				}}
-			>
-				<div css={{ marginBottom: theme.spacing(1) }}>
-					Arguments:
-					<div
+			<div css={{ display: "flex", alignItems: "center" }}>
+				{toolInvocation.state !== "result" && (
+					<CircularProgress
+						size={16}
 						css={{
-							marginTop: theme.spacing(0.5),
-							fontFamily: "monospace",
-							whiteSpace: "pre-wrap",
-							wordBreak: "break-all",
-							fontSize: "0.9em",
-							color: theme.palette.text.primary,
+							color: statusColor,
 						}}
-					>
-						{JSON.stringify(toolInvocation.args, null, 2)}
-					</div>
-				</div>
-				{"result" in toolInvocation && (
-					<div>
-						Result:
-						<div
-							css={{
-								marginTop: theme.spacing(0.5),
-								fontFamily: "monospace",
-								whiteSpace: "pre-wrap",
-								wordBreak: "break-all",
-								fontSize: "0.9em",
-								color: theme.palette.text.primary,
-							}}
-						>
-							{JSON.stringify(toolInvocation.result, null, 2)}
-						</div>
-					</div>
+					/>
 				)}
+				{toolInvocation.state === "result" ? (
+					hasError ? (
+						<ErrorIcon sx={{ color: statusColor, fontSize: 16 }} />
+					) : (
+						<CheckCircle sx={{ color: statusColor, fontSize: 16 }} />
+					)
+				) : null}
+				<div
+					css={{
+						flex: 1,
+					}}
+				>
+					{friendlyName}
+				</div>
 			</div>
+			<div>{preview}</div>
 		</div>
 	);
 };
+
+export type ChatToolInvocations =
+	| ToolInvocation<
+			"coder_get_workspace",
+			{
+				id: string;
+			},
+			TypesGen.Workspace
+	  >
+	| ToolInvocation<
+			"coder_create_workspace",
+			{
+				user: string;
+				template_version_id: string;
+				name: string;
+				rich_parameters: Record<string, any>;
+			},
+			TypesGen.Workspace
+	  >
+	| ToolInvocation<
+			"coder_list_workspaces",
+			{
+				owner: string;
+			},
+			Pick<
+				TypesGen.Workspace,
+				| "id"
+				| "name"
+				| "template_id"
+				| "template_name"
+				| "template_display_name"
+				| "template_icon"
+				| "template_active_version_id"
+				| "outdated"
+			>[]
+	  >
+	| ToolInvocation<
+			"coder_list_templates",
+			{},
+			Pick<
+				TypesGen.Template,
+				| "id"
+				| "name"
+				| "description"
+				| "active_version_id"
+				| "active_user_count"
+			>[]
+	  >
+	| ToolInvocation<
+			"coder_template_version_parameters",
+			{
+				template_version_id: string;
+			},
+			TypesGen.TemplateVersionParameter[]
+	  >
+	| ToolInvocation<"coder_get_authenticated_user", {}, TypesGen.User>
+	| ToolInvocation<
+			"coder_create_workspace_build",
+			{
+				workspace_id: string;
+				transition: "start" | "stop" | "delete";
+			},
+			TypesGen.WorkspaceBuild
+	  >
+	| ToolInvocation<
+			"coder_create_template_version",
+			{
+				template_id?: string;
+				file_id: string;
+			},
+			TypesGen.TemplateVersion
+	  >
+	| ToolInvocation<
+			"coder_get_workspace_agent_logs",
+			{
+				workspace_agent_id: string;
+			},
+			string[]
+	  >
+	| ToolInvocation<
+			"coder_get_workspace_build_logs",
+			{
+				workspace_build_id: string;
+			},
+			string[]
+	  >
+	| ToolInvocation<
+			"coder_get_template_version_logs",
+			{
+				template_version_id: string;
+			},
+			string[]
+	  >
+	| ToolInvocation<
+			"coder_update_template_active_version",
+			{
+				template_id: string;
+				template_version_id: string;
+			},
+			string
+	  >
+	| ToolInvocation<
+			"coder_upload_tar_file",
+			{
+				mime_type: string;
+				files: Record<string, string>;
+			},
+			TypesGen.UploadResponse
+	  >
+	| ToolInvocation<
+			"coder_create_template",
+			{
+				name: string;
+			},
+			TypesGen.Template
+	  >
+	| ToolInvocation<
+			"coder_delete_template",
+			{
+				template_id: string;
+			},
+			string
+	  >;
+
+type ToolInvocation<N extends string, A, R> =
+	| ({
+			state: "partial-call";
+			step?: number;
+	  } & ToolCall<N, A>)
+	| ({
+			state: "call";
+			step?: number;
+	  } & ToolCall<N, A>)
+	| ({
+			state: "result";
+			step?: number;
+	  } & ToolResult<N, A, R>);