diff --git a/ui/src/api/user/resource-authorization.ts b/ui/src/api/user/resource-authorization.ts
index 3d0d3d2ac..2a1daea04 100644
--- a/ui/src/api/user/resource-authorization.ts
+++ b/ui/src/api/user/resource-authorization.ts
@@ -4,6 +4,15 @@ import type { pageRequest } from '@/api/type/common'
 import type { Ref } from 'vue'
 
 const prefix = '/workspace'
+
+/**
+ * 获取成员列表
+ * @query 参数
+ */
+const getUserList: (workspace_id: String) => Promise<Result<any>> = (workspace_id) => {
+  return get(`${prefix}/${workspace_id}/user_list`)
+}
+
 /**
  * 获取资源权限
  * @query 参数
@@ -40,4 +49,5 @@ const putResourceAuthorization: (workspace_id: String, body: any) => Promise<Res
 export default {
   getResourceAuthorization,
   putResourceAuthorization,
+  getUserList
 }
diff --git a/ui/src/enums/system.ts b/ui/src/enums/system.ts
index 5cd2bfaa3..627dc62c9 100644
--- a/ui/src/enums/system.ts
+++ b/ui/src/enums/system.ts
@@ -1,6 +1,6 @@
 export enum AuthorizationEnum {
   MANAGE = 'MANAGE',
   USE = 'USE',
-  DATASET = 'DATASET',
+  KNOWLEDGE = 'KNOWLEDGE',
   APPLICATION = 'APPLICATION'
 }
diff --git a/ui/src/locales/lang/zh-CN/ai-chat.ts b/ui/src/locales/lang/zh-CN/ai-chat.ts
new file mode 100644
index 000000000..76bb53d4f
--- /dev/null
+++ b/ui/src/locales/lang/zh-CN/ai-chat.ts
@@ -0,0 +1,97 @@
+export default {
+  noHistory: '暂无历史记录',
+  createChat: '新建对话',
+  history: '历史记录',
+  only20history: '仅显示最近 20 条对话',
+  question_count: '条提问',
+  exportRecords: '导出聊天记录',
+  chatId: '对话 ID',
+  userInput: '用户输入',
+  quote: '引用',
+  download: '点击下载文件',
+  transcribing: '转文字中',
+  passwordValidator: {
+    title: '请输入密码打开链接',
+    errorMessage1: '密码不能为空',
+    errorMessage2: '密码错误'
+  },
+  operation: {
+    play: '点击播放',
+    pause: '停止',
+    regeneration: '换个答案',
+    like: '赞同',
+    cancelLike: '取消赞同',
+    oppose: '反对',
+    cancelOppose: '取消反对',
+    continue: '继续',
+    stopChat: '停止回答',
+    startChat: '开始对话'
+  },
+  tip: {
+    error500Message: '抱歉，当前正在维护，无法提供服务，请稍后再试！',
+    errorIdentifyMessage: '无法识别用户身份',
+    errorLimitMessage: '抱歉，您的提问已达到最大限制，请明天再来吧！',
+    answerMessage: '抱歉，没有查找到相关内容，请重新描述您的问题或提供更多信息。',
+    stopAnswer: '已停止回答',
+    answerLoading: '回答中',
+    recorderTip: `<p>该功能需要使用麦克风，浏览器禁止不安全页面录音，解决方案如下：<br/>
+1、可开启 https 解决；<br/>
+2、若无 https 配置则需要修改浏览器安全配置，Chrome 设置如下：<br/>
+(1) 地址栏输入chrome://flags/#unsafely-treat-insecure-origin-as-secure；<br/>
+(2) 将 http 站点配置在文本框中，例如: http://127.0.0.1:8080。</p>`,
+    recorderError: '录音失败',
+    confirm: '我知道了',
+    requiredMessage: '请填写所有必填字段',
+    inputParamMessage1: '请在URL中填写参数',
+    inputParamMessage2: '的值',
+    prologueMessage: '抱歉，当前正在维护，无法提供服务，请稍后再试！'
+  },
+  inputPlaceholder: {
+    speaking: '说话中',
+    recorderLoading: '转文字中',
+    default: '请输入问题'
+  },
+  uploadFile: {
+    label: '上传文件',
+    most: '最多',
+    limit: '个，每个文件限制',
+    fileType: '文件类型',
+    tipMessage: '请在文件上传配置中选择文件类型',
+    limitMessage1: '最多上传',
+    limitMessage2: '个文件',
+    sizeLimit: '单个文件大小不能超过',
+    imageMessage: '请解析图片内容',
+    errorMessage: '上传失败'
+  },
+  executionDetails: {
+    title: '执行详情',
+    paramOutputTooltip: '每个文档仅支持预览500字',
+    audioFile: '语音文件',
+    searchContent: '检索内容',
+    searchResult: '检索结果',
+    conditionResult: '判断结果',
+    currentChat: '本次对话',
+    answer: 'AI 回答',
+    replyContent: '回复内容',
+    textContent: '文本内容',
+    input: '输入',
+    output: '输出',
+    rerankerContent: '重排内容',
+    rerankerResult: '重排结果',
+    paragraph: '分段',
+    noSubmit: '用户未提交',
+    errMessage: '错误日志'
+  },
+  KnowledgeSource: {
+    title: '知识来源',
+    referenceParagraph: '引用分段',
+    consume: '消耗tokens',
+    consumeTime: '耗时'
+  },
+  paragraphSource: {
+    title: '知识库引用',
+    question: '用户问题',
+    optimizationQuestion: '优化后问题'
+  },
+  editTitle: '编辑标题'
+}
diff --git a/ui/src/locales/lang/zh-CN/components.ts b/ui/src/locales/lang/zh-CN/components.ts
new file mode 100644
index 000000000..5b871daf1
--- /dev/null
+++ b/ui/src/locales/lang/zh-CN/components.ts
@@ -0,0 +1,12 @@
+export default {
+  quickCreatePlaceholder: '快速创建空白文档',
+  quickCreateName: '文档名称',
+  noData: '无匹配数据',
+  loading: '加载中',
+  noMore: '到底啦！',
+  selectParagraph: {
+    title: '选择分段',
+    error: '仅执行未成功分段',
+    all: '全部分段'
+  }
+}
diff --git a/ui/src/locales/lang/zh-CN/index.ts b/ui/src/locales/lang/zh-CN/index.ts
index 919882e57..73d9f06ba 100644
--- a/ui/src/locales/lang/zh-CN/index.ts
+++ b/ui/src/locales/lang/zh-CN/index.ts
@@ -1,11 +1,11 @@
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
-// import components from './components'
+import components from './components'
 import views from './views'
 import theme from './theme'
 import layout from './layout'
 import dynamicsForm from './dynamics-form'
 import common from './common'
-// import chat from './ai-chat'
+import chat from './ai-chat'
 export default {
   lang: '简体中文',
   zhCn,
@@ -14,4 +14,6 @@ export default {
   layout,
   dynamicsForm,
   common,
+  chat,
+  components,
 }
diff --git a/ui/src/locales/lang/zh-CN/views/application-overview.ts b/ui/src/locales/lang/zh-CN/views/application-overview.ts
new file mode 100644
index 000000000..1f15d2c08
--- /dev/null
+++ b/ui/src/locales/lang/zh-CN/views/application-overview.ts
@@ -0,0 +1,113 @@
+export default {
+  title: '概览',
+  appInfo: {
+    header: '应用信息',
+    publicAccessLink: '公开访问链接',
+    openText: '开',
+    closeText: '关',
+    copyLinkText: '复制链接',
+    refreshLinkText: '刷新链接',
+    demo: '演示',
+    embedInWebsite: '嵌入第三方',
+    accessControl: '访问限制',
+    displaySetting: '显示设置',
+    apiAccessCredentials: 'API 访问凭据',
+    apiKey: 'API Key',
+    refreshToken: {
+      msgConfirm1: '是否重新生成公开访问链接?',
+      msgConfirm2:
+        '重新生成公开访问链接会影响嵌入第三方脚本变更，需要将新脚本重新嵌入第三方，请谨慎操作！',
+      refreshSuccess: '刷新成功'
+    },
+
+    APIKeyDialog: {
+      saveSettings: '保存设置',
+      msgConfirm1: '是否删除API Key',
+      msgConfirm2: '删除API Key后将无法恢复，请确认是否删除？',
+      enabledSuccess: '已启用',
+      disabledSuccess: '已禁用'
+    },
+    EditAvatarDialog: {
+      title: '应用头像',
+      customizeUpload: '自定义上传',
+      upload: '上传',
+      default: '默认logo',
+      custom: '自定义',
+      sizeTip: '建议尺寸 32*32，支持 JPG、PNG、GIF，大小不超过 10 MB',
+      fileSizeExceeded: '文件大小超过 10 MB',
+      uploadImagePrompt: '请上传一张图片'
+    },
+    EmbedDialog: {
+      fullscreenModeTitle: '全屏模式',
+      copyInstructions: '复制以下代码进行嵌入',
+      floatingModeTitle: '浮窗模式',
+      mobileModeTitle: '移动端模式'
+    },
+    LimitDialog: {
+      showSourceLabel: '显示知识来源',
+      clientQueryLimitLabel: '每个客户端提问限制',
+      timesDays: '次/天',
+      authentication: '身份验证',
+      authenticationValue: '验证密码',
+      whitelistLabel: '白名单',
+      whitelistPlaceholder:
+        '请输入允许嵌入第三方的源地址，一行一个，如：\nhttp://127.0.0.1:5678\nhttps://dataease.io'
+    },
+    SettingAPIKeyDialog: {
+      dialogTitle: '设置',
+      allowCrossDomainLabel: '允许跨域地址',
+      crossDomainPlaceholder:
+        '请输入允许的跨域地址，开启后不输入跨域地址则不限制。\n跨域地址一行一个，如：\nhttp://127.0.0.1:5678 \nhttps://dataease.io'
+    },
+    SettingDisplayDialog: {
+      dialogTitle: '显示设置',
+      languageLabel: '语言',
+      showSourceLabel: '显示知识来源',
+      showExecutionDetail: '显示执行详情',
+      restoreDefault: '恢复默认',
+      customThemeColor: '自定义主题色',
+      headerTitleFontColor: '头部标题字体颜色',
+      default: '默认',
+      askUserAvatar: '提问用户头像',
+      replace: '替换',
+      imageMessage: '建议尺寸 32*32，支持 JPG、PNG、GIF，大小不超过 10 MB',
+      AIAvatar: 'AI 回复头像',
+      display: '显示',
+      floatIcon: '浮窗入口图标',
+      iconDefaultPosition: '图标默认位置',
+      iconPosition: {
+        left: '左',
+        right: '右',
+        bottom: '下',
+        top: '上'
+      },
+      draggablePosition: '可拖拽位置',
+      showHistory: '显示历史记录',
+      displayGuide: '显示引导图(浮窗模式)',
+      disclaimer: '免责声明',
+      disclaimerValue: '「以上内容均由 AI 生成，仅供参考和借鉴」'
+    }
+  },
+  monitor: {
+    monitoringStatistics: '监控统计',
+    customRange: '自定义范围',
+    startDatePlaceholder: '开始时间',
+    endDatePlaceholder: '结束时间',
+    pastDayOptions: {
+      past7Days: '过去7天',
+      past30Days: '过去30天',
+      past90Days: '过去90天',
+      past183Days: '过去半年',
+      other: '自定义'
+    },
+    charts: {
+      customerTotal: '用户总数',
+      customerNew: '用户新增数',
+      queryCount: '提问次数',
+      tokensTotal: 'Tokens 总数',
+      userSatisfaction: '用户满意度',
+      approval: '赞同',
+      disapproval: '反对'
+    }
+  }
+}
diff --git a/ui/src/locales/lang/zh-CN/views/application-workflow.ts b/ui/src/locales/lang/zh-CN/views/application-workflow.ts
new file mode 100644
index 000000000..1495316b8
--- /dev/null
+++ b/ui/src/locales/lang/zh-CN/views/application-workflow.ts
@@ -0,0 +1,302 @@
+export default {
+  node: '节点',
+  nodeName: '节点名称',
+  baseComponent: '基础组件',
+  nodeSetting: '节点设置',
+  workflow: '工作流',
+  searchBar: {
+    placeholder: '按名称搜索'
+  },
+  info: {
+    previewVersion: '预览版本：',
+    saveTime: '保存时间：'
+  },
+  setting: {
+    restoreVersion: '恢复版本',
+    restoreCurrentVersion: '恢复此版本',
+    addComponent: '添加组件',
+    public: '发布',
+    releaseHistory: '发布历史',
+    autoSave: '自动保存',
+    latestRelease: '最近发布',
+    copyParam: '复制参数',
+    debug: '调试',
+    exit: '直接退出',
+    exitSave: '保存并退出'
+  },
+  tip: {
+    publicSuccess: '发布成功',
+    noData: '没有找到相关结果',
+    nameMessage: '名字不能为空！',
+    onlyRight: '只允许从右边的锚点连出',
+    notRecyclable: '不可循环连线',
+    onlyLeft: '只允许连接左边的锚点',
+    applicationNodeError: '该应用不可用',
+    functionNodeError: '该函数不可用',
+    repeatedNodeError: '节点名称已存在！',
+    cannotCopy: '不能被复制',
+    copyError: '已复制节点',
+    paramErrorMessage: '参数已存在: ',
+    saveMessage: '当前的更改尚未保存，是否保存后退出?'
+  },
+  delete: {
+    confirmTitle: '确定删除该节点？',
+    deleteMessage: '节点不允许删除'
+  },
+  control: {
+    zoomOut: '缩小',
+    zoomIn: '放大',
+    fitView: '适应',
+    retract: '收起全部节点',
+    extend: '展开全部节点',
+    beautify: '一键美化'
+  },
+  variable: {
+    label: '变量',
+    global: '全局变量',
+    Referencing: '引用变量',
+    ReferencingRequired: '引用变量必填',
+    ReferencingError: '引用变量错误',
+    NoReferencing: '不存在的引用变量',
+    placeholder: '请选择变量'
+  },
+  condition: {
+    title: '执行条件',
+    front: '前置',
+    AND: '所有',
+    OR: '任一',
+    text: '连线节点执行完，执行当前节点'
+  },
+  validate: {
+    startNodeRequired: '开始节点必填',
+    startNodeOnly: '开始节点只能有一个',
+    baseNodeRequired: '基本信息节点必填',
+    baseNodeOnly: '基本信息节点只能有一个',
+    notInWorkFlowNode: '未在流程中的节点',
+    noNextNode: '不存在的下一个节点',
+    nodeUnavailable: '节点不可用',
+    needConnect1: '节点的',
+    needConnect2: '分支需要连接',
+    cannotEndNode: '节点不能当做结束节点'
+  },
+  nodes: {
+    startNode: {
+      label: '开始',
+      question: '用户问题',
+      currentTime: '当前时间'
+    },
+    baseNode: {
+      label: '基本信息',
+      appName: {
+        label: '应用名称'
+      },
+      appDescription: {
+        label: '应用描述'
+      },
+      fileUpload: {
+        label: '文件上传',
+        tooltip: '开启后，问答页面会显示上传文件的按钮。'
+      },
+      FileUploadSetting: {
+        title: '文件上传设置',
+        maxFiles: '单次上传最多文件数',
+        fileLimit: '每个文件最大（MB）',
+        fileUploadType: {
+          label: '上传的文件类型',
+          documentText: '需要使用“文档内容提取”节点解析文档内容',
+          imageText: '需要使用“视觉模型”节点解析图片内容',
+          audioText: '需要使用“语音转文本”节点解析音频内容',
+          otherText: '需要自行解析该类型文件'
+        },
+        
+      }
+    },
+    aiChatNode: {
+      label: 'AI 对话',
+      text: '与 AI 大模型进行对话',
+      answer: 'AI 回答内容',
+      returnContent: {
+        label: '返回内容',
+        tooltip: `关闭后该节点的内容则不输出给用户。
+                  如果你想让用户看到该节点的输出内容，请打开开关。`
+      },
+      defaultPrompt: '已知信息',
+      think: '思考过程'
+    },
+    searchDatasetNode: {
+      label: '知识库检索',
+      text: '关联知识库，查找与问题相关的分段',
+      paragraph_list: '检索结果的分段列表',
+      is_hit_handling_method_list: '满足直接回答的分段列表',
+      result: '检索结果',
+      directly_return: '满足直接回答的分段内容',
+      searchParam: '检索参数',
+      searchQuestion: {
+        label: '检索问题',
+        placeholder: '请选择检索问题',
+        requiredMessage: '请选择检索问题'
+      }
+    },
+    questionNode: {
+      label: '问题优化',
+      text: '根据历史聊天记录优化完善当前问题，更利于匹配知识库分段',
+      result: '问题优化结果',
+      defaultPrompt1: `根据上下文优化和完善用户问题`,
+      defaultPrompt2: `请输出一个优化后的问题。`,
+      systemDefault: '你是一个问题优化大师'
+    },
+    conditionNode: {
+      label: '判断器',
+      text: '根据不同条件执行不同的节点',
+      branch_name: '分支名称',
+      conditions: {
+        label: '条件',
+        info: '符合以下',
+        requiredMessage: '请选择条件'
+      },
+      valueMessage: '请输入值',
+      addCondition: '添加条件',
+      addBranch: '添加分支'
+    },
+    replyNode: {
+      label: '指定回复',
+      text: '指定回复内容，引用变量会转换为字符串进行输出',
+      content: '内容',
+      replyContent: {
+        label: '回复内容',
+        custom: '自定义',
+        reference: '引用变量'
+      }
+    },
+    rerankerNode: {
+      label: '多路召回',
+      text: '使用重排模型对多个知识库的检索结果进行二次召回',
+      result_list: '重排结果列表',
+      result: '重排结果',
+      rerankerContent: {
+        label: '重排内容',
+        requiredMessage: '请选择重排内容'
+      },
+      higher: '高于',
+      ScoreTooltip: 'Score越高相关性越强。',
+      max_paragraph_char_number: '最大引用字符数',
+      reranker_model: {
+        label: '重排模型',
+        placeholder: '请选择重排模型'
+      }
+    },
+    formNode: {
+      label: '表单收集',
+      text: '在问答过程中用于收集用户信息，可以根据收集到表单数据执行后续流程',
+      form_content_format1: '你好，请先填写下面表单内容：',
+      form_content_format2: '填写后请点击【提交】按钮进行提交。',
+      form_data: '表单全部内容',
+      formContent: {
+        label: '表单输出内容',
+        requiredMessage: '请表单输出内容',
+        tooltip: '设置执行该节点输出的内容，{ form } 为表单的占位符。'
+      },
+      formAllContent: '表单全部内容',
+      formSetting: '表单配置'
+    },
+    documentExtractNode: {
+      label: '文档内容提取',
+      text: '提取文档中的内容',
+      content: '文档内容'
+    },
+    imageUnderstandNode: {
+      label: '图片理解',
+      text: '识别出图片中的对象、场景等信息回答用户问题',
+      answer: 'AI 回答内容',
+      model: {
+        label: '视觉模型',
+        requiredMessage: '请选择视觉模型'
+      },
+      image: {
+        label: '选择图片',
+        requiredMessage: '请选择图片'
+      }
+    },
+    variableAssignNode: {
+      label: '变量赋值',
+      text: '更新全局变量的值',
+      assign: '赋值'
+    },
+    mcpNode: {
+      label: 'MCP 调用',
+      text: '通过SSE/Streamable HTTP方式执行MCP服务中的工具',
+      getToolsSuccess: '获取工具成功',
+      getTool: '获取工具',
+      tool: '工具',
+      toolParam: '工具参数',
+      mcpServerTip: '请输入JSON格式的MCP服务器配置',
+      mcpToolTip: '请选择工具',
+      configLabel: 'MCP Server Config (仅支持SSE/Streamable HTTP调用方式)'
+    },
+    imageGenerateNode: {
+      label: '图片生成',
+      text: '根据提供的文本内容生成图片',
+      answer: 'AI 回答内容',
+      model: {
+        label: '图片生成模型',
+        requiredMessage: '请选择图片生成模型'
+      },
+      prompt: {
+        label: '提示词(正向)',
+        tooltip: '正向提示词，用来描述生成图像中期望包含的元素和视觉特点'
+      },
+      negative_prompt: {
+        label: '提示词(负向)',
+        tooltip: '反向提示词，用来描述不希望在画面中看到的内容，可以对画面进行限制。',
+        placeholder: '请描述不想生成的图片内容，比如：颜色、血腥内容'
+      }
+    },
+    speechToTextNode: {
+      label: '语音转文本',
+      text: '将音频通过语音识别模型转换为文本',
+      stt_model: {
+        label: '语音识别模型'
+      },
+      audio: {
+        label: '选择语音文件',
+        placeholder: '请选择语音文件'
+      }
+    },
+    textToSpeechNode: {
+      label: '文本转语音',
+      text: '将文本通过语音合成模型转换为音频',
+      tts_model: {
+        label: '语音识别模型'
+      },
+      content: {
+        label: '选择文本内容'
+      }
+    },
+    functionNode: {
+      label: '自定义函数',
+      text: '通过执行自定义脚本，实现数据处理'
+    },
+    applicationNode: {
+      label: '应用节点'
+    }
+  },
+  compare: {
+    is_null: '为空',
+    is_not_null: '不为空',
+    contain: '包含',
+    not_contain: '不包含',
+    eq: '等于',
+    ge: '大于等于',
+    gt: '大于',
+    le: '小于等于',
+    lt: '小于',
+    len_eq: '长度等于',
+    len_ge: '长度大于等于',
+    len_gt: '长度大于',
+    len_le: '长度小于等于',
+    len_lt: '长度小于',
+    is_true: '为真',
+    is_not_true: '不为真'
+  },
+  FileUploadSetting: {}
+}
diff --git a/ui/src/locales/lang/zh-CN/views/index.ts b/ui/src/locales/lang/zh-CN/views/index.ts
index 53e7964f7..ac04f79ff 100644
--- a/ui/src/locales/lang/zh-CN/views/index.ts
+++ b/ui/src/locales/lang/zh-CN/views/index.ts
@@ -8,17 +8,13 @@ import userManage from './user-manage'
 import resourceAuthorization from './resource-authorization'
 import application from './application'
 import problem from './problem'
+import applicationOverview from './application-overview'
+import applicationWorkflow from './application-workflow'
 // import notFound from './404'
 
-// import applicationOverview from './application-overview'
-
-// import user from './user'
-// import team from './team'
-
 // import paragraph from './paragraph'
 
 // import log from './log'
-// import applicationWorkflow from './application-workflow'
 
 // import operateLog from './operate-log'
 export default {
@@ -32,16 +28,12 @@ export default {
   resourceAuthorization,
   application,
   problem,
+  applicationOverview,
+  applicationWorkflow,
   // notFound,
-
-  // applicationOverview,
-
-  // user,
-  // team,
   // paragraph,
 
   // log,
-  // applicationWorkflow,
 
   // operateLog
 }
diff --git a/ui/src/router/modules/1application.ts b/ui/src/router/modules/1application.ts
new file mode 100644
index 000000000..f3527086b
--- /dev/null
+++ b/ui/src/router/modules/1application.ts
@@ -0,0 +1,94 @@
+// import Layout from '@/layout/layout-template/DetailLayout.vue'
+import { ComplexPermission } from '@/utils/permission/type'
+
+const applicationRouter = {
+  path: '/application',
+  name: 'application',
+  meta: { title: 'views.application.title', permission: 'APPLICATION:READ' },
+  redirect: '/application',
+  component: () => import('@/layout/layout-template/SimpleLayout.vue'),
+  children: [
+    {
+      path: '/application',
+      name: 'application-index',
+      meta: { title: '应用主页', activeMenu: '/application' },
+      component: () => import('@/views/application/index.vue')
+    },
+    // {
+    //   path: '/application/:id/:type',
+    //   name: 'ApplicationDetail',
+    //   meta: { title: '应用详情', activeMenu: '/application' },
+    //   component: Layout,
+    //   hidden: true,
+    //   children: [
+    //     {
+    //       path: 'overview',
+    //       name: 'AppOverview',
+    //       meta: {
+    //         icon: 'app-all-menu',
+    //         iconActive: 'app-all-menu-active',
+    //         title: 'views.applicationOverview.title',
+    //         active: 'overview',
+    //         parentPath: '/application/:id/:type',
+    //         parentName: 'ApplicationDetail'
+    //       },
+    //       component: () => import('@/views/application-overview/index.vue')
+    //     },
+    //     {
+    //       path: 'setting',
+    //       name: 'AppSetting',
+    //       meta: {
+    //         icon: 'app-setting',
+    //         iconActive: 'app-setting-active',
+    //         title: 'common.setting',
+    //         active: 'setting',
+    //         parentPath: '/application/:id/:type',
+    //         parentName: 'ApplicationDetail'
+    //       },
+    //       component: () => import('@/views/application/ApplicationSetting.vue')
+    //     },
+    //     {
+    //       path: 'access',
+    //       name: 'AppAccess',
+    //       meta: {
+    //         icon: 'app-access',
+    //         iconActive: 'app-access-active',
+    //         title: 'views.application.applicationAccess.title',
+    //         active: 'access',
+    //         parentPath: '/application/:id/:type',
+    //         parentName: 'ApplicationDetail',
+    //         permission: new ComplexPermission([], ['x-pack'], 'OR')
+    //       },
+    //       component: () => import('@/views/application/ApplicationAccess.vue')
+    //     },
+    //     {
+    //       path: 'hit-test',
+    //       name: 'AppHitTest',
+    //       meta: {
+    //         icon: 'app-hit-test',
+    //         title: 'views.application.hitTest.title',
+    //         active: 'hit-test',
+    //         parentPath: '/application/:id/:type',
+    //         parentName: 'ApplicationDetail'
+    //       },
+    //       component: () => import('@/views/hit-test/index.vue')
+    //     },
+    //     // {
+    //     //   path: 'log',
+    //     //   name: 'Log',
+    //     //   meta: {
+    //     //     icon: 'app-document',
+    //     //     iconActive: 'app-document-active',
+    //     //     title: 'views.log.title',
+    //     //     active: 'log',
+    //     //     parentPath: '/application/:id/:type',
+    //     //     parentName: 'ApplicationDetail'
+    //     //   },
+    //     //   component: () => import('@/views/log/index.vue')
+    //     // }
+    //   ]
+    // }
+  ]
+}
+
+export default applicationRouter
diff --git a/ui/src/router/routes.ts b/ui/src/router/routes.ts
index e395f2886..908a31bde 100644
--- a/ui/src/router/routes.ts
+++ b/ui/src/router/routes.ts
@@ -10,6 +10,20 @@ export const routes: Array<RouteRecordRaw> = [
     children: [...rolesRoutes],
   },
 
+  // 高级编排
+  {
+    path: '/application/:id/workflow',
+    name: 'ApplicationWorkflow',
+    meta: { activeMenu: '/application' },
+    component: () => import('@/views/application-workflow/index.vue'),
+  },
+  // 对话
+  {
+    path: '/chat/:accessToken',
+    name: 'Chat',
+    component: () => import('@/views/chat/index.vue'),
+  },
+
   {
     path: '/login',
     name: 'login',
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 012aaca6f..858365832 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -409,3 +409,11 @@ h5 {
     background: var(--el-color-primary);
   }
 }
+
+/*
+  内容部分 自适应高度
+*/
+.main-calc-height {
+  height: var(--app-main-height);
+  box-sizing: border-box;
+}
diff --git a/ui/src/views/application-overview/component/APIKeyDialog.vue b/ui/src/views/application-overview/component/APIKeyDialog.vue
new file mode 100644
index 000000000..dc8c9aa37
--- /dev/null
+++ b/ui/src/views/application-overview/component/APIKeyDialog.vue
@@ -0,0 +1,153 @@
+<template>
+  <el-dialog
+    title="API Key"
+    v-model="dialogVisible"
+    width="800"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    align-center
+  >
+    <el-button type="primary" class="mb-16" @click="createApiKey">
+      {{ $t('common.create') }}
+    </el-button>
+    <el-table :data="apiKey" class="mb-16" :loading="loading" height="420">
+      <el-table-column prop="secret_key" label="API Key">
+        <template #default="{ row }">
+          <span class="vertical-middle lighter break-all">
+            {{ row.secret_key }}
+          </span>
+          <el-button type="primary" text @click="copyClick(row.secret_key)">
+            <AppIcon iconName="app-copy"></AppIcon>
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('common.status.label')" width="70">
+        <template #default="{ row }">
+          <div @click.stop>
+            <el-switch
+              size="small"
+              v-model="row.is_active"
+              :before-change="() => changeState(row)"
+            />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" :label="$t('common.createDate')" width="170">
+        <template #default="{ row }">
+          {{ datetimeFormat(row.create_time) }}
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('common.operation')" align="left" width="90">
+        <template #default="{ row }">
+          <span class="mr-4">
+            <el-tooltip effect="dark" :content="$t('common.setting')" placement="top">
+              <el-button type="primary" text @click.stop="settingApiKey(row)">
+                <el-icon><Setting /></el-icon>
+              </el-button>
+            </el-tooltip>
+          </span>
+          <el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
+            <el-button type="primary" text @click="deleteApiKey(row)">
+              <el-icon><Delete /></el-icon>
+            </el-button>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+    </el-table>
+    <SettingAPIKeyDialog ref="SettingAPIKeyDialogRef" @refresh="refresh" />
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { copyClick } from '@/utils/clipboard'
+import overviewApi from '@/api/application-overview'
+import SettingAPIKeyDialog from './SettingAPIKeyDialog.vue'
+import { datetimeFormat } from '@/utils/time'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import { t } from '@/locales'
+const route = useRoute()
+const {
+  params: { id }
+} = route
+
+const emit = defineEmits(['addData'])
+
+const SettingAPIKeyDialogRef = ref()
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+const apiKey = ref<any>(null)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    apiKey.value = null
+  }
+})
+
+function settingApiKey(row: any) {
+  SettingAPIKeyDialogRef.value.open(row, 'APPLICATION')
+}
+
+function deleteApiKey(row: any) {
+  MsgConfirm(
+    // @ts-ignore
+    `${t('views.applicationOverview.appInfo.APIKeyDialog.msgConfirm1')}: ${row.secret_key}?`,
+    t('views.applicationOverview.appInfo.APIKeyDialog.msgConfirm2'),
+    {
+      confirmButtonText: t('common.confirm'),
+      cancelButtonText: t('common.cancel'),
+      confirmButtonClass: 'danger'
+    }
+  )
+    .then(() => {
+      overviewApi.delAPIKey(id as string, row.id, loading).then(() => {
+        MsgSuccess(t('common.deleteSuccess'))
+        getApiKeyList()
+      })
+    })
+    .catch(() => {})
+}
+
+function changeState(row: any) {
+  const obj = {
+    is_active: !row.is_active
+  }
+  const str = obj.is_active
+    ? t('views.applicationOverview.appInfo.APIKeyDialog.enabledSuccess')
+    : t('views.applicationOverview.appInfo.APIKeyDialog.disabledSuccess')
+  overviewApi
+    .putAPIKey(id as string, row.id, obj, loading)
+    .then((res) => {
+      MsgSuccess(str)
+      getApiKeyList()
+      return true
+    })
+    .catch(() => {
+      return false
+    })
+}
+
+function createApiKey() {
+  overviewApi.postAPIKey(id as string, loading).then((res) => {
+    getApiKeyList()
+  })
+}
+
+const open = () => {
+  getApiKeyList()
+  dialogVisible.value = true
+}
+
+function getApiKeyList() {
+  overviewApi.getAPIKey(id as string, loading).then((res) => {
+    apiKey.value = res.data
+  })
+}
+
+function refresh() {
+  getApiKeyList()
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/application-overview/component/DisplaySettingDialog.vue b/ui/src/views/application-overview/component/DisplaySettingDialog.vue
new file mode 100644
index 000000000..21878dda9
--- /dev/null
+++ b/ui/src/views/application-overview/component/DisplaySettingDialog.vue
@@ -0,0 +1,103 @@
+<template>
+  <el-dialog
+    :title="$t('views.applicationOverview.appInfo.SettingDisplayDialog.dialogTitle')"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    width="550"
+  >
+    <el-form label-position="top" ref="displayFormRef" :model="form">
+      <el-form-item>
+        <span>{{
+          $t('views.applicationOverview.appInfo.SettingDisplayDialog.languageLabel')
+        }}</span>
+        <el-select v-model="form.language" clearable>
+          <el-option
+            v-for="item in langList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-space direction="vertical" alignment="start">
+          <el-checkbox
+            v-model="form.show_source"
+            :label="
+              isWorkFlow(detail.type)
+                ? $t('views.applicationOverview.appInfo.SettingDisplayDialog.showExecutionDetail')
+                : $t('views.applicationOverview.appInfo.SettingDisplayDialog.showSourceLabel')
+            "
+          />
+        </el-space>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false">{{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submit(displayFormRef)" :loading="loading">
+          {{ $t('common.save') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { FormInstance, FormRules, UploadFiles } from 'element-plus'
+import applicationApi from '@/api/application'
+import { isWorkFlow } from '@/utils/application'
+import { MsgSuccess, MsgError } from '@/utils/message'
+import { getBrowserLang, langList, t } from '@/locales'
+const route = useRoute()
+const {
+  params: { id }
+} = route
+
+const emit = defineEmits(['refresh'])
+
+const displayFormRef = ref()
+const form = ref<any>({
+  show_source: false,
+  language: ''
+})
+
+const detail = ref<any>(null)
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      show_source: false,
+      language: ''
+    }
+  }
+})
+const open = (data: any, content: any) => {
+  detail.value = content
+  form.value.show_source = data.show_source
+  form.value.language = data.language
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      applicationApi.putAccessToken(id as string, form.value, loading).then((res) => {
+        emit('refresh')
+        // @ts-ignore
+        MsgSuccess(t('common.settingSuccess'))
+        dialogVisible.value = false
+      })
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/application-overview/component/EditAvatarDialog.vue b/ui/src/views/application-overview/component/EditAvatarDialog.vue
new file mode 100644
index 000000000..b9946d687
--- /dev/null
+++ b/ui/src/views/application-overview/component/EditAvatarDialog.vue
@@ -0,0 +1,137 @@
+<template>
+  <el-dialog
+    :title="$t('views.applicationOverview.appInfo.EditAvatarDialog.title')"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    width="550"
+  >
+    <el-radio-group v-model="radioType" class="radio-block mb-16">
+      <el-radio value="default">
+        <p>{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.default') }}</p>
+        <AppAvatar
+          v-if="detail?.name"
+          :name="detail?.name"
+          pinyinColor
+          class="mt-8 mb-8"
+          shape="square"
+          :size="32"
+        />
+      </el-radio>
+      <el-radio value="custom">
+        <p>{{ $t('views.applicationOverview.appInfo.EditAvatarDialog.customizeUpload') }}</p>
+        <div class="flex mt-8">
+          <AppAvatar
+            v-if="fileURL"
+            shape="square"
+            :size="32"
+            style="background: none"
+            class="mr-16"
+          >
+            <img :src="fileURL" alt="" />
+          </AppAvatar>
+          <el-upload
+            ref="uploadRef"
+            action="#"
+            :auto-upload="false"
+            :show-file-list="false"
+            accept="image/jpeg, image/png, image/gif"
+            :on-change="onChange"
+          >
+            <el-button icon="Upload" :disabled="radioType !== 'custom'">{{
+              $t('views.applicationOverview.appInfo.EditAvatarDialog.upload')
+            }}</el-button>
+          </el-upload>
+        </div>
+        <div class="el-upload__tip info mt-8">
+          {{ $t('views.applicationOverview.appInfo.EditAvatarDialog.sizeTip') }}
+        </div>
+      </el-radio>
+    </el-radio-group>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="submit" :loading="loading">
+          {{ $t('common.save') }}</el-button
+        >
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import overviewApi from '@/api/application-overview'
+import { cloneDeep } from 'lodash'
+import { MsgSuccess, MsgError } from '@/utils/message'
+import { defaultIcon, isAppIcon } from '@/utils/common'
+import useStore from '@/stores'
+import { t } from '@/locales'
+
+const { application } = useStore()
+
+const route = useRoute()
+const {
+  params: { id } //应用id
+} = route
+
+const emit = defineEmits(['refresh'])
+
+const iconFile = ref<any>(null)
+const fileURL = ref<any>(null)
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+const detail = ref<any>(null)
+const radioType = ref('default')
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    iconFile.value = null
+    fileURL.value = null
+  }
+})
+
+const open = (data: any) => {
+  radioType.value = isAppIcon(data.icon) ? 'custom' : 'default'
+  fileURL.value = isAppIcon(data.icon) ? data.icon : null
+  detail.value = cloneDeep(data)
+  dialogVisible.value = true
+}
+
+const onChange = (file: any) => {
+  //1、判断文件大小是否合法，文件限制不能大于10MB
+  const isLimit = file?.size / 1024 / 1024 < 10
+  if (!isLimit) {
+    // @ts-ignore
+    MsgError(t('views.applicationOverview.appInfo.EditAvatarDialog.fileSizeExceeded'))
+    return false
+  } else {
+    iconFile.value = file
+    fileURL.value = URL.createObjectURL(file.raw)
+  }
+}
+
+function submit() {
+  if (radioType.value === 'default') {
+    application.asyncPutApplication(id as string, { icon: defaultIcon }, loading).then((res) => {
+      emit('refresh')
+      MsgSuccess(t('common.saveSuccess'))
+      dialogVisible.value = false
+    })
+  } else if (radioType.value === 'custom' && iconFile.value) {
+    let fd = new FormData()
+    fd.append('file', iconFile.value.raw)
+    overviewApi.putAppIcon(id as string, fd, loading).then((res: any) => {
+      emit('refresh')
+      MsgSuccess(t('common.saveSuccess'))
+      dialogVisible.value = false
+    })
+  } else {
+    MsgError(t('views.applicationOverview.appInfo.EditAvatarDialog.uploadImagePrompt'))
+  }
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/application-overview/component/EmbedDialog.vue b/ui/src/views/application-overview/component/EmbedDialog.vue
new file mode 100644
index 000000000..379339aba
--- /dev/null
+++ b/ui/src/views/application-overview/component/EmbedDialog.vue
@@ -0,0 +1,163 @@
+<template>
+  <el-dialog
+    :title="$t('views.applicationOverview.appInfo.embedInWebsite')"
+    v-model="dialogVisible"
+    width="900"
+    class="embed-dialog"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-row :gutter="12">
+      <el-col :span="8">
+        <div class="border">
+          <p class="title p-16 bold">
+            {{ $t('views.applicationOverview.appInfo.EmbedDialog.fullscreenModeTitle') }}
+          </p>
+          <img src="@/assets/window1.png" alt="" class="ml-8" height="150" />
+          <div class="code layout-bg border-t p-8">
+            <div class="flex-between p-8">
+              <span class="bold">{{
+                $t('views.applicationOverview.appInfo.EmbedDialog.copyInstructions')
+              }}</span>
+              <el-button text @click="copyClick(source1)">
+                <AppIcon iconName="app-copy"></AppIcon>
+              </el-button>
+            </div>
+            <el-scrollbar height="150" always>
+              <div class="pre-wrap p-8 pt-0">
+                {{ source1 }}
+              </div>
+            </el-scrollbar>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="border">
+          <p class="title p-16 bold">
+            {{ $t('views.applicationOverview.appInfo.EmbedDialog.mobileModeTitle') }}
+          </p>
+          <img src="@/assets/window3.png" alt="" class="ml-8" height="150" />
+          <div class="code layout-bg border-t p-8">
+            <div class="flex-between p-8">
+              <span class="bold">{{
+                $t('views.applicationOverview.appInfo.EmbedDialog.copyInstructions')
+              }}</span>
+              <el-button text @click="copyClick(source3)">
+                <AppIcon iconName="app-copy"></AppIcon>
+              </el-button>
+            </div>
+            <el-scrollbar height="150" always>
+              <div class="pre-wrap p-8 pt-0">
+                {{ source3 }}
+              </div>
+            </el-scrollbar>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="border">
+          <p class="title p-16 bold">
+            {{ $t('views.applicationOverview.appInfo.EmbedDialog.floatingModeTitle') }}
+          </p>
+          <img src="@/assets/window2.png" alt="" class="ml-8" height="150" />
+          <div class="code layout-bg border-t p-8">
+            <div class="flex-between p-8">
+              <span class="bold">{{
+                $t('views.applicationOverview.appInfo.EmbedDialog.copyInstructions')
+              }}</span>
+              <el-button text @click="copyClick(source2)">
+                <AppIcon iconName="app-copy"></AppIcon>
+              </el-button>
+            </div>
+            <el-scrollbar height="150" always>
+              <div class="pre-wrap p-8 pt-0">
+                {{ source2 }}
+              </div>
+            </el-scrollbar>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { copyClick } from '@/utils/clipboard'
+import useStore from '@/stores'
+
+const { application } = useStore()
+
+const props = defineProps({
+  data: Object,
+  apiInputParams: String
+})
+
+const emit = defineEmits(['addData'])
+
+const dialogVisible = ref<boolean>(false)
+
+const source1 = ref('')
+
+const source2 = ref('')
+const source3 = ref('')
+
+const urlParams1 = computed(() => (props.apiInputParams ? '?' + props.apiInputParams : ''))
+const urlParams2 = computed(() => (props.apiInputParams ? '&' + props.apiInputParams : ''))
+const urlParams3 = computed(() =>
+  props.apiInputParams ? '?mode=mobile&' + props.apiInputParams : '?mode=mobile'
+)
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    source1.value = ''
+    source2.value = ''
+    source3.value = ''
+  }
+})
+
+const open = (val: string) => {
+  source1.value = `<iframe
+src="${application.location + val + urlParams1.value}"
+style="width: 100%; height: 100%;"
+frameborder="0"
+allow="microphone">
+</iframe>
+`
+
+  source2.value = `<script
+async
+defer
+src="${window.location.origin}/api/application/embed?protocol=${window.location.protocol.replace(
+    ':',
+    ''
+  )}&host=${window.location.host}&token=${val}${urlParams2.value}">
+<\/script>
+`
+  source3.value = `<iframe
+src="${application.location + val + urlParams3.value}"
+style="width: 100%; height: 100%;"
+frameborder="0"
+allow="microphone">
+</iframe>
+`
+
+  dialogVisible.value = true
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped>
+.embed-dialog {
+  .title {
+    color: var(--app-text-color) !important;
+  }
+
+  .code {
+    color: var(--app-text-color) !important;
+
+    font-weight: 400;
+    font-size: 13px;
+    white-space: pre;
+    height: 188px;
+  }
+}
+</style>
diff --git a/ui/src/views/application-overview/component/LimitDialog.vue b/ui/src/views/application-overview/component/LimitDialog.vue
new file mode 100644
index 000000000..3f7f5ca55
--- /dev/null
+++ b/ui/src/views/application-overview/component/LimitDialog.vue
@@ -0,0 +1,196 @@
+<template>
+  <el-dialog
+    :title="$t('views.applicationOverview.appInfo.accessControl')"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    width="650"
+  >
+    <el-form label-position="top" ref="limitFormRef" :model="form">
+      <!-- <el-form-item
+        :label="$t('views.applicationOverview.appInfo.LimitDialog.showSourceLabel')"
+        @click.prevent
+      >
+        <el-switch size="small" v-model="form.show_source"></el-switch>
+      </el-form-item> -->
+      <el-form-item
+        :label="$t('views.applicationOverview.appInfo.LimitDialog.clientQueryLimitLabel')"
+      >
+        <el-input-number
+          v-model="form.access_num"
+          :min="0"
+          :step="1"
+          :max="10000"
+          :value-on-clear="0"
+          controls-position="right"
+          style="width: 268px"
+          step-strictly
+        />
+        <span class="ml-4">{{
+          $t('views.applicationOverview.appInfo.LimitDialog.timesDays')
+        }}</span>
+      </el-form-item>
+      <!--     身份验证 -->
+      <el-form-item
+        :label="$t('views.applicationOverview.appInfo.LimitDialog.authentication')"
+        v-hasPermission="new ComplexPermission([], ['x-pack'], 'OR')"
+      >
+        <el-switch size="small" v-model="form.authentication" @change="firstGeneration"></el-switch>
+      </el-form-item>
+      <el-form-item
+        prop="authentication_value"
+        v-if="form.authentication"
+        :label="$t('views.applicationOverview.appInfo.LimitDialog.authenticationValue')"
+        v-hasPermission="new ComplexPermission([], ['x-pack'], 'OR')"
+      >
+        <el-input
+          class="authentication-append-input"
+          v-model="form.authentication_value"
+          readonly
+          style="width: 268px"
+          disabled
+        >
+          <template #append>
+            <el-tooltip :content="$t('common.copy')" placement="top">
+              <el-button
+                type="primary"
+                text
+                @click="copyClick(form.authentication_value)"
+                style="margin: 0 4px !important"
+              >
+                <AppIcon iconName="app-copy"></AppIcon>
+              </el-button>
+            </el-tooltip>
+            <el-tooltip :content="$t('common.refresh')" placement="top">
+              <el-button
+                @click="refreshAuthentication"
+                type="primary"
+                text
+                style="margin: 0 4px 0 0 !important"
+              >
+                <el-icon><RefreshRight /></el-icon>
+              </el-button>
+            </el-tooltip>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item
+        :label="$t('views.applicationOverview.appInfo.LimitDialog.whitelistLabel')"
+        @click.prevent
+      >
+        <el-switch size="small" v-model="form.white_active"></el-switch>
+      </el-form-item>
+      <el-form-item>
+        <el-input
+          v-model="form.white_list"
+          :placeholder="$t('views.applicationOverview.appInfo.LimitDialog.whitelistPlaceholder')"
+          :rows="10"
+          type="textarea"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false">{{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submit(limitFormRef)" :loading="loading">
+          {{ $t('common.save') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { FormInstance, FormRules } from 'element-plus'
+import applicationApi from '@/api/application'
+import { MsgSuccess } from '@/utils/message'
+import { t } from '@/locales'
+import { copyClick } from '@/utils/clipboard'
+import { ComplexPermission } from '@/utils/permission/type'
+
+const route = useRoute()
+const {
+  params: { id }
+} = route
+
+const emit = defineEmits(['refresh'])
+
+const limitFormRef = ref()
+const form = ref<any>({
+  access_num: 0,
+  white_active: true,
+  white_list: '',
+  authentication_value: '',
+  authentication: false
+})
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      access_num: 0,
+      white_active: true,
+      white_list: ''
+    }
+  }
+})
+
+const open = (data: any) => {
+  form.value.access_num = data.access_num
+  form.value.white_active = data.white_active
+  form.value.white_list = data.white_list?.length ? data.white_list?.join('\n') : ''
+  form.value.authentication_value = data.authentication_value
+  form.value.authentication = data.authentication
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      const obj = {
+        white_list: form.value.white_list ? form.value.white_list.split('\n') : [],
+        white_active: form.value.white_active,
+        access_num: form.value.access_num,
+        authentication: form.value.authentication,
+        authentication_value: form.value.authentication_value
+      }
+      applicationApi.putAccessToken(id as string, obj, loading).then((res) => {
+        emit('refresh')
+        // @ts-ignore
+        MsgSuccess(t('common.settingSuccess'))
+        dialogVisible.value = false
+      })
+    }
+  })
+}
+function generateAuthenticationValue(length: number = 10) {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  const randomValues = new Uint8Array(length)
+  window.crypto.getRandomValues(randomValues)
+  return Array.from(randomValues)
+    .map((value) => chars[value % chars.length])
+    .join('')
+}
+function refreshAuthentication() {
+  form.value.authentication_value = generateAuthenticationValue()
+}
+
+function firstGeneration() {
+  if (form.value.authentication && !form.value.authentication_value) {
+    form.value.authentication_value = generateAuthenticationValue()
+  }
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped>
+.authentication-append-input {
+  .el-input-group__append {
+    padding: 0 !important;
+  }
+}
+</style>
diff --git a/ui/src/views/application-overview/component/SettingAPIKeyDialog.vue b/ui/src/views/application-overview/component/SettingAPIKeyDialog.vue
new file mode 100644
index 000000000..a5f3770b3
--- /dev/null
+++ b/ui/src/views/application-overview/component/SettingAPIKeyDialog.vue
@@ -0,0 +1,113 @@
+<template>
+  <el-dialog
+    :title="$t('common.setting')"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form label-position="top" ref="settingFormRef" :model="form">
+      <el-form-item
+        :label="$t('views.applicationOverview.appInfo.SettingAPIKeyDialog.allowCrossDomainLabel')"
+        @click.prevent
+      >
+        <el-switch size="small" v-model="form.allow_cross_domain"></el-switch>
+      </el-form-item>
+      <el-form-item>
+        <el-input
+          v-model="form.cross_domain_list"
+          :placeholder="
+            $t('views.applicationOverview.appInfo.SettingAPIKeyDialog.crossDomainPlaceholder')
+          "
+          :rows="10"
+          type="textarea"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="submit(settingFormRef)" :loading="loading">
+          {{ $t('common.save') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { FormInstance, FormRules } from 'element-plus'
+import overviewApi from '@/api/application-overview'
+import overviewSystemApi from '@/api/system-api-key'
+import { MsgSuccess } from '@/utils/message'
+import { t } from '@/locales'
+
+const route = useRoute()
+const {
+  params: { id }
+} = route
+
+const emit = defineEmits(['refresh'])
+
+const settingFormRef = ref()
+const form = ref<any>({
+  allow_cross_domain: false,
+  cross_domain_list: ''
+})
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+
+const APIKeyId = ref('')
+const APIType = ref('APPLICATION')
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      allow_cross_domain: false,
+      cross_domain_list: ''
+    }
+  }
+})
+
+const open = (data: any, type: string) => {
+  APIKeyId.value = data.id
+  APIType.value = type
+  form.value.allow_cross_domain = data.allow_cross_domain
+  form.value.cross_domain_list = data.cross_domain_list?.length
+    ? data.cross_domain_list?.join('\n')
+    : ''
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      const obj = {
+        allow_cross_domain: form.value.allow_cross_domain,
+        cross_domain_list: form.value.cross_domain_list
+          ? form.value.cross_domain_list.split('\n').filter(function (item: string) {
+              return item !== ''
+            })
+          : []
+      }
+
+      const apiCall =
+        APIType.value === 'APPLICATION'
+          ? overviewApi.putAPIKey(id as string, APIKeyId.value, obj, loading)
+          : overviewSystemApi.putAPIKey(APIKeyId.value, obj, loading)
+
+      apiCall.then((res) => {
+        emit('refresh')
+        //@ts-ignore
+        MsgSuccess(t('common.settingSuccess'))
+        dialogVisible.value = false
+      })
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/application-overview/component/StatisticsCharts.vue b/ui/src/views/application-overview/component/StatisticsCharts.vue
new file mode 100644
index 000000000..dbcc2e8d4
--- /dev/null
+++ b/ui/src/views/application-overview/component/StatisticsCharts.vue
@@ -0,0 +1,163 @@
+<template>
+  <el-row :gutter="16">
+    <el-col
+      :xs="12"
+      :sm="12"
+      :md="12"
+      :lg="6"
+      :xl="6"
+      v-for="(item, index) in statisticsType"
+      :key="index"
+      class="mb-16"
+    >
+      <el-card shadow="never">
+        <div class="flex align-center ml-8 mr-8">
+          <el-avatar :size="40" shape="square" :style="{ background: item.background }">
+            <appIcon :iconName="item.icon" :style="{ fontSize: '24px', color: item.color }" />
+          </el-avatar>
+          <div class="ml-12">
+            <p class="color-secondary lighter mb-4">{{ item.name }}</p>
+            <div v-if="item.id !== 'starCharts'" class="flex align-baseline">
+              <h2>{{ numberFormat(item.sum?.[0]) }}</h2>
+              <span v-if="item.sum.length > 1" class="ml-12" style="color: #f54a45"
+                >+{{ numberFormat(item.sum?.[1]) }}</span
+              >
+            </div>
+            <div v-else class="flex align-center mr-8">
+              <AppIcon iconName="app-like-color"></AppIcon>
+              <h2 class="ml-4">{{ item.sum?.[0] }}</h2>
+              <AppIcon class="ml-12" iconName="app-oppose-color"></AppIcon>
+              <h2 class="ml-4">{{ item.sum?.[1] }}</h2>
+            </div>
+          </div>
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+  <el-row :gutter="16">
+    <el-col
+      :xs="24"
+      :sm="24"
+      :md="24"
+      :lg="12"
+      :xl="12"
+      v-for="(item, index) in statisticsType"
+      :key="index"
+      class="mb-16"
+    >
+      <el-card shadow="never">
+        <div class="p-8">
+          <AppCharts height="316px" :id="item.id" type="line" :option="item.option" />
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import AppCharts from '@/components/app-charts/index.vue'
+import { getAttrsArray, getSum, numberFormat } from '@/utils/utils'
+import { t } from '@/locales'
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => []
+  }
+})
+const statisticsType = computed(() => [
+  {
+    id: 'customerCharts',
+    // @ts-ignore
+    name: t('views.applicationOverview.monitor.charts.customerTotal'),
+    icon: 'app-user',
+    background: '#EBF1FF',
+    color: '#3370FF',
+    sum: [
+      getSum(getAttrsArray(props.data, 'customer_num') || 0),
+      getSum(getAttrsArray(props.data, 'customer_added_count') || 0)
+    ],
+    option: {
+      title: t('views.applicationOverview.monitor.charts.customerTotal'),
+      xData: getAttrsArray(props.data, 'day'),
+      yData: [
+        {
+          name: t('views.applicationOverview.monitor.charts.customerTotal'),
+          type: 'line',
+          area: true,
+          data: getAttrsArray(props.data, 'customer_num')
+        },
+        {
+          name:  t('views.applicationOverview.monitor.charts.customerNew'),
+          type: 'line',
+          area: true,
+          data: getAttrsArray(props.data, 'customer_added_count')
+        }
+      ]
+    }
+  },
+  {
+    id: 'chatRecordCharts',
+    name:  t('views.applicationOverview.monitor.charts.queryCount'),
+    icon: 'app-question',
+    background: '#FFF3E5',
+    color: '#FF8800',
+    sum: [getSum(getAttrsArray(props.data, 'chat_record_count') || 0)],
+    option: {
+      title: t('views.applicationOverview.monitor.charts.queryCount'),
+      xData: getAttrsArray(props.data, 'day'),
+      yData: [
+        {
+          type: 'line',
+          data: getAttrsArray(props.data, 'chat_record_count')
+        }
+      ]
+    }
+  },
+  {
+    id: 'tokensCharts',
+    name: t('views.applicationOverview.monitor.charts.tokensTotal'),
+    icon: 'app-tokens',
+    background: '#E5FBF8',
+    color: '#00D6B9',
+    sum: [getSum(getAttrsArray(props.data, 'tokens_num') || 0)],
+    option: {
+      title: t('views.applicationOverview.monitor.charts.tokensTotal'),
+      xData: getAttrsArray(props.data, 'day'),
+      yData: [
+        {
+          type: 'line',
+          data: getAttrsArray(props.data, 'tokens_num')
+        }
+      ]
+    }
+  },
+  {
+    id: 'starCharts',
+    name: t('views.applicationOverview.monitor.charts.userSatisfaction'),
+    icon: 'app-user-stars',
+    background: '#FEEDEC',
+    color: '#F54A45',
+    sum: [
+      getSum(getAttrsArray(props.data, 'star_num') || 0),
+      getSum(getAttrsArray(props.data, 'trample_num') || 0)
+    ],
+    option: {
+      title: t('views.applicationOverview.monitor.charts.userSatisfaction'),
+      xData: getAttrsArray(props.data, 'day'),
+      yData: [
+        {
+          name: t('views.applicationOverview.monitor.charts.approval'),
+          type: 'line',
+          data: getAttrsArray(props.data, 'star_num')
+        },
+        {
+          name: t('views.applicationOverview.monitor.charts.disapproval'),
+          type: 'line',
+          data: getAttrsArray(props.data, 'trample_num')
+        }
+      ]
+    }
+  }
+])
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue b/ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue
new file mode 100644
index 000000000..076ff7118
--- /dev/null
+++ b/ui/src/views/application-overview/component/XPackDisplaySettingDialog.vue
@@ -0,0 +1,639 @@
+<template>
+  <el-dialog
+    :title="$t('views.applicationOverview.appInfo.SettingDisplayDialog.dialogTitle')"
+    width="900"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    align-center
+    class="display-setting-dialog"
+  >
+    <template #header="{ titleId, titleClass }">
+      <div class="flex-between mb-8">
+        <h4 :id="titleId" :class="titleClass">
+          {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.dialogTitle') }}
+        </h4>
+        <div class="flex align-center">
+          <el-button type="primary" @click.prevent="resetForm" link>
+            <el-icon class="mr-4">
+              <Refresh />
+            </el-icon>
+            {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.restoreDefault') }}
+          </el-button>
+          <el-divider direction="vertical" />
+        </div>
+      </div>
+    </template>
+
+    <div class="flex">
+      <div class="setting-preview border border-r-4 mr-16" style="min-width: 400px">
+        <div class="setting-preview-container">
+          <div class="setting-preview-header" :style="customStyle">
+            <div class="flex-between">
+              <div class="flex align-center">
+                <div class="mr-12 ml-24 flex">
+                  <AppAvatar
+                    v-if="isAppIcon(detail?.icon)"
+                    shape="square"
+                    :size="32"
+                    style="background: none"
+                  >
+                    <img :src="detail?.icon" alt="" />
+                  </AppAvatar>
+                  <AppAvatar
+                    v-else-if="detail?.name"
+                    :name="detail?.name"
+                    pinyinColor
+                    shape="square"
+                    :size="32"
+                  />
+                </div>
+
+                <h4 class="ellipsis">
+                  {{ detail?.name || $t('views.application.applicationForm.form.appName.label') }}
+                </h4>
+              </div>
+              <div class="mr-16">
+                <el-button link>
+                  <AppIcon
+                    :iconName="'app-magnify'"
+                    :style="{
+                      color: xpackForm.custom_theme?.header_font_color
+                    }"
+                    style="font-size: 20px"
+                  ></AppIcon>
+                </el-button>
+                <el-button link>
+                  <el-icon
+                    :size="20"
+                    class="color-secondary"
+                    :style="{
+                      color: xpackForm.custom_theme?.header_font_color
+                    }"
+                  >
+                    <Close />
+                  </el-icon>
+                </el-button>
+              </div>
+            </div>
+          </div>
+          <div>
+            <div class="p-16" style="position: relative">
+              <div class="flex">
+                <div class="avatar" v-if="xpackForm.show_avatar">
+                  <el-image
+                    v-if="imgUrl.avatar"
+                    :src="imgUrl.avatar"
+                    alt=""
+                    fit="cover"
+                    style="width: 28px; height: 28px; display: block"
+                  />
+                  <LogoIcon
+                    v-else
+                    height="28px"
+                    style="width: 28px; height: 28px; display: block"
+                  />
+                </div>
+
+                <img
+                  src="@/assets/display-bg2.png"
+                  alt=""
+                  :width="
+                    xpackForm.show_avatar
+                      ? xpackForm.show_user_avatar
+                        ? '232px'
+                        : '270px'
+                      : xpackForm.show_user_avatar
+                        ? '260px'
+                        : '300px'
+                  "
+                />
+              </div>
+              <div class="flex mt-4" style="justify-content: flex-end">
+                <img
+                  src="@/assets/display-bg3.png"
+                  alt=""
+                  :width="
+                    xpackForm.show_user_avatar
+                      ? xpackForm.show_avatar
+                        ? '227px'
+                        : '255px'
+                      : xpackForm.show_avatar
+                        ? '265px'
+                        : '292px'
+                  "
+                  style="object-fit: contain"
+                />
+                <div class="avatar ml-8" v-if="xpackForm.show_user_avatar">
+                  <el-image
+                    v-if="imgUrl.user_avatar"
+                    :src="imgUrl.user_avatar"
+                    alt=""
+                    fit="cover"
+                    style="width: 28px; height: 28px; display: block"
+                  />
+                  <AppAvatar v-else>
+                    <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
+                  </AppAvatar>
+                </div>
+              </div>
+            </div>
+            <div
+              style="position: absolute; bottom: 0; padding-bottom: 8px; box-sizing: border-box"
+              class="p-16 text-center w-full"
+            >
+              <img src="@/assets/display-bg1.png" alt="" class="w-full" />
+              <el-text type="info" v-if="xpackForm.disclaimer" class="mt-8" style="font-size: 12px">
+                <auto-tooltip :content="xpackForm.disclaimer_value">
+                  {{ xpackForm.disclaimer_value }}
+                </auto-tooltip>
+              </el-text>
+            </div>
+          </div>
+        </div>
+
+        <div class="float_icon">
+          <el-image
+            v-if="imgUrl.float_icon"
+            :src="imgUrl.float_icon"
+            alt=""
+            fit="cover"
+            style="width: 40px; height: 40px; display: block"
+          />
+          <img
+            v-else
+            src="/MaxKB.gif"
+            height="50px"
+            style="width: 40px; height: 40px; display: block"
+          />
+        </div>
+      </div>
+
+      <el-form ref="displayFormRef" :model="xpackForm">
+        <el-row class="w-full mb-8">
+          <el-col :span="12">
+            <h5 class="mb-8">
+              {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.customThemeColor') }}
+            </h5>
+            <div>
+              <el-color-picker v-model="xpackForm.custom_theme.theme_color" />
+              {{
+                !xpackForm.custom_theme.theme_color
+                  ? $t('views.applicationOverview.appInfo.SettingDisplayDialog.default')
+                  : ''
+              }}
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <h5 class="mb-8">
+              {{
+                $t('views.applicationOverview.appInfo.SettingDisplayDialog.headerTitleFontColor')
+              }}
+            </h5>
+            <el-color-picker v-model="xpackForm.custom_theme.header_font_color" />
+          </el-col>
+        </el-row>
+        <el-row class="w-full mb-8">
+          <h5 class="mb-8">
+            {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.languageLabel') }}
+          </h5>
+          <el-select v-model="xpackForm.language" clearable>
+            <el-option
+              v-for="item in langList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-row>
+        <el-card shadow="never" class="mb-8">
+          <div class="flex-between mb-8">
+            <span class="lighter">{{
+              $t('views.applicationOverview.appInfo.SettingDisplayDialog.AIAvatar')
+            }}</span>
+            <span class="flex align-center">
+              <el-checkbox v-model="xpackForm.show_avatar">{{
+                $t('views.applicationOverview.appInfo.SettingDisplayDialog.display')
+              }}</el-checkbox>
+              <el-upload
+                class="ml-8"
+                ref="uploadRef"
+                action="#"
+                :auto-upload="false"
+                :show-file-list="false"
+                accept="image/jpeg, image/png, image/gif"
+                :on-change="(file: any, fileList: any) => onChange(file, fileList, 'avatar')"
+              >
+                <el-button size="small">
+                  {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
+                </el-button>
+              </el-upload>
+            </span>
+          </div>
+          <el-text type="info" size="small">
+            {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.imageMessage') }}
+          </el-text>
+        </el-card>
+        <el-card shadow="never" class="mb-8">
+          <div class="flex-between mb-8">
+            <span class="lighter">{{
+              $t('views.applicationOverview.appInfo.SettingDisplayDialog.askUserAvatar')
+            }}</span>
+            <span class="flex align-center">
+              <el-checkbox v-model="xpackForm.show_user_avatar">
+                {{
+                  $t('views.applicationOverview.appInfo.SettingDisplayDialog.display')
+                }}</el-checkbox
+              >
+              <el-upload
+                class="ml-8"
+                ref="uploadRef"
+                action="#"
+                :auto-upload="false"
+                :show-file-list="false"
+                accept="image/jpeg, image/png, image/gif"
+                :on-change="(file: any, fileList: any) => onChange(file, fileList, 'user_avatar')"
+              >
+                <el-button size="small">
+                  {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
+                </el-button>
+              </el-upload>
+            </span>
+          </div>
+          <el-text type="info" size="small"
+            >{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.imageMessage') }}
+          </el-text>
+        </el-card>
+        <el-card shadow="never" class="mb-8">
+          <div class="flex-between mb-8">
+            <span class="lighter">{{
+              $t('views.applicationOverview.appInfo.SettingDisplayDialog.floatIcon')
+            }}</span>
+            <el-upload
+              ref="uploadRef"
+              action="#"
+              :auto-upload="false"
+              :show-file-list="false"
+              accept="image/jpeg, image/png, image/gif"
+              :on-change="(file: any, fileList: any) => onChange(file, fileList, 'float_icon')"
+            >
+              <el-button size="small">
+                {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
+              </el-button>
+            </el-upload>
+          </div>
+          <el-text type="info" size="small">
+            {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.imageMessage') }}
+          </el-text>
+          <div class="border-t mt-8">
+            <div class="flex-between mb-8">
+              <span class="lighter">{{
+                $t('views.applicationOverview.appInfo.SettingDisplayDialog.iconDefaultPosition')
+              }}</span>
+              <el-checkbox
+                v-model="xpackForm.draggable"
+                :label="
+                  $t('views.applicationOverview.appInfo.SettingDisplayDialog.draggablePosition')
+                "
+              />
+            </div>
+            <el-row :gutter="8" class="w-full mb-8">
+              <el-col :span="12">
+                <div class="flex align-center">
+                  <el-select v-model="xpackForm.float_location.x.type" style="width: 80px">
+                    <el-option
+                      :label="
+                        $t(
+                          'views.applicationOverview.appInfo.SettingDisplayDialog.iconPosition.left'
+                        )
+                      "
+                      value="left"
+                    />
+                    <el-option
+                      :label="
+                        $t(
+                          'views.applicationOverview.appInfo.SettingDisplayDialog.iconPosition.right'
+                        )
+                      "
+                      value="right"
+                    />
+                  </el-select>
+                  <el-input-number
+                    v-model="xpackForm.float_location.x.value"
+                    :min="0"
+                    :step="1"
+                    :precision="0"
+                    :value-on-clear="0"
+                    step-strictly
+                    controls-position="right"
+                  />
+                  <span class="ml-4">px</span>
+                </div>
+              </el-col>
+              <el-col :span="12">
+                <div class="flex align-center">
+                  <el-select v-model="xpackForm.float_location.y.type" style="width: 80px">
+                    <el-option
+                      :label="
+                        $t(
+                          'views.applicationOverview.appInfo.SettingDisplayDialog.iconPosition.top'
+                        )
+                      "
+                      value="top"
+                    />
+                    <el-option
+                      :label="
+                        $t(
+                          'views.applicationOverview.appInfo.SettingDisplayDialog.iconPosition.bottom'
+                        )
+                      "
+                      value="bottom"
+                    />
+                  </el-select>
+                  <el-input-number
+                    v-model="xpackForm.float_location.y.value"
+                    :min="0"
+                    :step="1"
+                    :precision="0"
+                    :value-on-clear="0"
+                    step-strictly
+                    controls-position="right"
+                  />
+                  <span class="ml-4">px</span>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+
+        <el-space direction="vertical" alignment="start" :size="2">
+          <el-checkbox
+            v-model="xpackForm.show_source"
+            :label="
+              isWorkFlow(detail.type)
+                ? $t('views.applicationOverview.appInfo.SettingDisplayDialog.showExecutionDetail')
+                : $t('views.applicationOverview.appInfo.SettingDisplayDialog.showSourceLabel')
+            "
+          />
+          <el-checkbox
+            v-model="xpackForm.show_history"
+            :label="$t('views.applicationOverview.appInfo.SettingDisplayDialog.showHistory')"
+          />
+          <el-checkbox
+            v-model="xpackForm.show_guide"
+            :label="$t('views.applicationOverview.appInfo.SettingDisplayDialog.displayGuide')"
+          />
+          <el-checkbox
+            v-model="xpackForm.disclaimer"
+            :label="$t('views.applicationOverview.appInfo.SettingDisplayDialog.disclaimer')"
+            @change="changeDisclaimer"
+          />
+          <span v-if="xpackForm.disclaimer"
+            ><el-tooltip :content="xpackForm.disclaimer_value" placement="top">
+              <el-input
+                v-model="xpackForm.disclaimer_value"
+                style="width: 422px; margin-bottom: 10px"
+                @change="changeValue"
+                :maxlength="128"
+              /> </el-tooltip
+          ></span>
+        </el-space>
+      </el-form>
+    </div>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false">{{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submit(displayFormRef)" :loading="loading">
+          {{ $t('common.save') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { FormInstance, FormRules, UploadFiles } from 'element-plus'
+import { isWorkFlow } from '@/utils/application'
+import { isAppIcon } from '@/utils/common'
+import applicationXpackApi from '@/api/application-xpack'
+import { MsgSuccess, MsgError } from '@/utils/message'
+import { langList, t } from '@/locales'
+import useStore from '@/stores'
+import { cloneDeep } from 'lodash'
+
+const { user } = useStore()
+
+const route = useRoute()
+const {
+  params: { id }
+} = route
+
+const emit = defineEmits(['refresh'])
+
+const defaultSetting = {
+  show_source: false,
+  language: '',
+  show_history: true,
+  draggable: true,
+  show_guide: true,
+  avatar: '',
+  avatar_url: '',
+  float_icon: '',
+  float_icon_url: '',
+  user_avatar: '',
+  user_avatar_url: '',
+  disclaimer: false,
+  disclaimer_value: t('views.applicationOverview.appInfo.SettingDisplayDialog.disclaimerValue'),
+  custom_theme: {
+    theme_color: '',
+    header_font_color: '#1f2329'
+  },
+  float_location: {
+    y: { type: 'bottom', value: 30 },
+    x: { type: 'right', value: 0 }
+  },
+  show_avatar: true,
+  show_user_avatar: false
+}
+
+const displayFormRef = ref()
+
+const xpackForm = ref<any>({
+  show_source: false,
+  language: '',
+  show_history: false,
+  draggable: false,
+  show_guide: false,
+  avatar: '',
+  avatar_url: '',
+  float_icon: '',
+  float_icon_url: '',
+  user_avatar: '',
+  user_avatar_url: '',
+  disclaimer: false,
+  disclaimer_value: t('views.applicationOverview.appInfo.SettingDisplayDialog.disclaimerValue'),
+  custom_theme: {
+    theme_color: '',
+    header_font_color: '#1f2329'
+  },
+  float_location: {
+    y: { type: 'bottom', value: 30 },
+    x: { type: 'right', value: 0 }
+  },
+  show_avatar: true,
+  show_user_avatar: false
+})
+
+const imgUrl = ref<any>({
+  avatar: '',
+  float_icon: '',
+  user_avatar: ''
+})
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+
+const detail = ref<any>(null)
+
+const customStyle = computed(() => {
+  return {
+    background: xpackForm.value.custom_theme?.theme_color,
+    color: xpackForm.value.custom_theme?.header_font_color
+  }
+})
+
+function resetForm() {
+  xpackForm.value = cloneDeep(defaultSetting)
+  imgUrl.value = {
+    avatar: '',
+    float_icon: '',
+    user_avatar: ''
+  }
+}
+
+const onChange = (file: any, fileList: UploadFiles, attr: string) => {
+  //1、判断文件大小是否合法，文件限制不能大于 10 MB
+  const isLimit = file?.size / 1024 / 1024 < 10
+  if (!isLimit) {
+    // @ts-ignore
+    MsgError(t('views.applicationOverview.appInfo.EditAvatarDialog.fileSizeExceeded'))
+    return false
+  } else {
+    xpackForm.value[attr] = file.raw
+    imgUrl.value[attr] = URL.createObjectURL(file.raw)
+    xpackForm.value[`${attr}_url`] = ''
+  }
+}
+
+const open = (data: any, content: any) => {
+  detail.value = content
+  xpackForm.value.show_source = data.show_source
+  xpackForm.value.show_history = data.show_history
+  xpackForm.value.language = data.language
+  xpackForm.value.draggable = data.draggable
+  xpackForm.value.show_guide = data.show_guide
+  imgUrl.value.avatar = data.avatar
+  imgUrl.value.float_icon = data.float_icon
+  imgUrl.value.user_avatar = data.user_avatar
+  xpackForm.value.disclaimer = data.disclaimer
+  xpackForm.value.disclaimer_value = data.disclaimer_value
+  if (
+    xpackForm.value.disclaimer_value ===
+    t('views.applicationOverview.appInfo.SettingDisplayDialog.disclaimerValue')
+  ) {
+    xpackForm.value.disclaimer_value = t(
+      'views.applicationOverview.appInfo.SettingDisplayDialog.disclaimerValue'
+    )
+  }
+  xpackForm.value.avatar_url = data.avatar
+  xpackForm.value.user_avatar_url = data.user_avatar
+  xpackForm.value.float_icon_url = data.float_icon
+  xpackForm.value.show_avatar = data.show_avatar
+  xpackForm.value.show_user_avatar = data.show_user_avatar
+  xpackForm.value.custom_theme = {
+    theme_color: data.custom_theme?.theme_color || '',
+    header_font_color: data.custom_theme?.header_font_color || '#1f2329'
+  }
+  xpackForm.value.float_location = data.float_location
+  dialogVisible.value = true
+}
+
+const changeValue = (value: string) => {
+  xpackForm.value.disclaimer_value = value
+}
+
+const changeDisclaimer = (value: boolean) => {
+  xpackForm.value.disclaimer = value
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      let fd = new FormData()
+      Object.keys(xpackForm.value).map((item) => {
+        if (['custom_theme', 'float_location'].includes(item)) {
+          fd.append(item, JSON.stringify(xpackForm.value[item]))
+        } else {
+          fd.append(item, xpackForm.value[item])
+        }
+      })
+      applicationXpackApi.putAccessToken(id as string, fd, loading).then((res) => {
+        emit('refresh')
+        // @ts-ignore
+        MsgSuccess(t('common.settingSuccess'))
+        dialogVisible.value = false
+      })
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss">
+.setting-preview {
+  background: #f5f6f7;
+  height: 570px;
+  position: relative;
+
+  .float_icon {
+    position: absolute;
+    right: 8px;
+    bottom: 15px;
+  }
+
+  .setting-preview-container {
+    position: absolute;
+    left: 16px;
+    top: 25px;
+    border-radius: 8px;
+    border: 1px solid #ffffff;
+    background: var(--dialog-bg-gradient-color);
+    box-shadow: 0px 4px 8px 0px rgba(31, 35, 41, 0.1);
+    overflow: hidden;
+    width: 330px;
+    height: 520px;
+
+    .setting-preview-header {
+      background: var(--app-header-bg-color);
+      height: var(--app-header-height);
+      line-height: var(--app-header-height);
+      box-sizing: border-box;
+      border-bottom: 1px solid var(--el-border-color);
+    }
+  }
+}
+
+.display-setting-dialog {
+  .el-dialog__header {
+    padding-right: 8px;
+  }
+
+  .el-dialog__headerbtn {
+    top: 8px;
+  }
+}
+</style>
diff --git a/ui/src/views/application-overview/index.vue b/ui/src/views/application-overview/index.vue
new file mode 100644
index 000000000..6119a7c66
--- /dev/null
+++ b/ui/src/views/application-overview/index.vue
@@ -0,0 +1,434 @@
+<template>
+  <LayoutContainer :header="$t('views.applicationOverview.title')">
+    <el-scrollbar>
+      <div class="main-calc-height p-24">
+        <h4 class="title-decoration-1 mb-16">
+          {{ $t('views.applicationOverview.appInfo.header') }}
+        </h4>
+        <el-card shadow="never" class="overview-card" v-loading="loading">
+          <div class="title flex align-center">
+            <div
+              class="edit-avatar mr-12"
+              @mouseenter="showEditIcon = true"
+              @mouseleave="showEditIcon = false"
+            >
+              <AppAvatar
+                v-if="isAppIcon(detail?.icon)"
+                shape="square"
+                :size="32"
+                style="background: none"
+              >
+                <img :src="detail?.icon" alt="" />
+              </AppAvatar>
+              <AppAvatar
+                v-else-if="detail?.name"
+                :name="detail?.name"
+                pinyinColor
+                shape="square"
+                :size="32"
+              />
+              <AppAvatar
+                v-if="showEditIcon"
+                shape="square"
+                class="edit-mask"
+                :size="32"
+                @click="openEditAvatar"
+              >
+                <el-icon><EditPen /></el-icon>
+              </AppAvatar>
+            </div>
+
+            <h4>{{ detail?.name }}</h4>
+          </div>
+
+          <el-row :gutter="12">
+            <el-col :span="12" class="mt-16">
+              <div class="flex">
+                <el-text type="info">{{
+                  $t('views.applicationOverview.appInfo.publicAccessLink')
+                }}</el-text>
+                <el-switch
+                  v-model="accessToken.is_active"
+                  class="ml-8"
+                  size="small"
+                  inline-prompt
+                  :active-text="$t('views.applicationOverview.appInfo.openText')"
+                  :inactive-text="$t('views.applicationOverview.appInfo.closeText')"
+                  :before-change="() => changeState(accessToken.is_active)"
+                />
+              </div>
+
+              <div class="mt-4 mb-16 url-height flex align-center" style="margin-bottom: 37px">
+                <span class="vertical-middle lighter break-all ellipsis-1">
+                  {{ shareUrl }}
+                </span>
+                <el-tooltip effect="dark" :content="$t('common.copy')" placement="top">
+                  <el-button type="primary" text @click="copyClick(shareUrl)">
+                    <AppIcon iconName="app-copy"></AppIcon>
+                  </el-button>
+                </el-tooltip>
+                <el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
+                  <el-button
+                    @click="refreshAccessToken"
+                    type="primary"
+                    text
+                    style="margin-left: 1px"
+                  >
+                    <el-icon><RefreshRight /></el-icon>
+                  </el-button>
+                </el-tooltip>
+              </div>
+              <div>
+                <el-button
+                  v-if="accessToken?.is_active"
+                  :disabled="!accessToken?.is_active"
+                  type="primary"
+                  tag="a"
+                  :href="shareUrl"
+                  target="_blank"
+                >
+                  {{ $t('views.applicationOverview.appInfo.demo') }}
+                </el-button>
+                <el-button v-else :disabled="!accessToken?.is_active" type="primary">
+                  {{ $t('views.applicationOverview.appInfo.demo') }}
+                </el-button>
+                <el-button :disabled="!accessToken?.is_active" @click="openDialog">
+                  {{ $t('views.applicationOverview.appInfo.embedInWebsite') }}
+                </el-button>
+                <el-button @click="openLimitDialog">
+                  {{ $t('views.applicationOverview.appInfo.accessControl') }}
+                </el-button>
+                <el-button @click="openDisplaySettingDialog">
+                  {{ $t('views.applicationOverview.appInfo.displaySetting') }}
+                </el-button>
+              </div>
+            </el-col>
+            <el-col :span="12" class="mt-16">
+              <div class="flex">
+                <el-text type="info"
+                  >{{ $t('views.applicationOverview.appInfo.apiAccessCredentials') }}
+                </el-text>
+              </div>
+              <div class="mt-4 mb-16 url-height">
+                <div>
+                  <el-text>API {{ $t('common.fileUpload.document') }}：</el-text
+                  ><el-button
+                    type="primary"
+                    link
+                    @click="toUrl(apiUrl)"
+                    class="vertical-middle lighter break-all"
+                  >
+                    {{ apiUrl }}
+                  </el-button>
+                </div>
+                <div class="flex align-center">
+                  <span class="flex">
+                    <el-text style="width: 80px">Base URL：</el-text>
+                  </span>
+
+                  <span class="vertical-middle lighter break-all ellipsis-1">{{
+                    baseUrl + id
+                  }}</span>
+                  <el-tooltip effect="dark" :content="$t('common.copy')" placement="top">
+                    <el-button type="primary" text @click="copyClick(baseUrl + id)">
+                      <AppIcon iconName="app-copy"></AppIcon>
+                    </el-button>
+                  </el-tooltip>
+                </div>
+              </div>
+              <div>
+                <el-button @click="openAPIKeyDialog">{{
+                  $t('views.applicationOverview.appInfo.apiKey')
+                }}</el-button>
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
+        <h4 class="title-decoration-1 mt-16 mb-16">
+          {{ $t('views.applicationOverview.monitor.monitoringStatistics') }}
+        </h4>
+        <div class="mb-16">
+          <el-select
+            v-model="history_day"
+            class="mr-12"
+            @change="changeDayHandle"
+            style="width: 180px"
+          >
+            <el-option
+              v-for="item in dayOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+          <el-date-picker
+            v-if="history_day === 'other'"
+            v-model="daterangeValue"
+            type="daterange"
+            :start-placeholder="$t('views.applicationOverview.monitor.startDatePlaceholder')"
+            :end-placeholder="$t('views.applicationOverview.monitor.endDatePlaceholder')"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            @change="changeDayRangeHandle"
+          />
+        </div>
+        <div v-loading="statisticsLoading">
+          <StatisticsCharts :data="statisticsData" />
+        </div>
+      </div>
+    </el-scrollbar>
+    <EmbedDialog
+      ref="EmbedDialogRef"
+      :data="detail"
+      :api-input-params="mapToUrlParams(apiInputParams)"
+    />
+    <APIKeyDialog ref="APIKeyDialogRef" />
+    <LimitDialog ref="LimitDialogRef" @refresh="refresh" />
+    <EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshIcon" />
+    <XPackDisplaySettingDialog
+      ref="XPackDisplaySettingDialogRef"
+      @refresh="refresh"
+      v-if="user.isEnterprise()"
+    />
+    <DisplaySettingDialog ref="DisplaySettingDialogRef" @refresh="refresh" v-else />
+  </LayoutContainer>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import EmbedDialog from './component/EmbedDialog.vue'
+import APIKeyDialog from './component/APIKeyDialog.vue'
+import LimitDialog from './component/LimitDialog.vue'
+import DisplaySettingDialog from './component/DisplaySettingDialog.vue'
+import XPackDisplaySettingDialog from './component/XPackDisplaySettingDialog.vue'
+import EditAvatarDialog from './component/EditAvatarDialog.vue'
+import StatisticsCharts from './component/StatisticsCharts.vue'
+import applicationApi from '@/api/application'
+import overviewApi from '@/api/application-overview'
+import { nowDate, beforeDay } from '@/utils/time'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import { copyClick } from '@/utils/clipboard'
+import { isAppIcon } from '@/utils/common'
+import useStore from '@/stores'
+import { t } from '@/locales'
+const { user, application } = useStore()
+const route = useRoute()
+const {
+  params: { id }
+} = route as any
+
+const apiUrl = window.location.origin + '/doc/chat/'
+
+const baseUrl = window.location.origin + '/api/application/'
+
+const DisplaySettingDialogRef = ref()
+const XPackDisplaySettingDialogRef = ref()
+const EditAvatarDialogRef = ref()
+const LimitDialogRef = ref()
+const APIKeyDialogRef = ref()
+const EmbedDialogRef = ref()
+
+const accessToken = ref<any>({})
+const detail = ref<any>(null)
+
+const loading = ref(false)
+
+const urlParams = computed(() =>
+  mapToUrlParams(apiInputParams.value) ? '?' + mapToUrlParams(apiInputParams.value) : ''
+)
+const shareUrl = computed(
+  () => application.location + accessToken.value.access_token + urlParams.value
+)
+
+const dayOptions = [
+  {
+    value: 7,
+    // @ts-ignore
+    label: t('views.applicationOverview.monitor.pastDayOptions.past7Days')
+  },
+  {
+    value: 30,
+    label: t('views.applicationOverview.monitor.pastDayOptions.past30Days')
+  },
+  {
+    value: 90,
+    label: t('views.applicationOverview.monitor.pastDayOptions.past90Days')
+  },
+  {
+    value: 183,
+    label: t('views.applicationOverview.monitor.pastDayOptions.past183Days')
+  },
+  {
+    value: 'other',
+    label: t('views.applicationOverview.monitor.pastDayOptions.other')
+  }
+]
+
+const history_day = ref<number | string>(7)
+
+// 日期组件时间
+const daterangeValue = ref('')
+
+// 提交日期时间
+const daterange = ref({
+  start_time: '',
+  end_time: ''
+})
+
+const statisticsLoading = ref(false)
+const statisticsData = ref([])
+
+const showEditIcon = ref(false)
+const apiInputParams = ref([])
+
+function toUrl(url: string) {
+  window.open(url, '_blank')
+}
+function openDisplaySettingDialog() {
+  if (user.isEnterprise()) {
+    XPackDisplaySettingDialogRef.value?.open(accessToken.value, detail.value)
+  } else {
+    DisplaySettingDialogRef.value?.open(accessToken.value, detail.value)
+  }
+}
+function openEditAvatar() {
+  EditAvatarDialogRef.value.open(detail.value)
+}
+
+function changeDayHandle(val: number | string) {
+  if (val !== 'other') {
+    daterange.value.start_time = beforeDay(val)
+    daterange.value.end_time = nowDate
+    getAppStatistics()
+  }
+}
+
+function changeDayRangeHandle(val: string) {
+  daterange.value.start_time = val[0]
+  daterange.value.end_time = val[1]
+  getAppStatistics()
+}
+
+function getAppStatistics() {
+  overviewApi.getStatistics(id, daterange.value, statisticsLoading).then((res: any) => {
+    statisticsData.value = res.data
+  })
+}
+
+function refreshAccessToken() {
+  MsgConfirm(
+    t('views.applicationOverview.appInfo.refreshToken.msgConfirm1'),
+    t('views.applicationOverview.appInfo.refreshToken.msgConfirm2'),
+    {
+      confirmButtonText: t('common.confirm'),
+      cancelButtonText: t('common.cancel')
+    }
+  )
+    .then(() => {
+      const obj = {
+        access_token_reset: true
+      }
+      // @ts-ignore
+      const str = t('views.applicationOverview.appInfo.refreshToken.refreshSuccess')
+      updateAccessToken(obj, str)
+    })
+    .catch(() => {})
+}
+function changeState(bool: Boolean) {
+  const obj = {
+    is_active: !bool
+  }
+  const str = obj.is_active ? t('common.status.enableSuccess') : t('common.status.disableSuccess')
+  updateAccessToken(obj, str)
+    .then(() => {
+      return true
+    })
+    .catch(() => {
+      return false
+    })
+}
+
+async function updateAccessToken(obj: any, str: string) {
+  applicationApi.putAccessToken(id as string, obj, loading).then((res) => {
+    accessToken.value = res?.data
+    MsgSuccess(str)
+  })
+}
+
+function openLimitDialog() {
+  LimitDialogRef.value.open(accessToken.value)
+}
+
+function openAPIKeyDialog() {
+  APIKeyDialogRef.value.open()
+}
+function openDialog() {
+  EmbedDialogRef.value.open(accessToken.value?.access_token)
+}
+function getAccessToken() {
+  application.asyncGetAccessToken(id, loading).then((res: any) => {
+    accessToken.value = res?.data
+  })
+}
+
+function getDetail() {
+  application.asyncGetApplicationDetail(id, loading).then((res: any) => {
+    detail.value = res.data
+    detail.value.work_flow?.nodes
+      ?.filter((v: any) => v.id === 'base-node')
+      .map((v: any) => {
+        apiInputParams.value = v.properties.api_input_field_list
+          ? v.properties.api_input_field_list.map((v: any) => {
+              return {
+                name: v.variable,
+                value: v.default_value
+              }
+            })
+          : v.properties.input_field_list
+            ? v.properties.input_field_list
+                .filter((v: any) => v.assignment_method === 'api_input')
+                .map((v: any) => {
+                  return {
+                    name: v.variable,
+                    value: v.default_value
+                  }
+                })
+            : []
+      })
+  })
+}
+
+function refresh() {
+  getAccessToken()
+}
+
+function refreshIcon() {
+  getDetail()
+}
+
+function mapToUrlParams(map: any[]) {
+  const params = new URLSearchParams()
+
+  map.forEach((item: any) => {
+    params.append(encodeURIComponent(item.name), encodeURIComponent(item.value))
+  })
+
+  return params.toString() // 返回 URL 查询字符串
+}
+
+onMounted(() => {
+  getDetail()
+  getAccessToken()
+  changeDayHandle(history_day.value)
+})
+</script>
+<style lang="scss" scoped>
+.overview-card {
+  position: relative;
+  .active-button {
+    position: absolute;
+    right: 16px;
+    top: 21px;
+  }
+}
+</style>
diff --git a/ui/src/views/application-workflow/component/DropdownMenu.vue b/ui/src/views/application-workflow/component/DropdownMenu.vue
new file mode 100644
index 000000000..322bdde06
--- /dev/null
+++ b/ui/src/views/application-workflow/component/DropdownMenu.vue
@@ -0,0 +1,302 @@
+<template>
+  <div v-show="show" class="workflow-dropdown-menu border border-r-4">
+    <el-tabs v-model="activeName" class="workflow-dropdown-tabs">
+      <div style="display: flex; width: 100%; justify-content: center" class="mb-4">
+        <el-input
+          v-model="search_text"
+          style="width: 240px"
+          :placeholder="$t('views.applicationWorkflow.searchBar.placeholder')"
+        >
+          <template #suffix>
+            <el-icon class="el-input__icon"><search /></el-icon>
+          </template>
+        </el-input>
+      </div>
+
+      <el-tab-pane :label="$t('views.applicationWorkflow.baseComponent')" name="base">
+        <el-scrollbar height="400">
+          <div v-if="filter_menu_nodes.length > 0">
+            <template v-for="(item, index) in filter_menu_nodes" :key="index">
+              <div
+                class="workflow-dropdown-item cursor flex p-8-12"
+                @click.stop="clickNodes(item)"
+                @mousedown.stop="onmousedown(item)"
+              >
+                <component :is="iconComponent(`${item.type}-icon`)" class="mr-8 mt-4" :size="32" />
+                <div class="pre-wrap">
+                  <div class="lighter">{{ item.label }}</div>
+                  <el-text type="info" size="small">{{ item.text }}</el-text>
+                </div>
+              </div>
+            </template>
+          </div>
+          <div v-else class="ml-16 mt-8">
+            <el-text type="info">{{ $t('views.applicationWorkflow.tip.noData') }}</el-text>
+          </div>
+        </el-scrollbar>
+      </el-tab-pane>
+      <el-tab-pane :label="$t('views.functionLib.title')" name="function">
+        <el-scrollbar height="400">
+          <div
+            class="workflow-dropdown-item cursor flex p-8-12"
+            @click.stop="clickNodes(functionNode)"
+            @mousedown.stop="onmousedown(functionNode)"
+          >
+            <component :is="iconComponent(`function-lib-node-icon`)" class="mr-8 mt-4" :size="32" />
+            <div class="pre-wrap">
+              <div class="lighter">{{ functionNode.label }}</div>
+              <el-text type="info" size="small">{{ functionNode.text }}</el-text>
+            </div>
+          </div>
+
+          <template v-for="(item, index) in filter_function_lib_list" :key="index">
+            <div
+              class="workflow-dropdown-item cursor flex p-8-12 align-center"
+              @click.stop="clickNodes(functionLibNode, item, 'function')"
+              @mousedown.stop="onmousedown(functionLibNode, item, 'function')"
+            >
+              <component
+                :is="iconComponent(`function-lib-node-icon`)"
+                class="mr-8"
+                :size="32"
+                :item="item"
+              />
+
+              <div class="pre-wrap">
+                <div class="lighter ellipsis-1" :title="item.name">{{ item.name }}</div>
+                <p>
+                  <el-text
+                    class="ellipsis-1"
+                    type="info"
+                    size="small"
+                    :title="item.desc"
+                    v-if="item.desc"
+                    >{{ item.desc }}</el-text
+                  >
+                </p>
+              </div>
+            </div>
+          </template>
+        </el-scrollbar>
+      </el-tab-pane>
+      <el-tab-pane :label="$t('views.application.title')" name="application">
+        <el-scrollbar height="400">
+          <div v-if="filter_application_list.length > 0">
+            <template v-for="(item, index) in filter_application_list" :key="index">
+              <div
+                class="workflow-dropdown-item cursor flex align-center p-8-12"
+                @click.stop="clickNodes(applicationNode, item, 'application')"
+                @mousedown.stop="onmousedown(applicationNode, item, 'application')"
+              >
+                <component
+                  :is="iconComponent(`application-node-icon`)"
+                  class="mr-8"
+                  :size="32"
+                  :item="item"
+                />
+                <div class="pre-wrap" style="width: 60%">
+                  <div class="lighter ellipsis" :title="item.name">
+                    {{ item.name }}
+                  </div>
+                  <p>
+                    <el-text
+                      class="ellipsis"
+                      type="info"
+                      size="small"
+                      :title="item.desc"
+                      v-if="item.desc"
+                      >{{ item.desc }}</el-text
+                    >
+                  </p>
+                </div>
+                <div class="status-tag" style="margin-left: auto">
+                  <el-tag type="warning" v-if="isWorkFlow(item.type)" style="height: 22px">
+                    {{ $t('views.application.workflow') }}</el-tag
+                  >
+                  <el-tag class="blue-tag" v-else style="height: 22px">{{
+                    $t('views.application.simple')
+                  }}</el-tag>
+                </div>
+              </div>
+            </template>
+          </div>
+          <div v-else class="ml-16 mt-8">
+            <el-text type="info">{{ $t('views.applicationWorkflow.tip.noData') }}</el-text>
+          </div>
+        </el-scrollbar>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { menuNodes, functionLibNode, functionNode, applicationNode } from '@/workflow/common/data'
+import { iconComponent } from '@/workflow/icons/utils'
+import applicationApi from '@/api/application'
+import { isWorkFlow } from '@/utils/application'
+import { isAppIcon } from '@/utils/common'
+const search_text = ref<string>('')
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  id: {
+    type: String,
+    default: ''
+  },
+  workflowRef: Object
+})
+
+const emit = defineEmits(['clickNodes', 'onmousedown'])
+
+const loading = ref(false)
+const activeName = ref('base')
+
+const functionLibList = ref<any[]>([])
+const filter_function_lib_list = computed(() => {
+  return functionLibList.value.filter((item: any) =>
+    item.name.toLocaleLowerCase().includes(search_text.value.toLocaleLowerCase())
+  )
+})
+const applicationList = ref<any[]>([])
+const filter_application_list = computed(() => {
+  return applicationList.value.filter((item: any) =>
+    item.name.toLocaleLowerCase().includes(search_text.value.toLocaleLowerCase())
+  )
+})
+
+const filter_menu_nodes = computed(() => {
+  return menuNodes.filter((item) =>
+    item.label.toLocaleLowerCase().includes(search_text.value.toLocaleLowerCase())
+  )
+})
+function clickNodes(item: any, data?: any, type?: string) {
+  if (data) {
+    item['properties']['stepName'] = data.name
+    if (type == 'function') {
+      item['properties']['node_data'] = {
+        ...data,
+        function_lib_id: data.id,
+        input_field_list: data.input_field_list.map((field: any) => ({
+          ...field,
+          value: field.source == 'reference' ? [] : ''
+        }))
+      }
+    }
+    if (type == 'application') {
+      if (isWorkFlow(data.type)) {
+        const nodeData = data.work_flow.nodes[0].properties.node_data
+        const fileUploadSetting = nodeData.file_upload_setting
+        item['properties']['node_data'] = {
+          name: data.name,
+          icon: data.icon,
+          application_id: data.id,
+          api_input_field_list: data.work_flow.nodes[0].properties.api_input_field_list,
+          user_input_field_list: data.work_flow.nodes[0].properties.user_input_field_list,
+          ...(!fileUploadSetting
+            ? {}
+            : {
+                ...(fileUploadSetting.document ? { document_list: [] } : {}),
+                ...(fileUploadSetting.image ? { image_list: [] } : {}),
+                ...(fileUploadSetting.audio ? { audio_list: [] } : {})
+              })
+        }
+      } else {
+        item['properties']['node_data'] = {
+          name: data.name,
+          icon: data.icon,
+          application_id: data.id
+        }
+      }
+    }
+  }
+  props.workflowRef?.addNode(item)
+
+  emit('clickNodes', item)
+}
+
+function onmousedown(item: any, data?: any, type?: string) {
+  if (data) {
+    item['properties']['stepName'] = data.name
+    if (type == 'function') {
+      item['properties']['node_data'] = {
+        ...data,
+        function_lib_id: data.id,
+        input_field_list: data.input_field_list.map((field: any) => ({
+          ...field,
+          value: field.source == 'reference' ? [] : ''
+        }))
+      }
+    }
+    if (type == 'application') {
+      if (isWorkFlow(data.type)) {
+        const nodeData = data.work_flow.nodes[0].properties.node_data
+        const fileUploadSetting = nodeData.file_upload_setting
+        item['properties']['node_data'] = {
+          name: data.name,
+          icon: data.icon,
+          application_id: data.id,
+          api_input_field_list: data.work_flow.nodes[0].properties.api_input_field_list,
+          user_input_field_list: data.work_flow.nodes[0].properties.user_input_field_list,
+          ...(!fileUploadSetting
+            ? {}
+            : {
+                ...(fileUploadSetting.document ? { document_list: [] } : {}),
+                ...(fileUploadSetting.image ? { image_list: [] } : {}),
+                ...(fileUploadSetting.audio ? { audio_list: [] } : {})
+              })
+        }
+      } else {
+        item['properties']['node_data'] = {
+          name: data.name,
+          icon: data.icon,
+          application_id: data.id
+        }
+      }
+    }
+  }
+  props.workflowRef?.onmousedown(item)
+  emit('onmousedown', item)
+}
+
+function getList() {
+  applicationApi.listFunctionLib(props.id, loading).then((res: any) => {
+    functionLibList.value = res.data
+  })
+  applicationApi.getApplicationList(props.id, loading).then((res: any) => {
+    applicationList.value = res.data
+  })
+}
+
+onMounted(() => {
+  getList()
+})
+</script>
+<style lang="scss" scoped>
+.workflow-dropdown-menu {
+  -moz-user-select: none; /* Firefox */
+  -webkit-user-select: none; /* WebKit内核 */
+  -ms-user-select: none; /* IE10及以后 */
+  -khtml-user-select: none; /* 早期浏览器 */
+  -o-user-select: none; /* Opera */
+  user-select: none; /* CSS3属性 */
+  position: absolute;
+  top: 49px;
+  right: 122px;
+  z-index: 99;
+  width: 268px;
+  box-shadow: 0px 4px 8px 0px var(--app-text-color-light-1);
+  background: #ffffff;
+  padding-bottom: 8px;
+
+  .title {
+    padding: 12px 12px 4px;
+  }
+  .workflow-dropdown-item {
+    &:hover {
+      background: var(--app-text-color-light-1);
+    }
+  }
+}
+</style>
diff --git a/ui/src/views/application-workflow/component/PublishHistory.vue b/ui/src/views/application-workflow/component/PublishHistory.vue
new file mode 100644
index 000000000..5fcaaef3d
--- /dev/null
+++ b/ui/src/views/application-workflow/component/PublishHistory.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="workflow-publish-history border-l">
+    <h4 class="border-b p-16-24">{{ $t('views.applicationWorkflow.setting.releaseHistory') }}</h4>
+    <div class="list-height pt-0">
+      <el-scrollbar>
+        <div class="p-8 pt-0">
+          <common-list
+            :data="LogData"
+            class="mt-8"
+            v-loading="loading"
+            @click="clickListHandle"
+            @mouseenter="mouseenter"
+            @mouseleave="mouseId = ''"
+          >
+            <template #default="{ row, index }">
+              <div class="flex-between">
+                <div style="max-width: 80%">
+                  <h5 :class="index === 0 ? 'primary' : ''" class="flex">
+                    <ReadWrite
+                      @change="editName($event, row)"
+                      :data="row.name || datetimeFormat(row.update_time)"
+                      trigger="manual"
+                      :write="row.writeStatus"
+                      @close="closeWrite(row)"
+                    />
+                    <el-tag v-if="index === 0" class="default-tag ml-4">{{
+                      $t('views.applicationWorkflow.setting.latestRelease')
+                    }}</el-tag>
+                  </h5>
+                  <el-text type="info" class="color-secondary flex mt-8">
+                    <AppAvatar :size="20" class="avatar-grey mr-4">
+                      <el-icon><UserFilled /></el-icon>
+                    </AppAvatar>
+                    {{ row.publish_user_name }}
+                  </el-text>
+                </div>
+
+                <div @click.stop v-show="mouseId === row.id">
+                  <el-dropdown trigger="click" :teleported="false">
+                    <el-button text>
+                      <el-icon><MoreFilled /></el-icon>
+                    </el-button>
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <el-dropdown-item @click.stop="openEditVersion(row)">
+                          <el-icon><EditPen /></el-icon>
+                          {{ $t('common.edit') }}
+                        </el-dropdown-item>
+                        <el-dropdown-item @click="refreshVersion(row)">
+                          <el-icon><RefreshLeft /></el-icon>
+                          {{ $t('views.applicationWorkflow.setting.restoreCurrentVersion') }}
+                        </el-dropdown-item>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                </div>
+              </div>
+            </template>
+
+            <template #empty>
+              <div class="text-center">
+                <el-text type="info"> {{ $t('chat.noHistory') }}</el-text>
+              </div>
+            </template>
+          </common-list>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import applicationApi from '@/api/application'
+import { datetimeFormat } from '@/utils/time'
+import { MsgSuccess, MsgError } from '@/utils/message'
+import { t } from '@/locales'
+const route = useRoute()
+const {
+  params: { id }
+} = route as any
+
+const emit = defineEmits(['click', 'refreshVersion'])
+const loading = ref(false)
+const LogData = ref<any[]>([])
+
+const mouseId = ref('')
+
+function mouseenter(row: any) {
+  mouseId.value = row.id
+}
+
+function clickListHandle(item: any) {
+  emit('click', item)
+}
+
+function refreshVersion(item: any) {
+  emit('refreshVersion', item)
+}
+
+function openEditVersion(item: any) {
+  item['writeStatus'] = true
+}
+
+function closeWrite(item: any) {
+  item['writeStatus'] = false
+}
+
+function editName(val: string, item: any) {
+  if (val) {
+    const obj = {
+      name: val
+    }
+    applicationApi.putWorkFlowVersion(id as string, item.id, obj, loading).then(() => {
+      MsgSuccess(t('common.modifySuccess'))
+      item['writeStatus'] = false
+      getList()
+    })
+  } else {
+    MsgError(t('views.applicationWorkflow.tip.nameMessage'))
+  }
+}
+
+function getList() {
+  applicationApi.getWorkFlowVersion(id, loading).then((res: any) => {
+    LogData.value = res.data
+  })
+}
+
+onMounted(() => {
+  getList()
+})
+</script>
+<style lang="scss" scoped>
+.workflow-publish-history {
+  width: 320px;
+  position: absolute;
+  right: 0;
+  top: 57px;
+  background: #ffffff;
+  height: calc(100vh - 57px);
+  z-index: 9;
+  .list-height {
+    height: calc(100vh - 120px);
+  }
+}
+</style>
diff --git a/ui/src/views/application-workflow/index.vue b/ui/src/views/application-workflow/index.vue
new file mode 100644
index 000000000..4f1c1eb49
--- /dev/null
+++ b/ui/src/views/application-workflow/index.vue
@@ -0,0 +1,487 @@
+<template>
+  <div class="application-workflow" v-loading="loading">
+    <div class="header border-b flex-between p-12-24">
+      <div class="flex align-center">
+        <back-button @click="back"></back-button>
+        <h4>{{ detail?.name }}</h4>
+        <div v-if="showHistory && disablePublic">
+          <el-text type="info" class="ml-16 color-secondary"
+            >{{ $t('views.applicationWorkflow.info.previewVersion') }}
+            {{ currentVersion.name || datetimeFormat(currentVersion.update_time) }}</el-text
+          >
+        </div>
+        <el-text type="info" class="ml-16 color-secondary" v-else-if="saveTime"
+          >{{ $t('views.applicationWorkflow.info.saveTime')
+          }}{{ datetimeFormat(saveTime) }}</el-text
+        >
+      </div>
+      <div v-if="showHistory && disablePublic">
+        <el-button type="primary" class="mr-8" @click="refreshVersion()">
+          {{ $t('views.applicationWorkflow.setting.restoreVersion') }}
+        </el-button>
+        <el-divider direction="vertical" />
+        <el-button text @click="closeHistory">
+          <el-icon><Close /></el-icon>
+        </el-button>
+      </div>
+      <div v-else>
+        <el-button icon="Plus" @click="showPopover = !showPopover">
+          {{ $t('views.applicationWorkflow.setting.addComponent') }}
+        </el-button>
+        <el-button @click="clickShowDebug" :disabled="showDebug">
+          <AppIcon iconName="app-play-outlined" class="mr-4"></AppIcon>
+          {{ $t('views.applicationWorkflow.setting.debug') }}</el-button
+        >
+        <el-button @click="saveApplication(true)">
+          <AppIcon iconName="app-save-outlined" class="mr-4"></AppIcon>
+          {{ $t('common.save') }}
+        </el-button>
+        <el-button type="primary" @click="publicHandle">
+          {{ $t('views.applicationWorkflow.setting.public') }}
+        </el-button>
+
+        <el-dropdown trigger="click">
+          <el-button text @click.stop class="ml-8 mt-4">
+            <el-icon class="rotate-90"><MoreFilled /></el-icon>
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="openHistory">
+                <AppIcon iconName="app-history-outlined"></AppIcon>
+                {{ $t('views.applicationWorkflow.setting.releaseHistory') }}
+              </el-dropdown-item>
+              <el-dropdown-item>
+                <AppIcon iconName="app-save-outlined"></AppIcon>
+                {{ $t('views.applicationWorkflow.setting.autoSave') }}
+                <div class="ml-4">
+                  <el-switch size="small" v-model="isSave" @change="changeSave" />
+                </div>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </div>
+    <!-- 下拉框 -->
+    <el-collapse-transition>
+      <DropdownMenu
+        :show="showPopover"
+        :id="id"
+        v-click-outside="clickoutside"
+        @clickNodes="clickNodes"
+        @onmousedown="onmousedown"
+        :workflowRef="workflowRef"
+      />
+    </el-collapse-transition>
+    <!-- 主画布 -->
+    <div class="workflow-main" ref="workflowMainRef">
+      <workflow ref="workflowRef" v-if="detail" :data="detail?.work_flow" />
+    </div>
+    <!-- 调试 -->
+    <el-collapse-transition>
+      <div class="workflow-debug-container" :class="enlarge ? 'enlarge' : ''" v-if="showDebug">
+        <div class="workflow-debug-header" :class="!isDefaultTheme ? 'custom-header' : ''">
+          <div class="flex-between">
+            <div class="flex align-center">
+              <div class="mr-12 ml-24 flex">
+                <AppAvatar
+                  v-if="isAppIcon(detail?.icon)"
+                  shape="square"
+                  :size="32"
+                  style="background: none"
+                >
+                  <img :src="detail?.icon" alt="" />
+                </AppAvatar>
+                <AppAvatar
+                  v-else-if="detail?.name"
+                  :name="detail?.name"
+                  pinyinColor
+                  shape="square"
+                  :size="32"
+                />
+              </div>
+
+              <h4>
+                {{ detail?.name || $t('views.application.applicationForm.form.appName.label') }}
+              </h4>
+            </div>
+            <div class="mr-16">
+              <el-button link @click="enlarge = !enlarge">
+                <AppIcon
+                  :iconName="enlarge ? 'app-minify' : 'app-magnify'"
+                  class="color-secondary"
+                  style="font-size: 20px"
+                ></AppIcon>
+              </el-button>
+              <el-button link @click="showDebug = false">
+                <el-icon :size="20" class="color-secondary"><Close /></el-icon>
+              </el-button>
+            </div>
+          </div>
+        </div>
+        <div class="scrollbar-height">
+          <AiChat :application-details="detail" :type="'debug-ai-chat'"></AiChat>
+        </div>
+      </div>
+    </el-collapse-transition>
+    <!-- 发布历史 -->
+    <PublishHistory
+      v-if="showHistory"
+      @click="checkVersion"
+      v-click-outside="clickoutsideHistory"
+      @refreshVersion="refreshVersion"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, computed, nextTick } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import type { Action } from 'element-plus'
+import Workflow from '@/workflow/index.vue'
+import DropdownMenu from '@/views/application-workflow/component/DropdownMenu.vue'
+import PublishHistory from '@/views/application-workflow/component/PublishHistory.vue'
+import applicationApi from '@/api/application'
+import { isAppIcon } from '@/utils/common'
+import { MsgSuccess, MsgError, MsgConfirm } from '@/utils/message'
+import { datetimeFormat } from '@/utils/time'
+import useStore from '@/stores'
+import { WorkFlowInstance } from '@/workflow/common/validate'
+import { hasPermission } from '@/utils/permission'
+import { t } from '@/locales'
+
+const { user, application } = useStore()
+const router = useRouter()
+const route = useRoute()
+
+const isDefaultTheme = computed(() => {
+  return user.isDefaultTheme()
+})
+const {
+  params: { id }
+} = route as any
+
+let interval: any
+const workflowRef = ref()
+const workflowMainRef = ref()
+const loading = ref(false)
+const detail = ref<any>(null)
+
+const showPopover = ref(false)
+const showDebug = ref(false)
+const enlarge = ref(false)
+const saveTime = ref<any>('')
+const isSave = ref(false)
+const showHistory = ref(false)
+const disablePublic = ref(false)
+const currentVersion = ref<any>({})
+const cloneWorkFlow = ref(null)
+
+function back() {
+  if (JSON.stringify(cloneWorkFlow.value) !== JSON.stringify(getGraphData())) {
+    MsgConfirm(t('common.tip'), t('views.applicationWorkflow.tip.saveMessage'), {
+      confirmButtonText: t('views.applicationWorkflow.setting.exitSave'),
+      cancelButtonText: t('views.applicationWorkflow.setting.exit'),
+      type: 'warning',
+      distinguishCancelAndClose: true
+    })
+      .then(() => {
+        saveApplication(true, true)
+      })
+      .catch((action: Action) => {
+        action === 'cancel' && router.push({ path: `/application/${id}/WORK_FLOW/overview` })
+      })
+  } else {
+    router.push({ path: `/application/${id}/WORK_FLOW/overview` })
+  }
+}
+function clickoutsideHistory() {
+  if (!disablePublic.value) {
+    showHistory.value = false
+    disablePublic.value = false
+  }
+}
+
+function refreshVersion(item?: any) {
+  if (item) {
+    renderGraphData(item)
+  }
+  if (hasPermission(`APPLICATION:MANAGE:${id}`, 'AND') && isSave.value) {
+    initInterval()
+  }
+  showHistory.value = false
+  disablePublic.value = false
+}
+
+function checkVersion(item: any) {
+  disablePublic.value = true
+  currentVersion.value = item
+  renderGraphData(item)
+  closeInterval()
+}
+
+function renderGraphData(item: any) {
+  item.work_flow['nodes'].map((v: any) => {
+    v['properties']['noRender'] = true
+  })
+  detail.value.work_flow = item.work_flow
+  saveTime.value = item?.update_time
+  workflowRef.value?.clearGraphData()
+  nextTick(() => {
+    workflowRef.value?.render(item.work_flow)
+  })
+}
+
+function closeHistory() {
+  getDetail()
+  if (hasPermission(`APPLICATION:MANAGE:${id}`, 'AND') && isSave.value) {
+    initInterval()
+  }
+  showHistory.value = false
+  disablePublic.value = false
+}
+
+function openHistory() {
+  showHistory.value = true
+}
+
+function changeSave(bool: boolean) {
+  bool ? initInterval() : closeInterval()
+  localStorage.setItem('workflowAutoSave', bool.toString())
+}
+
+function clickNodes(item: any) {
+  // workflowRef.value?.addNode(item)
+  showPopover.value = false
+}
+
+function onmousedown(item: any) {
+  // workflowRef.value?.onmousedown(item)
+  showPopover.value = false
+}
+
+function clickoutside() {
+  showPopover.value = false
+}
+async function publicHandle() {
+  // 后执行发布
+  workflowRef.value
+    ?.validate()
+    .then(async () => {
+      const obj = {
+        work_flow: getGraphData()
+      }
+      await application.asyncPutApplication(id, obj, loading)
+      const workflow = new WorkFlowInstance(obj.work_flow)
+      try {
+        workflow.is_valid()
+      } catch (e: any) {
+        MsgError(e.toString())
+        return
+      }
+      applicationApi.putPublishApplication(id as String, obj, loading).then(() => {
+
+        application.asyncGetApplicationDetail(id, loading).then((res: any) => {
+          detail.value.name = res.data.name
+          MsgSuccess(t('views.applicationWorkflow.tip.publicSuccess'))
+        })
+      })
+    })
+    .catch((res: any) => {
+      const node = res.node
+      const err_message = res.errMessage
+      if (typeof err_message == 'string') {
+        MsgError(
+          res.node.properties?.stepName +
+            ` ${t('views.applicationWorkflow.node').toLowerCase()} ` +
+            err_message.toLowerCase()
+        )
+      } else {
+        const keys = Object.keys(err_message)
+        MsgError(
+          node.properties?.stepName +
+            ` ${t('views.applicationWorkflow.node').toLowerCase()} ` +
+            err_message[keys[0]]?.[0]?.message.toLowerCase()
+        )
+      }
+    })
+}
+
+const clickShowDebug = () => {
+  workflowRef.value
+    ?.validate()
+    .then(() => {
+      const graphData = getGraphData()
+      const workflow = new WorkFlowInstance(graphData)
+      try {
+        workflow.is_valid()
+        detail.value = {
+          ...detail.value,
+          type: 'WORK_FLOW',
+          ...workflow.get_base_node()?.properties.node_data,
+          work_flow: getGraphData()
+        }
+
+        showDebug.value = true
+      } catch (e: any) {
+        MsgError(e.toString())
+      }
+    })
+    .catch((res: any) => {
+      const node = res.node
+      const err_message = res.errMessage
+      if (typeof err_message == 'string') {
+        MsgError(
+          res.node.properties?.stepName + ` ${t('views.applicationWorkflow.node')}，` + err_message
+        )
+      } else {
+        const keys = Object.keys(err_message)
+        MsgError(
+          node.properties?.stepName +
+            ` ${t('views.applicationWorkflow.node')}，` +
+            err_message[keys[0]]?.[0]?.message
+        )
+      }
+    })
+}
+// function clickoutsideDebug(e: any) {
+//   if (workflowMainRef.value && e && e.target && workflowMainRef.value.contains(e?.target)) {
+//     showDebug.value = false
+//   }
+// }
+
+function getGraphData() {
+  return workflowRef.value?.getGraphData()
+}
+
+function getDetail() {
+  application.asyncGetApplicationDetail(id).then((res: any) => {
+    res.data?.work_flow['nodes'].map((v: any) => {
+      v['properties']['noRender'] = true
+    })
+    detail.value = res.data
+    detail.value.stt_model_id = res.data.stt_model
+    detail.value.tts_model_id = res.data.tts_model
+    detail.value.tts_type = res.data.tts_type
+    saveTime.value = res.data?.update_time
+    application.asyncGetAccessToken(id, loading).then((res: any) => {
+      detail.value = { ...detail.value, ...res.data }
+    })
+    workflowRef.value?.clearGraphData()
+    nextTick(() => {
+      workflowRef.value?.render(detail.value.work_flow)
+      cloneWorkFlow.value = getGraphData()
+    })
+  })
+}
+
+function saveApplication(bool?: boolean, back?: boolean) {
+  const obj = {
+    work_flow: getGraphData()
+  }
+  loading.value = back || false
+  application
+    .asyncPutApplication(id, obj)
+    .then((res) => {
+      saveTime.value = new Date()
+      if (bool) {
+        cloneWorkFlow.value = getGraphData()
+        MsgSuccess(t('common.saveSuccess'))
+        if (back) {
+          router.push({ path: `/application/${id}/WORK_FLOW/overview` })
+        }
+      }
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+/**
+ * 定时保存
+ */
+const initInterval = () => {
+  interval = setInterval(() => {
+    saveApplication()
+  }, 60000)
+}
+
+/**
+ * 关闭定时
+ */
+const closeInterval = () => {
+  if (interval) {
+    clearInterval(interval)
+  }
+}
+
+onMounted(() => {
+  getDetail()
+  const workflowAutoSave = localStorage.getItem('workflowAutoSave')
+  isSave.value = workflowAutoSave === 'true' ? true : false
+  // 初始化定时任务
+  if (hasPermission(`APPLICATION:MANAGE:${id}`, 'AND') && isSave.value) {
+    initInterval()
+  }
+})
+
+onBeforeUnmount(() => {
+  // 清除定时任务
+  closeInterval()
+  workflowRef.value?.clearGraphData()
+})
+</script>
+<style lang="scss">
+.application-workflow {
+  background: var(--app-layout-bg-color);
+  height: 100%;
+  .header {
+    background: #ffffff;
+  }
+  .workflow-main {
+    height: calc(100vh - 62px);
+    box-sizing: border-box;
+  }
+
+  .workflow-dropdown-tabs {
+    .el-tabs__nav-wrap {
+      padding: 0 16px;
+    }
+  }
+}
+
+.workflow-debug-container {
+  z-index: 2000;
+  position: relative;
+  border-radius: 8px;
+  border: 1px solid #ffffff;
+  background: var(--dialog-bg-gradient-color);
+  box-shadow: 0px 4px 8px 0px rgba(31, 35, 41, 0.1);
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  overflow: hidden;
+  width: 450px;
+  height: 600px;
+  .workflow-debug-header {
+    background: var(--app-header-bg-color);
+    height: var(--app-header-height);
+    line-height: var(--app-header-height);
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--el-border-color);
+  }
+  .scrollbar-height {
+    height: calc(100% - var(--app-header-height) - 24px);
+    padding-top: 24px;
+  }
+  &.enlarge {
+    width: 50% !important;
+    height: 100% !important;
+    bottom: 0 !important;
+    right: 0 !important;
+  }
+  .chat-width {
+    max-width: 100% !important;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/ui/src/views/application/ApplicationAccess.vue b/ui/src/views/application/ApplicationAccess.vue
new file mode 100644
index 000000000..ce2fe6aab
--- /dev/null
+++ b/ui/src/views/application/ApplicationAccess.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="p-16-24">
+    <h4 class="mb-16">{{ $t('views.application.applicationAccess.title') }}</h4>
+
+    <el-row :gutter="16">
+      <el-col
+        :xs="24"
+        :sm="24"
+        :md="12"
+        :lg="12"
+        :xl="12"
+        class="mb-16"
+        v-for="(item, index) in platforms"
+        :key="index"
+      >
+        <el-card shadow="hover" class="border-none cursor" style="--el-card-padding: 24px">
+          <div class="flex-between">
+            <div class="flex align-center ml-8 mr-8">
+              <img :src="item.logoSrc" alt="" class="icon" />
+              <div class="ml-12">
+                <h5 class="mb-4">{{ item.name }}</h5>
+                <el-text type="info" style="font-size: 12px">{{ item.description }}</el-text>
+              </div>
+            </div>
+            <div>
+              <el-switch
+                size="small"
+                v-model="item.isActive"
+                @change="changeStatus(item.key, item.isActive)"
+                :disabled="!item.exists"
+              />
+              <el-divider direction="vertical" />
+              <el-button class="mr-4" @click="openDrawer(item.key)">{{
+                $t('views.application.applicationAccess.setting')
+              }}</el-button>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <AccessSettingDrawer ref="AccessSettingDrawerRef" @refresh="refresh" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, onMounted } from 'vue'
+import AccessSettingDrawer from './component/AccessSettingDrawer.vue'
+import applicationApi from '@/api/application'
+import { MsgSuccess } from '@/utils/message'
+import { useRoute } from 'vue-router'
+import { t } from '@/locales'
+
+// 平台数据
+const platforms = reactive([
+  {
+    key: 'wecom',
+    logoSrc: new URL(`../../assets/logo_wechat-work.svg`, import.meta.url).href,
+    name: t('views.application.applicationAccess.wecom'),
+    description: t('views.application.applicationAccess.wecomTip'),
+    isActive: false,
+    exists: false
+  },
+  {
+    key: 'dingtalk',
+    logoSrc: new URL(`../../assets/logo_dingtalk.svg`, import.meta.url).href,
+    name: t('views.application.applicationAccess.dingtalk'),
+    description: t('views.application.applicationAccess.dingtalkTip'),
+    isActive: false,
+    exists: false
+  },
+  {
+    key: 'wechat',
+    logoSrc: new URL(`../../assets/logo_wechat.svg`, import.meta.url).href,
+    name: t('views.application.applicationAccess.wechat'),
+    description: t('views.application.applicationAccess.wechatTip'),
+    isActive: false,
+    exists: false
+  },
+  {
+    key: 'feishu',
+    logoSrc: new URL(`../../assets/logo_lark.svg`, import.meta.url).href,
+    name: t('views.application.applicationAccess.lark'),
+    description: t('views.application.applicationAccess.larkTip'),
+    isActive: false,
+    exists: false
+  },
+  {
+    key: 'slack',
+    logoSrc: new URL(`../../assets/logo_slack.svg`, import.meta.url).href,
+    name: t('views.application.applicationAccess.slack'),
+    description: t('views.application.applicationAccess.slackTip'),
+    isActive: false,
+    exists: false
+  }
+])
+
+const AccessSettingDrawerRef = ref()
+const loading = ref(false)
+const route = useRoute()
+const {
+  params: { id }
+} = route as any
+
+function openDrawer(key: string) {
+  AccessSettingDrawerRef.value.open(id, key)
+}
+
+function refresh() {
+  getPlatformStatus()
+}
+
+function getPlatformStatus() {
+  loading.value = true
+  applicationApi.getPlatformStatus(id).then((res: any) => {
+    platforms.forEach((platform) => {
+      platform.isActive = res.data[platform.key][1]
+      platform.exists = res.data[platform.key][0]
+    })
+    loading.value = false
+  })
+}
+
+function changeStatus(type: string, value: boolean) {
+  const data = {
+    type: type,
+    status: value
+  }
+  applicationApi.updatePlatformStatus(id, data).then(() => {
+    MsgSuccess(t('common.saveSuccess'))
+  })
+}
+
+onMounted(() => {
+  getPlatformStatus()
+})
+</script>
+
+<style lang="scss" scoped>
+.p-16-24 {
+  padding: 16px 24px;
+}
+
+.mb-16 {
+  margin-bottom: 16px;
+}
+
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.flex {
+  display: flex;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.ml-8 {
+  margin-left: 8px;
+}
+
+.mr-8 {
+  margin-right: 8px;
+}
+
+.ml-12 {
+  margin-left: 12px;
+}
+
+.mr-4 {
+  margin-right: 4px;
+}
+
+.cursor {
+  cursor: pointer;
+}
+
+.icon {
+  width: 32px; // 设置图标宽度
+  height: 32px; // 设置图标高度
+}
+</style>
diff --git a/ui/src/views/application/ApplicationSetting.vue b/ui/src/views/application/ApplicationSetting.vue
new file mode 100644
index 000000000..2bde0856c
--- /dev/null
+++ b/ui/src/views/application/ApplicationSetting.vue
@@ -0,0 +1,816 @@
+<template>
+  <LayoutContainer class="create-application">
+    <template #header>
+      <div class="flex-between w-full">
+        <h3>
+          {{ $t('common.setting') }}
+        </h3>
+        <el-button type="primary" @click="submit(applicationFormRef)" :disabled="loading">
+          {{ $t('views.application.applicationForm.buttons.publish') }}
+        </el-button>
+      </div>
+    </template>
+    <el-row v-loading="loading">
+      <el-col :span="10">
+        <div class="p-24 mb-16" style="padding-bottom: 0">
+          <h4 class="title-decoration-1">
+            {{ $t('views.applicationOverview.appInfo.header') }}
+          </h4>
+        </div>
+        <div class="scrollbar-height-left">
+          <el-scrollbar>
+            <el-form
+              hide-required-asterisk
+              ref="applicationFormRef"
+              :model="applicationForm"
+              :rules="rules"
+              label-position="top"
+              require-asterisk-position="right"
+              class="p-24"
+              style="padding-top: 0"
+            >
+              <el-form-item prop="name">
+                <template #label>
+                  <div class="flex-between">
+                    <span
+                      >{{ $t('views.application.applicationForm.form.appName.label') }}
+                      <span class="danger">*</span></span
+                    >
+                  </div>
+                </template>
+                <el-input
+                  v-model="applicationForm.name"
+                  maxlength="64"
+                  :placeholder="$t('views.application.applicationForm.form.appName.placeholder')"
+                  show-word-limit
+                  @blur="applicationForm.name = applicationForm.name?.trim()"
+                />
+              </el-form-item>
+              <el-form-item
+                :label="$t('views.application.applicationForm.form.appDescription.label')"
+              >
+                <el-input
+                  v-model="applicationForm.desc"
+                  type="textarea"
+                  :placeholder="
+                    $t('views.application.applicationForm.form.appDescription.placeholder')
+                  "
+                  :rows="3"
+                  maxlength="256"
+                  show-word-limit
+                />
+              </el-form-item>
+
+              <el-form-item :label="$t('views.application.applicationForm.form.aiModel.label')">
+                <template #label>
+                  <div class="flex-between">
+                    <span>{{ $t('views.application.applicationForm.form.aiModel.label') }}</span>
+
+                    <el-button
+                      type="primary"
+                      link
+                      @click="openAIParamSettingDialog"
+                      :disabled="!applicationForm.model_id"
+                    >
+                      {{ $t('common.paramSetting') }}
+                    </el-button>
+                  </div>
+                </template>
+                <ModelSelect
+                  v-model="applicationForm.model_id"
+                  :placeholder="$t('views.application.applicationForm.form.aiModel.placeholder')"
+                  :options="modelOptions"
+                  @change="model_change"
+                  @submitModel="getModel"
+                  showFooter
+                  :model-type="'LLM'"
+                ></ModelSelect>
+              </el-form-item>
+              <el-form-item
+                :label="$t('views.application.applicationForm.form.roleSettings.label')"
+              >
+                <MdEditorMagnify
+                  :title="$t('views.application.applicationForm.form.roleSettings.label')"
+                  v-model="applicationForm.model_setting.system"
+                  style="height: 120px"
+                  @submitDialog="submitSystemDialog"
+                  :placeholder="
+                    $t('views.application.applicationForm.form.roleSettings.placeholder')
+                  "
+                />
+              </el-form-item>
+              <el-form-item
+                prop="model_setting.no_references_prompt"
+                :rules="{
+                  required: applicationForm.model_id,
+                  message: $t('views.application.applicationForm.form.prompt.requiredMessage'),
+                  trigger: 'blur'
+                }"
+              >
+                <template #label>
+                  <div class="flex align-center">
+                    <span class="mr-4"
+                      >{{
+                        $t('views.application.applicationForm.form.prompt.label') +
+                        $t('views.application.applicationForm.form.prompt.noReferences')
+                      }}
+                    </span>
+                    <el-tooltip
+                      effect="dark"
+                      :content="
+                        $t('views.application.applicationForm.form.prompt.noReferencesTooltip', {
+                          question: '{question}'
+                        })
+                      "
+                      placement="right"
+                      popper-class="max-w-350"
+                    >
+                      <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+                    </el-tooltip>
+                    <span class="danger ml-4" v-if="applicationForm.model_id">*</span>
+                  </div>
+                </template>
+
+                <MdEditorMagnify
+                  :title="
+                    $t('views.application.applicationForm.form.prompt.label') +
+                    $t('views.application.applicationForm.form.prompt.noReferences')
+                  "
+                  v-model="applicationForm.model_setting.no_references_prompt"
+                  style="height: 120px"
+                  @submitDialog="submitNoReferencesPromptDialog"
+                  placeholder="{question}"
+                />
+              </el-form-item>
+              <el-form-item
+                :label="$t('views.application.applicationForm.form.historyRecord.label')"
+                @click.prevent
+              >
+                <el-input-number
+                  v-model="applicationForm.dialogue_number"
+                  :min="0"
+                  :value-on-clear="0"
+                  controls-position="right"
+                  class="w-full"
+                  :step="1"
+                  :step-strictly="true"
+                />
+              </el-form-item>
+              <el-form-item
+                label="$t('views.application.applicationForm.form.relatedKnowledgeBase')"
+              >
+                <template #label>
+                  <div class="flex-between">
+                    <span>{{
+                      $t('views.application.applicationForm.form.relatedKnowledge.label')
+                    }}</span>
+                    <div>
+                      <el-button type="primary" link @click="openParamSettingDialog">
+                        <AppIcon iconName="app-operation" class="mr-4"></AppIcon>
+                        {{ $t('common.paramSetting') }}
+                      </el-button>
+                      <el-button type="primary" link @click="openDatasetDialog">
+                        <el-icon class="mr-4">
+                          <Plus />
+                        </el-icon>
+                        {{ $t('common.add') }}
+                      </el-button>
+                    </div>
+                  </div>
+                </template>
+                <div class="w-full">
+                  <el-text type="info" v-if="applicationForm.dataset_id_list?.length === 0"
+                    >{{ $t('views.application.applicationForm.form.relatedKnowledge.placeholder') }}
+                  </el-text>
+                  <el-row :gutter="12" v-else>
+                    <el-col
+                      :xs="24"
+                      :sm="24"
+                      :md="24"
+                      :lg="12"
+                      :xl="12"
+                      class="mb-8"
+                      v-for="(item, index) in applicationForm.dataset_id_list"
+                      :key="index"
+                    >
+                      <el-card class="relate-dataset-card border-r-4" shadow="never">
+                        <div class="flex-between">
+                          <div class="flex align-center" style="width: 80%">
+                            <AppAvatar
+                              v-if="relatedObject(datasetList, item, 'id')?.type === '1'"
+                              class="mr-8 avatar-purple"
+                              shape="square"
+                              :size="32"
+                            >
+                              <img src="@/assets/knowledge/icon_web.svg" style="width: 58%" alt="" />
+                            </AppAvatar>
+                            <AppAvatar
+                              v-else-if="relatedObject(datasetList, item, 'id')?.type === '2'"
+                              class="mr-8 avatar-purple"
+                              shape="square"
+                              :size="32"
+                              style="background: none"
+                            >
+                              <img src="@/assets/knowledge/logo_lark.svg" style="width: 100%" alt="" />
+                            </AppAvatar>
+                            <AppAvatar v-else class="mr-8 avatar-blue" shape="square" :size="32">
+                              <img src="@/assets/knowledge/icon_document.svg" style="width: 58%" alt="" />
+                            </AppAvatar>
+
+                            <span
+                              class="ellipsis cursor"
+                              :title="relatedObject(datasetList, item, 'id')?.name"
+                            >
+                              {{ relatedObject(datasetList, item, 'id')?.name }}</span
+                            >
+                          </div>
+                          <el-button text @click="removeDataset(item)">
+                            <el-icon>
+                              <Close />
+                            </el-icon>
+                          </el-button>
+                        </div>
+                      </el-card>
+                    </el-col>
+                  </el-row>
+                </div>
+              </el-form-item>
+              <el-form-item
+                :label="$t('views.application.applicationForm.form.prompt.label')"
+                prop="model_setting.prompt"
+                :rules="{
+                  required: applicationForm.model_id,
+                  message: $t('views.application.applicationForm.form.prompt.requiredMessage'),
+                  trigger: 'blur'
+                }"
+              >
+                <template #label>
+                  <div class="flex align-center">
+                    <span class="mr-4">
+                      {{ $t('views.application.applicationForm.form.prompt.label') }}
+                      {{ $t('views.application.applicationForm.form.prompt.references') }}
+                    </span>
+                    <el-tooltip
+                      effect="dark"
+                      :content="
+                        $t('views.application.applicationForm.form.prompt.referencesTooltip', {
+                          data: '{data}',
+                          question: '{question}'
+                        })
+                      "
+                      popper-class="max-w-350"
+                      placement="right"
+                    >
+                      <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+                    </el-tooltip>
+                    <span class="danger ml-4" v-if="applicationForm.model_id">*</span>
+                  </div>
+                </template>
+
+                <MdEditorMagnify
+                  :title="
+                    $t('views.application.applicationForm.form.prompt.label') +
+                    $t('views.application.applicationForm.form.prompt.references')
+                  "
+                  v-model="applicationForm.model_setting.prompt"
+                  style="height: 150px"
+                  @submitDialog="submitPromptDialog"
+                  :placeholder="defaultPrompt"
+                />
+              </el-form-item>
+              <el-form-item :label="$t('views.application.applicationForm.form.prologue')">
+                <MdEditorMagnify
+                  :title="$t('views.application.applicationForm.form.prologue')"
+                  v-model="applicationForm.prologue"
+                  style="height: 150px"
+                  @submitDialog="submitPrologueDialog"
+                />
+              </el-form-item>
+              <el-form-item @click.prevent>
+                <template #label>
+                  <div class="flex-between">
+                    <span class="mr-4">
+                      {{ $t('views.application.applicationForm.form.reasoningContent.label') }}
+                    </span>
+
+                    <div class="flex">
+                      <el-button type="primary" link @click="openReasoningParamSettingDialog">
+                        <el-icon><Setting /></el-icon>
+                      </el-button>
+                      <el-switch
+                        class="ml-8"
+                        size="small"
+                        v-model="applicationForm.model_setting.reasoning_content_enable"
+                        @change="sttModelEnableChange"
+                      />
+                    </div>
+                  </div>
+                </template>
+              </el-form-item>
+
+              <el-form-item
+                prop="stt_model_id"
+                :rules="{
+                  required: applicationForm.stt_model_enable,
+                  message: $t('views.application.applicationForm.form.voiceInput.requiredMessage'),
+                  trigger: 'change'
+                }"
+              >
+                <template #label>
+                  <div class="flex-between">
+                    <span class="mr-4">
+                      {{ $t('views.application.applicationForm.form.voiceInput.label') }}
+                      <span class="danger" v-if="applicationForm.stt_model_enable">*</span>
+                    </span>
+
+                    <div class="flex">
+                      <el-checkbox
+                        v-if="applicationForm.stt_model_enable"
+                        v-model="applicationForm.stt_autosend"
+                        >{{
+                          $t('views.application.applicationForm.form.voiceInput.autoSend')
+                        }}</el-checkbox
+                      >
+                      <el-switch
+                        class="ml-8"
+                        size="small"
+                        v-model="applicationForm.stt_model_enable"
+                        @change="sttModelEnableChange"
+                      />
+                    </div>
+                  </div>
+                </template>
+                <ModelSelect
+                  v-show="applicationForm.stt_model_enable"
+                  v-model="applicationForm.stt_model_id"
+                  :placeholder="$t('views.application.applicationForm.form.voiceInput.placeholder')"
+                  :options="sttModelOptions"
+                  :model-type="'STT'"
+                ></ModelSelect>
+              </el-form-item>
+              <el-form-item
+                prop="tts_model_id"
+                :rules="{
+                  required: applicationForm.tts_type === 'TTS' && applicationForm.tts_model_enable,
+                  message: $t('views.application.applicationForm.form.voicePlay.requiredMessage'),
+                  trigger: 'change'
+                }"
+              >
+                <template #label>
+                  <div class="flex-between">
+                    <span class="mr-4"
+                      >{{ $t('views.application.applicationForm.form.voicePlay.label') }}
+                      <span
+                        class="danger"
+                        v-if="
+                          applicationForm.tts_type === 'TTS' && applicationForm.tts_model_enable
+                        "
+                        >*</span
+                      >
+                    </span>
+                    <div class="flex">
+                      <el-checkbox
+                        v-if="applicationForm.tts_model_enable"
+                        v-model="applicationForm.tts_autoplay"
+                        >{{
+                          $t('views.application.applicationForm.form.voicePlay.autoPlay')
+                        }}</el-checkbox
+                      >
+                      <el-switch
+                        class="ml-8"
+                        size="small"
+                        v-model="applicationForm.tts_model_enable"
+                        @change="ttsModelEnableChange"
+                      />
+                    </div>
+                  </div>
+                </template>
+                <div class="w-full">
+                  <el-radio-group
+                    v-model="applicationForm.tts_type"
+                    v-show="applicationForm.tts_model_enable"
+                    class="mb-8"
+                  >
+                    <el-radio value="BROWSER">{{
+                      $t('views.application.applicationForm.form.voicePlay.browser')
+                    }}</el-radio>
+                    <el-radio value="TTS">{{
+                      $t('views.application.applicationForm.form.voicePlay.tts')
+                    }}</el-radio>
+                  </el-radio-group>
+                </div>
+                <div class="flex-between w-full">
+                  <ModelSelect
+                    v-if="applicationForm.tts_type === 'TTS' && applicationForm.tts_model_enable"
+                    v-model="applicationForm.tts_model_id"
+                    :placeholder="
+                      $t('views.application.applicationForm.form.voicePlay.placeholder')
+                    "
+                    :options="ttsModelOptions"
+                    @change="ttsModelChange()"
+                    :model-type="'TTS'"
+                  ></ModelSelect>
+
+                  <el-button
+                    v-if="applicationForm.tts_type === 'TTS'"
+                    @click="openTTSParamSettingDialog"
+                    :disabled="!applicationForm.tts_model_id"
+                    class="ml-8"
+                  >
+                    <el-icon><Operation /></el-icon>
+                  </el-button>
+                </div>
+              </el-form-item>
+            </el-form>
+          </el-scrollbar>
+        </div>
+      </el-col>
+      <el-col :span="14" class="p-24 border-l">
+        <h4 class="title-decoration-1 mb-16">
+          {{ $t('views.application.applicationForm.title.appTest') }}
+        </h4>
+        <div class="dialog-bg">
+          <div class="flex align-center p-16 mb-8">
+            <div
+              class="edit-avatar mr-12"
+              @mouseenter="showEditIcon = true"
+              @mouseleave="showEditIcon = false"
+            >
+              <AppAvatar
+                v-if="isAppIcon(applicationForm?.icon)"
+                shape="square"
+                :size="32"
+                style="background: none"
+              >
+                <img :src="applicationForm?.icon" alt="" />
+              </AppAvatar>
+              <AppAvatar
+                v-else-if="applicationForm?.name"
+                :name="applicationForm?.name"
+                pinyinColor
+                shape="square"
+                :size="32"
+              />
+              <AppAvatar
+                v-if="showEditIcon"
+                shape="square"
+                class="edit-mask"
+                :size="32"
+                @click="openEditAvatar"
+              >
+                <el-icon><EditPen /></el-icon>
+              </AppAvatar>
+            </div>
+            <h4>
+              {{
+                applicationForm?.name || $t('views.application.applicationForm.form.appName.label')
+              }}
+            </h4>
+          </div>
+          <div class="scrollbar-height">
+            <AiChat :applicationDetails="applicationForm" :type="'debug-ai-chat'"></AiChat>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshForm" />
+    <TTSModeParamSettingDialog ref="TTSModeParamSettingDialogRef" @refresh="refreshTTSForm" />
+    <ParamSettingDialog ref="ParamSettingDialogRef" @refresh="refreshParam" />
+    <AddDatasetDialog
+      ref="AddDatasetDialogRef"
+      @addData="addDataset"
+      :data="datasetList"
+      @refresh="refresh"
+      :loading="datasetLoading"
+    />
+
+    <EditAvatarDialog ref="EditAvatarDialogRef" @refresh="refreshIcon" />
+    <ReasoningParamSettingDialog
+      ref="ReasoningParamSettingDialogRef"
+      @refresh="submitReasoningDialog"
+    />
+  </LayoutContainer>
+</template>
+<script setup lang="ts">
+import { reactive, ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { groupBy } from 'lodash'
+import AIModeParamSettingDialog from './component/AIModeParamSettingDialog.vue'
+import ParamSettingDialog from './component/ParamSettingDialog.vue'
+import AddDatasetDialog from './component/AddDatasetDialog.vue'
+import EditAvatarDialog from '@/views/application-overview/component/EditAvatarDialog.vue'
+import applicationApi from '@/api/application'
+import { isAppIcon } from '@/utils/common'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { ApplicationFormType } from '@/api/type/application'
+import { relatedObject } from '@/utils/utils'
+import { MsgSuccess, MsgWarning } from '@/utils/message'
+import useStore from '@/stores'
+import { t } from '@/locales'
+import TTSModeParamSettingDialog from './component/TTSModeParamSettingDialog.vue'
+import ReasoningParamSettingDialog from './component/ReasoningParamSettingDialog.vue'
+
+const { model, application } = useStore()
+
+const route = useRoute()
+const {
+  params: { id }
+} = route as any
+// @ts-ignore
+const defaultPrompt = t('views.application.applicationForm.form.prompt.defaultPrompt', {
+  data: '{data}',
+  question: '{question}'
+})
+
+const optimizationPrompt =
+  t('views.application.applicationForm.dialog.defaultPrompt1', {
+    question: '{question}'
+  }) +
+  '<data></data>' +
+  t('views.application.applicationForm.dialog.defaultPrompt2')
+
+const AIModeParamSettingDialogRef = ref<InstanceType<typeof AIModeParamSettingDialog>>()
+const ReasoningParamSettingDialogRef = ref<InstanceType<typeof ReasoningParamSettingDialog>>()
+const TTSModeParamSettingDialogRef = ref<InstanceType<typeof TTSModeParamSettingDialog>>()
+const ParamSettingDialogRef = ref<InstanceType<typeof ParamSettingDialog>>()
+
+const applicationFormRef = ref<FormInstance>()
+const AddDatasetDialogRef = ref()
+const EditAvatarDialogRef = ref()
+
+const loading = ref(false)
+const datasetLoading = ref(false)
+const applicationForm = ref<ApplicationFormType>({
+  name: '',
+  desc: '',
+  model_id: '',
+  dialogue_number: 1,
+  prologue: t('views.application.applicationForm.form.defaultPrologue'),
+  dataset_id_list: [],
+  dataset_setting: {
+    top_n: 3,
+    similarity: 0.6,
+    max_paragraph_char_number: 5000,
+    search_mode: 'embedding',
+    no_references_setting: {
+      status: 'ai_questioning',
+      value: '{question}'
+    }
+  },
+  model_setting: {
+    prompt: defaultPrompt,
+    system: t('views.application.applicationForm.form.roleSettings.placeholder'),
+    no_references_prompt: '{question}',
+    reasoning_content_enable: false
+  },
+  model_params_setting: {},
+  problem_optimization: false,
+  problem_optimization_prompt: optimizationPrompt,
+  stt_model_id: '',
+  tts_model_id: '',
+  stt_model_enable: false,
+  tts_model_enable: false,
+  tts_type: 'BROWSER',
+  type: 'SIMPLE'
+})
+
+const rules = reactive<FormRules<ApplicationFormType>>({
+  name: [
+    {
+      required: true,
+      message: t('views.application.applicationForm.form.appName.placeholder'),
+      trigger: 'blur'
+    }
+  ]
+})
+const modelOptions = ref<any>(null)
+const datasetList = ref([])
+const sttModelOptions = ref<any>(null)
+const ttsModelOptions = ref<any>(null)
+const showEditIcon = ref(false)
+
+function submitPrologueDialog(val: string) {
+  applicationForm.value.prologue = val
+}
+function submitPromptDialog(val: string) {
+  applicationForm.value.model_setting.prompt = val
+}
+function submitNoReferencesPromptDialog(val: string) {
+  applicationForm.value.model_setting.no_references_prompt = val
+}
+function submitSystemDialog(val: string) {
+  applicationForm.value.model_setting.system = val
+}
+function submitReasoningDialog(val: any) {
+  applicationForm.value.model_setting = {
+    ...applicationForm.value.model_setting,
+    ...val
+  }
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      application.asyncPutApplication(id, applicationForm.value, loading).then((res) => {
+        MsgSuccess(t('common.saveSuccess'))
+      })
+    }
+  })
+}
+const model_change = (model_id?: string) => {
+  applicationForm.value.model_id = model_id
+  if (model_id) {
+    AIModeParamSettingDialogRef.value?.reset_default(model_id, id)
+  } else {
+    refreshForm({})
+  }
+}
+const openAIParamSettingDialog = () => {
+  if (applicationForm.value.model_id) {
+    AIModeParamSettingDialogRef.value?.open(
+      applicationForm.value.model_id,
+      id,
+      applicationForm.value.model_params_setting
+    )
+  }
+}
+
+const openReasoningParamSettingDialog = () => {
+  ReasoningParamSettingDialogRef.value?.open(applicationForm.value.model_setting)
+}
+
+const openTTSParamSettingDialog = () => {
+  if (applicationForm.value.tts_model_id) {
+    TTSModeParamSettingDialogRef.value?.open(
+      applicationForm.value.tts_model_id,
+      id,
+      applicationForm.value.tts_model_params_setting
+    )
+  }
+}
+
+const openParamSettingDialog = () => {
+  ParamSettingDialogRef.value?.open(applicationForm.value)
+}
+
+function refreshParam(data: any) {
+  applicationForm.value = { ...applicationForm.value, ...data }
+}
+
+function refreshForm(data: any) {
+  applicationForm.value.model_params_setting = data
+}
+
+function refreshTTSForm(data: any) {
+  applicationForm.value.tts_model_params_setting = data
+}
+
+function removeDataset(id: any) {
+  if (applicationForm.value.dataset_id_list) {
+    applicationForm.value.dataset_id_list.splice(
+      applicationForm.value.dataset_id_list.indexOf(id),
+      1
+    )
+  }
+}
+
+function addDataset(val: Array<string>) {
+  applicationForm.value.dataset_id_list = val
+}
+
+function openDatasetDialog() {
+  AddDatasetDialogRef.value.open(applicationForm.value.dataset_id_list)
+}
+
+function getDetail() {
+  application.asyncGetApplicationDetail(id, loading).then((res: any) => {
+    applicationForm.value = res.data
+    applicationForm.value.model_id = res.data.model
+    applicationForm.value.stt_model_id = res.data.stt_model
+    applicationForm.value.tts_model_id = res.data.tts_model
+    applicationForm.value.tts_type = res.data.tts_type
+    applicationForm.value.model_setting.no_references_prompt =
+      res.data.model_setting.no_references_prompt || '{question}'
+    application.asyncGetAccessToken(id, loading).then((res: any) => {
+      applicationForm.value = { ...applicationForm.value, ...res.data }
+    })
+  })
+}
+
+function getDataset() {
+  application.asyncGetApplicationDataset(id, datasetLoading).then((res: any) => {
+    datasetList.value = res.data
+  })
+}
+
+function getModel() {
+  loading.value = true
+  applicationApi
+    .getApplicationModel(id)
+    .then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function getSTTModel() {
+  loading.value = true
+  applicationApi
+    .getApplicationSTTModel(id)
+    .then((res: any) => {
+      sttModelOptions.value = groupBy(res?.data, 'provider')
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function getTTSModel() {
+  loading.value = true
+  applicationApi
+    .getApplicationTTSModel(id)
+    .then((res: any) => {
+      ttsModelOptions.value = groupBy(res?.data, 'provider')
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function ttsModelChange() {
+  if (applicationForm.value.tts_model_id) {
+    TTSModeParamSettingDialogRef.value?.reset_default(applicationForm.value.tts_model_id, id)
+  } else {
+    refreshTTSForm({})
+  }
+}
+
+function ttsModelEnableChange() {
+  if (!applicationForm.value.tts_model_enable) {
+    applicationForm.value.tts_model_id = ''
+    applicationForm.value.tts_type = 'BROWSER'
+  }
+}
+
+function sttModelEnableChange() {
+  if (!applicationForm.value.stt_model_enable) {
+    applicationForm.value.stt_model_id = ''
+  }
+}
+
+function openEditAvatar() {
+  EditAvatarDialogRef.value.open(applicationForm.value)
+}
+function refreshIcon() {
+  getDetail()
+}
+
+function refresh() {
+  getDataset()
+}
+
+onMounted(() => {
+  getModel()
+  getDataset()
+  getDetail()
+  getSTTModel()
+  getTTSModel()
+})
+</script>
+<style lang="scss" scoped>
+.create-application {
+  .relate-dataset-card {
+    color: var(--app-text-color);
+  }
+
+  .dialog-bg {
+    border-radius: 8px;
+    background: var(--dialog-bg-gradient-color);
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  .scrollbar-height-left {
+    height: calc(var(--app-main-height) - 64px);
+  }
+
+  .scrollbar-height {
+    height: calc(var(--app-main-height) - 166px);
+  }
+}
+
+.prologue-md-editor {
+  height: 150px;
+}
+
+:deep(.el-form-item__label) {
+  display: block;
+}
+</style>
diff --git a/ui/src/views/application/component/AIModeParamSettingDialog.vue b/ui/src/views/application/component/AIModeParamSettingDialog.vue
new file mode 100644
index 000000000..a14519c79
--- /dev/null
+++ b/ui/src/views/application/component/AIModeParamSettingDialog.vue
@@ -0,0 +1,91 @@
+<template>
+  <el-dialog
+    align-center
+    :title="$t('common.paramSetting')"
+    v-model="dialogVisible"
+    style="width: 550px"
+    append-to-body
+    destroy-on-close
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <DynamicsForm
+      v-model="form_data"
+      :model="form_data"
+      label-position="top"
+      require-asterisk-position="right"
+      :render_data="model_form_field"
+      ref="dynamicsFormRef"
+    >
+    </DynamicsForm>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false">
+          {{ $t('common.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="submit" :loading="loading">
+          {{ $t('common.confirm') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { FormField } from '@/components/dynamics-form/type'
+import modelAPi from '@/api/model'
+import applicationApi from '@/api/application'
+import DynamicsForm from '@/components/dynamics-form/index.vue'
+const model_form_field = ref<Array<FormField>>([])
+const emit = defineEmits(['refresh'])
+const dynamicsFormRef = ref<InstanceType<typeof DynamicsForm>>()
+const form_data = ref<any>({})
+const dialogVisible = ref(false)
+const loading = ref(false)
+const getApi = (model_id: string, application_id?: string) => {
+  return application_id
+    ? applicationApi.getModelParamsForm(application_id, model_id, loading)
+    : modelAPi.getModelParamsForm(model_id, loading)
+}
+const open = (model_id: string, application_id?: string, model_setting_data?: any) => {
+  form_data.value = {}
+  const api = getApi(model_id, application_id)
+  api.then((ok) => {
+    model_form_field.value = ok.data
+    // 渲染动态表单
+    dynamicsFormRef.value?.render(model_form_field.value, model_setting_data)
+  })
+  dialogVisible.value = true
+}
+
+const reset_default = (model_id: string, application_id?: string) => {
+  const api = getApi(model_id, application_id)
+  api.then((ok) => {
+    model_form_field.value = ok.data
+    const model_setting_data = ok.data
+      .map((item) => {
+        if (item.show_default_value === false) {
+          return { [item.field]: undefined }
+        } else {
+          return { [item.field]: item.default_value }
+        }
+      })
+      .reduce((x, y) => ({ ...x, ...y }), {})
+
+    emit('refresh', model_setting_data)
+  })
+}
+
+const submit = async () => {
+  dynamicsFormRef.value?.validate().then(() => {
+    emit('refresh', form_data.value)
+    dialogVisible.value = false
+  })
+}
+
+defineExpose({ open, reset_default })
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/application/component/AccessSettingDrawer.vue b/ui/src/views/application/component/AccessSettingDrawer.vue
new file mode 100644
index 000000000..19edbd578
--- /dev/null
+++ b/ui/src/views/application/component/AccessSettingDrawer.vue
@@ -0,0 +1,400 @@
+<template>
+  <el-drawer v-model="visible" size="60%" :append-to-body="true">
+    <template #header>
+      <div class="flex align-center" style="margin-left: -8px">
+        <h4>{{ drawerTitle }}</h4>
+      </div>
+    </template>
+
+    <el-form
+      v-if="dataLoaded"
+      ref="formRef"
+      :model="form[configType]"
+      label-width="120px"
+      :rules="rules[configType]"
+      label-position="top"
+      require-asterisk-position="right"
+    >
+      <h4 class="title-decoration-1 mb-16">{{ infoTitle }}</h4>
+
+      <template v-for="(item, key) in configFields[configType]" :key="key">
+        <el-form-item :label="item.label" :prop="key">
+          <el-input
+            v-model="form[configType][key]"
+            :type="isPasswordField(key) ? (passwordVisible[key] ? 'text' : 'password') : 'text'"
+            :placeholder="item.placeholder"
+            :show-password="isPasswordField(key)"
+          >
+          </el-input>
+        </el-form-item>
+      </template>
+      <div v-if="configType === 'wechat'" class="flex align-center mb-16">
+        <span class="lighter mr-8">{{
+          $t('views.application.applicationAccess.wecomSetting.authenticationSuccessful')
+        }}</span>
+        <el-switch v-if="configType === 'wechat'" v-model="form[configType].is_certification" />
+      </div>
+
+      <h4 class="title-decoration-1 mb-16">
+        {{ $t('views.application.applicationAccess.callback') }}
+      </h4>
+      <el-form-item label="URL" prop="callback_url">
+        <el-input
+          v-model="form[configType].callback_url"
+          :placeholder="$t('views.application.applicationAccess.callbackTip')"
+          readonly
+        >
+          <template #append>
+            <el-button @click="copyClick(form[configType].callback_url)">
+              <AppIcon iconName="app-copy"></AppIcon>
+            </el-button>
+          </template>
+        </el-input>
+        <el-text type="info" v-if="configType === 'wechat'">
+          {{ $t('views.application.applicationAccess.copyUrl') }}
+          <a
+            class="primary"
+            href="https://mp.weixin.qq.com/advanced/advanced?action=dev&t=advanced/dev"
+            target="_blank"
+            >{{ $t('views.application.applicationAccess.wechatPlatform') }}</a
+          >{{ $t('views.application.applicationAccess.wechatSetting.urlInfo') }}
+        </el-text>
+        <el-text type="info" v-if="configType === 'dingtalk'">
+          {{ $t('views.application.applicationAccess.copyUrl') }}
+          <a
+            class="primary"
+            href="https://open-dev.dingtalk.com/fe/app?hash=%23%2Fcorp%2Fapp#/corp/app"
+            target="_blank"
+            >{{ $t('views.application.applicationAccess.dingtalkPlatform') }}</a
+          >{{ $t('views.application.applicationAccess.dingtalkSetting.urlInfo') }}
+        </el-text>
+        <el-text type="info" v-if="configType === 'wecom'">
+          {{ $t('views.application.applicationAccess.copyUrl') }}
+          <a
+            class="primary"
+            href="https://work.weixin.qq.com/wework_admin/frame#apps"
+            target="_blank"
+            >{{ $t('views.application.applicationAccess.wecomPlatform') }}</a
+          >{{ $t('views.application.applicationAccess.wecomSetting.urlInfo') }}
+        </el-text>
+        <el-text type="info" v-if="configType === 'feishu'">
+          {{ $t('views.application.applicationAccess.copyUrl') }}
+          <a class="primary" href="https://open.feishu.cn/app/" target="_blank">{{
+            $t('views.application.applicationAccess.larkPlatform')
+          }}</a
+          >{{ $t('views.application.applicationAccess.larkSetting.urlInfo') }}
+        </el-text>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div>
+        <el-button @click="closeDrawer">{{ $t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="submit" :disabled="loading">
+          {{ $t('common.save') }}
+        </el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import type { FormInstance } from 'element-plus'
+import applicationApi from '@/api/application'
+import { useRoute } from 'vue-router'
+import { MsgError, MsgSuccess } from '@/utils/message'
+import { copyClick } from '@/utils/clipboard'
+import { t } from '@/locales'
+
+type PlatformType = 'wechat' | 'dingtalk' | 'wecom' | 'feishu' | 'slack'
+
+const formRef = ref<FormInstance>()
+const visible = ref(false)
+const loading = ref(false)
+const dataLoaded = ref(false)
+const configType = ref<PlatformType>('wechat')
+const route = useRoute()
+const emit = defineEmits(['refresh'])
+const {
+  params: { id }
+} = route as any
+
+const form = reactive<any>({
+  wechat: {
+    app_id: '',
+    app_secret: '',
+    token: '',
+    encoding_aes_key: '',
+    is_certification: false,
+    callback_url: ''
+  },
+  dingtalk: { client_id: '', client_secret: '', callback_url: '' },
+  wecom: {
+    app_id: '',
+    agent_id: '',
+    secret: '',
+    token: '',
+    encoding_aes_key: '',
+    callback_url: ''
+  },
+  feishu: { app_id: '', app_secret: '', verification_token: '', callback_url: '' },
+  slack: { signing_secret: '', bot_user_token: '', callback_url: '' }
+})
+
+const rules = reactive<{ [propName: string]: any }>({
+  wechat: {
+    app_id: [
+      {
+        required: true,
+        message: t('views.application.applicationAccess.wechatSetting.appIdPlaceholder'),
+        trigger: 'blur'
+      }
+    ],
+    app_secret: [
+      {
+        required: true,
+        message: t('views.application.applicationAccess.wechatSetting.appSecretPlaceholder'),
+        trigger: 'blur'
+      }
+    ],
+    token: [
+      {
+        required: true,
+        message: t('views.application.applicationAccess.wechatSetting.tokenPlaceholder'),
+        trigger: 'blur'
+      }
+    ],
+    encoding_aes_key: [
+      {
+        required: true,
+        message: t('views.application.applicationAccess.wechatSetting.aesKeyPlaceholder'),
+        trigger: 'blur'
+      }
+    ]
+  },
+  dingtalk: {
+    client_id: [
+      {
+        required: true,
+        message: t('views.application.applicationAccess.dingtalkSetting.clientIdPlaceholder'),
+        trigger: 'blur'
+      }
+    ],
+    client_secret: [
+      {
+        required: true,
+        message: t('views.application.applicationAccess.dingtalkSetting.clientSecretPlaceholder'),
+        trigger: 'blur'
+      }
+    ]
+  },
+  wecom: {
+    app_id: [
+      {
+        required: true,
+        message: t('views.application.applicationAccess.wecomSetting.cropIdPlaceholder'),
+        trigger: 'blur'
+      }
+    ],
+    agent_id: [
+      {
+        required: true,
+        message: t('views.application.applicationAccess.wecomSetting.agentIdPlaceholder'),
+        trigger: 'blur'
+      }
+    ],
+    secret: [
+      {
+        required: true,
+        message: t('views.application.applicationAccess.wecomSetting.secretPlaceholder'),
+        trigger: 'blur'
+      }
+    ],
+    token: [
+      {
+        required: true,
+        message: t('views.application.applicationAccess.wecomSetting.tokenPlaceholder'),
+        trigger: 'blur'
+      }
+    ],
+    encoding_aes_key: [
+      {
+        required: true,
+        message: t('views.application.applicationAccess.wecomSetting.encodingAesKeyPlaceholder'),
+        trigger: 'blur'
+      }
+    ]
+  },
+  feishu: {
+    app_id: [
+      {
+        required: true,
+        message: t('views.application.applicationAccess.larkSetting.appIdPlaceholder'),
+        trigger: 'blur'
+      }
+    ],
+    app_secret: [
+      {
+        required: true,
+        message: t('views.application.applicationAccess.larkSetting.appSecretPlaceholder'),
+        trigger: 'blur'
+      }
+    ],
+    verification_token: [
+      {
+        required: false,
+        message: t('views.application.applicationAccess.larkSetting.verificationTokenPlaceholder'),
+        trigger: 'blur'
+      }
+    ]
+  },
+  slack: {
+    signing_secret: [
+      {
+        required: true,
+        message: t('views.application.applicationAccess.slackSetting.signingSecretPlaceholder'),
+        trigger: 'blur'
+      }
+    ],
+    bot_user_token: [
+      {
+        required: true,
+        message: t('views.application.applicationAccess.slackSetting.botUserTokenPlaceholder'),
+        trigger: 'blur'
+      }
+    ]
+  }
+})
+
+const configFields: { [propName: string]: { [propName: string]: any } } = {
+  wechat: {
+    app_id: {
+      label: t('views.application.applicationAccess.wechatSetting.appId'),
+      placeholder: ''
+    },
+    app_secret: {
+      label: t('views.application.applicationAccess.wechatSetting.appSecret'),
+      placeholder: ''
+    },
+    token: { label: t('views.application.applicationAccess.wechatSetting.token'), placeholder: '' },
+    encoding_aes_key: {
+      label: t('views.application.applicationAccess.wechatSetting.aesKey'),
+      placeholder: ''
+    }
+  },
+  dingtalk: {
+    client_id: { label: 'Client ID', placeholder: '' },
+    client_secret: { label: 'Client Secret', placeholder: '' }
+  },
+  wecom: {
+    app_id: {
+      label: t('views.application.applicationAccess.wecomSetting.cropId'),
+      placeholder: ''
+    },
+    agent_id: { label: 'Agent ID', placeholder: '' },
+    secret: { label: 'Secret', placeholder: '' },
+    token: { label: 'Token', placeholder: '' },
+    encoding_aes_key: { label: 'EncodingAESKey', placeholder: '' }
+  },
+  feishu: {
+    app_id: { label: 'App ID', placeholder: '' },
+    app_secret: { label: 'App Secret', placeholder: '' },
+    verification_token: { label: 'Verification Token', placeholder: '' }
+  },
+  slack: {
+    signing_secret: { label: 'Signing Secret', placeholder: '' },
+    bot_user_token: { label: 'Bot User Token', placeholder: '' }
+  }
+}
+
+const passwordFields = new Set([
+  'app_secret',
+  'client_secret',
+  'secret',
+  'bot_user_token',
+  'signing_secret'
+])
+
+const drawerTitle = computed(
+  () =>
+    ({
+      wechat: t('views.application.applicationAccess.wechatSetting.title'),
+      dingtalk: t('views.application.applicationAccess.dingtalkSetting.title'),
+      wecom: t('views.application.applicationAccess.wecomSetting.title'),
+      feishu: t('views.application.applicationAccess.larkSetting.title'),
+      slack: t('views.application.applicationAccess.slackSetting.title')
+    }[configType.value])
+)
+
+const infoTitle = computed(
+  () =>
+    ({
+      wechat: t('views.applicationOverview.appInfo.header'),
+      dingtalk: t('views.applicationOverview.appInfo.header'),
+      wecom: t('views.applicationOverview.appInfo.header'),
+      feishu: t('views.applicationOverview.appInfo.header'),
+      slack: t('views.applicationOverview.appInfo.header')
+    }[configType.value])
+)
+
+const passwordVisible = reactive<Record<string, boolean>>(
+  Object.keys(configFields[configType.value]).reduce(
+    (acc, key) => {
+      if (passwordFields.has(key)) {
+        acc[key] = false
+      }
+      return acc
+    },
+    {} as Record<string, boolean>
+  )
+)
+
+const isPasswordField = (key: any) => passwordFields.has(key)
+
+const closeDrawer = () => {
+  visible.value = false
+}
+
+const submit = async () => {
+  if (loading.value) return
+
+  formRef.value?.validate(async (valid) => {
+    if (valid) {
+      try {
+        applicationApi
+          .updatePlatformConfig(id, configType.value, form[configType.value], loading)
+          .then(() => {
+            MsgSuccess(t('common.saveSuccess'))
+            closeDrawer()
+            emit('refresh')
+          })
+      } catch {
+        MsgError(t('views.application.tip.saveErrorMessage'))
+      }
+    }
+  })
+}
+
+const open = async (id: string, type: PlatformType) => {
+  visible.value = true
+  configType.value = type
+  loading.value = true
+  dataLoaded.value = false
+  formRef.value?.resetFields()
+  try {
+    const res = await applicationApi.getPlatformConfig(id, type)
+    if (res.data) {
+      form[configType.value] = res.data
+    }
+    dataLoaded.value = true
+  } catch {
+    MsgError(t('views.application.tip.loadingErrorMessage'))
+  } finally {
+    loading.value = false
+    form[configType.value].callback_url = `${window.location.origin}/api/${type}/${id}`
+  }
+}
+
+defineExpose({ open })
+</script>
diff --git a/ui/src/views/application/component/AddDatasetDialog.vue b/ui/src/views/application/component/AddDatasetDialog.vue
new file mode 100644
index 000000000..f3c93e0f3
--- /dev/null
+++ b/ui/src/views/application/component/AddDatasetDialog.vue
@@ -0,0 +1,168 @@
+<template>
+  <el-dialog
+    :title="$t('views.application.applicationForm.dialog.addDataset')"
+    v-model="dialogVisible"
+    width="600"
+    append-to-body
+    class="addDataset-dialog"
+    align-center
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <template #header="{ titleId, titleClass }">
+      <div class="flex-between mb-8">
+        <h4 :id="titleId" :class="titleClass">
+          {{ $t('views.application.applicationForm.dialog.addDataset') }}
+        </h4>
+        <div class="flex align-center mr-8">
+          <el-button link class="ml-16" @click="refresh">
+            <el-icon class="mr-4"><Refresh /></el-icon>{{ $t('common.refresh') }}
+          </el-button>
+          <el-divider direction="vertical" />
+        </div>
+      </div>
+      <div class="flex-between">
+        <el-text type="info" class="color-secondary">
+          {{ $t('views.application.applicationForm.dialog.addDatasetPlaceholder') }}
+        </el-text>
+        <el-input
+          v-model="searchValue"
+          :placeholder="$t('common.search')"
+          prefix-icon="Search"
+          class="w-240"
+          clearable
+        />
+      </div>
+    </template>
+    <el-scrollbar>
+      <div class="max-height">
+        <el-row :gutter="12" v-loading="loading">
+          <el-col :span="12" v-for="(item, index) in filterData" :key="index" class="mb-16">
+            <CardCheckbox value-field="id" :data="item" v-model="checkList" @change="changeHandle">
+              <span class="ellipsis cursor" :title="item.name"> {{ item.name }}</span>
+            </CardCheckbox>
+          </el-col>
+        </el-row>
+      </div>
+    </el-scrollbar>
+    <template #footer>
+      <div class="flex-between">
+        <div class="flex">
+          <el-text type="info" class="color-secondary mr-8" v-if="checkList.length > 0">
+            {{ $t('views.application.applicationForm.dialog.selected') }} {{ checkList.length }}
+            {{ $t('views.application.applicationForm.dialog.countDataset') }}
+          </el-text>
+          <el-button link type="primary" v-if="checkList.length > 0" @click="clearCheck">
+            {{ $t('common.clear') }}
+          </el-button>
+        </div>
+        <span>
+          <el-button @click.prevent="dialogVisible = false">
+            {{ $t('common.cancel') }}
+          </el-button>
+          <el-button type="primary" @click="submitHandle">
+            {{ $t('common.confirm') }}
+          </el-button>
+        </span>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+const props = defineProps({
+  data: {
+    type: Array<any>,
+    default: () => []
+  },
+  loading: Boolean
+})
+
+const emit = defineEmits(['addData', 'refresh'])
+
+const dialogVisible = ref<boolean>(false)
+const checkList = ref([])
+const currentEmbedding = ref('')
+const searchValue = ref('')
+const searchDate = ref<any[]>([])
+
+const filterData = computed(() => {
+  return currentEmbedding.value
+    ? searchDate.value.filter((v) => v.embedding_mode_id === currentEmbedding.value)
+    : searchDate.value
+})
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    checkList.value = []
+    currentEmbedding.value = ''
+    searchValue.value = ''
+  }
+})
+
+watch(searchValue, (val) => {
+  if (val) {
+    searchDate.value = props.data.filter((v) => v.name.includes(val))
+  } else {
+    searchDate.value = props.data
+  }
+})
+
+function changeHandle() {
+  if (checkList.value.length > 0) {
+    currentEmbedding.value = props.data.filter(
+      (v) => v.id === checkList.value[0]
+    )[0].embedding_mode_id
+  } else if (checkList.value.length === 0) {
+    currentEmbedding.value = ''
+  }
+}
+function clearCheck() {
+  checkList.value = []
+  currentEmbedding.value = ''
+}
+
+const open = (checked: any) => {
+  searchDate.value = props.data
+  checkList.value = checked
+  if (checkList.value.length > 0) {
+    currentEmbedding.value = props.data.filter(
+      (v) => v.id === checkList.value[0]
+    )[0].embedding_mode_id
+  }
+
+  dialogVisible.value = true
+}
+const submitHandle = () => {
+  emit('addData', checkList.value)
+  dialogVisible.value = false
+}
+
+const refresh = () => {
+  emit('refresh')
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss">
+.addDataset-dialog {
+  padding: 0;
+  .el-dialog__header {
+    padding: 24px 24px 8px 24px;
+  }
+  .el-dialog__body {
+    padding: 8px !important;
+  }
+  .el-dialog__footer {
+    padding: 8px 24px 24px 24px;
+  }
+
+  .el-dialog__headerbtn {
+    top: 9px;
+  }
+  .max-height {
+    max-height: calc(100vh - 260px);
+    padding: 0 16px;
+  }
+}
+</style>
diff --git a/ui/src/views/application/component/CopyApplicationDialog.vue b/ui/src/views/application/component/CopyApplicationDialog.vue
new file mode 100644
index 000000000..6fb8fe530
--- /dev/null
+++ b/ui/src/views/application/component/CopyApplicationDialog.vue
@@ -0,0 +1,178 @@
+<template>
+  <el-dialog
+    :title="$t('views.application.copyApplication')"
+    v-model="dialogVisible"
+    width="650"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      ref="applicationFormRef"
+      :model="applicationForm"
+      :rules="rules"
+      label-position="top"
+      require-asterisk-position="right"
+    >
+      <el-form-item :label="$t('views.application.applicationForm.form.appName.label')" prop="name">
+        <el-input
+          v-model="applicationForm.name"
+          maxlength="64"
+          :placeholder="$t('views.application.applicationForm.form.appName.placeholder')"
+          show-word-limit
+        />
+      </el-form-item>
+      <el-form-item :label="$t('views.application.applicationForm.form.appDescription.label')">
+        <el-input
+          v-model="applicationForm.desc"
+          type="textarea"
+          :placeholder="$t('views.application.applicationForm.form.appDescription.placeholder')"
+          :rows="3"
+          maxlength="256"
+          show-word-limit
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false" :loading="loading">
+          {{ $t('common.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="submitValid(applicationFormRef)" :loading="loading">
+          {{ $t('common.copy') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, reactive } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { cloneDeep } from 'lodash'
+import type { ApplicationFormType } from '@/api/type/application'
+import type { FormInstance, FormRules } from 'element-plus'
+import applicationApi from '@/api/application'
+import { MsgSuccess, MsgAlert } from '@/utils/message'
+import { isWorkFlow } from '@/utils/application'
+import { t } from '@/locales'
+import useStore from '@/stores'
+import { ValidType, ValidCount } from '@/enums/common'
+const router = useRouter()
+const { common, user } = useStore()
+
+// @ts-ignore
+const defaultPrompt = t('views.application.applicationForm.form.prompt.defaultPrompt', {
+  data: '{data}',
+  question: '{question}'
+})
+const applicationFormRef = ref()
+
+const loading = ref(false)
+const dialogVisible = ref<boolean>(false)
+// @ts-ignore
+const applicationForm = ref<ApplicationFormType>({
+  name: '',
+  desc: '',
+  model_id: '',
+  dialogue_number: 0,
+  prologue: t('views.application.applicationForm.form.defaultPrologue'),
+  dataset_id_list: [],
+  dataset_setting: {
+    top_n: 3,
+    similarity: 0.6,
+    max_paragraph_char_number: 5000,
+    search_mode: 'embedding',
+    no_references_setting: {
+      status: 'ai_questioning',
+      value: '{question}'
+    }
+  },
+  model_setting: {
+    prompt: defaultPrompt
+  },
+  problem_optimization: false,
+  type: 'SIMPLE'
+})
+
+const rules = reactive<FormRules<ApplicationFormType>>({
+  name: [
+    {
+      required: true,
+      message: t('views.application.applicationForm.form.appName.placeholder'),
+      trigger: 'blur'
+    }
+  ]
+})
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    applicationForm.value = {
+      name: '',
+      desc: '',
+      model_id: '',
+      dialogue_number: 0,
+      prologue: t('views.application.applicationForm.form.defaultPrologue'),
+      dataset_id_list: [],
+      dataset_setting: {
+        top_n: 3,
+        similarity: 0.6,
+        max_paragraph_char_number: 5000,
+        search_mode: 'embedding',
+        no_references_setting: {
+          status: 'ai_questioning',
+          value: '{question}'
+        }
+      },
+      model_setting: {
+        prompt: defaultPrompt
+      },
+      problem_optimization: false,
+      type: 'SIMPLE'
+    }
+    applicationFormRef.value?.clearValidate()
+  }
+})
+
+const open = (data: any) => {
+  const obj = cloneDeep(data)
+  delete obj['id']
+  obj['name'] = obj['name'] + ` ${t('views.application.applicationForm.title.copy')}`
+  applicationForm.value = obj
+  dialogVisible.value = true
+}
+
+const submitValid = (formEl: FormInstance | undefined) => {
+  if (user.isEnterprise()) {
+    submitHandle(formEl)
+  } else {
+    common
+      .asyncGetValid(ValidType.Application, ValidCount.Application, loading)
+      .then(async (res: any) => {
+        if (res?.data) {
+          submitHandle(formEl)
+        } else {
+          MsgAlert(t('common.tip'), t('views.application.tip.professionalMessage'))
+        }
+      })
+  }
+}
+const submitHandle = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      applicationApi.postApplication(applicationForm.value, loading).then((res) => {
+        MsgSuccess(t('common.createSuccess'))
+        if (isWorkFlow(applicationForm.value.type)) {
+          router.push({ path: `/application/${res.data.id}/workflow` })
+        } else {
+          router.push({ path: `/application/${res.data.id}/${res.data.type}/setting` })
+        }
+        dialogVisible.value = false
+      })
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/application/component/CreateApplicationDialog.vue b/ui/src/views/application/component/CreateApplicationDialog.vue
new file mode 100644
index 000000000..7415753c1
--- /dev/null
+++ b/ui/src/views/application/component/CreateApplicationDialog.vue
@@ -0,0 +1,271 @@
+<template>
+  <el-dialog
+    :title="$t('views.application.createApplication')"
+    v-model="dialogVisible"
+    width="650"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      ref="applicationFormRef"
+      :model="applicationForm"
+      :rules="rules"
+      label-position="top"
+      require-asterisk-position="right"
+      @submit.prevent
+    >
+      <el-form-item :label="$t('views.application.applicationForm.form.appName.label')" prop="name">
+        <el-input
+          v-model="applicationForm.name"
+          maxlength="64"
+          :placeholder="$t('views.application.applicationForm.form.appName.placeholder')"
+          show-word-limit
+          @blur="applicationForm.name = applicationForm.name?.trim()"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('views.application.applicationForm.form.appDescription.label')">
+        <el-input
+          v-model="applicationForm.desc"
+          type="textarea"
+          :placeholder="$t('views.application.applicationForm.form.appDescription.placeholder')"
+          :rows="3"
+          maxlength="256"
+          show-word-limit
+        />
+      </el-form-item>
+      <el-form-item :label="$t('views.application.applicationForm.form.appType.label')">
+        <el-radio-group v-model="applicationForm.type" class="card__radio">
+          <el-row :gutter="16">
+            <el-col :span="12">
+              <el-card shadow="never" :class="applicationForm.type === 'SIMPLE' ? 'active' : ''">
+                <el-radio value="SIMPLE" size="large">
+                  <p class="mb-4">{{ $t('views.application.simple') }}</p>
+                  <el-text type="info">{{
+                    $t('views.application.applicationForm.form.appType.simplePlaceholder')
+                  }}</el-text>
+                </el-radio>
+              </el-card>
+            </el-col>
+            <el-col :span="12">
+              <el-card shadow="never" :class="isWorkFlow(applicationForm.type) ? 'active' : ''">
+                <el-radio value="WORK_FLOW" size="large">
+                  <p class="mb-4">{{ $t('views.application.workflow') }}</p>
+                  <el-text type="info">{{
+                    $t('views.application.applicationForm.form.appType.workflowPlaceholder')
+                  }}</el-text>
+                </el-radio>
+              </el-card>
+            </el-col>
+          </el-row>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        :label="$t('views.document.upload.template')"
+        v-if="applicationForm.type === 'WORK_FLOW'"
+      >
+        <div class="w-full">
+          <el-row :gutter="16">
+            <el-col :span="12">
+              <el-card
+                class="radio-card cursor"
+                shadow="never"
+                @click="selectedType('blank')"
+                :class="appTemplate === 'blank' ? 'active' : ''"
+              >
+                {{ $t('views.application.applicationForm.form.appTemplate.blankApp') }}
+              </el-card>
+            </el-col>
+            <el-col :span="12">
+              <el-card
+                class="radio-card cursor"
+                shadow="never"
+                :class="appTemplate === 'assistant' ? 'active' : ''"
+                @click="selectedType('assistant')"
+              >
+                {{ $t('views.application.applicationForm.form.appTemplate.assistantApp') }}
+              </el-card>
+            </el-col>
+          </el-row>
+        </div>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false" :loading="loading">
+          {{ $t('common.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="submitHandle(applicationFormRef)" :loading="loading">
+          {{ $t('common.create') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, reactive } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import type { ApplicationFormType } from '@/api/type/application'
+import type { FormInstance, FormRules } from 'element-plus'
+import applicationApi from '@/api/application'
+import { MsgSuccess, MsgAlert } from '@/utils/message'
+import { isWorkFlow } from '@/utils/application'
+import { baseNodes } from '@/workflow/common/data'
+import { t } from '@/locales'
+const router = useRouter()
+const emit = defineEmits(['refresh'])
+
+// @ts-ignore
+const defaultPrompt = t('views.application.applicationForm.form.prompt.defaultPrompt', {
+  data: '{data}',
+  question: '{question}'
+})
+
+const optimizationPrompt =
+  t('views.application.applicationForm.dialog.defaultPrompt1', {
+    question: '{question}'
+  }) +
+  '<data></data>' +
+  t('views.application.applicationForm.dialog.defaultPrompt2')
+
+const workflowDefault = ref<any>({
+  edges: [],
+  nodes: baseNodes
+})
+const appTemplate = ref('blank')
+
+const applicationFormRef = ref()
+
+const loading = ref(false)
+const dialogVisible = ref<boolean>(false)
+
+const applicationForm = ref<ApplicationFormType>({
+  name: '',
+  desc: '',
+  model_id: '',
+  dialogue_number: 1,
+  prologue: t('views.application.applicationForm.form.defaultPrologue'),
+  dataset_id_list: [],
+  dataset_setting: {
+    top_n: 3,
+    similarity: 0.6,
+    max_paragraph_char_number: 5000,
+    search_mode: 'embedding',
+    no_references_setting: {
+      status: 'ai_questioning',
+      value: '{question}'
+    }
+  },
+  model_setting: {
+    prompt: defaultPrompt,
+    system: t('views.application.applicationForm.form.roleSettings.placeholder'),
+    no_references_prompt: '{question}'
+  },
+  model_params_setting: {},
+  problem_optimization: false,
+  problem_optimization_prompt: optimizationPrompt,
+  stt_model_id: '',
+  tts_model_id: '',
+  stt_model_enable: false,
+  tts_model_enable: false,
+  tts_type: 'BROWSER',
+  type: 'SIMPLE'
+})
+
+const rules = reactive<FormRules<ApplicationFormType>>({
+  name: [
+    {
+      required: true,
+      message: t('views.application.applicationForm.form.appName.placeholder'),
+      trigger: 'blur'
+    }
+  ],
+  model_id: [
+    {
+      required: false,
+      message: t('views.application.applicationForm.form.aiModel.placeholder'),
+      trigger: 'change'
+    }
+  ]
+})
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    applicationForm.value = {
+      name: '',
+      desc: '',
+      model_id: '',
+      dialogue_number: 1,
+      prologue: t('views.application.applicationForm.form.defaultPrologue'),
+      dataset_id_list: [],
+      dataset_setting: {
+        top_n: 3,
+        similarity: 0.6,
+        max_paragraph_char_number: 5000,
+        search_mode: 'embedding',
+        no_references_setting: {
+          status: 'ai_questioning',
+          value: '{question}'
+        }
+      },
+      model_setting: {
+        prompt: defaultPrompt,
+        system: t('views.application.applicationForm.form.roleSettings.placeholder'),
+        no_references_prompt: '{question}'
+      },
+      model_params_setting: {},
+      problem_optimization: false,
+      problem_optimization_prompt: optimizationPrompt,
+      stt_model_id: '',
+      tts_model_id: '',
+      stt_model_enable: false,
+      tts_model_enable: false,
+      tts_type: 'BROWSER',
+      type: 'SIMPLE'
+    }
+    applicationFormRef.value?.clearValidate()
+  }
+})
+
+const open = () => {
+  dialogVisible.value = true
+}
+
+const submitHandle = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      if (isWorkFlow(applicationForm.value.type) && appTemplate.value === 'blank') {
+        workflowDefault.value.nodes[0].properties.node_data.desc = applicationForm.value.desc
+        workflowDefault.value.nodes[0].properties.node_data.name = applicationForm.value.name
+        applicationForm.value['work_flow'] = workflowDefault.value
+      }
+      applicationApi.postApplication(applicationForm.value, loading).then((res) => {
+        MsgSuccess(t('common.createSuccess'))
+        emit('refresh')
+        if (isWorkFlow(applicationForm.value.type)) {
+          router.push({ path: `/application/${res.data.id}/workflow` })
+        } else {
+          router.push({ path: `/application/${res.data.id}/${res.data.type}/setting` })
+        }
+        dialogVisible.value = false
+      })
+    }
+  })
+}
+
+function selectedType(type: string) {
+  appTemplate.value = type
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped>
+.radio-card {
+  line-height: 22px;
+  &.active {
+    border-color: var(--el-color-primary);
+    color: var(--el-color-primary);
+  }
+}
+</style>
diff --git a/ui/src/views/application/component/McpServersDialog.vue b/ui/src/views/application/component/McpServersDialog.vue
new file mode 100644
index 000000000..597cdc95c
--- /dev/null
+++ b/ui/src/views/application/component/McpServersDialog.vue
@@ -0,0 +1,91 @@
+<template>
+  <el-dialog
+    align-center
+    :title="$t('common.setting')"
+    v-model="dialogVisible"
+    style="width: 550px"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      label-position="top"
+      ref="paramFormRef"
+      :model="form"
+      require-asterisk-position="right"
+    >
+      <el-form-item label="MCP" prop="mcp_enable">
+        <el-switch v-model="form.mcp_enable" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.mcp_enable"
+        :label="$t('views.applicationWorkflow.nodes.mcpNode.configLabel')"
+        prop="mcp_servers"
+        :rules="[{ required: true, message: $t('common.required') }]"
+      >
+        <el-input
+          v-model="form.mcp_servers"
+          :rows="6"
+          type="textarea"
+          :placeholder="mcpServerJson"
+        />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="submit()" :loading="loading">
+          {{ $t('common.save') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const emit = defineEmits(['refresh'])
+
+const paramFormRef = ref()
+
+const mcpServerJson = `{
+  "math": {
+    "url": "your_server",
+    "transport": "sse"
+  }
+}`
+
+const form = ref<any>({
+  mcp_servers: '',
+  mcp_enable: false
+})
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      mcp_servers: '',
+      mcp_enable: false
+    }
+  }
+})
+
+const open = (data: any) => {
+  form.value = { ...form.value, ...data }
+  dialogVisible.value = true
+}
+
+const submit = () => {
+  paramFormRef.value.validate().then((valid: any) => {
+    if (valid) {
+      emit('refresh', form.value)
+      dialogVisible.value = false
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/application/component/ParamSettingDialog.vue b/ui/src/views/application/component/ParamSettingDialog.vue
new file mode 100644
index 000000000..bd0cb5545
--- /dev/null
+++ b/ui/src/views/application/component/ParamSettingDialog.vue
@@ -0,0 +1,327 @@
+<template>
+  <el-dialog
+    align-center
+    :title="$t('common.paramSetting')"
+    class="param-dialog"
+    v-model="dialogVisible"
+    style="width: 550px"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-scrollbar max-height="550">
+      <div class="p-16">
+        <el-form label-position="top" ref="paramFormRef" :model="form" v-loading="loading">
+          <el-form-item :label="$t('views.application.applicationForm.dialog.selectSearchMode')">
+            <el-radio-group
+              v-model="form.dataset_setting.search_mode"
+              class="card__radio"
+              @change="changeHandle"
+            >
+              <el-card
+                shadow="never"
+                class="mb-16"
+                :class="form.search_mode === 'embedding' ? 'active' : ''"
+              >
+                <el-radio value="embedding" size="large">
+                  <p class="mb-4">
+                    {{ $t('views.application.applicationForm.dialog.vectorSearch') }}
+                  </p>
+                  <el-text type="info">{{
+                    $t('views.application.applicationForm.dialog.vectorSearchTooltip')
+                  }}</el-text>
+                </el-radio>
+              </el-card>
+              <el-card
+                shadow="never"
+                class="mb-16"
+                :class="form.dataset_setting.search_mode === 'keywords' ? 'active' : ''"
+              >
+                <el-radio value="keywords" size="large">
+                  <p class="mb-4">
+                    {{ $t('views.application.applicationForm.dialog.fullTextSearch') }}
+                  </p>
+                  <el-text type="info">{{
+                    $t('views.application.applicationForm.dialog.fullTextSearchTooltip')
+                  }}</el-text>
+                </el-radio>
+              </el-card>
+              <el-card
+                shadow="never"
+                :class="form.dataset_setting.search_mode === 'blend' ? 'active' : ''"
+              >
+                <el-radio value="blend" size="large">
+                  <p class="mb-4">
+                    {{ $t('views.application.applicationForm.dialog.hybridSearch') }}
+                  </p>
+                  <el-text type="info">{{
+                    $t('views.application.applicationForm.dialog.hybridSearchTooltip')
+                  }}</el-text>
+                </el-radio>
+              </el-card>
+            </el-radio-group>
+          </el-form-item>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item>
+                <template #label>
+                  <div class="flex align-center">
+                    <span class="mr-4">{{
+                      $t('views.application.applicationForm.dialog.similarityThreshold')
+                    }}</span>
+                    <el-tooltip
+                      effect="dark"
+                      :content="$t('views.application.applicationForm.dialog.similarityTooltip')"
+                      placement="right"
+                    >
+                      <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+                    </el-tooltip>
+                  </div>
+                </template>
+                <el-input-number
+                  v-model="form.dataset_setting.similarity"
+                  :min="0"
+                  :max="form.dataset_setting.search_mode === 'blend' ? 2 : 1"
+                  :precision="3"
+                  :step="0.1"
+                  :value-on-clear="0"
+                  controls-position="right"
+                  class="w-full"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item :label="$t('views.application.applicationForm.dialog.topReferences')">
+                <el-input-number
+                  v-model="form.dataset_setting.top_n"
+                  :min="1"
+                  :max="10000"
+                  :value-on-clear="1"
+                  controls-position="right"
+                  class="w-full"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-form-item :label="$t('views.application.applicationForm.dialog.maxCharacters')">
+            <el-slider
+              v-model="form.dataset_setting.max_paragraph_char_number"
+              show-input
+              :show-input-controls="false"
+              :min="500"
+              :max="100000"
+              class="custom-slider"
+            />
+          </el-form-item>
+
+          <el-form-item
+            v-if="!isWorkflowType"
+            :label="$t('views.application.applicationForm.dialog.noReferencesAction')"
+          >
+            <el-form
+              label-position="top"
+              ref="noReferencesformRef"
+              :model="noReferencesform"
+              :rules="noReferencesRules"
+              :hide-required-asterisk="true"
+              class="w-full"
+            >
+              <el-radio-group
+                v-model="form.dataset_setting.no_references_setting.status"
+                class="radio-block-avatar"
+              >
+                <el-radio value="ai_questioning">
+                  <p>
+                    {{ $t('views.application.applicationForm.dialog.continueQuestioning') }}
+                  </p>
+                </el-radio>
+
+                <el-radio value="designated_answer">
+                  <p>{{ $t('views.application.applicationForm.dialog.provideAnswer') }}</p>
+                  <el-form-item
+                    v-if="form.dataset_setting.no_references_setting.status === 'designated_answer'"
+                    prop="designated_answer"
+                  >
+                    <el-input
+                      v-model="noReferencesform.designated_answer"
+                      :rows="2"
+                      type="textarea"
+                      maxlength="2048"
+                      :placeholder="defaultValue['designated_answer']"
+                    />
+                  </el-form-item>
+                </el-radio>
+              </el-radio-group>
+            </el-form>
+          </el-form-item>
+
+          <el-form-item @click.prevent v-if="!isWorkflowType">
+            <template #label>
+              <div class="flex align-center">
+                <span class="mr-4">{{
+                  $t('views.application.applicationForm.form.problemOptimization.label')
+                }}</span>
+              </div>
+            </template>
+            <el-switch size="small" v-model="form.problem_optimization"></el-switch>
+          </el-form-item>
+          <el-form-item
+            v-if="form.problem_optimization"
+            :label="$t('views.application.applicationForm.form.prompt.label')"
+          >
+            <el-input
+              v-model="form.problem_optimization_prompt"
+              :rows="6"
+              type="textarea"
+              maxlength="2048"
+              :placeholder="defaultPrompt"
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-scrollbar>
+
+    <template #footer>
+      <span class="dialog-footer p-16">
+        <el-button @click.prevent="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="submit(noReferencesformRef)" :loading="loading">
+          {{ $t('common.save') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, reactive } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { isWorkFlow } from '@/utils/application'
+import { t } from '@/locales'
+const emit = defineEmits(['refresh'])
+
+const paramFormRef = ref()
+const noReferencesformRef = ref()
+
+const defaultValue = {
+  ai_questioning: '{question}',
+  // @ts-ignore
+  designated_answer: t('views.application.applicationForm.dialog.designated_answer')
+}
+
+const defaultPrompt =
+  t('views.application.applicationForm.dialog.defaultPrompt1', {
+    question: '{question}'
+  }) +
+  '<data></data>' +
+  t('views.application.applicationForm.dialog.defaultPrompt2')
+
+const form = ref<any>({
+  dataset_setting: {
+    search_mode: 'embedding',
+    top_n: 3,
+    similarity: 0.6,
+    max_paragraph_char_number: 5000,
+    no_references_setting: {
+      status: 'ai_questioning',
+      value: '{question}'
+    }
+  },
+  problem_optimization: false,
+  problem_optimization_prompt: defaultPrompt
+})
+
+const noReferencesform = ref<any>({
+  ai_questioning: defaultValue['ai_questioning'],
+  designated_answer: defaultValue['designated_answer']
+})
+
+const noReferencesRules = reactive<FormRules<any>>({
+  ai_questioning: [
+    {
+      required: true,
+      message: t('views.application.applicationForm.form.aiModel.placeholder'),
+      trigger: 'blur'
+    }
+  ],
+  designated_answer: [
+    {
+      required: true,
+      message: t('views.application.applicationForm.form.prompt.requiredMessage'),
+      trigger: 'blur'
+    }
+  ]
+})
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+
+const isWorkflowType = ref(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    // form.value = {
+    //   dataset_setting: {
+    //     search_mode: 'embedding',
+    //     top_n: 3,
+    //     similarity: 0.6,
+    //     max_paragraph_char_number: 5000,
+    //     no_references_setting: {
+    //       status: 'ai_questioning',
+    //       value: '{question}'
+    //     }
+    //   },
+    //   problem_optimization: false,
+    //   problem_optimization_prompt: ''
+    // }
+    noReferencesform.value = {
+      ai_questioning: defaultValue['ai_questioning'],
+      designated_answer: defaultValue['designated_answer']
+    }
+    noReferencesformRef.value?.clearValidate()
+  }
+})
+
+const open = (data: any, type?: string) => {
+  isWorkflowType.value = isWorkFlow(type)
+  form.value = {
+    dataset_setting: { ...data.dataset_setting },
+    problem_optimization: data.problem_optimization,
+    problem_optimization_prompt: data.problem_optimization_prompt
+  }
+  if (!isWorkflowType.value) {
+    noReferencesform.value[form.value.dataset_setting.no_references_setting.status] =
+      form.value.dataset_setting.no_references_setting.value
+  }
+
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (isWorkflowType.value) {
+    delete form.value['no_references_setting']
+    emit('refresh', form.value)
+    dialogVisible.value = false
+  } else {
+    if (!formEl) return
+    await formEl.validate((valid, fields) => {
+      if (valid) {
+        form.value.dataset_setting.no_references_setting.value =
+          noReferencesform.value[form.value.dataset_setting.no_references_setting.status]
+        emit('refresh', form.value)
+        dialogVisible.value = false
+      }
+    })
+  }
+}
+
+function changeHandle(val: string) {
+  if (val === 'keywords') {
+    form.value.dataset_setting.similarity = 0
+  } else {
+    form.value.dataset_setting.similarity = 0.6
+  }
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss"></style>
diff --git a/ui/src/views/application/component/ReasoningParamSettingDialog.vue b/ui/src/views/application/component/ReasoningParamSettingDialog.vue
new file mode 100644
index 000000000..2ebc87b62
--- /dev/null
+++ b/ui/src/views/application/component/ReasoningParamSettingDialog.vue
@@ -0,0 +1,87 @@
+<template>
+  <el-dialog
+    align-center
+    :title="$t('common.setting')"
+    class="param-dialog"
+    v-model="dialogVisible"
+    style="width: 550px"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form label-position="top" ref="paramFormRef" :model="form" class="p-12-16">
+      <el-text type="info" class="color-secondary">{{
+        $t('views.application.applicationForm.form.reasoningContent.tooltip')
+      }}</el-text>
+      <el-row class="mt-16" :gutter="20">
+        <el-col :span="12">
+          <el-form-item
+            :label="$t('views.application.applicationForm.form.reasoningContent.start')"
+          >
+            <el-input
+              type="textarea"
+              v-model="form.reasoning_content_start"
+              :rows="6"
+              maxlength="50"
+              placeholder="<think>"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('views.application.applicationForm.form.reasoningContent.end')">
+            <el-input
+              type="textarea"
+              v-model="form.reasoning_content_end"
+              :rows="6"
+              maxlength="50"
+              placeholder="</think>"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <template #footer>
+      <span class="dialog-footer p-16">
+        <el-button @click.prevent="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="submit()" :loading="loading">
+          {{ $t('common.save') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, reactive } from 'vue'
+
+const emit = defineEmits(['refresh'])
+
+const form = ref<any>({
+  reasoning_content_start: '<think>',
+  reasoning_content_end: '</think>'
+})
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      reasoning_content_start: '<think>',
+      reasoning_content_end: '</think>'
+    }
+  }
+})
+
+const open = (data: any) => {
+  form.value = { ...form.value, ...data }
+  dialogVisible.value = true
+}
+
+const submit = () => {
+  emit('refresh', form.value)
+  dialogVisible.value = false
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/application/component/TTSModeParamSettingDialog.vue b/ui/src/views/application/component/TTSModeParamSettingDialog.vue
new file mode 100644
index 000000000..8015347d8
--- /dev/null
+++ b/ui/src/views/application/component/TTSModeParamSettingDialog.vue
@@ -0,0 +1,153 @@
+<template>
+  <el-dialog
+    align-center
+    :title="$t('common.paramSetting')"
+    v-model="dialogVisible"
+    style="width: 550px"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <DynamicsForm
+      v-model="form_data"
+      :model="form_data"
+      label-position="top"
+      require-asterisk-position="right"
+      :render_data="model_form_field"
+      ref="dynamicsFormRef"
+    >
+    </DynamicsForm>
+
+    <template #footer>
+      <div class="flex-between">
+        <el-button @click="testPlay" :loading="playLoading">
+          <AppIcon iconName="app-video-play" class="mr-4"></AppIcon>
+          {{ $t('views.application.applicationForm.form.voicePlay.listeningTest') }}
+        </el-button>
+
+        <span class="dialog-footer">
+          <el-button @click.prevent="dialogVisible = false">
+            {{ $t('common.cancel') }}
+          </el-button>
+          <el-button type="primary" @click="submit" :loading="loading">
+            {{ $t('common.confirm') }}
+          </el-button>
+        </span>
+      </div>
+    </template>
+  </el-dialog>
+  <!-- 先渲染，不然不能播放   -->
+  <audio ref="audioPlayer" controls hidden="hidden"></audio>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { FormField } from '@/components/dynamics-form/type'
+import modelAPi from '@/api/model'
+import applicationApi from '@/api/application'
+import DynamicsForm from '@/components/dynamics-form/index.vue'
+import { keys } from 'lodash'
+import { app } from '@/main'
+import { MsgError } from '@/utils/message'
+
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+
+const tts_model_id = ref('')
+const model_form_field = ref<Array<FormField>>([])
+const emit = defineEmits(['refresh'])
+const dynamicsFormRef = ref<InstanceType<typeof DynamicsForm>>()
+const form_data = ref<any>({})
+const dialogVisible = ref(false)
+const loading = ref(false)
+const playLoading = ref(false)
+const getApi = (model_id: string, application_id?: string) => {
+  return application_id
+    ? applicationApi.getModelParamsForm(application_id, model_id, loading)
+    : modelAPi.getModelParamsForm(model_id, loading)
+}
+const open = (model_id: string, application_id?: string, model_setting_data?: any) => {
+  form_data.value = {}
+  tts_model_id.value = model_id
+  const api = getApi(model_id, application_id)
+  api.then((ok) => {
+    model_form_field.value = ok.data
+    const resp = ok.data
+      .map((item: any) => ({
+        [item.field]: item.show_default_value !== false ? item.default_value : undefined
+      }))
+      .reduce((x, y) => ({ ...x, ...y }), {})
+    // 删除不存在的字段
+    if (model_setting_data) {
+      Object.keys(model_setting_data).forEach((key) => {
+        if (!(key in resp)) {
+          delete model_setting_data[key]
+        }
+      })
+    }
+    model_setting_data = { ...resp, ...model_setting_data }
+    // 渲染动态表单
+    dynamicsFormRef.value?.render(model_form_field.value, model_setting_data)
+  })
+  dialogVisible.value = true
+}
+
+const reset_default = (model_id: string, application_id?: string) => {
+  const api = getApi(model_id, application_id)
+  api.then((ok) => {
+    model_form_field.value = ok.data
+    const model_setting_data = ok.data
+      .map((item) => ({
+        [item.field]: item.show_default_value !== false ? item.default_value : undefined
+      }))
+      .reduce((x, y) => ({ ...x, ...y }), {})
+
+    emit('refresh', model_setting_data)
+  })
+}
+
+const submit = async () => {
+  dynamicsFormRef.value?.validate().then(() => {
+    emit('refresh', form_data.value)
+    dialogVisible.value = false
+  })
+}
+
+const audioPlayer = ref<HTMLAudioElement | null>(null)
+const testPlay = () => {
+  const data = {
+    ...form_data.value,
+    tts_model_id: tts_model_id.value
+  }
+  applicationApi
+    .playDemoText(id as string, data, playLoading)
+    .then(async (res: any) => {
+      if (res.type === 'application/json') {
+        const text = await res.text()
+        MsgError(text)
+        return
+      }
+      // 创建 Blob 对象
+      const blob = new Blob([res], { type: 'audio/mp3' })
+
+      // 创建对象 URL
+      const url = URL.createObjectURL(blob)
+
+      // 检查 audioPlayer 是否已经引用了 DOM 元素
+      if (audioPlayer.value instanceof HTMLAudioElement) {
+        audioPlayer.value.src = url
+        audioPlayer.value.play() // 自动播放音频
+      } else {
+        console.error('audioPlayer.value is not an instance of HTMLAudioElement')
+      }
+    })
+    .catch((err) => {
+      console.log('err: ', err)
+    })
+}
+
+defineExpose({ open, reset_default })
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/application/index.vue b/ui/src/views/application/index.vue
new file mode 100644
index 000000000..a943b6a5d
--- /dev/null
+++ b/ui/src/views/application/index.vue
@@ -0,0 +1,444 @@
+<template>
+  <div class="application-list-container p-24" style="padding-top: 16px">
+    <div class="flex-between mb-16">
+      <h4>{{ $t('views.application.title') }}</h4>
+      <div class="flex-between">
+        <el-select
+          v-model="selectUserId"
+          class="mr-12"
+          @change="searchHandle"
+          style="max-width: 240px; width: 150px"
+        >
+          <el-option
+            v-for="item in userOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-input
+          v-model="searchValue"
+          @change="searchHandle"
+          :placeholder="$t('views.application.searchBar.placeholder')"
+          prefix-icon="Search"
+          class="w-240"
+          style="min-width: 240px"
+          clearable
+        />
+      </div>
+    </div>
+    <div v-loading.fullscreen.lock="paginationConfig.current_page === 1 && loading">
+      <InfiniteScroll
+        :size="applicationList.length"
+        :total="paginationConfig.total"
+        :page_size="paginationConfig.page_size"
+        v-model:current_page="paginationConfig.current_page"
+        @load="getList"
+        :loading="loading"
+      >
+        <el-row :gutter="15">
+          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb-16">
+            <el-card shadow="hover" class="application-card-add" style="--el-card-padding: 8px">
+              <div class="card-add-button flex align-center cursor p-8" @click="openCreateDialog">
+                <AppIcon iconName="app-add-application" class="mr-8"></AppIcon>
+                {{ $t('views.application.createApplication') }}
+              </div>
+              <el-divider style="margin: 8px 0" />
+              <el-upload
+                ref="elUploadRef"
+                :file-list="[]"
+                action="#"
+                multiple
+                :auto-upload="false"
+                :show-file-list="false"
+                :limit="1"
+                :on-change="(file: any, fileList: any) => importApplication(file)"
+                class="card-add-button"
+              >
+                <div class="flex align-center cursor p-8">
+                  <AppIcon iconName="app-import" class="mr-8"></AppIcon>
+                  {{ $t('views.application.importApplication') }}
+                </div>
+              </el-upload>
+            </el-card>
+          </el-col>
+          <el-col
+            :xs="24"
+            :sm="12"
+            :md="8"
+            :lg="6"
+            :xl="6"
+            v-for="(item, index) in applicationList"
+            :key="index"
+            class="mb-16"
+          >
+            <CardBox
+              :title="item.name"
+              :description="item.desc"
+              class="application-card cursor"
+              @click="router.push({ path: `/application/${item.id}/${item.type}/overview` })"
+            >
+              <template #icon>
+                <AppAvatar
+                  v-if="isAppIcon(item?.icon)"
+                  shape="square"
+                  :size="32"
+                  style="background: none"
+                  class="mr-8"
+                >
+                  <img :src="item?.icon" alt="" />
+                </AppAvatar>
+                <AppAvatar
+                  v-else-if="item?.name"
+                  :name="item?.name"
+                  pinyinColor
+                  shape="square"
+                  :size="32"
+                  class="mr-8"
+                />
+              </template>
+              <template #subTitle>
+                <el-text class="color-secondary" size="small">
+                  <auto-tooltip :content="item.username">
+                    {{ $t('common.creator') }}: {{ item.username }}
+                  </auto-tooltip>
+                </el-text>
+              </template>
+              <div class="status-tag">
+                <el-tag type="warning" v-if="isWorkFlow(item.type)" style="height: 22px">
+                  {{ $t('views.application.workflow') }}
+                </el-tag>
+                <el-tag class="blue-tag" v-else style="height: 22px">
+                  {{ $t('views.application.simple') }}
+                </el-tag>
+              </div>
+
+              <template #footer>
+                <div class="footer-content">
+                  <el-tooltip
+                    effect="dark"
+                    :content="$t('views.application.setting.demo')"
+                    placement="top"
+                  >
+                    <el-button text @click.stop @click="getAccessToken(item.id)">
+                      <AppIcon iconName="app-view"></AppIcon>
+                    </el-button>
+                  </el-tooltip>
+                  <el-divider direction="vertical" />
+                  <el-tooltip effect="dark" :content="$t('common.setting')" placement="top">
+                    <el-button text @click.stop="settingApplication(item)">
+                      <AppIcon iconName="Setting"></AppIcon>
+                    </el-button>
+                  </el-tooltip>
+                  <el-divider direction="vertical" />
+                  <span @click.stop>
+                    <el-dropdown trigger="click">
+                      <el-button text @click.stop>
+                        <el-icon><MoreFilled /></el-icon>
+                      </el-button>
+                      <template #dropdown>
+                        <el-dropdown-menu>
+                          <el-dropdown-item
+                            v-if="is_show_copy_button(item)"
+                            @click="copyApplication(item)"
+                          >
+                            <AppIcon iconName="app-copy"></AppIcon>
+                            {{ $t('common.copy') }}
+                          </el-dropdown-item>
+                          <el-dropdown-item @click.stop="exportApplication(item)">
+                            <AppIcon iconName="app-export"></AppIcon>
+
+                            {{ $t('common.export') }}
+                          </el-dropdown-item>
+                          <el-dropdown-item icon="Delete" @click.stop="deleteApplication(item)">{{
+                            $t('common.delete')
+                          }}</el-dropdown-item>
+                        </el-dropdown-menu>
+                      </template>
+                    </el-dropdown>
+                  </span>
+                </div>
+              </template>
+            </CardBox>
+          </el-col>
+        </el-row>
+      </InfiniteScroll>
+    </div>
+    <CreateApplicationDialog ref="CreateApplicationDialogRef" />
+    <CopyApplicationDialog ref="CopyApplicationDialogRef" />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, reactive } from 'vue'
+import applicationApi from '@/api/application'
+import CreateApplicationDialog from './component/CreateApplicationDialog.vue'
+import CopyApplicationDialog from './component/CopyApplicationDialog.vue'
+import { MsgSuccess, MsgConfirm, MsgAlert, MsgError } from '@/utils/message'
+import { isAppIcon } from '@/utils/common'
+import { useRouter } from 'vue-router'
+import { isWorkFlow } from '@/utils/application'
+import { ValidType, ValidCount } from '@/enums/common'
+import { t } from '@/locales'
+import useStore from '@/stores'
+
+const elUploadRef = ref<any>()
+const { application, user, common } = useStore()
+const router = useRouter()
+
+const CopyApplicationDialogRef = ref()
+const CreateApplicationDialogRef = ref()
+const loading = ref(false)
+
+const applicationList = ref<any[]>([])
+
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 30,
+  total: 0
+})
+
+interface UserOption {
+  label: string
+  value: string
+}
+
+const userOptions = ref<UserOption[]>([])
+
+const selectUserId = ref('all')
+
+const searchValue = ref('')
+
+const apiInputParams = ref([])
+
+function copyApplication(row: any) {
+  application.asyncGetApplicationDetail(row.id, loading).then((res: any) => {
+    if (res?.data) {
+      CopyApplicationDialogRef.value.open({ ...res.data, model_id: res.data.model })
+    }
+  })
+}
+
+const is_show_copy_button = (row: any) => {
+  return user.userInfo ? user.userInfo.id == row.user_id : false
+}
+
+function settingApplication(row: any) {
+  if (isWorkFlow(row.type)) {
+    router.push({ path: `/application/${row.id}/workflow` })
+  } else {
+    router.push({ path: `/application/${row.id}/${row.type}/setting` })
+  }
+}
+
+const exportApplication = (application: any) => {
+  applicationApi.exportApplication(application.id, application.name, loading).catch((e) => {
+    if (e.response.status !== 403) {
+      e.response.data.text().then((res: string) => {
+        MsgError(`${t('views.application.tip.ExportError')}:${JSON.parse(res).message}`)
+      })
+    }
+  })
+}
+const importApplication = (file: any) => {
+  const formData = new FormData()
+  formData.append('file', file.raw, file.name)
+  elUploadRef.value.clearFiles()
+  applicationApi
+    .importApplication(formData, loading)
+    .then(async (res: any) => {
+      if (res?.data) {
+        searchHandle()
+      }
+    })
+    .catch((e) => {
+      if (e.code === 400) {
+        MsgConfirm(t('common.tip'), t('views.application.tip.professionalMessage'), {
+          cancelButtonText: t('common.confirm'),
+          confirmButtonText: t('common.professional')
+        }).then(() => {
+          window.open('https://maxkb.cn/pricing.html', '_blank')
+        })
+      }
+    })
+}
+
+function openCreateDialog() {
+  common
+    .asyncGetValid(ValidType.Application, ValidCount.Application, loading)
+    .then(async (res: any) => {
+      if (res?.data) {
+        CreateApplicationDialogRef.value.open()
+      } else if (res?.code === 400) {
+        MsgConfirm(t('common.tip'), t('views.application.tip.professionalMessage'), {
+          cancelButtonText: t('common.confirm'),
+          confirmButtonText: t('common.professional')
+        }).then(() => {
+          window.open('https://maxkb.cn/pricing.html', '_blank')
+        })
+      }
+    })
+}
+
+function searchHandle() {
+  if (user.userInfo) {
+    localStorage.setItem(user.userInfo.id + 'application', selectUserId.value)
+  }
+  applicationList.value = []
+  paginationConfig.current_page = 1
+  paginationConfig.total = 0
+  getList()
+}
+
+function mapToUrlParams(map: any[]) {
+  const params = new URLSearchParams()
+
+  map.forEach((item: any) => {
+    params.append(encodeURIComponent(item.name), encodeURIComponent(item.value))
+  })
+
+  return params.toString() // 返回 URL 查询字符串
+}
+
+function getAccessToken(id: string) {
+  applicationList.value
+    .filter((app) => app.id === id)[0]
+    ?.work_flow?.nodes?.filter((v: any) => v.id === 'base-node')
+    .map((v: any) => {
+      apiInputParams.value = v.properties.api_input_field_list
+        ? v.properties.api_input_field_list.map((v: any) => {
+            return {
+              name: v.variable,
+              value: v.default_value
+            }
+          })
+        : v.properties.input_field_list
+          ? v.properties.input_field_list
+              .filter((v: any) => v.assignment_method === 'api_input')
+              .map((v: any) => {
+                return {
+                  name: v.variable,
+                  value: v.default_value
+                }
+              })
+          : []
+    })
+
+  const apiParams = mapToUrlParams(apiInputParams.value)
+    ? '?' + mapToUrlParams(apiInputParams.value)
+    : ''
+  application.asyncGetAccessToken(id, loading).then((res: any) => {
+    window.open(application.location + res?.data?.access_token + apiParams)
+  })
+}
+
+function deleteApplication(row: any) {
+  MsgConfirm(
+    // @ts-ignore
+    `${t('views.application.delete.confirmTitle')}${row.name} ?`,
+    t('views.application.delete.confirmMessage'),
+    {
+      confirmButtonText: t('common.confirm'),
+      cancelButtonText: t('common.cancel'),
+      confirmButtonClass: 'danger'
+    }
+  )
+    .then(() => {
+      applicationApi.delApplication(row.id, loading).then(() => {
+        const index = applicationList.value.findIndex((v) => v.id === row.id)
+        applicationList.value.splice(index, 1)
+        MsgSuccess(t('common.deleteSuccess'))
+      })
+    })
+    .catch(() => {})
+}
+
+function getList() {
+  const params = {
+    ...(searchValue.value && { name: searchValue.value }),
+    ...(selectUserId.value &&
+      selectUserId.value !== 'all' && { select_user_id: selectUserId.value })
+  }
+  applicationApi.getApplication(paginationConfig, params, loading).then((res) => {
+    res.data.records.forEach((item: any) => {
+      if (user.userInfo && item.user_id === user.userInfo.id) {
+        item.username = user.userInfo.username
+      } else {
+        item.username = userOptions.value.find((v) => v.value === item.user_id)?.label
+      }
+    })
+    applicationList.value = [...applicationList.value, ...res.data.records]
+    paginationConfig.total = res.data.total
+  })
+}
+
+function getUserList() {
+  applicationApi.getUserList('APPLICATION', loading).then((res) => {
+    if (res.data) {
+      userOptions.value = res.data.map((item: any) => {
+        return {
+          label: item.username,
+          value: item.id
+        }
+      })
+      if (user.userInfo) {
+        const selectUserIdValue = localStorage.getItem(user.userInfo.id + 'application')
+        if (selectUserIdValue && userOptions.value.find((v) => v.value === selectUserIdValue)) {
+          selectUserId.value = selectUserIdValue
+        }
+      }
+      getList()
+    }
+  })
+}
+
+onMounted(() => {
+  getUserList()
+})
+</script>
+<style lang="scss" scoped>
+.application-card-add {
+  width: 100%;
+  font-size: 14px;
+  min-height: var(--card-min-height);
+  border: 1px dashed var(--el-border-color);
+  background: var(--el-disabled-bg-color);
+  border-radius: 8px;
+  box-sizing: border-box;
+
+  &:hover {
+    border: 1px solid var(--el-card-bg-color);
+    background-color: var(--el-card-bg-color);
+  }
+
+  .card-add-button {
+    &:hover {
+      border-radius: 4px;
+      background: var(--app-text-color-light-1);
+    }
+
+    :deep(.el-upload) {
+      display: block;
+      width: 100%;
+      color: var(--el-text-color-regular);
+    }
+  }
+}
+
+.application-card {
+  .status-tag {
+    position: absolute;
+    right: 16px;
+    top: 15px;
+  }
+}
+
+.dropdown-custom-switch {
+  padding: 5px 11px;
+  font-size: 14px;
+  font-weight: 400;
+
+  span {
+    margin-right: 26px;
+  }
+}
+</style>
diff --git a/ui/src/views/chat/auth/component/password.vue b/ui/src/views/chat/auth/component/password.vue
new file mode 100644
index 000000000..05b79fd84
--- /dev/null
+++ b/ui/src/views/chat/auth/component/password.vue
@@ -0,0 +1,84 @@
+<template>
+  <el-dialog
+    :modelValue="show"
+    modal-class="positioned-mask"
+    width="300"
+    :title="$t('chat.passwordValidator.title')"
+    custom-class="no-close-button"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :show-close="false"
+    top="25vh"
+    center
+    :modal="true"
+  >
+    <el-form ref="FormRef" :model="form" @submit.prevent="validator">
+      <el-form-item prop="value" :rules="rules.value">
+        <el-input show-password v-model="form.value" />
+      </el-form-item>
+      <el-button class="w-full mt-8" type="primary" @click="validator" :loading="loading">
+        {{ $t('common.confirm') }}</el-button
+      >
+    </el-form>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import useStore from '@/stores'
+import { t } from '@/locales'
+const route = useRoute()
+const FormRef = ref()
+const {
+  params: { accessToken }
+} = route as any
+const { application } = useStore()
+const props = defineProps<{ applicationProfile: any; modelValue: boolean }>()
+const loading = ref<boolean>(false)
+const show = computed(() => {
+  if (props.applicationProfile) {
+    if (props.modelValue) {
+      return false
+    }
+    return props.applicationProfile.authentication
+  }
+  return false
+})
+const emit = defineEmits(['update:modelValue'])
+const auth = () => {
+  return application.asyncAppAuthentication(accessToken, loading, form.value).then(() => {
+    emit('update:modelValue', true)
+  })
+}
+const validator_auth = (rule: any, value: string, callback: any) => {
+  if (value === '') {
+    callback(new Error(t('chat.passwordValidator.errorMessage1')))
+  } else {
+    auth().catch(() => {
+      callback(new Error(t('chat.passwordValidator.errorMessage2')))
+    })
+  }
+}
+const validator = () => {
+  FormRef.value.validate()
+}
+
+const rules = {
+  value: [{ required: true, validator: validator_auth, trigger: 'manual' }]
+}
+
+const form = ref({
+  type: 'password',
+  value: ''
+})
+</script>
+<style lang="scss">
+.positioned-mask {
+  top: var(--app-header-height);
+  height: calc(100% - var(--app-header-height));
+  .el-overlay-dialog {
+    top: var(--app-header-height);
+    height: calc(100% - var(--app-header-height));
+  }
+}
+</style>
diff --git a/ui/src/views/chat/auth/index.vue b/ui/src/views/chat/auth/index.vue
new file mode 100644
index 000000000..535ab0d94
--- /dev/null
+++ b/ui/src/views/chat/auth/index.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="chat-pc__header" :style="customStyle">
+    <div class="flex align-center">
+      <div class="mr-12 ml-24 flex">
+        <AppAvatar
+          v-if="isAppIcon(application_profile?.icon)"
+          shape="square"
+          :size="32"
+          style="background: none"
+        >
+          <img :src="application_profile?.icon" alt="" />
+        </AppAvatar>
+        <AppAvatar
+          v-else-if="application_profile?.name"
+          :name="application_profile?.name"
+          pinyinColor
+          shape="square"
+          :size="32"
+        />
+      </div>
+      <h4>{{ application_profile?.name }}</h4>
+    </div>
+  </div>
+
+  <component
+    :is="auth_components[`/src/views/chat/auth/component/${auth_type}.vue`].default"
+    v-model="is_auth"
+    :applicationProfile="application_profile"
+  />
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { isAppIcon } from '@/utils/common'
+
+const auth_components: any = import.meta.glob('@/views/chat/auth/component/*.vue', {
+  eager: true
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const props = withDefaults(
+  defineProps<{ modelValue: boolean; application_profile: any; auth_type?: string; style?: any }>(),
+  {
+    auth_type: 'password',
+    style: {}
+  }
+)
+const is_auth = computed({
+  get: () => {
+    return props.modelValue
+  },
+  set: (v) => {
+    emit('update:modelValue', v)
+  }
+})
+
+const customStyle = computed(() => {
+  return {
+    background: props.application_profile?.custom_theme?.theme_color,
+    color: props.application_profile?.custom_theme?.header_font_color,
+    border: 'none',
+    ...props.style
+  }
+})
+</script>
+<style lang="scss"></style>
diff --git a/ui/src/views/chat/base/index.vue b/ui/src/views/chat/base/index.vue
new file mode 100644
index 000000000..bccd00a7d
--- /dev/null
+++ b/ui/src/views/chat/base/index.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="chat layout-bg" v-loading="loading">
+    <div class="chat__header" :class="!isDefaultTheme ? 'custom-header' : ''">
+      <div class="chat-width flex align-center">
+        <div class="mr-12 ml-24 flex">
+          <AppAvatar
+            v-if="isAppIcon(applicationDetail?.icon)"
+            shape="square"
+            :size="32"
+            style="background: none"
+          >
+            <img :src="applicationDetail?.icon" alt="" />
+          </AppAvatar>
+          <AppAvatar
+            v-else-if="applicationDetail?.name"
+            :name="applicationDetail?.name"
+            pinyinColor
+            shape="square"
+            :size="32"
+          />
+        </div>
+
+        <h2>{{ applicationDetail?.name }}</h2>
+      </div>
+    </div>
+    <div class="chat__main chat-width">
+      <AiChat
+        v-model:applicationDetails="applicationDetail"
+        type="ai-chat"
+        :available="applicationAvailable"
+        :appId="applicationDetail?.id"
+        :record="recordList"
+        :chatId="currentChatId"
+        @refresh="refresh"
+      >
+        <template #operateBefore>
+          <div>
+            <el-button type="primary" link class="new-chat-button mb-8" @click="newChat">
+              <el-icon><Plus /></el-icon><span class="ml-4">{{ $t('chat.createChat') }}</span>
+            </el-button>
+          </div>
+        </template>
+      </AiChat>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { isAppIcon } from '@/utils/common'
+import useStore from '@/stores'
+
+const { user } = useStore()
+
+const isDefaultTheme = computed(() => {
+  return user.isDefaultTheme()
+})
+
+const loading = ref(false)
+const props = defineProps<{
+  application_profile: any
+  applicationAvailable: boolean
+}>()
+const applicationDetail = computed({
+  get: () => {
+    return props.application_profile
+  },
+  set: (v) => {}
+})
+const recordList = ref([])
+const currentChatId = ref('')
+
+function newChat() {
+  currentChatId.value = 'new'
+  recordList.value = []
+}
+function refresh(id: string) {
+  currentChatId.value = id
+}
+</script>
+<style lang="scss">
+.chat {
+  overflow: hidden;
+  &__header {
+    background: var(--app-header-bg-color);
+    position: fixed;
+    width: 100%;
+    left: 0;
+    top: 0;
+    z-index: 100;
+    height: var(--app-header-height);
+    line-height: var(--app-header-height);
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--el-border-color);
+  }
+  &__main {
+    padding-top: calc(var(--app-header-height) + 24px);
+    height: calc(100vh - var(--app-header-height) - 24px);
+    overflow: hidden;
+  }
+
+  .chat-width {
+    // max-width: 80%;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/ui/src/views/chat/embed/index.vue b/ui/src/views/chat/embed/index.vue
new file mode 100644
index 000000000..df9fde29a
--- /dev/null
+++ b/ui/src/views/chat/embed/index.vue
@@ -0,0 +1,404 @@
+<template>
+  <div
+    class="chat-embed layout-bg"
+    :class="{ 'chat-embed--popup': isPopup }"
+    v-loading="loading"
+    :style="{
+      '--el-color-primary': applicationDetail?.custom_theme?.theme_color,
+      '--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1)
+    }"
+  >
+    <div class="chat-embed__header" :style="customStyle">
+      <div class="flex align-center">
+        <div class="mr-12 ml-24 flex">
+          <AppAvatar
+            v-if="isAppIcon(applicationDetail?.icon)"
+            shape="square"
+            :size="32"
+            style="background: none"
+          >
+            <img :src="applicationDetail?.icon" alt="" />
+          </AppAvatar>
+          <AppAvatar
+            v-else-if="applicationDetail?.name"
+            :name="applicationDetail?.name"
+            pinyinColor
+            shape="square"
+            :size="32"
+          />
+        </div>
+
+        <h4>{{ applicationDetail?.name }}</h4>
+      </div>
+    </div>
+    <div>
+      <div class="chat-embed__main">
+        <AiChat
+          ref="AiChatRef"
+          v-model:applicationDetails="applicationDetail"
+          :available="applicationAvailable"
+          :appId="applicationDetail?.id"
+          :record="currentRecordList"
+          :chatId="currentChatId"
+          type="ai-chat"
+          @refresh="refresh"
+          @scroll="handleScroll"
+          class="AiChat-embed"
+        >
+          <template #operateBefore>
+            <div>
+              <el-button type="primary" link class="new-chat-button mb-8" @click="newChat">
+                <el-icon><Plus /></el-icon><span class="ml-4">{{ $t('chat.createChat') }}</span>
+              </el-button>
+            </div>
+          </template>
+        </AiChat>
+      </div>
+
+      <!-- 历史记录弹出层 -->
+      <div
+        v-if="applicationDetail.show_history || !user.isEnterprise()"
+        @click.prevent.stop="show = !show"
+        class="chat-popover-button cursor color-secondary"
+      >
+        <AppIcon
+          iconName="app-history-outlined"
+          :style="{
+            color: applicationDetail?.custom_theme?.header_font_color
+          }"
+        ></AppIcon>
+      </div>
+
+      <el-collapse-transition>
+        <div v-show="show" class="chat-popover w-full" v-click-outside="clickoutside">
+          <div class="border-b p-16-24">
+            <span>{{ $t('chat.history') }}</span>
+          </div>
+
+          <el-scrollbar max-height="300">
+            <div class="p-8">
+              <common-list
+                :style="{ '--el-color-primary': applicationDetail?.custom_theme?.theme_color }"
+                :data="chatLogData"
+                v-loading="left_loading"
+                :defaultActive="currentChatId"
+                @click="clickListHandle"
+                @mouseenter="mouseenter"
+                @mouseleave="mouseId = ''"
+              >
+                <template #default="{ row }">
+                  <div class="flex-between">
+                    <ReadWrite
+                      @change="editName($event, row)"
+                      :data="row.abstract"
+                      trigger="manual"
+                      :write="row.writeStatus"
+                      @close="closeWrite(row)"
+                      :maxlength="1024"
+                    />
+                    <div
+                      @click.stop
+                      v-if="mouseId === row.id && row.id !== 'new' && !row.writeStatus"
+                      class="flex"
+                    >
+                      <el-button style="padding: 0" link @click.stop="openWrite(row)">
+                        <el-icon><EditPen /></el-icon>
+                      </el-button>
+                      <el-button style="padding: 0" link @click.stop="deleteLog(row)">
+                        <el-icon><Delete /></el-icon>
+                      </el-button>
+                    </div>
+                  </div>
+                </template>
+                <template #empty>
+                  <div class="text-center mt-24">
+                    <el-text type="info">{{ $t('chat.noHistory') }}</el-text>
+                  </div>
+                </template>
+              </common-list>
+            </div>
+            <div v-if="chatLogData.length" class="gradient-divider lighter mt-8">
+              <span>{{ $t('chat.only20history') }}</span>
+            </div>
+          </el-scrollbar>
+        </div>
+      </el-collapse-transition>
+      <div class="chat-popover-mask" v-show="show"></div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, reactive, nextTick, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { isAppIcon } from '@/utils/common'
+import { hexToRgba } from '@/utils/theme'
+import { MsgError } from '@/utils/message'
+import useStore from '@/stores'
+import { t } from '@/locales'
+const { user, log } = useStore()
+const route = useRoute()
+
+const isPopup = computed(() => {
+  return route.query.popup !== 'no'
+})
+const AiChatRef = ref()
+const loading = ref(false)
+const left_loading = ref(false)
+const chatLogData = ref<any[]>([])
+const show = ref(false)
+const props = defineProps<{
+  application_profile: any
+  applicationAvailable: boolean
+}>()
+const applicationDetail = computed({
+  get: () => {
+    return props.application_profile
+  },
+  set: (v) => {}
+})
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 20,
+  total: 0
+})
+
+const currentRecordList = ref<any>([])
+const currentChatId = ref('new') // 当前历史记录Id 默认为'new'
+
+const mouseId = ref('')
+
+const customStyle = computed(() => {
+  return {
+    background: applicationDetail.value?.custom_theme?.theme_color,
+    color: applicationDetail.value?.custom_theme?.header_font_color
+  }
+})
+
+function editName(val: string, item: any) {
+  if (val) {
+    const obj = {
+      abstract: val
+    }
+    log.asyncPutChatClientLog(applicationDetail.value.id, item.id, obj, loading).then(() => {
+      const find = chatLogData.value.find((row: any) => row.id === item.id)
+      if (find) {
+        find.abstract = val
+      }
+      item['writeStatus'] = false
+    })
+  } else {
+    MsgError(t('views.applicationWorkflow.tip.nameMessage'))
+  }
+}
+
+function openWrite(item: any) {
+  item['writeStatus'] = true
+}
+
+function closeWrite(item: any) {
+  item['writeStatus'] = false
+}
+
+function mouseenter(row: any) {
+  mouseId.value = row.id
+}
+function deleteLog(row: any) {
+  log.asyncDelChatClientLog(applicationDetail.value.id, row.id, left_loading).then(() => {
+    if (currentChatId.value === row.id) {
+      currentChatId.value = 'new'
+      paginationConfig.current_page = 1
+      paginationConfig.total = 0
+      currentRecordList.value = []
+    }
+    getChatLog(applicationDetail.value.id)
+  })
+}
+
+function handleScroll(event: any) {
+  if (
+    currentChatId.value !== 'new' &&
+    event.scrollTop === 0 &&
+    paginationConfig.total > currentRecordList.value.length
+  ) {
+    const history_height = event.dialogScrollbar.offsetHeight
+    paginationConfig.current_page += 1
+    getChatRecord().then(() => {
+      event.scrollDiv.setScrollTop(event.dialogScrollbar.offsetHeight - history_height)
+    })
+  }
+}
+
+function clickoutside() {
+  show.value = false
+}
+
+function newChat() {
+  paginationConfig.current_page = 1
+  currentRecordList.value = []
+  currentChatId.value = 'new'
+}
+
+function getChatLog(id: string) {
+  const page = {
+    current_page: 1,
+    page_size: 20
+  }
+
+  log.asyncGetChatLogClient(id, page, left_loading).then((res: any) => {
+    chatLogData.value = res.data.records
+    paginationConfig.current_page = 1
+    paginationConfig.total = 0
+    currentRecordList.value = []
+    currentChatId.value = chatLogData.value?.[0]?.id || 'new'
+    if (currentChatId.value !== 'new') {
+      getChatRecord()
+    }
+  })
+}
+
+function getChatRecord() {
+  return log
+    .asyncChatRecordLog(
+      applicationDetail.value.id,
+      currentChatId.value,
+      paginationConfig,
+      loading,
+      false
+    )
+    .then((res: any) => {
+      paginationConfig.total = res.data.total
+      const list = res.data.records
+      list.map((v: any) => {
+        v['write_ed'] = true
+        v['record_id'] = v.id
+      })
+      currentRecordList.value = [...list, ...currentRecordList.value].sort((a, b) =>
+        a.create_time.localeCompare(b.create_time)
+      )
+      if (paginationConfig.current_page === 1) {
+        nextTick(() => {
+          // 将滚动条滚动到最下面
+          AiChatRef.value.setScrollBottom()
+        })
+      }
+    })
+}
+
+const clickListHandle = (item: any) => {
+  if (item.id !== currentChatId.value) {
+    paginationConfig.current_page = 1
+    currentRecordList.value = []
+    currentChatId.value = item.id
+    if (currentChatId.value !== 'new') {
+      getChatRecord()
+    }
+    show.value = false
+  }
+}
+
+function refresh(id: string) {
+  getChatLog(applicationDetail.value.id)
+  currentChatId.value = id
+}
+/**
+ *初始化历史对话记录
+ */
+const init = () => {
+  if (applicationDetail.value.show_history || !user.isEnterprise()) {
+    getChatLog(applicationDetail.value.id)
+  }
+}
+
+onMounted(() => {
+  init()
+})
+</script>
+<style lang="scss">
+.chat-embed {
+  overflow: hidden;
+  &__header {
+    background: var(--app-header-bg-color);
+    position: fixed;
+    width: 100%;
+    left: 0;
+    top: 0;
+    z-index: 100;
+    height: var(--app-header-height);
+    line-height: var(--app-header-height);
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--el-border-color);
+  }
+  &__main {
+    padding-top: calc(var(--app-header-height) + 16px);
+    height: calc(100vh - var(--app-header-height) - 16px);
+    overflow: hidden;
+  }
+  .new-chat-button {
+    z-index: 11;
+  }
+  // 历史对话弹出层
+  .chat-popover {
+    position: absolute;
+    top: var(--app-header-height);
+    background: #ffffff;
+    padding-bottom: 24px;
+    z-index: 2009;
+  }
+  .chat-popover-button {
+    z-index: 2009;
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    font-size: 22px;
+  }
+  &.chat-embed--popup {
+    .chat-popover-button {
+      right: 85px;
+    }
+  }
+  .chat-popover-mask {
+    background-color: var(--el-overlay-color-lighter);
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    overflow: auto;
+    position: fixed;
+    right: 0;
+    top: var(--app-header-height);
+    z-index: 2008;
+  }
+  .gradient-divider {
+    position: relative;
+    text-align: center;
+    color: var(--el-color-info);
+    ::before {
+      content: '';
+      width: 17%;
+      height: 1px;
+      background: linear-gradient(90deg, rgba(222, 224, 227, 0) 0%, #dee0e3 100%);
+      position: absolute;
+      left: 16px;
+      top: 50%;
+    }
+    ::after {
+      content: '';
+      width: 17%;
+      height: 1px;
+      background: linear-gradient(90deg, #dee0e3 0%, rgba(222, 224, 227, 0) 100%);
+      position: absolute;
+      right: 16px;
+      top: 50%;
+    }
+  }
+  .AiChat-embed {
+    .ai-chat__operate {
+      padding-top: 12px;
+    }
+  }
+}
+</style>
+<style lang="scss" scoped>
+:deep(.el-overlay) {
+  background-color: transparent;
+}
+</style>
diff --git a/ui/src/views/chat/index.vue b/ui/src/views/chat/index.vue
new file mode 100644
index 000000000..7f58d1df3
--- /dev/null
+++ b/ui/src/views/chat/index.vue
@@ -0,0 +1,103 @@
+<template>
+  <component
+    v-if="chat_show && init_data_end"
+    :applicationAvailable="applicationAvailable"
+    :is="currentTemplate"
+    :application_profile="application_profile"
+    :key="route.fullPath"
+    v-loading="loading"
+  />
+  <Auth
+    v-else
+    :application_profile="application_profile"
+    :auth_type="application_profile.authentication_type"
+    v-model="is_auth"
+    :style="{
+      '--el-color-primary': application_profile?.custom_theme?.theme_color,
+      '--el-color-primary-light-9': hexToRgba(application_profile?.custom_theme?.theme_color, 0.1)
+    }"
+  ></Auth>
+</template>
+<script setup lang="ts">
+import { ref, onBeforeMount, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import useStore from '@/stores'
+import Auth from '@/views/chat/auth/index.vue'
+import { hexToRgba } from '@/utils/theme'
+import { useI18n } from 'vue-i18n'
+import { getBrowserLang } from '@/locales/index'
+const { locale } = useI18n({ useScope: 'global' })
+const route = useRoute()
+const { application, user } = useStore()
+
+const components: any = import.meta.glob('@/views/chat/**/index.vue', {
+  eager: true
+})
+
+const {
+  query: { mode },
+  params: { accessToken }
+} = route as any
+const is_auth = ref<boolean>(false)
+const currentTemplate = computed(() => {
+  let modeName = ''
+  if (!mode || mode === 'pc') {
+    modeName = show_history.value || !user.isEnterprise() ? 'pc' : 'base'
+  } else {
+    modeName = mode
+  }
+  const name = `/src/views/chat/${modeName}/index.vue`
+  return components[name].default
+})
+/**
+ * 是否显示对话
+ */
+const chat_show = computed(() => {
+  if (init_data_end.value) {
+    if (!applicationAvailable.value) {
+      return true
+    }
+    if (application_profile.value) {
+      if (application_profile.value.authentication && is_auth.value) {
+        return true
+      } else if (!application_profile.value.authentication) {
+        return true
+      }
+    }
+  }
+  return false
+})
+const loading = ref(false)
+
+const show_history = ref(false)
+
+const application_profile = ref<any>({})
+/**
+
+ * 初始化结束
+ */
+const init_data_end = ref<boolean>(false)
+
+const applicationAvailable = ref<boolean>(true)
+function getAppProfile() {
+  return application.asyncGetAppProfile(loading).then((res: any) => {
+    locale.value = res.data?.language || getBrowserLang()
+    show_history.value = res.data?.show_history
+    application_profile.value = res.data
+  })
+}
+function getAccessToken(token: string) {
+  return application.asyncAppAuthentication(token, loading).then(() => {
+    return getAppProfile()
+  })
+}
+onBeforeMount(() => {
+  user.changeUserType(2, accessToken)
+  Promise.all([user.asyncGetProfile(), getAccessToken(accessToken)])
+    .catch(() => {
+      applicationAvailable.value = false
+    })
+    .finally(() => (init_data_end.value = true))
+})
+</script>
+<style lang="scss"></style>
diff --git a/ui/src/views/chat/mobile/index.vue b/ui/src/views/chat/mobile/index.vue
new file mode 100644
index 000000000..808570079
--- /dev/null
+++ b/ui/src/views/chat/mobile/index.vue
@@ -0,0 +1,401 @@
+<template>
+  <div
+    class="chat-mobile layout-bg"
+    v-loading="loading"
+    :style="{
+      '--el-color-primary': applicationDetail?.custom_theme?.theme_color,
+      '--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1)
+    }"
+  >
+    <div class="chat-embed__header" :style="customStyle">
+      <div class="flex align-center">
+        <div class="mr-12 ml-24 flex">
+          <AppAvatar
+            v-if="isAppIcon(applicationDetail?.icon)"
+            shape="square"
+            :size="32"
+            style="background: none"
+          >
+            <img :src="applicationDetail?.icon" alt="" />
+          </AppAvatar>
+          <AppAvatar
+            v-else-if="applicationDetail?.name"
+            :name="applicationDetail?.name"
+            pinyinColor
+            shape="square"
+            :size="32"
+          />
+        </div>
+
+        <h4>{{ applicationDetail?.name }}</h4>
+      </div>
+    </div>
+    <div>
+      <div class="chat-embed__main">
+        <AiChat
+          ref="AiChatRef"
+          v-model:applicationDetails="applicationDetail"
+          :available="applicationAvailable"
+          :appId="applicationDetail?.id"
+          :record="currentRecordList"
+          :chatId="currentChatId"
+          type="ai-chat"
+          @refresh="refresh"
+          @scroll="handleScroll"
+          class="AiChat-embed"
+        >
+          <template #operateBefore>
+            <div>
+              <el-button type="primary" link class="new-chat-button mb-8" @click="newChat">
+                <el-icon><Plus /></el-icon><span class="ml-4">{{ $t('chat.createChat') }}</span>
+              </el-button>
+            </div>
+          </template>
+        </AiChat>
+      </div>
+
+      <!-- 历史记录弹出层 -->
+      <div
+        v-if="applicationDetail.show_history || !user.isEnterprise()"
+        @click.prevent.stop="show = !show"
+        class="chat-popover-button cursor color-secondary"
+      >
+        <AppIcon
+          iconName="app-history-outlined"
+          :style="{
+            color: applicationDetail?.custom_theme?.header_font_color
+          }"
+        ></AppIcon>
+      </div>
+
+      <el-collapse-transition>
+        <div v-show="show" class="chat-popover w-full" v-click-outside="clickoutside">
+          <div class="border-b p-16-24">
+            <span>{{ $t('chat.history') }}</span>
+          </div>
+
+          <el-scrollbar max-height="300">
+            <div class="p-8">
+              <common-list
+                :style="{ '--el-color-primary': applicationDetail?.custom_theme?.theme_color }"
+                :data="chatLogData"
+                v-loading="left_loading"
+                :defaultActive="currentChatId"
+                @click="clickListHandle"
+                @mouseenter="mouseenter"
+                @mouseleave="mouseId = ''"
+              >
+                <template #default="{ row }">
+                  <div class="flex-between">
+                    <ReadWrite
+                      @change="editName($event, row)"
+                      :data="row.abstract"
+                      trigger="manual"
+                      :write="row.writeStatus"
+                      @close="closeWrite(row)"
+                      :maxlength="1024"
+                    />
+                    <div
+                      @click.stop
+                      v-if="mouseId === row.id && row.id !== 'new' && !row.writeStatus"
+                      class="flex"
+                    >
+                      <el-button style="padding: 0" link @click.stop="openWrite(row)">
+                        <el-icon><EditPen /></el-icon>
+                      </el-button>
+                      <el-button style="padding: 0" link @click.stop="deleteLog(row)">
+                        <el-icon><Delete /></el-icon>
+                      </el-button>
+                    </div>
+                  </div>
+                </template>
+                <template #empty>
+                  <div class="text-center mt-24">
+                    <el-text type="info">{{ $t('chat.noHistory') }}</el-text>
+                  </div>
+                </template>
+              </common-list>
+            </div>
+            <div v-if="chatLogData.length" class="gradient-divider lighter mt-8">
+              <span>{{ $t('chat.only20history') }}</span>
+            </div>
+          </el-scrollbar>
+        </div>
+      </el-collapse-transition>
+      <div class="chat-popover-mask" v-show="show"></div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, reactive, nextTick, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { isAppIcon } from '@/utils/common'
+import { hexToRgba } from '@/utils/theme'
+import { MsgError } from '@/utils/message'
+import useStore from '@/stores'
+import { t } from '@/locales'
+const { user, log } = useStore()
+
+const AiChatRef = ref()
+const loading = ref(false)
+const left_loading = ref(false)
+const chatLogData = ref<any[]>([])
+const show = ref(false)
+const props = defineProps<{
+  application_profile: any
+  applicationAvailable: boolean
+}>()
+const applicationDetail = computed({
+  get: () => {
+    return props.application_profile
+  },
+  set: (v) => {}
+})
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 20,
+  total: 0
+})
+
+const currentRecordList = ref<any>([])
+const currentChatId = ref('new') // 当前历史记录Id 默认为'new'
+
+const mouseId = ref('')
+
+const customStyle = computed(() => {
+  return {
+    background: applicationDetail.value?.custom_theme?.theme_color,
+    color: applicationDetail.value?.custom_theme?.header_font_color
+  }
+})
+
+function editName(val: string, item: any) {
+  if (val) {
+    const obj = {
+      abstract: val
+    }
+
+    log.asyncPutChatClientLog(applicationDetail.value.id, item.id, obj, loading).then(() => {
+      const find = chatLogData.value.find((row: any) => row.id === item.id)
+      if (find) {
+        find.abstract = val
+      }
+      item['writeStatus'] = false
+    })
+  } else {
+    MsgError(t('views.applicationWorkflow.tip.nameMessage'))
+  }
+}
+
+function openWrite(item: any) {
+  item['writeStatus'] = true
+}
+
+function closeWrite(item: any) {
+  item['writeStatus'] = false
+}
+
+function mouseenter(row: any) {
+  mouseId.value = row.id
+}
+function deleteLog(row: any) {
+  log.asyncDelChatClientLog(applicationDetail.value.id, row.id, left_loading).then(() => {
+    if (currentChatId.value === row.id) {
+      currentChatId.value = 'new'
+      paginationConfig.current_page = 1
+      paginationConfig.total = 0
+      currentRecordList.value = []
+    }
+    getChatLog(applicationDetail.value.id)
+  })
+}
+
+function handleScroll(event: any) {
+  if (
+    currentChatId.value !== 'new' &&
+    event.scrollTop === 0 &&
+    paginationConfig.total > currentRecordList.value.length
+  ) {
+    const history_height = event.dialogScrollbar.offsetHeight
+    paginationConfig.current_page += 1
+    getChatRecord().then(() => {
+      event.scrollDiv.setScrollTop(event.dialogScrollbar.offsetHeight - history_height)
+    })
+  }
+}
+
+function clickoutside() {
+  show.value = false
+}
+
+function newChat() {
+  paginationConfig.current_page = 1
+  currentRecordList.value = []
+  currentChatId.value = 'new'
+}
+
+function getChatLog(id: string) {
+  const page = {
+    current_page: 1,
+    page_size: 20
+  }
+
+  log.asyncGetChatLogClient(id, page, left_loading).then((res: any) => {
+    chatLogData.value = res.data.records
+    paginationConfig.current_page = 1
+    paginationConfig.total = 0
+    currentRecordList.value = []
+    currentChatId.value = chatLogData.value?.[0]?.id || 'new'
+    if (currentChatId.value !== 'new') {
+      getChatRecord()
+    }
+  })
+}
+
+function getChatRecord() {
+  return log
+    .asyncChatRecordLog(
+      applicationDetail.value.id,
+      currentChatId.value,
+      paginationConfig,
+      loading,
+      false
+    )
+    .then((res: any) => {
+      paginationConfig.total = res.data.total
+      const list = res.data.records
+      list.map((v: any) => {
+        v['write_ed'] = true
+        v['record_id'] = v.id
+      })
+      currentRecordList.value = [...list, ...currentRecordList.value].sort((a, b) =>
+        a.create_time.localeCompare(b.create_time)
+      )
+      if (paginationConfig.current_page === 1) {
+        nextTick(() => {
+          // 将滚动条滚动到最下面
+          AiChatRef.value.setScrollBottom()
+        })
+      }
+    })
+}
+
+const clickListHandle = (item: any) => {
+  if (item.id !== currentChatId.value) {
+    paginationConfig.current_page = 1
+    currentRecordList.value = []
+    currentChatId.value = item.id
+    if (currentChatId.value !== 'new') {
+      getChatRecord()
+    }
+    show.value = false
+  }
+}
+
+function refresh(id: string) {
+  getChatLog(applicationDetail.value.id)
+  currentChatId.value = id
+}
+/**
+ *初始化历史对话记录
+ */
+const init = () => {
+  if (applicationDetail.value.show_history || !user.isEnterprise()) {
+    getChatLog(applicationDetail.value.id)
+  }
+}
+
+onMounted(() => {
+  init()
+})
+</script>
+<style lang="scss">
+.chat-mobile {
+  overflow: hidden;
+  &__header {
+    background: var(--app-header-bg-color);
+    position: fixed;
+    width: 100%;
+    left: 0;
+    top: 0;
+    z-index: 100;
+    height: var(--app-header-height);
+    line-height: var(--app-header-height);
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--el-border-color);
+  }
+  &__main {
+    padding-top: calc(var(--app-header-height) + 16px);
+    height: calc(100vh - var(--app-header-height) - 16px);
+    overflow: hidden;
+  }
+  .new-chat-button {
+    z-index: 11;
+    font-size: 1rem;
+  }
+  // 历史对话弹出层
+  .chat-popover {
+    position: fixed;
+    top: var(--app-header-height);
+    background: #ffffff;
+    padding-bottom: 24px;
+    z-index: 2009;
+  }
+  .chat-popover-button {
+    z-index: 2009;
+    position: fixed;
+    top: 16px;
+    right: 16px;
+    font-size: 22px;
+  }
+  // &.chat-embed--popup {
+  //   .chat-popover-button {
+  //     right: 85px;
+  //   }
+  // }
+  .chat-popover-mask {
+    background-color: var(--el-overlay-color-lighter);
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    overflow: auto;
+    position: fixed;
+    right: 0;
+    top: var(--app-header-height);
+    z-index: 2008;
+  }
+  .gradient-divider {
+    position: relative;
+    text-align: center;
+    color: var(--el-color-info);
+    ::before {
+      content: '';
+      width: 17%;
+      height: 1px;
+      background: linear-gradient(90deg, rgba(222, 224, 227, 0) 0%, #dee0e3 100%);
+      position: absolute;
+      left: 16px;
+      top: 50%;
+    }
+    ::after {
+      content: '';
+      width: 17%;
+      height: 1px;
+      background: linear-gradient(90deg, #dee0e3 0%, rgba(222, 224, 227, 0) 100%);
+      position: absolute;
+      right: 16px;
+      top: 50%;
+    }
+  }
+  // .AiChat-embed {
+  //   .ai-chat__operate {
+  //     padding-top: 12px;
+  //   }
+  // }
+}
+</style>
+<style lang="scss" scoped>
+:deep(.el-overlay) {
+  background-color: transparent;
+}
+</style>
diff --git a/ui/src/views/chat/pc/EditTitleDialog.vue b/ui/src/views/chat/pc/EditTitleDialog.vue
new file mode 100644
index 000000000..e8a8d08e7
--- /dev/null
+++ b/ui/src/views/chat/pc/EditTitleDialog.vue
@@ -0,0 +1,87 @@
+<template>
+  <el-dialog
+    class="responsive-dialog"
+    :title="$t('chat.editTitle')"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    append-to-body
+  >
+    <el-form
+      label-position="top"
+      ref="fieldFormRef"
+      :model="form"
+      require-asterisk-position="right"
+    >
+      <el-form-item
+        prop="abstract"
+        :rules="[
+          {
+            required: true,
+            message: $t('common.inputPlaceholder'),
+            trigger: 'blur'
+          }
+        ]"
+      >
+        <el-input
+          v-model="form.abstract"
+          maxlength="1024"
+          show-word-limit
+          type="textarea"
+          @blur="form.abstract = form.abstract.trim()"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submit(fieldFormRef)" :loading="loading">
+          {{ $t('common.save') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import type { FormInstance } from 'element-plus'
+import useStore from '@/stores'
+import { t } from '@/locales'
+
+const { log } = useStore()
+const emit = defineEmits(['refresh'])
+
+const fieldFormRef = ref()
+const loading = ref<boolean>(false)
+const applicationId = ref<string>('')
+const chatId = ref<string>('')
+
+const form = ref<any>({
+  abstract: ''
+})
+
+const dialogVisible = ref<boolean>(false)
+
+const open = (row: any, id: string) => {
+  applicationId.value = id
+  chatId.value = row.id
+  form.value.abstract = row.abstract
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      log.asyncPutChatClientLog(applicationId.value, chatId.value, form.value, loading).then(() => {
+        emit('refresh', chatId.value, form.value.abstract)
+        dialogVisible.value = false
+      })
+    }
+  })
+}
+
+defineExpose({ open, close })
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/chat/pc/index.vue b/ui/src/views/chat/pc/index.vue
new file mode 100644
index 000000000..b1b20e711
--- /dev/null
+++ b/ui/src/views/chat/pc/index.vue
@@ -0,0 +1,527 @@
+<template>
+  <div
+    class="chat-pc layout-bg"
+    :class="classObj"
+    v-loading="loading"
+    :style="{
+      '--el-color-primary': applicationDetail?.custom_theme?.theme_color,
+      '--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1)
+    }"
+  >
+    <div class="chat-pc__header" :style="customStyle">
+      <div class="flex align-center">
+        <div class="mr-12 ml-24 flex">
+          <AppAvatar
+            v-if="isAppIcon(applicationDetail?.icon)"
+            shape="square"
+            :size="32"
+            style="background: none"
+          >
+            <img :src="applicationDetail?.icon" alt="" />
+          </AppAvatar>
+          <AppAvatar
+            v-else-if="applicationDetail?.name"
+            :name="applicationDetail?.name"
+            pinyinColor
+            shape="square"
+            :size="32"
+          />
+        </div>
+        <h4>{{ applicationDetail?.name }}</h4>
+      </div>
+    </div>
+    <div>
+      <div class="flex">
+        <div class="chat-pc__left border-r">
+          <div class="p-24 pb-0">
+            <el-button class="add-button w-full primary" @click="newChat">
+              <el-icon>
+                <Plus />
+              </el-icon>
+              <span class="ml-4">{{ $t('chat.createChat') }}</span>
+            </el-button>
+            <p class="mt-20 mb-8">{{ $t('chat.history') }}</p>
+          </div>
+          <div class="left-height pt-0">
+            <el-scrollbar>
+              <div class="p-8 pt-0">
+                <common-list
+                  :style="{
+                    '--el-color-primary': applicationDetail?.custom_theme?.theme_color,
+                    '--el-color-primary-light-9': hexToRgba(
+                      applicationDetail?.custom_theme?.theme_color,
+                      0.1
+                    )
+                  }"
+                  :data="chatLogData"
+                  class="mt-8"
+                  v-loading="left_loading"
+                  :defaultActive="currentChatId"
+                  @click="clickListHandle"
+                  @mouseenter="mouseenter"
+                  @mouseleave="mouseId = ''"
+                >
+                  <template #default="{ row }">
+                    <div class="flex-between">
+                      <auto-tooltip :content="row.abstract">
+                        {{ row.abstract }}
+                      </auto-tooltip>
+                      <div @click.stop v-show="mouseId === row.id && row.id !== 'new'">
+                        <el-dropdown trigger="click" :teleported="false">
+                          <el-icon class="rotate-90 mt-4"><MoreFilled /></el-icon>
+                          <template #dropdown>
+                            <el-dropdown-menu>
+                              <el-dropdown-item @click.stop="editLogTitle(row)">
+                                <el-icon><EditPen /></el-icon>
+                                {{ $t('common.edit') }}
+                              </el-dropdown-item>
+                              <el-dropdown-item @click.stop="deleteLog(row)">
+                                <el-icon><Delete /></el-icon>
+                                {{ $t('common.delete') }}
+                              </el-dropdown-item>
+                            </el-dropdown-menu>
+                          </template>
+                        </el-dropdown>
+                      </div>
+                    </div>
+                  </template>
+
+                  <template #empty>
+                    <div class="text-center">
+                      <el-text type="info">{{ $t('chat.noHistory') }}</el-text>
+                    </div>
+                  </template>
+                </common-list>
+              </div>
+              <div v-if="chatLogData?.length" class="gradient-divider lighter mt-8">
+                <span>{{ $t('chat.only20history') }}</span>
+              </div>
+            </el-scrollbar>
+          </div>
+        </div>
+        <div class="chat-pc__right">
+          <div class="right-header border-b mb-24 p-16-24 flex-between">
+            <h4 class="ellipsis-1" style="width: 66%">
+              {{ currentChatName }}
+            </h4>
+
+            <span class="flex align-center" v-if="currentRecordList.length">
+              <AppIcon
+                v-if="paginationConfig.total"
+                iconName="app-chat-record"
+                class="info mr-8"
+                style="font-size: 16px"
+              ></AppIcon>
+              <span v-if="paginationConfig.total" class="lighter">
+                {{ paginationConfig.total }} {{ $t('chat.question_count') }}
+              </span>
+              <el-dropdown class="ml-8">
+                <AppIcon
+                  iconName="app-export"
+                  class="cursor"
+                  :title="$t('chat.exportRecords')"
+                ></AppIcon>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item @click="exportMarkdown"
+                      >{{ $t('common.export') }} Markdown</el-dropdown-item
+                    >
+                    <el-dropdown-item @click="exportHTML"
+                      >{{ $t('common.export') }} HTML</el-dropdown-item
+                    >
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </span>
+          </div>
+          <div class="right-height chat-width">
+            <AiChat
+              ref="AiChatRef"
+              v-model:applicationDetails="applicationDetail"
+              :available="applicationAvailable"
+              type="ai-chat"
+              :appId="applicationDetail?.id"
+              :record="currentRecordList"
+              :chatId="currentChatId"
+              @refresh="refresh"
+              @scroll="handleScroll"
+            >
+            </AiChat>
+          </div>
+        </div>
+      </div>
+      <div class="collapse">
+        <el-button @click="isCollapse = !isCollapse">
+          <el-icon> <component :is="isCollapse ? 'Fold' : 'Expand'" /></el-icon>
+        </el-button>
+      </div>
+    </div>
+    <EditTitleDialog ref="EditTitleDialogRef" @refresh="refreshFieldTitle" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick, computed } from 'vue'
+import { marked } from 'marked'
+import { saveAs } from 'file-saver'
+import { isAppIcon } from '@/utils/common'
+import useStore from '@/stores'
+import useResize from '@/layout/hooks/useResize'
+import { hexToRgba } from '@/utils/theme'
+import EditTitleDialog from './EditTitleDialog.vue'
+import { t } from '@/locales'
+useResize()
+
+const { user, log, common } = useStore()
+
+const EditTitleDialogRef = ref()
+
+const isCollapse = ref(false)
+
+const customStyle = computed(() => {
+  return {
+    background: applicationDetail.value?.custom_theme?.theme_color,
+    color: applicationDetail.value?.custom_theme?.header_font_color
+  }
+})
+
+const classObj = computed(() => {
+  return {
+    mobile: common.isMobile(),
+    hideLeft: !isCollapse.value,
+    openLeft: isCollapse.value
+  }
+})
+
+const newObj = {
+  id: 'new',
+  abstract: t('chat.createChat')
+}
+const props = defineProps<{
+  application_profile: any
+  applicationAvailable: boolean
+}>()
+const AiChatRef = ref()
+const loading = ref(false)
+const left_loading = ref(false)
+
+const applicationDetail = computed({
+  get: () => {
+    return props.application_profile
+  },
+  set: (v) => {}
+})
+
+const chatLogData = ref<any[]>([])
+
+const paginationConfig = ref({
+  current_page: 1,
+  page_size: 20,
+  total: 0
+})
+
+const currentRecordList = ref<any>([])
+const currentChatId = ref('new') // 当前历史记录Id 默认为'new'
+const currentChatName = ref(t('chat.createChat'))
+const mouseId = ref('')
+
+function mouseenter(row: any) {
+  mouseId.value = row.id
+}
+
+function editLogTitle(row: any) {
+  EditTitleDialogRef.value.open(row, applicationDetail.value.id)
+}
+function refreshFieldTitle(chatId: string, abstract: string) {
+  const find = chatLogData.value.find((item: any) => item.id == chatId)
+  if (find) {
+    find.abstract = abstract
+  }
+}
+function deleteLog(row: any) {
+  log.asyncDelChatClientLog(applicationDetail.value.id, row.id, left_loading).then(() => {
+    if (currentChatId.value === row.id) {
+      currentChatId.value = 'new'
+      currentChatName.value = t('chat.createChat')
+      paginationConfig.value.current_page = 1
+      paginationConfig.value.total = 0
+      currentRecordList.value = []
+    }
+    getChatLog(applicationDetail.value.id)
+  })
+}
+
+function handleScroll(event: any) {
+  if (
+    currentChatId.value !== 'new' &&
+    event.scrollTop === 0 &&
+    paginationConfig.value.total > currentRecordList.value.length
+  ) {
+    const history_height = event.dialogScrollbar.offsetHeight
+    paginationConfig.value.current_page += 1
+    getChatRecord().then(() => {
+      event.scrollDiv.setScrollTop(event.dialogScrollbar.offsetHeight - history_height)
+    })
+  }
+}
+
+function newChat() {
+  if (!chatLogData.value.some((v) => v.id === 'new')) {
+    paginationConfig.value.current_page = 1
+    paginationConfig.value.total = 0
+    currentRecordList.value = []
+    chatLogData.value.unshift(newObj)
+  } else {
+    paginationConfig.value.current_page = 1
+    paginationConfig.value.total = 0
+    currentRecordList.value = []
+  }
+  currentChatId.value = 'new'
+  currentChatName.value = t('chat.createChat')
+  if (common.isMobile()) {
+    isCollapse.value = false
+  }
+}
+
+function getChatLog(id: string, refresh?: boolean) {
+  const page = {
+    current_page: 1,
+    page_size: 20
+  }
+
+  log.asyncGetChatLogClient(id, page, left_loading).then((res: any) => {
+    chatLogData.value = res.data.records
+    if (refresh) {
+      currentChatName.value = chatLogData.value?.[0]?.abstract
+    } else {
+      paginationConfig.value.current_page = 1
+      paginationConfig.value.total = 0
+      currentRecordList.value = []
+      currentChatId.value = chatLogData.value?.[0]?.id || 'new'
+      currentChatName.value = chatLogData.value?.[0]?.abstract || t('chat.createChat')
+      if (currentChatId.value !== 'new') {
+        getChatRecord()
+      }
+    }
+  })
+}
+
+function getChatRecord() {
+  return log
+    .asyncChatRecordLog(
+      applicationDetail.value.id,
+      currentChatId.value,
+      paginationConfig.value,
+      loading,
+      false
+    )
+    .then((res: any) => {
+      paginationConfig.value.total = res.data.total
+      const list = res.data.records
+      list.map((v: any) => {
+        v['write_ed'] = true
+        v['record_id'] = v.id
+      })
+      currentRecordList.value = [...list, ...currentRecordList.value].sort((a, b) =>
+        a.create_time.localeCompare(b.create_time)
+      )
+      if (paginationConfig.value.current_page === 1) {
+        nextTick(() => {
+          // 将滚动条滚动到最下面
+          AiChatRef.value.setScrollBottom()
+        })
+      }
+    })
+}
+
+const clickListHandle = (item: any) => {
+  if (item.id !== currentChatId.value) {
+    paginationConfig.value.current_page = 1
+    paginationConfig.value.total = 0
+    currentRecordList.value = []
+    currentChatId.value = item.id
+    currentChatName.value = item.abstract
+    if (currentChatId.value !== 'new') {
+      getChatRecord()
+
+      // 切换对话后，取消暂停的浏览器播放
+      if (window.speechSynthesis.paused && window.speechSynthesis.speaking) {
+        window.speechSynthesis.resume()
+        nextTick(() => {
+          window.speechSynthesis.cancel()
+        })
+      }
+    }
+  }
+  if (common.isMobile()) {
+    isCollapse.value = false
+  }
+}
+
+function refresh(id: string) {
+  getChatLog(applicationDetail.value.id, true)
+  currentChatId.value = id
+}
+
+async function exportMarkdown(): Promise<void> {
+  const suggestedName: string = `${currentChatId.value}.md`
+  const markdownContent: string = currentRecordList.value
+    .map((record: any) => `# ${record.problem_text}\n\n${record.answer_text}\n\n`)
+    .join('\n')
+
+  const blob: Blob = new Blob([markdownContent], { type: 'text/markdown;charset=utf-8' })
+  saveAs(blob, suggestedName)
+}
+
+async function exportHTML(): Promise<void> {
+  const suggestedName: string = `${currentChatId.value}.html`
+  const markdownContent: string = currentRecordList.value
+    .map((record: any) => `# ${record.problem_text}\n\n${record.answer_text}\n\n`)
+    .join('\n')
+  const htmlContent: any = marked(markdownContent)
+
+  const blob: Blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' })
+  saveAs(blob, suggestedName)
+}
+
+/**
+ *初始化历史对话记录
+ */
+const init = () => {
+  if (
+    (applicationDetail.value.show_history || !user.isEnterprise()) &&
+    props.applicationAvailable
+  ) {
+    getChatLog(applicationDetail.value.id)
+  }
+}
+onMounted(() => {
+  init()
+})
+</script>
+<style lang="scss">
+.chat-pc {
+  overflow: hidden;
+
+  &__header {
+    background: var(--app-header-bg-color);
+    position: fixed;
+    width: 100%;
+    left: 0;
+    top: 0;
+    z-index: 100;
+    height: var(--app-header-height);
+    line-height: var(--app-header-height);
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--el-border-color);
+  }
+
+  &__left {
+    padding-top: calc(var(--app-header-height) - 8px);
+    background: #ffffff;
+    width: 280px;
+
+    .add-button {
+      border: 1px solid var(--el-color-primary);
+    }
+
+    .left-height {
+      height: calc(100vh - var(--app-header-height) - 135px);
+    }
+  }
+
+  &__right {
+    width: calc(100% - 280px);
+    padding-top: calc(var(--app-header-height));
+    overflow: hidden;
+    position: relative;
+    box-sizing: border-box;
+
+    .right-header {
+      background: #ffffff;
+      box-sizing: border-box;
+    }
+
+    .right-height {
+      height: calc(100vh - var(--app-header-height) * 2 - 24px);
+    }
+  }
+
+  .gradient-divider {
+    position: relative;
+    text-align: center;
+    color: var(--el-color-info);
+
+    ::before {
+      content: '';
+      width: 17%;
+      height: 1px;
+      background: linear-gradient(90deg, rgba(222, 224, 227, 0) 0%, #dee0e3 100%);
+      position: absolute;
+      left: 16px;
+      top: 50%;
+    }
+
+    ::after {
+      content: '';
+      width: 17%;
+      height: 1px;
+      background: linear-gradient(90deg, #dee0e3 0%, rgba(222, 224, 227, 0) 100%);
+      position: absolute;
+      right: 16px;
+      top: 50%;
+    }
+  }
+
+  .collapse {
+    display: none;
+  }
+}
+// 适配移动端
+.mobile {
+  .chat-pc {
+    &__right {
+      width: 100%;
+    }
+    &__left {
+      display: none;
+      width: 0;
+    }
+  }
+  .collapse {
+    display: block;
+    position: fixed;
+    bottom: 90px;
+    z-index: 99;
+  }
+  &.openLeft {
+    .chat-pc {
+      &__left {
+        display: block;
+        position: fixed;
+        width: 100%;
+        z-index: 99;
+        height: calc(100vh - var(--app-header-height) + 6px);
+      }
+    }
+    .collapse {
+      display: block;
+      position: absolute;
+      bottom: 90px;
+      right: 0;
+      z-index: 99;
+    }
+  }
+}
+
+.chat-width {
+  max-width: 80%;
+  margin: 0 auto;
+}
+@media only screen and (max-width: 1000px) {
+  .chat-width {
+    max-width: 100% !important;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/ui/src/views/knowledge/component/CreateDatasetDialog.vue b/ui/src/views/knowledge/component/CreateDatasetDialog.vue
index 2d9eaa067..1a799b837 100644
--- a/ui/src/views/knowledge/component/CreateDatasetDialog.vue
+++ b/ui/src/views/knowledge/component/CreateDatasetDialog.vue
@@ -54,7 +54,7 @@
                 <div class="flex-between">
                   <div class="flex align-center">
                     <AppAvatar class="mr-8 avatar-purple" shape="square" :size="32">
-                      <img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
+                      <img src="@/assets/knowledge/icon_web.svg" style="width: 58%" alt="" />
                     </AppAvatar>
                     <div>
                       <p>
@@ -106,7 +106,7 @@
               <!--                <div class="flex-between">-->
               <!--                  <div class="flex align-center">-->
               <!--                    <AppAvatar class="mr-8" :size="32">-->
-              <!--                      <img src="@/assets/icon_web.svg" style="width: 100%" alt="" />-->
+              <!--                      <img src="@/assets/knowledge/icon_web.svg" style="width: 100%" alt="" />-->
               <!--                    </AppAvatar>-->
               <!--                    <div>-->
               <!--                      <p>-->
diff --git a/ui/src/views/paragraph/component/SelectDocumentDialog.vue b/ui/src/views/paragraph/component/SelectDocumentDialog.vue
index 36cf57e0c..11d078ebe 100644
--- a/ui/src/views/paragraph/component/SelectDocumentDialog.vue
+++ b/ui/src/views/paragraph/component/SelectDocumentDialog.vue
@@ -30,7 +30,7 @@
                 shape="square"
                 :size="24"
               >
-                <img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
+                <img src="@/assets/knowledge/icon_web.svg" style="width: 58%" alt="" />
               </AppAvatar>
               <AppAvatar
                 v-else-if="!item.dataset_id && item.type === '2'"
@@ -39,7 +39,7 @@
                 :size="24"
                 style="background: none"
               >
-                <img src="@/assets/logo_lark.svg" style="width: 100%" alt="" />
+                <img src="@/assets/knowledge/logo_lark.svg" style="width: 100%" alt="" />
               </AppAvatar>
               <AppAvatar
                 v-else-if="!item.dataset_id && item.type === '0'"
@@ -47,7 +47,7 @@
                 shape="square"
                 :size="24"
               >
-                <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+                <img src="@/assets/knowledge/icon_document.svg" style="width: 58%" alt="" />
               </AppAvatar>
               {{ item.name }}
             </span>
diff --git a/ui/src/views/resource-authorization/component/PermissionSetting.vue b/ui/src/views/resource-authorization/component/PermissionSetting.vue
index 34886ea6e..6712c9bcf 100644
--- a/ui/src/views/resource-authorization/component/PermissionSetting.vue
+++ b/ui/src/views/resource-authorization/component/PermissionSetting.vue
@@ -3,22 +3,15 @@
     v-model="filterText"
     :placeholder="$t('common.search')"
     prefix-icon="Search"
-    class="p-24 pt-0 pb-0 mb-16 mt-4"
+    class="mb-16 mt-4"
     clearable
   />
-  <div class="p-24 pt-0">
+  <div class="pt-0">
     <el-table :data="filterData" :max-height="tableHeight">
-      <el-table-column
-        prop="name"
-        :label="
-          isApplication
-            ? $t('views.application.applicationForm.form.appName.label')
-            : $t('views.dataset.datasetForm.form.datasetName.label')
-        "
-      >
+      <el-table-column prop="name" :label="$t('common.name')">
         <template #default="{ row }">
           <div class="flex align-center">
-            <AppAvatar
+            <el-avatar
               v-if="isApplication && isAppIcon(row?.icon)"
               style="background: none"
               class="mr-12"
@@ -26,9 +19,9 @@
               :size="24"
             >
               <img :src="row?.icon" alt="" />
-            </AppAvatar>
+            </el-avatar>
 
-            <AppAvatar
+            <el-avatar
               v-else-if="row?.name && isApplication"
               :name="row?.name"
               pinyinColor
@@ -36,26 +29,26 @@
               :size="24"
               class="mr-12"
             />
-            <AppAvatar
+            <el-avatar
               v-if="row.icon === '1' && isDataset"
               class="mr-8 avatar-purple"
               shape="square"
               :size="24"
             >
-              <img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
-            </AppAvatar>
-            <AppAvatar
+              <img src="@/assets/knowledge/icon_web.svg" style="width: 58%" alt="" />
+            </el-avatar>
+            <el-avatar
               v-else-if="row.icon === '2' && isDataset"
               class="mr-8 avatar-purple"
               shape="square"
               :size="24"
               style="background: none"
             >
-              <img src="@/assets/logo_lark.svg" style="width: 100%" alt="" />
-            </AppAvatar>
-            <AppAvatar v-else-if="isDataset" class="mr-8 avatar-blue" shape="square" :size="24">
-              <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
-            </AppAvatar>
+              <img src="@/assets/knowledge/logo_lark.svg" style="width: 100%" alt="" />
+            </el-avatar>
+            <el-avatar v-else-if="isDataset" class="mr-8 avatar-blue" shape="square" :size="24">
+              <img src="@/assets/knowledge/icon_document.svg" style="width: 58%" alt="" />
+            </el-avatar>
             <auto-tooltip :content="row?.name">
               {{ row?.name }}
             </auto-tooltip>
@@ -63,7 +56,7 @@
         </template>
       </el-table-column>
       <el-table-column
-        :label="$t('views.team.setting.management')"
+        :label="$t('views.resourceAuthorization.setting.management')"
         align="center"
         width="100"
         fixed="right"
@@ -71,21 +64,21 @@
         <template #header>
           <el-checkbox
             :disabled="props.manage"
-            v-model="allChecked[TeamEnum.MANAGE]"
-            :indeterminate="allIndeterminate[TeamEnum.MANAGE]"
-            :label="$t('views.team.setting.management')"
+            v-model="allChecked[AuthorizationEnum.MANAGE]"
+            :indeterminate="allIndeterminate[AuthorizationEnum.MANAGE]"
+            :label="$t('views.resourceAuthorization.setting.management')"
           />
         </template>
         <template #default="{ row }">
           <el-checkbox
             :disabled="props.manage"
-            v-model="row.operate[TeamEnum.MANAGE]"
-            @change="(e: boolean) => checkedOperateChange(TeamEnum.MANAGE, row, e)"
+            v-model="row.operate[AuthorizationEnum.MANAGE]"
+            @change="(e: boolean) => checkedOperateChange(AuthorizationEnum.MANAGE, row, e)"
           />
         </template>
       </el-table-column>
       <el-table-column
-        :label="$t('views.team.setting.check')"
+        :label="$t('views.resourceAuthorization.setting.check')"
         align="center"
         width="100"
         fixed="right"
@@ -93,16 +86,16 @@
         <template #header>
           <el-checkbox
             :disabled="props.manage"
-            v-model="allChecked[TeamEnum.USE]"
-            :indeterminate="allIndeterminate[TeamEnum.USE]"
-            :label="$t('views.team.setting.check')"
+            v-model="allChecked[AuthorizationEnum.USE]"
+            :indeterminate="allIndeterminate[AuthorizationEnum.USE]"
+            :label="$t('views.resourceAuthorization.setting.check')"
           />
         </template>
         <template #default="{ row }">
           <el-checkbox
             :disabled="props.manage"
-            v-model="row.operate[TeamEnum.USE]"
-            @change="(e: boolean) => checkedOperateChange(TeamEnum.USE, row, e)"
+            v-model="row.operate[AuthorizationEnum.USE]"
+            @change="(e: boolean) => checkedOperateChange(AuthorizationEnum.USE, row, e)"
           />
         </template>
       </el-table-column>
@@ -111,92 +104,96 @@
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch, computed } from 'vue'
-import { TeamEnum } from '@/enums/team'
-import { isAppIcon } from '@/utils/application'
+import { AuthorizationEnum } from '@/enums/system'
+import { isAppIcon } from '@/utils/common'
 
 const props = defineProps({
   data: {
     type: Array,
-    default: () => []
+    default: () => [],
   },
   id: String,
   type: String,
   tableHeight: Number,
-  manage: Boolean
+  manage: Boolean,
 })
 
-const isDataset = computed(() => props.type === TeamEnum.DATASET)
-const isApplication = computed(() => props.type === TeamEnum.APPLICATION)
+const isDataset = computed(() => props.type === AuthorizationEnum.DATASET)
+const isApplication = computed(() => props.type === AuthorizationEnum.APPLICATION)
 
 const emit = defineEmits(['update:data'])
 const allChecked: any = ref({
-  [TeamEnum.MANAGE]: computed({
+  [AuthorizationEnum.MANAGE]: computed({
     get: () => {
-      return filterData.value.some((item: any) => item.operate[TeamEnum.MANAGE])
+      return filterData.value.some((item: any) => item.operate[AuthorizationEnum.MANAGE])
     },
     set: (val: boolean) => {
       if (val) {
         filterData.value.map((item: any) => {
-          item.operate[TeamEnum.MANAGE] = true
-          item.operate[TeamEnum.USE] = true
+          item.operate[AuthorizationEnum.MANAGE] = true
+          item.operate[AuthorizationEnum.USE] = true
         })
       } else {
         filterData.value.map((item: any) => {
-          item.operate[TeamEnum.MANAGE] = false
+          item.operate[AuthorizationEnum.MANAGE] = false
         })
       }
-    }
+    },
   }),
-  [TeamEnum.USE]: computed({
+  [AuthorizationEnum.USE]: computed({
     get: () => {
-      return filterData.value.some((item: any) => item.operate[TeamEnum.USE])
+      return filterData.value.some((item: any) => item.operate[AuthorizationEnum.USE])
     },
     set: (val: boolean) => {
       if (val) {
         filterData.value.map((item: any) => {
-          item.operate[TeamEnum.USE] = true
+          item.operate[AuthorizationEnum.USE] = true
         })
       } else {
         filterData.value.map((item: any) => {
-          item.operate[TeamEnum.USE] = false
-          item.operate[TeamEnum.MANAGE] = false
+          item.operate[AuthorizationEnum.USE] = false
+          item.operate[AuthorizationEnum.MANAGE] = false
         })
       }
-    }
-  })
+    },
+  }),
 })
 
 const filterText = ref('')
 
 const filterData = computed(() =>
-  props.data.filter((v: any) => v.name.toLowerCase().includes(filterText.value.toLowerCase()))
+  props.data.filter((v: any) => v.name.toLowerCase().includes(filterText.value.toLowerCase())),
 )
 
 const allIndeterminate: any = ref({
-  [TeamEnum.MANAGE]: computed(() => {
-    const all_not_checked = filterData.value.every((item: any) => !item.operate[TeamEnum.MANAGE])
+  [AuthorizationEnum.MANAGE]: computed(() => {
+    const all_not_checked = filterData.value.every(
+      (item: any) => !item.operate[AuthorizationEnum.MANAGE],
+    )
     if (all_not_checked) {
       return false
     }
-    return !filterData.value.every((item: any) => item.operate[TeamEnum.MANAGE])
+    return !filterData.value.every((item: any) => item.operate[AuthorizationEnum.MANAGE])
   }),
-  [TeamEnum.USE]: computed(() => {
-    const all_not_checked = filterData.value.every((item: any) => !item.operate[TeamEnum.USE])
+  [AuthorizationEnum.USE]: computed(() => {
+    const all_not_checked = filterData.value.every(
+      (item: any) => !item.operate[AuthorizationEnum.USE],
+    )
     if (all_not_checked) {
       return false
     }
-    return !filterData.value.every((item: any) => item.operate[TeamEnum.USE])
-  })
+    return !filterData.value.every((item: any) => item.operate[AuthorizationEnum.USE])
+  }),
 })
 
 function checkedOperateChange(Name: string | number, row: any, e: boolean) {
   props.data.map((item: any) => {
     if (item.id === row.id) {
       item.operate[Name] = e
-      if (Name === TeamEnum.MANAGE && e) {
-        item.operate[TeamEnum.USE] = true
-      } else if (Name === TeamEnum.USE && !e) {
-        item.operate[TeamEnum.MANAGE] = false
+      if (Name === AuthorizationEnum.MANAGE && e) {
+        item.operate[AuthorizationEnum.USE] = true
+      } else if (Name === AuthorizationEnum.USE && !e) {
+        item.operate[AuthorizationEnum.MANAGE] = false
       }
     }
   })
diff --git a/ui/src/views/resource-authorization/index.vue b/ui/src/views/resource-authorization/index.vue
index b42bd2735..3bc2bbd7c 100644
--- a/ui/src/views/resource-authorization/index.vue
+++ b/ui/src/views/resource-authorization/index.vue
@@ -1,13 +1,11 @@
 <template>
-  <div class="p-16-24">
+  <div class="resource-authorization p-16-24">
     <h4 class="mb-16">{{ $t('views.userManage.title') }}</h4>
-    <el-card>
-      <div class="resource-authorization flex main-calc-height">
-        <div class="team-member p-8 border-r">
-          <div class="flex-between p-16">
-            <h4>{{ $t('views.resourceAuthorization.member') }}</h4>
-          </div>
-          <div class="team-member-input">
+    <el-card style="--el-card-padding: 0">
+      <div class="flex main-calc-height">
+        <div class="resource-authorization__left border-r p-8">
+          <div class="p-8">
+            <h4 class="mb-12">{{ $t('views.resourceAuthorization.member') }}</h4>
             <el-input
               v-model="filterText"
               :placeholder="$t('common.search')"
@@ -27,48 +25,34 @@
                 <template #default="{ row }">
                   <div class="flex-between">
                     <div>
-                      <span class="mr-8">{{ row.username }}</span>
+                      <span class="mr-8">{{ row.nick_name }}</span>
                       <el-tag v-if="isManage(row.type)" class="default-tag">{{
                         $t('views.resourceAuthorization.manage')
                       }}</el-tag>
                     </div>
-                    <div @click.stop style="margin-top: 5px">
-                      <el-dropdown trigger="click" v-if="!isManage(row.type)">
-                        <span class="cursor">
-                          <el-icon class="rotate-90"><MoreFilled /></el-icon>
-                        </span>
-                        <template #dropdown>
-                          <el-dropdown-menu>
-                            <el-dropdown-item @click.prevent="deleteMember(row)">{{
-                              $t('views.resourceAuthorization.delete.button')
-                            }}</el-dropdown-item>
-                          </el-dropdown-menu>
-                        </template>
-                      </el-dropdown>
-                    </div>
                   </div>
                 </template>
               </common-list>
             </el-scrollbar>
           </div>
         </div>
-        <div class="permission-setting flex" v-loading="rLoading">
-          <div class="team-manage__table">
-            <h4 class="p-24 pb-0 mb-4">{{ $t('views.resourceAuthorization.permissionSetting') }}</h4>
-            <el-tabs v-model="activeName" class="team-manage__tabs">
+        <div class="permission-setting p-16 flex" v-loading="rLoading">
+          <div class="resource-authorization__table">
+            <h4 class="mb-4">{{ $t('views.resourceAuthorization.permissionSetting') }}</h4>
+            <el-tabs v-model="activeName" class="resource-authorization__tabs">
               <el-tab-pane
                 v-for="(item, index) in settingTags"
                 :key="item.value"
                 :label="item.label"
                 :name="item.value"
               >
-                <!-- <PermissionSetting
+                <PermissionSetting
                   :key="index"
                   :data="item.data"
                   :type="item.value"
                   :tableHeight="tableHeight"
                   :manage="isManage(currentType)"
-                ></PermissionSetting> -->
+                ></PermissionSetting>
               </el-tab-pane>
             </el-tabs>
           </div>
@@ -79,36 +63,33 @@
         </div>
       </div>
     </el-card>
-    <!-- <CreateMemberDialog ref="CreateMemberRef" @refresh="refresh" /> -->
   </div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, ref, reactive, watch } from 'vue'
 import AuthorizationApi from '@/api/user/resource-authorization'
-import type { TeamMember } from '@/api/type/team'
-// import CreateMemberDialog from './component/CreateMemberDialog.vue'
-// import PermissionSetting from './component/PermissionSetting.vue'
+import PermissionSetting from './component/PermissionSetting.vue'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import { AuthorizationEnum } from '@/enums/system'
 import { t } from '@/locales'
-// const CreateMemberRef = ref<InstanceType<typeof CreateMemberDialog>>()
+
 const loading = ref(false)
 const rLoading = ref(false)
-const memberList = ref<TeamMember[]>([]) // 全部成员
-const filterMember = ref<TeamMember[]>([]) // 搜索过滤后列表
+const memberList = ref<any[]>([]) // 全部成员
+const filterMember = ref<any[]>([]) // 搜索过滤后列表
 const currentUser = ref<String>('')
 const currentType = ref<String>('')
 
 const filterText = ref('')
 
-const activeName = ref(AuthorizationEnum.DATASET)
+const activeName = ref(AuthorizationEnum.KNOWLEDGE)
 const tableHeight = ref(0)
 
 const settingTags = reactive([
   {
     label: t('views.knowledge.title'),
-    value: AuthorizationEnum.DATASET,
+    value: AuthorizationEnum.KNOWLEDGE,
     data: [] as any,
   },
   {
@@ -156,10 +137,40 @@ function submitPermissions() {
     })
 }
 
+function clickMemberHandle(item: any) {
+  currentUser.value = item.id
+  currentType.value = item.type
+  ResourcePermissions(item.id)
+}
+
+function getMember(id?: string) {
+  loading.value = true
+  AuthorizationApi.getUserList()
+    .then((res) => {
+      memberList.value = res.data
+      filterMember.value = res.data
+
+      const user = (id && memberList.value.find((p) => p.user_id === id)) || null
+      currentUser.value = user ? user.id : memberList.value[0].id
+      currentType.value = user ? user.type : memberList.value[0].type
+      ResourcePermissions(currentUser.value)
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
 function ResourcePermissions() {
   rLoading.value = true
   AuthorizationApi.getResourceAuthorization('default')
     .then((res) => {
+      if (!res.data || Object.keys(res.data).length > 0) {
+        settingTags.map((item) => {
+          if (Object.keys(res.data).indexOf(item.value) !== -1) {
+            item.data = res.data[item.value]
+          }
+        })
+      }
       rLoading.value = false
     })
     .catch(() => {
@@ -176,19 +187,13 @@ onMounted(() => {
       tableHeight.value = window.innerHeight - 330
     })()
   }
-  ResourcePermissions()
+  getMember()
 })
 </script>
 
 <style lang="scss" scoped>
 .resource-authorization {
-  .add-user-icon {
-    font-size: 17px;
-  }
-  .team-member-input {
-    padding: 0 calc(var(--app-base-px) * 2);
-  }
-  .team-member {
+  .resource-authorization__left {
     box-sizing: border-box;
     width: var(--setting-left-width);
     min-width: var(--setting-left-width);
@@ -196,28 +201,17 @@ onMounted(() => {
 
   .permission-setting {
     box-sizing: border-box;
-    width: calc(100% - var(--setting-left-width));
+    width: 100%;
     flex-direction: column;
     position: relative;
     .submit-button {
       position: absolute;
-      top: 54px;
+      top: 16px;
       right: 24px;
     }
   }
   .list-height-left {
-    height: calc(var(--create-dataset-height) - 60px);
-  }
-
-  &__tabs {
-    margin-top: 10px;
-
-    :deep(.el-tabs__nav-scroll) {
-      padding: 0 24px;
-    }
-  }
-  &__table {
-    flex: 1;
+    height: calc(100vh - 240px);
   }
 }
 </style>
diff --git a/ui/src/workflow/common/AddFormCollect.vue b/ui/src/workflow/common/AddFormCollect.vue
new file mode 100644
index 000000000..db15703a6
--- /dev/null
+++ b/ui/src/workflow/common/AddFormCollect.vue
@@ -0,0 +1,53 @@
+<template>
+  <el-dialog
+    :title="title"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :before-close="close"
+    append-to-body
+  >
+    <DynamicsFormConstructor
+      v-model="dynamicsFormData"
+      label-position="top"
+      require-asterisk-position="right"
+      ref="dynamicsFormConstructorRef"
+    ></DynamicsFormConstructor>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> {{$t('common.cancel')}} </el-button>
+        <el-button type="primary" @click="submit()" :loading="loading"> {{$t('common.add')}} </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import DynamicsFormConstructor from '@/components/dynamics-form/constructor/index.vue'
+import { t } from '@/locales'
+const props = withDefaults(
+  defineProps<{ title?: string; addFormField: (form_data: any) => void }>(),
+  { title: t('views.template.templateForm.title.addParam') }
+)
+const dialogVisible = ref<boolean>(false)
+const dynamicsFormConstructorRef = ref<InstanceType<typeof DynamicsFormConstructor>>()
+const emit = defineEmits(['submit'])
+const dynamicsFormData = ref<any>({})
+const loading = ref<boolean>(false)
+const open = () => {
+  dialogVisible.value = true
+}
+const close = () => {
+  dialogVisible.value = false
+  dynamicsFormData.value = {}
+}
+const submit = () => {
+  dynamicsFormConstructorRef.value?.validate().then(() => {
+    props.addFormField(dynamicsFormConstructorRef.value?.getData())
+    close()
+  })
+}
+defineExpose({ close, open })
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/workflow/common/CustomLine.vue b/ui/src/workflow/common/CustomLine.vue
new file mode 100644
index 000000000..48146e5a9
--- /dev/null
+++ b/ui/src/workflow/common/CustomLine.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="custom-edge cursor" @mouseup.stop @click.stop v-show="props.model.isHovered">
+    <svg
+      @click="deleteEdge"
+      width="22"
+      height="22"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 23.0001C5.925 23.0001 1 18.0751 1 12.0001C1 5.92512 5.925 1.00012 12 1.00012C18.075 1.00012 23 5.92512 23 12.0001C23 18.0751 18.075 23.0001 12 23.0001Z"
+        fill="#3370FF"
+      />
+      <path
+        d="M9.02524 7.61124L12.0002 10.5862L14.9752 7.61124C15.069 7.5175 15.1962 7.46484 15.3287 7.46484C15.4613 7.46484 15.5885 7.5175 15.6822 7.61124L16.3892 8.31824C16.483 8.412 16.5356 8.53915 16.5356 8.67174C16.5356 8.80432 16.483 8.93147 16.3892 9.02524L13.4142 12.0002L16.3892 14.9752C16.483 15.069 16.5356 15.1962 16.5356 15.3287C16.5356 15.4613 16.483 15.5885 16.3892 15.6822L15.6822 16.3892C15.5885 16.483 15.4613 16.5356 15.3287 16.5356C15.1962 16.5356 15.069 16.483 14.9752 16.3892L12.0002 13.4142L9.02524 16.3892C8.93147 16.483 8.80432 16.5356 8.67174 16.5356C8.53916 16.5356 8.412 16.483 8.31824 16.3892L7.61124 15.6822C7.5175 15.5885 7.46484 15.4613 7.46484 15.3287C7.46484 15.1962 7.5175 15.069 7.61124 14.9752L10.5862 12.0002L7.61124 9.02524C7.5175 8.93147 7.46484 8.80432 7.46484 8.67174C7.46484 8.53915 7.5175 8.412 7.61124 8.31824L8.31824 7.61124C8.412 7.5175 8.53916 7.46484 8.67174 7.46484C8.80432 7.46484 8.93147 7.5175 9.02524 7.61124Z"
+        fill="white"
+      />
+    </svg>
+  </div>
+</template>
+<script setup lang="ts">
+const props = defineProps<{ model: any }>()
+const deleteEdge = () => {
+  props.model.graphModel.deleteEdgeById(props.model.id)
+}
+</script>
+
+<style lang="scss">
+.custom-edge {
+  color: var(--el-color-primary);
+  stroke: none;
+  z-index: 100000;
+  position: absolute;
+  pointer-events: all;
+}
+</style>
diff --git a/ui/src/workflow/common/EditFormCollect.vue b/ui/src/workflow/common/EditFormCollect.vue
new file mode 100644
index 000000000..6ebbaf95e
--- /dev/null
+++ b/ui/src/workflow/common/EditFormCollect.vue
@@ -0,0 +1,58 @@
+<template>
+  <el-dialog
+    :title="title"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :before-close="close"
+    append-to-body
+  >
+    <DynamicsFormConstructor
+      v-model="dynamicsFormData"
+      label-position="top"
+      require-asterisk-position="right"
+      ref="dynamicsFormConstructorRef"
+    ></DynamicsFormConstructor>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submit()" :loading="loading">
+          {{ $t('common.modify') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import DynamicsFormConstructor from '@/components/dynamics-form/constructor/index.vue'
+import { t } from '@/locales'
+const props = withDefaults(
+  defineProps<{ title?: string; editFormField: (form_data: any, index: number) => void }>(),
+  { title: t('views.template.templateForm.title.editParam') }
+)
+const dialogVisible = ref<boolean>(false)
+const dynamicsFormConstructorRef = ref<InstanceType<typeof DynamicsFormConstructor>>()
+const emit = defineEmits(['submit'])
+const dynamicsFormData = ref<any>({})
+const currentIndex = ref<number>(0)
+const loading = ref<boolean>(false)
+const open = (form_data: any, index: number) => {
+  dialogVisible.value = true
+  dynamicsFormData.value = form_data
+  currentIndex.value = index
+}
+const close = () => {
+  dialogVisible.value = false
+  dynamicsFormData.value = {}
+}
+const submit = () => {
+  dynamicsFormConstructorRef.value?.validate().then(() => {
+    props.editFormField(dynamicsFormConstructorRef.value?.getData(), currentIndex.value)
+    close()
+  })
+}
+defineExpose({ close, open })
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/workflow/common/NodeCascader.vue b/ui/src/workflow/common/NodeCascader.vue
new file mode 100644
index 000000000..66a039cfe
--- /dev/null
+++ b/ui/src/workflow/common/NodeCascader.vue
@@ -0,0 +1,87 @@
+<template>
+  <el-cascader
+    @wheel="wheel"
+    :teleported="false"
+    :options="options"
+    @visible-change="visibleChange"
+    v-bind="$attrs"
+    v-model="data"
+    separator=" > "
+  >
+    <template #default="{ node, data }">
+      <span class="flex align-center" @wheel="wheel">
+        <component :is="iconComponent(`${data.type}-icon`)" class="mr-8" :size="18" />{{
+          data.label
+        }}</span
+      >
+    </template>
+  </el-cascader>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { iconComponent } from '../icons/utils'
+import { t } from '@/locales'
+const props = defineProps<{
+  nodeModel: any
+  modelValue: Array<any>
+  global?: Boolean
+}>()
+const emit = defineEmits(['update:modelValue'])
+const data = computed({
+  set: (value) => {
+    emit('update:modelValue', value)
+  },
+  get: () => {
+    return props.modelValue
+  }
+})
+const options = ref<Array<any>>([])
+
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+
+function visibleChange(bool: boolean) {
+  if (bool) {
+    options.value = props.global
+      ? props.nodeModel.get_up_node_field_list(false, true).filter((v: any) => v.value === 'global')
+      : props.nodeModel.get_up_node_field_list(false, true)
+  }
+}
+
+const validate = () => {
+  const incomingNodeValue = props.nodeModel.get_up_node_field_list(false, true)
+  if (!data.value || data.value.length === 0) {
+    return Promise.reject(t('views.applicationWorkflow.variable.ReferencingRequired'))
+  }
+  if (data.value.length < 2) {
+    return Promise.reject(t('views.applicationWorkflow.variable.ReferencingError'))
+  }
+  const node_id = data.value[0]
+  const node_field = data.value[1]
+  const nodeParent = incomingNodeValue.find((item: any) => item.value === node_id)
+  if (!nodeParent) {
+    data.value = []
+    return Promise.reject(t('views.applicationWorkflow.variable.NoReferencing'))
+  }
+  if (!nodeParent.children.some((item: any) => item.value === node_field)) {
+    data.value = []
+    return Promise.reject(t('views.applicationWorkflow.variable.NoReferencing'))
+  }
+  return Promise.resolve('')
+}
+defineExpose({ validate })
+onMounted(() => {
+  options.value = props.global
+    ? props.nodeModel.get_up_node_field_list(false, true).filter((v: any) => v.value === 'global')
+    : props.nodeModel.get_up_node_field_list(false, true)
+})
+</script>
+<style scoped></style>
diff --git a/ui/src/workflow/common/NodeContainer.vue b/ui/src/workflow/common/NodeContainer.vue
new file mode 100644
index 000000000..b61fe25b6
--- /dev/null
+++ b/ui/src/workflow/common/NodeContainer.vue
@@ -0,0 +1,367 @@
+<template>
+  <div @mousedown="mousedown" class="workflow-node-container p-16" style="overflow: visible">
+    <div
+      class="step-container app-card p-16"
+      :class="{ isSelected: props.nodeModel.isSelected, error: node_status !== 200 }"
+      style="overflow: visible"
+    >
+      <div v-resize="resizeStepContainer">
+        <div class="flex-between">
+          <div class="flex align-center" style="width: 70%">
+            <component
+              :is="iconComponent(`${nodeModel.type}-icon`)"
+              class="mr-8"
+              :size="24"
+              :item="nodeModel?.properties.node_data"
+            />
+            <h4 class="ellipsis-1 break-all">{{ nodeModel.properties.stepName }}</h4>
+          </div>
+
+          <div @mousemove.stop @mousedown.stop @keydown.stop @click.stop>
+            <el-button text @click="showNode = !showNode">
+              <el-icon class="arrow-icon color-secondary" :class="showNode ? 'rotate-180' : ''"
+                ><ArrowDownBold />
+              </el-icon>
+            </el-button>
+            <el-dropdown
+              v-if="showOperate(nodeModel.type)"
+              :teleported="false"
+              trigger="click"
+              placement="bottom-start"
+            >
+              <el-button text>
+                <img src="@/assets/icon_or.svg" alt="" v-if="condition === 'OR'" />
+                <img src="@/assets/icon_and.svg" alt="" v-if="condition === 'AND'" />
+              </el-button>
+              <template #dropdown>
+                <div style="width: 280px" class="p-12-16">
+                  <h5>{{ $t('views.applicationWorkflow.condition.title') }}</h5>
+                  <p class="mt-8 lighter">
+                    <span>{{ $t('views.applicationWorkflow.condition.front') }}</span>
+                    <el-select v-model="condition" size="small" style="width: 60px; margin: 0 8px">
+                      <el-option
+                        :label="$t('views.applicationWorkflow.condition.AND')"
+                        value="AND"
+                      />
+                      <el-option :label="$t('views.applicationWorkflow.condition.OR')" value="OR" />
+                    </el-select>
+                    <span>{{ $t('views.applicationWorkflow.condition.text') }}</span>
+                  </p>
+                </div>
+              </template>
+            </el-dropdown>
+            <el-dropdown v-if="showOperate(nodeModel.type)" :teleported="false" trigger="click">
+              <el-button text>
+                <el-icon class="color-secondary"><MoreFilled /></el-icon>
+              </el-button>
+              <template #dropdown>
+                <el-dropdown-menu style="min-width: 80px">
+                  <el-dropdown-item @click="renameNode" class="p-8">{{
+                    $t('common.rename')
+                  }}</el-dropdown-item>
+                  <el-dropdown-item @click="copyNode" class="p-8">{{
+                    $t('common.copy')
+                  }}</el-dropdown-item>
+                  <el-dropdown-item @click="deleteNode" class="border-t p-8">{{
+                    $t('common.delete')
+                  }}</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+        </div>
+        <el-collapse-transition>
+          <div @mousedown.stop @keydown.stop @click.stop v-show="showNode" class="mt-16">
+            <el-alert
+              v-if="node_status != 200"
+              class="mb-16"
+              :title="
+                props.nodeModel.type === 'application-node'
+                  ? $t('views.applicationWorkflow.tip.applicationNodeError')
+                  : $t('views.applicationWorkflow.tip.functionNodeError')
+              "
+              type="error"
+              show-icon
+              :closable="false"
+            />
+            <slot></slot>
+            <template v-if="nodeFields.length > 0">
+              <h5 class="title-decoration-1 mb-8 mt-8">
+                {{ $t('common.param.outputParam') }}
+              </h5>
+              <template v-for="(item, index) in nodeFields" :key="index">
+                <div
+                  class="flex-between border-r-4 p-8-12 mb-8 layout-bg lighter"
+                  @mouseenter="showicon = index"
+                  @mouseleave="showicon = null"
+                >
+                  <span style="max-width: 92%">{{ item.label }} {{ '{' + item.value + '}' }}</span>
+                  <el-tooltip
+                    effect="dark"
+                    :content="$t('views.applicationWorkflow.setting.copyParam')"
+                    placement="top"
+                    v-if="showicon === index"
+                  >
+                    <el-button link @click="copyClick(item.globeLabel)" style="padding: 0">
+                      <AppIcon iconName="app-copy"></AppIcon>
+                    </el-button>
+                  </el-tooltip>
+                </div>
+              </template>
+            </template>
+          </div>
+        </el-collapse-transition>
+      </div>
+    </div>
+
+    <el-collapse-transition>
+      <DropdownMenu
+        v-if="showAnchor"
+        @mousemove.stop
+        @mousedown.stop
+        @click.stop
+        @wheel="handleWheel"
+        :show="showAnchor"
+        :id="id"
+        style="left: 100%; top: 50%; transform: translate(0, -50%)"
+        @clickNodes="clickNodes"
+      />
+    </el-collapse-transition>
+
+    <el-dialog
+      :title="$t('views.applicationWorkflow.nodeName')"
+      v-model="nodeNameDialogVisible"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      append-to-body
+      @submit.prevent
+    >
+      <el-form label-position="top" ref="titleFormRef" :model="form">
+        <el-form-item
+          prop="title"
+          :rules="[
+            {
+              required: true,
+              message: $t('common.inputPlaceholder'),
+              trigger: 'blur'
+            }
+          ]"
+        >
+          <el-input v-model="form.title" @blur="form.title = form.title.trim()" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click.prevent="nodeNameDialogVisible = false">
+            {{ $t('common.cancel') }}
+          </el-button>
+          <el-button type="primary" @click="editName(titleFormRef)">
+            {{ $t('common.save') }}
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { app } from '@/main'
+import DropdownMenu from '@/views/application-workflow/component/DropdownMenu.vue'
+import { set } from 'lodash'
+import { iconComponent } from '../icons/utils'
+import { copyClick } from '@/utils/clipboard'
+import { WorkflowType } from '@/enums/workflow'
+import { MsgError, MsgConfirm } from '@/utils/message'
+import type { FormInstance } from 'element-plus'
+import { t } from '@/locales'
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+
+const height = ref<{
+  stepContainerHeight: number
+  inputContainerHeight: number
+  outputContainerHeight: number
+}>({
+  stepContainerHeight: 0,
+  inputContainerHeight: 0,
+  outputContainerHeight: 0
+})
+const showAnchor = ref<boolean>(false)
+const anchorData = ref<any>()
+const titleFormRef = ref()
+const nodeNameDialogVisible = ref<boolean>(false)
+const form = ref<any>({
+  title: ''
+})
+
+const condition = computed({
+  set: (v) => {
+    set(props.nodeModel.properties, 'condition', v)
+  },
+  get: () => {
+    if (props.nodeModel.properties.condition) {
+      return props.nodeModel.properties.condition
+    }
+    set(props.nodeModel.properties, 'condition', 'AND')
+    return true
+  }
+})
+const showNode = computed({
+  set: (v) => {
+    set(props.nodeModel.properties, 'showNode', v)
+  },
+  get: () => {
+    if (props.nodeModel.properties.showNode !== undefined) {
+      return props.nodeModel.properties.showNode
+    }
+    set(props.nodeModel.properties, 'showNode', true)
+    return true
+  }
+})
+
+const handleWheel = (event: any) => {
+  const isCombinationKeyPressed = event.ctrlKey || event.metaKey
+  if (!isCombinationKeyPressed) {
+    event.stopPropagation()
+  }
+}
+const node_status = computed(() => {
+  if (props.nodeModel.properties.status) {
+    return props.nodeModel.properties.status
+  }
+  return 200
+})
+
+function renameNode() {
+  form.value.title = props.nodeModel.properties.stepName
+  nodeNameDialogVisible.value = true
+}
+const editName = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      if (
+        !props.nodeModel.graphModel.nodes?.some(
+          (node: any) => node.properties.stepName === form.value.title
+        )
+      ) {
+        set(props.nodeModel.properties, 'stepName', form.value.title)
+        nodeNameDialogVisible.value = false
+        formEl.resetFields()
+      } else {
+        MsgError(t('views.applicationWorkflow.tip.repeatedNodeError'))
+      }
+    }
+  })
+}
+
+const mousedown = () => {
+  props.nodeModel.graphModel.clearSelectElements()
+  set(props.nodeModel, 'isSelected', true)
+  set(props.nodeModel, 'isHovered', true)
+  props.nodeModel.graphModel.toFront(props.nodeModel.id)
+}
+const showicon = ref<number | null>(null)
+const copyNode = () => {
+  props.nodeModel.graphModel.clearSelectElements()
+  const cloneNode = props.nodeModel.graphModel.cloneNode(props.nodeModel.id)
+  set(cloneNode, 'isSelected', true)
+  set(cloneNode, 'isHovered', true)
+  props.nodeModel.graphModel.toFront(cloneNode.id)
+}
+const deleteNode = () => {
+  MsgConfirm(t('common.tip'), t('views.applicationWorkflow.delete.confirmTitle'), {
+    confirmButtonText: t('common.confirm'),
+    confirmButtonClass: 'danger'
+  }).then(() => {
+    props.nodeModel.graphModel.deleteNode(props.nodeModel.id)
+  })
+  props.nodeModel.graphModel.eventCenter.emit('delete_node')
+}
+const resizeStepContainer = (wh: any) => {
+  if (wh.height) {
+    if (!props.nodeModel.virtual) {
+      height.value.stepContainerHeight = wh.height
+      props.nodeModel.setHeight(height.value.stepContainerHeight)
+    }
+  }
+}
+
+function clickNodes(item: any) {
+  const width = item.properties.width ? item.properties.width : 214
+  const nodeModel = props.nodeModel.graphModel.addNode({
+    type: item.type,
+    properties: item.properties,
+    x: anchorData.value?.x + width / 2 + 200,
+    y: anchorData.value?.y - item.height
+  })
+  props.nodeModel.graphModel.addEdge({
+    type: 'app-edge',
+    sourceNodeId: props.nodeModel.id,
+    sourceAnchorId: anchorData.value?.id,
+    targetNodeId: nodeModel.id
+  })
+
+  closeNodeMenu()
+}
+
+const props = defineProps<{
+  nodeModel: any
+}>()
+const nodeFields = computed(() => {
+  if (props.nodeModel.properties.config.fields) {
+    const fields = props.nodeModel.properties.config.fields?.map((field: any) => {
+      return {
+        label: field.label,
+        value: field.value,
+        globeLabel: `{{${props.nodeModel.properties.stepName}.${field.value}}}`,
+        globeValue: `{{context['${props.nodeModel.id}'].${field.value}}}`
+      }
+    })
+    return fields
+  }
+  return []
+})
+
+function showOperate(type: string) {
+  return type !== WorkflowType.Base && type !== WorkflowType.Start
+}
+const openNodeMenu = (anchorValue: any) => {
+  showAnchor.value = true
+  anchorData.value = anchorValue
+}
+const closeNodeMenu = () => {
+  showAnchor.value = false
+  anchorData.value = undefined
+}
+onMounted(() => {
+  set(props.nodeModel, 'openNodeMenu', (anchorData: any) => {
+    showAnchor.value ? closeNodeMenu() : openNodeMenu(anchorData)
+  })
+})
+</script>
+<style lang="scss" scoped>
+.workflow-node-container {
+  .step-container {
+    border: 2px solid #ffffff !important;
+    box-sizing: border-box;
+    &:hover {
+      box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
+    }
+    &.isSelected {
+      border: 2px solid var(--el-color-primary) !important;
+    }
+    &.error {
+      border: 1px solid #f54a45 !important;
+    }
+  }
+  .arrow-icon {
+    transition: 0.2s;
+  }
+}
+:deep(.el-card) {
+  overflow: visible;
+}
+</style>
diff --git a/ui/src/workflow/common/NodeControl.vue b/ui/src/workflow/common/NodeControl.vue
new file mode 100644
index 000000000..8e822b097
--- /dev/null
+++ b/ui/src/workflow/common/NodeControl.vue
@@ -0,0 +1,110 @@
+<template>
+  <el-card shadow="always" style="--el-card-padding: 8px 12px; --el-card-border-radius: 8px">
+    <el-button link @click="zoomOut">
+      <el-tooltip
+        effect="dark"
+        :content="$t('views.applicationWorkflow.control.zoomOut')"
+        placement="top"
+      >
+        <el-icon :size="16" :title="$t('views.applicationWorkflow.control.zoomOut')"
+          ><ZoomOut
+        /></el-icon>
+      </el-tooltip>
+    </el-button>
+    <el-button link @click="zoomIn">
+      <el-tooltip
+        effect="dark"
+        :content="$t('views.applicationWorkflow.control.zoomIn')"
+        placement="top"
+      >
+        <el-icon :size="16" :title="$t('views.applicationWorkflow.control.zoomIn')"
+          ><ZoomIn
+        /></el-icon>
+      </el-tooltip>
+    </el-button>
+    <el-button link @click="fitView">
+      <el-tooltip
+        effect="dark"
+        :content="$t('views.applicationWorkflow.control.fitView')"
+        placement="top"
+      >
+        <AppIcon
+          iconName="app-fitview"
+          :title="$t('views.applicationWorkflow.control.fitView')"
+        ></AppIcon>
+      </el-tooltip>
+    </el-button>
+    <el-divider direction="vertical" />
+    <el-button link @click="retract">
+      <el-tooltip
+        effect="dark"
+        :content="$t('views.applicationWorkflow.control.retract')"
+        placement="top"
+      >
+        <AppIcon
+          style="font-size: 16px"
+          iconName="app-retract"
+          :title="$t('views.applicationWorkflow.control.retract')"
+        ></AppIcon>
+      </el-tooltip>
+    </el-button>
+    <el-button link @click="extend">
+      <el-tooltip
+        effect="dark"
+        :content="$t('views.applicationWorkflow.control.extend')"
+        placement="top"
+      >
+        <AppIcon
+          style="font-size: 16px"
+          iconName="app-extend"
+          :title="$t('views.applicationWorkflow.control.extend')"
+        ></AppIcon>
+      </el-tooltip>
+    </el-button>
+    <el-button link @click="layout">
+      <el-tooltip
+        effect="dark"
+        :content="$t('views.applicationWorkflow.control.beautify')"
+        placement="top"
+      >
+        <AppIcon
+          style="font-size: 16px"
+          iconName="app-beautify"
+          :title="$t('views.applicationWorkflow.control.beautify')"
+        ></AppIcon>
+      </el-tooltip>
+    </el-button>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  lf: Object || String || null
+})
+
+function zoomIn() {
+  props.lf?.zoom(true, [0, 0])
+}
+function zoomOut() {
+  props.lf?.zoom(false, [0, 0])
+}
+function fitView() {
+  props.lf?.resetZoom()
+  props.lf?.resetTranslate()
+  props.lf?.fitView()
+}
+const layout = () => {
+  props.lf?.extension.dagre.layout()
+}
+const retract = () => {
+  props.lf?.graphModel.nodes.forEach((element: any) => {
+    element.properties.showNode = false
+  })
+}
+const extend = () => {
+  props.lf?.graphModel.nodes.forEach((element: any) => {
+    element.properties.showNode = true
+  })
+}
+</script>
+<style scoped></style>
diff --git a/ui/src/workflow/common/app-node.ts b/ui/src/workflow/common/app-node.ts
new file mode 100644
index 000000000..3665cb262
--- /dev/null
+++ b/ui/src/workflow/common/app-node.ts
@@ -0,0 +1,407 @@
+import Components from '@/components'
+import ElementPlus from 'element-plus'
+import * as ElementPlusIcons from '@element-plus/icons-vue'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import { HtmlResize } from '@logicflow/extension'
+import { h as lh } from '@logicflow/core'
+import { createApp, h } from 'vue'
+import directives from '@/directives'
+import i18n from '@/locales'
+import { WorkflowType } from '@/enums/workflow'
+import { nodeDict } from '@/workflow/common/data'
+import { isActive, connect, disconnect } from './teleport'
+import { t } from '@/locales'
+import { type Dict } from '@/api/type/common'
+class AppNode extends HtmlResize.view {
+  isMounted
+  r?: any
+  component: any
+  app: any
+  root?: any
+  VueNode: any
+  up_node_field_dict?: Dict<Array<any>>
+  constructor(props: any, VueNode: any) {
+    super(props)
+    this.component = VueNode
+    this.isMounted = false
+    props.model.clear_next_node_field = this.clear_next_node_field.bind(this)
+    props.model.get_up_node_field_dict = this.get_up_node_field_dict.bind(this)
+    props.model.get_node_field_list = this.get_node_field_list.bind(this)
+    props.model.get_up_node_field_list = this.get_up_node_field_list.bind(this)
+
+    if (props.model.properties.noRender) {
+      delete props.model.properties.noRender
+    } else {
+      const filterNodes = props.graphModel.nodes.filter((v: any) => v.type === props.model.type)
+      const filterNameSameNodes = filterNodes.filter(
+        (v: any) => v.properties.stepName === props.model.properties.stepName
+      )
+      if (filterNameSameNodes.length - 1 > 0) {
+        getNodesName(filterNameSameNodes.length - 1)
+      }
+    }
+    function getNodesName(num: number) {
+      const number = num
+      const name = props.model.properties.stepName + number
+      if (!props.graphModel.nodes?.some((node: any) => node.properties.stepName === name.trim())) {
+        props.model.properties.stepName = name
+      } else {
+        getNodesName(number + 1)
+      }
+    }
+    props.model.properties.config = nodeDict[props.model.type].properties.config
+    if (props.model.properties.height) {
+      props.model.height = props.model.properties.height
+    }
+  }
+  get_node_field_list() {
+    const result = []
+    if (this.props.model.type === 'start-node') {
+      result.push({
+        value: 'global',
+        label: t('views.applicationWorkflow.variable.global'),
+        type: 'global',
+        children: this.props.model.properties?.config?.globalFields || []
+      })
+    }
+    result.push({
+      value: this.props.model.id,
+      label: this.props.model.properties.stepName,
+      type: this.props.model.type,
+      children: this.props.model.properties?.config?.fields || []
+    })
+    return result
+  }
+  get_up_node_field_dict(contain_self: boolean, use_cache: boolean) {
+    if (!this.up_node_field_dict || !use_cache) {
+      const up_node_list = this.props.graphModel.getNodeIncomingNode(this.props.model.id)
+      this.up_node_field_dict = up_node_list
+        .filter((node) => node.id != 'start-node')
+        .map((node) => node.get_up_node_field_dict(true, use_cache))
+        .reduce((pre, next) => ({ ...pre, ...next }), {})
+    }
+    if (contain_self) {
+      return {
+        ...this.up_node_field_dict,
+        [this.props.model.id]: this.get_node_field_list()
+      }
+    }
+    return this.up_node_field_dict ? this.up_node_field_dict : {}
+  }
+
+  get_up_node_field_list(contain_self: boolean, use_cache: boolean) {
+    const result = Object.values(this.get_up_node_field_dict(contain_self, use_cache)).reduce(
+      (pre, next) => [...pre, ...next],
+      []
+    )
+    const start_node_field_list = this.props.graphModel
+      .getNodeModelById('start-node')
+      .get_node_field_list()
+    return [...start_node_field_list, ...result]
+  }
+
+  clear_next_node_field(contain_self: boolean) {
+    const next_node_list = this.props.graphModel.getNodeOutgoingNode(this.props.model.id)
+    next_node_list.forEach((node) => {
+      node.clear_next_node_field(true)
+    })
+    if (contain_self) {
+      this.up_node_field_dict = undefined
+    }
+  }
+  getAnchorShape(anchorData: any) {
+    const { x, y, type } = anchorData
+    let isConnect = false
+
+    if (type == 'left') {
+      isConnect = this.props.graphModel.edges.some((edge) => edge.targetAnchorId == anchorData.id)
+    } else {
+      isConnect = this.props.graphModel.edges.some((edge) => edge.sourceAnchorId == anchorData.id)
+    }
+
+    return lh(
+      'foreignObject',
+      {
+        ...anchorData,
+        x: x - 10,
+        y: y - 12,
+        width: 30,
+        height: 30
+      },
+      [
+        lh('div', {
+          style: { zindex: 0 },
+          onClick: () => {
+            if (type == 'right') {
+              this.props.model.openNodeMenu(anchorData)
+            }
+          },
+          dangerouslySetInnerHTML: {
+            __html: isConnect
+              ? `<svg width="100%" height="100%" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <g filter="url(#filter0_d_5119_232585)">
+              <path d="M20.9998 29.8333C28.0875 29.8333 33.8332 24.0876 33.8332 17C33.8332 9.91231 28.0875 4.16663 20.9998 4.16663C13.9122 4.16663 8.1665 9.91231 8.1665 17C8.1665 24.0876 13.9122 29.8333 20.9998 29.8333Z" fill="white"/>
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M20.9998 27.5C26.7988 27.5 31.4998 22.799 31.4998 17C31.4998 11.201 26.7988 6.49996 20.9998 6.49996C15.2008 6.49996 10.4998 11.201 10.4998 17C10.4998 22.799 15.2008 27.5 20.9998 27.5ZM33.8332 17C33.8332 24.0876 28.0875 29.8333 20.9998 29.8333C13.9122 29.8333 8.1665 24.0876 8.1665 17C8.1665 9.91231 13.9122 4.16663 20.9998 4.16663C28.0875 4.16663 33.8332 9.91231 33.8332 17Z" fill="#3370FF"/>
+              </g>
+              <defs>
+              <filter id="filter0_d_5119_232585" x="-1" y="-1" width="44" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+              <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+              <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+              <feOffset dy="4"/>
+              <feGaussianBlur stdDeviation="4"/>
+              <feComposite in2="hardAlpha" operator="out"/>
+              <feColorMatrix type="matrix" values="0 0 0 0 0.2 0 0 0 0 0.439216 0 0 0 0 1 0 0 0 0.1 0"/>
+              <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5119_232585"/>
+              <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5119_232585" result="shape"/>
+              </filter>
+              </defs>
+              </svg>
+              `
+              : `<svg width="100%" height="100%" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g filter="url(#filter0_d_5199_166905)">
+        <path d="M20.9998 29.8333C28.0875 29.8333 33.8332 24.0876 33.8332 17C33.8332 9.91231 28.0875 4.16663 20.9998 4.16663C13.9122 4.16663 8.1665 9.91231 8.1665 17C8.1665 24.0876 13.9122 29.8333 20.9998 29.8333Z" fill="#3370FF"/>
+        <path d="M19.8332 11.75C19.8332 11.4278 20.0943 11.1666 20.4165 11.1666H21.5832C21.9053 11.1666 22.1665 11.4278 22.1665 11.75V15.8333H26.2498C26.572 15.8333 26.8332 16.0945 26.8332 16.4166V17.5833C26.8332 17.9055 26.572 18.1666 26.2498 18.1666H22.1665V22.25C22.1665 22.5721 21.9053 22.8333 21.5832 22.8333H20.4165C20.0943 22.8333 19.8332 22.5721 19.8332 22.25V18.1666H15.7498C15.4277 18.1666 15.1665 17.9055 15.1665 17.5833V16.4166C15.1665 16.0945 15.4277 15.8333 15.7498 15.8333H19.8332V11.75Z" fill="white"/>
+        </g>
+        <defs>
+        <filter id="filter0_d_5199_166905" x="-1" y="-1" width="44" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+        <feOffset dy="4"/>
+        <feGaussianBlur stdDeviation="4"/>
+        <feComposite in2="hardAlpha" operator="out"/>
+        <feColorMatrix type="matrix" values="0 0 0 0 0.2 0 0 0 0 0.439216 0 0 0 0 1 0 0 0 0.1 0"/>
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5199_166905"/>
+        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5199_166905" result="shape"/>
+        </filter>
+        </defs>
+        </svg>`
+          }
+        })
+      ]
+    )
+  }
+
+  setHtml(rootEl: HTMLElement) {
+    if (!this.isMounted) {
+      this.isMounted = true
+      const node = document.createElement('div')
+      rootEl.appendChild(node)
+      this.renderVueComponent(node)
+    } else {
+      if (this.r && this.r.component) {
+        this.r.component.props.properties = this.props.model.getProperties()
+      }
+    }
+  }
+  componentWillUnmount() {
+    super.componentWillUnmount()
+    this.unmount()
+  }
+  getComponentContainer() {
+    return this.root
+  }
+  protected targetId() {
+    return `${this.props.graphModel.flowId}:${this.props.model.id}`
+  }
+  protected renderVueComponent(root: any) {
+    this.unmountVueComponent()
+    this.root = root
+    const { model, graphModel } = this.props
+
+    if (root) {
+      if (isActive()) {
+        connect(this.targetId(), this.component, root, model, graphModel)
+      } else {
+        this.r = h(this.component, {
+          properties: this.props.model.properties,
+          nodeModel: this.props.model
+        })
+        this.app = createApp({
+          render() {
+            return this.r
+          },
+          provide() {
+            return {
+              getNode: () => model,
+              getGraph: () => graphModel
+            }
+          }
+        })
+
+        this.app.use(ElementPlus, {
+          locale: zhCn
+        })
+        this.app.use(Components)
+        this.app.use(directives)
+        this.app.use(i18n)
+        for (const [key, component] of Object.entries(ElementPlusIcons)) {
+          this.app.component(key, component)
+        }
+        this.app?.mount(root)
+      }
+    }
+  }
+
+  protected unmountVueComponent() {
+    if (this.app) {
+      this.app.unmount()
+      this.app = null
+    }
+    if (this.root) {
+      this.root.innerHTML = ''
+    }
+    return this.root
+  }
+
+  unmount() {
+    if (isActive()) {
+      disconnect(this.targetId())
+    }
+    this.unmountVueComponent()
+  }
+}
+
+class AppNodeModel extends HtmlResize.model {
+  refreshDeges() {
+    // 更新节点连接边的path
+    this.incoming.edges.forEach((edge: any) => {
+      // 调用自定义的更新方案
+      edge.updatePathByAnchor()
+    })
+    this.outgoing.edges.forEach((edge: any) => {
+      edge.updatePathByAnchor()
+    })
+  }
+  set_position(position: { x?: number; y?: number }) {
+    const { x, y } = position
+    if (x) {
+      this.x = x
+    }
+    if (y) {
+      this.y = y
+    }
+    this.refreshDeges()
+  }
+  getResizeOutlineStyle() {
+    const style = super.getResizeOutlineStyle()
+    style.stroke = 'none'
+    return style
+  }
+  getControlPointStyle() {
+    const style = super.getControlPointStyle()
+    style.stroke = 'none'
+    style.fill = 'none'
+    return style
+  }
+  getNodeStyle() {
+    return {
+      overflow: 'visible'
+    }
+  }
+  getOutlineStyle() {
+    const style = super.getOutlineStyle()
+    style.stroke = 'none'
+    if (style.hover) {
+      style.hover.stroke = 'none'
+    }
+    return style
+  }
+  // 如果不用修改锚地形状，可以重写颜色相关样式
+  getAnchorStyle(anchorInfo: any) {
+    const style = super.getAnchorStyle(anchorInfo)
+    if (anchorInfo.type === 'left') {
+      style.fill = 'red'
+      style.hover.fill = 'transparent'
+      style.hover.stroke = 'transpanrent'
+      style.className = 'lf-hide-default'
+    } else {
+      style.fill = 'green'
+    }
+    return style
+  }
+
+  setHeight(height: number) {
+    const sourceHeight = this.height
+    const targetHeight = height + 100
+    this.height = targetHeight
+    this.properties['height'] = targetHeight
+    this.move(0, (targetHeight - sourceHeight) / 2)
+    this.outgoing.edges.forEach((edge: any) => {
+      // 调用自定义的更新方案
+      edge.updatePathByAnchor()
+    })
+    this.incoming.edges.forEach((edge: any) => {
+      // 调用自定义的更新方案
+      edge.updatePathByAnchor()
+    })
+  }
+  get_width() {
+    return this.properties?.width || 340
+  }
+
+  setAttributes() {
+    const { t } = i18n.global
+    this.width = this.get_width()
+    const isLoop = (node_id: string, target_node_id: string) => {
+      const up_node_list = this.graphModel.getNodeIncomingNode(node_id)
+      for (const index in up_node_list) {
+        const item = up_node_list[index]
+        if (item.id === target_node_id) {
+          return true
+        } else {
+          const result = isLoop(item.id, target_node_id)
+          if (result) {
+            return true
+          }
+        }
+      }
+      return false
+    }
+    const circleOnlyAsTarget = {
+      message: t('views.applicationWorkflow.tip.onlyRight'),
+      validate: (sourceNode: any, targetNode: any, sourceAnchor: any) => {
+        return sourceAnchor.type === 'right'
+      }
+    }
+    this.sourceRules.push({
+      message: t('views.applicationWorkflow.tip.notRecyclable'),
+      validate: (sourceNode: any, targetNode: any, sourceAnchor: any, targetAnchor: any) => {
+        return !isLoop(sourceNode.id, targetNode.id)
+      }
+    })
+
+    this.sourceRules.push(circleOnlyAsTarget)
+    this.targetRules.push({
+      message: t('views.applicationWorkflow.tip.onlyLeft'),
+      validate: (sourceNode: any, targetNode: any, sourceAnchor: any, targetAnchor: any) => {
+        return targetAnchor.type === 'left'
+      }
+    })
+  }
+  getDefaultAnchor() {
+    const { id, x, y, width } = this
+    const showNode = this.properties.showNode === undefined ? true : this.properties.showNode
+    const anchors: any = []
+
+    if (this.type !== WorkflowType.Base) {
+      if (this.type !== WorkflowType.Start) {
+        anchors.push({
+          x: x - width / 2 + 10,
+          y: showNode ? y : y - 15,
+          id: `${id}_left`,
+          edgeAddable: false,
+          type: 'left'
+        })
+      }
+      anchors.push({
+        x: x + width / 2 - 10,
+        y: showNode ? y : y - 15,
+        id: `${id}_right`,
+        type: 'right'
+      })
+    }
+
+    return anchors
+  }
+}
+export { AppNodeModel, AppNode }
diff --git a/ui/src/workflow/common/data.ts b/ui/src/workflow/common/data.ts
new file mode 100644
index 000000000..6ce89c243
--- /dev/null
+++ b/ui/src/workflow/common/data.ts
@@ -0,0 +1,465 @@
+import { WorkflowType } from '@/enums/workflow'
+import { t } from '@/locales'
+
+export const startNode = {
+  id: WorkflowType.Start,
+  type: WorkflowType.Start,
+  x: 480,
+  y: 3340,
+  properties: {
+    height: 364,
+    stepName: t('views.applicationWorkflow.nodes.startNode.label'),
+    config: {
+      fields: [
+        {
+          label: t('views.applicationWorkflow.nodes.startNode.question'),
+          value: 'question'
+        }
+      ],
+      globalFields: [
+        { label: t('views.applicationWorkflow.nodes.startNode.currentTime'), value: 'time' },
+        {
+          label: t('views.application.applicationForm.form.historyRecord.label'),
+          value: 'history_context'
+        },
+        {
+          label: t('chat.chatId'),
+          value: 'chat_id'
+        }
+      ]
+    },
+    fields: [{ label: t('views.applicationWorkflow.nodes.startNode.question'), value: 'question' }],
+    globalFields: [
+      { label: t('views.applicationWorkflow.nodes.startNode.currentTime'), value: 'time' }
+    ],
+    showNode: true
+  }
+}
+export const baseNode = {
+  id: WorkflowType.Base,
+  type: WorkflowType.Base,
+  x: 360,
+  y: 2761.3875,
+  text: '',
+  properties: {
+    height: 728.375,
+    stepName: t('views.applicationWorkflow.nodes.baseNode.label'),
+    input_field_list: [],
+    node_data: {
+      name: '',
+      desc: '',
+      // @ts-ignore
+      prologue: t('views.application.applicationForm.form.defaultPrologue'),
+      tts_type: 'BROWSER'
+    },
+    config: {},
+    showNode: true,
+    user_input_config: { title: t('chat.userInput') },
+    user_input_field_list: []
+  }
+}
+/**
+ * 说明
+ * type 与 nodes 文件对应
+ */
+export const baseNodes = [baseNode, startNode]
+/**
+ * ai对话节点配置数据
+ */
+export const aiChatNode = {
+  type: WorkflowType.AiChat,
+  text: t('views.applicationWorkflow.nodes.aiChatNode.text'),
+  label: t('views.applicationWorkflow.nodes.aiChatNode.label'),
+  height: 340,
+  properties: {
+    stepName: t('views.applicationWorkflow.nodes.aiChatNode.label'),
+    config: {
+      fields: [
+        {
+          label: t('views.applicationWorkflow.nodes.aiChatNode.answer'),
+          value: 'answer'
+        },
+        {
+          label: t('views.applicationWorkflow.nodes.aiChatNode.think'),
+          value: 'reasoning_content'
+        }
+      ]
+    }
+  }
+}
+/**
+ * 知识库检索配置数据
+ */
+export const searchDatasetNode = {
+  type: WorkflowType.SearchDataset,
+  text: t('views.applicationWorkflow.nodes.searchDatasetNode.text'),
+  label: t('views.applicationWorkflow.nodes.searchDatasetNode.label'),
+  height: 355,
+  properties: {
+    stepName: t('views.applicationWorkflow.nodes.searchDatasetNode.label'),
+    config: {
+      fields: [
+        {
+          label: t('views.applicationWorkflow.nodes.searchDatasetNode.paragraph_list'),
+          value: 'paragraph_list'
+        },
+        {
+          label: t('views.applicationWorkflow.nodes.searchDatasetNode.is_hit_handling_method_list'),
+          value: 'is_hit_handling_method_list'
+        },
+        {
+          label: t('views.applicationWorkflow.nodes.searchDatasetNode.result'),
+          value: 'data'
+        },
+        {
+          label: t('views.applicationWorkflow.nodes.searchDatasetNode.directly_return'),
+          value: 'directly_return'
+        }
+      ]
+    }
+  }
+}
+export const questionNode = {
+  type: WorkflowType.Question,
+  text: t('views.applicationWorkflow.nodes.questionNode.text'),
+  label: t('views.applicationWorkflow.nodes.questionNode.label'),
+  height: 345,
+  properties: {
+    stepName: t('views.applicationWorkflow.nodes.questionNode.label'),
+    config: {
+      fields: [
+        {
+          label: t('views.applicationWorkflow.nodes.questionNode.result'),
+          value: 'answer'
+        }
+      ]
+    }
+  }
+}
+export const conditionNode = {
+  type: WorkflowType.Condition,
+  text: t('views.applicationWorkflow.nodes.conditionNode.text'),
+  label: t('views.applicationWorkflow.nodes.conditionNode.label'),
+  height: 175,
+  properties: {
+    width: 600,
+    stepName: t('views.applicationWorkflow.nodes.conditionNode.label'),
+    config: {
+      fields: [
+        {
+          label: t('views.applicationWorkflow.nodes.conditionNode.branch_name'),
+          value: 'branch_name'
+        }
+      ]
+    }
+  }
+}
+export const replyNode = {
+  type: WorkflowType.Reply,
+  text: t('views.applicationWorkflow.nodes.replyNode.text'),
+  label: t('views.applicationWorkflow.nodes.replyNode.label'),
+  height: 210,
+  properties: {
+    stepName: t('views.applicationWorkflow.nodes.replyNode.label'),
+    config: {
+      fields: [
+        {
+          label: t('views.applicationWorkflow.nodes.replyNode.content'),
+          value: 'answer'
+        }
+      ]
+    }
+  }
+}
+export const rerankerNode = {
+  type: WorkflowType.RrerankerNode,
+  text: t('views.applicationWorkflow.nodes.rerankerNode.text'),
+  label: t('views.applicationWorkflow.nodes.rerankerNode.label'),
+  height: 252,
+  properties: {
+    stepName: t('views.applicationWorkflow.nodes.rerankerNode.label'),
+    config: {
+      fields: [
+        {
+          label: t('views.applicationWorkflow.nodes.rerankerNode.result_list'),
+          value: 'result_list'
+        },
+        {
+          label: t('views.applicationWorkflow.nodes.rerankerNode.result'),
+          value: 'result'
+        }
+      ]
+    }
+  }
+}
+export const formNode = {
+  type: WorkflowType.FormNode,
+  text: t('views.applicationWorkflow.nodes.formNode.text'),
+  label: t('views.applicationWorkflow.nodes.formNode.label'),
+  height: 252,
+  properties: {
+    width: 600,
+    stepName: t('views.applicationWorkflow.nodes.formNode.label'),
+    node_data: {
+      is_result: true,
+      form_field_list: [],
+      form_content_format: `${t('views.applicationWorkflow.nodes.formNode.form_content_format1')}
+{{form}}
+${t('views.applicationWorkflow.nodes.formNode.form_content_format2')}`
+    },
+    config: {
+      fields: [
+        {
+          label: t('views.applicationWorkflow.nodes.formNode.form_data'),
+          value: 'form_data'
+        }
+      ]
+    }
+  }
+}
+export const documentExtractNode = {
+  type: WorkflowType.DocumentExtractNode,
+  text: t('views.applicationWorkflow.nodes.documentExtractNode.text'),
+  label: t('views.applicationWorkflow.nodes.documentExtractNode.label'),
+  height: 252,
+  properties: {
+    stepName: t('views.applicationWorkflow.nodes.documentExtractNode.label'),
+    config: {
+      fields: [
+        {
+          label: t('views.applicationWorkflow.nodes.documentExtractNode.content'),
+          value: 'content'
+        }
+      ]
+    }
+  }
+}
+export const imageUnderstandNode = {
+  type: WorkflowType.ImageUnderstandNode,
+  text: t('views.applicationWorkflow.nodes.imageUnderstandNode.text'),
+  label: t('views.applicationWorkflow.nodes.imageUnderstandNode.label'),
+  height: 252,
+  properties: {
+    stepName: t('views.applicationWorkflow.nodes.imageUnderstandNode.label'),
+    config: {
+      fields: [
+        {
+          label: t('views.applicationWorkflow.nodes.imageUnderstandNode.answer'),
+          value: 'answer'
+        }
+      ]
+    }
+  }
+}
+
+export const variableAssignNode = {
+  type: WorkflowType.VariableAssignNode,
+  text: t('views.applicationWorkflow.nodes.variableAssignNode.text'),
+  label: t('views.applicationWorkflow.nodes.variableAssignNode.label'),
+  height: 252,
+  properties: {
+    stepName: t('views.applicationWorkflow.nodes.variableAssignNode.label'),
+    config: {}
+  }
+}
+
+export const mcpNode = {
+  type: WorkflowType.McpNode,
+  text: t('views.applicationWorkflow.nodes.mcpNode.text'),
+  label: t('views.applicationWorkflow.nodes.mcpNode.label'),
+  height: 252,
+  properties: {
+    stepName: t('views.applicationWorkflow.nodes.mcpNode.label'),
+    config: {
+      fields: [
+        {
+          label: t('common.result'),
+          value: 'result'
+        }
+      ]
+    }
+  }
+}
+
+export const imageGenerateNode = {
+  type: WorkflowType.ImageGenerateNode,
+  text: t('views.applicationWorkflow.nodes.imageGenerateNode.text'),
+  label: t('views.applicationWorkflow.nodes.imageGenerateNode.label'),
+  height: 252,
+  properties: {
+    stepName: t('views.applicationWorkflow.nodes.imageGenerateNode.label'),
+    config: {
+      fields: [
+        {
+          label: t('views.applicationWorkflow.nodes.imageGenerateNode.answer'),
+          value: 'answer'
+        },
+        {
+          label: t('common.fileUpload.image'),
+          value: 'image'
+        }
+      ]
+    }
+  }
+}
+
+export const speechToTextNode = {
+  type: WorkflowType.SpeechToTextNode,
+  text: t('views.applicationWorkflow.nodes.speechToTextNode.text'),
+  label: t('views.applicationWorkflow.nodes.speechToTextNode.label'),
+  height: 252,
+  properties: {
+    stepName: t('views.applicationWorkflow.nodes.speechToTextNode.label'),
+    config: {
+      fields: [
+        {
+          label: t('common.result'),
+          value: 'result'
+        }
+      ]
+    }
+  }
+}
+export const textToSpeechNode = {
+  type: WorkflowType.TextToSpeechNode,
+  text: t('views.applicationWorkflow.nodes.textToSpeechNode.text'),
+  label: t('views.applicationWorkflow.nodes.textToSpeechNode.label'),
+  height: 252,
+  properties: {
+    stepName: t('views.applicationWorkflow.nodes.textToSpeechNode.label'),
+    config: {
+      fields: [
+        {
+          label: t('common.result'),
+          value: 'result'
+        }
+      ]
+    }
+  }
+}
+export const menuNodes = [
+  aiChatNode,
+  imageUnderstandNode,
+  imageGenerateNode,
+  searchDatasetNode,
+  rerankerNode,
+  conditionNode,
+  replyNode,
+  formNode,
+  questionNode,
+  documentExtractNode,
+  speechToTextNode,
+  textToSpeechNode,
+  variableAssignNode,
+  mcpNode
+]
+
+/**
+ * 自定义函数配置数据
+ */
+export const functionNode = {
+  type: WorkflowType.FunctionLibCustom,
+  text: t('views.applicationWorkflow.nodes.functionNode.text'),
+  label: t('views.applicationWorkflow.nodes.functionNode.label'),
+  height: 260,
+  properties: {
+    stepName: t('views.applicationWorkflow.nodes.functionNode.label'),
+    config: {
+      fields: [
+        {
+          label: t('common.result'),
+          value: 'result'
+        }
+      ]
+    }
+  }
+}
+export const functionLibNode = {
+  type: WorkflowType.FunctionLib,
+  text: t('views.applicationWorkflow.nodes.functionNode.text'),
+  label: t('views.applicationWorkflow.nodes.functionNode.label'),
+  height: 170,
+  properties: {
+    stepName: t('views.applicationWorkflow.nodes.functionNode.label'),
+    config: {
+      fields: [
+        {
+          label: t('common.result'),
+          value: 'result'
+        }
+      ]
+    }
+  }
+}
+
+export const applicationNode = {
+  type: WorkflowType.Application,
+  text: t('views.applicationWorkflow.nodes.applicationNode.label'),
+  label: t('views.applicationWorkflow.nodes.applicationNode.label'),
+  height: 260,
+  properties: {
+    stepName: t('views.applicationWorkflow.nodes.applicationNode.label'),
+    config: {
+      fields: [
+        {
+          label: t('common.result'),
+          value: 'result'
+        }
+      ]
+    }
+  }
+}
+
+export const compareList = [
+  { value: 'is_null', label: t('views.applicationWorkflow.compare.is_null') },
+  { value: 'is_not_null', label: t('views.applicationWorkflow.compare.is_not_null') },
+  { value: 'contain', label: t('views.applicationWorkflow.compare.contain') },
+  { value: 'not_contain', label: t('views.applicationWorkflow.compare.not_contain') },
+  { value: 'eq', label: t('views.applicationWorkflow.compare.eq') },
+  { value: 'ge', label: t('views.applicationWorkflow.compare.ge') },
+  { value: 'gt', label: t('views.applicationWorkflow.compare.gt') },
+  { value: 'le', label: t('views.applicationWorkflow.compare.le') },
+  { value: 'lt', label: t('views.applicationWorkflow.compare.lt') },
+  { value: 'len_eq', label: t('views.applicationWorkflow.compare.len_eq') },
+  { value: 'len_ge', label: t('views.applicationWorkflow.compare.len_ge') },
+  { value: 'len_gt', label: t('views.applicationWorkflow.compare.len_gt') },
+  { value: 'len_le', label: t('views.applicationWorkflow.compare.len_le') },
+  { value: 'len_lt', label: t('views.applicationWorkflow.compare.len_lt') },
+  { value: 'is_true', label: t('views.applicationWorkflow.compare.is_true') },
+  { value: 'is_not_true', label: t('views.applicationWorkflow.compare.is_not_true') }
+]
+
+export const nodeDict: any = {
+  [WorkflowType.AiChat]: aiChatNode,
+  [WorkflowType.SearchDataset]: searchDatasetNode,
+  [WorkflowType.Question]: questionNode,
+  [WorkflowType.Condition]: conditionNode,
+  [WorkflowType.Base]: baseNode,
+  [WorkflowType.Start]: startNode,
+  [WorkflowType.Reply]: replyNode,
+  [WorkflowType.FunctionLib]: functionLibNode,
+  [WorkflowType.FunctionLibCustom]: functionNode,
+  [WorkflowType.RrerankerNode]: rerankerNode,
+  [WorkflowType.FormNode]: formNode,
+  [WorkflowType.Application]: applicationNode,
+  [WorkflowType.DocumentExtractNode]: documentExtractNode,
+  [WorkflowType.ImageUnderstandNode]: imageUnderstandNode,
+  [WorkflowType.TextToSpeechNode]: textToSpeechNode,
+  [WorkflowType.SpeechToTextNode]: speechToTextNode,
+  [WorkflowType.ImageGenerateNode]: imageGenerateNode,
+  [WorkflowType.VariableAssignNode]: variableAssignNode,
+  [WorkflowType.McpNode]: mcpNode
+}
+export function isWorkFlow(type: string | undefined) {
+  return type === 'WORK_FLOW'
+}
+
+export function isLastNode(nodeModel: any) {
+  const incoming = nodeModel.graphModel.getNodeIncomingNode(nodeModel.id)
+  const outcomming = nodeModel.graphModel.getNodeOutgoingNode(nodeModel.id)
+  if (incoming.length > 0 && outcomming.length === 0) {
+    return true
+  } else {
+    return false
+  }
+}
diff --git a/ui/src/workflow/common/edge.ts b/ui/src/workflow/common/edge.ts
new file mode 100644
index 000000000..461b09650
--- /dev/null
+++ b/ui/src/workflow/common/edge.ts
@@ -0,0 +1,243 @@
+import { BezierEdge, BezierEdgeModel, h } from '@logicflow/core'
+import { createApp, h as vh } from 'vue'
+import { isActive, connect, disconnect } from './teleport'
+import CustomLine from './CustomLine.vue'
+function isMouseInElement(element: any, e: any) {
+  const rect = element.getBoundingClientRect()
+  return (
+    e.clientX >= rect.left &&
+    e.clientX <= rect.right &&
+    e.clientY >= rect.top &&
+    e.clientY <= rect.bottom
+  )
+}
+const DEFAULT_WIDTH = 32
+const DEFAULT_HEIGHT = 32
+class CustomEdge2 extends BezierEdge {
+  isMounted
+  customLineApp?: any
+  root?: any
+  constructor() {
+    super()
+    this.isMounted = false
+    this.handleMouseUp = (e: any) => {
+      this.props.graphModel.clearSelectElements()
+      this.props.model.isSelected = true
+      const element = e.target.parentNode.parentNode.querySelector('.lf-custom-edge-wrapper')
+      if (isMouseInElement(element, e)) {
+        this.props.model.graphModel.deleteEdgeById(this.props.model.id)
+      }
+    }
+  }
+  /**
+   * 渲染vue组件
+   * @param root
+   */
+  protected renderVueComponent(root: any) {
+    this.unmountVueComponent()
+    this.root = root
+    const { graphModel } = this.props
+    if (root) {
+      if (isActive()) {
+        connect(
+          this.targetId(),
+          CustomLine,
+          root,
+          this.props.model,
+          graphModel,
+          (node: any, graph: any) => {
+            return { model: node, graph }
+          }
+        )
+      } else {
+        this.customLineApp = createApp({
+          render: () => vh(CustomLine, { model: this.props.model })
+        })
+        this.customLineApp?.mount(root)
+      }
+    }
+  }
+  protected targetId() {
+    return `${this.props.graphModel.flowId}:${this.props.model.id}`
+  }
+  /**
+   * 组件即将卸载勾子
+   */
+  componentWillUnmount() {
+    if (super.componentWillUnmount) {
+      super.componentWillUnmount()
+    }
+    if (isActive()) {
+      disconnect(this.targetId())
+    }
+    this.unmountVueComponent()
+  }
+  /**
+   * 卸载vue
+   * @returns
+   */
+  protected unmountVueComponent() {
+    if (this.customLineApp) {
+      this.customLineApp.unmount()
+      this.customLineApp = null
+    }
+    if (this.root) {
+      this.root.innerHTML = ''
+    }
+    return this.root
+  }
+
+  getEdge() {
+    const { model } = this.props
+    const id = model.id
+    const { customWidth = DEFAULT_WIDTH, customHeight = DEFAULT_HEIGHT } = model.getProperties()
+    const { startPoint, endPoint, path, isAnimation, arrowConfig } = model
+    const animationStyle = model.getEdgeAnimationStyle()
+    const {
+      strokeDasharray,
+      stroke,
+      strokeDashoffset,
+      animationName,
+      animationDuration,
+      animationIterationCount,
+      animationTimingFunction,
+      animationDirection
+    } = animationStyle
+    const positionData = {
+      x: (startPoint.x + endPoint.x - customWidth) / 2,
+      y: (startPoint.y + endPoint.y - customHeight) / 2,
+      width: customWidth,
+      height: customHeight
+    }
+    const style = model.getEdgeStyle()
+    const wrapperStyle = {
+      width: customWidth,
+      height: customHeight
+    }
+
+    setTimeout(() => {
+      const s = document.getElementById(id)
+      if (s && !this.isMounted) {
+        this.isMounted = true
+        this.renderVueComponent(s)
+      }
+    }, 0)
+
+    delete style.stroke
+
+    return h('g', {}, [
+      h(
+        'style' as any,
+        { type: 'text/css' },
+        '.lf-edge{stroke:#afafaf}.lf-edge:hover{stroke: #3370FF;}'
+      ),
+      h('path', {
+        d: path,
+        ...style,
+        ...arrowConfig,
+        ...(isAnimation
+          ? {
+              strokeDasharray,
+              stroke,
+              style: {
+                strokeDashoffset,
+                animationName,
+                animationDuration,
+                animationIterationCount,
+                animationTimingFunction,
+                animationDirection
+              }
+            }
+          : {})
+      }),
+      h(
+        'foreignObject',
+        {
+          ...positionData,
+          y: positionData.y + 5,
+          x: positionData.x + 5,
+          style: {}
+        },
+        [
+          h('div', {
+            id,
+            style: { ...wrapperStyle },
+            className: 'lf-custom-edge-wrapper'
+          })
+        ]
+      )
+    ])
+  }
+}
+
+class CustomEdgeModel2 extends BezierEdgeModel {
+  getArrowStyle() {
+    const arrowStyle = super.getArrowStyle()
+    arrowStyle.offset = 1
+    arrowStyle.verticalLength = 0
+    return arrowStyle
+  }
+
+  getEdgeStyle() {
+    const style = super.getEdgeStyle()
+    // svg属性
+    style.strokeWidth = 2
+    style.stroke = '#BBBFC4'
+    style.offset = 0
+    return style
+  }
+  /**
+   * 重写此方法，使保存数据是能带上锚点数据。
+   */
+  getData() {
+    const data: any = super.getData()
+    if (data) {
+      data.sourceAnchorId = this.sourceAnchorId
+      data.targetAnchorId = this.targetAnchorId
+    }
+    return data
+  }
+  /**
+   * 给边自定义方案，使其支持基于锚点的位置更新边的路径
+   */
+  updatePathByAnchor() {
+    // TODO
+    const sourceNodeModel = this.graphModel.getNodeModelById(this.sourceNodeId)
+    const sourceAnchor = sourceNodeModel
+      .getDefaultAnchor()
+      .find((anchor: any) => anchor.id === this.sourceAnchorId)
+
+    const targetNodeModel = this.graphModel.getNodeModelById(this.targetNodeId)
+    const targetAnchor = targetNodeModel
+      .getDefaultAnchor()
+      .find((anchor: any) => anchor.id === this.targetAnchorId)
+    if (sourceAnchor && targetAnchor) {
+      const startPoint = {
+        x: sourceAnchor.x,
+        y: sourceAnchor.y
+      }
+      this.updateStartPoint(startPoint)
+      const endPoint = {
+        x: targetAnchor.x,
+        y: targetAnchor.y
+      }
+
+      this.updateEndPoint(endPoint)
+    }
+
+    // 这里需要将原有的pointsList设置为空，才能触发bezier的自动计算control点。
+    this.pointsList = []
+    this.initPoints()
+  }
+  setAttributes(): void {
+    super.setAttributes()
+    this.isHitable = true
+    this.zIndex = 0
+  }
+}
+
+export default {
+  type: 'app-edge',
+  view: CustomEdge2,
+  model: CustomEdgeModel2
+}
diff --git a/ui/src/workflow/common/shortcut.ts b/ui/src/workflow/common/shortcut.ts
new file mode 100644
index 000000000..2b3235b6b
--- /dev/null
+++ b/ui/src/workflow/common/shortcut.ts
@@ -0,0 +1,136 @@
+import type LogicFlow from '@logicflow/core'
+import { type GraphModel } from '@logicflow/core'
+import { MsgSuccess, MsgError, MsgConfirm } from '@/utils/message'
+import { WorkflowType } from '@/enums/workflow'
+import { t } from '@/locales'
+let selected: any | null = null
+
+function translationNodeData(nodeData: any, distance: any) {
+  nodeData.x += distance
+  nodeData.y += distance
+  if (nodeData.text) {
+    nodeData.text.x += distance
+    nodeData.text.y += distance
+  }
+  return nodeData
+}
+
+function translationEdgeData(edgeData: any, distance: any) {
+  if (edgeData.startPoint) {
+    edgeData.startPoint.x += distance
+    edgeData.startPoint.y += distance
+  }
+  if (edgeData.endPoint) {
+    edgeData.endPoint.x += distance
+    edgeData.endPoint.y += distance
+  }
+  if (edgeData.pointsList && edgeData.pointsList.length > 0) {
+    edgeData.pointsList.forEach((point: any) => {
+      point.x += distance
+      point.y += distance
+    })
+  }
+  if (edgeData.text) {
+    edgeData.text.x += distance
+    edgeData.text.y += distance
+  }
+  return edgeData
+}
+
+const TRANSLATION_DISTANCE = 40
+let CHILDREN_TRANSLATION_DISTANCE = 40
+
+export function initDefaultShortcut(lf: LogicFlow, graph: GraphModel) {
+  const { keyboard } = lf
+  const {
+    options: { keyboard: keyboardOptions }
+  } = keyboard
+  const copy_node = () => {
+    CHILDREN_TRANSLATION_DISTANCE = TRANSLATION_DISTANCE
+    if (!keyboardOptions?.enabled) return true
+    if (graph.textEditElement) return true
+    const { guards } = lf.options
+    const elements = graph.getSelectElements(false)
+    const enabledClone = guards && guards.beforeClone ? guards.beforeClone(elements) : true
+    if (!enabledClone || (elements.nodes.length === 0 && elements.edges.length === 0)) {
+      selected = null
+      return true
+    }
+    const base_nodes = elements.nodes.filter(
+      (node: any) => node.type === WorkflowType.Start || node.type === WorkflowType.Base
+    )
+    if (base_nodes.length > 0) {
+      MsgError(base_nodes[0]?.properties?.stepName + t('views.applicationWorkflow.tip.cannotCopy'))
+      return
+    }
+    selected = elements
+    selected.nodes.forEach((node: any) => translationNodeData(node, TRANSLATION_DISTANCE))
+    selected.edges.forEach((edge: any) => translationEdgeData(edge, TRANSLATION_DISTANCE))
+    MsgSuccess(t('views.applicationWorkflow.tip.copyError'))
+    return false
+  }
+  const paste_node = () => {
+    if (!keyboardOptions?.enabled) return true
+    if (graph.textEditElement) return true
+    if (selected && (selected.nodes || selected.edges)) {
+      lf.clearSelectElements()
+      const addElements = lf.addElements(selected, CHILDREN_TRANSLATION_DISTANCE)
+      if (!addElements) return true
+      addElements.nodes.forEach((node) => lf.selectElementById(node.id, true))
+      addElements.edges.forEach((edge) => lf.selectElementById(edge.id, true))
+      selected.nodes.forEach((node: any) => translationNodeData(node, TRANSLATION_DISTANCE))
+      selected.edges.forEach((edge: any) => translationEdgeData(edge, TRANSLATION_DISTANCE))
+      CHILDREN_TRANSLATION_DISTANCE = CHILDREN_TRANSLATION_DISTANCE + TRANSLATION_DISTANCE
+    }
+    return false
+  }
+  const delete_node = () => {
+    const elements = graph.getSelectElements(true)
+    lf.clearSelectElements()
+    if (elements.nodes.length == 0 && elements.edges.length == 0) {
+      return
+    }
+    if (elements.edges.length > 0 && elements.nodes.length == 0) {
+      elements.edges.forEach((edge: any) => lf.deleteEdge(edge.id))
+      return
+    }
+    const nodes = elements.nodes.filter((node) => ['start-node', 'base-node'].includes(node.type))
+    if (nodes.length > 0) {
+      MsgError(`${nodes[0].properties?.stepName}${t('views.applicationWorkflow.delete.deleteMessage')}`)
+      return
+    }
+    MsgConfirm(t('common.tip'), t('views.applicationWorkflow.delete.confirmTitle'), {
+      confirmButtonText: t('common.confirm'),
+      confirmButtonClass: 'danger'
+    }).then(() => {
+      if (!keyboardOptions?.enabled) return true
+      if (graph.textEditElement) return true
+
+      elements.edges.forEach((edge: any) => lf.deleteEdge(edge.id))
+      elements.nodes.forEach((node: any) => lf.deleteNode(node.id))
+    })
+
+    return false
+  }
+  graph.eventCenter.on('copy_node', copy_node)
+  // 复制
+  keyboard.on(['cmd + c', 'ctrl + c'], copy_node)
+  // 粘贴
+  keyboard.on(['cmd + v', 'ctrl + v'], paste_node)
+  // undo
+  keyboard.on(['cmd + z', 'ctrl + z'], () => {
+    // if (!keyboardOptions?.enabled) return true
+    // if (graph.textEditElement) return true
+    // lf.undo()
+    // return false
+  })
+  // redo
+  keyboard.on(['cmd + y', 'ctrl + y'], () => {
+    if (!keyboardOptions?.enabled) return true
+    if (graph.textEditElement) return true
+    lf.redo()
+    return false
+  })
+  // delete
+  keyboard.on(['backspace'], delete_node)
+}
diff --git a/ui/src/workflow/common/teleport.ts b/ui/src/workflow/common/teleport.ts
new file mode 100644
index 000000000..6f88b414f
--- /dev/null
+++ b/ui/src/workflow/common/teleport.ts
@@ -0,0 +1,80 @@
+import { BaseEdgeModel, BaseNodeModel, GraphModel } from '@logicflow/core'
+import { defineComponent, h, reactive, isVue3, Teleport, markRaw, Fragment } from 'vue-demi'
+
+let active = false
+const items = reactive<{ [key: string]: any }>({})
+
+export function connect(
+  id: string,
+  component: any,
+  container: HTMLDivElement,
+  node: BaseNodeModel | BaseEdgeModel,
+  graph: GraphModel,
+  get_props?: any
+) {
+  if (!get_props) {
+    get_props = (node: BaseNodeModel | BaseEdgeModel, graph: GraphModel) => {
+      return { nodeModel: node, graph }
+    }
+  }
+  if (active) {
+    items[id] = markRaw(
+      defineComponent({
+        render: () => h(Teleport, { to: container } as any, [h(component, get_props(node, graph))]),
+        provide: () => ({
+          getNode: () => node,
+          getGraph: () => graph
+        })
+      })
+    )
+  }
+}
+
+export function disconnect(id: string) {
+  if (active) {
+    delete items[id]
+  }
+}
+
+export function isActive() {
+  return active
+}
+
+export function getTeleport(): any {
+  if (!isVue3) {
+    throw new Error('teleport is only available in Vue3')
+  }
+  active = true
+
+  return defineComponent({
+    props: {
+      flowId: {
+        type: String,
+        required: true
+      }
+    },
+    setup(props) {
+      return () => {
+        const children: Record<string, any>[] = []
+        Object.keys(items).forEach((id) => {
+          // https://github.com/didi/LogicFlow/issues/1768
+          // 多个不同的VueNodeView都会connect注册到items中，因此items存储了可能有多个flowId流程图的数据
+          // 当使用多个LogicFlow时，会创建多个flowId + 同时使用KeepAlive
+          // 每一次items改变，会触发不同flowId持有的setup()执行，由于每次setup()执行就是遍历items，因此存在多次重复渲染元素的问题
+          // 即items[0]会在Page1的setup()执行，items[0]也会在Page2的setup()执行，从而生成两个items[0]
+
+          // 比对当前界面显示的flowId，只更新items[当前页面flowId:nodeId]的数据
+          // 比如items[0]属于Page1的数据，那么Page2无论active=true/false，都无法执行items[0]
+          if (id.startsWith(props.flowId)) {
+            children.push(items[id])
+          }
+        })
+        return h(
+          Fragment,
+          {},
+          children.map((item) => h(item))
+        )
+      }
+    }
+  })
+}
diff --git a/ui/src/workflow/common/validate.ts b/ui/src/workflow/common/validate.ts
new file mode 100644
index 000000000..cc9378bc3
--- /dev/null
+++ b/ui/src/workflow/common/validate.ts
@@ -0,0 +1,150 @@
+import { WorkflowType } from '@/enums/workflow'
+import { t } from '@/locales'
+
+const end_nodes: Array<string> = [
+  WorkflowType.AiChat,
+  WorkflowType.Reply,
+  WorkflowType.FunctionLib,
+  WorkflowType.FunctionLibCustom,
+  WorkflowType.ImageUnderstandNode,
+  WorkflowType.Application,
+  WorkflowType.SpeechToTextNode,
+  WorkflowType.TextToSpeechNode,
+    WorkflowType.ImageGenerateNode,
+]
+export class WorkFlowInstance {
+  nodes
+  edges
+  workFlowNodes: Array<any>
+  constructor(workflow: { nodes: Array<any>; edges: Array<any> }) {
+    this.nodes = workflow.nodes
+    this.edges = workflow.edges
+    this.workFlowNodes = []
+  }
+  /**
+   * 校验开始节点
+   */
+  private is_valid_start_node() {
+    const start_node_list = this.nodes.filter((item) => item.id === WorkflowType.Start)
+    if (start_node_list.length == 0) {
+      throw t('views.applicationWorkflow.validate.startNodeRequired')
+    } else if (start_node_list.length > 1) {
+      throw t('views.applicationWorkflow.validate.startNodeOnly')
+    }
+  }
+  /**
+   * 校验基本信息节点
+   */
+  private is_valid_base_node() {
+    const start_node_list = this.nodes.filter((item) => item.id === WorkflowType.Base)
+    if (start_node_list.length == 0) {
+      throw t('views.applicationWorkflow.validate.baseNodeRequired')
+    } else if (start_node_list.length > 1) {
+      throw t('views.applicationWorkflow.validate.baseNodeOnly')
+    }
+  }
+  /**
+   * 校验节点
+   */
+  is_valid() {
+    this.is_valid_start_node()
+    this.is_valid_base_node()
+    this.is_valid_work_flow()
+    this.is_valid_nodes()
+  }
+
+  /**
+   * 获取开始节点
+   * @returns
+   */
+  get_start_node() {
+    const start_node_list = this.nodes.filter((item) => item.id === WorkflowType.Start)
+    return start_node_list[0]
+  }
+  /**
+   * 获取基本节点
+   * @returns 基本节点
+   */
+  get_base_node() {
+    const base_node_list = this.nodes.filter((item) => item.id === WorkflowType.Base)
+    return base_node_list[0]
+  }
+
+  /**
+   * 校验工作流
+   * @param up_node 上一个节点
+   */
+  private _is_valid_work_flow(up_node?: any) {
+    if (!up_node) {
+      up_node = this.get_start_node()
+    }
+    this.workFlowNodes.push(up_node)
+    this.is_valid_node(up_node)
+    const next_nodes = this.get_next_nodes(up_node)
+    for (const next_node of next_nodes) {
+      this._is_valid_work_flow(next_node)
+    }
+  }
+  private is_valid_work_flow() {
+    this.workFlowNodes = []
+    this._is_valid_work_flow()
+    const notInWorkFlowNodes = this.nodes
+      .filter((node: any) => node.id !== WorkflowType.Start && node.id !== WorkflowType.Base)
+      .filter((node) => !this.workFlowNodes.includes(node))
+    if (notInWorkFlowNodes.length > 0) {
+      throw `${t('views.applicationWorkflow.validate.notInWorkFlowNode')}:${notInWorkFlowNodes.map((node) => node.properties.stepName).join('，')}`
+    }
+    this.workFlowNodes = []
+  }
+  /**
+   * 获取流程下一个节点列表
+   * @param node 节点
+   * @returns 节点列表
+   */
+  private get_next_nodes(node: any) {
+    const edge_list = this.edges.filter((edge) => edge.sourceNodeId == node.id)
+    const node_list = edge_list
+      .map((edge) => this.nodes.filter((node) => node.id == edge.targetNodeId))
+      .reduce((x, y) => [...x, ...y], [])
+    if (node_list.length == 0 && !end_nodes.includes(node.type)) {
+      throw t('views.applicationWorkflow.validate.noNextNode')
+    }
+    return node_list
+  }
+  private is_valid_nodes() {
+    for (const node of this.nodes) {
+      if (node.type !== WorkflowType.Base && node.type !== WorkflowType.Start) {
+        if (!this.edges.some((edge) => edge.targetNodeId === node.id)) {
+          throw `${t('views.applicationWorkflow.validate.notInWorkFlowNode')}:${node.properties.stepName}`
+        }
+      }
+    }
+  }
+  /**
+   * 校验节点
+   * @param node 节点
+   */
+  private is_valid_node(node: any) {
+    if (node.properties.status && node.properties.status === 500) {
+      throw `${node.properties.stepName} ${t('views.applicationWorkflow.validate.nodeUnavailable')}`
+    }
+    if (node.type === WorkflowType.Condition) {
+      const branch_list = node.properties.node_data.branch
+      for (const branch of branch_list) {
+        const source_anchor_id = `${node.id}_${branch.id}_right`
+        const edge_list = this.edges.filter((edge) => edge.sourceAnchorId == source_anchor_id)
+        if (edge_list.length == 0) {
+          throw `${node.properties.stepName} ${t('views.applicationWorkflow.validate.needConnect1')}${branch.type}${t('views.applicationWorkflow.validate.needConnect2')}`
+        }
+      }
+    } else {
+      const edge_list = this.edges.filter((edge) => edge.sourceNodeId == node.id)
+      if (edge_list.length == 0 && !end_nodes.includes(node.type)) {
+        throw `${node.properties.stepName} ${t('views.applicationWorkflow.validate.cannotEndNode')}`
+      }
+    }
+    if (node.properties.status && node.properties.status !== 200) {
+      throw `${node.properties.stepName} ${t('views.applicationWorkflow.validate.nodeUnavailable')}`
+    }
+  }
+}
diff --git a/ui/src/workflow/icons/ai-chat-node-icon.vue b/ui/src/workflow/icons/ai-chat-node-icon.vue
new file mode 100644
index 000000000..24e6d468e
--- /dev/null
+++ b/ui/src/workflow/icons/ai-chat-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar class="avatar-gradient" shape="square">
+    <img src="@/assets/icon_robot.svg" style="width: 75%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow/icons/application-node-icon.vue b/ui/src/workflow/icons/application-node-icon.vue
new file mode 100644
index 000000000..347588b51
--- /dev/null
+++ b/ui/src/workflow/icons/application-node-icon.vue
@@ -0,0 +1,28 @@
+<template>
+  <AppAvatar
+    v-if="isAppIcon(item?.icon)"
+    shape="square"
+    :size="32"
+    style="background: none"
+    class="mr-8"
+  >
+    <img :src="item?.icon" alt="" />
+  </AppAvatar>
+  <AppAvatar
+    v-else-if="item?.name"
+    :name="item?.name"
+    pinyinColor
+    shape="square"
+    :size="32"
+    class="mr-8"
+  />
+</template>
+<script setup lang="ts">
+import { isAppIcon } from '@/utils/common'
+const props = defineProps<{
+  item: {
+    name: string
+    icon: string
+  }
+}>()
+</script>
diff --git a/ui/src/workflow/icons/base-node-icon.vue b/ui/src/workflow/icons/base-node-icon.vue
new file mode 100644
index 000000000..a0b5d2752
--- /dev/null
+++ b/ui/src/workflow/icons/base-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #FF8800;">
+    <img src="@/assets/icon_hi.svg" style="width: 75%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow/icons/condition-node-icon.vue b/ui/src/workflow/icons/condition-node-icon.vue
new file mode 100644
index 000000000..6deed3108
--- /dev/null
+++ b/ui/src/workflow/icons/condition-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #14C0FF;">
+    <img src="@/assets/icon_condition.svg" style="width: 75%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow/icons/document-extract-node-icon.vue b/ui/src/workflow/icons/document-extract-node-icon.vue
new file mode 100644
index 000000000..7b81719c6
--- /dev/null
+++ b/ui/src/workflow/icons/document-extract-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" class="avatar-blue">
+    <img src="@/assets/icon_docs.svg" style="width: 65%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow/icons/form-node-icon.vue b/ui/src/workflow/icons/form-node-icon.vue
new file mode 100644
index 000000000..40f6ea77f
--- /dev/null
+++ b/ui/src/workflow/icons/form-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #34c724">
+    <img src="@/assets/icon_form.svg" style="width: 75%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow/icons/function-lib-node-icon.vue b/ui/src/workflow/icons/function-lib-node-icon.vue
new file mode 100644
index 000000000..e8e6f9910
--- /dev/null
+++ b/ui/src/workflow/icons/function-lib-node-icon.vue
@@ -0,0 +1,25 @@
+<template>
+  <AppAvatar
+    v-if="isAppIcon(item?.icon)"
+    shape="square"
+    :size="32"
+    style="background: none"
+    class="mr-8"
+  >
+    <img :src="item?.icon" alt="" />
+  </AppAvatar>
+  <AppAvatar v-else shape="square" style="background: #34c724">
+    <img src="@/assets/icon_function_outlined.svg" style="width: 75%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts">
+import { isAppIcon } from '@/utils/common'
+const props = defineProps<{
+  item?: {
+    name: string
+    icon: string
+  }
+}>()
+</script>
+
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow/icons/function-node-icon.vue b/ui/src/workflow/icons/function-node-icon.vue
new file mode 100644
index 000000000..e6e84a801
--- /dev/null
+++ b/ui/src/workflow/icons/function-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #34c724">
+    <img src="@/assets/icon_function_outlined.svg" style="width: 75%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow/icons/global-icon.vue b/ui/src/workflow/icons/global-icon.vue
new file mode 100644
index 000000000..5d476dc74
--- /dev/null
+++ b/ui/src/workflow/icons/global-icon.vue
@@ -0,0 +1,4 @@
+<template>
+  <img src="@/assets/icon_globe_color.svg" style="width: 18px" alt="" />
+</template>
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow/icons/image-generate-node-icon.vue b/ui/src/workflow/icons/image-generate-node-icon.vue
new file mode 100644
index 000000000..64ca192b1
--- /dev/null
+++ b/ui/src/workflow/icons/image-generate-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #FF8800;">
+    <img src="@/assets/icon_text-image.svg" style="width: 65%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow/icons/image-understand-node-icon.vue b/ui/src/workflow/icons/image-understand-node-icon.vue
new file mode 100644
index 000000000..6f58417d2
--- /dev/null
+++ b/ui/src/workflow/icons/image-understand-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #14C0FF;">
+    <img src="@/assets/icon_image.svg" style="width: 65%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow/icons/mcp-node-icon.vue b/ui/src/workflow/icons/mcp-node-icon.vue
new file mode 100644
index 000000000..7dc36f22c
--- /dev/null
+++ b/ui/src/workflow/icons/mcp-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #34c724">
+    <img src="@/assets/icon_mcp.svg" style="width: 65%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow/icons/question-node-icon.vue b/ui/src/workflow/icons/question-node-icon.vue
new file mode 100644
index 000000000..74ab30d0f
--- /dev/null
+++ b/ui/src/workflow/icons/question-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #34C724">
+    <img src="@/assets/icon_setting.svg" style="width: 65%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow/icons/reply-node-icon.vue b/ui/src/workflow/icons/reply-node-icon.vue
new file mode 100644
index 000000000..07b2ed56f
--- /dev/null
+++ b/ui/src/workflow/icons/reply-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #FF8800">
+    <img src="@/assets/icon_reply.svg" style="width: 65%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow/icons/reranker-node-icon.vue b/ui/src/workflow/icons/reranker-node-icon.vue
new file mode 100644
index 000000000..70c8f4842
--- /dev/null
+++ b/ui/src/workflow/icons/reranker-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #7F3BF5">
+    <img src="@/assets/icon_reranker.svg" style="width: 65%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow/icons/search-dataset-node-icon.vue b/ui/src/workflow/icons/search-dataset-node-icon.vue
new file mode 100644
index 000000000..d2b2302b9
--- /dev/null
+++ b/ui/src/workflow/icons/search-dataset-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" class="avatar-blue">
+    <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow/icons/speech-to-text-node-icon.vue b/ui/src/workflow/icons/speech-to-text-node-icon.vue
new file mode 100644
index 000000000..37cc26c3b
--- /dev/null
+++ b/ui/src/workflow/icons/speech-to-text-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #ff8800">
+    <img src="@/assets/icon_speech_to_text.svg" style="width: 100%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow/icons/start-node-icon.vue b/ui/src/workflow/icons/start-node-icon.vue
new file mode 100644
index 000000000..9a01ac96c
--- /dev/null
+++ b/ui/src/workflow/icons/start-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #D136D1;">
+    <img src="@/assets/icon_start.svg" style="width: 75%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow/icons/text-to-speech-node-icon.vue b/ui/src/workflow/icons/text-to-speech-node-icon.vue
new file mode 100644
index 000000000..e48a06857
--- /dev/null
+++ b/ui/src/workflow/icons/text-to-speech-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" style="background: #14c0ff">
+    <img src="@/assets/icon_text_to_speech.svg" style="width: 100%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow/icons/utils.ts b/ui/src/workflow/icons/utils.ts
new file mode 100644
index 000000000..b667cdc6e
--- /dev/null
+++ b/ui/src/workflow/icons/utils.ts
@@ -0,0 +1,5 @@
+const icons: any = import.meta.glob('./**.vue', { eager: true })
+export function iconComponent(name: string) {
+  const url = `./${name}.vue`
+  return icons[url]?.default || null
+}
diff --git a/ui/src/workflow/icons/variable-assign-node-icon.vue b/ui/src/workflow/icons/variable-assign-node-icon.vue
new file mode 100644
index 000000000..a7b580ff3
--- /dev/null
+++ b/ui/src/workflow/icons/variable-assign-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <AppAvatar shape="square" class="avatar-blue">
+    <img src="@/assets/icon_assigner.svg" style="width: 65%" alt="" />
+  </AppAvatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow/index.vue b/ui/src/workflow/index.vue
new file mode 100644
index 000000000..03361bcec
--- /dev/null
+++ b/ui/src/workflow/index.vue
@@ -0,0 +1,178 @@
+<template>
+  <div className="workflow-app" id="container"></div>
+  <!-- 辅助工具栏 -->
+  <Control class="workflow-control" v-if="lf" :lf="lf"></Control>
+  <TeleportContainer :flow-id="flowId" />
+</template>
+<script setup lang="ts">
+import LogicFlow from '@logicflow/core'
+import { ref, onMounted, computed } from 'vue'
+import AppEdge from './common/edge'
+import Control from './common/NodeControl.vue'
+import { baseNodes } from '@/workflow/common/data'
+import '@logicflow/extension/lib/style/index.css'
+import '@logicflow/core/dist/style/index.css'
+import { initDefaultShortcut } from '@/workflow/common/shortcut'
+import Dagre from '@/workflow/plugins/dagre'
+import { getTeleport } from '@/workflow/common/teleport'
+const nodes: any = import.meta.glob('./nodes/**/index.ts', { eager: true })
+
+defineOptions({ name: 'WorkFlow' })
+const TeleportContainer = getTeleport()
+const flowId = ref('')
+type ShapeItem = {
+  type?: string
+  text?: string
+  icon?: string
+  label?: string
+  className?: string
+  disabled?: boolean
+  properties?: Record<string, any>
+  callback?: (lf: LogicFlow, container?: HTMLElement) => void
+}
+
+const props = defineProps({
+  data: Object || null
+})
+
+const defaultData = {
+  nodes: [...baseNodes]
+}
+const graphData = computed({
+  get: () => {
+    if (props.data) {
+      return props.data
+    } else {
+      return defaultData
+    }
+  },
+  set: (value) => {
+    return value
+  }
+})
+
+const lf = ref()
+onMounted(() => {
+  renderGraphData()
+})
+const render = (data: any) => {
+  lf.value.render(data)
+}
+const renderGraphData = (data?: any) => {
+  const container: any = document.querySelector('#container')
+  if (container) {
+    lf.value = new LogicFlow({
+      plugins: [Dagre],
+      textEdit: false,
+      adjustEdge: false,
+      adjustEdgeStartAndEnd: false,
+      background: {
+        backgroundColor: '#f5f6f7'
+      },
+      grid: {
+        size: 10,
+        type: 'dot',
+        config: {
+          color: '#DEE0E3',
+          thickness: 1
+        }
+      },
+      keyboard: {
+        enabled: true
+      },
+      isSilentMode: false,
+      container: container
+    })
+    lf.value.setTheme({
+      bezier: {
+        stroke: '#afafaf',
+        strokeWidth: 1
+      }
+    })
+    lf.value.on('graph:rendered', () => {
+      flowId.value = lf.value.graphModel.flowId
+    })
+    initDefaultShortcut(lf.value, lf.value.graphModel)
+    lf.value.batchRegister([...Object.keys(nodes).map((key) => nodes[key].default), AppEdge])
+    lf.value.setDefaultEdgeType('app-edge')
+
+    lf.value.render(data ? data : {})
+
+    lf.value.graphModel.eventCenter.on('delete_edge', (id_list: Array<string>) => {
+      id_list.forEach((id: string) => {
+        lf.value.deleteEdge(id)
+      })
+    })
+    lf.value.graphModel.eventCenter.on('anchor:drop', (data: any) => {
+      // 清除当前节点下面的子节点的所有缓存
+      data.nodeModel.clear_next_node_field(false)
+    })
+
+    setTimeout(() => {
+      lf.value?.fitView()
+    }, 500)
+  }
+}
+const validate = () => {
+  return Promise.all(lf.value.graphModel.nodes.map((element: any) => element?.validate?.()))
+}
+const getGraphData = () => {
+  return lf.value.getGraphData()
+}
+
+const onmousedown = (shapeItem: ShapeItem) => {
+  if (shapeItem.type) {
+    lf.value.dnd.startDrag({
+      type: shapeItem.type,
+      properties: { ...shapeItem.properties }
+    })
+  }
+  if (shapeItem.callback) {
+    shapeItem.callback(lf.value)
+  }
+}
+const addNode = (shapeItem: ShapeItem) => {
+  lf.value.clearSelectElements()
+  const { virtualRectCenterPositionX, virtualRectCenterPositionY } =
+    lf.value.graphModel.getVirtualRectSize()
+  const newNode = lf.value.graphModel.addNode({
+    type: shapeItem.type,
+    properties: shapeItem.properties,
+    x: virtualRectCenterPositionX,
+    y: virtualRectCenterPositionY - lf.value.graphModel.height / 2
+  })
+  newNode.isSelected = true
+  newNode.isHovered = true
+  lf.value.toFront(newNode.id)
+}
+
+const clearGraphData = () => {
+  return lf.value.clearData()
+}
+
+defineExpose({
+  onmousedown,
+  validate,
+  getGraphData,
+  addNode,
+  clearGraphData,
+  renderGraphData,
+  render
+})
+</script>
+<style lang="scss">
+.workflow-app {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.workflow-control {
+  position: absolute;
+  bottom: 24px;
+  left: 24px;
+  z-index: 2;
+}
+.lf-drag-able {
+  cursor: pointer;
+}
+</style>
diff --git a/ui/src/workflow/nodes/ai-chat-node/index.ts b/ui/src/workflow/nodes/ai-chat-node/index.ts
new file mode 100644
index 000000000..b226719e1
--- /dev/null
+++ b/ui/src/workflow/nodes/ai-chat-node/index.ts
@@ -0,0 +1,12 @@
+import ChatNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class ChatNode extends AppNode {
+  constructor(props: any) {
+    super(props, ChatNodeVue)
+  }
+}
+export default {
+  type: 'ai-chat-node',
+  model: AppNodeModel,
+  view: ChatNode
+}
diff --git a/ui/src/workflow/nodes/ai-chat-node/index.vue b/ui/src/workflow/nodes/ai-chat-node/index.vue
new file mode 100644
index 000000000..8b4a6aeb9
--- /dev/null
+++ b/ui/src/workflow/nodes/ai-chat-node/index.vue
@@ -0,0 +1,338 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <h5 class="title-decoration-1 mb-8">{{ $t('views.applicationWorkflow.nodeSetting') }}</h5>
+    <el-card shadow="never" class="card-never" style="--el-card-padding: 12px">
+      <el-form
+        @submit.prevent
+        :model="chat_data"
+        label-position="top"
+        require-asterisk-position="right"
+        label-width="auto"
+        ref="aiChatNodeFormRef"
+        hide-required-asterisk
+      >
+        <el-form-item
+          :label="$t('views.application.applicationForm.form.aiModel.label')"
+          prop="model_id"
+          :rules="{
+            required: true,
+            message: $t('views.application.applicationForm.form.aiModel.placeholder'),
+            trigger: 'change'
+          }"
+        >
+          <template #label>
+            <div class="flex-between w-full">
+              <div>
+                <span
+                  >{{ $t('views.application.applicationForm.form.aiModel.label')
+                  }}<span class="danger">*</span></span
+                >
+              </div>
+
+              <el-button
+                :disabled="!chat_data.model_id"
+                type="primary"
+                link
+                @click="openAIParamSettingDialog(chat_data.model_id)"
+                @refreshForm="refreshParam"
+              >
+                <el-icon><Setting /></el-icon>
+              </el-button>
+            </div>
+          </template>
+          <ModelSelect
+            @change="model_change"
+            @wheel="wheel"
+            :teleported="false"
+            v-model="chat_data.model_id"
+            :placeholder="$t('views.application.applicationForm.form.aiModel.placeholder')"
+            :options="modelOptions"
+            @submitModel="getModel"
+            showFooter
+            :model-type="'LLM'"
+          ></ModelSelect>
+        </el-form-item>
+
+        <el-form-item :label="$t('views.application.applicationForm.form.roleSettings.label')">
+          <MdEditorMagnify
+            :title="$t('views.application.applicationForm.form.roleSettings.label')"
+            v-model="chat_data.system"
+            style="height: 100px"
+            @submitDialog="submitSystemDialog"
+            :placeholder="$t('views.application.applicationForm.form.roleSettings.label')"
+          />
+        </el-form-item>
+        <el-form-item
+          :label="$t('views.application.applicationForm.form.prompt.label')"
+          prop="prompt"
+          :rules="{
+            required: true,
+            message: $t('views.application.applicationForm.form.prompt.requiredMessage'),
+            trigger: 'blur'
+          }"
+        >
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span
+                  >{{ $t('views.application.applicationForm.form.prompt.label')
+                  }}<span class="danger">*</span></span
+                >
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content
+                  >{{ $t('views.application.applicationForm.form.prompt.tooltip') }}
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <MdEditorMagnify
+            @wheel="wheel"
+            :title="$t('views.application.applicationForm.form.prompt.label')"
+            v-model="chat_data.prompt"
+            style="height: 150px"
+            @submitDialog="submitDialog"
+          />
+        </el-form-item>
+        <el-form-item :label="$t('views.application.applicationForm.form.historyRecord.label')">
+          <template #label>
+            <div class="flex-between">
+              <div>{{ $t('views.application.applicationForm.form.historyRecord.label') }}</div>
+              <el-select v-model="chat_data.dialogue_type" type="small" style="width: 100px">
+                <el-option :label="$t('views.applicationWorkflow.node')" value="NODE" />
+                <el-option :label="$t('views.applicationWorkflow.workflow')" value="WORKFLOW" />
+              </el-select>
+            </div>
+          </template>
+          <el-input-number
+            v-model="chat_data.dialogue_number"
+            :min="0"
+            :value-on-clear="0"
+            controls-position="right"
+            class="w-full"
+            :step="1"
+            :step-strictly="true"
+          />
+        </el-form-item>
+
+        <div class="flex-between mb-16">
+          <div class="lighter">{{ $t('views.applicationWorkflow.nodes.mcpNode.tool') }}</div>
+          <el-button type="primary" link @click="openMcpServersDialog" @refreshForm="refreshParam">
+            <el-icon><Setting /></el-icon>
+          </el-button>
+        </div>
+
+        <el-form-item @click.prevent>
+          <template #label>
+            <div class="flex-between w-full">
+              <div>
+                <span>{{
+                  $t('views.application.applicationForm.form.reasoningContent.label')
+                }}</span>
+              </div>
+              <el-button
+                type="primary"
+                link
+                @click="openReasoningParamSettingDialog"
+                @refreshForm="refreshParam"
+              >
+                <el-icon><Setting /></el-icon>
+              </el-button>
+            </div>
+          </template>
+          <el-switch size="small" v-model="chat_data.model_setting.reasoning_content_enable" />
+        </el-form-item>
+        <el-form-item @click.prevent>
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span>{{
+                  $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
+                }}</span>
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content>
+                  {{ $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.tooltip') }}
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <el-switch size="small" v-model="chat_data.is_result" />
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshParam" />
+    <ReasoningParamSettingDialog
+      ref="ReasoningParamSettingDialogRef"
+      @refresh="submitReasoningDialog"
+    />
+    <McpServersDialog ref="mcpServersDialogRef" @refresh="submitMcpServersDialog" />
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { cloneDeep, set, groupBy } from 'lodash'
+import { app } from '@/main'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import type { FormInstance } from 'element-plus'
+import { ref, computed, onMounted } from 'vue'
+import applicationApi from '@/api/application'
+import useStore from '@/stores'
+import { isLastNode } from '@/workflow/common/data'
+import AIModeParamSettingDialog from '@/views/application/component/AIModeParamSettingDialog.vue'
+import { t } from '@/locales'
+import ReasoningParamSettingDialog from '@/views/application/component/ReasoningParamSettingDialog.vue'
+import McpServersDialog from '@/views/application/component/McpServersDialog.vue'
+const { model } = useStore()
+
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+
+function submitSystemDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'system', val)
+}
+
+function submitDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'prompt', val)
+}
+
+const model_change = (model_id?: string) => {
+  if (model_id) {
+    AIModeParamSettingDialogRef.value?.reset_default(model_id, id)
+  } else {
+    refreshParam({})
+  }
+}
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+
+// @ts-ignore
+const defaultPrompt = `${t('views.applicationWorkflow.nodes.aiChatNode.defaultPrompt')}：
+{{${t('views.applicationWorkflow.nodes.searchDatasetNode.label')}.data}}
+${t('views.problem.title')}：
+{{${t('views.applicationWorkflow.nodes.startNode.label')}.question}}`
+
+const form = {
+  model_id: '',
+  system: '',
+  prompt: defaultPrompt,
+  dialogue_number: 1,
+  is_result: false,
+  temperature: null,
+  max_tokens: null,
+  dialogue_type: 'WORKFLOW',
+  model_setting: {
+    reasoning_content_start: '<think>',
+    reasoning_content_end: '</think>',
+    reasoning_content_enable: false
+  }
+}
+
+const chat_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      if (!props.nodeModel.properties.node_data.model_setting) {
+        set(props.nodeModel.properties.node_data, 'model_setting', {
+          reasoning_content_start: '<think>',
+          reasoning_content_end: '</think>',
+          reasoning_content_enable: false
+        })
+      }
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+const props = defineProps<{ nodeModel: any }>()
+
+const aiChatNodeFormRef = ref<FormInstance>()
+
+const modelOptions = ref<any>(null)
+const AIModeParamSettingDialogRef = ref<InstanceType<typeof AIModeParamSettingDialog>>()
+const ReasoningParamSettingDialogRef = ref<InstanceType<typeof ReasoningParamSettingDialog>>()
+const validate = () => {
+  return aiChatNodeFormRef.value?.validate().catch((err) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+function getModel() {
+  if (id) {
+    applicationApi.getApplicationModel(id).then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  } else {
+    model.asyncGetModel().then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  }
+}
+
+const openAIParamSettingDialog = (modelId: string) => {
+  if (modelId) {
+    AIModeParamSettingDialogRef.value?.open(modelId, id, chat_data.value.model_params_setting)
+  }
+}
+
+const openReasoningParamSettingDialog = () => {
+  ReasoningParamSettingDialogRef.value?.open(chat_data.value.model_setting)
+}
+
+function refreshParam(data: any) {
+  set(props.nodeModel.properties.node_data, 'model_params_setting', data)
+}
+
+function submitReasoningDialog(val: any) {
+  let model_setting = cloneDeep(props.nodeModel.properties.node_data.model_setting)
+  model_setting = {
+    ...model_setting,
+    ...val
+  }
+
+  set(props.nodeModel.properties.node_data, 'model_setting', model_setting)
+}
+
+const mcpServersDialogRef = ref()
+function openMcpServersDialog() {
+  const config = {
+    mcp_servers: chat_data.value.mcp_servers,
+    mcp_enable: chat_data.value.mcp_enable
+  }
+  mcpServersDialogRef.value.open(config)
+}
+
+function submitMcpServersDialog(config: any) {
+  set(props.nodeModel.properties.node_data, 'mcp_servers', config.mcp_servers)
+  set(props.nodeModel.properties.node_data, 'mcp_enable', config.mcp_enable)
+}
+
+onMounted(() => {
+  getModel()
+  if (typeof props.nodeModel.properties.node_data?.is_result === 'undefined') {
+    if (isLastNode(props.nodeModel)) {
+      set(props.nodeModel.properties.node_data, 'is_result', true)
+    }
+  }
+  set(props.nodeModel, 'validate', validate)
+  if (!chat_data.value.dialogue_type) {
+    chat_data.value.dialogue_type = 'WORKFLOW'
+  }
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/workflow/nodes/application-node/index.ts b/ui/src/workflow/nodes/application-node/index.ts
new file mode 100644
index 000000000..6292ab5df
--- /dev/null
+++ b/ui/src/workflow/nodes/application-node/index.ts
@@ -0,0 +1,12 @@
+import ChatNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class ChatNode extends AppNode {
+  constructor(props: any) {
+    super(props, ChatNodeVue)
+  }
+}
+export default {
+  type: 'application-node',
+  model: AppNodeModel,
+  view: ChatNode
+}
diff --git a/ui/src/workflow/nodes/application-node/index.vue b/ui/src/workflow/nodes/application-node/index.vue
new file mode 100644
index 000000000..4fc9fba54
--- /dev/null
+++ b/ui/src/workflow/nodes/application-node/index.vue
@@ -0,0 +1,317 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <h5 class="title-decoration-1 mb-8">{{ $t('views.applicationWorkflow.nodeSetting') }}</h5>
+    <el-card shadow="never" class="card-never">
+      <el-form
+        @submit.prevent
+        :model="form_data"
+        label-position="top"
+        require-asterisk-position="right"
+        label-width="auto"
+        ref="applicationNodeFormRef"
+      >
+        <el-form-item
+          :label="$t('views.applicationWorkflow.nodes.startNode.question')"
+          prop="question_reference_address"
+          :rules="{
+            message: $t(
+              'views.applicationWorkflow.nodes.searchDatasetNode.searchQuestion.requiredMessage'
+            ),
+            trigger: 'blur',
+            required: true
+          }"
+        >
+          <NodeCascader
+            ref="applicationNodeFormRef"
+            :nodeModel="nodeModel"
+            class="w-full"
+            :placeholder="
+              $t('views.applicationWorkflow.nodes.searchDatasetNode.searchQuestion.placeholder')
+            "
+            v-model="form_data.question_reference_address"
+          />
+        </el-form-item>
+
+        <el-form-item
+          v-if="form_data.hasOwnProperty('document_list') || 'document_list' in form_data"
+          :label="$t('views.problem.relateParagraph.selectDocument')"
+          prop="document_list"
+          :rules="{
+            message: $t('views.log.documentPlaceholder'),
+            trigger: 'blur',
+            required: false
+          }"
+        >
+          <NodeCascader
+            ref="nodeCascaderRef"
+            :nodeModel="nodeModel"
+            class="w-full"
+            :placeholder="$t('views.log.documentPlaceholder')"
+            v-model="form_data.document_list"
+          />
+        </el-form-item>
+
+        <el-form-item
+          v-if="form_data.hasOwnProperty('image_list') || 'image_list' in form_data"
+          :label="$t('views.applicationWorkflow.nodes.imageUnderstandNode.image.label')"
+          prop="image_list"
+          :rules="{
+            message: $t(
+              'views.applicationWorkflow.nodes.imageUnderstandNode.image.requiredMessage'
+            ),
+            trigger: 'blur',
+            required: false
+          }"
+        >
+          <NodeCascader
+            ref="nodeCascaderRef"
+            :nodeModel="nodeModel"
+            class="w-full"
+            :placeholder="
+              $t('views.applicationWorkflow.nodes.imageUnderstandNode.image.requiredMessage')
+            "
+            v-model="form_data.image_list"
+          />
+        </el-form-item>
+
+        <el-form-item
+          v-if="form_data.hasOwnProperty('audio_list') || 'audio_list' in form_data"
+          :label="$t('views.applicationWorkflow.nodes.speechToTextNode.audio.label')"
+          prop="audio_list"
+          :rules="{
+            message: $t('views.applicationWorkflow.nodes.speechToTextNode.audio.placeholder'),
+            trigger: 'blur',
+            required: false
+          }"
+        >
+          <NodeCascader
+            ref="nodeCascaderRef"
+            :nodeModel="nodeModel"
+            class="w-full"
+            :placeholder="$t('views.applicationWorkflow.nodes.speechToTextNode.audio.placeholder')"
+            v-model="form_data.audio_list"
+          />
+        </el-form-item>
+        <div v-for="(field, index) in form_data.api_input_field_list" :key="'api-input-' + index">
+          <el-form-item
+            :label="field.variable"
+            :prop="'api_input_field_list.' + index + '.value'"
+            :rules="[
+              {
+                required: field.is_required,
+                message: `${$t('common.inputPlaceholder')}${field.variable}`,
+                trigger: 'blur'
+              }
+            ]"
+          >
+            <NodeCascader
+              ref="nodeCascaderRef"
+              :nodeModel="nodeModel"
+              class="w-full"
+              :placeholder="
+                $t('views.applicationWorkflow.nodes.searchDatasetNode.searchQuestion.placeholder')
+              "
+              v-model="form_data.api_input_field_list[index].value"
+            />
+          </el-form-item>
+        </div>
+
+        <div v-for="(field, index) in form_data.user_input_field_list" :key="'user-input-' + index">
+          <el-form-item
+            :label="field.label"
+            :prop="'user_input_field_list.' + index + '.value'"
+            :rules="[
+              {
+                required: field.required,
+                message: `${$t('common.inputPlaceholder')}${field.label}`,
+                trigger: 'blur'
+              }
+            ]"
+          >
+            <NodeCascader
+              ref="nodeCascaderRef"
+              :nodeModel="nodeModel"
+              class="w-full"
+              :placeholder="
+                $t('views.applicationWorkflow.nodes.searchDatasetNode.searchQuestion.placeholder')
+              "
+              v-model="form_data.user_input_field_list[index].value"
+            />
+          </el-form-item>
+        </div>
+        <el-form-item
+          :label="$t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')"
+          @click.prevent
+        >
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span>{{
+                  $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
+                }}</span>
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content>
+                  {{ $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.tooltip') }}
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <el-switch size="small" v-model="form_data.is_result" />
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </NodeContainer>
+</template>
+
+<script setup lang="ts">
+import { set, groupBy, create, cloneDeep } from 'lodash'
+import { app } from '@/main'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import { ref, computed, onMounted, onActivated } from 'vue'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
+import type { FormInstance } from 'element-plus'
+import applicationApi from '@/api/application'
+import { isWorkFlow } from '@/utils/application'
+
+const form = {
+  question_reference_address: ['start-node', 'question'],
+  api_input_field_list: [],
+  user_input_field_list: [],
+  document_list: ['start-node', 'document'],
+  image_list: ['start-node', 'image'],
+  audio_list: ['start-node', 'audio']
+}
+
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+
+const applicationNodeFormRef = ref<FormInstance>()
+
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+function handleFileUpload(type: string, isEnabled: boolean) {
+  const listKey = `${type}_list`
+  if (isEnabled) {
+    if (!props.nodeModel.properties.node_data[listKey]) {
+      set(props.nodeModel.properties.node_data, listKey, [])
+    }
+  } else {
+    // eslint-disable-next-line vue/no-mutating-props
+    delete props.nodeModel.properties.node_data[listKey]
+  }
+}
+
+const update_field = () => {
+  if (!props.nodeModel.properties.node_data.application_id) {
+    set(props.nodeModel.properties, 'status', 500)
+    return
+  }
+  applicationApi
+    .getApplicationById(id, props.nodeModel.properties.node_data.application_id)
+    .then((ok) => {
+      const old_api_input_field_list = cloneDeep(
+        props.nodeModel.properties.node_data.api_input_field_list
+      )
+      const old_user_input_field_list = cloneDeep(
+        props.nodeModel.properties.node_data.user_input_field_list
+      )
+      if (isWorkFlow(ok.data.type)) {
+        const nodeData = ok.data.work_flow.nodes[0].properties.node_data
+        const new_api_input_field_list = cloneDeep(
+          ok.data.work_flow.nodes[0].properties.api_input_field_list
+        )
+        const new_user_input_field_list = cloneDeep(
+          ok.data.work_flow.nodes[0].properties.user_input_field_list
+        )
+
+        const merge_api_input_field_list = (new_api_input_field_list || []).map((item: any) => {
+          const find_field = old_api_input_field_list.find(
+            (old_item: any) => old_item.variable == item.variable
+          )
+          if (find_field) {
+            return {
+              ...item,
+              value: find_field.value,
+              label:
+                typeof item.label === 'object' && item.label != null ? item.label.label : item.label
+            }
+          } else {
+            return item
+          }
+        })
+        set(
+          props.nodeModel.properties.node_data,
+          'api_input_field_list',
+          merge_api_input_field_list
+        )
+        const merge_user_input_field_list = (new_user_input_field_list || []).map((item: any) => {
+          const find_field = old_user_input_field_list.find(
+            (old_item: any) => old_item.field == item.field
+          )
+          if (find_field) {
+            return {
+              ...item,
+              value: find_field.value,
+              label:
+                typeof item.label === 'object' && item.label != null ? item.label.label : item.label
+            }
+          } else {
+            return item
+          }
+        })
+        set(
+          props.nodeModel.properties.node_data,
+          'user_input_field_list',
+          merge_user_input_field_list
+        )
+        const fileEnable = nodeData.file_upload_enable
+        const fileUploadSetting = nodeData.file_upload_setting
+        if (fileEnable) {
+          handleFileUpload('document', fileUploadSetting.document)
+          handleFileUpload('image', fileUploadSetting.image)
+          handleFileUpload('audio', fileUploadSetting.audio)
+        } else {
+          ;['document_list', 'image_list', 'audio_list'].forEach((list) => {
+            // eslint-disable-next-line vue/no-mutating-props
+            delete props.nodeModel.properties.node_data[list]
+          })
+        }
+        set(props.nodeModel.properties, 'status', ok.data.id ? 200 : 500)
+      }
+    })
+    .catch((err) => {
+      console.log(err)
+      set(props.nodeModel.properties, 'status', 500)
+    })
+}
+
+const props = defineProps<{ nodeModel: any }>()
+
+const validate = () => {
+  return applicationNodeFormRef.value?.validate().catch((err) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+onMounted(() => {
+  update_field()
+  set(props.nodeModel, 'validate', validate)
+})
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/ui/src/workflow/nodes/base-node/component/ApiFieldFormDialog.vue b/ui/src/workflow/nodes/base-node/component/ApiFieldFormDialog.vue
new file mode 100644
index 000000000..41bc6cabe
--- /dev/null
+++ b/ui/src/workflow/nodes/base-node/component/ApiFieldFormDialog.vue
@@ -0,0 +1,132 @@
+<template>
+  <el-dialog
+    :title="
+      isEdit
+        ? $t('views.template.templateForm.title.editParam')
+        : $t('views.template.templateForm.title.addParam')
+    "
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :before-close="close"
+    append-to-body
+  >
+    <el-form
+      label-position="top"
+      ref="fieldFormRef"
+      :rules="rules"
+      :model="form"
+      require-asterisk-position="right"
+    >
+      <el-form-item :label="$t('dynamicsForm.paramForm.field.label')" prop="variable">
+        <el-input
+          v-model="form.variable"
+          :placeholder="$t('dynamicsForm.paramForm.field.placeholder')"
+          maxlength="64"
+          show-word-limit
+          @blur="form.variable = form.variable.trim()"
+        />
+      </el-form-item>
+
+      <el-form-item :label="$t('dynamicsForm.paramForm.required.label')" @click.prevent>
+        <el-switch size="small" v-model="form.is_required"></el-switch>
+      </el-form-item>
+      <el-form-item
+        :label="$t('dynamicsForm.default.label')"
+        prop="default_value"
+        :rules="{
+          required: form.is_required,
+          message: $t('dynamicsForm.default.placeholder'),
+          trigger: 'blur'
+        }"
+      >
+        <el-input
+          v-model="form.default_value"
+          :placeholder="$t('dynamicsForm.default.placeholder')"
+          @blur="form.name = form.name.trim()"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submit(fieldFormRef)" :loading="loading">
+          {{ isEdit ? $t('common.save') : $t('common.add') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { cloneDeep } from 'lodash'
+import { t } from '@/locales'
+const emit = defineEmits(['refresh'])
+
+const fieldFormRef = ref()
+const loading = ref<boolean>(false)
+const isEdit = ref(false)
+
+const form = ref<any>({
+  name: '',
+  variable: '',
+  type: 'input',
+  is_required: true,
+  assignment_method: 'api_input',
+  optionList: [''],
+  default_value: ''
+})
+
+const rules = reactive({
+  name: [{ required: true, message: t('dynamicsForm.paramForm.name.requiredMessage'), trigger: 'blur' }],
+  variable: [
+    { required: true, message:  t('dynamicsForm.paramForm.field.requiredMessage'), trigger: 'blur' },
+    { pattern: /^[a-zA-Z0-9_]+$/, message: t('dynamicsForm.paramForm.field.requiredMessage2'), trigger: 'blur' }
+  ]
+})
+
+const dialogVisible = ref<boolean>(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      name: '',
+      variable: '',
+      type: 'input',
+      is_required: true,
+      assignment_method: 'api_input',
+      optionList: [''],
+      default_value: ''
+    }
+    isEdit.value = false
+  }
+})
+
+const open = (row: any) => {
+  if (row) {
+    form.value = cloneDeep(row)
+    isEdit.value = true
+  }
+
+  dialogVisible.value = true
+}
+
+const close = () => {
+  dialogVisible.value = false
+  isEdit.value = false
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      emit('refresh', form.value)
+    }
+  })
+}
+
+defineExpose({ open, close })
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue b/ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue
new file mode 100644
index 000000000..c81ebc94f
--- /dev/null
+++ b/ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="flex-between mb-16">
+    <h5 class="lighter">{{ $t('views.template.templateForm.title.apiParamPassing') }}</h5>
+    <el-button link type="primary" @click="openAddDialog()">
+      <el-icon class="mr-4">
+        <Plus />
+      </el-icon>
+      {{ $t('common.add') }}
+    </el-button>
+  </div>
+  <el-table
+    v-if="props.nodeModel.properties.api_input_field_list?.length > 0"
+    :data="props.nodeModel.properties.api_input_field_list"
+    class="mb-16"
+    ref="tableRef"
+    row-key="field"
+  >
+    <el-table-column prop="variable" :label="$t('dynamicsForm.paramForm.field.label')">
+      <template #default="{ row }">
+        <span class="ellipsis-1" :title="row.variable">
+          {{ row.variable }}
+        </span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="default_value" :label="$t('dynamicsForm.default.label')">
+      <template #default="{ row }">
+        <span class="ellipsis-1" :title="row.default_value">
+          {{ row.default_value }}
+        </span>
+      </template>
+    </el-table-column>
+    <el-table-column :label="$t('common.required')">
+      <template #default="{ row }">
+        <div @click.stop>
+          <el-switch disabled size="small" v-model="row.is_required" />
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column :label="$t('common.operation')" align="left" width="90">
+      <template #default="{ row, $index }">
+        <span class="mr-4">
+          <el-tooltip effect="dark" :content="$t('common.modify')" placement="top">
+            <el-button type="primary" text @click.stop="openAddDialog(row, $index)">
+              <el-icon><EditPen /></el-icon>
+            </el-button>
+          </el-tooltip>
+        </span>
+        <el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
+          <el-button type="primary" text @click="deleteField($index)">
+            <el-icon>
+              <Delete />
+            </el-icon>
+          </el-button>
+        </el-tooltip>
+      </template>
+    </el-table-column>
+  </el-table>
+
+  <ApiFieldFormDialog ref="ApiFieldFormDialogRef" @refresh="refreshFieldList" />
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { set } from 'lodash'
+import Sortable from 'sortablejs'
+import ApiFieldFormDialog from './ApiFieldFormDialog.vue'
+import { MsgError } from '@/utils/message'
+import { t } from '@/locales'
+
+const props = defineProps<{ nodeModel: any }>()
+const tableRef = ref()
+const currentIndex = ref(null)
+const ApiFieldFormDialogRef = ref()
+const inputFieldList = ref<any[]>([])
+
+function openAddDialog(data?: any, index?: any) {
+  if (typeof index !== 'undefined') {
+    currentIndex.value = index
+  }
+  ApiFieldFormDialogRef.value.open(data)
+}
+
+function deleteField(index: any) {
+  inputFieldList.value.splice(index, 1)
+  props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+  onDragHandle()
+}
+
+function refreshFieldList(data: any) {
+  for (let i = 0; i < inputFieldList.value.length; i++) {
+    if (inputFieldList.value[i].variable === data.variable && currentIndex.value !== i) {
+      MsgError(t('views.applicationWorkflow.tip.paramErrorMessage') + data.variable)
+      return
+    }
+  }
+  // 查看另一个list又没有重复的
+  let arr = props.nodeModel.properties.user_input_field_list
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i].field === data.variable) {
+      MsgError(t('views.applicationWorkflow.tip.paramErrorMessage') + data.variable)
+      return
+    }
+  }
+  if (currentIndex.value !== null) {
+    inputFieldList.value.splice(currentIndex.value, 1, data)
+  } else {
+    inputFieldList.value.push(data)
+  }
+  currentIndex.value = null
+  ApiFieldFormDialogRef.value.close()
+  props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+  onDragHandle()
+}
+
+// 表格排序拖拽
+function onDragHandle() {
+  if (!tableRef.value) return
+
+  // 获取表格的 tbody DOM 元素
+  const wrapper = tableRef.value.$el as HTMLElement
+  const tbody = wrapper.querySelector('.el-table__body-wrapper tbody')
+  if (!tbody) return
+  // 初始化 Sortable
+  Sortable.create(tbody as HTMLElement, {
+    animation: 150,
+    ghostClass: 'ghost-row',
+    onEnd: (evt) => {
+      if (evt.oldIndex === undefined || evt.newIndex === undefined) return
+      // 更新数据顺序
+      const items = [...inputFieldList.value]
+      const [movedItem] = items.splice(evt.oldIndex, 1)
+      items.splice(evt.newIndex, 0, movedItem)
+      inputFieldList.value = items
+      props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+    }
+  })
+}
+
+onMounted(() => {
+  if (!props.nodeModel.properties.api_input_field_list) {
+    if (props.nodeModel.properties.input_field_list) {
+      props.nodeModel.properties.input_field_list
+        .filter((item: any) => {
+          return item.assignment_method === 'api_input'
+        })
+        .forEach((item: any) => {
+          inputFieldList.value.push(item)
+        })
+    }
+  } else {
+    inputFieldList.value.push(...props.nodeModel.properties.api_input_field_list)
+  }
+  set(props.nodeModel.properties, 'api_input_field_list', inputFieldList)
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue b/ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue
new file mode 100644
index 000000000..0f55fa1dd
--- /dev/null
+++ b/ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue
@@ -0,0 +1,288 @@
+<template>
+  <el-dialog
+    :title="$t('views.applicationWorkflow.nodes.baseNode.FileUploadSetting.title')"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :before-close="close"
+    append-to-body
+    width="800"
+  >
+    <el-form
+      label-position="top"
+      ref="fieldFormRef"
+      :model="form_data"
+      require-asterisk-position="right"
+    >
+      <el-form-item
+        :label="$t('views.applicationWorkflow.nodes.baseNode.FileUploadSetting.maxFiles')"
+      >
+        <el-slider
+          v-model="form_data.maxFiles"
+          show-input
+          :show-input-controls="false"
+          :min="1"
+          :max="10"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('views.applicationWorkflow.nodes.baseNode.FileUploadSetting.fileLimit')"
+      >
+        <el-slider
+          v-model="form_data.fileLimit"
+          show-input
+          :show-input-controls="false"
+          :min="1"
+          :max="100"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="
+          $t('views.applicationWorkflow.nodes.baseNode.FileUploadSetting.fileUploadType.label')
+        "
+      >
+        <el-card
+          shadow="hover"
+          class="card-checkbox cursor w-full mb-8"
+          :class="form_data.document ? 'active' : ''"
+          style="--el-card-padding: 8px 16px"
+          @click.stop="form_data.document = !form_data.document"
+        >
+          <div class="flex-between">
+            <div class="flex align-center">
+              <img class="mr-12" src="@/assets/icon_file-doc.svg" alt="" />
+              <div>
+                <p class="line-height-22 mt-4">
+                  {{ $t('common.fileUpload.document') }}
+                  <el-text class="color-secondary"
+                  >{{
+                      $t(
+                        'views.applicationWorkflow.nodes.baseNode.FileUploadSetting.fileUploadType.documentText'
+                      )
+                    }}
+                  </el-text>
+                </p>
+                <p>{{ documentExtensions.join('、') }}</p>
+              </div>
+            </div>
+            <el-checkbox
+              v-model="form_data.document"
+              @change="form_data.document = !form_data.document"
+            />
+          </div>
+        </el-card>
+        <el-card
+          shadow="hover"
+          class="card-checkbox cursor w-full mb-8"
+          :class="form_data.image ? 'active' : ''"
+          style="--el-card-padding: 8px 16px"
+          @click.stop="form_data.image = !form_data.image"
+        >
+          <div class="flex-between">
+            <div class="flex align-center">
+              <img class="mr-12" src="@/assets/icon_file-image.svg" alt="" />
+              <div>
+                <p class="line-height-22 mt-4">
+                  {{ $t('common.fileUpload.image') }}
+                  <el-text class="color-secondary"
+                  >{{
+                      $t(
+                        'views.applicationWorkflow.nodes.baseNode.FileUploadSetting.fileUploadType.imageText'
+                      )
+                    }}
+                  </el-text>
+                </p>
+                <p>{{ imageExtensions.join('、') }}</p>
+              </div>
+            </div>
+            <el-checkbox v-model="form_data.image" @change="form_data.image = !form_data.image" />
+          </div>
+        </el-card>
+
+        <el-card
+          shadow="hover"
+          class="card-checkbox cursor w-full mb-8"
+          :class="form_data.audio ? 'active' : ''"
+          style="--el-card-padding: 8px 16px"
+          @click.stop="form_data.audio = !form_data.audio"
+        >
+          <div class="flex-between">
+            <div class="flex align-center">
+              <img class="mr-12" src="@/assets/icon_file-audio.svg" alt="" />
+              <div>
+                <p class="line-height-22 mt-4">
+                  {{ $t('common.fileUpload.audio') }}
+                  <el-text class="color-secondary"
+                  >{{
+                      $t(
+                        'views.applicationWorkflow.nodes.baseNode.FileUploadSetting.fileUploadType.audioText'
+                      )
+                    }}
+                  </el-text>
+                </p>
+                <p>{{ audioExtensions.join('、') }}</p>
+              </div>
+            </div>
+            <el-checkbox v-model="form_data.audio" @change="form_data.audio = !form_data.audio" />
+          </div>
+        </el-card>
+        <el-card
+          shadow="hover"
+          class="card-checkbox cursor w-full mb-8"
+          :class="form_data.other ? 'active' : ''"
+          style="--el-card-padding: 8px 16px"
+          @click.stop="form_data.other = !form_data.other"
+        >
+          <div class="flex-between">
+            <div class="flex align-center">
+              <img class="mr-12" :width="32" src="@/assets/fileType/unknown-icon.svg" alt="" />
+              <div>
+                <p class="line-height-22 mt-4">
+                  {{ $t('common.fileUpload.other') }}
+                  <el-text class="color-secondary"
+                  >{{
+                      $t(
+                        'views.applicationWorkflow.nodes.baseNode.FileUploadSetting.fileUploadType.otherText'
+                      )
+                    }}
+                  </el-text>
+                </p>
+                <el-space wrap :size="2" class="mt-4">
+                  <el-tag
+                    v-for="tag in form_data.otherExtensions"
+                    :key="tag"
+                    closable
+                    :disable-transitions="false"
+                    @close="handleClose(tag)"
+                    type="info"
+                    class="mr-4"
+                    effect="plain"
+                    style="
+                      --el-tag-border-radius: 4px;
+                      --el-tag-border-color: var(--el-border-color);
+                    "
+                  >
+                    {{ tag }}
+                  </el-tag>
+                  <el-input
+                    v-if="inputVisible"
+                    ref="InputRef"
+                    v-model="inputValue"
+                    size="small"
+                    @keyup.enter="handleInputConfirm"
+                    @blur="handleInputConfirm"
+                  />
+                  <el-button v-else class="button-new-tag" size="small" @click.stop="showInput">
+                    + {{ $t('common.fileUpload.addExtensions') }}
+                  </el-button>
+                </el-space>
+              </div>
+            </div>
+            <el-checkbox v-model="form_data.other" @change="form_data.other = !form_data.other" />
+          </div>
+        </el-card>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="close"> {{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submit()" :loading="loading">
+          {{ $t('common.confirm') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { nextTick, ref } from 'vue'
+import type { InputInstance } from 'element-plus'
+import { cloneDeep } from 'lodash'
+import { MsgWarning } from '@/utils/message'
+import { t } from '@/locales'
+
+const emit = defineEmits(['refresh'])
+const props = defineProps<{ nodeModel: any }>()
+
+const dialogVisible = ref(false)
+const inputVisible = ref(false)
+const inputValue = ref('')
+const loading = ref(false)
+const fieldFormRef = ref()
+const InputRef = ref<InputInstance>()
+
+const documentExtensions = ['TXT', 'MD', 'DOCX', 'HTML', 'CSV', 'XLSX', 'XLS', 'PDF']
+const imageExtensions = ['JPG', 'JPEG', 'PNG', 'GIF']
+const audioExtensions = ['MP3', 'WAV', 'OGG', 'ACC', 'M4A']
+
+const form_data = ref({
+  maxFiles: 3,
+  fileLimit: 50,
+  document: true,
+  image: false,
+  audio: false,
+  video: false,
+  other: false,
+  otherExtensions: ['PPT', 'DOC']
+})
+
+function open(data: any) {
+  dialogVisible.value = true
+  nextTick(() => {
+    form_data.value = { ...form_data.value, ...data }
+  })
+}
+
+function close() {
+  dialogVisible.value = false
+}
+
+const handleClose = (tag: string) => {
+  form_data.value.otherExtensions = form_data.value.otherExtensions.filter((item) => item !== tag)
+}
+
+const showInput = () => {
+  inputVisible.value = true
+  nextTick(() => {
+    InputRef.value!.input!.focus()
+  })
+}
+const handleInputConfirm = () => {
+  if (inputValue.value) {
+    inputValue.value = inputValue.value.toUpperCase()
+    if (
+      form_data.value.otherExtensions.includes(inputValue.value) ||
+      documentExtensions.includes(inputValue.value) ||
+      imageExtensions.includes(inputValue.value) ||
+      audioExtensions.includes(inputValue.value)
+    ) {
+      inputVisible.value = false
+      inputValue.value = ''
+      MsgWarning(t('common.fileUpload.existingExtensionsTip'))
+      return
+    }
+    form_data.value.otherExtensions.push(inputValue.value)
+  }
+  inputVisible.value = false
+  inputValue.value = ''
+}
+
+async function submit() {
+  const formEl = fieldFormRef.value
+  if (!formEl) return
+  await formEl.validate().then(() => {
+    const formattedData = cloneDeep(form_data.value)
+    emit('refresh', formattedData)
+    // emit('refresh', form_data.value)
+    props.nodeModel.graphModel.eventCenter.emit('refreshFileUploadConfig')
+    dialogVisible.value = false
+  })
+}
+
+defineExpose({
+  open
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/ui/src/workflow/nodes/base-node/component/UserFieldFormDialog.vue b/ui/src/workflow/nodes/base-node/component/UserFieldFormDialog.vue
new file mode 100644
index 000000000..21b72971d
--- /dev/null
+++ b/ui/src/workflow/nodes/base-node/component/UserFieldFormDialog.vue
@@ -0,0 +1,168 @@
+<template>
+  <el-dialog
+    :title="
+      isEdit
+        ? $t('views.template.templateForm.title.editParam')
+        : $t('views.template.templateForm.title.addParam')
+    "
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :before-close="close"
+    append-to-body
+  >
+    <DynamicsFormConstructor
+      v-model="currentRow"
+      label-position="top"
+      require-asterisk-position="right"
+      :input_type_list="inputTypeList"
+      ref="DynamicsFormConstructorRef"
+    ></DynamicsFormConstructor>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="close"> {{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submit()" :loading="loading">
+          {{ isEdit ? $t('common.save') : $t('common.add') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { cloneDeep } from 'lodash'
+import DynamicsFormConstructor from '@/components/dynamics-form/constructor/index.vue'
+import type { FormField } from '@/components/dynamics-form/type'
+import _ from 'lodash'
+import { t } from '@/locales'
+const emit = defineEmits(['refresh'])
+
+const DynamicsFormConstructorRef = ref()
+const loading = ref<boolean>(false)
+const isEdit = ref(false)
+const currentItem = ref<FormField | any>()
+const check_field = (field_list: Array<string>, obj: any) => {
+  return field_list.every((field) => _.get(obj, field, undefined) !== undefined)
+}
+const currentRow = computed(() => {
+  if (currentItem.value) {
+    const row = currentItem.value
+    switch (row.type) {
+      case 'input':
+        if (check_field(['field', 'input_type', 'label', 'required', 'attrs'], currentItem.value)) {
+          return currentItem.value
+        }
+        return {
+          attrs: row.attrs || { maxlength: 200, minlength: 0 },
+          field: row.field || row.variable,
+          input_type: 'TextInput',
+          label: row.label || row.name,
+          default_value: row.default_value,
+          required: row.required != undefined ? row.required : row.is_required
+        }
+      case 'select':
+        if (
+          check_field(
+            ['field', 'input_type', 'label', 'required', 'option_list'],
+            currentItem.value
+          )
+        ) {
+          return currentItem.value
+        }
+        return {
+          attrs: row.attrs || {},
+          field: row.field || row.variable,
+          input_type: 'SingleSelect',
+          label: row.label || row.name,
+          default_value: row.default_value,
+          required: row.required != undefined ? row.required : row.is_required,
+          option_list: row.option_list
+            ? row.option_list
+            : row.optionList.map((o: any) => {
+                return { key: o, value: o }
+              })
+        }
+
+      case 'date':
+        if (
+          check_field(
+            [
+              'field',
+              'input_type',
+              'label',
+              'required',
+              'attrs.format',
+              'attrs.value-format',
+              'attrs.type'
+            ],
+            currentItem.value
+          )
+        ) {
+          return currentItem.value
+        }
+        return {
+          field: row.field || row.variable,
+          input_type: 'DatePicker',
+          label: row.label || row.name,
+          default_value: row.default_value,
+          required: row.required != undefined ? row.required : row.is_required,
+          attrs: {
+            format: 'YYYY-MM-DD HH:mm:ss',
+            'value-format': 'YYYY-MM-DD HH:mm:ss',
+            type: 'datetime'
+          }
+        }
+      default:
+        return currentItem.value
+    }
+  } else {
+    return { input_type: 'TextInput', required: false, attrs: { maxlength: 200, minlength: 0 }, show_default_value: true }
+  }
+})
+const currentIndex = ref(null)
+const inputTypeList = ref([
+  { label: t('dynamicsForm.input_type_list.TextInput'), value: 'TextInputConstructor' },
+  { label: t('dynamicsForm.input_type_list.PasswordInput'), value: 'PasswordInputConstructor' },
+  { label: t('dynamicsForm.input_type_list.SingleSelect'), value: 'SingleSelectConstructor' },
+  { label: t('dynamicsForm.input_type_list.MultiSelect'), value: 'MultiSelectConstructor' },
+  { label: t('dynamicsForm.input_type_list.RadioCard'), value: 'RadioCardConstructor' },
+  { label: t('dynamicsForm.input_type_list.DatePicker'), value: 'DatePickerConstructor' },
+  { label: t('dynamicsForm.input_type_list.SwitchInput'), value: 'SwitchInputConstructor' },
+])
+
+const dialogVisible = ref<boolean>(false)
+
+const open = (row: any, index: any) => {
+  dialogVisible.value = true
+
+  if (row) {
+    isEdit.value = true
+    currentItem.value = cloneDeep(row)
+    currentIndex.value = index
+  } else {
+    currentItem.value = null
+  }
+}
+
+const close = () => {
+  dialogVisible.value = false
+  isEdit.value = false
+  currentIndex.value = null
+  currentItem.value = null as any
+}
+
+const submit = async () => {
+  const formEl = DynamicsFormConstructorRef.value
+  if (!formEl) return
+  await formEl.validate().then(() => {
+    emit('refresh', formEl?.getData(), currentIndex.value)
+    isEdit.value = false
+    currentItem.value = null as any
+    currentIndex.value = null
+  })
+}
+
+defineExpose({ open, close })
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue b/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue
new file mode 100644
index 000000000..88615954c
--- /dev/null
+++ b/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue
@@ -0,0 +1,258 @@
+<template>
+  <div class="flex-between mb-16">
+    <h5 class="break-all ellipsis lighter" style="max-width:80%" :title="inputFieldConfig.title">
+      {{ inputFieldConfig.title }}
+    </h5>
+    <div>
+      <el-button type="primary" link @click="openChangeTitleDialog">
+        <el-icon>
+          <Setting />
+        </el-icon>
+      </el-button>
+      <span class="ml-4">
+        <el-button link type="primary" @click="openAddDialog()">
+          <el-icon class="mr-4">
+            <Plus />
+          </el-icon>
+          {{ $t('common.add') }}
+        </el-button>
+      </span>
+    </div>
+  </div>
+  <el-table
+    v-if="props.nodeModel.properties.user_input_field_list?.length > 0"
+    :data="props.nodeModel.properties.user_input_field_list"
+    class="mb-16"
+    ref="tableRef"
+    row-key="field"
+  >
+    <el-table-column prop="field" :label="$t('dynamicsForm.paramForm.field.label')" width="95">
+      <template #default="{ row }">
+        <span :title="row.field" class="ellipsis-1">{{ row.field }}</span>
+      </template>
+    </el-table-column>
+
+    <el-table-column prop="label" :label="$t('dynamicsForm.paramForm.name.label')">
+      <template #default="{ row }">
+        <span v-if="row.label && row.label.input_type === 'TooltipLabel'">
+          <span :title="row.label.label" class="ellipsis-1">
+            {{ row.label.label }}
+          </span>
+        </span>
+        <span v-else>
+          <span :title="row.label" class="ellipsis-1">
+            {{ row.label }}
+          </span></span
+        >
+      </template>
+    </el-table-column>
+    <el-table-column :label="$t('dynamicsForm.paramForm.input_type.label')" width="95">
+      <template #default="{ row }">
+        <el-tag type="info" class="info-tag" v-if="row.input_type === 'TextInput'">{{
+          $t('dynamicsForm.input_type_list.TextInput')
+        }}</el-tag>
+        <el-tag type="info" class="info-tag" v-if="row.input_type === 'PasswordInput'">{{
+          $t('dynamicsForm.input_type_list.PasswordInput')
+        }}</el-tag>
+        <el-tag type="info" class="info-tag" v-if="row.input_type === 'Slider'">{{
+          $t('dynamicsForm.input_type_list.Slider')
+        }}</el-tag>
+        <el-tag type="info" class="info-tag" v-if="row.input_type === 'SwitchInput'">{{
+          $t('dynamicsForm.input_type_list.SwitchInput')
+        }}</el-tag>
+        <el-tag type="info" class="info-tag" v-if="row.input_type === 'SingleSelect'">{{
+          $t('dynamicsForm.input_type_list.SingleSelect')
+        }}</el-tag>
+        <el-tag type="info" class="info-tag" v-if="row.input_type === 'MultiSelect'">{{
+          $t('dynamicsForm.input_type_list.MultiSelect')
+        }}</el-tag>
+        <el-tag type="info" class="info-tag" v-if="row.input_type === 'RadioCard'">{{
+          $t('dynamicsForm.input_type_list.RadioCard')
+        }}</el-tag>
+        <el-tag type="info" class="info-tag" v-if="row.input_type === 'DatePicker'">{{
+          $t('dynamicsForm.input_type_list.DatePicker')
+        }}</el-tag>
+      </template>
+    </el-table-column>
+
+    <el-table-column prop="default_value" :label="$t('dynamicsForm.default.label')">
+      <template #default="{ row }">
+        <span :title="row.default_value" class="ellipsis-1">{{ getDefaultValue(row) }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column :label="$t('common.required')">
+      <template #default="{ row }">
+        <div @click.stop>
+          <el-switch disabled size="small" v-model="row.required" />
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column :label="$t('common.operation')" align="left" width="90">
+      <template #default="{ row, $index }">
+        <span class="mr-4">
+          <el-tooltip effect="dark" :content="$t('common.modify')" placement="top">
+            <el-button type="primary" text @click.stop="openAddDialog(row, $index)">
+              <el-icon><EditPen /></el-icon>
+            </el-button>
+          </el-tooltip>
+        </span>
+        <el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
+          <el-button type="primary" text @click="deleteField($index)">
+            <el-icon>
+              <Delete />
+            </el-icon>
+          </el-button>
+        </el-tooltip>
+      </template>
+    </el-table-column>
+  </el-table>
+
+  <UserFieldFormDialog ref="UserFieldFormDialogRef" @refresh="refreshFieldList" />
+  <UserInputTitleDialog ref="UserInputTitleDialogRef" @refresh="refreshFieldTitle" />
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { set } from 'lodash'
+import Sortable from 'sortablejs'
+import UserFieldFormDialog from './UserFieldFormDialog.vue'
+import { MsgError } from '@/utils/message'
+import { t } from '@/locales'
+import UserInputTitleDialog from '@/workflow/nodes/base-node/component/UserInputTitleDialog.vue'
+const props = defineProps<{ nodeModel: any }>()
+
+const tableRef = ref()
+const UserFieldFormDialogRef = ref()
+const UserInputTitleDialogRef = ref()
+const inputFieldList = ref<any[]>([])
+const inputFieldConfig = ref({ title: t('chat.userInput') })
+
+function openAddDialog(data?: any, index?: any) {
+  UserFieldFormDialogRef.value.open(data, index)
+}
+
+function openChangeTitleDialog() {
+  UserInputTitleDialogRef.value.open(inputFieldConfig.value)
+}
+
+function deleteField(index: any) {
+  inputFieldList.value.splice(index, 1)
+  props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+  onDragHandle()
+}
+
+function refreshFieldList(data: any, index: any) {
+  for (let i = 0; i < inputFieldList.value.length; i++) {
+    if (inputFieldList.value[i].field === data.field && index !== i) {
+      MsgError(t('views.applicationWorkflow.tip.paramErrorMessage') + data.field)
+      return
+    }
+  }
+  // 查看另一个list又没有重复的
+  let arr = props.nodeModel.properties.api_input_field_list
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i].variable === data.field) {
+      MsgError(t('views.applicationWorkflow.tip.paramErrorMessage') + data.field)
+      return
+    }
+  }
+  if (index !== null) {
+    inputFieldList.value.splice(index, 1, data)
+  } else {
+    inputFieldList.value.push(data)
+  }
+  UserFieldFormDialogRef.value.close()
+  props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+  onDragHandle()
+}
+
+function refreshFieldTitle(data: any) {
+  inputFieldConfig.value = data
+  UserInputTitleDialogRef.value.close()
+
+  // console.log('inputFieldConfig', inputFieldConfig.value)
+}
+
+const getDefaultValue = (row: any) => {
+  if (row.input_type === 'PasswordInput') {
+    return '******'
+  }
+  if (row.default_value) {
+    const default_value = row.option_list
+      ?.filter((v: any) => row.default_value.indexOf(v.value) > -1)
+      .map((v: any) => v.label)
+      .join(',')
+    if (default_value) {
+      return default_value
+    }
+    return row.default_value
+  }
+  if (row.default_value !== undefined) {
+    return row.default_value
+  }
+}
+
+function onDragHandle() {
+  if (!tableRef.value) return
+
+  // 获取表格的 tbody DOM 元素
+  const wrapper = tableRef.value.$el as HTMLElement
+  const tbody = wrapper.querySelector('.el-table__body-wrapper tbody')
+  if (!tbody) return
+  // 初始化 Sortable
+  Sortable.create(tbody as HTMLElement, {
+    animation: 150,
+    ghostClass: 'ghost-row',
+    onEnd: (evt) => {
+      if (evt.oldIndex === undefined || evt.newIndex === undefined) return
+      // 更新数据顺序
+      const items = [...inputFieldList.value]
+      const [movedItem] = items.splice(evt.oldIndex, 1)
+      items.splice(evt.newIndex, 0, movedItem)
+      inputFieldList.value = items
+      props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+    }
+  })
+}
+
+onMounted(() => {
+  if (!props.nodeModel.properties.user_input_field_list) {
+    if (props.nodeModel.properties.input_field_list) {
+      props.nodeModel.properties.input_field_list
+        .filter((item: any) => {
+          return item.assignment_method === 'user_input'
+        })
+        .forEach((item: any) => {
+          inputFieldList.value.push(item)
+        })
+    }
+  } else {
+    inputFieldList.value.push(...props.nodeModel.properties.user_input_field_list)
+  }
+  // 兼容旧数据
+  inputFieldList.value.forEach((item, index) => {
+    item.label = item.label || item.name
+    item.field = item.field || item.variable
+    item.required = item.required || item.is_required
+    switch (item.type) {
+      case 'input':
+        item.input_type = 'TextInput'
+        break
+      case 'select':
+        item.input_type = 'SingleSelect'
+        break
+      case 'date':
+        item.input_type = 'DatePicker'
+        break
+    }
+  })
+  set(props.nodeModel.properties, 'user_input_field_list', inputFieldList)
+  if (props.nodeModel.properties.user_input_config) {
+    inputFieldConfig.value = props.nodeModel.properties.user_input_config
+  }
+  set(props.nodeModel.properties, 'user_input_config', inputFieldConfig)
+  onDragHandle()
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/ui/src/workflow/nodes/base-node/component/UserInputTitleDialog.vue b/ui/src/workflow/nodes/base-node/component/UserInputTitleDialog.vue
new file mode 100644
index 000000000..561e75a57
--- /dev/null
+++ b/ui/src/workflow/nodes/base-node/component/UserInputTitleDialog.vue
@@ -0,0 +1,82 @@
+<template>
+  <el-dialog
+    :title="$t('common.setting')"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :before-close="close"
+    append-to-body
+  >
+    <el-form
+      label-position="top"
+      ref="fieldFormRef"
+      :rules="rules"
+      :model="form"
+      require-asterisk-position="right"
+    >
+      <el-form-item :label="$t('common.title')" prop="title">
+        <el-input
+          v-model="form.title"
+          maxlength="64"
+          show-word-limit
+          @blur="form.title = form.title.trim()"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submit(fieldFormRef)" :loading="loading">
+          {{ $t('common.save') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { cloneDeep } from 'lodash'
+import { t } from '@/locales'
+const emit = defineEmits(['refresh'])
+
+const fieldFormRef = ref()
+const loading = ref<boolean>(false)
+
+const form = ref<any>({
+  title: t('chat.userInput')
+})
+
+const rules = reactive({
+  title: [
+    { required: true, message: t('dynamicsForm.paramForm.name.requiredMessage'), trigger: 'blur' }
+  ]
+})
+
+const dialogVisible = ref<boolean>(false)
+
+const open = (row: any) => {
+  if (row) {
+    form.value = cloneDeep(row)
+  }
+
+  dialogVisible.value = true
+}
+
+const close = () => {
+  dialogVisible.value = false
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      emit('refresh', form.value)
+    }
+  })
+}
+
+defineExpose({ open, close })
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/workflow/nodes/base-node/index.ts b/ui/src/workflow/nodes/base-node/index.ts
new file mode 100644
index 000000000..69ede8e06
--- /dev/null
+++ b/ui/src/workflow/nodes/base-node/index.ts
@@ -0,0 +1,22 @@
+import BaseNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+
+class BaseNode extends AppNode {
+  constructor(props: any) {
+    super(props, BaseNodeVue)
+  }
+}
+
+class BaseModel extends AppNodeModel {
+  constructor(data: any, graphModel: any) {
+    super(data, graphModel)
+  }
+  get_width() {
+    return 600
+  }
+}
+export default {
+  type: 'base-node',
+  model: BaseModel,
+  view: BaseNode
+}
diff --git a/ui/src/workflow/nodes/base-node/index.vue b/ui/src/workflow/nodes/base-node/index.vue
new file mode 100644
index 000000000..5904745b2
--- /dev/null
+++ b/ui/src/workflow/nodes/base-node/index.vue
@@ -0,0 +1,349 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <el-form
+      @submit.prevent
+      :model="form_data"
+      label-position="top"
+      require-asterisk-position="right"
+      class="mb-24"
+      label-width="auto"
+      ref="baseNodeFormRef"
+    >
+      <el-form-item
+        :label="$t('views.applicationWorkflow.nodes.baseNode.appName.label')"
+        prop="name"
+        :rules="{
+          message: t('views.application.applicationForm.form.appName.requiredMessage'),
+          trigger: 'blur',
+          required: true
+        }"
+      >
+        <el-input
+          v-model="form_data.name"
+          maxlength="64"
+          :placeholder="t('views.application.applicationForm.form.appName.placeholder')"
+          show-word-limit
+          @blur="form_data.name = form_data.name?.trim()"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('views.applicationWorkflow.nodes.baseNode.appDescription.label')">
+        <el-input
+          v-model="form_data.desc"
+          :placeholder="$t('views.application.applicationForm.form.appDescription.placeholder')"
+          :rows="3"
+          type="textarea"
+          maxlength="256"
+          show-word-limit
+        />
+      </el-form-item>
+      <el-form-item :label="$t('views.application.applicationForm.form.prologue')">
+        <MdEditorMagnify
+          @wheel="wheel"
+          :title="$t('views.application.applicationForm.form.prologue')"
+          v-model="form_data.prologue"
+          style="height: 150px"
+          @submitDialog="submitDialog"
+        />
+      </el-form-item>
+      <el-form-item>
+        <template #label>
+          <div class="flex-between">
+            <div class="flex align-center">
+              <span class="mr-4">{{
+                $t('views.applicationWorkflow.nodes.baseNode.fileUpload.label')
+              }}</span>
+              <el-tooltip
+                effect="dark"
+                :content="$t('views.applicationWorkflow.nodes.baseNode.fileUpload.tooltip')"
+                placement="right"
+              >
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+            <div>
+              <el-button
+                v-if="form_data.file_upload_enable"
+                type="primary"
+                link
+                @click="openFileUploadSettingDialog"
+                class="mr-4"
+              >
+                <el-icon class="mr-4">
+                  <Setting />
+                </el-icon>
+              </el-button>
+              <el-switch
+                size="small"
+                v-model="form_data.file_upload_enable"
+                @change="switchFileUpload"
+              />
+            </div>
+          </div>
+        </template>
+      </el-form-item>
+      <UserInputFieldTable ref="UserInputFieldTableFef" :node-model="nodeModel" />
+      <ApiInputFieldTable ref="ApiInputFieldTableFef" :node-model="nodeModel" />
+      <el-form-item>
+        <template #label>
+          <div class="flex-between">
+            <span class="mr-4">{{
+              $t('views.application.applicationForm.form.voiceInput.label')
+            }}</span>
+            <div class="flex">
+              <el-checkbox v-if="form_data.stt_model_enable" v-model="form_data.stt_autosend">{{
+                $t('views.application.applicationForm.form.voiceInput.autoSend')
+              }}</el-checkbox>
+              <el-switch
+                class="ml-8"
+                size="small"
+                v-model="form_data.stt_model_enable"
+                @change="sttModelEnableChange"
+              />
+            </div>
+          </div>
+        </template>
+        <ModelSelect
+          @wheel="wheel"
+          v-show="form_data.stt_model_enable"
+          v-model="form_data.stt_model_id"
+          :placeholder="$t('views.application.applicationForm.form.voiceInput.placeholder')"
+          :options="sttModelOptions"
+          showFooter
+          :model-type="'STT'"
+        ></ModelSelect>
+      </el-form-item>
+      <el-form-item>
+        <template #label>
+          <div class="flex-between">
+            <span class="mr-4">{{
+              $t('views.application.applicationForm.form.voicePlay.label')
+            }}</span>
+            <div class="flex">
+              <el-checkbox v-if="form_data.tts_model_enable" v-model="form_data.tts_autoplay">{{
+                $t('views.application.applicationForm.form.voicePlay.autoPlay')
+              }}</el-checkbox>
+              <el-switch
+                class="ml-8"
+                size="small"
+                v-model="form_data.tts_model_enable"
+                @change="ttsModelEnableChange"
+              />
+            </div>
+          </div>
+        </template>
+        <div class="w-full">
+          <el-radio-group v-model="form_data.tts_type" v-show="form_data.tts_model_enable">
+            <el-radio
+              :label="$t('views.application.applicationForm.form.voicePlay.browser')"
+              value="BROWSER"
+            />
+            <el-radio
+              :label="$t('views.application.applicationForm.form.voicePlay.tts')"
+              value="TTS"
+            />
+          </el-radio-group>
+        </div>
+        <div class="flex-between w-full">
+          <ModelSelect
+            @wheel="wheel"
+            v-if="form_data.tts_type === 'TTS' && form_data.tts_model_enable"
+            v-model="form_data.tts_model_id"
+            :placeholder="$t('views.application.applicationForm.form.voicePlay.placeholder')"
+            :options="ttsModelOptions"
+            @change="ttsModelChange()"
+            showFooter
+            :model-type="'TTS'"
+          ></ModelSelect>
+
+          <el-button
+            v-if="form_data.tts_type === 'TTS' && form_data.tts_model_enable"
+            @click="openTTSParamSettingDialog"
+            :disabled="!form_data.tts_model_id"
+            class="ml-8"
+          >
+            <el-icon>
+              <el-icon><Operation /></el-icon>
+            </el-icon>
+          </el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+    <TTSModeParamSettingDialog ref="TTSModeParamSettingDialogRef" @refresh="refreshTTSForm" />
+    <FileUploadSettingDialog
+      ref="FileUploadSettingDialogRef"
+      :node-model="nodeModel"
+      @refresh="refreshFileUploadForm"
+    />
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { app } from '@/main'
+import { groupBy, set } from 'lodash'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import type { FormInstance } from 'element-plus'
+import { ref, computed, onMounted } from 'vue'
+import applicationApi from '@/api/application'
+import { MsgError, MsgSuccess, MsgWarning } from '@/utils/message'
+import { t } from '@/locales'
+import TTSModeParamSettingDialog from '@/views/application/component/TTSModeParamSettingDialog.vue'
+import ApiInputFieldTable from './component/ApiInputFieldTable.vue'
+import UserInputFieldTable from './component/UserInputFieldTable.vue'
+import FileUploadSettingDialog from '@/workflow/nodes/base-node/component/FileUploadSettingDialog.vue'
+
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+
+const props = defineProps<{ nodeModel: any }>()
+
+const sttModelOptions = ref<any>(null)
+const ttsModelOptions = ref<any>(null)
+const TTSModeParamSettingDialogRef = ref<InstanceType<typeof TTSModeParamSettingDialog>>()
+const UserInputFieldTableFef = ref()
+const ApiInputFieldTableFef = ref()
+const FileUploadSettingDialogRef = ref<InstanceType<typeof FileUploadSettingDialog>>()
+
+const form = {
+  name: '',
+  desc: '',
+  prologue: t('views.application.applicationForm.form.defaultPrologue')
+}
+
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+
+function submitDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'prologue', val)
+}
+
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+const baseNodeFormRef = ref<FormInstance>()
+
+const validate = () => {
+  if (
+    form_data.value.tts_model_enable &&
+    !form_data.value.tts_model_id &&
+    form_data.value.tts_type === 'TTS'
+  ) {
+    return Promise.reject({
+      node: props.nodeModel,
+      errMessage: t('views.application.applicationForm.form.voicePlay.requiredMessage')
+    })
+  }
+  if (form_data.value.stt_model_enable && !form_data.value.stt_model_id) {
+    return Promise.reject({
+      node: props.nodeModel,
+      errMessage: t('views.application.applicationForm.form.voiceInput.requiredMessage')
+    })
+  }
+  return baseNodeFormRef.value?.validate().catch((err) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+function getSTTModel() {
+  applicationApi.getApplicationSTTModel(id).then((res: any) => {
+    sttModelOptions.value = groupBy(res?.data, 'provider')
+  })
+}
+
+function getTTSModel() {
+  applicationApi.getApplicationTTSModel(id).then((res: any) => {
+    ttsModelOptions.value = groupBy(res?.data, 'provider')
+  })
+}
+
+function ttsModelChange() {
+  if (form_data.value.tts_model_id) {
+    TTSModeParamSettingDialogRef.value?.reset_default(form_data.value.tts_model_id, id)
+  } else {
+    refreshTTSForm({})
+  }
+}
+
+function ttsModelEnableChange() {
+  if (!form_data.value.tts_model_enable) {
+    form_data.value.tts_model_id = ''
+    form_data.value.tts_type = 'BROWSER'
+  }
+}
+
+function sttModelEnableChange() {
+  if (!form_data.value.stt_model_enable) {
+    form_data.value.stt_model_id = ''
+  }
+}
+
+const openTTSParamSettingDialog = () => {
+  const model_id = form_data.value.tts_model_id
+  if (!model_id) {
+    MsgSuccess(t('views.application.applicationForm.form.voicePlay.requiredMessage'))
+    return
+  }
+  TTSModeParamSettingDialogRef.value?.open(model_id, id, form_data.value.tts_model_params_setting)
+}
+
+const refreshTTSForm = (data: any) => {
+  form_data.value.tts_model_params_setting = data
+}
+
+const switchFileUpload = () => {
+  const default_upload_setting = {
+    maxFiles: 3,
+    fileLimit: 50,
+    document: true,
+    image: false,
+    audio: false,
+    video: false,
+    other: false,
+    otherExtensions: ['ppt', 'doc']
+  }
+
+  if (form_data.value.file_upload_enable) {
+    form_data.value.file_upload_setting =
+      form_data.value.file_upload_setting || default_upload_setting
+  }
+  props.nodeModel.graphModel.eventCenter.emit('refreshFileUploadConfig')
+}
+const openFileUploadSettingDialog = () => {
+  FileUploadSettingDialogRef.value?.open(form_data.value.file_upload_setting)
+}
+
+const refreshFileUploadForm = (data: any) => {
+  form_data.value.file_upload_setting = data
+}
+
+onMounted(() => {
+  set(props.nodeModel, 'validate', validate)
+  if (!props.nodeModel.properties.node_data.tts_type) {
+    set(props.nodeModel.properties.node_data, 'tts_type', 'BROWSER')
+  }
+  getTTSModel()
+  getSTTModel()
+})
+</script>
+<style lang="scss" scoped>
+:deep(.el-form-item__label) {
+  display: block;
+}
+</style>
diff --git a/ui/src/workflow/nodes/condition-node/index.ts b/ui/src/workflow/nodes/condition-node/index.ts
new file mode 100644
index 000000000..275c63a2d
--- /dev/null
+++ b/ui/src/workflow/nodes/condition-node/index.ts
@@ -0,0 +1,68 @@
+import ConditioNodeVue from './index.vue'
+import { cloneDeep, set } from 'lodash'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class ConditioNode extends AppNode {
+  constructor(props: any) {
+    super(props, ConditioNodeVue)
+  }
+}
+const get_up_index_height = (condition_list: Array<any>, index: number) => {
+  return condition_list
+    .filter((item, i) => i < index)
+    .map((item) => item.height + 8)
+    .reduce((x, y) => x + y, 0)
+}
+class ConditionModel extends AppNodeModel {
+  refreshBranch() {
+    // 更新节点连接边的path
+    this.incoming.edges.forEach((edge: any) => {
+      // 调用自定义的更新方案
+      edge.updatePathByAnchor()
+    })
+    this.outgoing.edges.forEach((edge: any) => {
+      edge.updatePathByAnchor()
+    })
+  }
+  getDefaultAnchor() {
+    const {
+      id,
+      x,
+      y,
+      width,
+      height,
+      properties: { branch_condition_list }
+    } = this
+    if (this.height === undefined) {
+      this.height = 200
+    }
+    const showNode = this.properties.showNode === undefined ? true : this.properties.showNode
+    const anchors: any = []
+    anchors.push({
+      x: x - width / 2 + 10,
+      y: showNode ? y : y - 15,
+      id: `${id}_left`,
+      edgeAddable: false,
+      type: 'left'
+    })
+
+    if (branch_condition_list) {
+      for (let index = 0; index < branch_condition_list.length; index++) {
+        const element = branch_condition_list[index]
+        const h = get_up_index_height(branch_condition_list, index)
+        anchors.push({
+          x: x + width / 2 - 10,
+          y: showNode ? y - height / 2 + 75 + h + element.height / 2 : y - 15,
+          id: `${id}_${element.id}_right`,
+          type: 'right'
+        })
+      }
+    }
+
+    return anchors
+  }
+}
+export default {
+  type: 'condition-node',
+  model: ConditionModel,
+  view: ConditioNode
+}
diff --git a/ui/src/workflow/nodes/condition-node/index.vue b/ui/src/workflow/nodes/condition-node/index.vue
new file mode 100644
index 000000000..f5044ae95
--- /dev/null
+++ b/ui/src/workflow/nodes/condition-node/index.vue
@@ -0,0 +1,370 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <el-form
+      :model="form_data"
+      label-position="top"
+      require-asterisk-position="right"
+      label-width="auto"
+      ref="ConditionNodeFormRef"
+      @submit.prevent
+    >
+      <VueDraggable
+        ref="el"
+        v-bind:modelValue="form_data.branch"
+        :disabled="form_data.branch === 2"
+        :filter="'.no-drag'"
+        handle=".handle"
+        :animation="150"
+        ghostClass="ghost"
+        @end="onEnd"
+      >
+        <template v-for="(item, index) in form_data.branch" :key="item.id">
+          <el-card
+            v-resize="(wh: any) => resizeCondition(wh, item, index)"
+            shadow="never"
+            class="drag-card card-never mb-8"
+            :class="{
+              'no-drag': index === form_data.branch.length - 1 || form_data.branch.length === 2
+            }"
+            style="--el-card-padding: 12px"
+          >
+            <div class="handle flex-between lighter">
+              <span class="flex align-center">
+                <img src="@/assets/sort.svg" alt="" height="15" class="handle-img mr-4" />
+                {{ item.type }}
+              </span>
+              <div class="info" v-if="item.conditions.length > 1">
+                <span>{{
+                  $t('views.applicationWorkflow.nodes.conditionNode.conditions.info')
+                }}</span>
+                <el-select
+                  :teleported="false"
+                  v-model="item.condition"
+                  size="small"
+                  style="width: 60px; margin: 0 8px"
+                >
+                  <el-option :label="$t('views.applicationWorkflow.condition.AND')" value="and" />
+                  <el-option :label="$t('views.applicationWorkflow.condition.OR')" value="or" />
+                </el-select>
+                <span>{{
+                  $t('views.applicationWorkflow.nodes.conditionNode.conditions.label')
+                }}</span>
+              </div>
+            </div>
+            <div v-if="index !== form_data.branch.length - 1" class="mt-8">
+              <template v-for="(condition, cIndex) in item.conditions" :key="cIndex">
+                <el-row :gutter="8">
+                  <el-col :span="11">
+                    <el-form-item
+                      :prop="'branch.' + index + '.conditions.' + cIndex + '.field'"
+                      :rules="{
+                        type: 'array',
+                        required: true,
+                        message: $t('views.applicationWorkflow.variable.placeholder'),
+                        trigger: 'change'
+                      }"
+                    >
+                      <NodeCascader
+                        ref="nodeCascaderRef"
+                        :nodeModel="nodeModel"
+                        class="w-full"
+                        :placeholder="$t('views.applicationWorkflow.variable.placeholder')"
+                        v-model="condition.field"
+                      />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item
+                      :prop="'branch.' + index + '.conditions.' + cIndex + '.compare'"
+                      :rules="{
+                        required: true,
+                        message: $t(
+                          'views.applicationWorkflow.nodes.conditionNode.conditions.requiredMessage'
+                        ),
+                        trigger: 'change'
+                      }"
+                    >
+                      <el-select
+                        @wheel="wheel"
+                        :teleported="false"
+                        v-model="condition.compare"
+                        :placeholder="
+                          $t(
+                            'views.applicationWorkflow.nodes.conditionNode.conditions.requiredMessage'
+                          )
+                        "
+                        clearable
+                        @change="changeCondition($event, index, cIndex)"
+                      >
+                        <template v-for="(item, index) in compareList" :key="index">
+                          <el-option :label="item.label" :value="item.value" />
+                        </template>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item
+                      v-if="
+                        !['is_null', 'is_not_null', 'is_true', 'is_not_true'].includes(
+                          condition.compare
+                        )
+                      "
+                      :prop="'branch.' + index + '.conditions.' + cIndex + '.value'"
+                      :rules="{
+                        required: true,
+                        message: $t('views.applicationWorkflow.nodes.conditionNode.valueMessage'),
+                        trigger: 'blur'
+                      }"
+                    >
+                      <el-input
+                        v-model="condition.value"
+                        :placeholder="
+                          $t('views.applicationWorkflow.nodes.conditionNode.valueMessage')
+                        "
+                      />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="1">
+                    <el-button
+                      :disabled="index === 0 && cIndex === 0"
+                      link
+                      type="info"
+                      class="mt-4"
+                      @click="deleteCondition(index, cIndex)"
+                    >
+                      <el-icon><Delete /></el-icon>
+                    </el-button>
+                  </el-col>
+                </el-row>
+              </template>
+            </div>
+
+            <el-button
+              link
+              type="primary"
+              @click="addCondition(index)"
+              v-if="index !== form_data.branch.length - 1"
+            >
+              <el-icon class="mr-4"><Plus /></el-icon>
+              {{ $t('views.applicationWorkflow.nodes.conditionNode.addCondition') }}
+            </el-button>
+          </el-card>
+        </template>
+      </VueDraggable>
+      <el-button link type="primary" @click="addBranch">
+        <el-icon class="mr-4"><Plus /></el-icon>
+        {{ $t('views.applicationWorkflow.nodes.conditionNode.addBranch') }}
+      </el-button>
+    </el-form>
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { cloneDeep, set } from 'lodash'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
+import type { FormInstance } from 'element-plus'
+import { ref, computed, onMounted, nextTick } from 'vue'
+import { randomId } from '@/utils/utils'
+import { compareList } from '@/workflow/common/data'
+import { VueDraggable } from 'vue-draggable-plus'
+
+const props = defineProps<{ nodeModel: any }>()
+
+const form = {
+  branch: [
+    {
+      conditions: [
+        {
+          field: [],
+          compare: '',
+          value: ''
+        }
+      ],
+      id: randomId(),
+      type: 'IF',
+      condition: 'and'
+    },
+    {
+      conditions: [],
+      id: randomId(),
+      type: 'ELSE',
+      condition: 'and'
+    }
+  ]
+}
+
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+const resizeCondition = (wh: any, row: any, index: number) => {
+  const branch_condition_list = cloneDeep(
+    props.nodeModel.properties.branch_condition_list
+      ? props.nodeModel.properties.branch_condition_list
+      : []
+  )
+  const new_branch_condition_list = branch_condition_list.map((item: any) => {
+    if (item.id === row.id) {
+      return { ...item, height: wh.height, index: index }
+    }
+    return item
+  })
+  set(props.nodeModel.properties, 'branch_condition_list', new_branch_condition_list)
+  refreshBranchAnchor(props.nodeModel.properties.node_data.branch, true)
+}
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+      refreshBranchAnchor(form.branch, true)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+const ConditionNodeFormRef = ref<FormInstance>()
+const nodeCascaderRef = ref()
+const validate = () => {
+  const v_list = [
+    ConditionNodeFormRef.value?.validate(),
+    ...nodeCascaderRef.value.map((item: any) => item.validate())
+  ]
+  return Promise.all(v_list).catch((err) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+function onEnd(event?: any) {
+  const { oldIndex, newIndex } = event
+  if (oldIndex === undefined || newIndex === undefined) return
+  const list = cloneDeep(props.nodeModel.properties.node_data.branch)
+  if (oldIndex === list.length - 1 || newIndex === list.length - 1) {
+    return
+  }
+  const newInstance = { ...list[oldIndex], type: list[newIndex].type, id: list[newIndex].id }
+  const oldInstance = { ...list[newIndex], type: list[oldIndex].type, id: list[oldIndex].id }
+  list[newIndex] = newInstance
+  list[oldIndex] = oldInstance
+  set(props.nodeModel.properties.node_data, 'branch', list)
+}
+
+function addBranch() {
+  const list = cloneDeep(props.nodeModel.properties.node_data.branch)
+  const obj = {
+    conditions: [
+      {
+        field: [],
+        compare: '',
+        value: ''
+      }
+    ],
+    type: 'ELSE IF ' + (list.length - 1),
+    id: randomId(),
+    condition: 'and'
+  }
+  list.splice(list.length - 1, 0, obj)
+  refreshBranchAnchor(list, true)
+  set(props.nodeModel.properties.node_data, 'branch', list)
+}
+function refreshBranchAnchor(list: Array<any>, is_add: boolean) {
+  const branch_condition_list = cloneDeep(
+    props.nodeModel.properties.branch_condition_list
+      ? props.nodeModel.properties.branch_condition_list
+      : []
+  )
+  const new_branch_condition_list = list
+    .map((item, index) => {
+      const find = branch_condition_list.find((b: any) => b.id === item.id)
+      if (find) {
+        return { index: index, height: find.height, id: item.id }
+      } else {
+        if (is_add) {
+          return { index: index, height: 12, id: item.id }
+        }
+      }
+    })
+    .filter((item) => item)
+
+  set(props.nodeModel.properties, 'branch_condition_list', new_branch_condition_list)
+  props.nodeModel.refreshBranch()
+}
+
+function addCondition(index: number) {
+  const list = cloneDeep(props.nodeModel.properties.node_data.branch)
+  list[index]['conditions'].push({
+    field: [],
+    compare: '',
+    value: ''
+  })
+  set(props.nodeModel.properties.node_data, 'branch', list)
+}
+
+function deleteCondition(index: number, cIndex: number) {
+  const list = cloneDeep(props.nodeModel.properties.node_data.branch)
+  list[index]['conditions'].splice(cIndex, 1)
+  if (list[index]['conditions'].length === 0) {
+    const delete_edge = list.splice(index, 1)
+    const delete_target_anchor_id_list = delete_edge.map(
+      (item: any) => props.nodeModel.id + '_' + item.id + '_right'
+    )
+
+    props.nodeModel.graphModel.eventCenter.emit(
+      'delete_edge',
+      props.nodeModel.outgoing.edges
+        .filter((item: any) => delete_target_anchor_id_list.includes(item.sourceAnchorId))
+        .map((item: any) => item.id)
+    )
+    refreshBranchAnchor(list, false)
+
+    list.forEach((item: any, index: number) => {
+      if (item.type === 'ELSE IF ' + (index + 1)) {
+        item.type = 'ELSE IF ' + index
+      }
+    })
+  }
+  set(props.nodeModel.properties.node_data, 'branch', list)
+}
+
+function changeCondition(val: string, index: number, cIndex: number) {
+  if (['is_null', 'is_not_null', 'is_true', 'is_not_true'].includes(val)) {
+    const list = cloneDeep(props.nodeModel.properties.node_data.branch)
+    list[index]['conditions'][cIndex].value = 1
+    set(props.nodeModel.properties.node_data, 'branch', list)
+  }
+}
+
+onMounted(() => {
+  set(props.nodeModel, 'validate', validate)
+})
+</script>
+<style lang="scss" scoped>
+.drag-card.no-drag {
+  .handle {
+    .handle-img {
+      display: none;
+    }
+  }
+}
+.drag-card:not(.no-drag) {
+  .handle {
+    .handle-img {
+      display: none;
+    }
+    &:hover {
+      .handle-img {
+        display: block;
+      }
+    }
+  }
+}
+</style>
diff --git a/ui/src/workflow/nodes/document-extract-node/index.ts b/ui/src/workflow/nodes/document-extract-node/index.ts
new file mode 100644
index 000000000..9a7072d2e
--- /dev/null
+++ b/ui/src/workflow/nodes/document-extract-node/index.ts
@@ -0,0 +1,12 @@
+import DocumentExtractNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class RerankerNode extends AppNode {
+  constructor(props: any) {
+    super(props, DocumentExtractNodeVue)
+  }
+}
+export default {
+  type: 'document-extract-node',
+  model: AppNodeModel,
+  view: RerankerNode
+}
diff --git a/ui/src/workflow/nodes/document-extract-node/index.vue b/ui/src/workflow/nodes/document-extract-node/index.vue
new file mode 100644
index 000000000..4e2047efa
--- /dev/null
+++ b/ui/src/workflow/nodes/document-extract-node/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <h5 class="title-decoration-1 mb-8">{{ $t('views.applicationWorkflow.nodeSetting') }}</h5>
+    <el-card shadow="never" class="card-never">
+      <el-form
+        @submit.prevent
+        :model="form_data"
+        label-position="top"
+        require-asterisk-position="right"
+        label-width="auto"
+        ref="DatasetNodeFormRef"
+      >
+        <el-form-item :label="$t('views.problem.relateParagraph.selectDocument')" :rules="{
+            type: 'array',
+            required: true,
+            message: $t('views.log.documentPlaceholder'),
+            trigger: 'change'
+          }"
+        >
+          <NodeCascader
+            ref="nodeCascaderRef"
+            :nodeModel="nodeModel"
+            class="w-full"
+            :placeholder="$t('views.log.documentPlaceholder')"
+            v-model="form_data.document_list"
+          />
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </NodeContainer>
+</template>
+
+<script setup lang="ts">
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import { computed } from 'vue'
+import { set } from 'lodash'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
+
+const props = defineProps<{ nodeModel: any }>()
+
+const form = {
+  document_list: ["start-node", "document"]
+}
+
+
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/ui/src/workflow/nodes/form-node/index.ts b/ui/src/workflow/nodes/form-node/index.ts
new file mode 100644
index 000000000..b7c2dbec9
--- /dev/null
+++ b/ui/src/workflow/nodes/form-node/index.ts
@@ -0,0 +1,12 @@
+import FormNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class FormNode extends AppNode {
+  constructor(props: any) {
+    super(props, FormNodeVue)
+  }
+}
+export default {
+  type: 'form-node',
+  model: AppNodeModel,
+  view: FormNode
+}
diff --git a/ui/src/workflow/nodes/form-node/index.vue b/ui/src/workflow/nodes/form-node/index.vue
new file mode 100644
index 000000000..87fe4788b
--- /dev/null
+++ b/ui/src/workflow/nodes/form-node/index.vue
@@ -0,0 +1,281 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <h5 class="title-decoration-1 mb-8">{{ $t('views.applicationWorkflow.nodeSetting') }}</h5>
+    <el-card shadow="never" class="card-never" style="--el-card-padding: 12px">
+      <el-form
+        @submit.prevent
+        :model="form_data"
+        label-position="top"
+        require-asterisk-position="right"
+        label-width="auto"
+        ref="formNodeFormRef"
+        hide-required-asterisk
+      >
+        <el-form-item
+          :label="$t('views.applicationWorkflow.nodes.formNode.formContent.label')"
+          prop="form_content_format"
+          :rules="{
+            required: true,
+            message: $t('views.applicationWorkflow.nodes.formNode.formContent.requiredMessage'),
+            trigger: 'blur'
+          }"
+        >
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span
+                  >{{ $t('views.applicationWorkflow.nodes.formNode.formContent.label')
+                  }}<span class="danger">*</span></span
+                >
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content>
+                  {{
+                    $t('views.applicationWorkflow.nodes.formNode.formContent.tooltip', {
+                      form: '{ form }'
+                    })
+                  }}
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <MdEditorMagnify
+            :title="$t('views.applicationWorkflow.nodes.formNode.formContent.label')"
+            v-model="form_data.form_content_format"
+            style="height: 150px"
+            @submitDialog="submitDialog"
+          />
+        </el-form-item>
+        <el-form-item
+          :label="$t('views.applicationWorkflow.nodes.formNode.formSetting')"
+          @click.prevent
+        >
+          <template #label>
+            <div class="flex-between">
+              <h5 class="lighter">
+                {{ $t('views.applicationWorkflow.nodes.formNode.formSetting') }}
+              </h5>
+              <el-button link type="primary" @click="openAddFormCollect()">
+                <el-icon class="mr-4">
+                  <Plus />
+                </el-icon>
+                {{ $t('common.add') }}
+              </el-button>
+            </div></template
+          >
+
+          <el-table
+            class="border"
+            v-if="form_data.form_field_list.length > 0"
+            :data="form_data.form_field_list"
+            ref="tableRef"
+            row-key="field"
+          >
+            <el-table-column
+              prop="field"
+              :label="$t('dynamicsForm.paramForm.field.label')"
+              width="95"
+            >
+              <template #default="{ row }">
+                <span :title="row.field" class="ellipsis-1">{{ row.field }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="label" :label="$t('dynamicsForm.paramForm.name.label')">
+              <template #default="{ row }">
+                <span v-if="row.label && row.label.input_type === 'TooltipLabel'">
+                  <span :title="row.label.label" class="ellipsis-1">
+                    {{ row.label.label }}
+                  </span>
+                </span>
+                <span v-else>
+                  <span :title="row.label" class="ellipsis-1">
+                    {{ row.label }}
+                  </span></span
+                >
+              </template>
+            </el-table-column>
+
+            <el-table-column :label="$t('dynamicsForm.paramForm.input_type.label')" width="110px">
+              <template #default="{ row }">
+                <el-tag type="info" class="info-tag">{{
+                  input_type_list.find((item) => item.value === row.input_type)?.label
+                }}</el-tag>
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="default_value" :label="$t('dynamicsForm.default.label')">
+              <template #default="{ row }">
+                <span :title="row.default_value" class="ellipsis-1">{{
+                  getDefaultValue(row)
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('common.required')" width="85">
+              <template #default="{ row }">
+                <div @click.stop>
+                  <el-switch disabled size="small" v-model="row.required" />
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('common.operation')" align="left" width="90">
+              <template #default="{ row, $index }">
+                <span class="mr-4">
+                  <el-tooltip effect="dark" :content="$t('common.modify')" placement="top">
+                    <el-button type="primary" text @click.stop="openEditFormCollect(row, $index)">
+                      <el-icon><EditPen /></el-icon>
+                    </el-button>
+                  </el-tooltip>
+                </span>
+                <el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
+                  <el-button type="primary" text @click="deleteField(row)">
+                    <el-icon>
+                      <Delete />
+                    </el-icon>
+                  </el-button>
+                </el-tooltip>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <AddFormCollect ref="addFormCollectRef" :addFormField="addFormField"></AddFormCollect>
+    <EditFormCollect ref="editFormCollectRef" :editFormField="editFormField"></EditFormCollect>
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import AddFormCollect from '@/workflow/common/AddFormCollect.vue'
+import EditFormCollect from '@/workflow/common/EditFormCollect.vue'
+import { type FormInstance } from 'element-plus'
+import { ref, onMounted, computed } from 'vue'
+import { input_type_list } from '@/components/dynamics-form/constructor/data'
+import { MsgError } from '@/utils/message'
+import { set, cloneDeep } from 'lodash'
+import Sortable from 'sortablejs'
+import { t } from '@/locales'
+const props = defineProps<{ nodeModel: any }>()
+const formNodeFormRef = ref<FormInstance>()
+const tableRef = ref()
+const editFormField = (form_field_data: any, field_index: number) => {
+  const _value = form_data.value.form_field_list.map((item: any, index: number) => {
+    if (field_index === index) {
+      return cloneDeep(form_field_data)
+    }
+    return cloneDeep(item)
+  })
+  form_data.value.form_field_list = _value
+  sync_form_field_list()
+}
+const addFormField = (form_field_data: any) => {
+  if (form_data.value.form_field_list.some((field: any) => field.field === form_field_data.field)) {
+    MsgError(t('views.applicationWorkflow.tip.paramErrorMessage') + form_field_data.field)
+    return
+  }
+  form_data.value.form_field_list = cloneDeep([...form_data.value.form_field_list, form_field_data])
+  sync_form_field_list()
+}
+const sync_form_field_list = () => {
+  const fields = [
+    {
+      label: t('views.applicationWorkflow.nodes.formNode.formAllContent'),
+      value: 'form_data'
+    },
+    ...form_data.value.form_field_list.map((item: any) => ({
+      value: item.field,
+      label: typeof item.label == 'string' ? item.label : item.label.label
+    }))
+  ]
+  set(props.nodeModel.properties.config, 'fields', fields)
+  props.nodeModel.clear_next_node_field(false)
+  onDragHandle()
+}
+const addFormCollectRef = ref<InstanceType<typeof AddFormCollect>>()
+const editFormCollectRef = ref<InstanceType<typeof EditFormCollect>>()
+const openAddFormCollect = () => {
+  addFormCollectRef.value?.open()
+}
+const openEditFormCollect = (form_field_data: any, index: number) => {
+  editFormCollectRef.value?.open(cloneDeep(form_field_data), index)
+}
+const deleteField = (form_field_data: any) => {
+  form_data.value.form_field_list = form_data.value.form_field_list.filter(
+    (field: any) => field.field !== form_field_data.field
+  )
+  sync_form_field_list()
+}
+const form = ref<any>({
+  is_result: true,
+  form_content_format: `${t('views.applicationWorkflow.nodes.formNode.form_content_format1')}
+{{form}}
+${t('views.applicationWorkflow.nodes.formNode.form_content_format2')}`,
+  form_field_list: []
+})
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form.value)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+const getDefaultValue = (row: any) => {
+  if (row.default_value) {
+    const default_value = row.option_list
+      ?.filter((v: any) => row.default_value.indexOf(v.value) > -1)
+      .map((v: any) => v.label)
+      .join(',')
+    if (default_value) {
+      return default_value
+    }
+    return row.default_value
+  }
+  if (row.default_value !== undefined) {
+    return row.default_value
+  }
+}
+
+const validate = () => {
+  return formNodeFormRef.value?.validate()
+}
+function submitDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'form_content_format', val)
+}
+
+// 表格排序拖拽
+function onDragHandle() {
+  if (!tableRef.value) return
+
+  // 获取表格的 tbody DOM 元素
+  const wrapper = tableRef.value.$el as HTMLElement
+  const tbody = wrapper.querySelector('.el-table__body-wrapper tbody')
+  if (!tbody) return
+  // 初始化 Sortable
+  Sortable.create(tbody as HTMLElement, {
+    animation: 150,
+    ghostClass: 'ghost-row',
+    onEnd: (evt) => {
+      if (evt.oldIndex === undefined || evt.newIndex === undefined) return
+      // 更新数据顺序
+      const items = [...form_data.value.form_field_list]
+      const [movedItem] = items.splice(evt.oldIndex, 1)
+      items.splice(evt.newIndex, 0, movedItem)
+      form_data.value.form_field_list = items
+      sync_form_field_list()
+    }
+  })
+}
+onMounted(() => {
+  set(props.nodeModel, 'validate', validate)
+  sync_form_field_list()
+  props.nodeModel.graphModel.eventCenter.emit('refresh_incoming_node_field')
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/workflow/nodes/function-lib-node/index.ts b/ui/src/workflow/nodes/function-lib-node/index.ts
new file mode 100644
index 000000000..475818c1f
--- /dev/null
+++ b/ui/src/workflow/nodes/function-lib-node/index.ts
@@ -0,0 +1,12 @@
+import FunctionLibNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class FunctionLibNode extends AppNode {
+  constructor(props: any) {
+    super(props, FunctionLibNodeVue)
+  }
+}
+export default {
+  type: 'function-lib-node',
+  model: AppNodeModel,
+  view: FunctionLibNode
+}
diff --git a/ui/src/workflow/nodes/function-lib-node/index.vue b/ui/src/workflow/nodes/function-lib-node/index.vue
new file mode 100644
index 000000000..794cabd20
--- /dev/null
+++ b/ui/src/workflow/nodes/function-lib-node/index.vue
@@ -0,0 +1,161 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <h5 class="title-decoration-1 mb-16">{{ $t('views.applicationWorkflow.nodeSetting') }}</h5>
+    <h5 class="lighter mb-8">{{ $t('common.param.inputParam') }}</h5>
+    <el-form
+      @submit.prevent
+      ref="FunctionNodeFormRef"
+      :model="chat_data"
+      label-position="top"
+      require-asterisk-position="right"
+      hide-required-asterisk
+    >
+      <el-card shadow="never" class="card-never mb-16" style="--el-card-padding: 12px">
+        <div v-if="chat_data.input_field_list?.length > 0">
+          <template v-for="(item, index) in chat_data.input_field_list" :key="item.name">
+            <el-form-item
+              :label="item.name"
+              :prop="'input_field_list.' + index + '.value'"
+              :rules="{
+                required: item.is_required,
+                message:
+                  item.source === 'reference'
+                    ? $t('views.functionLib.functionForm.form.param.selectPlaceholder')
+                    : $t('views.functionLib.functionForm.form.param.inputPlaceholder'),
+                trigger: 'blur'
+              }"
+            >
+              <template #label>
+                <div class="flex-between">
+                  <div class="flex">
+                    <span class="flex">
+                      <auto-tooltip :content="item.name" style="max-width: 130px">
+                        {{ item.name }}
+                      </auto-tooltip>
+                      <span class="danger" v-if="item.is_required">*</span></span
+                    >
+                    <el-tag type="info" class="info-tag ml-4">{{ item.type }}</el-tag>
+                  </div>
+                </div>
+              </template>
+              <NodeCascader
+                v-if="item.source === 'reference'"
+                ref="nodeCascaderRef"
+                :nodeModel="nodeModel"
+                class="w-full"
+                :placeholder="$t('views.functionLib.functionForm.form.param.selectPlaceholder')"
+                v-model="item.value"
+              />
+              <el-input
+                v-else
+                v-model="item.value"
+                :placeholder="$t('views.functionLib.functionForm.form.param.inputPlaceholder')"
+              />
+            </el-form-item>
+          </template>
+        </div>
+
+        <el-text type="info" v-else> {{ $t('common.noData') }} </el-text>
+      </el-card>
+      <el-form-item
+        :label="$t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')"
+        @click.prevent
+      >
+        <template #label>
+          <div class="flex align-center">
+            <div class="mr-4">
+              <span
+                >{{ $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
+                }}</span
+              >
+            </div>
+            <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+              <template #content>
+                {{ $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.tooltip') }}
+              </template>
+              <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+            </el-tooltip>
+          </div>
+        </template>
+        <el-switch size="small" v-model="chat_data.is_result" />
+      </el-form-item>
+    </el-form>
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { set } from 'lodash'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
+import type { FormInstance } from 'element-plus'
+import { ref, computed, onMounted } from 'vue'
+import { isLastNode } from '@/workflow/common/data'
+import applicationApi from '@/api/application'
+import { app } from '@/main'
+const props = defineProps<{ nodeModel: any }>()
+
+const nodeCascaderRef = ref()
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+const form = {
+  input_field_list: [],
+  is_result: false
+}
+
+const chat_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+const FunctionNodeFormRef = ref<FormInstance>()
+
+const validate = () => {
+  return FunctionNodeFormRef.value?.validate().catch((err) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+const update_field = () => {
+  if (!props.nodeModel.properties.node_data.function_lib_id) {
+    set(props.nodeModel.properties, 'status', 500)
+    return
+  }
+  applicationApi
+    .getFunctionLib(id, props.nodeModel.properties.node_data.function_lib_id)
+    .then((ok) => {
+      const old_input_field_list = props.nodeModel.properties.node_data.input_field_list
+      const merge_input_field_list = ok.data.input_field_list.map((item: any) => {
+        const find_field = old_input_field_list.find((old_item: any) => old_item.name == item.name)
+        if (find_field && find_field.source == item.source) {
+          return { ...item, value: JSON.parse(JSON.stringify(find_field.value)) }
+        }
+        return { ...item, value: item.source == 'reference' ? [] : '' }
+      })
+      set(props.nodeModel.properties.node_data, 'input_field_list', merge_input_field_list)
+      set(props.nodeModel.properties, 'status', ok.data.is_active ? 200 : 500)
+    })
+    .catch((err) => {
+      set(props.nodeModel.properties, 'status', 500)
+    })
+}
+
+onMounted(() => {
+  if (typeof props.nodeModel.properties.node_data?.is_result === 'undefined') {
+    if (isLastNode(props.nodeModel)) {
+      set(props.nodeModel.properties.node_data, 'is_result', true)
+    }
+  }
+  update_field()
+  set(props.nodeModel, 'validate', validate)
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/workflow/nodes/function-node/index.ts b/ui/src/workflow/nodes/function-node/index.ts
new file mode 100644
index 000000000..ab3f36edf
--- /dev/null
+++ b/ui/src/workflow/nodes/function-node/index.ts
@@ -0,0 +1,12 @@
+import FunctionNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class FunctionLibCustomNode extends AppNode {
+  constructor(props: any) {
+    super(props, FunctionNodeVue)
+  }
+}
+export default {
+  type: 'function-node',
+  model: AppNodeModel,
+  view: FunctionLibCustomNode
+}
diff --git a/ui/src/workflow/nodes/function-node/index.vue b/ui/src/workflow/nodes/function-node/index.vue
new file mode 100644
index 000000000..c720f61e2
--- /dev/null
+++ b/ui/src/workflow/nodes/function-node/index.vue
@@ -0,0 +1,214 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <h5 class="title-decoration-1 mb-16">{{ $t('views.applicationWorkflow.nodeSetting') }}</h5>
+    <div class="flex-between">
+      <h5 class="lighter mb-8">{{ $t('common.param.inputParam') }}</h5>
+      <el-button link type="primary" @click="openAddDialog()">
+        <el-icon class="mr-4"><Plus /></el-icon> {{ $t('common.add') }}
+      </el-button>
+    </div>
+    <el-form
+      @submit.prevent
+      ref="FunctionNodeFormRef"
+      :model="chat_data"
+      label-position="top"
+      require-asterisk-position="right"
+      hide-required-asterisk
+    >
+      <el-card shadow="never" class="card-never mb-16" style="--el-card-padding: 12px">
+        <div v-if="chat_data.input_field_list?.length > 0">
+          <template v-for="(item, index) in chat_data.input_field_list" :key="index">
+            <el-form-item
+              :label="item.name"
+              :prop="'input_field_list.' + index + '.value'"
+              :rules="{
+                required: item.is_required,
+                message:
+                  item.source === 'reference'
+                    ? $t('views.functionLib.functionForm.form.param.selectPlaceholder')
+                    : $t('views.functionLib.functionForm.form.param.inputPlaceholder'),
+                trigger: 'blur'
+              }"
+            >
+              <template #label>
+                <div class="flex-between">
+                  <div class="flex">
+                    <span class="flex">
+                      <auto-tooltip :content="item.name" style="max-width: 130px">
+                        {{ item.name }}
+                      </auto-tooltip>
+                      <span class="danger" v-if="item.is_required">*</span>
+                    </span>
+                    <el-tag type="info" class="info-tag ml-4">{{ item.type }}</el-tag>
+                  </div>
+                  <div>
+                    <el-button text @click.stop="openAddDialog(item, index)">
+                      <el-icon><EditPen /></el-icon>
+                    </el-button>
+                    <el-button text @click="deleteField(index)" style="margin-left: 4px !important">
+                      <el-icon>
+                        <Delete />
+                      </el-icon>
+                    </el-button>
+                  </div>
+                </div>
+              </template>
+              <NodeCascader
+                v-if="item.source === 'reference'"
+                ref="nodeCascaderRef"
+                :nodeModel="nodeModel"
+                class="w-full"
+                :placeholder="$t('views.functionLib.functionForm.form.param.selectPlaceholder')"
+                v-model="item.value"
+                :width="100"
+              />
+              <el-input
+                v-else
+                v-model="item.value"
+                :placeholder="$t('views.functionLib.functionForm.form.param.inputPlaceholder')"
+              />
+            </el-form-item>
+          </template>
+        </div>
+
+        <el-text type="info" v-else> {{ $t('common.noData') }} </el-text>
+      </el-card>
+
+      <h5 class="lighter mb-8">
+        {{ $t('views.functionLib.functionForm.form.param.code') }}
+      </h5>
+      <div class="mb-8" v-if="showEditor">
+        <CodemirrorEditor
+          :title="$t('views.functionLib.functionForm.form.param.code')"
+          v-model="chat_data.code"
+          @wheel="wheel"
+          style="height: 130px !important"
+          @submitDialog="submitCodemirrorEditor"
+        />
+      </div>
+
+      <el-form-item
+        :label="$t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')"
+        @click.prevent
+      >
+        <template #label>
+          <div class="flex align-center">
+            <div class="mr-4">
+              <span>{{
+                $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
+              }}</span>
+            </div>
+            <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+              <template #content>
+                {{ $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.tooltip') }}
+              </template>
+              <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+            </el-tooltip>
+          </div>
+        </template>
+        <el-switch size="small" v-model="chat_data.is_result" />
+      </el-form-item>
+    </el-form>
+    <FieldFormDialog ref="FieldFormDialogRef" @refresh="refreshFieldList" />
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { cloneDeep, set } from 'lodash'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
+import type { FormInstance } from 'element-plus'
+import { ref, computed, onMounted } from 'vue'
+import FieldFormDialog from '@/views/function-lib/component/FieldFormDialog.vue'
+import { isLastNode } from '@/workflow/common/data'
+
+const props = defineProps<{ nodeModel: any }>()
+
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+const FieldFormDialogRef = ref()
+const nodeCascaderRef = ref()
+
+const form = {
+  code: '',
+  input_field_list: [],
+  is_result: false
+}
+
+const currentIndex = ref<any>(null)
+const showEditor = ref(false)
+
+const chat_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+const FunctionNodeFormRef = ref<FormInstance>()
+
+const validate = () => {
+  return FunctionNodeFormRef.value?.validate().catch((err) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+function submitCodemirrorEditor(val: string) {
+  set(props.nodeModel.properties.node_data, 'code', val)
+}
+
+function openAddDialog(data?: any, index?: any) {
+  if (typeof index !== 'undefined') {
+    currentIndex.value = index
+  }
+
+  FieldFormDialogRef.value.open(data)
+}
+
+function deleteField(index: any) {
+  const list: any = cloneDeep(props.nodeModel.properties.node_data.input_field_list)
+  list.splice(index, 1)
+  set(props.nodeModel.properties.node_data, 'input_field_list', list)
+}
+
+function refreshFieldList(data: any) {
+  const list = cloneDeep(props.nodeModel.properties.node_data.input_field_list)
+  const obj = {
+    ...data,
+    value: data.source === 'reference' ? [] : ''
+  }
+  if (currentIndex.value !== null) {
+    list.splice(currentIndex.value, 1, obj)
+  } else {
+    list.push(obj)
+  }
+  set(props.nodeModel.properties.node_data, 'input_field_list', list)
+  currentIndex.value = null
+}
+
+onMounted(() => {
+  if (typeof props.nodeModel.properties.node_data?.is_result === 'undefined') {
+    if (isLastNode(props.nodeModel)) {
+      set(props.nodeModel.properties.node_data, 'is_result', true)
+    }
+  }
+  set(props.nodeModel, 'validate', validate)
+  setTimeout(() => {
+    showEditor.value = true
+  }, 100)
+})
+</script>
+<style lang="scss"></style>
diff --git a/ui/src/workflow/nodes/image-generate/index.ts b/ui/src/workflow/nodes/image-generate/index.ts
new file mode 100644
index 000000000..5afc2e571
--- /dev/null
+++ b/ui/src/workflow/nodes/image-generate/index.ts
@@ -0,0 +1,14 @@
+import ImageGenerateNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+
+class RerankerNode extends AppNode {
+  constructor(props: any) {
+    super(props, ImageGenerateNodeVue)
+  }
+}
+
+export default {
+  type: 'image-generate-node',
+  model: AppNodeModel,
+  view: RerankerNode
+}
diff --git a/ui/src/workflow/nodes/image-generate/index.vue b/ui/src/workflow/nodes/image-generate/index.vue
new file mode 100644
index 000000000..d71f3adf9
--- /dev/null
+++ b/ui/src/workflow/nodes/image-generate/index.vue
@@ -0,0 +1,266 @@
+<template>
+  <NodeContainer :node-model="nodeModel">
+    <h5 class="title-decoration-1 mb-8">{{ $t('views.applicationWorkflow.nodeSetting') }}</h5>
+    <el-card shadow="never" class="card-never">
+      <el-form
+        @submit.prevent
+        :model="form_data"
+        label-position="top"
+        require-asterisk-position="right"
+        label-width="auto"
+        ref="aiChatNodeFormRef"
+        hide-required-asterisk
+      >
+        <el-form-item
+          :label="$t('views.applicationWorkflow.nodes.imageGenerateNode.model.label')"
+          prop="model_id"
+          :rules="{
+            required: true,
+            message: $t('views.applicationWorkflow.nodes.imageGenerateNode.model.requiredMessage'),
+            trigger: 'change'
+          }"
+        >
+          <template #label>
+            <div class="flex-between w-full">
+              <div>
+                <span
+                  >{{ $t('views.applicationWorkflow.nodes.imageGenerateNode.model.label')
+                  }}<span class="danger">*</span></span
+                >
+              </div>
+              <el-button
+                :disabled="!form_data.model_id"
+                type="primary"
+                link
+                @click="openAIParamSettingDialog(form_data.model_id)"
+                @refreshForm="refreshParam"
+              >
+                <el-icon><Setting /></el-icon>
+              </el-button>
+            </div>
+          </template>
+
+          <ModelSelect
+            @change="model_change"
+            @wheel="wheel"
+            :teleported="false"
+            v-model="form_data.model_id"
+            :placeholder="
+              $t('views.applicationWorkflow.nodes.imageGenerateNode.model.requiredMessage')
+            "
+            :options="modelOptions"
+            showFooter
+            :model-type="'TTI'"
+          ></ModelSelect>
+        </el-form-item>
+
+        <el-form-item
+          :label="$t('views.applicationWorkflow.nodes.imageGenerateNode.prompt.label')"
+          prop="prompt"
+          :rules="{
+            required: true,
+            message: $t('views.application.applicationForm.form.prompt.requiredMessage'),
+            trigger: 'blur'
+          }"
+        >
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span
+                  >{{ $t('views.applicationWorkflow.nodes.imageGenerateNode.prompt.label')
+                  }}<span class="danger">*</span></span
+                >
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content
+                  >{{ $t('views.applicationWorkflow.nodes.imageGenerateNode.prompt.tooltip') }}
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <MdEditorMagnify
+            @wheel="wheel"
+            :title="$t('views.applicationWorkflow.nodes.imageGenerateNode.prompt.label')"
+            v-model="form_data.prompt"
+            style="height: 150px"
+            @submitDialog="submitDialog"
+          />
+        </el-form-item>
+        <el-form-item
+          :label="$t('views.applicationWorkflow.nodes.imageGenerateNode.negative_prompt.label')"
+          prop="prompt"
+          :rules="{
+            required: false,
+            message: $t('views.application.applicationForm.form.prompt.requiredMessage'),
+            trigger: 'blur'
+          }"
+        >
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span>{{
+                  $t('views.applicationWorkflow.nodes.imageGenerateNode.negative_prompt.label')
+                }}</span>
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content
+                  >{{
+                    $t('views.applicationWorkflow.nodes.imageGenerateNode.negative_prompt.tooltip')
+                  }}
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <MdEditorMagnify
+            @wheel="wheel"
+            :title="$t('views.applicationWorkflow.nodes.imageGenerateNode.negative_prompt.label')"
+            v-model="form_data.negative_prompt"
+            :placeholder="
+              $t('views.applicationWorkflow.nodes.imageGenerateNode.negative_prompt.placeholder')
+            "
+            style="height: 150px"
+            @submitDialog="submitNegativeDialog"
+          />
+        </el-form-item>
+        <el-form-item
+          :label="$t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')"
+          @click.prevent
+        >
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span
+                  >{{ $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
+                  }}</span
+                >
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content>
+                  {{ $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.tooltip') }}
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <el-switch size="small" v-model="form_data.is_result" />
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshParam" />
+  </NodeContainer>
+</template>
+
+<script setup lang="ts">
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import { computed, onMounted, ref } from 'vue'
+import { groupBy, set } from 'lodash'
+import applicationApi from '@/api/application'
+import { app } from '@/main'
+import useStore from '@/stores'
+import type { FormInstance } from 'element-plus'
+import AIModeParamSettingDialog from '@/views/application/component/AIModeParamSettingDialog.vue'
+import { t } from '@/locales'
+const { model } = useStore()
+
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+
+const props = defineProps<{ nodeModel: any }>()
+const modelOptions = ref<any>(null)
+const AIModeParamSettingDialogRef = ref<InstanceType<typeof AIModeParamSettingDialog>>()
+
+const aiChatNodeFormRef = ref<FormInstance>()
+const validate = () => {
+  return aiChatNodeFormRef.value?.validate().catch((err) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+
+const defaultPrompt = `{{${t('views.applicationWorkflow.nodes.startNode.label')}.question}}`
+
+const form = {
+  model_id: '',
+  system: '',
+  prompt: defaultPrompt,
+  negative_prompt: '',
+  dialogue_number: 0,
+  dialogue_type: 'NODE',
+  is_result: true,
+  temperature: null,
+  max_tokens: null,
+  image_list: ['start-node', 'image']
+}
+
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+function getModel() {
+  if (id) {
+    applicationApi.getApplicationTTIModel(id).then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  } else {
+    model.asyncGetModel().then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  }
+}
+
+const model_change = () => {
+  if (form_data.value.model_id) {
+    AIModeParamSettingDialogRef.value?.reset_default(form_data.value.model_id, id)
+  } else {
+    refreshParam({})
+  }
+}
+
+const openAIParamSettingDialog = (modelId: string) => {
+  if (modelId) {
+    AIModeParamSettingDialogRef.value?.open(modelId, id, form_data.value.model_params_setting)
+  }
+}
+
+function refreshParam(data: any) {
+  set(props.nodeModel.properties.node_data, 'model_params_setting', data)
+}
+
+function submitDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'prompt', val)
+}
+
+function submitNegativeDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'negative_prompt', val)
+}
+
+onMounted(() => {
+  getModel()
+
+  set(props.nodeModel, 'validate', validate)
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/ui/src/workflow/nodes/image-understand/index.ts b/ui/src/workflow/nodes/image-understand/index.ts
new file mode 100644
index 000000000..06695d3c9
--- /dev/null
+++ b/ui/src/workflow/nodes/image-understand/index.ts
@@ -0,0 +1,14 @@
+import ImageUnderstandNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+
+class RerankerNode extends AppNode {
+  constructor(props: any) {
+    super(props, ImageUnderstandNodeVue)
+  }
+}
+
+export default {
+  type: 'image-understand-node',
+  model: AppNodeModel,
+  view: RerankerNode
+}
diff --git a/ui/src/workflow/nodes/image-understand/index.vue b/ui/src/workflow/nodes/image-understand/index.vue
new file mode 100644
index 000000000..e2ac7c13b
--- /dev/null
+++ b/ui/src/workflow/nodes/image-understand/index.vue
@@ -0,0 +1,280 @@
+<template>
+  <NodeContainer :node-model="nodeModel">
+    <h5 class="title-decoration-1 mb-8">{{ $t('views.applicationWorkflow.nodeSetting') }}</h5>
+    <el-card shadow="never" class="card-never">
+      <el-form
+        @submit.prevent
+        :model="form_data"
+        label-position="top"
+        require-asterisk-position="right"
+        label-width="auto"
+        ref="aiChatNodeFormRef"
+        hide-required-asterisk
+      >
+        <el-form-item
+          :label="$t('views.applicationWorkflow.nodes.imageUnderstandNode.model.label')"
+          prop="model_id"
+          :rules="{
+            required: true,
+            message: $t(
+              'views.applicationWorkflow.nodes.imageUnderstandNode.model.requiredMessage'
+            ),
+            trigger: 'change'
+          }"
+        >
+          <template #label>
+            <div class="flex-between w-full">
+              <div>
+                <span
+                  >{{ t('views.applicationWorkflow.nodes.imageUnderstandNode.model.label')
+                  }}<span class="danger">*</span></span
+                >
+              </div>
+              <el-button
+                :disabled="!form_data.model_id"
+                type="primary"
+                link
+                @click="openAIParamSettingDialog(form_data.model_id)"
+                @refreshForm="refreshParam"
+              >
+                <el-icon><Setting /></el-icon>
+              </el-button>
+            </div>
+          </template>
+
+          <ModelSelect
+            @wheel="wheel"
+            :teleported="false"
+            v-model="form_data.model_id"
+            :placeholder="
+              $t('views.applicationWorkflow.nodes.imageUnderstandNode.model.requiredMessage')
+            "
+            :options="modelOptions"
+            showFooter
+            :model-type="'IMAGE'"
+          ></ModelSelect>
+        </el-form-item>
+
+        <el-form-item :label="$t('views.application.applicationForm.form.roleSettings.label')">
+          <MdEditorMagnify
+            :title="$t('views.application.applicationForm.form.roleSettings.label')"
+            v-model="form_data.system"
+            style="height: 100px"
+            @submitDialog="submitSystemDialog"
+            :placeholder="$t('views.application.applicationForm.form.roleSettings.label')"
+          />
+        </el-form-item>
+        <el-form-item
+          :label="$t('views.application.applicationForm.form.prompt.label')"
+          prop="prompt"
+          :rules="{
+            required: true,
+            message: $t('views.application.applicationForm.form.prompt.requiredMessage'),
+            trigger: 'blur'
+          }"
+        >
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span
+                  >{{ $t('views.application.applicationForm.form.prompt.label')
+                  }}<span class="danger">*</span></span
+                >
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content
+                  >{{ $t('views.application.applicationForm.form.prompt.tooltip') }}
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <MdEditorMagnify
+            @wheel="wheel"
+            :title="$t('views.application.applicationForm.form.prompt.label')"
+            v-model="form_data.prompt"
+            style="height: 150px"
+            @submitDialog="submitDialog"
+          />
+        </el-form-item>
+        <el-form-item>
+          <template #label>
+            <div class="flex-between">
+              <div>{{ $t('views.application.applicationForm.form.historyRecord.label') }}</div>
+              <el-select v-model="form_data.dialogue_type" type="small" style="width: 100px">
+                <el-option :label="$t('views.applicationWorkflow.node')" value="NODE" />
+                <el-option :label="$t('views.applicationWorkflow.workflow')" value="WORKFLOW" />
+              </el-select>
+            </div>
+          </template>
+          <el-input-number
+            v-model="form_data.dialogue_number"
+            :min="0"
+            :value-on-clear="0"
+            controls-position="right"
+            class="w-full"
+            :step="1"
+            :step-strictly="true"
+          />
+        </el-form-item>
+        <el-form-item
+          :label="$t('views.applicationWorkflow.nodes.imageUnderstandNode.image.label')"
+          :rules="{
+            type: 'array',
+            required: true,
+            message: $t(
+              'views.applicationWorkflow.nodes.imageUnderstandNode.image.requiredMessage'
+            ),
+            trigger: 'change'
+          }"
+        >
+          <template #label
+            >{{ $t('views.applicationWorkflow.nodes.imageUnderstandNode.image.label')
+            }}<span class="danger">*</span></template
+          >
+          <NodeCascader
+            ref="nodeCascaderRef"
+            :nodeModel="nodeModel"
+            class="w-full"
+            :placeholder="
+              $t('views.applicationWorkflow.nodes.imageUnderstandNode.image.requiredMessage')
+            "
+            v-model="form_data.image_list"
+          />
+        </el-form-item>
+        <el-form-item
+          :label="$t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')"
+          @click.prevent
+        >
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span
+                  >{{ $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
+                  }}</span
+                >
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content>
+                  {{ $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.tooltip') }}
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <el-switch size="small" v-model="form_data.is_result" />
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshParam" />
+  </NodeContainer>
+</template>
+
+<script setup lang="ts">
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import { computed, onMounted, ref } from 'vue'
+import { groupBy, set } from 'lodash'
+import applicationApi from '@/api/application'
+import { app } from '@/main'
+import useStore from '@/stores'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
+import type { FormInstance } from 'element-plus'
+import AIModeParamSettingDialog from '@/views/application/component/AIModeParamSettingDialog.vue'
+import { t } from '@/locales'
+const { model } = useStore()
+
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+
+const props = defineProps<{ nodeModel: any }>()
+const modelOptions = ref<any>(null)
+const AIModeParamSettingDialogRef = ref<InstanceType<typeof AIModeParamSettingDialog>>()
+
+const aiChatNodeFormRef = ref<FormInstance>()
+const nodeCascaderRef = ref()
+const validate = () => {
+  return Promise.all([
+    nodeCascaderRef.value ? nodeCascaderRef.value.validate() : Promise.resolve(''),
+    aiChatNodeFormRef.value?.validate()
+  ]).catch((err: any) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+
+const defaultPrompt = `{{${t('views.applicationWorkflow.nodes.startNode.label')}.question}}`
+
+const form = {
+  model_id: '',
+  system: '',
+  prompt: defaultPrompt,
+  dialogue_number: 0,
+  dialogue_type: 'NODE',
+  is_result: true,
+  temperature: null,
+  max_tokens: null,
+  image_list: ['start-node', 'image']
+}
+
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+function getModel() {
+  if (id) {
+    applicationApi.getApplicationImageModel(id).then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  } else {
+    model.asyncGetModel().then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  }
+}
+
+function submitSystemDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'system', val)
+}
+
+function submitDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'prompt', val)
+}
+
+const openAIParamSettingDialog = (modelId: string) => {
+  if (modelId) {
+    AIModeParamSettingDialogRef.value?.open(modelId, id, form_data.value.model_params_setting)
+  }
+}
+
+function refreshParam(data: any) {
+  set(props.nodeModel.properties.node_data, 'model_params_setting', data)
+}
+
+onMounted(() => {
+  getModel()
+
+  set(props.nodeModel, 'validate', validate)
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/ui/src/workflow/nodes/mcp-node/index.ts b/ui/src/workflow/nodes/mcp-node/index.ts
new file mode 100644
index 000000000..d626b0c62
--- /dev/null
+++ b/ui/src/workflow/nodes/mcp-node/index.ts
@@ -0,0 +1,14 @@
+import McpNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+
+class McpNode extends AppNode {
+  constructor(props: any) {
+    super(props, McpNodeVue)
+  }
+}
+
+export default {
+  type: 'mcp-node',
+  model: AppNodeModel,
+  view: McpNode
+}
diff --git a/ui/src/workflow/nodes/mcp-node/index.vue b/ui/src/workflow/nodes/mcp-node/index.vue
new file mode 100644
index 000000000..7cba4d51e
--- /dev/null
+++ b/ui/src/workflow/nodes/mcp-node/index.vue
@@ -0,0 +1,443 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <h5 class="title-decoration-1 mb-8">{{ $t('views.applicationWorkflow.nodeSetting') }}</h5>
+    <div class="border-r-4 p-8-12 mb-8 layout-bg lighter">
+      <el-form
+        @submit.prevent
+        :model="form_data"
+        label-position="top"
+        require-asterisk-position="right"
+        label-width="auto"
+        ref="replyNodeFormRef"
+        hide-required-asterisk
+      >
+        <el-form-item label="MCP Server Config">
+          <MdEditorMagnify
+            @wheel="wheel"
+            title="MCP Server Config"
+            v-model="form_data.mcp_servers"
+            style="height: 150px"
+            @submitDialog="submitDialog"
+            :placeholder="mcpServerJson"
+          />
+        </el-form-item>
+        <el-form-item>
+          <template v-slot:label>
+            <div class="flex-between">
+              <span>{{ $t('views.applicationWorkflow.nodes.mcpNode.tool') }}</span>
+              <el-button type="primary" link @click="getTools()">
+                <el-icon class="mr-4">
+                  <Plus />
+                </el-icon>
+                {{ $t('views.applicationWorkflow.nodes.mcpNode.getTool') }}
+              </el-button>
+            </div>
+          </template>
+          <el-select v-model="form_data.mcp_tool" @change="changeTool" filterable>
+            <el-option
+              v-for="item in form_data.mcp_tools"
+              :key="item.value"
+              :label="item.name"
+              :value="item.name"
+              class="flex align-center"
+            >
+              <el-tooltip
+                effect="dark"
+                :content="item.description"
+                placement="top-start"
+                popper-class="max-w-350"
+              >
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+
+              <span class="ml-4">{{ item.name }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </div>
+    <h5 class="title-decoration-1 mb-8">
+      {{ $t('views.applicationWorkflow.nodes.mcpNode.toolParam') }}
+    </h5>
+    <template v-if="form_data.tool_params[form_data.params_nested]">
+      <div class="p-8-12" v-if="!form_data.mcp_tool">
+        <el-text type="info">{{ $t('common.noData') }}</el-text>
+      </div>
+      <div v-else class="border-r-4 p-8-12 mb-8 layout-bg lighter">
+        <el-form
+          ref="dynamicsFormRef"
+          label-position="top"
+          v-loading="loading"
+          require-asterisk-position="right"
+          :hide-required-asterisk="true"
+          v-if="form_data.mcp_tool"
+          @submit.prevent
+        >
+          <el-form-item
+            v-for="item in form_data.tool_form_field"
+            :key="item.field"
+            :required="item.required"
+          >
+            <template #label>
+              <div class="flex-between">
+                <div>
+                  <TooltipLabel :label="item.label.label" :tooltip="item.label.attrs.tooltip" />
+                  <span v-if="item.required" class="danger">*</span>
+                </div>
+                <el-select
+                  :teleported="false"
+                  v-model="item.source"
+                  size="small"
+                  style="width: 85px"
+                  @change="form_data.tool_params[form_data.params_nested] = {}"
+                >
+                  <el-option
+                    :label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.reference')"
+                    value="referencing"
+                  />
+                  <el-option
+                    :label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.custom')"
+                    value="custom"
+                  />
+                </el-select>
+              </div>
+            </template>
+            <el-input
+              v-if="item.source === 'custom' && item.input_type === 'TextInput'"
+              v-model="form_data.tool_params[form_data.params_nested][item.label.label]"
+            />
+            <el-input-number
+              v-else-if="item.source === 'custom' && item.input_type === 'NumberInput'"
+              v-model="form_data.tool_params[form_data.params_nested][item.label.label]"
+            />
+            <el-switch
+              v-else-if="item.source === 'custom' && item.input_type === 'SwitchInput'"
+              v-model="form_data.tool_params[form_data.params_nested][item.label.label]"
+            />
+            <el-input
+              v-else-if="item.source === 'custom' && item.input_type === 'JsonInput'"
+              v-model="form_data.tool_params[form_data.params_nested][item.label.label]"
+              type="textarea"
+            />
+            <NodeCascader
+              v-if="item.source === 'referencing'"
+              ref="nodeCascaderRef2"
+              :nodeModel="nodeModel"
+              class="w-full"
+              :placeholder="$t('views.applicationWorkflow.variable.placeholder')"
+              v-model="form_data.tool_params[form_data.params_nested][item.label.label]"
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+    </template>
+    <template v-else>
+      <div class="p-8-12"  v-if="!form_data.mcp_tool">
+        <el-text type="info">{{ $t('common.noData') }}</el-text>
+      </div>
+      <div v-else class="border-r-4 p-8-12 mb-8 layout-bg lighter">
+        <el-form
+          ref="dynamicsFormRef"
+          label-position="top"
+          v-loading="loading"
+          require-asterisk-position="right"
+          :hide-required-asterisk="true"
+          v-if="form_data.mcp_tool"
+          @submit.prevent
+        >
+          <el-form-item
+            v-for="item in form_data.tool_form_field"
+            :key="item.field"
+            :required="item.required"
+          >
+            <template #label>
+              <div class="flex-between">
+                <div>
+                  <TooltipLabel :label="item.label.label" :tooltip="item.label.attrs.tooltip" />
+                  <span v-if="item.required" class="danger">*</span>
+                </div>
+                <el-select
+                  :teleported="false"
+                  v-model="item.source"
+                  size="small"
+                  style="width: 85px"
+                >
+                  <el-option
+                    :label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.reference')"
+                    value="referencing"
+                  />
+                  <el-option
+                    :label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.custom')"
+                    value="custom"
+                  />
+                </el-select>
+              </div>
+            </template>
+            <el-input
+              v-if="item.source === 'custom' && item.input_type === 'TextInput'"
+              v-model="form_data.tool_params[item.label.label]"
+            />
+            <el-input-number
+              v-else-if="item.source === 'custom' && item.input_type === 'NumberInput'"
+              v-model="form_data.tool_params[item.label.label]"
+            />
+            <el-switch
+              v-else-if="item.source === 'custom' && item.input_type === 'SwitchInput'"
+              v-model="form_data.tool_params[item.label.label]"
+            />
+            <el-input
+              v-else-if="item.source === 'custom' && item.input_type === 'JsonInput'"
+              v-model="form_data.tool_params[item.label.label]"
+              type="textarea"
+            />
+            <NodeCascader
+              v-if="item.source === 'referencing'"
+              ref="nodeCascaderRef2"
+              :nodeModel="nodeModel"
+              class="w-full"
+              :placeholder="$t('views.applicationWorkflow.variable.placeholder')"
+              v-model="form_data.tool_params[item.label.label]"
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+    </template>
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { cloneDeep, set } from 'lodash'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import { computed, onMounted, ref } from 'vue'
+import { isLastNode } from '@/workflow/common/data'
+import applicationApi from '@/api/application'
+import { t } from '@/locales'
+import { MsgError, MsgSuccess } from '@/utils/message'
+import TooltipLabel from '@/components/dynamics-form/items/label/TooltipLabel.vue'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
+
+const props = defineProps<{ nodeModel: any }>()
+
+const dynamicsFormRef = ref()
+const loading = ref(false)
+
+const mcpServerJson = `{
+  "math": {
+    "url": "your_server",
+    "transport": "sse"
+  }
+}`
+
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+const form = {
+  mcp_tool: '',
+  mcp_tools: [],
+  mcp_servers: '',
+  mcp_server: '',
+  tool_params: {},
+  tool_form_field: [],
+  params_nested: ''
+}
+
+function submitDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'mcp_servers', val)
+}
+
+function getTools() {
+  if (!form_data.value.mcp_servers) {
+    MsgError(t('views.applicationWorkflow.nodes.mcpNode.mcpServerTip'))
+    return
+  }
+  try {
+    JSON.parse(form_data.value.mcp_servers)
+  } catch (e) {
+    MsgError(t('views.applicationWorkflow.nodes.mcpNode.mcpServerTip'))
+    return
+  }
+  applicationApi
+    .getMcpTools({ mcp_servers: form_data.value.mcp_servers }, loading)
+    .then((res: any) => {
+      form_data.value.mcp_tools = res.data
+      MsgSuccess(t('views.applicationWorkflow.nodes.mcpNode.getToolsSuccess'))
+      // 修改了json，刷新mcp_server
+      form_data.value.mcp_server = form_data.value.mcp_tools.filter(
+        (item: any) => item.name === form_data.value.mcp_tool
+      )[0].server
+    })
+}
+
+function changeTool() {
+  form_data.value.mcp_server = form_data.value.mcp_tools.filter(
+    (item: any) => item.name === form_data.value.mcp_tool
+  )[0].server
+  // console.log(form_data.value.mcp_server)
+
+  const args_schema = form_data.value.mcp_tools.filter(
+    (item: any) => item.name === form_data.value.mcp_tool
+  )[0].args_schema
+  form_data.value.tool_form_field = []
+  for (const item in args_schema.properties) {
+    let params = args_schema.properties[item].properties
+    if (params) {
+      form_data.value.params_nested = item
+      for (const item2 in params) {
+        let input_type = 'TextInput'
+        if (params[item2].type === 'string') {
+          input_type = 'TextInput'
+        } else if (params[item2].type === 'number') {
+          input_type = 'NumberInput'
+        } else if (params[item2].type === 'boolean') {
+          input_type = 'SwitchInput'
+        } else if (params[item2].type === 'array') {
+          input_type = 'JsonInput'
+        } else if (params[item2].type === 'object') {
+          input_type = 'JsonInput'
+        }
+        console.log(params[item2])
+        form_data.value.tool_form_field.push({
+          field: item2,
+          label: {
+            input_type: 'TooltipLabel',
+            label: item2,
+            attrs: { tooltip: params[item2].description },
+            props_info: {}
+          },
+          input_type: input_type,
+          source: 'referencing',
+          required: args_schema.properties[item].required?.indexOf(item2) !== -1,
+          props_info: {
+            rules: [
+              {
+                required: args_schema.properties[item].required?.indexOf(item2) !== -1,
+                message: t('dynamicsForm.tip.requiredMessage'),
+                trigger: 'blur'
+              }
+            ]
+          }
+        })
+      }
+    } else {
+      form_data.value.params_nested = ''
+      let input_type = 'TextInput'
+      if (args_schema.properties[item].type === 'string') {
+        input_type = 'TextInput'
+      } else if (args_schema.properties[item].type === 'number') {
+        input_type = 'NumberInput'
+      } else if (args_schema.properties[item].type === 'boolean') {
+        input_type = 'SwitchInput'
+      } else if (args_schema.properties[item].type === 'array') {
+        input_type = 'JsonInput'
+      } else if (args_schema.properties[item].type === 'object') {
+        input_type = 'JsonInput'
+      }
+      console.log(args_schema.properties[item])
+      form_data.value.tool_form_field.push({
+        field: item,
+        label: {
+          input_type: 'TooltipLabel',
+          label: item,
+          attrs: { tooltip: args_schema.properties[item].description },
+          props_info: {}
+        },
+        input_type: input_type,
+        source: 'referencing',
+        required: args_schema.required?.indexOf(item) !== -1,
+        props_info: {
+          rules: [
+            {
+              required: args_schema.required?.indexOf(item) !== -1,
+              message: t('dynamicsForm.tip.requiredMessage'),
+              trigger: 'blur'
+            }
+          ]
+        }
+      })
+    }
+  }
+  //
+  if (form_data.value.params_nested) {
+    form_data.value.tool_params = { [form_data.value.params_nested]: {} }
+  } else {
+    form_data.value.tool_params = {}
+  }
+}
+
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+const replyNodeFormRef = ref()
+
+const validate = async () => {
+  // 对动态表单，只验证必填字段
+  if (dynamicsFormRef.value) {
+    const requiredFields = form_data.value.tool_form_field
+      .filter((item: any) => item.required)
+      .map((item: any) => item.label.label)
+
+    if (requiredFields.length > 0) {
+      for (const item of requiredFields) {
+        if (form_data.value.params_nested) {
+          if (!form_data.value.tool_params[form_data.value.params_nested][item]) {
+            return Promise.reject({
+              node: props.nodeModel,
+              errMessage: item + t('dynamicsForm.tip.requiredMessage')
+            })
+          }
+        } else {
+          // 这里是没有嵌套的情况
+          if (!form_data.value.tool_params[item]) {
+            return Promise.reject({
+              node: props.nodeModel,
+              errMessage: item + t('dynamicsForm.tip.requiredMessage')
+            })
+          }
+        }
+      }
+    }
+  }
+  if (replyNodeFormRef.value) {
+    const form = cloneDeep(form_data.value)
+    if (!form.mcp_servers) {
+      return Promise.reject({
+        node: props.nodeModel,
+        errMessage: t('views.applicationWorkflow.nodes.mcpNode.mcpServerTip')
+      })
+    }
+    if (!form.mcp_tool) {
+      return Promise.reject({
+        node: props.nodeModel,
+        errMessage: t('views.applicationWorkflow.nodes.mcpNode.mcpToolTip')
+      })
+    }
+  }
+}
+
+onMounted(() => {
+  if (typeof props.nodeModel.properties.node_data?.is_result === 'undefined') {
+    if (isLastNode(props.nodeModel)) {
+      set(props.nodeModel.properties.node_data, 'is_result', true)
+    }
+  }
+
+  set(props.nodeModel, 'validate', validate)
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/workflow/nodes/question-node/index.ts b/ui/src/workflow/nodes/question-node/index.ts
new file mode 100644
index 000000000..324c24683
--- /dev/null
+++ b/ui/src/workflow/nodes/question-node/index.ts
@@ -0,0 +1,12 @@
+import QuestionNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class QuestionNode extends AppNode {
+  constructor(props: any) {
+    super(props, QuestionNodeVue)
+  }
+}
+export default {
+  type: 'question-node',
+  model: AppNodeModel,
+  view: QuestionNode
+}
diff --git a/ui/src/workflow/nodes/question-node/index.vue b/ui/src/workflow/nodes/question-node/index.vue
new file mode 100644
index 000000000..f9e9559a9
--- /dev/null
+++ b/ui/src/workflow/nodes/question-node/index.vue
@@ -0,0 +1,246 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <h5 class="title-decoration-1 mb-8">{{ $t('views.applicationWorkflow.nodeSetting') }}</h5>
+    <el-card shadow="never" class="card-never" style="--el-card-padding: 12px">
+      <el-form
+        @submit.prevent
+        :model="form_data"
+        label-position="top"
+        require-asterisk-position="right"
+        class="mb-24"
+        label-width="auto"
+        ref="questionNodeFormRef"
+        hide-required-asterisk
+      >
+        <el-form-item
+          :label="$t('views.application.applicationForm.form.aiModel.label')"
+          prop="model_id"
+          :rules="{
+            required: true,
+            message: $t('views.application.applicationForm.form.aiModel.placeholder'),
+            trigger: 'change'
+          }"
+        >
+          <template #label>
+            <div class="flex-between">
+              <div>
+                <span
+                  >{{ $t('views.application.applicationForm.form.aiModel.label')
+                  }}<span class="danger">*</span></span
+                >
+              </div>
+              <el-button
+                type="primary"
+                link
+                :disabled="!form_data.model_id"
+                @click="openAIParamSettingDialog(form_data.model_id)"
+                @refreshForm="refreshParam"
+              >
+                <el-icon><Setting /></el-icon>
+              </el-button>
+            </div>
+          </template>
+          <ModelSelect
+            @change="model_change"
+            @wheel="wheel"
+            :teleported="false"
+            v-model="form_data.model_id"
+            :placeholder="$t('views.application.applicationForm.form.aiModel.placeholder')"
+            :options="modelOptions"
+            @submitModel="getModel"
+            showFooter
+            :model-type="'LLM'"
+          ></ModelSelect>
+        </el-form-item>
+        <el-form-item :label="$t('views.application.applicationForm.form.roleSettings.label')">
+          <MdEditorMagnify
+            :title="$t('views.application.applicationForm.form.roleSettings.label')"
+            v-model="form_data.system"
+            style="height: 100px"
+            @submitDialog="submitSystemDialog"
+            :placeholder="$t('views.application.applicationForm.form.roleSettings.label')"
+          />
+        </el-form-item>
+        <el-form-item
+          :label="$t('views.application.applicationForm.form.prompt.label')"
+          prop="prompt"
+          :rules="{
+            required: true,
+            message: $t('views.application.applicationForm.form.prompt.tooltip'),
+            trigger: 'blur'
+          }"
+        >
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span
+                  >{{ $t('views.application.applicationForm.form.prompt.label')
+                  }}<span class="danger">*</span></span
+                >
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content>{{
+                  $t('views.application.applicationForm.form.prompt.tooltip')
+                }}</template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+                <el-icon><EditPen /></el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+          <MdEditorMagnify
+            @wheel="wheel"
+            :title="$t('views.application.applicationForm.form.prompt.label')"
+            v-model="form_data.prompt"
+            style="height: 150px"
+            @submitDialog="submitDialog"
+          />
+        </el-form-item>
+        <el-form-item :label="$t('views.application.applicationForm.form.historyRecord.label')">
+          <el-input-number
+            v-model="form_data.dialogue_number"
+            :min="0"
+            :value-on-clear="0"
+            controls-position="right"
+            class="w-full"
+            :step="1"
+            :step-strictly="true"
+          />
+        </el-form-item>
+        <el-form-item
+          :label="$t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')"
+          @click.prevent
+        >
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span
+                  >{{ $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
+                  }}</span
+                >
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content>
+                  {{ $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.tooltip') }}
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <el-switch size="small" v-model="form_data.is_result" />
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshParam" />
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { set, groupBy } from 'lodash'
+import { app } from '@/main'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import AIModeParamSettingDialog from '@/views/application/component/AIModeParamSettingDialog.vue'
+import type { FormInstance } from 'element-plus'
+import { ref, computed, onMounted } from 'vue'
+import applicationApi from '@/api/application'
+import useStore from '@/stores'
+import { isLastNode } from '@/workflow/common/data'
+import { t } from '@/locales'
+const { model } = useStore()
+const AIModeParamSettingDialogRef = ref<InstanceType<typeof AIModeParamSettingDialog>>()
+
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+
+const model_change = (model_id?: string) => {
+  if (model_id) {
+    AIModeParamSettingDialogRef.value?.reset_default(model_id, id)
+  } else {
+    refreshParam({})
+  }
+}
+function submitDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'prompt', val)
+}
+
+function submitSystemDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'system', val)
+}
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+
+// @ts-ignore
+const defaultPrompt = `${t('views.applicationWorkflow.nodes.questionNode.defaultPrompt1')}{{${t('views.applicationWorkflow.nodes.startNode.label')}.question}}
+${t('views.applicationWorkflow.nodes.questionNode.defaultPrompt2')}`
+
+const form = {
+  model_id: '',
+  system: t('views.applicationWorkflow.nodes.questionNode.systemDefault'),
+  prompt: defaultPrompt,
+  dialogue_number: 1,
+  is_result: false
+}
+function refreshParam(data: any) {
+  set(props.nodeModel.properties.node_data, 'model_params_setting', data)
+}
+
+const openAIParamSettingDialog = (modelId: string) => {
+  if (modelId) {
+    AIModeParamSettingDialogRef.value?.open(modelId, id, form_data.value.model_params_setting)
+  }
+}
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+const props = defineProps<{ nodeModel: any }>()
+
+const questionNodeFormRef = ref<FormInstance>()
+
+const modelOptions = ref<any>(null)
+
+const validate = () => {
+  return questionNodeFormRef.value?.validate().catch((err) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+function getModel() {
+  if (id) {
+    applicationApi.getApplicationModel(id).then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  } else {
+    model.asyncGetModel().then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  }
+}
+
+onMounted(() => {
+  getModel()
+  if (typeof props.nodeModel.properties.node_data?.is_result === 'undefined') {
+    if (isLastNode(props.nodeModel)) {
+      set(props.nodeModel.properties.node_data, 'is_result', true)
+    }
+  }
+  set(props.nodeModel, 'validate', validate)
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/workflow/nodes/reply-node/index.ts b/ui/src/workflow/nodes/reply-node/index.ts
new file mode 100644
index 000000000..e3bd9d95d
--- /dev/null
+++ b/ui/src/workflow/nodes/reply-node/index.ts
@@ -0,0 +1,12 @@
+import ReplyNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class ReplyNode extends AppNode {
+  constructor(props: any) {
+    super(props, ReplyNodeVue)
+  }
+}
+export default {
+  type: 'reply-node',
+  model: AppNodeModel,
+  view: ReplyNode
+}
diff --git a/ui/src/workflow/nodes/reply-node/index.vue b/ui/src/workflow/nodes/reply-node/index.vue
new file mode 100644
index 000000000..e23fd889f
--- /dev/null
+++ b/ui/src/workflow/nodes/reply-node/index.vue
@@ -0,0 +1,142 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <el-card shadow="never" class="card-never" style="--el-card-padding: 12px">
+      <el-form
+        @submit.prevent
+        :model="form_data"
+        label-position="top"
+        require-asterisk-position="right"
+        label-width="auto"
+        ref="replyNodeFormRef"
+      >
+        <el-form-item :label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.label')">
+          <template #label>
+            <div class="flex-between">
+              <span>{{ $t('views.applicationWorkflow.nodes.replyNode.replyContent.label') }}</span>
+              <el-select
+                :teleported="false"
+                v-model="form_data.reply_type"
+                size="small"
+                style="width: 85px"
+              >
+                <el-option
+                  :label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.reference')"
+                  value="referencing"
+                />
+                <el-option
+                  :label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.custom')"
+                  value="content"
+                />
+              </el-select>
+            </div>
+          </template>
+
+          <MdEditorMagnify
+            v-if="form_data.reply_type === 'content'"
+            @wheel="wheel"
+            :title="$t('views.applicationWorkflow.nodes.replyNode.replyContent.label')"
+            v-model="form_data.content"
+            style="height: 150px"
+            @submitDialog="submitDialog"
+          />
+          <NodeCascader
+            v-else
+            ref="nodeCascaderRef"
+            :nodeModel="nodeModel"
+            class="w-full"
+            :placeholder="
+              $t('views.applicationWorkflow.nodes.searchDatasetNode.searchQuestion.placeholder')
+            "
+            v-model="form_data.fields"
+          />
+        </el-form-item>
+        <el-form-item
+          :label="$t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')"
+          @click.prevent
+        >
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span>{{
+                  $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
+                }}</span>
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content>
+                  {{ $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.tooltip') }}
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <el-switch size="small" v-model="form_data.is_result" />
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { set } from 'lodash'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
+import { ref, computed, onMounted } from 'vue'
+import { isLastNode } from '@/workflow/common/data'
+
+const props = defineProps<{ nodeModel: any }>()
+
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+const form = {
+  reply_type: 'content',
+  content: '',
+  fields: [],
+  is_result: false
+}
+
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+function submitDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'content', val)
+}
+
+const replyNodeFormRef = ref()
+const nodeCascaderRef = ref()
+const validate = () => {
+  return Promise.all([
+    nodeCascaderRef.value ? nodeCascaderRef.value.validate() : Promise.resolve(''),
+    replyNodeFormRef.value?.validate()
+  ]).catch((err: any) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+onMounted(() => {
+  if (typeof props.nodeModel.properties.node_data?.is_result === 'undefined') {
+    if (isLastNode(props.nodeModel)) {
+      set(props.nodeModel.properties.node_data, 'is_result', true)
+    }
+  }
+
+  set(props.nodeModel, 'validate', validate)
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/workflow/nodes/reranker-node/ParamSettingDialog.vue b/ui/src/workflow/nodes/reranker-node/ParamSettingDialog.vue
new file mode 100644
index 000000000..42cc546f6
--- /dev/null
+++ b/ui/src/workflow/nodes/reranker-node/ParamSettingDialog.vue
@@ -0,0 +1,126 @@
+<template>
+  <el-dialog
+    align-center
+    :title="$t('common.paramSetting')"
+    class="param-dialog"
+    v-model="dialogVisible"
+    style="width: 550px"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <div>
+      <el-scrollbar always>
+        <div class="p-16">
+          <el-form label-position="top" ref="paramFormRef" :model="form">
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item>
+                  <template #label>
+                    <div class="flex align-center">
+                      <span class="mr-4"
+                        >Score {{ $t('views.applicationWorkflow.nodes.rerankerNode.higher') }}</span
+                      >
+                      <el-tooltip
+                        effect="dark"
+                        :content="$t('views.applicationWorkflow.nodes.rerankerNode.ScoreTooltip')"
+                        placement="right"
+                      >
+                        <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+                      </el-tooltip>
+                    </div>
+                  </template>
+                  <el-input-number
+                    v-model="form.similarity"
+                    :min="0"
+                    :max="form.search_mode === 'blend' ? 2 : 1"
+                    :precision="3"
+                    :step="0.1"
+                    :value-on-clear="0"
+                    controls-position="right"
+                    class="w-full"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item :label="$t('views.application.applicationForm.dialog.topReferences')">
+                  <el-input-number
+                    v-model="form.top_n"
+                    :min="1"
+                    :max="10000"
+                    :value-on-clear="1"
+                    controls-position="right"
+                    class="w-full"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-form-item :label="$t('views.application.applicationForm.dialog.maxCharacters')">
+              <el-slider
+                v-model="form.max_paragraph_char_number"
+                show-input
+                :show-input-controls="false"
+                :min="500"
+                :max="100000"
+                class="custom-slider"
+              />
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-scrollbar>
+    </div>
+    <template #footer>
+      <span class="dialog-footer p-16">
+        <el-button @click.prevent="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="submit()" :loading="loading">
+          {{ $t('common.save') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { cloneDeep } from 'lodash'
+import type { FormInstance, FormRules } from 'element-plus'
+const emit = defineEmits(['refresh'])
+
+const paramFormRef = ref<FormInstance>()
+
+const form = ref<any>({
+  top_n: 3,
+  similarity: 0,
+  max_paragraph_char_number: 5000
+})
+
+const dialogVisible = ref<boolean>(false)
+const loading = ref(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      top_n: 3,
+      similarity: 0,
+      max_paragraph_char_number: 5000
+    }
+  }
+})
+
+const open = (data: any) => {
+  form.value = { ...form.value, ...cloneDeep(data) }
+  dialogVisible.value = true
+}
+
+const submit = () => {
+  paramFormRef?.value?.validate((valid: boolean, fields: any) => {
+    if (valid) {
+      emit('refresh', cloneDeep(form.value))
+      dialogVisible.value = false
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss"></style>
diff --git a/ui/src/workflow/nodes/reranker-node/index.ts b/ui/src/workflow/nodes/reranker-node/index.ts
new file mode 100644
index 000000000..9b3afc5c6
--- /dev/null
+++ b/ui/src/workflow/nodes/reranker-node/index.ts
@@ -0,0 +1,12 @@
+import RerankerNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class RerankerNode extends AppNode {
+  constructor(props: any) {
+    super(props, RerankerNodeVue)
+  }
+}
+export default {
+  type: 'reranker-node',
+  model: AppNodeModel,
+  view: RerankerNode
+}
diff --git a/ui/src/workflow/nodes/reranker-node/index.vue b/ui/src/workflow/nodes/reranker-node/index.vue
new file mode 100644
index 000000000..355776883
--- /dev/null
+++ b/ui/src/workflow/nodes/reranker-node/index.vue
@@ -0,0 +1,271 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <el-card shadow="never" class="card-never" style="--el-card-padding: 12px">
+      <el-form
+        @submit.prevent
+        :model="form_data"
+        label-position="top"
+        require-asterisk-position="right"
+        label-width="auto"
+        ref="rerankerNodeFormRef"
+        hide-required-asterisk
+      >
+        <el-form-item
+          :label="$t('views.applicationWorkflow.nodes.rerankerNode.rerankerContent.label')"
+          prop="reranker_reference_list"
+          :rules="{
+            type: 'array',
+            message: $t(
+              'views.applicationWorkflow.nodes.rerankerNode.rerankerContent.requiredMessage'
+            ),
+            trigger: 'change',
+            required: true
+          }"
+        >
+          <template #label>
+            <div class="flex-between">
+              <span
+                >{{ $t('views.applicationWorkflow.nodes.rerankerNode.rerankerContent.label')
+                }}<span class="danger">*</span></span
+              >
+              <el-button @click="add_reranker_reference" link type="primary">
+                <el-icon class="mr-4"><Plus /></el-icon>
+              </el-button>
+            </div>
+          </template>
+          <el-row
+            :gutter="8"
+            style="margin-bottom: 8px"
+            v-for="(reranker_reference, index) in form_data.reranker_reference_list"
+            :key="index"
+          >
+            <el-col :span="22">
+              <el-form-item
+                :prop="'reranker_reference_list.' + index"
+                :rules="{
+                  type: 'array',
+                  required: true,
+                  message: $t('views.applicationWorkflow.variable.placeholder'),
+                  trigger: 'change'
+                }"
+              >
+                <NodeCascader
+                  :key="index"
+                  :nodeModel="nodeModel"
+                  class="w-full"
+                  :placeholder="
+                    $t(
+                      'views.applicationWorkflow.nodes.rerankerNode.rerankerContent.requiredMessage'
+                    )
+                  "
+                  v-model="form_data.reranker_reference_list[index]"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="1">
+              <el-button link type="info" class="mt-4" @click="deleteCondition(index)">
+                <el-icon><Delete /></el-icon>
+              </el-button>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item :label="$t('views.applicationWorkflow.nodes.searchDatasetNode.searchParam')">
+          <template #label>
+            <div class="flex-between">
+              <span>{{ $t('views.applicationWorkflow.nodes.searchDatasetNode.searchParam') }}</span>
+              <el-button type="primary" link @click="openParamSettingDialog">
+                <el-icon><Setting /></el-icon>
+              </el-button>
+            </div>
+          </template>
+          <div class="w-full">
+            <el-row>
+              <el-col :span="12" class="color-secondary lighter">
+                Score
+                {{ $t('views.applicationWorkflow.nodes.rerankerNode.higher') }}</el-col
+              >
+              <el-col :span="12" class="lighter">
+                {{ form_data.reranker_setting.similarity?.toFixed(3) }}</el-col
+              >
+              <el-col :span="12" class="color-secondary lighter">
+                {{ $t('chat.KnowledgeSource.referenceParagraph') }} Top</el-col
+              >
+              <el-col :span="12" class="lighter"> {{ form_data.reranker_setting.top_n }}</el-col>
+              <el-col :span="12" class="color-secondary lighter">
+                {{
+                  $t('views.applicationWorkflow.nodes.rerankerNode.max_paragraph_char_number')
+                }}</el-col
+              >
+              <el-col :span="12" class="lighter">
+                {{ form_data.reranker_setting.max_paragraph_char_number }}</el-col
+              >
+            </el-row>
+          </div>
+        </el-form-item>
+        <el-form-item
+          :label="$t('views.applicationWorkflow.nodes.searchDatasetNode.searchQuestion.label')"
+          prop="question_reference_address"
+          :rules="{
+            message: $t(
+              'views.applicationWorkflow.nodes.searchDatasetNode.searchQuestion.requiredMessage'
+            ),
+            trigger: 'blur',
+            required: true
+          }"
+        >
+          <template #label>
+            <div class="flex-between">
+              <span
+                >{{ $t('views.applicationWorkflow.nodes.searchDatasetNode.searchQuestion.label')
+                }}<span class="danger">*</span></span
+              >
+            </div>
+          </template>
+          <NodeCascader
+            ref="nodeCascaderRef"
+            :nodeModel="nodeModel"
+            class="w-full"
+            :placeholder="
+              $t('views.applicationWorkflow.nodes.searchDatasetNode.searchQuestion.label')
+            "
+            v-model="form_data.question_reference_address"
+          />
+        </el-form-item>
+        <el-form-item
+          :label="$t('views.applicationWorkflow.nodes.rerankerNode.reranker_model.label')"
+          prop="reranker_model_id"
+          :rules="{
+            required: true,
+            message: $t('views.applicationWorkflow.nodes.rerankerNode.reranker_model.placeholder'),
+            trigger: 'change'
+          }"
+        >
+          <template #label>
+            <div class="flex-between">
+              <span
+                >{{ $t('views.applicationWorkflow.nodes.rerankerNode.reranker_model.label')
+                }}<span class="danger">*</span></span
+              >
+            </div>
+          </template>
+          <ModelSelect
+            @wheel="wheel"
+            :teleported="false"
+            v-model="form_data.reranker_model_id"
+            :placeholder="
+              $t('views.applicationWorkflow.nodes.rerankerNode.reranker_model.placeholder')
+            "
+            :options="modelOptions"
+            @submitModel="getModel"
+            showFooter
+            :model-type="'RERANKER'"
+          ></ModelSelect>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <ParamSettingDialog ref="ParamSettingDialogRef" @refresh="refreshParam" />
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { set, cloneDeep, groupBy } from 'lodash'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
+import ParamSettingDialog from './ParamSettingDialog.vue'
+import { ref, computed, onMounted } from 'vue'
+
+import applicationApi from '@/api/application'
+import useStore from '@/stores'
+import { app } from '@/main'
+
+const { model } = useStore()
+const props = defineProps<{ nodeModel: any }>()
+
+const ParamSettingDialogRef = ref<InstanceType<typeof ParamSettingDialog>>()
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+const form = {
+  reranker_reference_list: [[]],
+  reranker_model_id: '',
+  question_reference_address: [],
+  reranker_setting: {
+    top_n: 3,
+    similarity: 0,
+    max_paragraph_char_number: 5000
+  }
+}
+
+const modelOptions = ref<any>(null)
+const openParamSettingDialog = () => {
+  ParamSettingDialogRef.value?.open(form_data.value.reranker_setting)
+}
+const deleteCondition = (index: number) => {
+  const list = cloneDeep(props.nodeModel.properties.node_data.reranker_reference_list)
+  list.splice(index, 1)
+  set(props.nodeModel.properties.node_data, 'reranker_reference_list', list)
+}
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+function refreshParam(data: any) {
+  set(props.nodeModel.properties.node_data, 'reranker_setting', data)
+}
+function getModel() {
+  if (id) {
+    applicationApi.getApplicationRerankerModel(id).then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  } else {
+    model.asyncGetModel({ model_type: 'RERANKER' }).then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  }
+}
+
+const add_reranker_reference = () => {
+  const list = cloneDeep(props.nodeModel.properties.node_data.reranker_reference_list)
+  list.push([])
+  set(props.nodeModel.properties.node_data, 'reranker_reference_list', list)
+}
+const rerankerNodeFormRef = ref()
+const nodeCascaderRef = ref()
+const validate = () => {
+  return Promise.all([
+    nodeCascaderRef.value ? nodeCascaderRef.value.validate() : Promise.resolve(''),
+    rerankerNodeFormRef.value?.validate()
+  ]).catch((err: any) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+onMounted(() => {
+  getModel()
+  set(props.nodeModel, 'validate', validate)
+})
+</script>
+<style lang="scss" scoped>
+.reply-node-editor {
+  :deep(.md-editor-footer) {
+    border: none !important;
+  }
+}
+</style>
diff --git a/ui/src/workflow/nodes/search-dataset-node/index.ts b/ui/src/workflow/nodes/search-dataset-node/index.ts
new file mode 100644
index 000000000..316854dc4
--- /dev/null
+++ b/ui/src/workflow/nodes/search-dataset-node/index.ts
@@ -0,0 +1,12 @@
+import SearchDatasetVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class SearchDatasetNode extends AppNode {
+  constructor(props: any) {
+    super(props, SearchDatasetVue)
+  }
+}
+export default {
+  type: 'search-dataset-node',
+  model: AppNodeModel,
+  view: SearchDatasetNode
+}
diff --git a/ui/src/workflow/nodes/search-dataset-node/index.vue b/ui/src/workflow/nodes/search-dataset-node/index.vue
new file mode 100644
index 000000000..572e40daf
--- /dev/null
+++ b/ui/src/workflow/nodes/search-dataset-node/index.vue
@@ -0,0 +1,234 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <h5 class="title-decoration-1 mb-8">{{ $t('views.applicationWorkflow.nodeSetting') }}</h5>
+    <el-card shadow="never" class="card-never">
+      <el-form
+        @submit.prevent
+        :model="form_data"
+        label-position="top"
+        require-asterisk-position="right"
+        label-width="auto"
+        ref="DatasetNodeFormRef"
+      >
+        <el-form-item :label="$t('views.log.selectDataset')">
+          <template #label>
+            <div class="flex-between">
+              <span>{{ $t('views.log.selectDataset') }}</span>
+              <el-button type="primary" link @click="openDatasetDialog">
+                <el-icon><Plus /></el-icon>
+              </el-button>
+            </div>
+          </template>
+          <div class="w-full">
+            <el-text type="info" v-if="form_data.dataset_id_list?.length === 0">
+              {{ $t('views.application.applicationForm.form.relatedKnowledge.placeholder') }}
+            </el-text>
+            <template v-for="(item, index) in form_data.dataset_id_list" :key="index" v-else>
+              <div class="flex-between border border-r-4 white-bg mb-4" style="padding: 5px 8px">
+                <div class="flex align-center" style="line-height: 20px">
+                  <AppAvatar
+                    v-if="relatedObject(datasetList, item, 'id')?.type === '1'"
+                    class="mr-8 avatar-purple"
+                    shape="square"
+                    :size="20"
+                  >
+                    <img src="@/assets/knowledge/icon_web.svg" style="width: 58%" alt="" />
+                  </AppAvatar>
+                  <AppAvatar
+                    v-else-if="relatedObject(datasetList, item, 'id')?.type === '2'"
+                    class="mr-8 avatar-purple"
+                    shape="square"
+                    :size="20"
+                    style="background: none"
+                  >
+                    <img src="@/assets/knowledge/logo_lark.svg" style="width: 100%" alt="" />
+                  </AppAvatar>
+                  <AppAvatar v-else class="mr-8 avatar-blue" shape="square" :size="20">
+                    <img src="@/assets/knowledge/icon_document.svg" style="width: 58%" alt="" />
+                  </AppAvatar>
+
+                  <div class="ellipsis" :title="relatedObject(datasetList, item, 'id')?.name">
+                    {{ relatedObject(datasetList, item, 'id')?.name }}
+                  </div>
+                </div>
+                <el-button text @click="removeDataset(item)">
+                  <el-icon><Close /></el-icon>
+                </el-button>
+              </div>
+            </template>
+          </div>
+        </el-form-item>
+        <el-form-item :label="$t('views.applicationWorkflow.nodes.searchDatasetNode.searchParam')">
+          <template #label>
+            <div class="flex-between">
+              <span>{{ $t('views.applicationWorkflow.nodes.searchDatasetNode.searchParam') }}</span>
+              <el-button type="primary" link @click="openParamSettingDialog">
+                <el-icon><Setting /></el-icon>
+              </el-button>
+            </div>
+          </template>
+          <div class="w-full">
+            <el-row>
+              <el-col :span="12" class="color-secondary lighter">{{
+                $t('views.application.applicationForm.dialog.selectSearchMode')
+              }}</el-col>
+              <el-col :span="12" class="lighter">
+                {{
+                  $t(SearchMode[form_data.dataset_setting.search_mode as keyof typeof SearchMode])
+                }}</el-col
+              >
+              <el-col :span="12" class="color-secondary lighter">
+                {{ $t('views.application.applicationForm.dialog.similarityThreshold') }}</el-col
+              >
+              <el-col :span="12" class="lighter">
+                {{ form_data.dataset_setting.similarity?.toFixed(3) }}</el-col
+              >
+              <el-col :span="12" class="color-secondary lighter">{{
+                $t('views.application.applicationForm.dialog.topReferences')
+              }}</el-col>
+              <el-col :span="12" class="lighter"> {{ form_data.dataset_setting.top_n }}</el-col>
+              <el-col :span="12" class="color-secondary lighter">
+                {{ $t('views.application.applicationForm.dialog.maxCharacters') }}</el-col
+              >
+              <el-col :span="12" class="lighter">
+                {{ form_data.dataset_setting.max_paragraph_char_number }}</el-col
+              >
+            </el-row>
+          </div>
+        </el-form-item>
+        <el-form-item
+          :label="$t('views.applicationWorkflow.nodes.searchDatasetNode.searchQuestion.label')"
+          prop="question_reference_address"
+          :rules="{
+            message: $t(
+              'views.applicationWorkflow.nodes.searchDatasetNode.searchQuestion.requiredMessage'
+            ),
+            trigger: 'blur',
+            required: true
+          }"
+        >
+          <NodeCascader
+            ref="nodeCascaderRef"
+            :nodeModel="nodeModel"
+            class="w-full"
+            :placeholder="
+              $t('views.applicationWorkflow.nodes.searchDatasetNode.searchQuestion.placeholder')
+            "
+            v-model="form_data.question_reference_address"
+          />
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <ParamSettingDialog ref="ParamSettingDialogRef" @refresh="refreshParam" />
+    <AddDatasetDialog
+      ref="AddDatasetDialogRef"
+      @addData="addDataset"
+      :data="datasetList"
+      @refresh="refresh"
+      :loading="datasetLoading"
+    />
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { set } from 'lodash'
+import { app } from '@/main'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
+import AddDatasetDialog from '@/views/application/component/AddDatasetDialog.vue'
+import ParamSettingDialog from '@/views/application/component/ParamSettingDialog.vue'
+import type { FormInstance } from 'element-plus'
+import { ref, computed, onMounted } from 'vue'
+import { relatedObject } from '@/utils/utils'
+import { SearchMode } from '@/enums/application'
+import useStore from '@/stores'
+const { dataset, application, user } = useStore()
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+
+const props = defineProps<{ nodeModel: any }>()
+const nodeCascaderRef = ref()
+const form = {
+  dataset_id_list: [],
+  dataset_setting: {
+    top_n: 3,
+    similarity: 0.6,
+    max_paragraph_char_number: 5000,
+    search_mode: 'embedding'
+  },
+  question_reference_address: []
+}
+
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+const DatasetNodeFormRef = ref<FormInstance>()
+const ParamSettingDialogRef = ref<InstanceType<typeof ParamSettingDialog>>()
+const AddDatasetDialogRef = ref<InstanceType<typeof AddDatasetDialog>>()
+const datasetList = ref<any>([])
+const datasetLoading = ref(false)
+
+function refreshParam(data: any) {
+  set(props.nodeModel.properties.node_data, 'dataset_setting', data.dataset_setting)
+}
+
+const openParamSettingDialog = () => {
+  ParamSettingDialogRef.value?.open(form_data.value, 'WORK_FLOW')
+}
+
+function removeDataset(id: any) {
+  const list = props.nodeModel.properties.node_data.dataset_id_list.filter((v: any) => v !== id)
+  set(props.nodeModel.properties.node_data, 'dataset_id_list', list)
+}
+
+function addDataset(val: Array<string>) {
+  set(props.nodeModel.properties.node_data, 'dataset_id_list', val)
+}
+
+function openDatasetDialog() {
+  if (AddDatasetDialogRef.value) {
+    AddDatasetDialogRef.value.open(form_data.value.dataset_id_list)
+  }
+}
+
+function getDataset() {
+  if (id) {
+    application.asyncGetApplicationDataset(id, datasetLoading).then((res: any) => {
+      datasetList.value = res.data
+    })
+  } else {
+    dataset.asyncGetAllDataset(datasetLoading).then((res: any) => {
+      datasetList.value = res.data?.filter((v: any) => v.user_id === user.userInfo?.id)
+    })
+  }
+}
+function refresh() {
+  getDataset()
+}
+
+const validate = () => {
+  return Promise.all([
+    nodeCascaderRef.value.validate(),
+    DatasetNodeFormRef.value?.validate()
+  ]).catch((err) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+onMounted(() => {
+  getDataset()
+  set(props.nodeModel, 'validate', validate)
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/workflow/nodes/speech-to-text-node/index.ts b/ui/src/workflow/nodes/speech-to-text-node/index.ts
new file mode 100644
index 000000000..aabaf1fc1
--- /dev/null
+++ b/ui/src/workflow/nodes/speech-to-text-node/index.ts
@@ -0,0 +1,12 @@
+import SpeechToTextVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class SpeechToTextNode extends AppNode {
+  constructor(props: any) {
+    super(props, SpeechToTextVue)
+  }
+}
+export default {
+  type: 'speech-to-text-node',
+  model: AppNodeModel,
+  view: SpeechToTextNode
+}
diff --git a/ui/src/workflow/nodes/speech-to-text-node/index.vue b/ui/src/workflow/nodes/speech-to-text-node/index.vue
new file mode 100644
index 000000000..133acddce
--- /dev/null
+++ b/ui/src/workflow/nodes/speech-to-text-node/index.vue
@@ -0,0 +1,177 @@
+<template>
+  <NodeContainer :node-model="nodeModel">
+    <h5 class="title-decoration-1 mb-8">{{ $t('views.applicationWorkflow.nodeSetting') }}</h5>
+    <el-card shadow="never" class="card-never">
+      <el-form
+        @submit.prevent
+        :model="form_data"
+        label-position="top"
+        require-asterisk-position="right"
+        label-width="auto"
+        ref="aiChatNodeFormRef"
+        hide-required-asterisk
+      >
+        <el-form-item
+          :label="$t('views.applicationWorkflow.nodes.speechToTextNode.stt_model.label')"
+          prop="stt_model_id"
+          :rules="{
+            required: true,
+            message: $t('views.application.applicationForm.form.voiceInput.placeholder'),
+            trigger: 'change'
+          }"
+        >
+          <template #label>
+            <div class="flex-between w-full">
+              <div>
+                <span
+                  >{{ $t('views.applicationWorkflow.nodes.speechToTextNode.stt_model.label')
+                  }}<span class="danger">*</span></span
+                >
+              </div>
+            </div>
+          </template>
+          <ModelSelect
+            @wheel="wheel"
+            :teleported="false"
+            v-model="form_data.stt_model_id"
+            :placeholder="$t('views.application.applicationForm.form.voiceInput.placeholder')"
+            :options="modelOptions"
+            showFooter
+            :model-type="'STT'"
+          ></ModelSelect>
+        </el-form-item>
+        <el-form-item
+          :label="$t('views.applicationWorkflow.nodes.speechToTextNode.audio.label')"
+          prop="audio_list"
+          :rules="{
+            message: $t('views.applicationWorkflow.nodes.speechToTextNode.audio.label'),
+            trigger: 'change',
+            required: true
+          }"
+        >
+          <template #label>
+            <div class="flex-between w-full">
+              <div>
+                <span
+                  >{{ $t('views.applicationWorkflow.nodes.speechToTextNode.audio.label')
+                  }}<span class="danger">*</span></span
+                >
+              </div>
+            </div>
+          </template>
+          <NodeCascader
+            ref="nodeCascaderRef"
+            :nodeModel="nodeModel"
+            class="w-full"
+            :placeholder="$t('views.applicationWorkflow.nodes.speechToTextNode.audio.placeholder')"
+            v-model="form_data.audio_list"
+          />
+        </el-form-item>
+
+        <el-form-item
+          :label="$t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')"
+          @click.prevent
+        >
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span
+                  >{{ $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
+                  }}</span
+                >
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content>
+                  {{ $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.tooltip') }}
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <el-switch size="small" v-model="form_data.is_result" />
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </NodeContainer>
+</template>
+
+<script setup lang="ts">
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import { computed, onMounted, ref } from 'vue'
+import { groupBy, set } from 'lodash'
+import applicationApi from '@/api/application'
+import { app } from '@/main'
+import useStore from '@/stores'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
+import type { FormInstance } from 'element-plus'
+
+const { model } = useStore()
+
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+
+const props = defineProps<{ nodeModel: any }>()
+const modelOptions = ref<any>(null)
+
+const aiChatNodeFormRef = ref<FormInstance>()
+const nodeCascaderRef = ref()
+const validate = () => {
+  return Promise.all([
+    nodeCascaderRef.value ? nodeCascaderRef.value.validate() : Promise.resolve(''),
+    aiChatNodeFormRef.value?.validate()
+  ]).catch((err: any) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+
+const form = {
+  stt_model_id: '',
+  is_result: true,
+  audio_list: []
+}
+
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+function getModel() {
+  if (id) {
+    applicationApi.getApplicationSTTModel(id).then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  } else {
+    model.asyncGetModel().then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  }
+}
+
+onMounted(() => {
+  getModel()
+
+  set(props.nodeModel, 'validate', validate)
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/ui/src/workflow/nodes/start-node/index.ts b/ui/src/workflow/nodes/start-node/index.ts
new file mode 100644
index 000000000..5adfb7798
--- /dev/null
+++ b/ui/src/workflow/nodes/start-node/index.ts
@@ -0,0 +1,12 @@
+import StartNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class StartNode extends AppNode {
+  constructor(props: any) {
+    super(props, StartNodeVue)
+  }
+}
+export default {
+  type: 'start-node',
+  model: AppNodeModel,
+  view: StartNode
+}
diff --git a/ui/src/workflow/nodes/start-node/index.vue b/ui/src/workflow/nodes/start-node/index.vue
new file mode 100644
index 000000000..53df2148f
--- /dev/null
+++ b/ui/src/workflow/nodes/start-node/index.vue
@@ -0,0 +1,115 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <h5 class="title-decoration-1 mb-8">{{ $t('views.applicationWorkflow.variable.global') }}</h5>
+    <div
+      v-for="(item, index) in nodeModel.properties.config.globalFields"
+      :key="index"
+      class="flex-between border-r-4 p-8-12 mb-8 layout-bg lighter"
+      @mouseenter="showicon = true"
+      @mouseleave="showicon = false"
+    >
+      <span class="break-all">{{ item.label }} {{ '{' + item.value + '}' }}</span>
+      <el-tooltip
+        effect="dark"
+        :content="$t('views.applicationWorkflow.setting.copyParam')"
+        placement="top"
+        v-if="showicon === true"
+      >
+        <el-button link @click="copyClick(`{{global.${item.value}}}`)" style="padding: 0">
+          <AppIcon iconName="app-copy"></AppIcon>
+        </el-button>
+      </el-tooltip>
+    </div>
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { cloneDeep, set } from 'lodash'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import { copyClick } from '@/utils/clipboard'
+import { ref, computed, onMounted } from 'vue'
+import { t } from '@/locales'
+const props = defineProps<{ nodeModel: any }>()
+
+const showicon = ref(false)
+const globalFields = [
+  { label: t('views.applicationWorkflow.nodes.startNode.currentTime'), value: 'time' },
+  {
+    label: t('views.application.applicationForm.form.historyRecord.label'),
+    value: 'history_context'
+  },
+  { label: t('chat.chatId'), value: 'chat_id' }
+]
+
+const getRefreshFieldList = () => {
+  const user_input_fields = props.nodeModel.graphModel.nodes
+    .filter((v: any) => v.id === 'base-node')
+    .map((v: any) => cloneDeep(v.properties.user_input_field_list))
+    .reduce((x: any, y: any) => [...x, ...y], [])
+    .map((i: any) => {
+      if (i.label && i.label.input_type === 'TooltipLabel') {
+        return { label: i.label.label, value: i.field || i.variable }
+      }
+      return { label: i.label || i.name, value: i.field || i.variable }
+    })
+  const api_input_fields = props.nodeModel.graphModel.nodes
+    .filter((v: any) => v.id === 'base-node')
+    .map((v: any) => cloneDeep(v.properties.api_input_field_list))
+    .reduce((x: any, y: any) => [...x, ...y], [])
+    .map((i: any) => ({ label: i.name || i.variable, value: i.variable }))
+
+  return [...user_input_fields, ...api_input_fields]
+}
+const refreshFieldList = () => {
+  const refreshFieldList = getRefreshFieldList()
+  set(props.nodeModel.properties.config, 'globalFields', [...globalFields, ...refreshFieldList])
+}
+props.nodeModel.graphModel.eventCenter.on('refreshFieldList', refreshFieldList)
+
+const refreshFileUploadConfig = () => {
+  let fields = cloneDeep(props.nodeModel.properties.config.fields)
+  const form_data = props.nodeModel.graphModel.nodes
+    .filter((v: any) => v.id === 'base-node')
+    .filter((v: any) => v.properties.node_data.file_upload_enable)
+    .map((v: any) => cloneDeep(v.properties.node_data.file_upload_setting))
+    .filter((v: any) => v)
+
+  fields = fields.filter(
+    (item: any) =>
+      item.value !== 'image' &&
+      item.value !== 'document' &&
+      item.value !== 'audio' &&
+      item.value !== 'video' &&
+      item.value !== 'other'
+  )
+
+  if (form_data.length === 0) {
+    set(props.nodeModel.properties.config, 'fields', fields)
+    return
+  }
+  let fileUploadFields = []
+  if (form_data[0].document) {
+    fileUploadFields.push({ label: t('common.fileUpload.document'), value: 'document' })
+  }
+  if (form_data[0].image) {
+    fileUploadFields.push({ label: t('common.fileUpload.image'), value: 'image' })
+  }
+  if (form_data[0].audio) {
+    fileUploadFields.push({ label: t('common.fileUpload.audio'), value: 'audio' })
+  }
+  if (form_data[0].video) {
+    fileUploadFields.push({ label: t('common.fileUpload.video'), value: 'video' })
+  }
+  if (form_data[0].other) {
+    fileUploadFields.push({ label: t('common.fileUpload.other'), value: 'other' })
+  }
+
+  set(props.nodeModel.properties.config, 'fields', [...fields, ...fileUploadFields])
+}
+props.nodeModel.graphModel.eventCenter.on('refreshFileUploadConfig', refreshFileUploadConfig)
+
+onMounted(() => {
+  refreshFieldList()
+  refreshFileUploadConfig()
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/workflow/nodes/text-to-speech-node/index.ts b/ui/src/workflow/nodes/text-to-speech-node/index.ts
new file mode 100644
index 000000000..04e2363bf
--- /dev/null
+++ b/ui/src/workflow/nodes/text-to-speech-node/index.ts
@@ -0,0 +1,12 @@
+import TextToSpeechVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+class TextToSpeechNode extends AppNode {
+  constructor(props: any) {
+    super(props, TextToSpeechVue)
+  }
+}
+export default {
+  type: 'text-to-speech-node',
+  model: AppNodeModel,
+  view: TextToSpeechNode
+}
diff --git a/ui/src/workflow/nodes/text-to-speech-node/index.vue b/ui/src/workflow/nodes/text-to-speech-node/index.vue
new file mode 100644
index 000000000..d5b9fe609
--- /dev/null
+++ b/ui/src/workflow/nodes/text-to-speech-node/index.vue
@@ -0,0 +1,203 @@
+<template>
+  <NodeContainer :node-model="nodeModel">
+    <h5 class="title-decoration-1 mb-8">{{ $t('views.applicationWorkflow.nodeSetting') }}</h5>
+    <el-card shadow="never" class="card-never">
+      <el-form
+        @submit.prevent
+        :model="form_data"
+        label-position="top"
+        require-asterisk-position="right"
+        label-width="auto"
+        ref="aiChatNodeFormRef"
+        hide-required-asterisk
+      >
+        <el-form-item
+          :label="$t('views.applicationWorkflow.nodes.textToSpeechNode.tts_model.label')"
+          prop="tts_model_id"
+          :rules="{
+            required: true,
+            message: $t('views.application.applicationForm.form.voicePlay.placeholder'),
+            trigger: 'change'
+          }"
+        >
+          <template #label>
+            <div class="flex-between w-full">
+              <div>
+                <span
+                  >{{ $t('views.applicationWorkflow.nodes.textToSpeechNode.tts_model.label')
+                  }}<span class="danger">*</span></span
+                >
+              </div>
+              <el-button
+                type="primary"
+                link
+                @click="openTTSParamSettingDialog"
+                :disabled="!form_data.tts_model_id"
+                class="mr-4"
+              >
+                <el-icon><Setting /></el-icon>
+              </el-button>
+            </div>
+          </template>
+          <ModelSelect
+            @wheel="wheel"
+            :teleported="false"
+            v-model="form_data.tts_model_id"
+            :placeholder="$t('views.application.applicationForm.form.voicePlay.placeholder')"
+            :options="modelOptions"
+            showFooter
+            :model-type="'TTS'"
+          ></ModelSelect>
+        </el-form-item>
+        <el-form-item
+          prop="content_list"
+          :label="$t('views.applicationWorkflow.nodes.textToSpeechNode.content.label')"
+          :rules="{
+            message: $t('views.applicationWorkflow.nodes.textToSpeechNode.content.label'),
+            trigger: 'blur',
+            required: true
+          }"
+        >
+          <template #label>
+            <div class="flex-between w-full">
+              <div>
+                <span
+                  >{{ $t('views.applicationWorkflow.nodes.textToSpeechNode.content.label')
+                  }}<span class="danger">*</span></span
+                >
+              </div>
+            </div>
+          </template>
+          <NodeCascader
+            ref="nodeCascaderRef"
+            :nodeModel="nodeModel"
+            class="w-full"
+            :placeholder="$t('views.applicationWorkflow.nodes.textToSpeechNode.content.label')"
+            v-model="form_data.content_list"
+          />
+        </el-form-item>
+
+        <el-form-item
+          :label="$t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')"
+          @click.prevent
+        >
+          <template #label>
+            <div class="flex align-center">
+              <div class="mr-4">
+                <span>{{
+                  $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
+                }}</span>
+              </div>
+              <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
+                <template #content>
+                  {{ $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.tooltip') }}
+                </template>
+                <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+              </el-tooltip>
+            </div>
+          </template>
+          <el-switch size="small" v-model="form_data.is_result" />
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <TTSModeParamSettingDialog ref="TTSModeParamSettingDialogRef" @refresh="refreshTTSForm" />
+  </NodeContainer>
+</template>
+
+<script setup lang="ts">
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import { computed, onMounted, ref } from 'vue'
+import { groupBy, set } from 'lodash'
+import applicationApi from '@/api/application'
+import { app } from '@/main'
+import useStore from '@/stores'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
+import type { FormInstance } from 'element-plus'
+import { MsgSuccess } from '@/utils/message'
+import { t } from '@/locales'
+import TTSModeParamSettingDialog from '@/views/application/component/TTSModeParamSettingDialog.vue'
+
+const TTSModeParamSettingDialogRef = ref<InstanceType<typeof TTSModeParamSettingDialog>>()
+const { model } = useStore()
+
+const {
+  params: { id }
+} = app.config.globalProperties.$route as any
+
+const props = defineProps<{ nodeModel: any }>()
+const modelOptions = ref<any>(null)
+
+const aiChatNodeFormRef = ref<FormInstance>()
+const nodeCascaderRef = ref()
+const validate = () => {
+  return Promise.all([
+    nodeCascaderRef.value ? nodeCascaderRef.value.validate() : Promise.resolve(''),
+    aiChatNodeFormRef.value?.validate()
+  ]).catch((err: any) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+
+const form = {
+  tts_model_id: '',
+  is_result: true,
+  content_list: [],
+  model_params_setting: {}
+}
+
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+function getModel() {
+  if (id) {
+    applicationApi.getApplicationTTSModel(id).then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  } else {
+    model.asyncGetModel().then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+    })
+  }
+}
+
+const openTTSParamSettingDialog = () => {
+  const model_id = form_data.value.tts_model_id
+  if (!model_id) {
+    MsgSuccess(t('views.application.applicationForm.form.voicePlay.requiredMessage'))
+    return
+  }
+  TTSModeParamSettingDialogRef.value?.open(model_id, id, form_data.value.model_params_setting)
+}
+const refreshTTSForm = (data: any) => {
+  form_data.value.model_params_setting = data
+}
+
+onMounted(() => {
+  getModel()
+
+  set(props.nodeModel, 'validate', validate)
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/ui/src/workflow/nodes/variable-assign-node/index.ts b/ui/src/workflow/nodes/variable-assign-node/index.ts
new file mode 100644
index 000000000..567bf425a
--- /dev/null
+++ b/ui/src/workflow/nodes/variable-assign-node/index.ts
@@ -0,0 +1,14 @@
+import VariableAssignNodeVue from './index.vue'
+import { AppNode, AppNodeModel } from '@/workflow/common/app-node'
+
+class VariableAssignNode extends AppNode {
+  constructor(props: any) {
+    super(props, VariableAssignNodeVue)
+  }
+}
+
+export default {
+  type: 'variable-assign-node',
+  model: AppNodeModel,
+  view: VariableAssignNode
+}
diff --git a/ui/src/workflow/nodes/variable-assign-node/index.vue b/ui/src/workflow/nodes/variable-assign-node/index.vue
new file mode 100644
index 000000000..a786a9d77
--- /dev/null
+++ b/ui/src/workflow/nodes/variable-assign-node/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <NodeContainer :nodeModel="nodeModel">
+    <el-form
+      @submit.prevent
+      :model="form_data"
+      label-position="top"
+      require-asterisk-position="right"
+      label-width="auto"
+      ref="replyNodeFormRef"
+      hide-required-asterisk
+    >
+      <template v-for="(item, index) in form_data.variable_list" :key="item.id">
+        <el-card shadow="never" class="card-never mb-8" style="--el-card-padding: 12px">
+          <el-form-item :label="$t('views.applicationWorkflow.variable.label')">
+            <template #label>
+              <div class="flex-between">
+                <div>
+                  {{ $t('views.applicationWorkflow.variable.label') }}
+                  <span class="danger">*</span>
+                </div>
+                <el-button
+                  text
+                  @click="deleteVariable(index)"
+                  v-if="form_data.variable_list.length > 1"
+                >
+                  <el-icon>
+                    <Delete />
+                  </el-icon>
+                </el-button>
+              </div>
+            </template>
+            <NodeCascader
+              ref="nodeCascaderRef"
+              :nodeModel="nodeModel"
+              class="w-full"
+              :placeholder="$t('views.applicationWorkflow.variable.placeholder')"
+              v-model="item.fields"
+              :global="true"
+              @change="variableChange(item)"
+            />
+          </el-form-item>
+          <div class="flex-between mb-8">
+            <span class="lighter"
+              >{{ $t('views.applicationWorkflow.nodes.variableAssignNode.assign')
+              }}<span class="danger">*</span></span
+            >
+            <el-select :teleported="false" v-model="item.source" size="small" style="width: 85px">
+              <el-option
+                :label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.reference')"
+                value="referencing"
+              />
+              <el-option
+                :label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.custom')"
+                value="custom"
+              />
+            </el-select>
+          </div>
+
+          <div v-if="item.source === 'custom'" class="flex w-full">
+            <el-select
+              v-model="item.type"
+              style="max-width: 85px"
+              class="mr-8"
+              @change="form_data.variable_list[index].value = null"
+            >
+              <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
+            </el-select>
+
+            <el-form-item
+              v-if="item.type === 'string'"
+              :prop="'variable_list.' + index + '.value'"
+              :rules="{
+                message: t('common.inputPlaceholder'),
+                trigger: 'blur',
+                required: true
+              }"
+            >
+              <el-input
+                v-model="item.value"
+                :placeholder="$t('common.inputPlaceholder')"
+                show-word-limit
+                clearable
+                @wheel="wheel"
+              ></el-input>
+            </el-form-item>
+            <el-form-item
+              v-else-if="item.type === 'num'"
+              :prop="'variable_list.' + index + '.value'"
+              :rules="{
+                message: $t('common.inputPlaceholder'),
+                trigger: 'blur',
+                required: true
+              }"
+            >
+              <el-input-number v-model="item.value"></el-input-number>
+            </el-form-item>
+            <el-form-item
+              class="w-full"
+              v-else-if="item.type === 'json'"
+              :prop="'variable_list.' + index + '.value'"
+              :rules="[
+                {
+                  message: $t('common.inputPlaceholder'),
+                  trigger: 'blur',
+                  required: true
+                },
+                {
+                  validator: (rule: any, value: any, callback: any) => {
+                    try {
+                      JSON.parse(value)
+                      callback() // Valid JSON
+                    } catch (e) {
+                      callback(new Error('Invalid JSON format'))
+                    }
+                  },
+                  trigger: 'blur'
+                }
+              ]"
+            >
+              <CodemirrorEditor
+                title="JSON"
+                v-model="item.value"
+                :style="{
+                  height: '100px',
+                  width: '155px'
+                }"
+                @submitDialog="(val: string) => (form_data.variable_list[index].value = val)"
+              />
+            </el-form-item>
+          </div>
+          <el-form-item v-else>
+            <NodeCascader
+              ref="nodeCascaderRef2"
+              :nodeModel="nodeModel"
+              class="w-full"
+              :placeholder="$t('views.applicationWorkflow.variable.placeholder')"
+              v-model="item.reference"
+            />
+          </el-form-item>
+        </el-card>
+      </template>
+
+      <el-button link type="primary" @click="addVariable">
+        <el-icon class="mr-4">
+          <Plus />
+        </el-icon>
+        {{ $t('common.add') }}
+      </el-button>
+    </el-form>
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { cloneDeep, set } from 'lodash'
+import NodeContainer from '@/workflow/common/NodeContainer.vue'
+import NodeCascader from '@/workflow/common/NodeCascader.vue'
+import { computed, onMounted, ref } from 'vue'
+import { isLastNode } from '@/workflow/common/data'
+import { randomId } from '@/utils/utils'
+import { t } from '@/locales'
+
+const props = defineProps<{ nodeModel: any }>()
+
+const typeOptions = ['string', 'num', 'json']
+
+const wheel = (e: any) => {
+  if (e.ctrlKey === true) {
+    e.preventDefault()
+    return true
+  } else {
+    e.stopPropagation()
+    return true
+  }
+}
+const form = {
+  variable_list: [
+    {
+      id: randomId(),
+      fields: [],
+      value: null,
+      reference: [],
+      type: 'string',
+      source: 'custom',
+      name: ''
+    }
+  ]
+}
+
+const form_data = computed({
+  get: () => {
+    if (props.nodeModel.properties.node_data) {
+      return props.nodeModel.properties.node_data
+    } else {
+      set(props.nodeModel.properties, 'node_data', form)
+    }
+    return props.nodeModel.properties.node_data
+  },
+  set: (value) => {
+    set(props.nodeModel.properties, 'node_data', value)
+  }
+})
+
+function submitDialog(val: string) {
+  set(props.nodeModel.properties.node_data, 'content', val)
+}
+
+const replyNodeFormRef = ref()
+const nodeCascaderRef = ref()
+const nodeCascaderRef2 = ref()
+
+const validate = async () => {
+  // console.log(replyNodeFormRef.value.validate())
+  let ps = [
+    replyNodeFormRef.value?.validate(),
+    ...nodeCascaderRef.value.map((item: any) => item.validate())
+  ]
+  if (nodeCascaderRef2.value) {
+    ps = [...ps, ...nodeCascaderRef.value.map((item: any) => item.validate())]
+  }
+  return Promise.all(ps).catch((err: any) => {
+    return Promise.reject({ node: props.nodeModel, errMessage: err })
+  })
+}
+
+function addVariable() {
+  const list = cloneDeep(props.nodeModel.properties.node_data.variable_list)
+  const obj = {
+    id: randomId(),
+    fields: [],
+    value: null,
+    reference: [],
+    type: 'string',
+    source: 'custom',
+    name: ''
+  }
+  list.push(obj)
+  set(props.nodeModel.properties.node_data, 'variable_list', list)
+}
+
+function deleteVariable(index: number) {
+  const list = cloneDeep(props.nodeModel.properties.node_data.variable_list)
+  list.splice(index, 1)
+  set(props.nodeModel.properties.node_data, 'variable_list', list)
+}
+
+function variableChange(item: any) {
+  props.nodeModel.graphModel.nodes.map((node: any) => {
+    if (node.id === 'start-node') {
+      node.properties.config.globalFields.forEach((field: any) => {
+        if (field.value === item.fields[1]) {
+          item.name = field.label
+        }
+      })
+    }
+  })
+}
+
+onMounted(() => {
+  if (typeof props.nodeModel.properties.node_data?.is_result === 'undefined') {
+    if (isLastNode(props.nodeModel)) {
+      set(props.nodeModel.properties.node_data, 'is_result', true)
+    }
+  }
+
+  set(props.nodeModel, 'validate', validate)
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/workflow/plugins/dagre.ts b/ui/src/workflow/plugins/dagre.ts
new file mode 100644
index 000000000..67b72fdad
--- /dev/null
+++ b/ui/src/workflow/plugins/dagre.ts
@@ -0,0 +1,69 @@
+import { DagreLayout, type DagreLayoutOptions } from '@antv/layout'
+
+export default class Dagre {
+  static pluginName = 'dagre'
+  lf: any
+  option: DagreLayoutOptions | any
+  render(lf: any) {
+    this.lf = lf
+  }
+
+  /**
+   * option: {
+   *   rankdir: "TB", // layout 方向, 可选 TB, BT, LR, RL
+   *   align: undefined, // 节点对齐方式，可选 UL, UR, DL, DR
+   *   nodeSize: undefined, // 节点大小
+   *   nodesepFunc: undefined, // 节点水平间距(px)
+   *   ranksepFunc: undefined, // 每一层节点之间间距
+   *   nodesep: 40, // 节点水平间距(px) 注意：如果有grid，需要保证nodesep为grid的偶数倍
+   *   ranksep: 40, // 每一层节点之间间距 注意：如果有grid，需要保证ranksep为grid的偶数倍
+   *   controlPoints: false, // 是否保留布局连线的控制点
+   *   radial: false, // 是否基于 dagre 进行辐射布局
+   *   focusNode: null, // radial 为 true 时生效，关注的节点
+   * };
+   */
+  layout(option = {}) {
+    const { nodes, edges, gridSize } = this.lf.graphModel
+    // 为了保证生成的节点在girdSize上，需要处理一下。
+    let nodesep = 40
+    let ranksep = 40
+    if (gridSize > 20) {
+      nodesep = gridSize * 2
+      ranksep = gridSize * 2
+    }
+    this.option = {
+      type: 'dagre',
+      rankdir: 'LR',
+      // align: 'UL',
+      // align: 'UR',
+      align: 'DR',
+      nodesep,
+      ranksep,
+      begin: [120, 120],
+      ...option
+    }
+    const layoutInstance = new DagreLayout(this.option)
+    const layoutData = layoutInstance.layout({
+      nodes: nodes.map((node: any) => ({
+        id: node.id,
+        size: {
+          width: node.width,
+          height: node.height
+        },
+        model: node
+      })),
+      edges: edges.map((edge: any) => ({
+        source: edge.sourceNodeId,
+        target: edge.targetNodeId,
+        model: edge
+      }))
+    })
+
+    layoutData.nodes?.forEach((node: any) => {
+      // @ts-ignore: pass node data
+      const { model } = node
+      model.set_position({ x: node.x, y: node.y })
+    })
+    this.lf.fitView()
+  }
+}