Feat: Support passing knowledge base id as variable in retrieval component (#7088)

### What problem does this PR solve?

Fix #6600

Hello, I have the same business requirement as #6600. My use case is: 

We have many departments (> 20 now and increasing), and each department
has its own knowledge base. Because the agent workflow is the same, so I
want to change the knowledge base on the fly, instead of creating agents
for every department.

It now looks like this:


![屏幕截图_20250416_212622](https://github.com/user-attachments/assets/5cb3dade-d4fb-4591-ade3-4b9c54387911)

Knowledge bases can be selected from the dropdown, and passed through
the variables in the table. All selected knowledge bases are used for
retrieval.

### 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/pages/flow/form/components/dynamic-input-variable.tsx

@@ -8,7 +8,9 @@ import { useBuildComponentIdSelectOptions } from '../../hooks/use-get-begin-quer
 import styles from './index.less';
 
 interface IProps {
+  name?: string;
   node?: RAGFlowNodeType;
+  title?: string;
 }
 
 enum VariableType {
@@ -19,7 +21,8 @@ enum VariableType {
 const getVariableName = (type: string) =>
   type === VariableType.Reference ? 'component_id' : 'value';
 
-const DynamicVariableForm = ({ node }: IProps) => {
+const DynamicVariableForm = ({ name: formName, node }: IProps) => {
+  formName = formName || 'query';
   const { t } = useTranslation();
   const valueOptions = useBuildComponentIdSelectOptions(
     node?.id,
@@ -35,15 +38,15 @@ const DynamicVariableForm = ({ node }: IProps) => {
   const handleTypeChange = useCallback(
     (name: number) => () => {
       setTimeout(() => {
-        form.setFieldValue(['query', name, 'component_id'], undefined);
-        form.setFieldValue(['query', name, 'value'], undefined);
+        form.setFieldValue([formName, name, 'component_id'], undefined);
+        form.setFieldValue([formName, name, 'value'], undefined);
       }, 0);
     },
     [form],
   );
 
   return (
-    <Form.List name="query">
+    <Form.List name={formName}>
       {(fields, { add, remove }) => (
         <>
           {fields.map(({ key, name, ...restField }) => (
@@ -60,7 +63,7 @@ const DynamicVariableForm = ({ node }: IProps) => {
               </Form.Item>
               <Form.Item noStyle dependencies={[name, 'type']}>
                 {({ getFieldValue }) => {
-                  const type = getFieldValue(['query', name, 'type']);
+                  const type = getFieldValue([formName, name, 'type']);
                   return (
                     <Form.Item
                       {...restField}
@@ -118,11 +121,11 @@ export function FormCollapse({
   );
 }
 
-const DynamicInputVariable = ({ node }: IProps) => {
+const DynamicInputVariable = ({ name, node, title }: IProps) => {
   const { t } = useTranslation();
   return (
-    <FormCollapse title={t('flow.input')}>
-      <DynamicVariableForm node={node}></DynamicVariableForm>
+    <FormCollapse title={title || t('flow.input')}>
+      <DynamicVariableForm name={name} node={node}></DynamicVariableForm>
     </FormCollapse>
   );
 };

web/src/pages/flow/form/retrieval-form/index.tsx

@@ -43,7 +43,14 @@ const RetrievalForm = ({ onValuesChange, form, node }: IOperatorForm) => {
       <Rerank></Rerank>
       <TavilyItem name={'tavily_api_key'}></TavilyItem>
       <UseKnowledgeGraphItem filedName={'use_kg'}></UseKnowledgeGraphItem>
-      <KnowledgeBaseItem></KnowledgeBaseItem>
+      <KnowledgeBaseItem
+        tooltipText={t('knowledgeBasesTip')}
+      ></KnowledgeBaseItem>
+      <DynamicInputVariable
+        name={'kb_vars'}
+        node={node}
+        title={t('knowledgeBaseVars')}
+      ></DynamicInputVariable>
       <Form.Item
         name={'empty_response'}
         label={t('emptyResponse', { keyPrefix: 'chat' })}