dify

dify/web/app/components/base/param-item/index.tsx

@@ -0,0 +1,79 @@
+'use client'
+import type { FC } from 'react'
+import { InputNumber } from '../input-number'
+import Tooltip from '@/app/components/base/tooltip'
+import Slider from '@/app/components/base/slider'
+import Switch from '@/app/components/base/switch'
+
+type Props = {
+  className?: string
+  id: string
+  name: string
+  noTooltip?: boolean
+  tip?: string
+  value: number
+  enable: boolean
+  step?: number
+  min?: number
+  max: number
+  onChange: (key: string, value: number) => void
+  hasSwitch?: boolean
+  onSwitchChange?: (key: string, enable: boolean) => void
+}
+
+const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1, min = 0, max, value, enable, onChange, hasSwitch, onSwitchChange }) => {
+  return (
+    <div className={className}>
+      <div className='flex items-center justify-between'>
+        <div className='flex h-6 items-center'>
+          {hasSwitch && (
+            <Switch
+              size='md'
+              className='mr-2'
+              defaultValue={enable}
+              onChange={async (val) => {
+                onSwitchChange?.(id, val)
+              }}
+            />
+          )}
+          <span className='system-sm-semibold mr-1 text-text-secondary'>{name}</span>
+          {!noTooltip && (
+            <Tooltip
+              triggerClassName='w-4 h-4 shrink-0'
+              popupContent={<div className='w-[200px]'>{tip}</div>}
+            />
+          )}
+        </div>
+      </div>
+      <div className='mt-1 flex items-center'>
+        <div className='mr-3 flex shrink-0 items-center'>
+          <InputNumber
+            disabled={!enable}
+            type='number'
+            min={min}
+            max={max}
+            step={step}
+            amount={step}
+            size='regular'
+            value={value}
+            onChange={(value) => {
+              onChange(id, value)
+            }}
+            className='w-[72px]'
+          />
+        </div>
+        <div className='flex grow items-center'>
+          <Slider
+            className='w-full'
+            disabled={!enable}
+            value={max < 5 ? value * 100 : value}
+            min={min < 1 ? min * 100 : min}
+            max={max < 5 ? max * 100 : max}
+            onChange={value => onChange(id, value / (max < 5 ? 100 : 1))}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+export default ParamItem