feat: workflow knowledge node metadata

web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/add-condition.tsx

@@ -35,7 +35,7 @@ const AddCondition = ({
           Add Condition
         </Button>
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent>
+      <PortalToFollowElemContent className='z-10'>
         <div className='w-[320px] bg-components-panel-bg-blur border-[0.5px] border-components-panel-border rounded-xl shadow-lg'>
           <div className='p-2 pb-1'>
             <Input

web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/index.tsx

@@ -16,7 +16,10 @@ type ConditionListProps = {
 } & Omit<MetadataShape, 'handleAddCondition'>
 const ConditionList = ({
   disabled,
-  metadataFilteringConditions,
+  metadataFilteringConditions = {
+    conditions: [],
+    logical_operator: LogicalOperator.and,
+  },
   handleRemoveCondition,
   handleToggleConditionLogicalOperator,
   handleUpdateCondition,
@@ -54,6 +57,7 @@ const ConditionList = ({
         conditions.map((condition, index) => (
           <ConditionItem
             key={index}
+            index={index}
             className={conditionItemClassName}
             disabled={disabled}
             condition={condition}

web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/index.tsx

@@ -7,7 +7,7 @@ import type { MetadataShape } from '@/app/components/workflow/nodes/knowledge-re
 import { MetadataFilteringModeEnum } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
 
 type MetadataFilterProps = {
-  metadataFilterMode: MetadataFilteringModeEnum
+  metadataFilterMode?: MetadataFilteringModeEnum
   handleMetadataFilterModeChange: (mode: MetadataFilteringModeEnum) => void
 } & MetadataShape
 const MetadataFilter = ({
@@ -19,7 +19,7 @@ const MetadataFilter = ({
 
   return (
     <Collapse
-      disabled={metadataFilterMode === MetadataFilteringModeEnum.disabled}
+      disabled={metadataFilterMode === MetadataFilteringModeEnum.disabled || metadataFilterMode === MetadataFilteringModeEnum.manual}
       collapsed={collapsed}
       onCollapse={setCollapsed}
       trigger={
@@ -28,7 +28,13 @@ const MetadataFilter = ({
             <div className='mr-0.5 system-sm-semibold-uppercase text-text-secondary'>
               metadata filtering
             </div>
-            <Tooltip popupContent='Metadata filtering is the process of using metadata attributes (such as tags, categories, or access permissions) to refine and control the retrieval of relevant information within a system.' />
+            <Tooltip
+              popupContent={(
+                <div className='w-[200px]'>
+                  Metadata filtering is the process of using metadata attributes (such as tags, categories, or access permissions) to refine and control the retrieval of relevant information within a system.
+                </div>
+              )}
+            />
           </div>
           <div className='flex items-center'>
             <MetadataFilterSelector
@@ -37,7 +43,9 @@ const MetadataFilter = ({
             />
             {
               metadataFilterMode === MetadataFilteringModeEnum.manual && (
-                <MetadataTrigger {...restProps} />
+                <div className='ml-1'>
+                  <MetadataTrigger {...restProps} />
+                </div>
               )
             }
           </div>
@@ -47,7 +55,7 @@ const MetadataFilter = ({
       <>
         {
           metadataFilterMode === MetadataFilteringModeEnum.automatic && (
-            <div className='body-xs-regular text-text-tertiary'>
+            <div className='px-4 body-xs-regular text-text-tertiary'>
               Automatically generate metadata filtering conditions based on Query Variable
             </div>
           )

web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/metadata-filter-selector.tsx

@@ -12,11 +12,11 @@ import Button from '@/app/components/base/button'
 import { MetadataFilteringModeEnum } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
 
 type MetadataFilterSelectorProps = {
-  value: MetadataFilteringModeEnum
+  value?: MetadataFilteringModeEnum
   onSelect: (value: MetadataFilteringModeEnum) => void
 }
 const MetadataFilterSelector = ({
-  value,
+  value = MetadataFilteringModeEnum.disabled,
   onSelect,
 }: MetadataFilterSelectorProps) => {
   const [open, setOpen] = useState(false)
@@ -50,7 +50,12 @@ const MetadataFilterSelector = ({
       open={open}
       onOpenChange={setOpen}
     >
-      <PortalToFollowElemTrigger onClick={() => setOpen(!open)}>
+      <PortalToFollowElemTrigger
+        onClick={(e) => {
+          e.stopPropagation()
+          setOpen(!open)
+        }}
+      >
         <Button
           variant='secondary'
           size='small'
@@ -59,8 +64,8 @@ const MetadataFilterSelector = ({
           <RiArrowDownSLine className='w-3.5 h-3.5' />
         </Button>
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent>
-        <div className='p-1 bg-components-panel-bg-blur border-[0.5px] border-components-panel-border rounded-xl shadow-lg'>
+      <PortalToFollowElemContent className='z-10'>
+        <div className='p-1 w-[280px] bg-components-panel-bg-blur border-[0.5px] border-components-panel-border rounded-xl shadow-lg'>
           {
             options.map(option => (
               <div

web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx

@@ -30,11 +30,11 @@ const MetadataTrigger = ({
           <RiFilter3Line className='mr-1 w-3.5 h-3.5' />
           Conditions
           <div className='flex items-center ml-1 px-1 rounded-[5px] border border-divider-deep system-2xs-medium-uppercase text-text-tertiary'>
-            {metadataFilteringConditions.conditions.length}
+            {metadataFilteringConditions?.conditions.length}
           </div>
         </Button>
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent>
+      <PortalToFollowElemContent className='z-10'>
         <MetadataPanel
           metadataFilteringConditions={metadataFilteringConditions}
           onCancel={() => setOpen(false)}

web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx

@@ -9,6 +9,7 @@ import useConfig from './use-config'
 import RetrievalConfig from './components/retrieval-config'
 import AddKnowledge from './components/add-dataset'
 import DatasetList from './components/dataset-list'
+import MetadataFilter from './components/metadata/metadata-filter'
 import type { KnowledgeRetrievalNodeType } from './types'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
@@ -46,6 +47,11 @@ const Panel: FC<NodePanelProps<KnowledgeRetrievalNodeType>> = ({
     runResult,
     rerankModelOpen,
     setRerankModelOpen,
+    handleAddCondition,
+    handleMetadataFilterModeChange,
+    handleRemoveCondition,
+    handleToggleConditionLogicalOperator,
+    handleUpdateCondition,
   } = useConfig(id, data)
 
   const handleOpenFromPropsChange = useCallback((openFromProps: boolean) => {
@@ -106,7 +112,17 @@ const Panel: FC<NodePanelProps<KnowledgeRetrievalNodeType>> = ({
           />
         </Field>
       </div>
-
+      <div className='py-2'>
+        <MetadataFilter
+          metadataFilterMode={inputs.metadata_filtering_mode}
+          metadataFilteringConditions={inputs.metadata_filtering_conditions}
+          handleAddCondition={handleAddCondition}
+          handleMetadataFilterModeChange={handleMetadataFilterModeChange}
+          handleRemoveCondition={handleRemoveCondition}
+          handleToggleConditionLogicalOperator={handleToggleConditionLogicalOperator}
+          handleUpdateCondition={handleUpdateCondition}
+        />
+      </div>
       <Split />
       <div>
         <OutputVars>

web/app/components/workflow/nodes/knowledge-retrieval/types.ts

@@ -99,7 +99,7 @@ export type HandleUpdateCondition = (index: number, newCondition: MetadataFilter
 export type HandleToggleConditionLogicalOperator = () => void
 
 export type MetadataShape = {
-  metadataFilteringConditions: MetadataFilteringConditions
+  metadataFilteringConditions?: MetadataFilteringConditions
   handleAddCondition: HandleAddCondition
   handleRemoveCondition: HandleRemoveCondition
   handleToggleConditionLogicalOperator: HandleToggleConditionLogicalOperator