vue-agent-start 0.1.0

package/src/agent-flow/components/VariableCard.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue';
+
+import { Input } from 'ant-design-vue';
+
+interface Parameter {
+  name: string;
+  type: string;
+  description?: string;
+}
+
+interface Props {
+  parameters?: Parameter[];
+  visible?: boolean;
+  position?: { x: number; y: number };
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  parameters: () => [],
+  visible: false,
+  position: () => ({ x: 0, y: 0 }),
+});
+
+const emit = defineEmits<{
+  close: [];
+  parameterSelect: [parameter: string];
+}>();
+
+const searchKeyword = ref('');
+const quickPanelInputRef = ref<HTMLInputElement>();
+
+// 过滤后的参数列表
+const filteredParameters = computed(() => {
+  if (!searchKeyword.value) {
+    return props.parameters;
+  }
+  return props.parameters.filter(
+    (param) =>
+      param.name?.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
+      param.type?.toLowerCase().includes(searchKeyword.value.toLowerCase()),
+  );
+});
+
+// 选择参数
+const selectParameter = (parameter: any) => {
+  emit('parameterSelect', parameter);
+};
+
+// 关闭面板
+const closePanel = () => {
+  searchKeyword.value = '';
+  emit('close');
+};
+
+// 当面板显示时聚焦搜索框
+const focusSearch = () => {
+  nextTick(() => {
+    quickPanelInputRef.value?.focus();
+  });
+};
+
+// 监听面板显示状态
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) {
+      searchKeyword.value = '';
+      focusSearch();
+    }
+  },
+);
+
+defineExpose({
+  focusSearch,
+});
+</script>
+
+<template>
+  <div
+    v-if="visible"
+    class="quick-panel fixed z-50 rounded-lg border border-gray-200 bg-white shadow-xl"
+    :style="{
+      left: `${position.x}px`,
+      top: `${position.y}px`,
+      transform: 'translateX(-50%)',
+      minWidth: '320px',
+      maxWidth: '400px',
+    }"
+  >
+    <div class="p-4">
+      <!-- 搜索框 -->
+      <div class="mb-3">
+        <Input
+          ref="quickPanelInputRef"
+          v-model:value="searchKeyword"
+          placeholder="🔍 搜索参数..."
+          size="small"
+          class="rounded-md border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+          @keydown.enter.prevent
+          @keydown.escape="closePanel"
+        />
+      </div>
+
+      <!-- 参数列表 -->
+      <div class="max-h-64 overflow-y-auto">
+        <div
+          v-if="filteredParameters.length === 0"
+          class="flex flex-col items-center justify-center py-8 text-gray-500"
+        >
+          <div class="mb-2 text-3xl">📝</div>
+          <div class="text-sm">
+            {{ searchKeyword ? '未找到匹配的参数' : '暂无参数' }}
+          </div>
+        </div>
+        <div v-else class="space-y-1">
+          <div
+            v-for="parameter in filteredParameters"
+            :key="parameter.name"
+            class="group flex cursor-pointer items-center justify-between rounded-lg border border-transparent p-3 transition-all duration-200 hover:border-blue-200 hover:bg-blue-50"
+            @click="selectParameter(parameter)"
+            @mousedown.prevent
+          >
+            <div class="flex-1">
+              <div class="flex items-center space-x-2">
+                <div
+                  class="text-sm font-semibold text-gray-800 group-hover:text-blue-700"
+                >
+                  {{ parameter.name }}
+                </div>
+                <div
+                  class="rounded-full bg-gray-100 px-2 py-1 text-xs text-gray-600 group-hover:bg-blue-100 group-hover:text-blue-600"
+                >
+                  {{ parameter.type }}
+                </div>
+              </div>
+              <div
+                v-if="parameter.description"
+                class="mt-1 text-xs text-gray-500"
+              >
+                {{ parameter.description }}
+              </div>
+            </div>
+            <div class="ml-2 text-xs text-gray-400 group-hover:text-blue-500">
+              ↩ 插入
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 提示信息 -->
+      <div
+        class="mt-4 flex items-center justify-between border-t border-gray-100 pt-3 text-xs text-gray-400"
+      >
+        <span>按 "/" 快速打开面板</span>
+        <span>按 "Esc" 关闭</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

package/src/agent-flow/components/VariableSelector.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { LinkOutlined } from '@ant-design/icons-vue';
+
+import PromptEditorTagPanel from '@/components/PromptEditorTagPanel.vue';
+import workflow_utils from '@/workflow/utils/workflow_utils';
+
+interface Props {
+  nodeId: string;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: '选择变量',
+  disabled: false,
+});
+
+const model: any = defineModel();
+
+const targetElement = ref<HTMLElement | null>(null);
+const showPanel = ref<boolean>(false);
+
+const label = computed(() =>
+  model.value && model.value.length > 0
+    ? workflow_utils.getVariableLabel(model.value)
+    : '',
+);
+
+const openPanel = (event: MouseEvent) => {
+  if (props.disabled) return;
+  targetElement.value = event.currentTarget as HTMLElement;
+  showPanel.value = true;
+};
+
+const closePanel = () => {
+  showPanel.value = false;
+};
+
+const selectAttr = (variableSelector: any) => {
+  model.value = variableSelector;
+  showPanel.value = false;
+};
+
+const clear = (e: MouseEvent) => {
+  e.stopPropagation();
+  model.value = [];
+};
+</script>
+
+<template>
+  <div class="wf-var-selector">
+    <div
+      ref="targetElement"
+      class="wf-var-selector-trigger"
+      :class="{ 'is-disabled': disabled, 'has-value': label }"
+      @click="openPanel"
+    >
+      <template v-if="label">
+        <LinkOutlined class="wf-var-selector-icon" />
+        <span class="wf-var-selector-value" :title="label">{{ label }}</span>
+        <span
+          v-if="!disabled"
+          class="wf-var-selector-clear"
+          @click="clear"
+        >
+          ×
+        </span>
+      </template>
+      <template v-else>
+        <LinkOutlined class="wf-var-selector-icon" />
+        <span class="wf-var-selector-placeholder">{{ placeholder }}</span>
+      </template>
+    </div>
+
+    <PromptEditorTagPanel
+      :show="showPanel"
+      :target-element="targetElement"
+      :node-id="nodeId"
+      @close="closePanel"
+      @select="selectAttr"
+    />
+  </div>
+</template>
+
+<style scoped>
+.wf-var-selector {
+  width: 100%;
+}
+
+.wf-var-selector-trigger {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  min-height: 28px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.wf-var-selector-trigger:hover:not(.is-disabled) {
+  border-color: #6366f1;
+  background: #fafbff;
+}
+
+.wf-var-selector-trigger.has-value {
+  background: #eef2ff;
+  border-color: #c7d2fe;
+}
+
+.wf-var-selector-trigger.is-disabled {
+  cursor: not-allowed;
+  background: #f9fafb;
+  color: #9ca3af;
+}
+
+.wf-var-selector-icon {
+  flex: none;
+  font-size: 12px;
+  color: #6366f1;
+}
+
+.wf-var-selector-value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  color: #4338ca;
+  font-weight: 500;
+}
+
+.wf-var-selector-placeholder {
+  flex: 1;
+  font-size: 12px;
+  color: #9ca3af;
+}
+
+.wf-var-selector-clear {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  line-height: 1;
+  color: #6366f1;
+  border-radius: 50%;
+  transition: background 0.15s;
+}
+
+.wf-var-selector-clear:hover {
+  background: #c7d2fe;
+  color: #1e1b4b;
+}
+</style>

package/src/agent-flow/components/chat-iframe-types.ts

@@ -0,0 +1,35 @@
+/**
+ * ChatIframePanel 相关的共享类型。抽出成独立 .ts 文件，
+ * 让 `.vue` 消费方能通过 `import type` 拿到（`<script setup>` 里的 export
+ * 无法被外部再导出，独立 ts 才能被 `export type ... from './x'` 转发）。
+ */
+
+/** 一个可填写的调试变量 —— 与 START 节点 variables / AgentVariable 兼容 */
+export interface ChatDebugVariable {
+  /** 参数键；写入 Dify inputs 时用这个名字 */
+  name: string;
+  /** 显示名 —— 不填走 name */
+  label?: string;
+  /** string / number / boolean / object / array / file；未识别按 string 处理 */
+  type?: string;
+  required?: boolean;
+  description?: string;
+  /** 默认值（string / number / boolean 生效；object/array 会尝试 JSON.parse） */
+  defaultValue?: unknown;
+  /** enum 类型的可选项（预留） */
+  options?: Array<{ label: string; value: string }>;
+}
+
+/** 承载给 FlowDesigner / AppDesignDrawer 的调试 iframe 配置 */
+export interface ChatIframeConfig {
+  /** iframe 基础 URL；例如 `/chat/` 或 `http://localhost:5073/chat/` */
+  src: string;
+  /** 附加到 URL 的查询参数（difyApiKey / label 等） */
+  params?: Record<string, boolean | number | string | null | undefined>;
+  /** postMessage 下发给 iframe 的业务上下文 */
+  context?: Record<string, unknown>;
+  /** 顶部标题 */
+  title?: string;
+  /** localStorage 命名空间；不填自动生成 */
+  sessionKey?: string;
+}

package/src/agent-flow/components/stubs/DatasetChooser.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+/**
+ * Thin adapter between DatasetItemCard's imperative
+ * {@code showModal()} / {@code formSubmit} API and the shared
+ * {@link DatasetPickerModal}. Historically this file was a stand-alone stub
+ * that admitted "please replace me" — now the real picker lives in the
+ * knowledge-hub module and both the workflow KNOWLEDGE_RETRIEVAL node and the
+ * agent-studio 编排 knowledge card share the same UX.
+ */
+import { computed, ref } from 'vue';
+
+import DatasetPickerModal from '../../../knowledge-hub/components/DatasetPickerModal.vue';
+import type { DatasetSummary } from '../../../knowledge-hub/types';
+
+interface DatasetLike {
+  id: string;
+  name: string;
+  [key: string]: unknown;
+}
+
+const props = defineProps<{
+  /** Currently selected dataset objects (id + name at minimum). */
+  mainData?: DatasetLike[];
+  /** Optional tenant filter passed through to the catalog fetch. */
+  tenantId?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'formSubmit', datasets: DatasetLike[]): void;
+}>();
+
+const open = ref(false);
+
+const initialSelectedIds = computed(() =>
+  (props.mainData ?? []).map((d) => d.id).filter((id): id is string => !!id),
+);
+
+function showModal() {
+  open.value = true;
+}
+function hideModal() {
+  open.value = false;
+}
+
+function onPicked(datasets: DatasetSummary[]) {
+  // Preserve any callsite-specific fields (e.g. custom rerank overrides
+  // stashed on the row) by merging over the previous selection when the id
+  // matches, otherwise drop through with just the wire fields.
+  const prev = new Map(
+    (props.mainData ?? []).map((d) => [d.id, d] as const),
+  );
+  const merged: DatasetLike[] = datasets.map((d) => ({
+    ...(prev.get(d.id) ?? {}),
+    id: d.id,
+    name: d.name,
+  }));
+  emit('formSubmit', merged);
+}
+
+defineExpose({ showModal, hideModal });
+</script>
+
+<template>
+  <DatasetPickerModal
+    v-model:open="open"
+    :initial-selected-ids="initialSelectedIds"
+    :tenant-id="tenantId"
+    @submit="onPicked"
+  />
+</template>

package/src/agent-flow/components/stubs/Embedding.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{ modelValue?: any }>();
+</script>
+
+<template>
+  <div class="agent-flow-stub">
+    <slot>
+      <span class="agent-flow-stub__hint">[Embedding stub — 请注入实现]</span>
+    </slot>
+  </div>
+</template>
+
+<style scoped>
+.agent-flow-stub {
+  display: inline-block;
+  padding: 4px 8px;
+  border: 1px dashed #d1d5db;
+  border-radius: 4px;
+  color: #6b7280;
+  font-size: 12px;
+}
+</style>

package/src/agent-flow/components/stubs/ModelSelect.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps<{ modelValue?: any; modelType?: string }>();
+defineEmits<{ (e: 'update:modelValue', v: any): void; (e: 'change', v: any): void }>();
+defineExpose({ showModal: () => {}, hideModal: () => {} });
+</script>
+
+<template>
+  <div class="agent-flow-stub">
+    <slot>
+      <span class="agent-flow-stub__hint">[ModelSelect stub — 请注入实现]</span>
+    </slot>
+  </div>
+</template>
+
+<style scoped>
+.agent-flow-stub {
+  display: inline-block;
+  padding: 4px 8px;
+  border: 1px dashed #d1d5db;
+  border-radius: 4px;
+  color: #6b7280;
+  font-size: 12px;
+}
+</style>

package/src/agent-flow/components/stubs/RestfulSelectCard.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps<{ mainData?: any }>();
+defineEmits<{ (e: 'formSubmit', v: any): void }>();
+defineExpose({ showModal: () => {}, hideModal: () => {} });
+</script>
+
+<template>
+  <div class="agent-flow-stub">
+    <slot>
+      <span class="agent-flow-stub__hint">[RestfulSelectCard stub — 请注入实现]</span>
+    </slot>
+  </div>
+</template>
+
+<style scoped>
+.agent-flow-stub {
+  display: inline-block;
+  padding: 4px 8px;
+  border: 1px dashed #d1d5db;
+  border-radius: 4px;
+  color: #6b7280;
+  font-size: 12px;
+}
+</style>

package/src/agent-flow/components/stubs/ToolChooser.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { ToolOutlined } from '@ant-design/icons-vue';
+
+const emit = defineEmits<{ (e: 'formSubmit', v: any): void }>();
+
+const open = ref(false);
+const form = ref({ name: '', description: '' });
+
+function showModal() {
+  form.value = { name: '', description: '' };
+  open.value = true;
+}
+
+function hideModal() {
+  open.value = false;
+}
+
+function submit() {
+  emit('formSubmit', { ...form.value, id: Date.now() });
+  open.value = false;
+}
+
+defineExpose({ showModal, hideModal });
+</script>
+
+<template>
+  <a-modal
+    v-model:open="open"
+    title="添加工具"
+    width="480px"
+    ok-text="添加"
+    cancel-text="取消"
+    @ok="submit"
+  >
+    <div class="wf-tool-chooser">
+      <div class="wf-tool-chooser-hint">
+        当前是基础实现。真实场景下应对接后端 ToolService，展示 tool 分类
+        列表并支持授权配置。
+      </div>
+
+      <a-form layout="vertical" :model="form">
+        <a-form-item label="工具名" required>
+          <a-input
+            v-model:value="form.name"
+            placeholder="例如 get_weather"
+          />
+        </a-form-item>
+        <a-form-item label="描述">
+          <a-textarea
+            v-model:value="form.description"
+            placeholder="给模型看的描述，告诉它这个工具能干什么"
+            :auto-size="{ minRows: 3, maxRows: 6 }"
+          />
+        </a-form-item>
+      </a-form>
+
+      <div class="wf-tool-chooser-preview">
+        <ToolOutlined style="color: #7c3aed; font-size: 24px" />
+        <div>
+          <div style="font-weight: 500">{{ form.name || '未命名工具' }}</div>
+          <div style="font-size: 11px; color: #6b7280">
+            {{ form.description || '尚未填写描述' }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<style scoped>
+.wf-tool-chooser {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-top: 8px;
+}
+
+.wf-tool-chooser-hint {
+  padding: 8px 12px;
+  font-size: 12px;
+  color: #92400e;
+  background: #fef3c7;
+  border-radius: 6px;
+}
+
+.wf-tool-chooser-preview {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: #f3e8ff;
+  border-radius: 6px;
+}
+</style>