Feat: Add tool nodes and tool drop-down menu #3221 (#8335)

### What problem does this PR solve?

Feat: Add tool nodes and tool drop-down menu #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/form/agent-form/use-values.ts

@@ -2,7 +2,7 @@ import { useFetchModelId } from '@/hooks/logic-hooks';
 import { RAGFlowNodeType } from '@/interfaces/database/flow';
 import { get, isEmpty } from 'lodash';
 import { useMemo } from 'react';
-import { initialAgentValues } from '../../constant';
+import { Operator, initialAgentValues } from '../../constant';
 
 export function useValues(node?: RAGFlowNodeType) {
   const llmId = useFetchModelId();
@@ -28,3 +28,48 @@ export function useValues(node?: RAGFlowNodeType) {
 
   return values;
 }
+
+function buildOptions(list: string[]) {
+  return list.map((x) => ({ label: x, value: x }));
+}
+
+export function useToolOptions() {
+  const options = useMemo(() => {
+    const options = [
+      {
+        label: 'Search',
+        options: buildOptions([
+          Operator.Google,
+          Operator.Bing,
+          Operator.DuckDuckGo,
+          Operator.Wikipedia,
+          Operator.YahooFinance,
+          Operator.PubMed,
+          Operator.GoogleScholar,
+        ]),
+      },
+      {
+        label: 'Communication',
+        options: buildOptions([Operator.Email]),
+      },
+      {
+        label: 'Productivity',
+        options: [],
+      },
+      {
+        label: 'Developer',
+        options: buildOptions([
+          Operator.GitHub,
+          Operator.ExeSQL,
+          Operator.Invoke,
+          Operator.Crawler,
+          Operator.Code,
+        ]),
+      },
+    ];
+
+    return options;
+  }, []);
+
+  return options;
+}