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

Author: wjn1584

app-engine/frontend/.gitignore

@@ -1,3 +1,8 @@
 package-lock.json
 node_modules/
 build/
+packages/
+plugins/*
+!plugins/manifest.json
+!plugins/plugin.sh
+!plugins/plugin.js

app-engine/frontend/package.json

@@ -6,8 +6,11 @@
   "scripts": {
     "start": "webpack serve --progress --profile --mode development --host localhost --port 3310 --config webpack.dev.js",
     "start:single": "webpack serve --config webpack.dev.single.js",
-    "build:prod": "webpack --mode production --config webpack.prod.js",
-    "build:single": "webpack --mode production  --config webpack.prod.single.js"
+    "start:plugin": "bash ./plugins/plugin.sh && npm run start",
+    "build:prod": "npm run build:plugin:prod && webpack --mode production --config webpack.prod.js",
+    "build:single": "npm run build:plugin:single  && webpack --mode production  --config webpack.prod.single.js",
+    "build:plugin:prod": "bash ./plugins/plugin.sh prod",
+    "build:plugin:single": "bash ./plugins/plugin.sh prod spa"
   },
   "license": "ISC",
   "devDependencies": {

app-engine/frontend/plugins/manifest.json

@@ -0,0 +1 @@
+[]

app-engine/frontend/plugins/plugin.js

@@ -0,0 +1,48 @@
+/*---------------------------------------------------------------------------------------------
+ *  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.
+ *--------------------------------------------------------------------------------------------*/
+
+const fs = require('fs');
+
+function ensure(fileName) {
+  if (!fs.existsSync(fileName)) {
+    fs.writeFileSync(fileName, '[]', { encoding: 'utf8' });
+  }
+}
+
+function read(fileName) {
+  return fs.readFileSync(fileName, 'utf8');
+}
+
+function write(fileName, content, appendContent = '') {
+  if (!appendContent) return;
+  try {
+    const array = JSON.parse(content || '[]');
+    const appendItem = JSON.parse(appendContent);
+
+    // 不存在时新增，存在时更新
+    const found = array.find(item => item.name === appendItem.name);
+    if (!found) {
+      array.push(appendItem)
+    } else {
+      Object.assign(found, appendItem);
+    }
+
+    fs.writeFileSync(fileName, JSON.stringify(array, null, 2), { encoding: 'utf8' });
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+function main() {
+  const args = process.argv.slice(2);
+  const content = args[0] || '';
+  const fileName = args[1] || './manifest.json';
+
+  ensure(fileName);
+  write(fileName, read(fileName), content);
+}
+
+main();

app-engine/frontend/plugins/plugin.sh

@@ -0,0 +1,97 @@
+#！/bin/bash
+#set -x
+
+ENV=$1
+MODE=$2
+PLUGIN_NAME=$3
+CODE_URL=$4
+CODE_BRANCH=$5
+
+PLUGIN_URL=""
+PLUGIN_ICON=""
+PLUGIN_DEV_URL="http://localhost:3099/#/chat?sidebar=0"
+if [ "$MODE" = "spa" ]; then
+  PLUGIN_PROD_URL="/apps/appengine/plugins/$PLUGIN_NAME/index.html#/chat?sidebar=0"
+else
+  PLUGIN_PROD_URL="/plugins/$PLUGIN_NAME/index.html#/chat?sidebar=0"
+fi
+WORKSPACE=packages
+
+cd_workspace() {
+  if [ ! -d $WORKSPACE ]; then
+    mkdir $WORKSPACE
+  fi
+  cd ./$WORKSPACE
+  pwd
+}
+
+# 下载插件代码，或者更新代码
+clone_repo() {
+#   if [ -d $PLUGIN_NAME ]; then
+#     cd $PLUGIN_NAME
+#     git pull
+#     cd ..
+#   else
+#     git clone $CODE_URL --branch $CODE_BRANCH $PLUGIN_NAME
+#     cd $PLUGIN_NAME
+#   fi
+  cd $PLUGIN_NAME
+}
+
+# 安装插件依赖
+install_dep() {
+  npm cache clean -f
+  npm install --legacy-peer-deps --registry=https://registry.npmmirror.com
+}
+
+# 本地运行
+run_start() {
+  PLUGIN_URL=$PLUGIN_DEV_URL
+
+  if [[ $MODE = "spa" ]]; then
+    start cmd /k "npm run start:spa"
+  else
+    start cmd /k "npm run start"
+  fi
+
+  PLUGIN_ICON=""
+}
+
+# 生产构建
+run_build() {
+  PLUGIN_URL=$PLUGIN_PROD_URL
+
+  if [[ $MODE = "spa" ]]; then
+    npm run build:single
+  else
+    npm run build
+  fi
+
+  PLUGIN_ICON="/apps/appengine/plugins/$PLUGIN_NAME/icon.jpg"
+}
+
+# 安装插件
+install_plugin() {
+  rm -rf ../../plugins/$PLUGIN_NAME
+  cp -r ./dist ../../plugins/$PLUGIN_NAME
+}
+
+# 更新插件数据
+update_plugin_meta() {
+  node ../../plugins/plugin.js "{\"name\":\"$PLUGIN_NAME\",\"icon\":\"$PLUGIN_ICON\",\"url\":\"$PLUGIN_URL\"}" ../../plugins/manifest.json
+}
+
+echo "Start download and build plugin pathobot with mode:$MODE"
+
+cd_workspace
+clone_repo
+install_dep
+
+if [[ $ENV == "prod" ]]; then
+  run_build
+  install_plugin
+else
+  run_start
+fi
+
+update_plugin_meta

app-engine/frontend/src/components/layout/index.tsx

@@ -25,7 +25,7 @@ import { Provider } from 'react-redux';
 import { Icons, KnowledgeIcons } from '../icons/index';
 import store from '@/store/store';
 import { setSpaClassName } from '@/shared/utils/common';
-import { getUser, getOmsUser, getRole } from '../../pages/helper';
+import { getUser, getOmsUser, getRole, getChatPluginList } from '../../pages/helper';
 import './style.scoped.scss';
 
 const { Content, Sider } = Layout;
@@ -113,6 +113,7 @@ const AppLayout: React.FC = () => {
       getOmsUser();
       getRole();
     }
+    getChatPluginList();
   }, [])
   return (
     <Layout>

app-engine/frontend/src/locale/en_US.json

@@ -233,6 +233,8 @@
   "testTip2": "Debug the workflow to ensure it runs properly before release.",
   "debug": "Debug",
   "plsEnterRequiredItem": "Set mandatory parameters",
+  "expandConfig": "Expand config",
+  "collapseConfig":  "Collapse config",
   "flowChangeWarningContent": "The workflow configuration items have been modified. Debug the workflow again. The workflow can be released once it passes the debugging",
   "noMoreTips": "Do not remind me again",
   "plsEnterString": "Enter a string",

app-engine/frontend/src/locale/zh_CN.json

@@ -203,6 +203,8 @@
   "knowledgeCreated": "恭喜您，知识库已完成创建",
   "enterNameRule": "输入字符长度范围：1 - 64",
   "expandArrange": "展开编排区",
+  "expandConfig": "展开配置区",
+  "collapseConfig":  "收起配置区",
   "flowChangeWarningContent": "工作流配置项已变更，请重新调试，调试成功后即可发布",
   "debugAlert": "工具流暂不支持调试历史记录",
   "consumer": "自定义",

app-engine/frontend/src/pages/addFlow/components/elsa-stage.tsx

@@ -73,6 +73,7 @@ const Stage = (props) => {
   const testStatus = useAppSelector((state) => state.flowTestStore.testStatus);
   const appValidateInfo = useAppSelector((state) => state.appStore.validateInfo);
   const choseNodeId = useAppSelector((state) => state.appStore.choseNodeId);
+  const pluginList = useAppSelector((state) => state.chatCommonStore.pluginList);
   const { tenantId, appId } = useParams();
   const testStatusRef = useRef<any>();
   const modelCallback = useRef<any>();
@@ -112,6 +113,29 @@ const Stage = (props) => {
     return null;
   }
   const realAppId = getQueryString('appId');
+  const updateConfigs = () => {
+    const startNodeIndex = CONFIGS.findIndex(item => item.node === 'startNodeStart');
+    if (startNodeIndex === -1) {
+      return;
+    }
+    const startNode = CONFIGS[startNodeIndex];
+    if (!startNode.appConfig?.appChatStyle?.options) {
+      return;
+    }
+    // 生成 pluginOptions 并去重
+    const existingValues = new Set(
+      startNode.appConfig.appChatStyle.options.map(opt => opt.value)
+    );
+    const pluginOptions = pluginList
+      .filter(plugin => !existingValues.has(plugin.name))
+      .map(plugin => ({
+        value: plugin.name,
+        label: plugin.chineseName ?? plugin.name,
+        image: plugin.icon,
+      }));
+
+    startNode.appConfig.appChatStyle.options.push(...pluginOptions);
+  };
   // 编辑工作流
   function setElsaData(readOnly: boolean) {
     let graphData = appInfo.flowGraph?.appearance || {};
@@ -120,6 +144,7 @@ const Stage = (props) => {
     let configIndex = CONFIGS.findIndex(item => item.node === 'llmNodeState');
     CONFIGS[configIndex].params.tenantId = tenantId;
     CONFIGS[configIndex].params.appId = appId;
+    updateConfigs();
     setSpinning && setSpinning(true);
     const flow = types === 'evaluate'
       ? JadeFlow.evaluate(stageDom, tenantId, realAppId, data, false, CONFIGS, i18n)

app-engine/frontend/src/pages/aippIndex/index.tsx

@@ -12,7 +12,7 @@ import ConfigForm from '../configForm';
 import CommonChat from '../chatPreview/chatComminPage';
 import ChoreographyHead from '../components/header';
 import { getAppInfo, updateFormInfo } from '@/shared/http/aipp';
-import { debounce, getCurrentTime, getUiD, setSpaClassName } from '@/shared/utils/common';
+import { debounce, getCurrentTime, getUiD, setSpaClassName, getAppConfig } from '@/shared/utils/common';
 import { useAppDispatch, useAppSelector } from '@/store/hook';
 import { setInspirationOpen } from '@/store/chatStore/chatStore';
 import { setAippId, setAppId, setAppInfo, setChoseNodeId, setValidateInfo } from '@/store/appInfo/appInfo';
@@ -29,6 +29,7 @@ import { RenderContext } from '@/pages/aippIndex/context';
 const AippIndex = () => {
   const { appId, tenantId, aippId } = useParams();
   const [showElsa, setShowElsa] = useState(false);
+  const [showConfig, setShowConfig] = useState(true);
   const [spinning, setSpinning] = useState(false);
   const [saveTime, setSaveTime] = useState('');
   const [reloadInspiration, setReloadInspiration] = useState('');
@@ -40,15 +41,35 @@ const AippIndex = () => {
   const inspirationRefresh = useRef<any>(false);
   const dispatch = useAppDispatch();
   const appInfo = useAppSelector((state) => state.appStore.appInfo);
+  const pluginList = useAppSelector((state) => state.chatCommonStore.pluginList);
   const addFlowRef = useRef<any>(null);
   const renderRef = useRef(false);
   const elsaReadOnlyRef = useRef(false);
 
+  const [pluginName, setPluginName] = useState('default');
+  const [plugin, setPlugin] = useState();
+
+
   const elsaChange = () => {
     setShowElsa(!showElsa);
     showElsa && getAippDetails(true);
   }
 
+  const handleChangeShowConfig = () => {
+    setShowConfig(!showConfig);
+  };
+
+  useEffect(() => {
+    const found = pluginList.find((item: any) => item.name === pluginName);
+    setPlugin(found);
+  }, [pluginList, pluginName]);
+
+  useEffect(() => {
+    if (plugin) {
+      setShowConfig(false);
+    }
+  }, [plugin]);
+
   useEffect(() => {
     dispatch(setAppInfo({}));
     dispatch(setAppId(appId));
@@ -83,11 +104,20 @@ const AippIndex = () => {
         res.data.hideHistory = true;
         aippRef.current = res.data;
         dispatch(setAppInfo(res.data));
+        RefreshChatStyle(res.data);
       }
     } finally {
       setSpinning(false);
     }
   }
+
+  // 基于appInfo更新对话界面
+  const RefreshChatStyle = (appInfo) => {
+    const appChatStyle = getAppConfig(appInfo) ? getAppConfig(appInfo).appChatStyle : null;
+    setPluginName(appChatStyle || 'default');
+  };
+
+
   // 修改aipp更新回调
   const updateAippCallBack = (partialData) => {
     if (partialData) {
@@ -181,9 +211,16 @@ const AippIndex = () => {
                   handleConfigDataChange={handleConfigDataChange}
                   inspirationChange={inspirationChange}
                   showElsa={showElsa}
+                  showConfig={showConfig}
+                  onChangeShowConfig={handleChangeShowConfig}
                 />
               )}
-              <CommonChat contextProvider={contextProvider} previewBack={changeChat} />
+              <CommonChat
+                showElsa={showElsa}
+                contextProvider={contextProvider}
+                previewBack={changeChat}
+                pluginName={pluginName}
+              />
             </div>
           </RenderContext.Provider>
         </div>