chore: panel other collasple handle

web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx

@@ -376,6 +376,7 @@ function Form<
             tooltip={tooltip?.[language] || tooltip?.en_US}
             value={value[variable] || []}
             onChange={item => handleFormChange(variable, item as any)}
+            supportCollapse
           />
           {fieldMoreInfo?.(formSchema)}
           {validating && changeKey === variable && <ValidatingTip />}

web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   RiAddLine,
-  RiArrowDropDownLine,
   RiQuestionLine,
 } from '@remixicon/react'
 import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-selector'
@@ -13,6 +12,7 @@ import type { ToolValue } from '@/app/components/workflow/block-selector/types'
 import type { Node } from 'reactflow'
 import type { NodeOutPutVar } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
+import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
 
 type Props = {
   disabled?: boolean
@@ -98,14 +98,12 @@ const MultipleToolSelector = ({
             </Tooltip>
           )}
           {supportCollapse && (
-            <div className='absolute -left-4 top-1'>
+            <ArrowDownRoundFill
-              <RiArrowDropDownLine
+              className={cn(
-                className={cn(
+                'h-4 w-4 cursor-pointer text-text-quaternary group-hover/collapse:text-text-secondary',
-                  'h-4 w-4 text-text-tertiary',
+                collapse && 'rotate-[270deg]',
-                  collapse && '-rotate-90',
+              )}
-                )}
+            />
-              />
-            </div>
           )}
         </div>
         {value.length > 0 && (

web/app/components/workflow/nodes/_base/components/collapse/index.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
 import cn from '@/utils/classnames'
 
@@ -7,12 +7,12 @@ export { default as FieldCollapse } from './field-collapse'
 
 type CollapseProps = {
   disabled?: boolean
-  trigger: React.JSX.Element
+  trigger: React.JSX.Element | ((collapseIcon: React.JSX.Element | null) => React.JSX.Element)
   children: React.JSX.Element
   collapsed?: boolean
   onCollapse?: (collapsed: boolean) => void
   operations?: ReactNode
-
+  hideCollapseIcon?: boolean
 }
 const Collapse = ({
   disabled,
@@ -21,10 +21,23 @@ const Collapse = ({
   collapsed,
   onCollapse,
   operations,
+  hideCollapseIcon,
 }: CollapseProps) => {
   const [collapsedLocal, setCollapsedLocal] = useState(true)
   const collapsedMerged = collapsed !== undefined ? collapsed : collapsedLocal
+  const collapseIcon = useMemo(() => {
+    if (disabled)
+      return null
 
+    return (
+      <ArrowDownRoundFill
+        className={cn(
+          'h-4 w-4 cursor-pointer text-text-quaternary group-hover/collapse:text-text-secondary',
+          collapsedMerged && 'rotate-[270deg]',
+        )}
+      />
+    )
+  }, [collapsedMerged, disabled])
   return (
     <>
       <div className='group/collapse flex items-center'>
@@ -37,19 +50,12 @@ const Collapse = ({
             }
           }}
         >
-          {trigger}
+          {typeof trigger === 'function' ? trigger(collapseIcon) : trigger}
-          <div className='h-4 w-4 shrink-0'>
+          {!hideCollapseIcon && (
-            {
+            <div className='h-4 w-4 shrink-0'>
-              !disabled && (
+              {collapseIcon}
-                <ArrowDownRoundFill
+            </div>
-                  className={cn(
+          )}
-                    'h-4 w-4 cursor-pointer text-text-quaternary group-hover/collapse:text-text-secondary',
-                    collapsedMerged && 'rotate-[270deg]',
-                  )}
-                />
-              )
-            }
-          </div>
         </div>
         {operations}
       </div>

web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-panel.tsx

@@ -49,20 +49,23 @@ const ErrorHandle = ({
           disabled={!error_strategy}
           collapsed={collapsed}
           onCollapse={setCollapsed}
+          hideCollapseIcon
           trigger={
-            <div className='flex grow items-center justify-between pr-4'>
+            collapseIcon => (
-              <div className='flex items-center'>
+              <div className='flex grow items-center justify-between pr-4'>
-                <div className='system-sm-semibold-uppercase mr-0.5 text-text-secondary'>
+                <div className='flex items-center'>
-                  {t('workflow.nodes.common.errorHandle.title')}
+                  <div className='system-sm-semibold-uppercase mr-0.5 text-text-secondary'>
+                    {t('workflow.nodes.common.errorHandle.title')}
+                  </div>
+                  <Tooltip popupContent={t('workflow.nodes.common.errorHandle.tip')} />
+                  {collapseIcon}
                 </div>
-                <Tooltip popupContent={t('workflow.nodes.common.errorHandle.tip')} />
+                <ErrorHandleTypeSelector
+                  value={error_strategy || ErrorHandleTypeEnum.none}
+                  onSelected={getHandleErrorHandleTypeChange(data)}
+                />
               </div>
-              <ErrorHandleTypeSelector
+            )}
-                value={error_strategy || ErrorHandleTypeEnum.none}
-                onSelected={getHandleErrorHandleTypeChange(data)}
-              />
-            </div>
-          }
         >
           <>
             {

web/app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx

@@ -50,6 +50,7 @@ const ErrorHandleTypeSelector = ({
     >
       <PortalToFollowElemTrigger onClick={(e) => {
         e.stopPropagation()
+        e.nativeEvent.stopImmediatePropagation()
         setOpen(v => !v)
       }}>
         <Button
@@ -68,6 +69,7 @@ const ErrorHandleTypeSelector = ({
                 className='flex cursor-pointer rounded-lg p-2 pr-3 hover:bg-state-base-hover'
                 onClick={(e) => {
                   e.stopPropagation()
+                  e.nativeEvent.stopImmediatePropagation()
                   onSelected(option.value)
                   setOpen(false)
                 }}

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

@@ -38,7 +38,8 @@ const MetadataFilter = ({
       disabled={metadataFilterMode === MetadataFilteringModeEnum.disabled || metadataFilterMode === MetadataFilteringModeEnum.manual}
       collapsed={collapsed}
       onCollapse={setCollapsed}
-      trigger={
+      hideCollapseIcon
+      trigger={collapseIcon => (
         <div className='flex grow items-center justify-between pr-4'>
           <div className='flex items-center'>
             <div className='system-sm-semibold-uppercase mr-0.5 text-text-secondary'>
@@ -51,6 +52,7 @@ const MetadataFilter = ({
                 </div>
               )}
             />
+            {collapseIcon}
           </div>
           <div className='flex items-center'>
             <MetadataFilterSelector
@@ -66,7 +68,7 @@ const MetadataFilter = ({
             }
           </div>
         </div>
-      }
+      )}
     >
       <>
         {
@@ -85,8 +87,8 @@ const MetadataFilter = ({
                   provider={metadataModelConfig?.provider || ''}
                   completionParams={metadataModelConfig?.completion_params || { temperature: 0.7 }}
                   modelId={metadataModelConfig?.name || ''}
-                  setModel={handleMetadataModelChange || (() => {})}
+                  setModel={handleMetadataModelChange || (() => { })}
-                  onCompletionParamsChange={handleMetadataCompletionParamsChange || (() => {})}
+                  onCompletionParamsChange={handleMetadataCompletionParamsChange || (() => { })}
                   hideDebugWithMultipleModel
                   debugWithMultipleModel={false}
                 />