chore:paramter extrctor ui

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'>
+      <div className='grid grid-cols-2 gap-x-1'>
-        <Item
+        <OptionCard
-          isChosen={type === ReasoningModeType.functionCall}
+          title='Function/Tool Calling'
-          text='Function/Tool Calling'
+          onSelect={handleChange(ReasoningModeType.functionCall)}
-          onClick={handleChange(ReasoningModeType.functionCall)}
+          selected={type === ReasoningModeType.functionCall}
         />
-        <Item
+        <OptionCard
-          isChosen={type === ReasoningModeType.prompt}
+          title='Prompt'
-          text='Prompt'
+          selected={type === ReasoningModeType.prompt}
-          onClick={handleChange(ReasoningModeType.prompt)}
+          onSelect={handleChange(ReasoningModeType.prompt)}
         />
       </div>
     </Field>