Feat/attachments (#9526)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>

web/app/components/workflow/features.tsx

@@ -2,8 +2,6 @@ import {
   memo,
   useCallback,
 } from 'react'
-import { useTranslation } from 'react-i18next'
-import { RiCloseLine } from '@remixicon/react'
 import { useNodes } from 'reactflow'
 import { useStore } from './store'
 import {
@@ -14,16 +12,12 @@ import {
 import { type CommonNodeType, type InputVar, InputVarType, type Node } from './types'
 import useConfig from './nodes/start/use-config'
 import type { StartNodeType } from './nodes/start/types'
-import {
-  FeaturesChoose,
-  FeaturesPanel,
-} from '@/app/components/base/features'
 import type { PromptVariable } from '@/models/debug'
+import NewFeaturePanel from '@/app/components/base/features/new-feature-panel'
 
 const Features = () => {
-  const { t } = useTranslation()
-  const isChatMode = useIsChatMode()
   const setShowFeaturesPanel = useStore(s => s.setShowFeaturesPanel)
+  const isChatMode = useIsChatMode()
   const { nodesReadOnly } = useNodesReadOnly()
   const { handleSyncWorkflowDraft } = useNodesSyncDraft()
   const nodes = useNodes<CommonNodeType>()
@@ -47,43 +41,19 @@ const Features = () => {
 
   const handleFeaturesChange = useCallback(() => {
     handleSyncWorkflowDraft()
-  }, [handleSyncWorkflowDraft])
+    setShowFeaturesPanel(true)
+  }, [handleSyncWorkflowDraft, setShowFeaturesPanel])
 
   return (
-    <div className='fixed top-16 left-2 bottom-2 w-[600px] rounded-2xl border-[0.5px] border-gray-200 bg-white shadow-xl z-10'>
-      <div className='flex items-center justify-between px-4 pt-3'>
-        {t('workflow.common.features')}
-        <div className='flex items-center'>
-          {
-            isChatMode && (
-              <>
-                <FeaturesChoose
-                  disabled={nodesReadOnly}
-                  onChange={handleFeaturesChange}
-                />
-                <div className='mx-3 w-[1px] h-[14px] bg-gray-200'></div>
-              </>
-            )
-          }
-          <div
-            className='flex items-center justify-center w-6 h-6 cursor-pointer'
-            onClick={() => setShowFeaturesPanel(false)}
-          >
-            <RiCloseLine className='w-4 h-4 text-gray-500' />
-          </div>
-        </div>
-      </div>
-      <div className='p-4'>
-        <FeaturesPanel
-          disabled={nodesReadOnly}
-          onChange={handleFeaturesChange}
-          openingStatementProps={{
-            onAutoAddPromptVariable: handleAddOpeningStatementVariable,
-          }}
-          workflowVariables={data.variables}
-        />
-      </div>
-    </div>
+    <NewFeaturePanel
+      show
+      isChatMode={isChatMode}
+      disabled={nodesReadOnly}
+      onChange={handleFeaturesChange}
+      onClose={() => setShowFeaturesPanel(false)}
+      onAutoAddPromptVariable={handleAddOpeningStatementVariable}
+      workflowVariables={data.variables}
+    />
   )
 }