feat: llm support struct output (#17994)

Co-authored-by: twwu <twwu@dify.ai> Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
2025-04-18 16:53:43 +08:00
parent da9269ca97
commit 775dc47abe
82 changed files with 4190 additions and 276 deletions
--- a/web/app/components/base/segmented-control/index.tsx
+++ b/web/app/components/base/segmented-control/index.tsx
@@ -0,0 +1,68 @@
+import React from 'react'
+import classNames from '@/utils/classnames'
+import type { RemixiconComponentType } from '@remixicon/react'
+import Divider from '../divider'
+
+// Updated generic type to allow enum values
+type SegmentedControlProps<T extends string | number | symbol> = {
+  options: { Icon: RemixiconComponentType, text: string, value: T }[]
+  value: T
+  onChange: (value: T) => void
+  className?: string
+}
+
+export const SegmentedControl = <T extends string | number | symbol>({
+  options,
+  value,
+  onChange,
+  className,
+}: SegmentedControlProps<T>): JSX.Element => {
+  const selectedOptionIndex = options.findIndex(option => option.value === value)
+
+  return (
+    <div className={classNames(
+      'flex items-center rounded-lg bg-components-segmented-control-bg-normal gap-x-[1px] p-0.5',
+      className,
+    )}>
+      {options.map((option, index) => {
+        const { Icon } = option
+        const isSelected = index === selectedOptionIndex
+        const isNextSelected = index === selectedOptionIndex - 1
+        const isLast = index === options.length - 1
+        return (
+          <button
+            type='button'
+            key={String(option.value)}
+            className={classNames(
+              'flex items-center justify-center relative px-2 py-1 rounded-lg gap-x-0.5 group border-0.5 border-transparent',
+              isSelected
+                ? 'border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg shadow-xs shadow-shadow-shadow-3'
+                : 'hover:bg-state-base-hover',
+            )}
+            onClick={() => onChange(option.value)}
+          >
+            <span className='flex h-5 w-5 items-center justify-center'>
+              <Icon className={classNames(
+                'w-4 h-4 text-text-tertiary',
+                isSelected ? 'text-text-accent-light-mode-only' : 'group-hover:text-text-secondary',
+              )} />
+            </span>
+            <span className={classNames(
+              'p-0.5 text-text-tertiary system-sm-medium',
+              isSelected ? 'text-text-accent-light-mode-only' : 'group-hover:text-text-secondary',
+            )}>
+              {option.text}
+            </span>
+            {!isLast && !isSelected && !isNextSelected && (
+              <div className='absolute right-[-1px] top-0 flex h-full items-center'>
+                <Divider type='vertical' className='mx-0 h-3.5' />
+              </div>
+            )}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export default React.memo(SegmentedControl) as typeof SegmentedControl