From d361675159cc38535bf48f823580ce6a77e947fb Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 1 Aug 2024 17:54:33 +0800
Subject: [PATCH] chore: some select style

---
 web/app/components/base/select/index.tsx      |  4 +--
 .../components/filter-condition.tsx           | 15 ++++++---
 .../components/sub-variable-picker.tsx        | 12 +++++--
 .../workflow/nodes/list-filter/panel.tsx      |  9 ++++--
 .../workflow/nodes/list-filter/use-config.ts  | 32 ++++++++++++++++++-
 5 files changed, 60 insertions(+), 12 deletions(-)

diff --git a/web/app/components/base/select/index.tsx b/web/app/components/base/select/index.tsx
index fbfe742061..fb5c2a4bcf 100644
--- a/web/app/components/base/select/index.tsx
+++ b/web/app/components/base/select/index.tsx
@@ -108,7 +108,7 @@ const Select: FC<ISelectProps> = ({
                 if (!disabled)
                   setOpen(!open)
               }
-            } className={classNames(optionClassName, `flex items-center h-9 w-full rounded-lg border-0 ${bgClassName} py-1.5 pl-3 pr-10 shadow-sm sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200`)}>
+            } className={classNames(`flex items-center h-9 w-full rounded-lg border-0 ${bgClassName} py-1.5 pl-3 pr-10 shadow-sm sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200`, optionClassName)}>
               <div className='w-0 grow text-left truncate' title={selectedItem?.name}>{selectedItem?.name}</div>
             </Combobox.Button>}
           <Combobox.Button className="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none group-hover:bg-gray-200" onClick={
@@ -200,7 +200,7 @@ const SimpleSelect: FC<ISelectProps> = ({
       }}
     >
       <div className={classNames('relative h-9', wrapperClassName)}>
-        <Listbox.Button className={`w-full h-full rounded-lg border-0 bg-gray-100 py-1.5 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'} ${className}`}>
+        <Listbox.Button className={`flex items-center w-full h-full rounded-lg border-0 bg-gray-100 pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-gray-200 group-hover:bg-gray-200 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'} ${className}`}>
           <span className={classNames('block truncate text-left', !selectedItem?.name && 'text-gray-400')}>{selectedItem?.name ?? localPlaceholder}</span>
           <span className="absolute inset-y-0 right-0 flex items-center pr-2">
             {selectedItem
diff --git a/web/app/components/workflow/nodes/list-filter/components/filter-condition.tsx b/web/app/components/workflow/nodes/list-filter/components/filter-condition.tsx
index 876a100f9f..3543cef7a1 100644
--- a/web/app/components/workflow/nodes/list-filter/components/filter-condition.tsx
+++ b/web/app/components/workflow/nodes/list-filter/components/filter-condition.tsx
@@ -5,19 +5,26 @@ import SubVariablePicker from './sub-variable-picker'
 import { SimpleSelect as Select } from '@/app/components/base/select'
 import Input from '@/app/components/base/input'
 
-const FilterCondition: FC = () => {
+type Props = {
+  hasSubVariable: boolean
+}
+
+const FilterCondition: FC<Props> = ({
+  hasSubVariable,
+}) => {
   return (
     <div>
-      <SubVariablePicker />
-      <div className='mt-2 flex space-x-1'>
+      {hasSubVariable && <SubVariablePicker className="mb-2" />}
+      <div className='flex space-x-1'>
         <Select
           wrapperClassName='shrink-0 h-8'
+          className='!text-[13px]'
           items={[
             { value: '1', name: 'include', type: '' },
           ]}
           onSelect={() => { }}
         />
-        <Input className='grow h-8' />
+        <Input className='grow h-8 text-components-input-text-filled system-sm-regular !text-[13px]' />
       </div>
     </div>
   )
diff --git a/web/app/components/workflow/nodes/list-filter/components/sub-variable-picker.tsx b/web/app/components/workflow/nodes/list-filter/components/sub-variable-picker.tsx
index 3ce4bb6996..4714ec73e5 100644
--- a/web/app/components/workflow/nodes/list-filter/components/sub-variable-picker.tsx
+++ b/web/app/components/workflow/nodes/list-filter/components/sub-variable-picker.tsx
@@ -3,8 +3,15 @@ import type { FC } from 'react'
 import React from 'react'
 import { SimpleSelect as Select } from '@/app/components/base/select'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+import cn from '@/utils/classnames'
 
-const SubVariablePicker: FC = () => {
+type Props = {
+  className?: string
+}
+
+const SubVariablePicker: FC<Props> = ({
+  className,
+}) => {
   const renderOption = ({ item }: { item: Record<string, any> }) => {
     return (
       <div className='flex items-center h-6 justify-between'>
@@ -17,7 +24,7 @@ const SubVariablePicker: FC = () => {
     )
   }
   return (
-    <div>
+    <div className={cn(className)}>
       <Select
         items={[
           { value: '1', name: 'name', type: 'string' },
@@ -25,6 +32,7 @@ const SubVariablePicker: FC = () => {
         ]}
         defaultValue={'1'}
         onSelect={() => { }}
+        className='!text-[13px]'
         placeholder='Select sub variable key'
         optionClassName='pl-4 pr-5 py-0'
         renderOption={renderOption}
diff --git a/web/app/components/workflow/nodes/list-filter/panel.tsx b/web/app/components/workflow/nodes/list-filter/panel.tsx
index 71e8784450..313cdc8a72 100644
--- a/web/app/components/workflow/nodes/list-filter/panel.tsx
+++ b/web/app/components/workflow/nodes/list-filter/panel.tsx
@@ -25,6 +25,7 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
   const {
     readOnly,
     inputs,
+    hasSubVariable,
     handleVarChanges,
     filterVar,
     handleLimitChange,
@@ -52,7 +53,7 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
           title={t(`${i18nPrefix}.filterCondition`)}
           isSubTitle
         >
-          <FilterCondition />
+          <FilterCondition hasSubVariable={hasSubVariable} />
         </Field>
         <Split />
         <Field
@@ -69,8 +70,10 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
           {inputs.orderBy?.enabled
             ? (
               <div className='flex items-center justify-between'>
-                <div className='grow mr-2'><SubVariablePicker /></div>
-                <div className='shrink-0 flex space-x-1'>
+                {hasSubVariable && (
+                  <div className='grow mr-2'><SubVariablePicker /></div>
+                )}
+                <div className={!hasSubVariable ? 'w-full grid grid-cols-2 gap-1' : 'shrink-0 flex space-x-1'}>
                   <OptionCard
                     title={t(`${i18nPrefix}.asc`)}
                     onSelect={handleOrderByTypeChange(OrderBy.ASC)}
diff --git a/web/app/components/workflow/nodes/list-filter/use-config.ts b/web/app/components/workflow/nodes/list-filter/use-config.ts
index 6377de4eff..d427ec93ed 100644
--- a/web/app/components/workflow/nodes/list-filter/use-config.ts
+++ b/web/app/components/workflow/nodes/list-filter/use-config.ts
@@ -1,18 +1,47 @@
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import produce from 'immer'
+import { useStoreApi } from 'reactflow'
 import type { ValueSelector, Var } from '../../types'
 import { VarType } from '../../types'
 import type { Limit, ListFilterNodeType, OrderBy } from './types'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 import {
+  useIsChatMode,
   useNodesReadOnly,
+  useWorkflow,
+  useWorkflowVariables,
 } from '@/app/components/workflow/hooks'
 
 const useConfig = (id: string, payload: ListFilterNodeType) => {
   const { nodesReadOnly: readOnly } = useNodesReadOnly()
+  const isChatMode = useIsChatMode()
+
+  const store = useStoreApi()
+  const { getBeforeNodesInSameBranch } = useWorkflow()
+
+  const {
+    getNodes,
+  } = store.getState()
+  const currentNode = getNodes().find(n => n.id === id)
+  const isInIteration = payload.isInIteration
+  const iterationNode = isInIteration ? getNodes().find(n => n.id === currentNode!.parentId) : null
+  const availableNodes = useMemo(() => {
+    return getBeforeNodesInSameBranch(id)
+  }, [getBeforeNodesInSameBranch, id])
 
   const { inputs, setInputs } = useNodeCrud<ListFilterNodeType>(id, payload)
 
+  const { getCurrentVariableType } = useWorkflowVariables()
+  const varType = getCurrentVariableType({
+    parentNode: iterationNode,
+    valueSelector: inputs.variable || [],
+    availableNodes,
+    isChatMode,
+    isConstant: false,
+  })
+
+  const hasSubVariable = [VarType.arrayFile, VarType.arrayObject].includes(varType)
+
   const handleVarChanges = useCallback((variable: ValueSelector | string) => {
     const newInputs = produce(inputs, (draft) => {
       draft.variable = variable as ValueSelector
@@ -51,6 +80,7 @@ const useConfig = (id: string, payload: ListFilterNodeType) => {
     readOnly,
     inputs,
     filterVar,
+    hasSubVariable,
     handleVarChanges,
     handleLimitChange,
     handleOrderByEnabledChange,