feat: function

Author: wangdan-fit2cloud

ui/src/assets/fx/bochaai/detail.md

@@ -0,0 +1,16 @@
+## 概述
+
+博查工具是一个支持自然语言搜索的 Web Search API，从近百亿网页和生态内容源中搜索高质量世界知识，包括新闻、图片、视频、百科、机酒、学术等.
+
+
+## 配置
+
+1. 获取API Key 
+在[博查开放平台](https://open.bochaai.com/overview) 上申请 API 密钥。
+![API Key](img/bochaAPI_Key.jpg)
+2. 在函数库中配置
+在函数库的博查函数面板中，点击 … > 启用参数，填写 API 密钥，并启用博查函数。   
+![启动参数](img/bocha_setting.jpg)
+3. 在应用中使用
+在高级编排应用中，点击添加组件->函数库->博查，设置使用参数。
+![应用中使用](img/bocha_app_used.jpg)

ui/src/assets/fx/google_search/detail.md

@@ -0,0 +1,23 @@
+## 概述
+
+Google 搜索工具是一个实时 API，可提取搜索引擎结果，提供来自 Google 的结构化数据。它支持各种搜索类型，包括 Web、图像、新闻和地图。
+
+## 配置
+
+1. 创建 Google Custom Search Engine
+在[Programmable Search Engine]（https://programmablesearchengine.google.com/）中 添加 Search Engine
+![google 创建引擎](img/google_AddSearchEngine.jpg)
+2. 获取cx参数
+进入添加引擎，在【基本】菜单中获取搜索引擎的ID，即cx。
+![google cx ](img/google_cx.jpg)
+3.获取 API Key
+打开 https://developers.google.com/custom-search/v1/overview?hl=zh-cn，获取API Key。
+![google API Key](img/google_APIKey.jpg)
+
+4. 配置启动参数
+在Google搜索函数的启动参数中填写配置以上参数。
+![启动参数](img/google_setting.jpg)
+
+5. 在应用中使用
+在高级编排应用中，点击添加组件->函数库->博查，设置使用参数。
+![应用中使用](img/google_app_used.jpg)

ui/src/assets/fx/langsearch/detail.md

@@ -0,0 +1,17 @@
+## 概述
+
+博查工具是一个支持自然语言搜索的 Web Search API，从近百亿网页和生态内容源中搜索高质量世界知识，包括新闻、图片、视频、百科、机酒、学术等.
+
+
+## 配置
+
+1. 获取API Key 
+在[博查开放平台](https://open.bochaai.com/overview) 上申请 API 密钥。
+![API Key](img/langsearchAPI_Key.jpg)
+2. 在函数库中配置
+在函数库的博查函数面板中，点击 … > 启用参数，填写 API 密钥，并启用博查函数。   
+![启动参数](img/langsearch_setting.jpg)
+1. 在应用中使用
+在高级编排应用中，点击添加组件->函数库->博查，设置使用参数。
+ ![应用中使用](img/langsearch_app_used.jpg)
+ 

ui/src/assets/icon_mcp.svg

@@ -55,7 +55,21 @@
               @click.stop="clickNodes(functionLibNode, item, 'function')"
               @mousedown.stop="onmousedown(functionLibNode, item, 'function')"
             >
-              <component :is="iconComponent(`function-lib-node-icon`)" class="mr-8" :size="32" />
+              <AppAvatar
+                v-if="item.icon != '/ui/favicon.ico'"
+                shape="square"
+                :size="32"
+                style="background: none"
+                class="mr-8"
+              >
+                <img :src="item?.icon || ''" alt="" />
+              </AppAvatar>
+              <component
+                v-else
+                :is="iconComponent(`function-lib-node-icon`)"
+                class="mr-8"
+                :size="32"
+              />
               <div class="pre-wrap">
                 <div class="lighter ellipsis-1" :title="item.name">{{ item.name }}</div>
                 <p>

ui/src/views/application-workflow/component/DropdownMenu.vue

@@ -105,7 +105,7 @@
                   style="background: none"
                   class="mr-8"
                 >
-                  <img :src="getImageUrl(item?.icon)" alt="" />
+                  <img :src="item?.icon" alt="" />
                 </AppAvatar>
                 <AppAvatar
                   v-else-if="item?.name"
@@ -218,7 +218,7 @@
                   style="background: none"
                   class="mr-8"
                 >
-                  <img :src="getImageUrl(item?.icon)" alt="" />
+                  <img :src="item?.icon" alt="" />
                 </AppAvatar>
                 <AppAvatar
                   v-else-if="item?.name"
@@ -229,9 +229,7 @@
                   class="mr-8"
                 />
               </template>
-              <div class="status-button">
-
-              </div>
+              <div class="status-button"></div>
               <template #footer>
                 <div class="footer-content flex-between">
                   <div>{{ $t('common.author') }}: MaxKB</div>
@@ -249,7 +247,10 @@
     </div>
     <FunctionFormDrawer ref="FunctionFormDrawerRef" @refresh="refresh" :title="title" />
     <PermissionDialog ref="PermissionDialogRef" @refresh="refresh" />
-    <AddInternalFunctionDialog ref="AddInternalFunctionDialogRef" @refresh="confirmAddInternalFunction" />
+    <AddInternalFunctionDialog
+      ref="AddInternalFunctionDialogRef"
+      @refresh="confirmAddInternalFunction"
+    />
     <InitParamDrawer ref="InitParamDrawerRef" @refresh="refresh" />
     <component :is="internalDescComponent" ref="internalDescRef" />
   </div>
@@ -271,7 +272,7 @@ import CardBox from '@/components/card-box/index.vue'
 import type { Dict } from '@/api/type/common'
 import AddInternalFunctionDialog from '@/views/function-lib/component/AddInternalFunctionDialog.vue'
 
-const internalIcons: Dict<any> = import.meta.glob('@/assets/fx/*/*.png', { eager: true })
+// const internalIcons: Dict<any> = import.meta.glob('@/assets/fx/*/*.png', { eager: true })
 let internalDesc: Dict<any> = import.meta.glob('@/assets/fx/*/index.vue', { eager: true })
 const internalDescRef = ref()
 const internalDescComponent = ref()
@@ -342,13 +343,6 @@ function openCreateDialog(data?: any) {
   }
 }
 
-function getImageUrl(name: string) {
-  if (name.startsWith('/src/assets/fx/')) {
-    return internalIcons[name]?.default
-  }
-  return name
-}
-
 function openDescDrawer(row: any) {
   const index = row.icon.replace('icon.png', 'index.vue')
   internalDescComponent.value = internalDesc[index].default
@@ -362,10 +356,12 @@ function addInternalFunction(data?: any) {
 }
 
 function confirmAddInternalFunction(data?: any) {
-  functionLibApi.addInternalFunction(data.id, {name: data.name}, changeStateloading).then((res) => {
-    MsgSuccess(t('common.submitSuccess'))
-    searchHandle()
-  })
+  functionLibApi
+    .addInternalFunction(data.id, { name: data.name }, changeStateloading)
+    .then((res) => {
+      MsgSuccess(t('common.submitSuccess'))
+      searchHandle()
+    })
 }
 
 function searchHandle() {

ui/src/views/function-lib/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <AppAvatar shape="square" class="avatar-blue">
-    <img src="@/assets/icon_assigner.svg" style="width: 65%" alt="" />
+  <AppAvatar shape="square" style="background: #34c724">
+    <img src="@/assets/icon_mcp.svg" style="width: 65%" alt="" />
   </AppAvatar>
 </template>
 <script setup lang="ts"></script>

ui/src/workflow/icons/mcp-node-icon.vue

@@ -25,14 +25,14 @@
             <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"
-          >
+          <el-select v-model="form_data.mcp_tool" @change="changeTool">
             <el-option
               v-for="item in form_data.mcp_tools"
               :key="item.value"
@@ -55,8 +55,12 @@
       </el-form>
     </div>
     <h5 class="title-decoration-1 mb-8">
-      {{ $t('views.applicationWorkflow.nodes.mcpNode.toolParam') }}</h5>
-    <div class="border-r-4 p-8-12 mb-8 layout-bg lighter" v-if="form_data.tool_params[form_data.params_nested]">
+      {{ $t('views.applicationWorkflow.nodes.mcpNode.toolParam') }}
+    </h5>
+    <div
+      class="border-r-4 p-8-12 mb-8 layout-bg lighter"
+      v-if="form_data.tool_params[form_data.params_nested]"
+    >
       <DynamicsForm
         v-if="form_data.mcp_tool"
         v-model="form_data.tool_params[form_data.params_nested]"
@@ -116,7 +120,6 @@ const form = {
   params_nested: ''
 }
 
-
 function submitDialog(val: string) {
   set(props.nodeModel.properties.node_data, 'mcp_servers', val)
 }
@@ -132,17 +135,23 @@ function getTools() {
     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'))
-  })
+  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'))
+    })
 }
 
 function changeTool() {
-  form_data.value.mcp_server = form_data.value.mcp_tools.filter((item: any) => item.name === form_data.value.mcp_tool)[0].server
+  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
+  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
@@ -201,7 +210,10 @@ function changeTool() {
   //
   if (form_data.value.params_nested) {
     form_data.value.tool_params = { [form_data.value.params_nested]: {} }
-    dynamicsFormRef.value?.render(form_data.value.tool_form_field, form_data.value.tool_params[form_data.value.params_nested])
+    dynamicsFormRef.value?.render(
+      form_data.value.tool_form_field,
+      form_data.value.tool_params[form_data.value.params_nested]
+    )
   } else {
     form_data.value.tool_params = {}
     dynamicsFormRef.value?.render(form_data.value.tool_form_field, form_data.value.tool_params)
@@ -223,14 +235,10 @@ const form_data = computed({
   }
 })
 
-
 const replyNodeFormRef = ref()
 
 const validate = async () => {
-  let ps = [
-    replyNodeFormRef.value?.validate(),
-    dynamicsFormRef.value?.validate()
-  ]
+  let ps = [replyNodeFormRef.value?.validate(), dynamicsFormRef.value?.validate()]
   return Promise.all(ps).catch((err: any) => {
     return Promise.reject({ node: props.nodeModel, errMessage: err })
   })