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={[
         {

web/src/pages/flow/constant.tsx

@@ -56,6 +56,7 @@ import upperFirst from 'lodash/upperFirst';
 import {
   CirclePower,
   CloudUpload,
+  Database,
   IterationCcw,
   ListOrdered,
   OptionIcon,
@@ -2949,6 +2950,7 @@ export enum BeginQueryType {
   File = 'file',
   Integer = 'integer',
   Boolean = 'boolean',
+  KnowledgeBases = 'kb',
 }
 
 export const BeginQueryTypeIconMap = {
@@ -2958,6 +2960,7 @@ export const BeginQueryTypeIconMap = {
   [BeginQueryType.File]: CloudUpload,
   [BeginQueryType.Integer]: ListOrdered,
   [BeginQueryType.Boolean]: ToggleLeft,
+  [BeginQueryType.KnowledgeBases]: Database,
 };
 
 export const NoDebugOperatorsList = [

web/src/pages/flow/debug-content/index.tsx

@@ -25,6 +25,7 @@ import { BeginQuery } from '../interface';
 import { PopoverForm } from './popover-form';
 
 import styles from './index.less';
+import KnowledgeBaseItem from '@/components/knowledge-base-item';
 
 interface IProps {
   parameters: BeginQuery[];
@@ -164,6 +165,13 @@ const DebugContent = ({
             <Switch></Switch>
           </Form.Item>
         ),
+        [BeginQueryType.KnowledgeBases]: (
+          <KnowledgeBaseItem
+            name={idx.toString()}
+            label={q.name || q.key}
+            required={!q.optional}
+          ></KnowledgeBaseItem>
+        )
       };
 
       return (
@@ -182,12 +190,16 @@ const DebugContent = ({
       if (Array.isArray(value)) {
         nextValue = ``;
 
-        value.forEach((x) => {
-          nextValue +=
-            x?.originFileObj instanceof File
-              ? `${x.name}\n${x.response?.data}\n----\n`
-              : `${x.url}\n${x.result}\n----\n`;
-        });
+        if (item.type === 'kb') {
+          nextValue = value.join(',')
+        } else {
+          value.forEach((x) => {
+            nextValue +=
+              x?.originFileObj instanceof File
+                ? `${x.name}\n${x.response?.data}\n----\n`
+                : `${x.url}\n${x.result}\n----\n`;
+          });
+        }
       }
       return { ...item, value: nextValue };
     });