File size: 1,995 Bytes
4304c6d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import {
  memo,
  useCallback,
} from 'react'
import { useTranslation } from 'react-i18next'
import { useStore } from './store'
import {
  useIsChatMode,
  useNodesReadOnly,
  useNodesSyncDraft,
} from './hooks'
import { XClose } from '@/app/components/base/icons/src/vender/line/general'
import {
  FeaturesChoose,
  FeaturesPanel,
} from '@/app/components/base/features'

const Features = () => {
  const { t } = useTranslation()
  const isChatMode = useIsChatMode()
  const setShowFeaturesPanel = useStore(s => s.setShowFeaturesPanel)
  const { nodesReadOnly } = useNodesReadOnly()
  const { handleSyncWorkflowDraft } = useNodesSyncDraft()

  const handleFeaturesChange = useCallback(() => {
    handleSyncWorkflowDraft()
  }, [handleSyncWorkflowDraft])

  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)}

          >

            <XClose className='w-4 h-4 text-gray-500' />

          </div>

        </div>

      </div>
      <div className='p-4'>

        <FeaturesPanel

          disabled={nodesReadOnly}

          onChange={handleFeaturesChange}

          openingStatementProps={{

            onAutoAddPromptVariable: () => {},

          }}

        />

      </div>
    </div>
  )
}

export default memo(Features)