vue-agent-start 0.1.0

package/src/agent-studio/types.ts

@@ -0,0 +1,242 @@
+/**
+ * Mirrors the backend REST payloads (see spring-agent-web AgentController).
+ */
+
+export type AgentStrategy = 'FUNCTION_CALLING' | 'PLAN_EXECUTE' | 'REACT';
+
+/**
+ * The "app kind" the user picks from the CreateAppModal. Dify calls these
+ * "application types" — each is really the same underlying agent runtime
+ * plus a canned config.
+ *
+ * <ul>
+ *   <li>{@code chatflow} — 支持记忆的多轮对话工作流 (Dify parity). Uses the
+ *       visual designer like {@code workflow}, but every run is scoped to a
+ *       conversation so memory + streaming work.</li>
+ *   <li>{@code workflow} — 面向单任务的可视化编排工作流. One-shot DAG run,
+ *       no built-in memory.</li>
+ * </ul>
+ */
+export type AppType =
+  | 'agent'
+  | 'chatbot'
+  | 'chatflow'
+  | 'text-generator'
+  | 'workflow';
+
+export interface AgentEntity {
+  id: string;
+  tenantId: string;
+  name: string;
+  /** Card summary text (Dify parity). */
+  description?: string;
+  /** Emoji or icon key. */
+  icon?: string;
+  /** Hex background tint for the icon square, e.g. "#EEF4FF". */
+  iconBackground?: string;
+  /**
+   * Dify-parity app mode — determines which design surface the drawer opens:
+   *   agent | chat | completion  → orchestrate + preview
+   *   workflow | chatflow        → visual DAG designer
+   */
+  mode?: 'agent' | 'chat' | 'chatflow' | 'completion' | 'workflow';
+  instructions?: string;
+  openingStatement?: string;
+  suggestedQuestionsJson?: string;
+  datasetIdsJson?: string;
+  /**
+   * JSON blob controlling *how* retrieval runs against the attached datasets —
+   * top-k, method (VECTOR/FULL_TEXT/HYBRID), rerank, etc. Independent of
+   * {@link datasetIdsJson} which is just the list of dataset ids.
+   */
+  retrievalConfigJson?: string;
+  /**
+   * FK to `workflows.id` — the draft workflow's id, which equals the app id
+   * by invariant. Never carries the graph itself; fetch it via the draft API.
+   */
+  workflowId?: string;
+  /** Plain vendor model name (e.g. {@code qwen3.6-plus}). */
+  modelName?: string;
+  /** Provider key that owns {@link modelName} (e.g. {@code qwen}). */
+  modelProvider?: string;
+  /**
+   * Serialised runtime overrides — the 模型设置 drawer payload
+   * ({@code temperature}, {@code topP}, {@code maxTokens},
+   * {@code thinkingMode}, …). Mirror of {@code app_model_configs.configs}
+   * populated by the backend on read paths so the drawer's picker can
+   * hydrate its parameter panel without a second request.
+   */
+  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;
+  instructions?: string;
+  /** Plain vendor model name (e.g. {@code qwen3.6-plus}). */
+  modelName?: string;
+  /** Provider key that owns {@link modelName} (e.g. {@code qwen}). */
+  modelProvider?: string;
+  strategy?: AgentStrategy;
+  toolNames?: string[];
+  approvalRequiredTools?: string[];
+  delegateAgentIds?: string[];
+  maxIterations?: number;
+  memoryEnabled?: boolean;
+  memoryWindow?: number;
+}
+
+/** Describes one of the picker cards in {@link CreateAppModal}. */
+export interface AppTypeDescriptor {
+  id: AppType;
+  title: string;
+  description: string;
+  /** Emoji / short glyph used as the card's icon. */
+  icon: string;
+  /** Solid background color for the icon square. */
+  iconBg: string;
+  /**
+   * A brief hint about the resulting agent's default config — e.g. which
+   * strategy / tools it starts with.
+   */
+  hint: string;
+  /** SVG preview markup (rendered as v-html). */
+  previewSvg: string;
+}
+
+// ---------------------------------------------------------------------------
+// Editor-page (Dify "编排/API/日志/监测") view types.
+//
+// Kept intentionally close to Dify's data shape so the panels can render the
+// same set of controls; the host is responsible for mapping these to whatever
+// its backend actually stores.
+// ---------------------------------------------------------------------------
+
+export type StudioTab = 'orchestrate' | 'api' | 'logs' | 'monitor';
+
+/** One item in the left-side vertical nav of the studio shell. */
+export interface StudioNavItem {
+  id: StudioTab;
+  title: string;
+  /** Emoji / glyph fallback when {@link iconComponent} is not provided. */
+  icon: string;
+  /**
+   * Preferred: an Ant Design (or any Vue) icon component. When set the shell
+   * renders it via {@code <component :is>} instead of the emoji string.
+   */
+  iconComponent?: any;
+}
+
+/** A variable exposed to the prompt (matches Dify's 变量 section). */
+export type VariableType = 'paragraph' | 'select' | 'text';
+
+export interface PromptVariable {
+  key: string;
+  label: string;
+  type: VariableType;
+  required?: boolean;
+  options?: string[];
+}
+
+/**
+ * Rich variable descriptor edited by {@link VariableEditorModal}. Mirrors the
+ * shape used by the flow designer's StartNode input-variables so the two
+ * surfaces feel identical to the user.
+ */
+export type AgentVariableType =
+  | 'array'
+  | 'boolean'
+  | 'file'
+  | 'number'
+  | 'object'
+  | 'string';
+
+export interface AgentVariable {
+  /** Stable id — timestamp-generated on create, preserved on edit. */
+  id?: number | string;
+  /** Code name used in prompt templates ({@code {{#user.name#}}}). */
+  name: string;
+  /** Display label shown in forms. Falls back to {@link name} if empty. */
+  label?: string;
+  type: AgentVariableType;
+  required?: boolean;
+  description?: string;
+  /** Default value shown to the user; free-form string for the modal. */
+  defaultValue?: string;
+}
+
+/** A tool listing in the tool picker + attached-tools row. */
+export interface StudioTool {
+  name: string;
+  description?: string;
+  /** Group used to bucket tools in the picker (built-in / marketplace / mcp). */
+  category?: string;
+  /** Icon or emoji shown next to the name. */
+  icon?: string;
+  /** Total installs — used by Dify to sort by popularity. Optional. */
+  installs?: number;
+}
+
+/** An attached knowledge base (dataset) row. */
+export interface StudioKnowledge {
+  id: string;
+  name: string;
+  documentCount?: number;
+}
+
+/** One row in the model-select dropdown at the top of the orchestrate tab. */
+export interface StudioModelOption {
+  id: string;
+  label: string;
+  /** Optional provider hint (rendered as a subtle badge). */
+  provider?: string;
+}
+
+/** Message shown in the right-hand 调试与预览 chat log. */
+export interface StudioChatMessage {
+  role: 'assistant' | 'user';
+  content: string;
+  failed?: boolean;
+  steps?: Array<Record<string, unknown>>;
+}
+
+/** One row in the 日志与标注 table. */
+export interface StudioLogEntry {
+  id: string;
+  title: string;
+  endUser?: string;
+  status: 'FAILED' | 'PENDING' | 'SUCCESS';
+  messageCount?: number;
+  userFeedback?: string;
+  adminFeedback?: string;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+/** A single stat card on the 监测 dashboard. */
+export interface StudioMonitorMetric {
+  id: string;
+  title: string;
+  /** Big current-value shown at the top of the card. */
+  value: number | string;
+  /** Optional units — rendered inline after the value (e.g. "Token/秒"). */
+  unit?: string;
+  /** Optional hint text under the value (e.g. "总计 Token · ~$0.2659"). */
+  subtitle?: string;
+  /** Series of Y-values used to render the sparkline. */
+  series: number[];
+  /** X-axis labels aligned with series. */
+  labels?: string[];
+  /** Stroke color for the sparkline. */
+  color?: string;
+}

package/src/index.ts

@@ -0,0 +1,155 @@
+/**
+ * vue-agent-start — unified UI kit for spring-agent-start.
+ *
+ * All source lives under this one module. It absorbs what used to be four
+ * separate packages, now organised as sub-folders under `./`:
+ *
+ *   • provider-hub  — model provider gallery + credential mgmt + shared picker
+ *   • knowledge-hub — dataset CRUD + document ingest + recall testing
+ *   • agent-studio  — app list + Dify-parity 编排/API/日志/监测 editor
+ *   • agent-flow    — visual workflow / DAG designer for LLM nodes
+ *
+ * Style side-effects (knowledge-hub tokens, etc.) are imported eagerly so
+ * callers don't have to remember a separate `import 'vue-agent-start/style.css'`.
+ */
+
+// -----------------------------------------------------------------------------
+// Style tokens — the only side-effect import.
+// -----------------------------------------------------------------------------
+import './knowledge-hub/styles/index.css';
+
+// -----------------------------------------------------------------------------
+// provider-hub — model provider mgmt + shared model picker
+// -----------------------------------------------------------------------------
+export { default as CredentialForm } from './provider-hub/components/CredentialForm.vue';
+export { default as DefaultModelsPanel } from './provider-hub/components/DefaultModelsPanel.vue';
+export { default as ModelCardGrid } from './provider-hub/components/ModelCardGrid.vue';
+export { default as ModelParameterDrawer } from './provider-hub/components/ModelParameterDrawer.vue';
+export { default as ModelPickerPopover } from './provider-hub/components/ModelPickerPopover.vue';
+export { default as ProviderApp } from './provider-hub/components/ProviderApp.vue';
+export { default as ProviderCredentialModal } from './provider-hub/components/ProviderCredentialModal.vue';
+export { default as ProviderGallery } from './provider-hub/components/ProviderGallery.vue';
+export { default as ProviderHubShell } from './provider-hub/components/ProviderHubShell.vue';
+export { default as ProviderIcon } from './provider-hub/components/ProviderIcon.vue';
+
+export * from './provider-hub/composables/useProviderHub';
+export * from './provider-hub/types';
+
+// -----------------------------------------------------------------------------
+// knowledge-hub — dataset UI kit
+// -----------------------------------------------------------------------------
+export { default as KnowledgeApp } from './knowledge-hub/components/KnowledgeApp.vue';
+export { default as KnowledgeHubApp } from './knowledge-hub/components/KnowledgeHubApp.vue';
+export { default as CreateDatasetWizard } from './knowledge-hub/components/CreateDatasetWizard.vue';
+export { default as DatasetCardGrid } from './knowledge-hub/components/DatasetCardGrid.vue';
+export { default as DatasetDetailDrawer } from './knowledge-hub/components/DatasetDetailDrawer.vue';
+export { default as DatasetSettingsPanel } from './knowledge-hub/components/DatasetSettingsPanel.vue';
+export { default as DatasetSidebar } from './knowledge-hub/components/DatasetSidebar.vue';
+export { default as DocumentChunksView } from './knowledge-hub/components/DocumentChunksView.vue';
+export { default as DocumentTable } from './knowledge-hub/components/DocumentTable.vue';
+export { default as RecallTestingPanelV2 } from './knowledge-hub/components/RecallTestingPanelV2.vue';
+
+// Legacy widgets still used by /workflow KNOWLEDGE_RETRIEVAL node
+export { default as DatasetPicker } from './knowledge-hub/components/DatasetPicker.vue';
+export { default as DatasetPickerModal } from './knowledge-hub/components/DatasetPickerModal.vue';
+export { default as HitTestingPanel } from './knowledge-hub/components/HitTestingPanel.vue';
+export { default as RetrievedList } from './knowledge-hub/components/RetrievedList.vue';
+
+export { createSpringAgentStartAdapter } from './knowledge-hub/adapters/springAgentStart';
+export * from './knowledge-hub/composables/useKnowledge';
+export * from './knowledge-hub/types';
+
+// Shared retrieval-config UI — reusable outside the dataset drawer.
+export { default as RetrievalConfigPopover } from './knowledge-hub/components/RetrievalConfigPopover.vue';
+export { default as RetrievalMethodPicker } from './knowledge-hub/components/RetrievalMethodPicker.vue';
+
+// -----------------------------------------------------------------------------
+// agent-studio — app list + Dify-parity editor
+// -----------------------------------------------------------------------------
+export { default as AgentAppsPage } from './agent-studio/components/AgentAppsPage.vue';
+export { default as AgentCardGrid } from './agent-studio/components/AgentCardGrid.vue';
+export { default as AgentChatPage } from './agent-studio/components/AgentChatPage.vue';
+export { default as AppDesignDrawer } from './agent-studio/components/AppDesignDrawer.vue';
+export { default as CreateAppModal } from './agent-studio/components/CreateAppModal.vue';
+
+export { default as AgentApiDocs } from './agent-studio/components/AgentApiDocs.vue';
+export { default as AgentDebugPanel } from './agent-studio/components/AgentDebugPanel.vue';
+export { default as AgentLogsPanel } from './agent-studio/components/AgentLogsPanel.vue';
+export { default as AgentMonitorPanel } from './agent-studio/components/AgentMonitorPanel.vue';
+export { default as AgentOrchestrate } from './agent-studio/components/AgentOrchestrate.vue';
+export { default as AgentPromptEditor } from './agent-studio/components/AgentPromptEditor.vue';
+export { default as AgentStudioShell } from './agent-studio/components/AgentStudioShell.vue';
+export { default as AgentToolsPanel } from './agent-studio/components/AgentToolsPanel.vue';
+export { default as AgentVariablesPanel } from './agent-studio/components/AgentVariablesPanel.vue';
+export { default as SparkChart } from './agent-studio/components/SparkChart.vue';
+
+export * from './agent-studio/composables/useAgentStudio';
+export * from './agent-studio/types';
+
+// AgentStudioApi adapter used by AgentChatPage —— 只导 factory + 接口,
+// 避免 adapter 里重复定义的 AgentEntity/AgentStrategy/... 与 types.ts 冲突。
+export { createAgentStudioSpringBackend } from './agent-studio/adapters/springAgentStart';
+export type { AgentStudioApi } from './agent-studio/adapters/springAgentStart';
+
+// AppStudioApi + built-in panels (LogAnnotation, Monitor, DrawerFlowDesigner)
+// — a host can supply just the api callback bag and drop the drawer into a
+// page without importing individual panels.
+export * from './agent-studio/api';
+export { default as LogAnnotationPanel } from './agent-studio/panels/LogAnnotationPanel.vue';
+export { default as MonitorPanel } from './agent-studio/panels/MonitorPanel.vue';
+export { default as DrawerFlowDesigner } from './agent-studio/panels/DrawerFlowDesigner.vue';
+
+// -----------------------------------------------------------------------------
+// agent-flow — visual workflow designer
+//
+// Also re-exports the Vue plugin as a named `AgentFlowPlugin` — callers that
+// used `import AgentFlow from '@agent-start/agent-flow'; app.use(AgentFlow, …)`
+// switch to `import { AgentFlowPlugin } from 'vue-agent-start'; app.use(…)`.
+// -----------------------------------------------------------------------------
+import FlowDesigner from './agent-flow/workflow/FlowDesigner.vue';
+import NodeConfig from './agent-flow/workflow/NodeConfig.vue';
+import NodeConfigCard from './agent-flow/workflow/NodeConfigCard.vue';
+import CustomEdge from './agent-flow/workflow/CustomEdge.vue';
+import NodeHandle from './agent-flow/workflow/NodeHandle.vue';
+import Icon from './agent-flow/workflow/Icon.vue';
+
+import { useWorkflowStore } from './agent-flow/stores/workflow';
+import { provideBackend, type BackendAdapter } from './agent-flow/adapter/backend';
+
+import nodeCatalog from './agent-flow/workflow/utils/node_config';
+import nodeCardForm from './agent-flow/workflow/utils/node_card_form';
+import workflowUtils from './agent-flow/workflow/utils/workflow_utils';
+
+export {
+  FlowDesigner,
+  NodeConfig,
+  NodeConfigCard,
+  CustomEdge,
+  NodeHandle,
+  Icon,
+  useWorkflowStore,
+  provideBackend,
+  nodeCatalog,
+  nodeCardForm,
+  workflowUtils,
+};
+
+export type { BackendAdapter };
+
+export interface AgentFlowInstallOptions {
+  backend?: BackendAdapter;
+  registerGlobal?: boolean;
+}
+
+/** Vue plugin install for the workflow designer. */
+export const AgentFlowPlugin = {
+  install(app: import('vue').App, options: AgentFlowInstallOptions = {}) {
+    if (options.backend) {
+      provideBackend(app, options.backend);
+    }
+    if (options.registerGlobal !== false) {
+      app.component('FlowDesigner', FlowDesigner);
+      app.component('NodeConfigCard', NodeConfigCard);
+    }
+  },
+};