-
- {option.title}
-
-
- {option.description}
+
+ }
+ className="w-full rounded-xl border border-components-option-card-option-border bg-components-option-card-option-bg p-4 text-left transition-colors hover:bg-state-base-hover data-checked:border-components-option-card-option-selected-border data-checked:bg-components-option-card-option-selected-bg"
+ >
+
+
+
+ {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(
+
,
+ )
+
+ 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(
+
,
+ )
+
+ 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: () => (
+
+
+
+ ),
+}
+
export const WithPlaceholder: Story = {
render: () => (
@@ -123,7 +147,7 @@ export const WithGroupsAndSeparator: Story = {
- OpenAI
+ OpenAI
GPT-5
@@ -135,7 +159,7 @@ export const WithGroupsAndSeparator: Story = {
- Anthropic
+ Anthropic
Claude Opus
@@ -147,7 +171,7 @@ export const WithGroupsAndSeparator: Story = {
- Google
+ Google
Gemini 2.5
diff --git a/packages/dify-ui/src/select/index.tsx b/packages/dify-ui/src/select/index.tsx
index f736e786ed..3dd145be98 100644
--- a/packages/dify-ui/src/select/index.tsx
+++ b/packages/dify-ui/src/select/index.tsx
@@ -6,6 +6,7 @@ import type { Placement } from '../placement'
import { Select as BaseSelect } from '@base-ui/react/select'
import { cva } from 'class-variance-authority'
import { cn } from '../cn'
+import { formLabelClassName } from '../form-control-shared'
import {
overlayLabelClassName,
overlayPopupAnimationClassName,
@@ -71,6 +72,18 @@ export function SelectTrigger({
export function SelectLabel({
className,
...props
+}: BaseSelect.Label.Props) {
+ return (
+
+ )
+}
+
+export function SelectGroupLabel({
+ className,
+ ...props
}: BaseSelect.GroupLabel.Props) {
return (
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 (
+
+ )
+}
+
type SliderRootProps = BaseSlider.Root.Props
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={
}
- name={t('agent.setting.maximumIterations.name', { ns: 'appDebug' })}
+ name={maximumIterationsLabel}
description={t('agent.setting.maximumIterations.description', { ns: 'appDebug' })}
>
-
+
{!isFunctionCall && (
diff --git a/web/app/components/base/features/new-feature-panel/follow-up-setting-modal.tsx b/web/app/components/base/features/new-feature-panel/follow-up-setting-modal.tsx
index c99f20f842..e549c6ce47 100644
--- a/web/app/components/base/features/new-feature-panel/follow-up-setting-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/follow-up-setting-modal.tsx
@@ -8,7 +8,7 @@ import type {
import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
-import { FieldRoot } from '@langgenius/dify-ui/field'
+import { FieldItem, FieldRoot } from '@langgenius/dify-ui/field'
import { FieldsetLegend, FieldsetRoot } from '@langgenius/dify-ui/fieldset'
import { RadioControl, RadioRoot } from '@langgenius/dify-ui/radio'
import { RadioGroup } from '@langgenius/dify-ui/radio-group'
@@ -161,70 +161,74 @@ const FollowUpSettingModal = ({
{t('feature.suggestedQuestionsAfterAnswer.modal.promptLabel', { ns: 'appDebug' })}
- }
- className={cn(
- 'w-full rounded-xl border p-4 text-left transition-colors',
- promptMode === PROMPT_MODE.default
- ? 'border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg'
- : 'border-components-option-card-option-border bg-components-option-card-option-bg hover:bg-state-base-hover',
- )}
- >
-
-
-
- {t('feature.suggestedQuestionsAfterAnswer.modal.defaultPromptOption', { ns: 'appDebug' })}
-
-
- {t('feature.suggestedQuestionsAfterAnswer.modal.defaultPromptOptionDescription', { ns: 'appDebug' })}
+
+ }
+ className={cn(
+ 'w-full rounded-xl border p-4 text-left transition-colors',
+ promptMode === PROMPT_MODE.default
+ ? 'border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg'
+ : 'border-components-option-card-option-border bg-components-option-card-option-bg hover:bg-state-base-hover',
+ )}
+ >
+
+
+
+ {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}
+
+ )}
+
+
+
+ }
+ className={cn(
+ 'w-full rounded-xl border p-4 text-left transition-colors',
+ promptMode === PROMPT_MODE.custom
+ ? 'border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg'
+ : 'border-components-option-card-option-border bg-components-option-card-option-bg hover:bg-state-base-hover',
+ )}
+ >
+
+
+
+ {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' })}
-
-
-
-