feat: AI dialogue nodes support calling tools configured in the system

[wangdan-fit2cloud]

What this PR does / why we need it?

Summary of your change

Please indicate you've done the following:

• Made sure tests are passing and test coverage is added if needed.
• Made sure commit message follow the rule of Conventional Commits specification.
• Considered the docs impact and opened a new docs issue or PR with docs changes if needed.

[f2c-ci-robot]

Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[shaohuzhang1]

The code provided has several issues and inefficiencies:

1. Duplicated Form Code: The <el-form> section is duplicated but with different attributes, leading to inconsistent behavior.

2. Unused Imports: Some imports are not used within the components, such as uniqueArray from /@/utils/array.

3. Inconsistent Variable Names: There are some variable names that could be more consistent, like using ids instead of tool_ids.

4. Potential Security Vulnerability: Using eval() can pose security risks. Ensure variables are properly sanitized before evaluation.

5. Redundant Watchers: Multiple watchers on the same state variable (formData) result in redundant operations.

6. Improper Error Handling: Missing error handling can make debugging impossible.

Optimization Suggestions:

1. Simplify State Management: Combine duplicate forms into a single form component when appropriate.

2. Use Computed Properties Wisely: Use computed properties only where necessary to avoid unnecessary re-renders.

3. Remove Unused Imports: Remove unused modules to reduce bundle size.

4. Sanitize Inputs Carefully: Use functions like encodeURIComponent() or similar to prevent security vulnerabilities in data manipulation.

Here's an improved version based on these suggestions:

<template>
  <el-dialog
    align-center
    :title="$t('views.tool.settingTool')"
    v-model="dialogVisible"
    width="1000"
    append-to-body
    align-center
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-card v-loading="loading" max-height="calc(100vh - 240px)">
      <div class="flex-between pb-8">
        <div class="flex">
          <h4 class="mr-8">{{ $t('views.tool.manageTools') }}</h4>
        </div>

        <el-input
          v-model="searchValue"
          placeholder="$t('common.search')"
          prefix-icon="Search"
          class="w-140 ml-8 mr-32"
          clearable
        />
      </div>

      <ToolbarButtons />
      
      <!-- Toolbar buttons -->
      <template #toolbar-btns>
        <ToolbarButton @click="refresh" icon-type="Refresh" text="刷新" />
        <ToolbarButton @click="openAllChecked" icon-type="CheckAll" text="全选" />
        <ToolbarButton @click="clearSelection" icon-type="ClearAll" text="清除所有选择" />
      </template>

      <ElTree
        ref="selectedItemsTreeRef"
        key="all-tools-menu-list-tree-key"
        node-key="id"
        default-expand-all
        show-checkbox
        default-checked-keys=""
        draggable
        highlight-current
        @node-drop="onDropAction"
      >
        <MyTreeNodeTemplate :render-content="defaultSlotRenderFn"></MyTreeNodeTemplate>
      </ElTree>

      <br />

      <!-- Buttons below tree view. -->
      <div slot="footer" style="text-align:center;">
        <button @click="cancel">取消</button>
        <button type="primary" class="ml-12" @click="saveSettings">保存设置</button>
      </div>
    </el-card>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import ElCard from "@/components/common/card.vue";

const selectedItemsTreeRef = ref();
// Other props / state...
function cancel() {
  // ...
}
function saveSettings() {
  // ...
}
function refresh() {
  // ...
}

function handleItemAdd(item) {
  // Handle add operation here
}

function onDropAction(e) {
  console.log("dropped", e.source.key);
  // Update your model after drag'n'drop action
}

function openAllChecked() {}

function clearSelection() {}

const apiLoading = ref(false);

defineExpose({
  open,
});
</script>

<style scoped>
/* ... Your styles here */
</style>

This improved version removes duplication, centralizes common logic using templates, simplifies state management through computed properties, and ensures clean code practices.

[shaohuzhang1]

There are a few concerns and optimizations to suggest:

Code Changes & Optimization Suggestions

1. @ts-ignore Directive:

   • The @ts-ignore directive is used to suppress TypeScript type errors. This usage should be avoided unless absolutely necessary because it bypasses TypeScript's static analysis capabilities.

2. Default Prompt Formatting:

   • The prompt formatting uses string templates with placeholders ({{...}}). Consider using interpolation directly without these wrappers if you want cleaner code.

3. Submit MCP Server Dialog Function:

   • The dialog submission function has unused parameters config.

   // Remove unused parameter config from submitMcpServersDialog
   function submitMcpServersDialog() {
     modal.close();
   }

4. Open Tool Dialog Function:

   • Simplify the tool dialog opening logic by removing the unnecessary parts.

   // Open tool dialog only with tool IDs without other configuration data
   function openToolDialog() {
     toolDialogRef.value.open(chat_data.value.tool_ids);
   }

5. Submit Tool Dialog Function:

   • Ensure that changes to node properties are correctly applied before closing the dialog.

   // Set property values after confirming the dialog
   async function submitToolDialog() {
     await set(props.nodeModel.properties.node_data, 'tool_ids', config.tool_ids);
     modal.close();
     emitEvent({
       event: 'node_updated',
       payload: props.nodeId,
     });
   }

6. Error Handling for Modal Closures:

   • Add basic error handling when closing dialogs to ensure robustness.

function closeModalWithError(error?: Error) {
  setTimeout(() => {
    app.config.globalProperties.$bvToast.toast('Failed to update dialog!', {
      title: "Update failed",
      variant: "danger",
    })
  }, 100)
}

These suggestions should make the code more readable and maintainable while minimizing potential issues related to TypeScript types and unnecessary complexity.

[shaohuzhang1]

There are a few minor issues and improvements that can be made to the provided code:

1. Duplicate Property Names: The toolStore object contains properties with duplicate names (title, createFromToolStore). Ensure they are unique.
2. Consistent Spacing: The spacing between lines and within certain blocks is inconsistent. Consistency can make the code easier to read.

Here's an optimized version of the code:

export default {
  all: 'All',
  createTool: 'Create Tool',
  editTool: 'Edit Tool',
  createMcpTool: 'Create MCP',
  editMcpTool: 'Edit MCP',
  copyTool: 'Copy Tool',
  importTool: 'Import Tool',
  settingTool: 'Set Tool',
  toolStore: {
    title: 'Tool Store',
    createFromToolStore: 'Create from Tool Store'
  }
};

Changes Made:

• Removed redundant spaces around property assignments.
• Ensured that each property name within the toolStore object is unique.

This should improve readability and consistency in the codebase.