[app-platform] add agent flow module

agent-flow/.eslintrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

agent-flow/.gitignore

@@ -0,0 +1,3 @@
+package-lock.json
+node_modules/
+build/

agent-flow/.npmrc

@@ -0,0 +1,3 @@
+strict-ssl=false
+package-lock=true # 启用lockfiles
+registry=https://registry.npmjs.org/

agent-flow/README.md

@@ -0,0 +1,154 @@
+# @fit-elsa/agent-flow
+
+## 简介
+
+@fit-elsa/agent-flow 是基于React的前端应用模块，为 @fit-elsa/elsa 核心框架提供React封装和UI组件。
+
+## 功能亮点
+
+### 集成React能力
+- 基于Context的上下文传递
+- 节点渲染缓存：React.memo + 自定义shouldComponentUpdate
+
+### 集成Ant Design能力
+- 基于Form组件的实时校验提示系统
+- 基于Tree组件封装的节点上下文观察者机制
+
+## 安装
+
+```bash
+npm install @fit-elsa/agent-flow @fit-elsa/elsa
+```
+
+## 快速开始
+
+### 基本用法
+
+```jsx
+import React from 'react';
+import { JadeFlow, createGraphOperator } from '@fit-elsa/agent-flow';
+
+function MyFlowApp() {
+  // 创建图形操作器
+  const graphOperator = createGraphOperator();
+
+  // 处理图形数据变更
+  const handleGraphChange = (graphData) => {
+    console.log('图形数据已变更:', graphData);
+  };
+
+  return (
+    <div style={{ width: '100%', height: '100vh' }}>
+      <JadeFlow
+        graphOperator={graphOperator}
+        onGraphChange={handleGraphChange}
+        height={600}
+        width={800}
+      />
+    </div>
+  );
+}
+
+export default MyFlowApp;
+```
+
+### 多会话示例
+
+```jsx
+import React, { useState } from 'react';
+import { MultiConversation, MultiConversationContent } from '@fit-elsa/agent-flow';
+
+function MultiConvApp() {
+  const [selectedConversation, setSelectedConversation] = useState(null);
+
+  const conversations = [
+    { id: '1', title: '会话 1', content: '这是第一个会话的内容' },
+    { id: '2', title: '会话 2', content: '这是第二个会话的内容' }
+  ];
+
+  return (
+    <div style={{ display: 'flex', height: '100vh' }}>
+      <div style={{ width: '300px', borderRight: '1px solid #ccc' }}>
+        <MultiConversation
+          conversations={conversations}
+          onSelectConversation={setSelectedConversation}
+          selectedConversationId={selectedConversation?.id}
+        />
+      </div>
+      <div style={{ flex: 1, padding: '20px' }}>
+        {selectedConversation && (
+          <MultiConversationContent
+            conversation={selectedConversation}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default MultiConvApp;
+```
+
+## 组件API
+
+### JadeFlow
+
+主要的流程图组件，用于显示和编辑流程图。
+
+**属性**:
+- `graphOperator`: 图形操作器实例
+- `onGraphChange`: 图形数据变更时的回调函数
+- `height`: 流程图高度
+- `width`: 流程图宽度
+- `readOnly`: 是否只读模式
+- `locale`: 语言设置
+
+### MultiConversation
+
+多会话列表组件，用于显示和选择多个会话。
+
+**属性**:
+- `conversations`: 会话列表数据
+- `onSelectConversation`: 选择会话时的回调函数
+- `selectedConversationId`: 当前选中的会话ID
+
+### MultiConversationContent
+
+会话内容组件，用于显示选中会话的详细内容。
+
+**属性**:
+- `conversation`: 会话对象数据
+
+### createGraphOperator
+
+创建图形操作器的函数，用于管理图形数据和操作。
+
+## 开发
+
+### 构建命令
+
+```bash
+# 安装依赖
+npm install
+
+# 启动开发服务器
+npm run dev
+
+# 构建生产版本
+npm run build
+
+# 预览生产版本
+npm run preview
+```
+
+## 许可证
+
+MIT License
+
+## 版权
+
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) 2025 Huawei Technologies Co., Ltd. All rights reserved.
+ *  This file is a part of the ModelEngine Project.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/

agent-flow/docs/features/llm-tool-detail-view.md

@@ -0,0 +1,173 @@
+# 大模型节点工具详情查看功能
+
+## 功能概述
+
+为大模型节点的工具卡片添加了查看详情功能，用户可以点击眼睛图标跳转到对应工具流的详情页面。
+
+## 实现细节
+
+### 1. 数据存储
+
+在选择工具时，系统会自动提取并存储以下信息：
+- **appId**: 从 `selectedData.runnables.APP.appId` 提取
+- **tenantId**: 从 `selectedData.schema.parameters.properties.tenantId.default` 提取
+
+这些信息会保存在 `tools` 的 `value` 数组中，每个工具项包含 `appId` 和 `tenantId` 字段。
+
+### 2. UI 增强
+
+每个工具卡片显示：
+- **工具图标** (左侧)
+- **工具名称和类型** (中间)
+- **版本号** (右侧)
+- **眼睛图标** (右侧，仅当存在 appId 和 tenantId 时显示) - 用于查看详情
+- **删除图标** (最右侧)
+
+眼睛图标按钮特性：
+- **仅在工具包含 appId 和 tenantId 时显示**
+- 鼠标悬停时显示"工具详情"提示
+- 在禁用状态下不可点击
+- 点击时不会触发父元素的点击事件
+
+### 3. 跳转逻辑
+
+点击眼睛图标时：
+1. 从工具配置中获取 `appId` 和 `tenantId`
+2. 从 graph configs 中获取 `endpoint` 配置（如果未配置，使用当前域名）
+3. 构建跳转 URL: `{endpoint}/app-develop/{tenantId}/add-flow/${appId}?type=workFlow`
+4. 在新标签页中打开目标页面
+
+### 4. 配置说明
+
+如果需要自定义 endpoint，可以在 configs 中配置：
+
+```javascript
+configs.push({
+  node: 'llmNodeState',
+  urls: {
+    endpoint: 'https://your-domain.com'
+  }
+});
+```
+
+如果未配置 endpoint，系统会自动使用 `window.location.origin`。
+
+## 修改文件列表
+
+1. **SkillForm.jsx**
+   - 导入 `EyeOutlined` 图标
+   - 在 `onSelect` 中提取 `appId` 和 `tenantId`
+   - 添加 `handleViewDetails` 函数实现跳转逻辑
+   - 添加 `renderViewIcon` 函数渲染眼睛图标（包含条件判断）
+   - 在工具卡片上显示眼睛图标
+
+2. **LlmFormWrapper.jsx**
+   - 在 `processToolData` 函数中，从 `tool.value` 获取 `appId` 和 `tenantId`
+   - 将 `appId` 和 `tenantId` 添加到 `toolOptions` 中
+
+3. **reducers/reducers.js**
+   - 更新 `AddSkillReducer` 中的 `newSkill` 对象
+   - 将 `appId` 和 `tenantId` 作为新的字段存储
+
+## 数据结构
+
+大模型节点中的工具数据结构示例：
+
+```javascript
+{
+  inputParams: [
+    {
+      name: "tools",
+      value: [
+        {
+          id: "uuid",
+          type: "String",
+          from: "Input",
+          value: "tool-unique-name",
+          appId: "app-123",      // 新增
+          tenantId: "tenant-456", // 新增
+          name: "工具名称",       // updateTools 时更新
+          tags: ["TOOL"],         // updateTools 时更新
+          version: "1.0.0"        // updateTools 时更新
+        }
+      ]
+    }
+  ]
+}
+```
+
+## 工作流程
+
+1. **用户选择工具**: 用户点击"添加技能"按钮选择工具
+2. **数据提取**: `onSelect` 回调从选择的数据中提取 `appId` 和 `tenantId`
+3. **数据存储**: `AddSkillReducer` 将工具信息（包括 `appId` 和 `tenantId`）存储到 config 中
+4. **获取详情**: `getSkillInfo` 函数从后端获取工具的详细信息（名称、标签、版本等）
+5. **构建选项**: `processToolData` 函数构建 `toolOptions`，同时保留 `appId` 和 `tenantId`
+6. **更新显示**: `updateTools` reducer 更新工具的显示信息
+7. **渲染卡片**: `SkillContent` 组件渲染工具卡片，包括眼睛图标（如果有 `appId` 和 `tenantId`）
+
+## 注意事项
+
+1. **眼睛图标显示条件**: 只有当工具同时包含 `appId` 和 `tenantId` 信息时，才会显示眼睛图标
+2. **老数据兼容**: 对于不包含 `appId` 和 `tenantId` 的老数据，不显示眼睛图标，只显示工具名称、版本和删除功能
+3. 跳转在新标签页中打开，不影响当前编辑状态
+4. 即使没有配置 endpoint，系统也会使用当前域名作为默认值
+5. 工具信息通过 `getSkillInfo` 从后端获取，`appId` 和 `tenantId` 从本地 config 中保留
+
+## 兼容性
+
+- 不会影响现有功能
+- 对于不包含 `appId` 和 `tenantId` 的旧数据，不显示眼睛图标，工具卡片正常显示所有其他功能
+- 所有更改向后兼容，老数据可以正常使用
+- 与循环节点和并行节点的实现保持一致，使用相同的数据提取逻辑
+
+## 与其他节点的对比
+
+| 特性 | 循环节点 | 并行节点 | 大模型节点 |
+|------|---------|---------|-----------|
+| 数据提取 | 相同 | 相同 | 相同 |
+| 存储位置 | toolInfo 对象 | plugin.value 数组 | tools.value 数组 |
+| 显示位置 | 工具卡片右侧 | 折叠面板 header | 工具卡片右侧 |
+| 跳转逻辑 | 相同 | 相同 | 相同 |
+| 配置节点名 | loopNodeState | parallelNodeState | llmNodeState |
+| 额外处理 | - | - | 需要通过 getSkillInfo 获取工具详情 |
+
+## 使用示例
+
+```javascript
+// 用户选择工具时，系统会自动提取数据
+{
+  uniqueName: "my-tool",
+  name: "我的工具",
+  tags: ["WATER_FLOW"],
+  version: "1.0.0",
+  runnables: {
+    APP: {
+      appId: "app-123"
+    }
+  },
+  schema: {
+    parameters: {
+      properties: {
+        tenantId: {
+          default: "tenant-456"
+        }
+      }
+    }
+  }
+}
+
+// 存储后的数据结构
+{
+  id: "uuid",
+  type: "String",
+  from: "Input",
+  value: "my-tool",
+  appId: "app-123",
+  tenantId: "tenant-456"
+}
+
+// 点击眼睛图标后跳转到
+// https://your-domain.com/app-develop/tenant-456/add-flow/app-123?type=workFlow
+```
+