[frontend] 增加前端对话界面插件化功能

.github/workflows/app-platform-java-compile.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - 'main'
+      - 'develop'
     paths:
       - 'app-builder/**'
       - '!app-builder/fel/python/**'
@@ -17,6 +18,7 @@ on:
   pull_request:
     branches:
       - 'main'
+      - 'develop'
     paths:
       - 'app-builder/**'
       - '!app-builder/fel/python/**'

README.md

@@ -1,6 +1,6 @@
 # AppPlatform
 
-**AppPlatform 是一个前沿的大模型应用工程，旨在通过集成的声明式编程和低代码配置工具，简化和优化大模型的训练与推理应用的开发过程。本工程为软件工程师和产品经理提供一个强大的、可扩展的环境，以支持从概念到部署的全流程 AI 应用开发。**
+**AppPlatform 是一个前沿的大模型应用工程，旨在通过集成的声明式编程和低代码配置工具，简化 AI 应用的开发过程。本工程为软件工程师和产品经理提供一个强大的、可扩展的环境，以支持从概念到部署的全流程 AI 应用开发。**
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/license/MIT)
 [![JDK](https://img.shields.io/badge/JDK-17-green.svg)](https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.html)
 [![Node](https://img.shields.io/badge/node-20-red.svg)](https://nodejs.org/en/download)
@@ -24,6 +24,25 @@
 3. **共享与协作**： AppPlatform 的底层包含 Store 模版，用于将所有开发的 AI 应用统一存储，以此支持跨项目的复用和协作。开发者可以根据需要组合这些应用，打造更大的解决方案，或者利用社区提供的工具和模型。在 AppPlatform 中， AI 应用不仅限于传统意义上的 “应用”，它们可以是 “函数”、“RAG”、“智能体”等任何可解释和可执行的组件。这些组件在 Store 中以 “工具” 的形式展现，其元数据不仅提供了必要的解释，还为智能体自动调度这些工具提供了基础。
 
 ---------
+
+## 安装数据库
+
+### Windows 系统
+
+- 下载并安装 [PostgresSQL](https://www.postgresql.org/download/)
+- 初始化数据。进入 `shell` 目录，使用 `bash` 工具执行 `build_win.sh`（当前不支持 `cmd` 执行，待规划）：
+
+```
+cd shell
+sh build_win.sh ${ip} ${port} ${username} ${password}
+```
+
+其中参数 ip、port、username、password 分别指的是数据库主机地址、数据库端口、数据用户名、数据库密码。该文件会初始化数据库内置数据，以及人工表单功能所需的数据。
+
+### Linux 系统
+
+待规划
+
 ## 后端环境配置
 
 开发环境配置
@@ -32,7 +51,7 @@
 - Java 17
 - 代码格式化文件：[CodeFormatterFromIdea.xml](CodeFormatterFromIdea.xml)
 - `Maven` 配置：推荐版本 Maven 3.8.8+
-- FIT 框架编译产物（链接待补充）
+- FIT 框架编译产物：参考 [FIT 框架](https://github.com/ModelEngine-Group/fit-framework) 的`环境配置`构建编译产物
 
 **构建命令**
 
@@ -52,6 +71,39 @@ build/
 
 > 后端模块基于 [FIT](https://ModelEngine-Group/fit-framework) 框架，启动方式采用了 [FIT 动态插件](https://github.com/ModelEngine-Group/fit-framework/blob/main/docs/framework/fit/java/quick-start-guide/03.%20%E4%BD%BF%E7%94%A8%E6%8F%92%E4%BB%B6%E7%9A%84%E7%83%AD%E6%8F%92%E6%8B%94%E8%83%BD%E5%8A%9B.md) 方式。
 
+打开框架输出目录的 `conf/fitframework.yml` 文件，找到如下配置项
+
+```yml
+fit:
+  beans:
+    packages:
+    - 'modelengine.fitframework'
+    - 'modelengine.fit'
+```
+
+加入数据库配置项，修改后的配置项如下所示：
+
+```yml
+fit:
+  beans:
+    packages:
+    - 'modelengine.fitframework'
+    - 'modelengine.fit'
+  datasource:
+     primary: 'sample-datasource' # 表示所选用的示例数据源。
+     instances:
+        sample-datasource:
+           mode: 'shared' # 表示该数据源的模式，可选共享(shared)或独占(exclusive)模式。
+           url: 'jdbc:postgresql://${ip}:${port}/' # 将 ip 换成数据库服务器的 ip 地址，将 port 换成数据库服务器监听的端口。
+           username: '${username}' # 将 username 替换为数据库的名称。
+           password: '${password}' # 将 password 替换为数据库的密码。
+           druid:
+              initialSize: ${initialSize} # 将 initialSize 替换为连接池的初始化连接数。
+              minIdle: ${midIdle} # 将 minIdle 替换为连接池的最小空闲连接数。
+              maxActive: ${maxActive} # 将 maxActive 替换为数据库连接池的最大活动连接数。
+              # 可根据具体需求，添加连接池所需配置项。
+```
+
 **启动命令**
 
 ```
@@ -70,7 +122,22 @@ fit start -Dfit.profiles.active=prod
 
 - 环境要求：node.js  >= 20
 
+- ELSA 框架编译产物：参考 [ELSA](https://github.com/ModelEngine-Group/fit-framework/blob/main/framework/elsa/README.md) 的编译构建章节
+
+**修改 ELSA 依赖地址**
+
+进入目录 `app-engine\frontend` ，搜索 `package.json` 文件的 ELSA 依赖地址：
+
+```
+"dependencies": {
+    "@fit-elsa/elsa-core": "file:${fitElsaCoreUrl}",
+    "@fit-elsa/elsa-react": "file:${fitElsaReactUrl}",
+```
+
+将 `${fitElsaCoreUrl}` 和 `${fitElsaReactUrl}` 分别改成 `ELSA` 框架编译产物 `fit-elsa-core` 和 `fit-react` 的目录地址即可。
+
 **修改代理文件**
+
 修改 `AppPlatform/frontend` 目录下的 `proxy.config.json` 文件，可以修改需要访问的后端地址。如本地后端地址是 `http://127.0.0.1:8080` 。可以按照如下示例配置：
 
 ```json
@@ -89,13 +156,7 @@ fit start -Dfit.profiles.active=prod
 **依赖安装**
 
 ```
-cd framework/elsa/fit-elsa
-npm install
-npm run build:debug
-cd ../fit-elsa-react/
-npm install
-npm run build
-cd ../../../app-engine/frontend/
+cd app-engine/frontend/
 npm install
 ```
 
@@ -113,7 +174,19 @@ npm run start
 ---------
 ## 快速开始
 
-**待完善**
+**模型配置**
+
+在对话中使用大模型功能，需要对模型进行配置，包括大模型的地址和鉴权信息。
+首先在首页的`应用市场`一栏中找到 `模型配置应用`，并点击该应用。点击右上角`创意灵感` 的`开始配置`，如下图所示：
+![image-20250508203127410](doc\images\readme\model_config_inspiration.png)
+然后点击回答的 `添加模型` 按钮，输入模型名称、API Key 和模型地址，并点击确认。此时模型添加成功。
+
+**应用创建**
+
+在首页的`应用开发`一栏中点击`创建空白应用`。如下所示：
+![image-20250508204618312](doc\images\readme\app_create.png)
+输入所要创建的应用名称和简介，并点击 `创建`按钮，即可创建 AI 应用。接着在跳转后的应用配置页面上，在 `大模型` 一栏中选择自定义配置的模型。此时即可在对话框进行对话。如下所示：
+![image-20250508205124203](doc\images\readme\app_chat.png)
 
 ## 文档
 

app-builder/builtin/form/model-config-form/.gitignore

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

app-builder/builtin/form/model-config-form/.npmrc

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

app-builder/builtin/form/model-config-form/README.md

@@ -0,0 +1,173 @@
+# 画布 # 自定义组件开发说明
+
+## 前提条件
+
+* 开发工具建议使用 VSCode
+
+* 基础环境: Node.js 版本 >= 18, npm 版本 >= 10
+
+* React 组件建议使用 Ant Design (版本: 4.24.13)
+
+## 操作步骤
+
+### 约束条件
+
+上传的组件包必须是 zip 压缩包，解压后文件大小不得超过 5M，且必须包含三部分：
+
+* build 文件夹: 表单代码打包后的静态资源
+
+* config.json: 表单的输入输出参配置文件
+
+* form.jpg/png/jpeg: 表单预览图，大小不得超过 1M
+
+## 开发组件代码
+
+### 创建文件
+
+* 在 `/src/components` 目录下创建 `.tsx` 类型的组件文件
+
+### 表单获取流程数据
+
+用于初始化表单数据：
+
+```tsx
+const { data, terminateClick, resumingClick, restartClick } = useContext(DataContext);
+```
+
+`data` 为 json 数据，结构与 config.json 的输入参配置一致
+
+### 表单调用内置接口
+
+**1. 终止对话 `terminateClick()`**
+
+```tsx
+<Button onClick={onTerminateClick}>终止对话</Button>
+
+const onTerminateClick = () => {
+  terminateClick({ content: "终止会话" });
+}
+```
+
+**注意：结束节点不能调用 `terminateClick`**
+
+**2. 继续对话 `resumingClick()`**
+
+```tsx
+<Button onClick={onResumeClick}>继续对话</Button>
+
+const onResumeClick = () => {
+  resumingClick({ params: { a: "hello", b: 1 } });
+}
+```
+
+**注意：结束节点不能调用 `resumingClick`**
+
+**3. 重新对话 `restartClick()`**
+
+```tsx
+<Button onClick={onRestartClick}>重新对话</Button>
+
+const onRestartClick = () => {
+  restartClick({ params: { a: "hello", b: 1 } });
+}
+```
+
+**注意：如果在智能表单节点使用，需先调 `terminateClick` 再 `restartClick`**
+
+### 调用外部接口
+
+* 要求接口支持跨域
+
+### 使用图片
+
+* 图片文件放在 `/src/assets/images`
+
+* 路径: `./src/assets/images/xxx.png`
+
+```tsx
+<img src="./src/assets/images/empty.png" alt="" height="100px" width="100px"/>
+```
+
+### 表单样式文件
+
+* 可以在 `/src/styles` 目录下添加 `.scss` 样式文件
+
+### 调试表单
+
+```bash
+npm install
+npm start
+```
+
+* 模拟数据 `app.tsx`:
+
+```ts
+receiveData: {
+  data: { a: "你好", b: "Demo1" },
+  uniqueId: 10,
+  origin: "http://127.0.0.1:3350",
+  tenantId: "fh47kl"
+}
+```
+
+### 打包
+
+```bash
+npm run build
+```
+
+## 表单输入输出参 config.json
+
+### 基础规范
+
+* 格式需符合[json schema规范](https://json-schema.apifox.cn/)
+
+* 格式示例：
+
+```json
+{
+  "schema": {
+    "parameters": {
+      "type": "object",
+      "required": ["a", "b"],
+      "properties": {
+        "a": { "type": "string", "default": "haha" },
+        "b": { "type": "string", "default": "heihei" }
+      }
+    },
+    "return": {
+      "type": "object",
+      "properties": {
+        "a": { "type": "string" },
+        "b": { "type": "string" }
+      }
+    }
+  }
+}
+```
+
+* 最外层 `parameters` 字段是入参，入参第一层必须 `type` 为 `object`。
+
+* 必须包含 `name`，支持中文、英文、数字、空格、中划线、下划线组合。
+
+* 可以包含 `description`，对参数进行描述。
+
+* 必须包含 `parameters`。
+
+* 必须包含 `required`，内容不可以为 `properties` 下参数名之外的参数名。
+
+* 可以包含 `order`，若写必须为 `properties` 下所有参数名的列表；若不写，则默认按照 `properties` 下所有参数名的顺序。
+
+* 必须包含 `return`，`return` 字段是出参。
+
+## 表单预览图
+
+* 名称: form.jpg/png/jpeg
+
+* 大小: 不超过 1M
+
+## 打包规则
+
+* 包含 build/、config.json、form.png
+
+* 将build文件夹、config.json、form.png打成zip压缩包，压缩包名称支持大小写英文、中文和数字的字符串,可以包含中划线(-)和下划线(_),但不能以中划线(-)和下划线(_)开头或结尾。

app-builder/builtin/form/model-config-form/config.json

@@ -0,0 +1,48 @@
+{
+  "schema": {
+    "name": "模型管理表单",
+    "parameters": {
+      "type": "object",
+      "required": ["models"],
+      "properties": {
+        "models": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "createdAt": { "type": "string" },
+              "modelName": { "type": "string" },
+              "modelId": { "type": "string" },
+              "baseUrl": { "type": "string" },
+              "isDefault": { "type": "integer" },
+              "userId": { "type": "string" }
+            },
+            "required": ["modelId", "isDefault", "userId"]
+          }
+        }
+      }
+    },
+    "return": {
+      "type": "object",
+      "properties": {
+        "action": {
+          "type": "string",
+          "enum": ["add", "delete", "switch", "quit"]
+        },
+        "info": {
+          "type": "object",
+          "properties": {
+            "modelName": { "type": "string" },
+            "modelId": { "type": "string" },
+            "baseUrl": { "type": "string" },
+            "isDefault": { "type": "integer" },
+            "userId": { "type": "string" },
+            "apiKey": { "type": "string" }
+          },
+          "required": ["modelName", "modelId", "baseUrl", "isDefault", "userId", "apiKey"]
+        }
+      },
+      "required": ["action", "info"]
+    }
+  }
+}