Feat/attachments (#9526)

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

web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx

@@ -5,11 +5,12 @@ import { useBoolean } from 'ahooks'
 import { useTranslation } from 'react-i18next'
 import type { Param } from '../../types'
 import { ParamType } from '../../types'
-import cn from '@/utils/classnames'
 import AddButton from '@/app/components/base/button/add-button'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import Field from '@/app/components/app/configuration/config-var/config-modal/field'
+import Input from '@/app/components/base/input'
+import Textarea from '@/app/components/base/textarea'
 import Select from '@/app/components/base/select'
 import Switch from '@/app/components/base/switch'
 import Toast from '@/app/components/base/toast'
@@ -19,7 +20,6 @@ import { checkKeys } from '@/utils/var'
 
 const i18nPrefix = 'workflow.nodes.parameterExtractor'
 const errorI18nPrefix = 'workflow.errorMsg'
-const inputClassName = 'w-full px-3 text-sm leading-9 text-gray-900 border-0 rounded-lg grow h-9 bg-gray-100 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
 
 const DEFAULT_PARAM: Param = {
   name: '',
@@ -136,9 +136,7 @@ const AddExtractParameter: FC<Props> = ({
           <div>
             <div className='space-y-2'>
               <Field title={t(`${i18nPrefix}.addExtractParameterContent.name`)}>
-                <input
-                  type='text'
-                  className={inputClassName}
+                <Input
                   value={param.name}
                   onChange={e => handleParamChange('name')(e.target.value)}
                   placeholder={t(`${i18nPrefix}.addExtractParameterContent.namePlaceholder`)!}
@@ -165,8 +163,7 @@ const AddExtractParameter: FC<Props> = ({
                 </Field>
               )}
               <Field title={t(`${i18nPrefix}.addExtractParameterContent.description`)}>
-                <textarea
-                  className={cn(inputClassName, '!h-[80px]')}
+                <Textarea
                   value={param.description}
                   onChange={e => handleParamChange('description')(e.target.value)}
                   placeholder={t(`${i18nPrefix}.addExtractParameterContent.descriptionPlaceholder`)!}

web/app/components/workflow/nodes/parameter-extractor/components/reasoning-mode-picker.tsx

@@ -4,31 +4,10 @@ import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ReasoningModeType } from '../types'
 import Field from '../../_base/components/field'
-import cn from '@/utils/classnames'
+import OptionCard from '../../_base/components/option-card'
 
 const i18nPrefix = 'workflow.nodes.parameterExtractor'
 
-type ItemProps = {
-  isChosen: boolean
-  text: string
-  onClick: () => void
-}
-
-const Item: FC<ItemProps> = ({
-  isChosen,
-  text,
-  onClick,
-}) => {
-  return (
-    <div
-      className={cn(isChosen ? 'border-[1.5px] border-primary-400 bg-white' : 'border border-gray-100 bg-gray-25', 'grow w-0 shrink-0 flex items-center h-8 justify-center rounded-lg cursor-pointer text-[13px] font-normal text-gray-900')}
-      onClick={() => !isChosen ? onClick() : () => { }}
-    >
-      {text}
-    </div>
-  )
-}
-
 type Props = {
   type: ReasoningModeType
   onChange: (type: ReasoningModeType) => void
@@ -51,16 +30,16 @@ const ReasoningModePicker: FC<Props> = ({
       title={t(`${i18nPrefix}.reasoningMode`)}
       tooltip={t(`${i18nPrefix}.reasoningModeTip`)!}
     >
-      <div className='flex space-x-1'>
-        <Item
-          isChosen={type === ReasoningModeType.functionCall}
-          text='Function/Tool Calling'
-          onClick={handleChange(ReasoningModeType.functionCall)}
+      <div className='grid grid-cols-2 gap-x-1'>
+        <OptionCard
+          title='Function/Tool Calling'
+          onSelect={handleChange(ReasoningModeType.functionCall)}
+          selected={type === ReasoningModeType.functionCall}
         />
-        <Item
-          isChosen={type === ReasoningModeType.prompt}
-          text='Prompt'
-          onClick={handleChange(ReasoningModeType.prompt)}
+        <OptionCard
+          title='Prompt'
+          selected={type === ReasoningModeType.prompt}
+          onSelect={handleChange(ReasoningModeType.prompt)}
         />
       </div>
     </Field>