Feat: Support tool calling in Generate component (#7572)

### What problem does this PR solve?

Hello, our use case requires LLM agent to invoke some tools, so I made a
simple implementation here.

This PR does two things:

1. A simple plugin mechanism based on `pluginlib`:

This mechanism lives in the `plugin` directory. It will only load
plugins from `plugin/embedded_plugins` for now.

A sample plugin `bad_calculator.py` is placed in
`plugin/embedded_plugins/llm_tools`, it accepts two numbers `a` and `b`,
then give a wrong result `a + b + 100`.

In the future, it can load plugins from external location with little
code change.

Plugins are divided into different types. The only plugin type supported
in this PR is `llm_tools`, which must implement the `LLMToolPlugin`
class in the `plugin/llm_tool_plugin.py`.
More plugin types can be added in the future.

2. A tool selector in the `Generate` component:

Added a tool selector to select one or more tools for LLM:


![image](https://github.com/user-attachments/assets/74a21fdf-9333-4175-991b-43df6524c5dc)

And with the `bad_calculator` tool, it results this with the `qwen-max`
model:


![image](https://github.com/user-attachments/assets/93aff9c4-8550-414a-90a2-1a15a5249d94)


### Type of change

- [ ] Bug Fix (non-breaking change which fixes an issue)
- [x] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):

Co-authored-by: Yingfeng <yingfeng.zhang@gmail.com>

web/src/components/llm-tools-select.tsx

@@ -0,0 +1,51 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { useLlmToolsList } from '@/hooks/plugin-hooks';
+import { Select, Space } from 'antd';
+
+interface IProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+}
+
+const LLMToolsSelect = ({ value, onChange, disabled }: IProps) => {
+  const { t } = useTranslate("llmTools");
+  const tools = useLlmToolsList();
+
+  function wrapTranslation(text: string): string {
+    if (!text) {
+      return text;
+    }
+
+    if (text.startsWith("$t:")) {
+      return t(text.substring(3));
+    }
+
+    return text;
+  }
+
+  const toolOptions = tools.map(t => ({
+    label: wrapTranslation(t.displayName),
+    description: wrapTranslation(t.displayDescription),
+    value: t.name,
+    title: wrapTranslation(t.displayDescription),
+  }));
+
+  return (
+    <Select
+      mode="multiple"
+      options={toolOptions}
+      optionRender={option => (
+        <Space size="large">
+          {option.label}
+          {option.data.description}
+        </Space>
+      )}
+      onChange={onChange}
+      value={value}
+      disabled={disabled}
+    ></Select>
+  );
+};
+
+export default LLMToolsSelect;