-
- {option.title}
-
-
- {option.description}
+
+
+
+
+ {option.title}
+
+
+ {option.description}
+
+
-
+
+
))}
@@ -161,7 +162,7 @@ export const OptionCards: Story = {
parameters: {
docs: {
description: {
- story: 'Use RadioRoot with variant="unstyled" when the entire option card is the radio. RadioControl renders the visual dot inside the card.',
+ story: 'Wrap each option card in FieldItem, then use RadioRoot with variant="unstyled" when the entire card is the radio. RadioControl renders the visual dot inside the card.',
},
},
},
diff --git a/packages/dify-ui/src/select/__tests__/index.spec.tsx b/packages/dify-ui/src/select/__tests__/index.spec.tsx
index 2fd4e23bdb..ccdb13c61d 100644
--- a/packages/dify-ui/src/select/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/select/__tests__/index.spec.tsx
@@ -1,5 +1,16 @@
import { render } from 'vitest-browser-react'
-import { Select, SelectContent, SelectItem, SelectItemIndicator, SelectItemText, SelectTrigger, SelectValue } from '../index'
+import {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectGroupLabel,
+ SelectItem,
+ SelectItemIndicator,
+ SelectItemText,
+ SelectLabel,
+ SelectTrigger,
+ SelectValue,
+} from '../index'
const asHTMLElement = (element: HTMLElement | SVGElement) => element as HTMLElement
const renderWithSafeViewport = (ui: import('react').ReactNode) => render(
@@ -84,6 +95,26 @@ describe('Select wrappers', () => {
})
describe('SelectTrigger', () => {
+ it('should use SelectLabel as the trigger accessible name', async () => {
+ const screen = await renderWithSafeViewport(
+
+ City
+
+
+
+
+ Seattle
+
+
+ ,
+ )
+
+ await expect.element(screen.getByRole('combobox', { name: 'City' })).toBeInTheDocument()
+ await expect.element(screen.getByText('City')).toHaveClass('py-1', 'system-sm-medium', 'text-text-secondary')
+ })
+
it('should forward native trigger props when trigger props are provided', async () => {
const screen = await renderOpenSelect({
triggerProps: {
@@ -179,6 +210,28 @@ describe('Select wrappers', () => {
})
describe('SelectContent', () => {
+ it('should render SelectGroupLabel for grouped options without naming the trigger', async () => {
+ const screen = await renderWithSafeViewport(
+
+
+
+
+
+ Popular cities
+
+ Seattle
+
+
+
+ ,
+ )
+
+ await expect.element(screen.getByRole('combobox', { name: 'city select' })).toBeInTheDocument()
+ await expect.element(screen.getByText('Popular cities')).toHaveClass('custom-label')
+ })
+
it('should use positioning attributes when placement is not provided', async () => {
const screen = await renderOpenSelect()
diff --git a/packages/dify-ui/src/select/index.stories.tsx b/packages/dify-ui/src/select/index.stories.tsx
index 697266dcec..40461be199 100644
--- a/packages/dify-ui/src/select/index.stories.tsx
+++ b/packages/dify-ui/src/select/index.stories.tsx
@@ -4,6 +4,7 @@ import {
Select,
SelectContent,
SelectGroup,
+ SelectGroupLabel,
SelectItem,
SelectItemIndicator,
SelectItemText,
@@ -62,6 +63,29 @@ export const Default: Story = {
),
}
+export const WithVisibleLabel: Story = {
+ render: () => (
+
+
+ City
+
+
+
+
+ Seattle
+
+
+ New York
+
+
+
+
+ ),
+}
+
export const WithPlaceholder: Story = {
render: () => (
@@ -123,7 +147,7 @@ export const WithGroupsAndSeparator: Story = {
- OpenAI
+ OpenAI
GPT-5
- Anthropic
+ Anthropic
Claude Opus
- Google
+ Google
Gemini 2.5
element as HTMLElement
@@ -77,4 +85,21 @@ describe('Slider', () => {
expect(screen.container.querySelector('script')).not.toBeInTheDocument()
})
+
+ it('should expose SliderLabel for composed slider fields', async () => {
+ const screen = await render(
+
+ Temperature
+
+
+
+
+ ,
+ )
+
+ await expect.element(screen.getByRole('slider', { name: 'Temperature' })).toHaveAttribute('aria-valuenow', '50')
+ await expect.element(screen.getByText('Temperature')).toHaveClass('py-1', 'system-sm-medium', 'text-text-secondary')
+ })
})
diff --git a/packages/dify-ui/src/slider/index.stories.tsx b/packages/dify-ui/src/slider/index.stories.tsx
index 844a984406..11b22f0de3 100644
--- a/packages/dify-ui/src/slider/index.stories.tsx
+++ b/packages/dify-ui/src/slider/index.stories.tsx
@@ -1,7 +1,15 @@
import type { Meta, StoryObj } from '@storybook/react-vite'
import type * as React from 'react'
import { useState } from 'react'
-import { Slider } from '.'
+import {
+ Slider,
+ SliderControl,
+ SliderIndicator,
+ SliderLabel,
+ SliderRoot,
+ SliderThumb,
+ SliderTrack,
+} from '.'
const meta = {
title: 'Base/Form/Slider',
@@ -90,3 +98,17 @@ export const Disabled: Story = {
disabled: true,
},
}
+
+export const ComposedWithLabel: Story = {
+ render: () => (
+
+ Temperature
+
+
+
+
+
+ ),
+}
diff --git a/packages/dify-ui/src/slider/index.tsx b/packages/dify-ui/src/slider/index.tsx
index eafcecf751..23719e5c0d 100644
--- a/packages/dify-ui/src/slider/index.tsx
+++ b/packages/dify-ui/src/slider/index.tsx
@@ -2,9 +2,22 @@
import { Slider as BaseSlider } from '@base-ui/react/slider'
import { cn } from '../cn'
+import { formLabelClassName } from '../form-control-shared'
export const SliderRoot = BaseSlider.Root
+export function SliderLabel({
+ className,
+ ...props
+}: BaseSlider.Label.Props) {
+ return (
+
const sliderControlClassName = cn(
diff --git a/web/__mocks__/base-ui-select.tsx b/web/__mocks__/base-ui-select.tsx
index 7655164419..a695bebe14 100644
--- a/web/__mocks__/base-ui-select.tsx
+++ b/web/__mocks__/base-ui-select.tsx
@@ -61,5 +61,6 @@ export const SelectItem = ({
export const SelectItemText = ({ children }: { children?: ReactNode }) => <>{children}
export const SelectItemIndicator = ({ children }: { children?: ReactNode }) => <>{children}
export const SelectGroup = ({ children }: { children?: ReactNode }) => <>{children}
-export const SelectLabel = ({ children }: { children?: ReactNode }) => <>{children}
+export const SelectLabel = () => null
+export const SelectGroupLabel = ({ children }: { children?: ReactNode }) => <>{children}
export const SelectSeparator = (props: React.HTMLAttributes) =>
diff --git a/web/app/components/app/configuration/config/agent/agent-setting/index.tsx b/web/app/components/app/configuration/config/agent/agent-setting/index.tsx
index 3c0ae1befc..51f4a16a25 100644
--- a/web/app/components/app/configuration/config/agent/agent-setting/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-setting/index.tsx
@@ -2,6 +2,7 @@
import type { FC } from 'react'
import type { AgentConfig } from '@/models/debug'
import { Button } from '@langgenius/dify-ui/button'
+import { FieldsetLegend, FieldsetRoot } from '@langgenius/dify-ui/fieldset'
import { Slider } from '@langgenius/dify-ui/slider'
import { RiCloseLine } from '@remixicon/react'
import { useClickAway } from 'ahooks'
@@ -34,6 +35,7 @@ const AgentSetting: FC = ({
const [tempPayload, setTempPayload] = useState(payload)
const ref = useRef(null)
const [mounted, setMounted] = useState(false)
+ const maximumIterationsLabel = t('agent.setting.maximumIterations.name', { ns: 'appDebug' })
useClickAway(() => {
if (mounted)
@@ -96,10 +98,11 @@ const AgentSetting: FC = ({
icon={
{t('feature.suggestedQuestionsAfterAnswer.modal.promptLabel', { ns: 'appDebug' })}
-
-
-
- {t('feature.suggestedQuestionsAfterAnswer.modal.defaultPromptOption', { ns: 'appDebug' })}
-
-
- {t('feature.suggestedQuestionsAfterAnswer.modal.defaultPromptOptionDescription', { ns: 'appDebug' })}
+
+
+
+
+ {t('feature.suggestedQuestionsAfterAnswer.modal.defaultPromptOption', { ns: 'appDebug' })}
+
+
+ {t('feature.suggestedQuestionsAfterAnswer.modal.defaultPromptOptionDescription', { ns: 'appDebug' })}
+
+
- {promptMode === PROMPT_MODE.default && (
-
-
- {DEFAULT_FOLLOW_UP_PROMPT}
+ {promptMode === PROMPT_MODE.default && (
+
+
+ {DEFAULT_FOLLOW_UP_PROMPT}
+
+ )}
+
+
+
+
+
+
+ {t('feature.suggestedQuestionsAfterAnswer.modal.customPromptOption', { ns: 'appDebug' })}
+
+
+ {t('feature.suggestedQuestionsAfterAnswer.modal.customPromptOptionDescription', { ns: 'appDebug' })}
+
+
+
-
-
- {t('feature.suggestedQuestionsAfterAnswer.modal.customPromptOption', { ns: 'appDebug' })}
-
-
- {t('feature.suggestedQuestionsAfterAnswer.modal.customPromptOptionDescription', { ns: 'appDebug' })}
-
-
-
-