vue-agent-start 0.1.0

package/src/agent-studio/adapters/springAgentStart.ts

@@ -0,0 +1,390 @@
+/**
+ * createAgentStudioSpringBackend — returns the full callback bag the two
+ * top-level agent pages (AgentAppsPage / AgentChatPage) need, backed by the
+ * spring-agent-web-starter REST endpoints under {@code baseUrl}.
+ *
+ *   import {
+ *     AgentAppsPage,
+ *     createAgentStudioSpringBackend,
+ *   } from 'vue-agent-start';
+ *
+ *   <AgentAppsPage :api="createAgentStudioSpringBackend({ baseUrl: '/api' })" />
+ *
+ * The bag is a superset of {@link AppStudioApi} (drawer / annotation / monitor
+ * / api-key panels) with the extra CRUD + streaming methods the list page uses.
+ * Hosts that want a totally custom backend can implement {@link AgentStudioApi}
+ * directly instead.
+ */
+import type { AppStudioApi } from '../api';
+
+// ---------------------------------------------------------------------------
+// Types — mirror the shapes emitted by spring-agent-web-starter. Copies of
+// what used to live under `#/api/agent-start/*` in the host app. Kept flat here
+// so the whole adapter is one drop-in file.
+// ---------------------------------------------------------------------------
+
+export type AgentStrategy = 'FUNCTION_CALLING' | 'PLAN_EXECUTE' | 'REACT';
+
+export type AppMode =
+  | 'agent'
+  | 'chat'
+  | 'chatflow'
+  | 'completion'
+  | 'workflow';
+
+export interface AgentEntity {
+  id: string;
+  tenantId?: string;
+  name: string;
+  description?: string;
+  icon?: string;
+  iconBackground?: string;
+  mode?: AppMode;
+  instructions?: string;
+  openingStatement?: string;
+  suggestedQuestionsJson?: string;
+  datasetIdsJson?: string;
+  retrievalConfigJson?: string;
+  workflowId?: string;
+  modelName?: string;
+  modelProvider?: string;
+  modelSettingsJson?: string;
+  strategy?: AgentStrategy;
+  toolNamesJson?: string;
+  approvalToolsJson?: string;
+  delegateAgentIdsJson?: string;
+  maxIterations?: number;
+  memoryEnabled?: boolean;
+  memoryWindow?: number;
+  published?: boolean;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export interface CreateAgentRequest {
+  tenantId?: string;
+  name: string;
+  description?: string;
+  icon?: string;
+  iconBackground?: string;
+  mode?: AppMode;
+  instructions?: string;
+  openingStatement?: string;
+  suggestedQuestions?: string[];
+  datasetIds?: string[];
+  retrievalConfig?: Record<string, unknown>;
+  modelName?: string;
+  modelProvider?: string;
+  strategy?: AgentStrategy;
+  toolNames?: string[];
+  approvalRequiredTools?: string[];
+  delegateAgentIds?: string[];
+  maxIterations?: number;
+  memoryEnabled?: boolean;
+  memoryWindow?: number;
+  published?: boolean;
+  modelSettings?: Record<string, unknown>;
+}
+
+export interface AgentToolView {
+  name: string;
+  description: string;
+  inputSchema?: string;
+}
+
+export interface AgentHistoryMessage {
+  role: 'ASSISTANT' | 'SYSTEM' | 'USER';
+  content: string;
+}
+
+export interface ConversationSummary {
+  conversationId: string;
+  name?: string;
+  userId?: null | string;
+  firstMessage?: string;
+  updatedAt?: string;
+  pinned?: boolean;
+}
+
+export interface ChatRequest {
+  query: string;
+  conversationId?: string;
+  variables?: Record<string, unknown>;
+}
+
+export interface DatasetLite {
+  id: string;
+  name: string;
+  description?: string;
+}
+
+export interface ModelLite {
+  id: string;
+  providerName: string;
+  modelName: string;
+  modelType?: string;
+  enabled?: boolean;
+  isDefault?: boolean;
+}
+
+export interface ToolLite {
+  name: string;
+  description: string;
+}
+
+export interface WorkflowGraphLike {
+  nodes: Array<Record<string, unknown>>;
+  edges: Array<Record<string, unknown>>;
+  [k: string]: unknown;
+}
+
+export interface WorkflowEntityLite {
+  id: string;
+  appId?: string;
+  name?: string;
+  mode?: string;
+  graph?: WorkflowGraphLike | Record<string, unknown> | null;
+  version?: string;
+  published?: boolean;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+/**
+ * Full API bag consumed by AgentAppsPage / AgentChatPage. Extends
+ * {@link AppStudioApi} so an instance passed to the page also drives the
+ * drawer's built-in panels.
+ */
+export interface AgentStudioApi extends AppStudioApi {
+  // agent CRUD
+  listAgents(): Promise<AgentEntity[]>;
+  getAgent(id: string): Promise<AgentEntity>;
+  createAgent(req: CreateAgentRequest): Promise<AgentEntity>;
+  updateAgent(id: string, req: CreateAgentRequest): Promise<AgentEntity>;
+  deleteAgent(id: string): Promise<void>;
+
+  // chat runtime
+  fetchAgentTools(id: string): Promise<AgentToolView[]>;
+  chatStream(id: string, req: ChatRequest): Promise<Response>;
+  fetchConversations(agentId: string, limit?: number): Promise<ConversationSummary[]>;
+  fetchHistoryMessages(
+    agentId: string,
+    conversationId: string,
+    limit?: number,
+  ): Promise<AgentHistoryMessage[]>;
+
+  // drawer dropdown data
+  listDatasets(): Promise<DatasetLite[]>;
+  listModels(type?: string): Promise<ModelLite[]>;
+  listTools(): Promise<ToolLite[]>;
+
+  // workflow draft/publish (chatflow / workflow modes)
+  getWorkflowDraft(appId: string): Promise<WorkflowEntityLite>;
+  saveWorkflowDraft(appId: string, graph: WorkflowGraphLike): Promise<WorkflowEntityLite>;
+  publishWorkflowDraft(appId: string): Promise<WorkflowEntityLite>;
+
+  /** Raw base URL — components may append their own paths (e.g. copy-curl). */
+  baseUrl: string;
+}
+
+// ---------------------------------------------------------------------------
+// Factory
+// ---------------------------------------------------------------------------
+
+type FetchLike = typeof fetch;
+type HeadersProvider = () =>
+  | Record<string, string>
+  | Promise<Record<string, string>>;
+
+export interface AgentStudioAdapterOptions {
+  /** Backend base URL. Default: `/api`. */
+  baseUrl?: string;
+  fetch?: FetchLike;
+  headers?: HeadersProvider;
+  onError?(msg: string): void;
+  onSuccess?(msg: string): void;
+  timeoutMs?: number;
+}
+
+interface Envelope<T> {
+  code: string;
+  message?: string;
+  data: T;
+}
+
+export function createAgentStudioSpringBackend(
+  opts: AgentStudioAdapterOptions = {},
+): AgentStudioApi {
+  const baseUrl = (opts.baseUrl ?? '/api').replace(/\/+$/, '');
+  const doFetch: FetchLike = opts.fetch ?? ((...args) => fetch(...args));
+  const timeoutMs = opts.timeoutMs ?? 60_000;
+
+  async function extraHeaders(): Promise<Record<string, string>> {
+    return opts.headers ? await opts.headers() : {};
+  }
+
+  function qs(params?: Record<string, unknown>): string {
+    if (!params) return '';
+    const parts: string[] = [];
+    for (const [k, v] of Object.entries(params)) {
+      if (v == null) continue;
+      parts.push(`${encodeURIComponent(k)}=${encodeURIComponent(String(v))}`);
+    }
+    return parts.length > 0 ? `?${parts.join('&')}` : '';
+  }
+
+  async function call<T>(
+    path: string,
+    init: RequestInit = {},
+  ): Promise<T> {
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), timeoutMs);
+    try {
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+        ...(await extraHeaders()),
+        ...((init.headers as Record<string, string>) ?? {}),
+      };
+      const res = await doFetch(`${baseUrl}${path}`, {
+        ...init,
+        headers,
+        signal: controller.signal,
+      });
+      if (!res.ok) {
+        let msg = `${res.status} ${res.statusText}`;
+        try {
+          const body = (await res.json()) as { message?: string };
+          if (body?.message) msg = body.message;
+        } catch {
+          // ignore body-parse errors
+        }
+        opts.onError?.(msg);
+        throw new Error(msg);
+      }
+      const env = (await res.json()) as Envelope<T>;
+      if (env.code !== 'ok') {
+        const msg = env.message ?? env.code;
+        opts.onError?.(msg);
+        throw new Error(msg);
+      }
+      return env.data;
+    } finally {
+      clearTimeout(timer);
+    }
+  }
+
+  return {
+    baseUrl,
+
+    // ---- agent CRUD --------------------------------------------------------
+    listAgents: () => call<AgentEntity[]>('/agents'),
+    getAgent: (id) => call<AgentEntity>(`/agents/${id}`),
+    createAgent: (req) =>
+      call<AgentEntity>('/agents', {
+        method: 'POST',
+        body: JSON.stringify(req),
+      }),
+    updateAgent: (id, req) =>
+      call<AgentEntity>(`/agents/${id}`, {
+        method: 'PUT',
+        body: JSON.stringify(req),
+      }),
+    deleteAgent: (id) =>
+      call<void>(`/agents/${id}`, { method: 'DELETE' }),
+
+    // ---- chat runtime ------------------------------------------------------
+    fetchAgentTools: (id) => call<AgentToolView[]>(`/agents/${id}/tools`),
+    chatStream: async (id, req) => {
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+        Accept: 'text/event-stream',
+        ...(await extraHeaders()),
+      };
+      return doFetch(`${baseUrl}/agents/${id}/chat/stream`, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(req),
+      });
+    },
+    fetchConversations: (agentId, limit = 100) =>
+      call<ConversationSummary[]>(`/chat/conversations/${agentId}`, {
+        method: 'POST',
+        body: JSON.stringify({ limit }),
+      }),
+    fetchHistoryMessages: (agentId, conversationId, limit = 500) =>
+      call<AgentHistoryMessage[]>(
+        `/chat/conversations/${agentId}/${conversationId}/messages`,
+        {
+          method: 'POST',
+          body: JSON.stringify({ limit }),
+        },
+      ),
+
+    // ---- drawer dropdown data ---------------------------------------------
+    listDatasets: () =>
+      call<DatasetLite[]>('/datasets').catch(() => []),
+    listModels: (type = 'LLM') =>
+      call<ModelLite[]>(`/models${qs({ type })}`).catch(() => []),
+    listTools: () =>
+      call<ToolLite[]>('/tools').catch(() => []),
+
+    // ---- workflow draft/publish -------------------------------------------
+    getWorkflowDraft: (appId) =>
+      call<WorkflowEntityLite>(`/apps/${appId}/workflow/draft`),
+    saveWorkflowDraft: (appId, graph) =>
+      call<WorkflowEntityLite>(`/apps/${appId}/workflow/draft`, {
+        method: 'PUT',
+        body: JSON.stringify({ graph }),
+      }),
+    publishWorkflowDraft: (appId) =>
+      call<WorkflowEntityLite>(`/apps/${appId}/workflow/publish`, {
+        method: 'POST',
+        body: JSON.stringify({}),
+      }),
+
+    // ---- AppStudioApi bag (drawer panels) ---------------------------------
+    listConversations: (appId, limit = 100) =>
+      call('/chat/conversations/' + appId, {
+        method: 'POST',
+        body: JSON.stringify({ limit }),
+      }),
+    fetchHistory: (appId, conversationId, limit = 500) =>
+      call(`/chat/conversations/${appId}/${conversationId}/messages`, {
+        method: 'POST',
+        body: JSON.stringify({ limit }),
+      }),
+
+    listAnnotations: (appId) => call(`/apps/${appId}/annotations`),
+    createAnnotation: (appId, req) =>
+      call(`/apps/${appId}/annotations`, {
+        method: 'POST',
+        body: JSON.stringify(req),
+      }),
+    updateAnnotation: (appId, id, req) =>
+      call(`/apps/${appId}/annotations/${id}`, {
+        method: 'PUT',
+        body: JSON.stringify(req),
+      }),
+    deleteAnnotation: (appId, id) =>
+      call<void>(`/apps/${appId}/annotations/${id}`, { method: 'DELETE' }),
+
+    fetchAppMetrics: (appId) => call(`/apps/${appId}/metrics`),
+    fetchLlmUsage: () => call('/llmops/total'),
+    fetchRecentLlmCalls: (limit = 50) =>
+      call(`/llmops/recent${qs({ limit })}`),
+
+    listApiKeys: (appId) => call(`/apps/${appId}/api-tokens`),
+    createApiKey: (appId, name) =>
+      call(`/apps/${appId}/api-tokens`, {
+        method: 'POST',
+        body: JSON.stringify({ name }),
+      }),
+    renameApiKey: (appId, id, name) =>
+      call(`/apps/${appId}/api-tokens/${id}/rename`, {
+        method: 'POST',
+        body: JSON.stringify({ name }),
+      }),
+    deleteApiKey: (appId, id) =>
+      call<void>(`/apps/${appId}/api-tokens/${id}`, { method: 'DELETE' }),
+  };
+}

package/src/agent-studio/api/index.ts

@@ -0,0 +1 @@
+export * from './types';

package/src/agent-studio/api/types.ts

@@ -0,0 +1,173 @@
+/**
+ * `AppStudioApi` — the callback bag a host app supplies to
+ * {@code <AppDesignDrawer :api="...">}. The drawer's built-in panels
+ * ({@code LogAnnotationPanel}, {@code MonitorPanel}, …) call these functions
+ * for every backend I/O; the plugin never imports the host's HTTP client
+ * directly.
+ *
+ * <p>Rationale: keeps the plugin a self-contained npm package. A consumer
+ * just implements this interface once against their axios/fetch stack and
+ * every panel wires up — no more copying panel implementations around.</p>
+ *
+ * <p>Every method returns a {@link Promise}; the plugin awaits and handles
+ * loading / error UI centrally. A missing implementation (e.g. no annotation
+ * backend yet) can just resolve to an empty array — the panel degrades to an
+ * empty-state placeholder, no crash.</p>
+ */
+
+// ---------------------------------------------------------------------------
+// Domain types — mirrors the shapes the plugin panels need to render. Kept
+// intentionally minimal so a host adapting to a different backend only has
+// to supply these fields.
+// ---------------------------------------------------------------------------
+
+/** A single row in a chat conversation history. */
+export interface StudioHistoryMessage {
+  role: 'ASSISTANT' | 'SYSTEM' | 'USER';
+  content: string;
+  createdAt?: string;
+}
+
+/** One row in the "对话" tab table. */
+export interface StudioConversationSummary {
+  conversationId: string;
+  /**
+   * 会话所有者标识。后端来自 conversations.from_end_user_id（用户侧终端 id）
+   * 或 from_account_id（控制台账号）；两者皆无为 null，UI 展示为 "—"。
+   */
+  userId?: null | string;
+  firstMessage?: string;
+  updatedAt?: string;
+  messageCount?: number;
+}
+
+/** A saved QA-pair annotation (Dify's 标注回复). */
+export interface StudioAnnotation {
+  id: string;
+  appId?: string;
+  question?: string;
+  content?: string;
+  enabled?: boolean;
+  hitCount?: number;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+/** Payload for create/update annotation. */
+export interface StudioAnnotationRequest {
+  question: string;
+  content: string;
+  enabled?: boolean;
+}
+
+/** Per-app conversation/message metrics powering the "监测" tab tiles. */
+export interface StudioAppMetrics {
+  appId: string;
+  totalConversations: number;
+  totalMessages: number;
+  userMessages?: number;
+  assistantMessages?: number;
+  avgInteractionsPerConversation: number;
+  lastActivityAt?: string;
+}
+
+/** Rolled-up LLM usage. */
+export interface StudioLlmUsageStats {
+  calls: number;
+  errors: number;
+  promptTokens: number;
+  completionTokens: number;
+  totalTokens: number;
+  costMicros: number;
+  avgLatencyMs: number;
+}
+
+/** A single LLM call record in the recent-calls table. */
+export interface StudioLlmCallRecord {
+  id: string;
+  provider?: string;
+  model?: string;
+  promptTokens?: number;
+  completionTokens?: number;
+  totalTokens?: number;
+  costMicros?: number;
+  latencyMs?: number;
+  success?: boolean;
+  createdAt?: string;
+}
+
+/**
+ * One row in the "API 密钥" table under the 访问 API tab. Matches the shape
+ * exposed by the backend {@code /api/agent-start/apps/{appId}/api-tokens} endpoints —
+ * the full token value is included so the frontend can render both the masked
+ * preview (`app...xxxx`) and a one-shot "已复制" toast on create.
+ */
+export interface StudioApiKey {
+  id: string;
+  appId?: string;
+  name?: string;
+  /** {@code app} / {@code dataset} — narrow it later if we support dataset keys. */
+  type?: string;
+  /** Full opaque token value (e.g. {@code app-xyz...}). Sensitive. */
+  token: string;
+  createdAt?: string;
+  lastUsedAt?: string;
+}
+
+// ---------------------------------------------------------------------------
+// The callback bag itself.
+// ---------------------------------------------------------------------------
+
+/**
+ * Every field is optional so a host can wire only the panels they need. A
+ * panel whose API method is missing renders as read-only / empty.
+ */
+export interface AppStudioApi {
+  // ── Conversation history / logs tab ────────────────────────────────────
+  listConversations?: (appId: string, limit?: number) => Promise<StudioConversationSummary[]>;
+  fetchHistory?: (
+    appId: string,
+    conversationId: string,
+    limit?: number,
+  ) => Promise<StudioHistoryMessage[]>;
+
+  // ── Annotation tab ─────────────────────────────────────────────────────
+  listAnnotations?: (appId: string) => Promise<StudioAnnotation[]>;
+  createAnnotation?: (
+    appId: string,
+    req: StudioAnnotationRequest,
+  ) => Promise<StudioAnnotation>;
+  updateAnnotation?: (
+    appId: string,
+    id: string,
+    req: StudioAnnotationRequest,
+  ) => Promise<StudioAnnotation>;
+  deleteAnnotation?: (appId: string, id: string) => Promise<void>;
+
+  // ── Monitor tab ────────────────────────────────────────────────────────
+  fetchAppMetrics?: (appId: string) => Promise<StudioAppMetrics>;
+  fetchLlmUsage?: () => Promise<StudioLlmUsageStats>;
+  fetchRecentLlmCalls?: (limit?: number) => Promise<StudioLlmCallRecord[]>;
+
+  // ── 访问 API tab — API-key management ─────────────────────────────────
+  /**
+   * List every API key attached to {@code appId}. Called on tab open. Returns
+   * an empty array when the host hasn't wired the endpoint yet — the manager
+   * degrades to the "尚未生成" empty state.
+   */
+  listApiKeys?: (appId: string) => Promise<StudioApiKey[]>;
+  /**
+   * Mint a new key. The response is expected to include the full token value
+   * so the UI can show it — subsequent list calls also include the value
+   * (this is an internal console, matching Dify's UX).
+   */
+  createApiKey?: (appId: string, name?: string) => Promise<StudioApiKey>;
+  /** Rename an existing key. Optional — the manager hides the rename button when absent. */
+  renameApiKey?: (
+    appId: string,
+    id: string,
+    name: string,
+  ) => Promise<StudioApiKey>;
+  /** Delete a key permanently. */
+  deleteApiKey?: (appId: string, id: string) => Promise<void>;
+}