Feat/attachments (#9526)

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

web/app/components/app/configuration/config-vision/index.tsx

@@ -1,61 +1,103 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
+import produce from 'immer'
 import { useContext } from 'use-context-selector'
-import Panel from '../base/feature-panel'
 import ParamConfig from './param-config'
+import { Vision } from '@/app/components/base/icons/src/vender/features'
 import Tooltip from '@/app/components/base/tooltip'
-import Switch from '@/app/components/base/switch'
-import { Eye } from '@/app/components/base/icons/src/vender/solid/general'
+// import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
 import ConfigContext from '@/context/debug-configuration'
+// import { Resolution } from '@/types/app'
+import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
+import Switch from '@/app/components/base/switch'
+import type { FileUpload } from '@/app/components/base/features/types'
 
 const ConfigVision: FC = () => {
   const { t } = useTranslation()
-  const {
-    isShowVisionConfig,
-    visionConfig,
-    setVisionConfig,
-  } = useContext(ConfigContext)
+  const { isShowVisionConfig } = useContext(ConfigContext)
+  const file = useFeatures(s => s.features.file)
+  const featuresStore = useFeaturesStore()
+
+  const handleChange = useCallback((data: FileUpload) => {
+    const {
+      features,
+      setFeatures,
+    } = featuresStore!.getState()
+
+    const newFeatures = produce(features, (draft) => {
+      draft.file = {
+        ...draft.file,
+        enabled: data.enabled,
+        image: {
+          enabled: data.enabled,
+          detail: data.image?.detail,
+          transfer_methods: data.image?.transfer_methods,
+          number_limits: data.image?.number_limits,
+        },
+      }
+    })
+    setFeatures(newFeatures)
+  }, [featuresStore])
 
   if (!isShowVisionConfig)
     return null
 
-  return (<>
-    <Panel
-      className="mt-4"
-      headerIcon={
-        <Eye className='w-4 h-4 text-[#6938EF]'/>
-      }
-      title={
-        <div className='flex items-center'>
-          <div className='mr-1'>{t('appDebug.vision.name')}</div>
+  return (
+    <div className='mt-2 flex items-center gap-2 p-2 rounded-xl border-t-[0.5px] border-l-[0.5px] bg-background-section-burn'>
+      <div className='shrink-0 p-1'>
+        <div className='p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600'>
+          <Vision className='w-4 h-4 text-text-primary-on-surface' />
+        </div>
+      </div>
+      <div className='grow flex items-center'>
+        <div className='mr-1 text-text-secondary system-sm-semibold'>{t('appDebug.vision.name')}</div>
+        <Tooltip
+          popupContent={
+            <div className='w-[180px]' >
+              {t('appDebug.vision.description')}
+            </div>
+          }
+        />
+      </div>
+      <div className='shrink-0 flex items-center'>
+        {/* <div className='mr-2 flex items-center gap-0.5'>
+          <div className='text-text-tertiary system-xs-medium-uppercase'>{t('appDebug.vision.visionSettings.resolution')}</div>
           <Tooltip
             popupContent={
               <div className='w-[180px]' >
-                {t('appDebug.vision.description')}
+                {t('appDebug.vision.visionSettings.resolutionTooltip').split('\n').map(item => (
+                  <div key={item}>{item}</div>
+                ))}
               </div>
             }
           />
-        </div>
-      }
-      headerRight={
-        <div className='flex items-center'>
-          <ParamConfig />
-          <div className='ml-4 mr-3 w-[1px] h-3.5 bg-gray-200'></div>
-          <Switch
-            defaultValue={visionConfig.enabled}
-            onChange={value => setVisionConfig({
-              ...visionConfig,
-              enabled: value,
-            })}
-            size='md'
+        </div> */}
+        {/* <div className='flex items-center gap-1'>
+          <OptionCard
+            title={t('appDebug.vision.visionSettings.high')}
+            selected={file?.image?.detail === Resolution.high}
+            onSelect={() => handleChange(Resolution.high)}
           />
-        </div>
-      }
-      noBodySpacing
-    />
-  </>
+          <OptionCard
+            title={t('appDebug.vision.visionSettings.low')}
+            selected={file?.image?.detail === Resolution.low}
+            onSelect={() => handleChange(Resolution.low)}
+          />
+        </div> */}
+        <ParamConfig />
+        <div className='ml-1 mr-3 w-[1px] h-3.5 bg-divider-subtle'></div>
+        <Switch
+          defaultValue={file?.enabled}
+          onChange={value => handleChange({
+            ...(file || {}),
+            enabled: value,
+          })}
+          size='md'
+        />
+      </div>
+    </div>
   )
 }
 export default React.memo(ConfigVision)

web/app/components/app/configuration/config-vision/param-config-content.tsx

@@ -1,129 +1,138 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
-import { useContext } from 'use-context-selector'
+import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import RadioGroup from './radio-group'
-import ConfigContext from '@/context/debug-configuration'
+import produce from 'immer'
+import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
 import { Resolution, TransferMethod } from '@/types/app'
 import ParamItem from '@/app/components/base/param-item'
 import Tooltip from '@/app/components/base/tooltip'
+import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
+import type { FileUpload } from '@/app/components/base/features/types'
 
 const MIN = 1
 const MAX = 6
 const ParamConfigContent: FC = () => {
   const { t } = useTranslation()
+  const file = useFeatures(s => s.features.file)
+  const featuresStore = useFeaturesStore()
 
-  const {
-    visionConfig,
-    setVisionConfig,
-  } = useContext(ConfigContext)
+  const handleChange = useCallback((data: FileUpload) => {
+    const {
+      features,
+      setFeatures,
+    } = featuresStore!.getState()
 
-  const transferMethod = (() => {
-    if (!visionConfig.transfer_methods || visionConfig.transfer_methods.length === 2)
-      return TransferMethod.all
-
-    return visionConfig.transfer_methods[0]
-  })()
+    const newFeatures = produce(features, (draft) => {
+      draft.file = {
+        ...draft.file,
+        allowed_file_upload_methods: data.allowed_file_upload_methods,
+        number_limits: data.number_limits,
+        image: {
+          enabled: data.enabled,
+          detail: data.image?.detail,
+          transfer_methods: data.allowed_file_upload_methods,
+          number_limits: data.number_limits,
+        },
+      }
+    })
+    setFeatures(newFeatures)
+  }, [featuresStore])
 
   return (
     <div>
-      <div>
-        <div className='leading-6 text-base font-semibold text-gray-800'>{t('appDebug.vision.visionSettings.title')}</div>
-        <div className='pt-3 space-y-6'>
-          <div>
-            <div className='mb-2 flex items-center  space-x-1'>
-              <div className='leading-[18px] text-[13px] font-semibold text-gray-800'>{t('appDebug.vision.visionSettings.resolution')}</div>
-              <Tooltip
-                popupContent={
-                  <div className='w-[180px]' >
-                    {t('appDebug.vision.visionSettings.resolutionTooltip').split('\n').map(item => (
-                      <div key={item}>{item}</div>
-                    ))}
-                  </div>
-                }
-              />
-            </div>
-            <RadioGroup
-              className='space-x-3'
-              options={[
-                {
-                  label: t('appDebug.vision.visionSettings.high'),
-                  value: Resolution.high,
-                },
-                {
-                  label: t('appDebug.vision.visionSettings.low'),
-                  value: Resolution.low,
-                },
-              ]}
-              value={visionConfig.detail}
-              onChange={(value: Resolution) => {
-                setVisionConfig({
-                  ...visionConfig,
-                  detail: value,
-                })
-              }}
+      <div className='leading-6 text-base font-semibold text-gray-800'>{t('appDebug.vision.visionSettings.title')}</div>
+      <div className='pt-3 space-y-6'>
+        <div>
+          <div className='mb-2 flex items-center  space-x-1'>
+            <div className='leading-[18px] text-[13px] font-semibold text-gray-800'>{t('appDebug.vision.visionSettings.resolution')}</div>
+            <Tooltip
+              popupContent={
+                <div className='w-[180px]' >
+                  {t('appDebug.vision.visionSettings.resolutionTooltip').split('\n').map(item => (
+                    <div key={item}>{item}</div>
+                  ))}
+                </div>
+              }
             />
           </div>
-          <div>
-            <div className='mb-2 leading-[18px] text-[13px] font-semibold text-gray-800'>{t('appDebug.vision.visionSettings.uploadMethod')}</div>
-            <RadioGroup
-              className='space-x-3'
-              options={[
-                {
-                  label: t('appDebug.vision.visionSettings.both'),
-                  value: TransferMethod.all,
-                },
-                {
-                  label: t('appDebug.vision.visionSettings.localUpload'),
-                  value: TransferMethod.local_file,
-                },
-                {
-                  label: t('appDebug.vision.visionSettings.url'),
-                  value: TransferMethod.remote_url,
-                },
-              ]}
-              value={transferMethod}
-              onChange={(value: TransferMethod) => {
-                if (value === TransferMethod.all) {
-                  setVisionConfig({
-                    ...visionConfig,
-                    transfer_methods: [TransferMethod.remote_url, TransferMethod.local_file],
-                  })
-                  return
-                }
-                setVisionConfig({
-                  ...visionConfig,
-                  transfer_methods: [value],
-                })
-              }}
+          <div className='flex items-center gap-1'>
+            <OptionCard
+              className='grow'
+              title={t('appDebug.vision.visionSettings.high')}
+              selected={file?.image?.detail === Resolution.high}
+              onSelect={() => handleChange({
+                ...file,
+                image: { detail: Resolution.high },
+              })}
+            />
+            <OptionCard
+              className='grow'
+              title={t('appDebug.vision.visionSettings.low')}
+              selected={file?.image?.detail === Resolution.low}
+              onSelect={() => handleChange({
+                ...file,
+                image: { detail: Resolution.low },
+              })}
             />
           </div>
-          <div>
-            <ParamItem
-              id='upload_limit'
-              className=''
-              name={t('appDebug.vision.visionSettings.uploadLimit')}
-              noTooltip
-              {...{
-                default: 2,
-                step: 1,
-                min: MIN,
-                max: MAX,
-              }}
-              value={visionConfig.number_limits}
-              enable={true}
-              onChange={(_key: string, value: number) => {
-                if (!value)
-                  return
+        </div>
+        <div>
+          <div className='mb-2 leading-[18px] text-[13px] font-semibold text-gray-800'>{t('appDebug.vision.visionSettings.uploadMethod')}</div>
+          <div className='flex items-center gap-1'>
+            <OptionCard
+              className='grow'
+              title={t('appDebug.vision.visionSettings.both')}
+              selected={!!file?.allowed_file_upload_methods?.includes(TransferMethod.local_file) && !!file?.allowed_file_upload_methods?.includes(TransferMethod.remote_url)}
+              onSelect={() => handleChange({
+                ...file,
+                allowed_file_upload_methods: [TransferMethod.local_file, TransferMethod.remote_url],
+              })}
+            />
+            <OptionCard
+              className='grow'
+              title={t('appDebug.vision.visionSettings.localUpload')}
+              selected={!!file?.allowed_file_upload_methods?.includes(TransferMethod.local_file) && file?.allowed_file_upload_methods?.length === 1}
+              onSelect={() => handleChange({
+                ...file,
+                allowed_file_upload_methods: [TransferMethod.local_file],
+              })}
+            />
+            <OptionCard
+              className='grow'
+              title={t('appDebug.vision.visionSettings.url')}
+              selected={!!file?.allowed_file_upload_methods?.includes(TransferMethod.remote_url) && file?.allowed_file_upload_methods?.length === 1}
+              onSelect={() => handleChange({
+                ...file,
+                allowed_file_upload_methods: [TransferMethod.remote_url],
+              })}
+            />
+          </div>
+        </div>
+        <div>
+          <ParamItem
+            id='upload_limit'
+            className=''
+            name={t('appDebug.vision.visionSettings.uploadLimit')}
+            noTooltip
+            {...{
+              default: 2,
+              step: 1,
+              min: MIN,
+              max: MAX,
+            }}
+            value={file?.number_limits || 3}
+            enable={true}
+            onChange={(_key: string, value: number) => {
+              if (!value)
+                return
 
-                setVisionConfig({
-                  ...visionConfig,
-                  number_limits: value,
-                })
-              }}
-            />
-          </div>
+              handleChange({
+                ...file,
+                number_limits: value,
+              })
+            }}
+          />
         </div>
       </div>
     </div>

web/app/components/app/configuration/config-vision/param-config.tsx

@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import VoiceParamConfig from './param-config-content'
+import ParamConfigContent from './param-config-content'
 import cn from '@/utils/classnames'
 import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import {
@@ -25,14 +25,14 @@ const ParamsConfig: FC = () => {
       }}
     >
       <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
-        <div className={cn('flex items-center rounded-md h-7 px-3 space-x-1 text-gray-700 cursor-pointer hover:bg-gray-200', open && 'bg-gray-200')}>
+        <div className={cn('flex items-center rounded-md h-7 px-3 space-x-1 text-text-tertiary cursor-pointer hover:bg-gray-200', open && 'bg-gray-200')}>
           <Settings01 className='w-3.5 h-3.5 ' />
           <div className='ml-1 leading-[18px] text-xs font-medium '>{t('appDebug.voice.settings')}</div>
         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 50 }}>
         <div className='w-80 sm:w-[412px] p-4 bg-white rounded-lg border-[0.5px] border-gray-200 shadow-lg space-y-3'>
-          <VoiceParamConfig />
+          <ParamConfigContent />
         </div>
       </PortalToFollowElemContent>
     </PortalToFollowElem>

web/app/components/app/configuration/config-vision/radio-group/index.tsx

@@ -1,40 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React from 'react'
-import s from './style.module.css'
-import cn from '@/utils/classnames'
-
-type OPTION = {
-  label: string
-  value: any
-}
-
-type Props = {
-  className?: string
-  options: OPTION[]
-  value: any
-  onChange: (value: any) => void
-}
-
-const RadioGroup: FC<Props> = ({
-  className = '',
-  options,
-  value,
-  onChange,
-}) => {
-  return (
-    <div className={cn(className, 'flex')}>
-      {options.map(item => (
-        <div
-          key={item.value}
-          className={cn(s.item, item.value === value && s.checked)}
-          onClick={() => onChange(item.value)}
-        >
-          <div className={s.radio}></div>
-          <div className='text-[13px] font-medium text-gray-900'>{item.label}</div>
-        </div>
-      ))}
-    </div>
-  )
-}
-export default React.memo(RadioGroup)

web/app/components/app/configuration/config-vision/radio-group/style.module.css

@@ -1,24 +0,0 @@
-.item {
-  @apply grow flex items-center h-8 px-2.5 rounded-lg bg-gray-25 border border-gray-100 cursor-pointer space-x-2;
-}
-
-.item:hover {
-  background-color: #ffffff;
-  border-color: #B2CCFF;
-  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-}
-
-.item.checked {
-  background-color: #ffffff;
-  border-color: #528BFF;
-  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
-}
-
-.radio {
-  @apply w-4 h-4 border-[2px] border-gray-200 rounded-full;
-}
-
-.item.checked .radio {
-  border-width: 5px;
-  border-color: #155eef;
-}