Feat: Support knowledge base type input in agent flow debugger (#7471)

### What problem does this PR solve?

This is a follow-up of #7088 , adding a knowledge base type input to the
`Begin` component, and a knowledge base selector to the agent flow debug
input panel:


![image](https://github.com/user-attachments/assets/e4cd35f1-1c8e-4f69-bed4-5d613b96d148)

then you can select one or more knowledge bases when testing the agent:


![image](https://github.com/user-attachments/assets/724b547e-4790-4cd8-83d3-67e02f2e76d8)

Note: the lines changed in `agent/component/retrieval.py` after line 94
are modified by `ruff format` from the `pre-commit` hooks, no functional
change.

### 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):

web/src/components/knowledge-base-item.tsx

@@ -10,13 +10,17 @@ import { FormControl, FormField, FormItem, FormLabel } from './ui/form';
 import { MultiSelect } from './ui/multi-select';
 
 interface KnowledgeBaseItemProps {
+  label?: string;
   tooltipText?: string;
+  name?: string;
   required?: boolean;
   onChange?(): void;
 }
 
 const KnowledgeBaseItem = ({
+  label,
   tooltipText,
+  name,
   required = true,
   onChange,
 }: KnowledgeBaseItemProps) => {
@@ -40,8 +44,8 @@ const KnowledgeBaseItem = ({
 
   return (
     <Form.Item
-      label={t('knowledgeBases')}
-      name="kb_ids"
+      label={label || t('knowledgeBases')}
+      name={name || 'kb_ids'}
       tooltip={tooltipText || t('knowledgeBasesTip')}
       rules={[
         {