feat(agent):Supports custom agent and chat experience with refactoring (#957)

* feat: add agent management functionality with creation, editing, and deletion

* feat: enhance agent creation and chat experience

- Added AgentWelcome component to display agent description on new thread creation.
- Improved agent name validation with availability check during agent creation.
- Updated NewAgentPage to handle agent creation flow more effectively, including enhanced error handling and user feedback.
- Refactored chat components to streamline message handling and improve user experience.
- Introduced new bootstrap skill for personalized onboarding conversations, including detailed conversation phases and a structured SOUL.md template.
- Updated localization files to reflect new features and error messages.
- General code cleanup and optimizations across various components and hooks.

* Refactor workspace layout and agent management components

- Updated WorkspaceLayout to use useLayoutEffect for sidebar state initialization.
- Removed unused AgentFormDialog and related edit functionality from AgentCard.
- Introduced ArtifactTrigger component to manage artifact visibility.
- Enhanced ChatBox to handle artifact selection and display.
- Improved message list rendering logic to avoid loading states.
- Updated localization files to remove deprecated keys and add new translations.
- Refined hooks for local settings and thread management to improve performance and clarity.
- Added temporal awareness guidelines to deep research skill documentation.

* feat: refactor chat components and introduce thread management hooks

* feat: improve artifact file detail preview logic and clean up console logs

* feat: refactor lead agent creation logic and improve logging details

* feat: validate agent name format and enhance error handling in agent setup

* feat: simplify thread search query by removing unnecessary metadata

* feat: update query key in useDeleteThread and useRenameThread for consistency

* feat: add isMock parameter to thread and artifact handling for improved testing

* fix: reorder import of setup_agent for consistency in builtins module

* feat: append mock parameter to thread links in CaseStudySection for testing purposes

* fix: update load_agent_soul calls to use cfg.name for improved clarity

* fix: update date format in apply_prompt_template for consistency

* feat: integrate isMock parameter into artifact content loading for enhanced testing

* docs: add license section to SKILL.md for clarity and attribution

* feat(agent): enhance model resolution and agent configuration handling

* chore: remove unused import of _resolve_model_name from agents

* feat(agent): remove unused field

* fix(agent): set default value for requested_model_name in _resolve_model_name function

* feat(agent): update get_available_tools call to handle optional agent_config and improve middleware function signature

---------

Co-authored-by: Willem Jiang <willem.jiang@gmail.com>

frontend/src/core/agents/api.ts

@@ -0,0 +1,67 @@
+import { getBackendBaseURL } from "@/core/config";
+
+import type { Agent, CreateAgentRequest, UpdateAgentRequest } from "./types";
+
+export async function listAgents(): Promise<Agent[]> {
+  const res = await fetch(`${getBackendBaseURL()}/api/agents`);
+  if (!res.ok) throw new Error(`Failed to load agents: ${res.statusText}`);
+  const data = (await res.json()) as { agents: Agent[] };
+  return data.agents;
+}
+
+export async function getAgent(name: string): Promise<Agent> {
+  const res = await fetch(`${getBackendBaseURL()}/api/agents/${name}`);
+  if (!res.ok) throw new Error(`Agent '${name}' not found`);
+  return res.json() as Promise<Agent>;
+}
+
+export async function createAgent(request: CreateAgentRequest): Promise<Agent> {
+  const res = await fetch(`${getBackendBaseURL()}/api/agents`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(request),
+  });
+  if (!res.ok) {
+    const err = (await res.json().catch(() => ({}))) as { detail?: string };
+    throw new Error(err.detail ?? `Failed to create agent: ${res.statusText}`);
+  }
+  return res.json() as Promise<Agent>;
+}
+
+export async function updateAgent(
+  name: string,
+  request: UpdateAgentRequest,
+): Promise<Agent> {
+  const res = await fetch(`${getBackendBaseURL()}/api/agents/${name}`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(request),
+  });
+  if (!res.ok) {
+    const err = (await res.json().catch(() => ({}))) as { detail?: string };
+    throw new Error(err.detail ?? `Failed to update agent: ${res.statusText}`);
+  }
+  return res.json() as Promise<Agent>;
+}
+
+export async function deleteAgent(name: string): Promise<void> {
+  const res = await fetch(`${getBackendBaseURL()}/api/agents/${name}`, {
+    method: "DELETE",
+  });
+  if (!res.ok) throw new Error(`Failed to delete agent: ${res.statusText}`);
+}
+
+export async function checkAgentName(
+  name: string,
+): Promise<{ available: boolean; name: string }> {
+  const res = await fetch(
+    `${getBackendBaseURL()}/api/agents/check?name=${encodeURIComponent(name)}`,
+  );
+  if (!res.ok) {
+    const err = (await res.json().catch(() => ({}))) as { detail?: string };
+    throw new Error(
+      err.detail ?? `Failed to check agent name: ${res.statusText}`,
+    );
+  }
+  return res.json() as Promise<{ available: boolean; name: string }>;
+}

frontend/src/core/agents/hooks.ts

@@ -0,0 +1,64 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import {
+  createAgent,
+  deleteAgent,
+  getAgent,
+  listAgents,
+  updateAgent,
+} from "./api";
+import type { CreateAgentRequest, UpdateAgentRequest } from "./types";
+
+export function useAgents() {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["agents"],
+    queryFn: () => listAgents(),
+  });
+  return { agents: data ?? [], isLoading, error };
+}
+
+export function useAgent(name: string | null | undefined) {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["agents", name],
+    queryFn: () => getAgent(name!),
+    enabled: !!name,
+  });
+  return { agent: data ?? null, isLoading, error };
+}
+
+export function useCreateAgent() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (request: CreateAgentRequest) => createAgent(request),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["agents"] });
+    },
+  });
+}
+
+export function useUpdateAgent() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      name,
+      request,
+    }: {
+      name: string;
+      request: UpdateAgentRequest;
+    }) => updateAgent(name, request),
+    onSuccess: (_data, { name }) => {
+      void queryClient.invalidateQueries({ queryKey: ["agents"] });
+      void queryClient.invalidateQueries({ queryKey: ["agents", name] });
+    },
+  });
+}
+
+export function useDeleteAgent() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (name: string) => deleteAgent(name),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["agents"] });
+    },
+  });
+}

frontend/src/core/agents/index.ts

@@ -0,0 +1,3 @@
+export * from "./api";
+export * from "./hooks";
+export * from "./types";

frontend/src/core/agents/types.ts

@@ -0,0 +1,22 @@
+export interface Agent {
+  name: string;
+  description: string;
+  model: string | null;
+  tool_groups: string[] | null;
+  soul?: string | null;
+}
+
+export interface CreateAgentRequest {
+  name: string;
+  description?: string;
+  model?: string | null;
+  tool_groups?: string[] | null;
+  soul?: string;
+}
+
+export interface UpdateAgentRequest {
+  description?: string | null;
+  model?: string | null;
+  tool_groups?: string[] | null;
+  soul?: string | null;
+}