opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-04-16 02:16:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(web): align Switch API with Base UI naming convention (#35269)

Browse Source 
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
This commit is contained in:
yyh 2026-04-15 23:47:59 +08:00 committed by GitHub
parent e6b8cbe657
commit 538093855b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
62 changed files with 249 additions and 294 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx
View File

@ -94,8 +94,8 @@ const ConfigPopup: FC<PopupProps> = ({
const switchContent = (
<Switch
className="ml-3"
value={enabled}
onChange={onStatusChange}
checked={enabled}
onCheckedChange={onStatusChange}
disabled={providerAllNotConfigured}
/>
)

4
web/app/components/app/annotation/index.tsx
View File

@ -155,9 +155,9 @@ const Annotation: FC<Props> = (props) => {
<div className="system-sm-medium text-text-primary">{t('name', { ns: 'appAnnotation' })}</div>
<Switch
key={controlRefreshSwitch}
value={annotationConfig?.enabled ?? false}
checked={annotationConfig?.enabled ?? false}
size="md"
onChange={async (value) => {
onCheckedChange={async (value) => {
if (value) {
if (isAnnotationFull) {
setIsShowAnnotationFullModal(true)

4
web/app/components/app/configuration/config-vision/index.tsx
View File

@ -121,8 +121,8 @@ const ConfigVision: FC = () => {
<ParamConfig />
<div className="mr-3 ml-1 h-3.5 w-px bg-divider-regular"></div>
<Switch
value={isImageEnabled}
onChange={handleChange}
checked={isImageEnabled}
onCheckedChange={handleChange}
size="md"
/>
</>

4
web/app/components/app/configuration/config/agent/agent-tools/index.tsx
View File

@ -298,10 +298,10 @@ const AgentTools: FC = () => {
<div className={cn(item.isDeleted && 'opacity-50')}>
{!item.notAuthor && (
<Switch
value={item.isDeleted ? false : item.enabled}
checked={item.isDeleted ? false : item.enabled}
disabled={item.isDeleted || readonly}
size="md"
onChange={(enabled) => {
onCheckedChange={(enabled) => {
const newModelConfig = produce(modelConfig, (draft) => {
(draft.agentConfig.tools[index] as any).enabled = enabled
})

10
web/app/components/app/configuration/config/config-audio.tsx
View File

@ -49,14 +49,14 @@ const ConfigAudio: FC = () => {
return null
return (
<div className="mt-2 flex items-center gap-2 rounded-xl border-l-[0.5px] border-t-[0.5px] bg-background-section-burn p-2">
<div className="mt-2 flex items-center gap-2 rounded-xl border-t-[0.5px] border-l-[0.5px] bg-background-section-burn p-2">
<div className="shrink-0 p-1">
<div className="rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-violet-violet-600 p-1 shadow-xs">
<Microphone01 className="h-4 w-4 text-text-primary-on-surface" />
</div>
</div>
<div className="flex grow items-center">
<div className="system-sm-semibold mr-1 text-text-secondary">{t('feature.audioUpload.title', { ns: 'appDebug' })}</div>
<div className="mr-1 system-sm-semibold text-text-secondary">{t('feature.audioUpload.title', { ns: 'appDebug' })}</div>
<Tooltip
popupContent={(
<div className="w-[180px]">
@ -67,10 +67,10 @@ const ConfigAudio: FC = () => {
</div>
{!readonly && (
<div className="flex shrink-0 items-center">
<div className="ml-1 mr-3 h-3.5 w-px bg-divider-subtle"></div>
<div className="mr-3 ml-1 h-3.5 w-px bg-divider-subtle"></div>
<Switch
value={isAudioEnabled}
onChange={handleChange}
checked={isAudioEnabled}
onCheckedChange={handleChange}
size="md"
/>
</div>

10
web/app/components/app/configuration/config/config-document.tsx
View File

@ -49,14 +49,14 @@ const ConfigDocument: FC = () => {
return null
return (
<div className="mt-2 flex items-center gap-2 rounded-xl border-l-[0.5px] border-t-[0.5px] bg-background-section-burn p-2">
<div className="mt-2 flex items-center gap-2 rounded-xl border-t-[0.5px] border-l-[0.5px] bg-background-section-burn p-2">
<div className="shrink-0 p-1">
<div className="rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-600 p-1 shadow-xs">
<Document className="h-4 w-4 text-text-primary-on-surface" />
</div>
</div>
<div className="flex grow items-center">
<div className="system-sm-semibold mr-1 text-text-secondary">{t('feature.documentUpload.title', { ns: 'appDebug' })}</div>
<div className="mr-1 system-sm-semibold text-text-secondary">{t('feature.documentUpload.title', { ns: 'appDebug' })}</div>
<Tooltip
popupContent={(
<div className="w-[180px]">
@ -67,10 +67,10 @@ const ConfigDocument: FC = () => {
</div>
{!readonly && (
<div className="flex shrink-0 items-center">
<div className="ml-1 mr-3 h-3.5 w-px bg-divider-subtle"></div>
<div className="mr-3 ml-1 h-3.5 w-px bg-divider-subtle"></div>
<Switch
value={isDocumentEnabled}
onChange={handleChange}
checked={isDocumentEnabled}
onCheckedChange={handleChange}
size="md"
/>
</div>

4
web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
View File

@ -267,8 +267,8 @@ const ConfigContent: FC<Props> = ({
canManuallyToggleRerank && (
<Switch
size="md"
value={showRerankModel ?? false}
onChange={handleManuallyToggleRerank}
checked={showRerankModel ?? false}
onCheckedChange={handleManuallyToggleRerank}
/>
)
}

6
web/app/components/app/overview/__tests__/trigger-card.spec.tsx
View File

@ -74,12 +74,12 @@ vi.mock('@/app/components/workflow/block-icon', () => ({
}))
vi.mock('@/app/components/base/switch', () => ({
default: ({ defaultValue, onChange, disabled }: { defaultValue: boolean, onChange: (v: boolean) => void, disabled: boolean }) => (
default: ({ checked, onCheckedChange, disabled }: { checked: boolean, onCheckedChange: (v: boolean) => void, disabled: boolean }) => (
<button
data-testid="switch"
data-checked={defaultValue ? 'true' : 'false'}
data-checked={checked ? 'true' : 'false'}
data-disabled={disabled ? 'true' : 'false'}
onClick={() => onChange(!defaultValue)}
onClick={() => onCheckedChange(!checked)}
>
Switch
</button>

4
web/app/components/app/overview/app-card.tsx
View File

@ -180,7 +180,7 @@ function AppCard({
return (
<div
className={`${isInPanel ? 'border-l-[0.5px] border-t' : 'border-[0.5px] shadow-xs'} w-full max-w-full rounded-xl border-effects-highlight ${className ?? ''} ${cardState.isMinimalState ? 'h-12' : ''}`}
className={`${isInPanel ? 'border-t border-l-[0.5px]' : 'border-[0.5px] shadow-xs'} w-full max-w-full rounded-xl border-effects-highlight ${className ?? ''} ${cardState.isMinimalState ? 'h-12' : ''}`}
>
<div className={`${customBgColor ?? 'bg-background-default'} relative rounded-xl ${triggerModeDisabled ? 'opacity-60' : ''}`}>
{triggerModeDisabled && (
@ -247,7 +247,7 @@ function AppCard({
offset={24}
>
<div>
<Switch value={cardState.runningStatus} onChange={onChangeStatus} disabled={cardState.toggleDisabled} />
<Switch checked={cardState.runningStatus} onCheckedChange={onChangeStatus} disabled={cardState.toggleDisabled} />
</div>
</Tooltip>
</div>

14
web/app/components/app/overview/settings/index.tsx
View File

@ -293,8 +293,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
<div className="flex items-center justify-between">
<div className={cn('py-1 system-sm-semibold text-text-secondary')}>{t('answerIcon.title', { ns: 'app' })}</div>
<Switch
value={inputInfo.use_icon_as_answer_icon}
onChange={v => setInputInfo({ ...inputInfo, use_icon_as_answer_icon: v })}
checked={inputInfo.use_icon_as_answer_icon}
onCheckedChange={v => setInputInfo({ ...inputInfo, use_icon_as_answer_icon: v })}
/>
</div>
<p className="pb-0.5 body-xs-regular text-text-tertiary">{t('answerIcon.description', { ns: 'app' })}</p>
@ -327,7 +327,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
/>
<div className="flex items-center justify-between">
<p className={cn('body-xs-regular text-text-tertiary')}>{t(`${prefixSettings}.chatColorThemeInverted`, { ns: 'appOverview' })}</p>
<Switch value={inputInfo.chatColorThemeInverted} onChange={v => setInputInfo({ ...inputInfo, chatColorThemeInverted: v })}></Switch>
<Switch checked={inputInfo.chatColorThemeInverted} onCheckedChange={v => setInputInfo({ ...inputInfo, chatColorThemeInverted: v })}></Switch>
</div>
</div>
</div>
@ -338,8 +338,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
<div className={cn('py-1 system-sm-semibold text-text-secondary')}>{t(`${prefixSettings}.workflow.subTitle`, { ns: 'appOverview' })}</div>
<Switch
disabled={!(appInfo.mode === AppModeEnum.WORKFLOW || appInfo.mode === AppModeEnum.ADVANCED_CHAT)}
value={inputInfo.show_workflow_steps}
onChange={v => setInputInfo({ ...inputInfo, show_workflow_steps: v })}
checked={inputInfo.show_workflow_steps}
onCheckedChange={v => setInputInfo({ ...inputInfo, show_workflow_steps: v })}
/>
</div>
<p className="pb-0.5 body-xs-regular text-text-tertiary">{t(`${prefixSettings}.workflow.showDesc`, { ns: 'appOverview' })}</p>
@ -392,8 +392,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
>
<Switch
disabled={!webappCopyrightEnabled}
value={inputInfo.copyrightSwitchValue}
onChange={v => setInputInfo({ ...inputInfo, copyrightSwitchValue: v })}
checked={inputInfo.copyrightSwitchValue}
onCheckedChange={v => setInputInfo({ ...inputInfo, copyrightSwitchValue: v })}
/>
</Tooltip>
</div>

16
web/app/components/app/overview/trigger-card.tsx
View File

@ -34,12 +34,12 @@ const getTriggerIcon = (trigger: AppTrigger, triggerPlugins: any[]) => {
const getStatusDot = () => {
if (status === 'enabled') {
return (
<div className="absolute -left-0.5 -top-0.5 h-1.5 w-1.5 rounded-xs border border-black/15 bg-green-500" />
<div className="absolute -top-0.5 -left-0.5 h-1.5 w-1.5 rounded-xs border border-black/15 bg-green-500" />
)
}
else {
return (
<div className="absolute -left-0.5 -top-0.5 h-1.5 w-1.5 rounded-xs border border-components-badge-status-light-disabled-border-inner bg-components-badge-status-light-disabled-bg shadow-status-indicator-gray-shadow" />
<div className="absolute -top-0.5 -left-0.5 h-1.5 w-1.5 rounded-xs border border-components-badge-status-light-disabled-border-inner bg-components-badge-status-light-disabled-bg shadow-status-indicator-gray-shadow" />
)
}
}
@ -141,7 +141,7 @@ function TriggerCard({ appInfo, onToggleResult }: ITriggerCardProps) {
if (isLoading) {
return (
<div className="w-full max-w-full rounded-xl border-l-[0.5px] border-t border-effects-highlight">
<div className="w-full max-w-full rounded-xl border-t border-l-[0.5px] border-effects-highlight">
<div className="rounded-xl bg-background-default">
<div className="flex w-full flex-col items-start justify-center gap-3 self-stretch border-b-[0.5px] border-divider-subtle p-3">
<div className="h-6 w-full animate-pulse rounded-sm bg-components-input-bg-normal"></div>
@ -152,7 +152,7 @@ function TriggerCard({ appInfo, onToggleResult }: ITriggerCardProps) {
}
return (
<div className="w-full max-w-full rounded-xl border-l-[0.5px] border-t border-effects-highlight">
<div className="w-full max-w-full rounded-xl border-t border-l-[0.5px] border-effects-highlight">
<div className="rounded-xl bg-background-default">
<div className="flex w-full flex-col items-start justify-center gap-3 self-stretch border-b-[0.5px] border-divider-subtle p-3">
<div className="flex w-full items-center gap-3 self-stretch">
@ -161,7 +161,7 @@ function TriggerCard({ appInfo, onToggleResult }: ITriggerCardProps) {
<TriggerAll className="h-4 w-4 text-text-primary-on-surface" />
</div>
<div className="group w-full">
<div className="system-md-semibold min-w-0 overflow-hidden text-ellipsis break-normal text-text-secondary group-hover:text-text-primary">
<div className="min-w-0 overflow-hidden system-md-semibold break-normal text-ellipsis text-text-secondary group-hover:text-text-primary">
{triggerCount > 0
? t('overview.triggerInfo.triggersAdded', { ns: 'appOverview', count: triggerCount })
: t('overview.triggerInfo.noTriggerAdded', { ns: 'appOverview' })}
@ -179,7 +179,7 @@ function TriggerCard({ appInfo, onToggleResult }: ITriggerCardProps) {
<div className="shrink-0">
{getTriggerIcon(trigger, triggerPlugins || [])}
</div>
<div className="system-sm-medium min-w-0 flex-1 truncate text-text-secondary">
<div className="min-w-0 flex-1 truncate system-sm-medium text-text-secondary">
{trigger.title}
</div>
</div>
@ -192,8 +192,8 @@ function TriggerCard({ appInfo, onToggleResult }: ITriggerCardProps) {
</div>
<div className="shrink-0">
<Switch
value={trigger.status === 'enabled'}
onChange={enabled => onToggleTrigger(trigger, enabled)}
checked={trigger.status === 'enabled'}
onCheckedChange={enabled => onToggleTrigger(trigger, enabled)}
disabled={!isCurrentWorkspaceEditor}
/>
</div>

8
web/app/components/base/features/new-feature-panel/feature-card.tsx
View File

@ -32,13 +32,13 @@ const FeatureCard = ({
}: Props) => {
return (
<div
className="mb-1 rounded-xl border-l-[0.5px] border-t-[0.5px] border-effects-highlight bg-background-section-burn p-3"
className="mb-1 rounded-xl border-t-[0.5px] border-l-[0.5px] border-effects-highlight bg-background-section-burn p-3"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
<div className="mb-2 flex items-center gap-2">
{icon}
<div className="system-sm-semibold flex grow items-center text-text-secondary">
<div className="flex grow items-center system-sm-semibold text-text-secondary">
{title}
{tooltip && (
<Tooltip
@ -48,10 +48,10 @@ const FeatureCard = ({
</Tooltip>
)}
</div>
<Switch disabled={disabled} className="shrink-0" onChange={state => onChange?.(state)} value={value} />
<Switch disabled={disabled} className="shrink-0" onCheckedChange={state => onChange?.(state)} checked={value} />
</div>
{description && (
<div className="system-xs-regular line-clamp-2 min-h-8 text-text-tertiary">{description}</div>
<div className="line-clamp-2 min-h-8 system-xs-regular text-text-tertiary">{description}</div>
)}
{children}
</div>

8
web/app/components/base/features/new-feature-panel/moderation/moderation-content.tsx
View File

@ -38,14 +38,14 @@ const ModerationContent: FC<ModerationContentProps> = ({
}
<Switch
size="lg"
value={config.enabled}
onChange={v => handleConfigChange('enabled', v)}
checked={config.enabled}
onCheckedChange={v => handleConfigChange('enabled', v)}
/>
</div>
</div>
{
config.enabled && showPreset && (
<div className="rounded-lg bg-components-panel-bg px-3 pb-3 pt-1">
<div className="rounded-lg bg-components-panel-bg px-3 pt-1 pb-3">
<div className="flex h-8 items-center justify-between text-[13px] font-medium text-text-secondary">
{t('feature.moderation.modal.content.preset', { ns: 'appDebug' })}
<span className="text-xs font-normal text-text-tertiary">{t('feature.moderation.modal.content.supportMarkdown', { ns: 'appDebug' })}</span>
@ -57,7 +57,7 @@ const ModerationContent: FC<ModerationContentProps> = ({
placeholder={t('feature.moderation.modal.content.placeholder', { ns: 'appDebug' }) || ''}
onChange={e => handleConfigChange('preset_response', e.target.value)}
/>
<div className="absolute bottom-2 right-2 flex h-5 items-center rounded-md bg-background-section px-1 text-xs font-medium text-text-quaternary">
<div className="absolute right-2 bottom-2 flex h-5 items-center rounded-md bg-background-section px-1 text-xs font-medium text-text-quaternary">
<span>{(config.preset_response || '').length}</span>
/
<span className="text-text-tertiary">100</span>

4
web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
View File

@ -238,8 +238,8 @@ const VoiceParamConfig = ({
</div>
<Switch
className="shrink-0"
value={text2speech?.autoPlay === TtsAutoPlay.enabled}
onChange={(value: boolean) => {
checked={text2speech?.autoPlay === TtsAutoPlay.enabled}
onCheckedChange={(value: boolean) => {
handleChange({
autoPlay: value ? TtsAutoPlay.enabled : TtsAutoPlay.disabled,
})

6
web/app/components/base/param-item/index.tsx
View File

@ -37,13 +37,13 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
<Switch
size="md"
className="mr-2"
value={enable}
onChange={async (val) => {
checked={enable}
onCheckedChange={async (val) => {
onSwitchChange?.(id, val)
}}
/>
)}
<span className="mr-1 text-text-secondary system-sm-semibold">{name}</span>
<span className="mr-1 system-sm-semibold text-text-secondary">{name}</span>
{!noTooltip && (
<Tooltip
triggerClassName="w-4 h-4 shrink-0"

76
web/app/components/base/switch/__tests__/index.spec.tsx
View File

@ -7,86 +7,86 @@ import { SwitchSkeleton } from '../skeleton'
const getThumb = (switchElement: HTMLElement) => switchElement.querySelector('span')
describe('Switch', () => {
it('should render in unchecked state when value is false', () => {
render(<Switch value={false} />)
it('should render in unchecked state when checked is false', () => {
render(<Switch checked={false} />)
const switchElement = screen.getByRole('switch')
expect(switchElement).toBeInTheDocument()
expect(switchElement).toHaveAttribute('aria-checked', 'false')
expect(switchElement).not.toHaveAttribute('data-checked')
})
it('should render in checked state when value is true', () => {
render(<Switch value={true} />)
it('should render in checked state when checked is true', () => {
render(<Switch checked={true} />)
const switchElement = screen.getByRole('switch')
expect(switchElement).toHaveAttribute('aria-checked', 'true')
expect(switchElement).toHaveAttribute('data-checked', '')
})
it('should call onChange with next value when clicked', async () => {
const onChange = vi.fn()
it('should call onCheckedChange with next value when clicked', async () => {
const onCheckedChange = vi.fn()
const user = userEvent.setup()
render(<Switch value={false} onChange={onChange} />)
render(<Switch checked={false} onCheckedChange={onCheckedChange} />)
const switchElement = screen.getByRole('switch')
await user.click(switchElement)
expect(onChange).toHaveBeenCalledWith(true)
expect(onChange).toHaveBeenCalledTimes(1)
expect(onCheckedChange).toHaveBeenCalledWith(true)
expect(onCheckedChange).toHaveBeenCalledTimes(1)
expect(switchElement).toHaveAttribute('aria-checked', 'false')
})
it('should work in controlled mode with value prop', async () => {
const onChange = vi.fn()
it('should work in controlled mode with checked prop', async () => {
const onCheckedChange = vi.fn()
const user = userEvent.setup()
const { rerender } = render(<Switch value={false} onChange={onChange} />)
const { rerender } = render(<Switch checked={false} onCheckedChange={onCheckedChange} />)
const switchElement = screen.getByRole('switch')
expect(switchElement).toHaveAttribute('aria-checked', 'false')
await user.click(switchElement)
expect(onChange).toHaveBeenCalledWith(true)
expect(onCheckedChange).toHaveBeenCalledWith(true)
expect(switchElement).toHaveAttribute('aria-checked', 'false')
rerender(<Switch value={true} onChange={onChange} />)
rerender(<Switch checked={true} onCheckedChange={onCheckedChange} />)
expect(switchElement).toHaveAttribute('aria-checked', 'true')
})
it('should not call onChange when disabled', async () => {
const onChange = vi.fn()
it('should not call onCheckedChange when disabled', async () => {
const onCheckedChange = vi.fn()
const user = userEvent.setup()
render(<Switch value={false} disabled onChange={onChange} />)
render(<Switch checked={false} disabled onCheckedChange={onCheckedChange} />)
const switchElement = screen.getByRole('switch')
expect(switchElement).toHaveClass('data-disabled:cursor-not-allowed')
expect(switchElement).toHaveAttribute('data-disabled', '')
await user.click(switchElement)
expect(onChange).not.toHaveBeenCalled()
expect(onCheckedChange).not.toHaveBeenCalled()
})
it('should apply correct size classes', () => {
const { rerender } = render(<Switch value={false} size="xs" />)
const { rerender } = render(<Switch checked={false} size="xs" />)
const switchElement = screen.getByRole('switch')
expect(switchElement).toHaveClass('h-2.5', 'w-3.5', 'rounded-xs')
rerender(<Switch value={false} size="sm" />)
rerender(<Switch checked={false} size="sm" />)
expect(switchElement).toHaveClass('h-3', 'w-5')
rerender(<Switch value={false} size="md" />)
rerender(<Switch checked={false} size="md" />)
expect(switchElement).toHaveClass('h-4', 'w-7')
rerender(<Switch value={false} size="lg" />)
rerender(<Switch checked={false} size="lg" />)
expect(switchElement).toHaveClass('h-5', 'w-9')
})
it('should apply custom className', () => {
render(<Switch value={false} className="custom-test-class" />)
render(<Switch checked={false} className="custom-test-class" />)
expect(screen.getByRole('switch')).toHaveClass('custom-test-class')
})
it('should expose checked state styling hooks on the root and thumb', () => {
const { rerender } = render(<Switch value={false} />)
const { rerender } = render(<Switch checked={false} />)
const switchElement = screen.getByRole('switch')
const thumb = getThumb(switchElement)
@ -94,13 +94,13 @@ describe('Switch', () => {
expect(thumb).toHaveClass('data-checked:translate-x-[14px]')
expect(thumb).not.toHaveAttribute('data-checked')
rerender(<Switch value={true} />)
rerender(<Switch checked={true} />)
expect(switchElement).toHaveAttribute('data-checked', '')
expect(thumb).toHaveAttribute('data-checked', '')
})
it('should expose disabled state styling hooks instead of relying on opacity', () => {
const { rerender } = render(<Switch value={false} disabled />)
const { rerender } = render(<Switch checked={false} disabled />)
const switchElement = screen.getByRole('switch')
expect(switchElement).toHaveClass(
@ -109,28 +109,28 @@ describe('Switch', () => {
)
expect(switchElement).toHaveAttribute('data-disabled', '')
rerender(<Switch value={true} disabled />)
rerender(<Switch checked={true} disabled />)
expect(switchElement).toHaveAttribute('data-disabled', '')
expect(switchElement).toHaveAttribute('data-checked', '')
})
it('should have focus-visible ring-3 styles', () => {
render(<Switch value={false} />)
render(<Switch checked={false} />)
const switchElement = screen.getByRole('switch')
expect(switchElement).toHaveClass('focus-visible:ring-2')
})
it('should respect prefers-reduced-motion', () => {
render(<Switch value={false} />)
render(<Switch checked={false} />)
const switchElement = screen.getByRole('switch')
expect(switchElement).toHaveClass('motion-reduce:transition-none')
})
describe('loading state', () => {
it('should render as disabled when loading', async () => {
const onChange = vi.fn()
const onCheckedChange = vi.fn()
const user = userEvent.setup()
render(<Switch value={false} loading onChange={onChange} />)
render(<Switch checked={false} loading onCheckedChange={onCheckedChange} />)
const switchElement = screen.getByRole('switch')
expect(switchElement).toHaveClass('data-disabled:cursor-not-allowed')
@ -138,32 +138,32 @@ describe('Switch', () => {
expect(switchElement).toHaveAttribute('data-disabled', '')
await user.click(switchElement)
expect(onChange).not.toHaveBeenCalled()
expect(onCheckedChange).not.toHaveBeenCalled()
})
it('should show spinner icon for md and lg sizes', () => {
const { rerender, container } = render(<Switch value={false} loading size="md" />)
const { rerender, container } = render(<Switch checked={false} loading size="md" />)
expect(container.querySelector('span[aria-hidden="true"] i')).toBeInTheDocument()
rerender(<Switch value={false} loading size="lg" />)
rerender(<Switch checked={false} loading size="lg" />)
expect(container.querySelector('span[aria-hidden="true"] i')).toBeInTheDocument()
})
it('should not show spinner for xs and sm sizes', () => {
const { rerender, container } = render(<Switch value={false} loading size="xs" />)
const { rerender, container } = render(<Switch checked={false} loading size="xs" />)
expect(container.querySelector('span[aria-hidden="true"] i')).not.toBeInTheDocument()
rerender(<Switch value={false} loading size="sm" />)
rerender(<Switch checked={false} loading size="sm" />)
expect(container.querySelector('span[aria-hidden="true"] i')).not.toBeInTheDocument()
})
it('should apply disabled data-state hooks when loading', () => {
const { rerender } = render(<Switch value={false} loading />)
const { rerender } = render(<Switch checked={false} loading />)
const switchElement = screen.getByRole('switch')
expect(switchElement).toHaveAttribute('data-disabled', '')
rerender(<Switch value={true} loading />)
rerender(<Switch checked={true} loading />)
expect(switchElement).toHaveAttribute('data-disabled', '')
expect(switchElement).toHaveAttribute('data-checked', '')
})

56
web/app/components/base/switch/index.stories.tsx
View File

@ -16,7 +16,7 @@ const meta = {
},
tags: ['autodocs'],
args: {
value: false,
checked: false,
},
argTypes: {
size: {
@ -24,7 +24,7 @@ const meta = {
options: ['xs', 'sm', 'md', 'lg'],
description: 'Switch size',
},
value: {
checked: {
control: 'boolean',
description: 'Checked state (controlled)',
},
@ -43,14 +43,14 @@ export default meta
type Story = StoryObj<typeof meta>
const SwitchDemo = (args: any) => {
const [enabled, setEnabled] = useState(args.value ?? false)
const [enabled, setEnabled] = useState(args.checked ?? false)
return (
<div className="flex items-center justify-center gap-3">
<Switch
{...args}
value={enabled}
onChange={setEnabled}
checked={enabled}
onCheckedChange={setEnabled}
/>
<span className="text-sm text-gray-700">
{enabled ? 'On' : 'Off'}
@ -63,7 +63,7 @@ export const Default: Story = {
render: args => <SwitchDemo {...args} />,
args: {
size: 'md',
value: false,
checked: false,
disabled: false,
},
}
@ -72,7 +72,7 @@ export const DefaultOn: Story = {
render: args => <SwitchDemo {...args} />,
args: {
size: 'md',
value: true,
checked: true,
disabled: false,
},
}
@ -81,7 +81,7 @@ export const DisabledOff: Story = {
render: args => <SwitchDemo {...args} />,
args: {
size: 'md',
value: false,
checked: false,
disabled: true,
},
}
@ -90,7 +90,7 @@ export const DisabledOn: Story = {
render: args => <SwitchDemo {...args} />,
args: {
size: 'md',
value: true,
checked: true,
disabled: true,
},
}
@ -116,20 +116,20 @@ const AllStatesDemo = () => {
<td className="py-3 font-medium text-gray-900">{size}</td>
<td className="py-3">
<div className="flex gap-2">
<Switch size={size} value={false} onChange={() => {}} />
<Switch size={size} value={true} onChange={() => {}} />
<Switch size={size} checked={false} onCheckedChange={() => {}} />
<Switch size={size} checked={true} onCheckedChange={() => {}} />
</div>
</td>
<td className="py-3">
<div className="flex gap-2">
<Switch size={size} value={false} disabled />
<Switch size={size} value={true} disabled />
<Switch size={size} checked={false} disabled />
<Switch size={size} checked={true} disabled />
</div>
</td>
<td className="py-3">
<div className="flex gap-2">
<Switch size={size} value={false} loading />
<Switch size={size} value={true} loading />
<Switch size={size} checked={false} loading />
<Switch size={size} checked={true} loading />
</div>
</td>
<td className="py-3">
@ -165,19 +165,19 @@ const SizeComparisonDemo = () => {
return (
<div className="flex flex-col items-center space-y-4">
<div className="flex items-center gap-3">
<Switch size="xs" value={states.xs} onChange={v => setStates({ ...states, xs: v })} />
<Switch size="xs" checked={states.xs} onCheckedChange={v => setStates({ ...states, xs: v })} />
<span className="text-sm text-gray-700">Extra Small (xs) — 14×10</span>
</div>
<div className="flex items-center gap-3">
<Switch size="sm" value={states.sm} onChange={v => setStates({ ...states, sm: v })} />
<Switch size="sm" checked={states.sm} onCheckedChange={v => setStates({ ...states, sm: v })} />
<span className="text-sm text-gray-700">Small (sm) — 20×12</span>
</div>
<div className="flex items-center gap-3">
<Switch size="md" value={states.md} onChange={v => setStates({ ...states, md: v })} />
<Switch size="md" checked={states.md} onCheckedChange={v => setStates({ ...states, md: v })} />
<span className="text-sm text-gray-700">Regular (md) — 28×16</span>
</div>
<div className="flex items-center gap-3">
<Switch size="lg" value={states.lg} onChange={v => setStates({ ...states, lg: v })} />
<Switch size="lg" checked={states.lg} onCheckedChange={v => setStates({ ...states, lg: v })} />
<span className="text-sm text-gray-700">Large (lg) — 36×20</span>
</div>
</div>
@ -201,27 +201,27 @@ const LoadingDemo = () => {
</button>
<div className="space-y-3">
<div className="flex items-center gap-3">
<Switch size="lg" value={false} loading={loading} />
<Switch size="lg" checked={false} loading={loading} />
<span className="text-sm text-gray-700">Large unchecked</span>
</div>
<div className="flex items-center gap-3">
<Switch size="lg" value={true} loading={loading} />
<Switch size="lg" checked={true} loading={loading} />
<span className="text-sm text-gray-700">Large checked</span>
</div>
<div className="flex items-center gap-3">
<Switch size="md" value={false} loading={loading} />
<Switch size="md" checked={false} loading={loading} />
<span className="text-sm text-gray-700">Regular unchecked</span>
</div>
<div className="flex items-center gap-3">
<Switch size="md" value={true} loading={loading} />
<Switch size="md" checked={true} loading={loading} />
<span className="text-sm text-gray-700">Regular checked</span>
</div>
<div className="flex items-center gap-3">
<Switch size="sm" value={false} loading={loading} />
<Switch size="sm" checked={false} loading={loading} />
<span className="text-sm text-gray-700">Small (no spinner)</span>
</div>
<div className="flex items-center gap-3">
<Switch size="xs" value={false} loading={loading} />
<Switch size="xs" checked={false} loading={loading} />
<span className="text-sm text-gray-700">Extra Small (no spinner)</span>
</div>
</div>
@ -280,9 +280,9 @@ const MutationLoadingDemo = () => {
</div>
<Switch
size="lg"
value={enabled}
checked={enabled}
loading={isPending}
onChange={handleChange}
onCheckedChange={handleChange}
aria-label="Enable Auto Retry"
/>
</div>
@ -348,7 +348,7 @@ export const Playground: Story = {
render: args => <SwitchDemo {...args} />,
args: {
size: 'md',
value: false,
checked: false,
disabled: false,
loading: false,
},

14
web/app/components/base/switch/index.tsx
View File

@ -62,8 +62,8 @@ const spinnerSizeConfig: Partial<Record<SwitchSize, {
}
type SwitchProps = {
'value': boolean
'onChange'?: (value: boolean) => void
'checked': boolean
'onCheckedChange'?: (checked: boolean) => void
'size'?: SwitchSize
'disabled'?: boolean
'loading'?: boolean
@ -75,8 +75,8 @@ type SwitchProps = {
const Switch = ({
ref,
value,
onChange,
checked,
onCheckedChange,
size = 'md',
disabled = false,
loading = false,
@ -93,8 +93,8 @@ const Switch = ({
return (
<BaseSwitch.Root
ref={ref}
checked={value}
onCheckedChange={checked => onChange?.(checked)}
checked={checked}
onCheckedChange={value => onCheckedChange?.(value)}
disabled={isDisabled}
aria-busy={loading || undefined}
aria-label={ariaLabel}
@ -111,7 +111,7 @@ const Switch = ({
className={cn(
'absolute top-1/2 -translate-x-1/2 -translate-y-1/2',
spinner.icon,
value ? spinner.checkedPosition : spinner.uncheckedPosition,
checked ? spinner.checkedPosition : spinner.uncheckedPosition,
)}
aria-hidden="true"
>

6
web/app/components/billing/pricing/plan-switcher/plan-range-switcher.tsx
View File

@ -24,12 +24,12 @@ const PlanRangeSwitcher: FC<PlanRangeSwitcherProps> = ({
<div className="flex items-center justify-end gap-x-3 pr-5">
<Switch
size="lg"
value={value === PlanRange.yearly}
onChange={(v) => {
checked={value === PlanRange.yearly}
onCheckedChange={(v) => {
onChange(v ? PlanRange.yearly : PlanRange.monthly)
}}
/>
<span className="text-text-tertiary system-md-regular">
<span className="system-md-regular text-text-tertiary">
{t('plansCommon.annualBilling', { ns: 'billing', percent: 17 })}
</span>
</div>

4
web/app/components/custom/custom-web-app-brand/index.tsx
View File

@ -35,9 +35,9 @@ const CustomWebAppBrand = () => {
{t('webapp.removeBrand', { ns: 'custom' })}
<Switch
size="lg"
value={webappBrandRemoved ?? false}
checked={webappBrandRemoved ?? false}
disabled={isSandbox || !isCurrentWorkspaceManager}
onChange={handleSwitch}
onCheckedChange={handleSwitch}
/>
</div>
<div className={cn('flex h-14 items-center justify-between rounded-xl bg-background-section-burn px-4', webappBrandRemoved && 'opacity-30')}>

6
web/app/components/datasets/common/retrieval-param-config/__tests__/index.spec.tsx
View File

@ -123,11 +123,11 @@ vi.mock('@/app/components/base/radio-card', () => ({
}))
vi.mock('@/app/components/base/switch', () => ({
default: ({ value, onChange }: { value: boolean, onChange?: (v: boolean) => void }) => (
default: ({ checked, onCheckedChange }: { checked: boolean, onCheckedChange?: (v: boolean) => void }) => (
<button
data-testid="rerank-switch"
data-checked={value}
onClick={() => onChange?.(!value)}
data-checked={checked}
onClick={() => onCheckedChange?.(!checked)}
>
Switch
</button>

4
web/app/components/datasets/common/retrieval-param-config/index.tsx
View File

@ -121,8 +121,8 @@ const RetrievalParamConfig: FC<Props> = ({
{canToggleRerankModalEnable && (
<Switch
size="md"
value={value.reranking_enable}
onChange={handleToggleRerankEnable}
checked={value.reranking_enable}
onCheckedChange={handleToggleRerankEnable}
/>
)}
<div className="flex items-center">

6
web/app/components/datasets/documents/components/operations.tsx
View File

@ -154,18 +154,18 @@ const Operations = ({ embeddingAvailable, datasetId, detail, selectedIds, onSele
}, [datasetId, downloadDocument, id, isDownloading, name, t])
return (
<div className="flex items-center" onClick={e => e.stopPropagation()}>
{isListScene && !embeddingAvailable && (<Switch value={false} onChange={noop} disabled={true} size="md" />)}
{isListScene && !embeddingAvailable && (<Switch checked={false} onCheckedChange={noop} disabled={true} size="md" />)}
{isListScene && embeddingAvailable && (
<>
{archived
? (
<Tooltip popupContent={t('list.action.enableWarning', { ns: 'datasetDocuments' })} popupClassName="!font-semibold">
<div>
<Switch value={false} onChange={noop} disabled={true} size="md" />
<Switch checked={false} onCheckedChange={noop} disabled={true} size="md" />
</div>
</Tooltip>
)
: <Switch value={enabled} onChange={v => handleSwitch(v ? 'enable' : 'disable')} size="md" />}
: <Switch checked={enabled} onCheckedChange={v => handleSwitch(v ? 'enable' : 'disable')} size="md" />}
<Divider className="!mr-2 !ml-4 !h-3" type="vertical" />
</>
)}

4
web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
View File

@ -223,8 +223,8 @@ const SegmentCard: FC<ISegmentCardProps> = ({
<Switch
size="md"
disabled={archived || detail?.status !== 'completed'}
value={enabled}
onChange={async (val) => {
checked={enabled}
onCheckedChange={async (val) => {
await onChangeSwitch?.(val, id)
}}
/>

2
web/app/components/datasets/documents/status-item/index.tsx
View File

@ -85,7 +85,7 @@ const StatusItem = ({ status, reverse = false, scene = 'list', textCls = '', err
{scene === 'detail' && (
<div className="ml-1.5 flex items-center justify-between">
<Tooltip popupContent={t('list.action.enableWarning', { ns: 'datasetDocuments' })} popupClassName="text-text-secondary system-xs-medium" disabled={!archived}>
<Switch value={archived ? false : enabled} onChange={v => !archived && handleSwitch(v ? 'enable' : 'disable')} disabled={embedding || archived} size="md" />
<Switch checked={archived ? false : enabled} onCheckedChange={v => !archived && handleSwitch(v ? 'enable' : 'disable')} disabled={embedding || archived} size="md" />
</Tooltip>
</div>
)}

4
web/app/components/datasets/extra-info/api-access/card.tsx
View File

@ -60,8 +60,8 @@ const Card = ({
</div>
</div>
<Switch
value={apiEnabled}
onChange={onToggle}
checked={apiEnabled}
onCheckedChange={onToggle}
disabled={!isCurrentWorkspaceManager}
/>
</div>

4
web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
View File

@ -211,8 +211,8 @@ const DatasetMetadataDrawer: FC<Props> = ({
<div className="mt-3 flex h-6 items-center">
<Switch
value={isBuiltInEnabled}
onChange={onIsBuiltInEnabledChange}
checked={isBuiltInEnabled}
onCheckedChange={onIsBuiltInEnabledChange}
/>
<div className="mr-0.5 ml-2 system-sm-semibold text-text-secondary">{t(`${i18nPrefix}.builtIn`, { ns: 'dataset' })}</div>
<Tooltip popupContent={<div className="max-w-[100px]">{t(`${i18nPrefix}.builtInDescription`, { ns: 'dataset' })}</div>} />

34
web/app/components/datasets/settings/summary-index-setting.tsx
View File

@ -63,7 +63,7 @@ const SummaryIndexSetting = ({
return (
<div>
<div className="flex h-6 items-center justify-between">
<div className="flex items-center text-text-secondary system-sm-semibold-uppercase">
<div className="flex items-center system-sm-semibold-uppercase text-text-secondary">
{t('form.summaryAutoGen', { ns: 'datasetSettings' })}
<Tooltip
triggerClassName="ml-1 h-4 w-4 shrink-0"
@ -72,15 +72,15 @@ const SummaryIndexSetting = ({
</Tooltip>
</div>
<Switch
value={summaryIndexSetting?.enable ?? false}
onChange={handleSummaryIndexEnableChange}
checked={summaryIndexSetting?.enable ?? false}
onCheckedChange={handleSummaryIndexEnableChange}
size="md"
/>
</div>
{
summaryIndexSetting?.enable && (
<div>
<div className="mb-1.5 mt-2 flex h-6 items-center text-text-tertiary system-xs-medium-uppercase">
<div className="mt-2 mb-1.5 flex h-6 items-center system-xs-medium-uppercase text-text-tertiary">
{t('form.summaryModel', { ns: 'datasetSettings' })}
</div>
<ModelSelector
@ -90,7 +90,7 @@ const SummaryIndexSetting = ({
readonly={readonly}
showDeprecatedWarnIcon
/>
<div className="mt-3 flex h-6 items-center text-text-tertiary system-xs-medium-uppercase">
<div className="mt-3 flex h-6 items-center system-xs-medium-uppercase text-text-tertiary">
{t('form.summaryInstructions', { ns: 'datasetSettings' })}
</div>
<Textarea
@ -111,23 +111,23 @@ const SummaryIndexSetting = ({
<div className="space-y-4">
<div className="flex gap-x-1">
<div className="flex h-7 w-[180px] shrink-0 items-center pt-1">
<div className="text-text-secondary system-sm-semibold">
<div className="system-sm-semibold text-text-secondary">
{t('form.summaryAutoGen', { ns: 'datasetSettings' })}
</div>
</div>
<div className="py-1.5">
<div className="flex items-center text-text-secondary system-sm-semibold">
<div className="flex items-center system-sm-semibold text-text-secondary">
<Switch
className="mr-2"
value={summaryIndexSetting?.enable ?? false}
onChange={handleSummaryIndexEnableChange}
checked={summaryIndexSetting?.enable ?? false}
onCheckedChange={handleSummaryIndexEnableChange}
size="md"
/>
{
summaryIndexSetting?.enable ? t('list.status.enabled', { ns: 'datasetDocuments' }) : t('list.status.disabled', { ns: 'datasetDocuments' })
}
</div>
<div className="mt-2 text-text-tertiary system-sm-regular">
<div className="mt-2 system-sm-regular text-text-tertiary">
{
summaryIndexSetting?.enable && t('form.summaryAutoGenTip', { ns: 'datasetSettings' })
}
@ -142,7 +142,7 @@ const SummaryIndexSetting = ({
<>
<div className="flex gap-x-1">
<div className="flex h-7 w-[180px] shrink-0 items-center pt-1">
<div className="text-text-tertiary system-sm-medium">
<div className="system-sm-medium text-text-tertiary">
{t('form.summaryModel', { ns: 'datasetSettings' })}
</div>
</div>
@ -159,7 +159,7 @@ const SummaryIndexSetting = ({
</div>
<div className="flex">
<div className="flex h-7 w-[180px] shrink-0 items-center pt-1">
<div className="text-text-tertiary system-sm-medium">
<div className="system-sm-medium text-text-tertiary">
{t('form.summaryInstructions', { ns: 'datasetSettings' })}
</div>
</div>
@ -184,11 +184,11 @@ const SummaryIndexSetting = ({
<div className="flex h-6 items-center">
<Switch
className="mr-2"
value={summaryIndexSetting?.enable ?? false}
onChange={handleSummaryIndexEnableChange}
checked={summaryIndexSetting?.enable ?? false}
onCheckedChange={handleSummaryIndexEnableChange}
size="md"
/>
<div className="text-text-secondary system-sm-semibold">
<div className="system-sm-semibold text-text-secondary">
{t('form.summaryAutoGen', { ns: 'datasetSettings' })}
</div>
</div>
@ -196,7 +196,7 @@ const SummaryIndexSetting = ({
summaryIndexSetting?.enable && (
<>
<div>
<div className="mb-1.5 flex h-6 items-center text-text-secondary system-sm-medium">
<div className="mb-1.5 flex h-6 items-center system-sm-medium text-text-secondary">
{t('form.summaryModel', { ns: 'datasetSettings' })}
</div>
<ModelSelector
@ -209,7 +209,7 @@ const SummaryIndexSetting = ({
/>
</div>
<div>
<div className="mb-1.5 flex h-6 items-center text-text-secondary system-sm-medium">
<div className="mb-1.5 flex h-6 items-center system-sm-medium text-text-secondary">
{t('form.summaryInstructions', { ns: 'datasetSettings' })}
</div>
<Textarea

4
web/app/components/explore/create-app-modal/index.tsx
View File

@ -166,8 +166,8 @@ const CreateAppModal = ({
<div className="flex items-center justify-between">
<div className="py-2 text-sm leading-[20px] font-medium text-text-primary">{t('answerIcon.title', { ns: 'app' })}</div>
<Switch
value={useIconAsAnswerIcon}
onChange={v => setUseIconAsAnswerIcon(v)}
checked={useIconAsAnswerIcon}
onCheckedChange={v => setUseIconAsAnswerIcon(v)}
/>
</div>
<p className="body-xs-regular text-text-tertiary">{t('answerIcon.descriptionInExplore', { ns: 'app' })}</p>

4
web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
View File

@ -331,8 +331,8 @@ function ParameterItem({
!parameterRule.required && parameterRule.name !== 'stop' && (
<div className="mr-2 w-7">
<Switch
value={!isNullOrUndefined(value)}
onChange={handleSwitch}
checked={!isNullOrUndefined(value)}
onCheckedChange={handleSwitch}
size="md"
/>
</div>

6
web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
View File

@ -108,16 +108,16 @@ const ModelListItem = ({ model, provider, isConfigurable, onChange, onModifyLoad
}
offset={{ mainAxis: 4 }}
>
<Switch value={false} disabled size="md" />
<Switch checked={false} disabled size="md" />
</Tooltip>
)
: (isCurrentWorkspaceManager && (
<Switch
className="ml-2"
value={model?.status === ModelStatusEnum.active}
checked={model?.status === ModelStatusEnum.active}
disabled={![ModelStatusEnum.active, ModelStatusEnum.disabled].includes(model.status)}
size="md"
onChange={onEnablingStateChange}
onCheckedChange={onEnablingStateChange}
/>
))
}

8
web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
View File

@ -163,11 +163,11 @@ const ModelLoadBalancingConfigs = ({
{
withSwitch && (
<Switch
value={Boolean(draftConfig.enabled)}
checked={Boolean(draftConfig.enabled)}
size="lg"
className="ml-3 justify-self-end"
disabled={!modelLoadBalancingEnabled && !draftConfig.enabled}
onChange={value => toggleModalBalancing(value)}
onCheckedChange={value => toggleModalBalancing(value)}
data-testid="load-balancing-switch-main"
/>
)
@ -225,10 +225,10 @@ const ModelLoadBalancingConfigs = ({
<>
<span className="mr-2 h-3 border-r border-r-divider-subtle" />
<Switch
value={credential?.not_allowed_to_use ? false : Boolean(config.enabled)}
checked={credential?.not_allowed_to_use ? false : Boolean(config.enabled)}
size="md"
className="justify-self-end"
onChange={value => toggleConfigEntryEnabled(index, value)}
onCheckedChange={value => toggleConfigEntryEnabled(index, value)}
disabled={credential?.not_allowed_to_use}
data-testid={`load-balancing-switch-${config.id || index}`}
/>

4
web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx
View File

@ -196,8 +196,8 @@ const EndpointCard = ({
)}
<Switch
className="ml-3"
value={active}
onChange={handleSwitch}
checked={active}
onCheckedChange={handleSwitch}
size="sm"
/>
</div>

6
web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/reasoning-config-form.spec.tsx
View File

@ -31,9 +31,9 @@ vi.mock('@/app/components/base/select', () => ({
}))
vi.mock('@/app/components/base/switch', () => ({
default: ({ value, onChange }: { value: boolean, onChange: (value: boolean) => void }) => (
<button data-testid="auto-switch" onClick={() => onChange(!value)}>
{value ? 'on' : 'off'}
default: ({ checked, onCheckedChange }: { checked: boolean, onCheckedChange: (checked: boolean) => void }) => (
<button data-testid="auto-switch" onClick={() => onCheckedChange(!checked)}>
{checked ? 'on' : 'off'}
</button>
),
}))

4
web/app/components/plugins/plugin-detail-panel/tool-selector/components/reasoning-config-form.tsx
View File

@ -191,8 +191,8 @@ const ReasoningConfigForm: React.FC<Props> = ({
<span className="system-xs-medium text-text-secondary">{t('detailPanel.toolSelector.auto', { ns: 'plugin' })}</span>
<Switch
size="xs"
value={!!auto}
onChange={val => handleAutomatic(variable, val, type)}
checked={!!auto}
onCheckedChange={val => handleAutomatic(variable, val, type)}
/>
</div>
</div>

4
web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx
View File

@ -120,8 +120,8 @@ const ToolItem = ({
<div className="mr-1" onClick={e => e.stopPropagation()}>
<Switch
size="md"
value={switchValue ?? false}
onChange={onSwitchChange}
checked={switchValue ?? false}
onCheckedChange={onSwitchChange}
/>
</div>
)}

2
web/app/components/tools/mcp/mcp-service-card.tsx
View File

@ -258,7 +258,7 @@ const MCPServiceCard: FC<IAppCardProps> = ({
offset={24}
>
<div>
<Switch value={activated} onChange={onChangeStatus} disabled={toggleDisabled} />
<Switch checked={activated} onCheckedChange={onChangeStatus} disabled={toggleDisabled} />
</div>
</Tooltip>
</div>

4
web/app/components/tools/mcp/sections/authentication-section.tsx
View File

@ -32,8 +32,8 @@ const AuthenticationSection: FC<AuthenticationSectionProps> = ({
<div className="mb-1 flex h-6 items-center">
<Switch
className="mr-2"
value={isDynamicRegistration}
onChange={onDynamicRegistrationChange}
checked={isDynamicRegistration}
onCheckedChange={onDynamicRegistrationChange}
/>
<span className="system-sm-medium text-text-secondary">{t('mcp.modal.useDynamicClientRegistration', { ns: 'tools' })}</span>
</div>

2
web/app/components/workflow/nodes/_base/components/config-vision.tsx
View File

@ -65,7 +65,7 @@ const ConfigVision: FC<Props> = ({
popupContent={t('vision.onlySupportVisionModelTip', { ns: 'appDebug' })!}
disabled={isVisionModel}
>
<Switch disabled={readOnly || !isVisionModel} size="md" value={!isVisionModel ? false : enabled} onChange={onEnabledChange} />
<Switch disabled={readOnly || !isVisionModel} size="md" checked={!isVisionModel ? false : enabled} onCheckedChange={onEnabledChange} />
</Tooltip>
)}
>

8
web/app/components/workflow/nodes/_base/components/memory-config.tsx
View File

@ -136,8 +136,8 @@ const MemoryConfig: FC<Props> = ({
tooltip={t(`${i18nPrefix}.memoryTip`, { ns: 'workflow' })!}
operations={(
<Switch
value={!!payload}
onChange={handleMemoryEnabledChange}
checked={!!payload}
onCheckedChange={handleMemoryEnabledChange}
size="md"
disabled={readonly}
/>
@ -149,8 +149,8 @@ const MemoryConfig: FC<Props> = ({
<div className="flex justify-between">
<div className="flex h-8 items-center space-x-2">
<Switch
value={payload?.window?.enabled}
onChange={handleWindowEnabledChange}
checked={payload?.window?.enabled}
onCheckedChange={handleWindowEnabledChange}
size="md"
disabled={readonly}
/>

4
web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
View File

@ -196,8 +196,8 @@ const Editor: FC<Props> = ({
<Jinja className="h-3 w-6 text-text-quaternary" />
<Switch
size="sm"
value={editionType === EditionType.jinja2}
onChange={(checked) => {
checked={editionType === EditionType.jinja2}
onCheckedChange={(checked) => {
onEditionTypeChange?.(checked ? EditionType.jinja2 : EditionType.basic)
}}
/>

10
web/app/components/workflow/nodes/_base/components/retry/retry-on-panel.tsx
View File

@ -55,18 +55,18 @@ const RetryOnPanel = ({
<div className="pt-2">
<div className="flex h-10 items-center justify-between px-4 py-2">
<div className="flex items-center">
<div className="mr-0.5 text-text-secondary system-sm-semibold-uppercase">{t('nodes.common.retry.retryOnFailure', { ns: 'workflow' })}</div>
<div className="mr-0.5 system-sm-semibold-uppercase text-text-secondary">{t('nodes.common.retry.retryOnFailure', { ns: 'workflow' })}</div>
</div>
<Switch
value={retry_config?.retry_enabled ?? false}
onChange={v => handleRetryEnabledChange(v)}
checked={retry_config?.retry_enabled ?? false}
onCheckedChange={v => handleRetryEnabledChange(v)}
/>
</div>
{
retry_config?.retry_enabled && (
<div className="px-4 pb-2">
<div className="mb-1 flex w-full items-center">
<div className="mr-2 grow text-text-secondary system-xs-medium-uppercase">{t('nodes.common.retry.maxRetries', { ns: 'workflow' })}</div>
<div className="mr-2 grow system-xs-medium-uppercase text-text-secondary">{t('nodes.common.retry.maxRetries', { ns: 'workflow' })}</div>
<Slider
className="mr-3 w-[108px]"
value={retry_config?.max_retries || 3}
@ -88,7 +88,7 @@ const RetryOnPanel = ({
/>
</div>
<div className="flex items-center">
<div className="mr-2 grow text-text-secondary system-xs-medium-uppercase">{t('nodes.common.retry.retryInterval', { ns: 'workflow' })}</div>
<div className="mr-2 grow system-xs-medium-uppercase text-text-secondary">{t('nodes.common.retry.retryInterval', { ns: 'workflow' })}</div>
<Slider
className="mr-3 w-[108px]"
value={retry_config?.retry_interval || 1000}

4
web/app/components/workflow/nodes/http/panel.tsx
View File

@ -131,8 +131,8 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
tooltip={t(`${i18nPrefix}.verifySSL.warningTooltip`, { ns: 'workflow' })}
operations={(
<Switch
value={!!inputs.ssl_verify}
onChange={handleSSLVerifyChange}
checked={!!inputs.ssl_verify}
onCheckedChange={handleSSLVerifyChange}
size="md"
disabled={readOnly}
/>

4
web/app/components/workflow/nodes/human-input/components/delivery-method/email-configure-modal.tsx
View File

@ -140,8 +140,8 @@ const EmailConfigureModal = ({
</div>
</div>
<Switch
value={debugMode}
onChange={checked => setDebugMode(checked)}
checked={debugMode}
onCheckedChange={checked => setDebugMode(checked)}
/>
</div>
</div>

4
web/app/components/workflow/nodes/human-input/components/delivery-method/method-item.tsx
View File

@ -160,8 +160,8 @@ const DeliveryMethodItem: FC<DeliveryMethodItemProps> = ({
)}
{(method.config || method.type === DeliveryMethodType.WebApp) && (
<Switch
value={method.enabled}
onChange={handleEnableStatusChange}
checked={method.enabled}
onCheckedChange={handleEnableStatusChange}
disabled={readonly}
/>
)}

6
web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/__tests__/index.spec.tsx
View File

@ -20,10 +20,10 @@ vi.mock('@/service/use-common', () => ({
vi.mock('@/app/components/base/switch', () => ({
__esModule: true,
default: (props: {
value: boolean
onChange: (value: boolean) => void
checked: boolean
onCheckedChange: (value: boolean) => void
}) => (
<button type="button" onClick={() => props.onChange(!props.value)}>
<button type="button" onClick={() => props.onCheckedChange(!props.checked)}>
toggle-workspace
</button>
),

4
web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/index.tsx
View File

@ -91,8 +91,8 @@ const Recipient = ({
</div>
<div className={cn('grow system-sm-medium text-text-secondary')}>{t(`${i18nPrefix}.deliveryMethod.emailConfigure.allMembers`, { workspaceName: currentWorkspace.name.replace(/'/g, '’'), ns: 'workflow' })}</div>
<Switch
value={data.whole_workspace}
onChange={checked => onChange({ ...data, whole_workspace: checked })}
checked={data.whole_workspace}
onCheckedChange={checked => onChange({ ...data, whole_workspace: checked })}
/>
</div>
</div>

10
web/app/components/workflow/nodes/iteration/panel.tsx
View File

@ -51,13 +51,13 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
} = useConfig(id, data)
return (
<div className="pb-2 pt-2">
<div className="pt-2 pb-2">
<div className="space-y-4 px-4 pb-4">
<Field
title={t(`${i18nPrefix}.input`, { ns: 'workflow' })}
required
operations={(
<div className="flex h-[18px] items-center rounded-[5px] border border-divider-deep px-1 capitalize text-text-tertiary system-2xs-medium-uppercase">Array</div>
<div className="flex h-[18px] items-center rounded-[5px] border border-divider-deep px-1 system-2xs-medium-uppercase text-text-tertiary capitalize">Array</div>
)}
>
<VarReferencePicker
@ -76,7 +76,7 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
title={t(`${i18nPrefix}.output`, { ns: 'workflow' })}
required
operations={(
<div className="flex h-[18px] items-center rounded-[5px] border border-divider-deep px-1 capitalize text-text-tertiary system-2xs-medium-uppercase">Array</div>
<div className="flex h-[18px] items-center rounded-[5px] border border-divider-deep px-1 system-2xs-medium-uppercase text-text-tertiary capitalize">Array</div>
)}
>
<VarReferencePicker
@ -92,7 +92,7 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
</div>
<div className="px-4 pb-2">
<Field title={t(`${i18nPrefix}.parallelMode`, { ns: 'workflow' })} tooltip={<div className="w-[230px]">{t(`${i18nPrefix}.parallelPanelDesc`, { ns: 'workflow' })}</div>} inline>
<Switch value={inputs.is_parallel} onChange={changeParallel} />
<Switch checked={inputs.is_parallel} onCheckedChange={changeParallel} />
</Field>
</div>
{
@ -131,7 +131,7 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
tooltip={<div className="w-[230px]">{t(`${i18nPrefix}.flattenOutputDesc`, { ns: 'workflow' })}</div>}
inline
>
<Switch value={inputs.flatten_output} onChange={changeFlattenOutput} />
<Switch checked={inputs.flatten_output} onCheckedChange={changeFlattenOutput} />
</Field>
</div>
</div>

4
web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx
View File

@ -169,8 +169,8 @@ const SearchMethodOption = ({
<div className="mb-1 flex items-center system-sm-semibold text-text-secondary">
<Switch
className="mr-1"
value={rerankingModelEnabled ?? false}
onChange={onRerankingModelEnabledChange}
checked={rerankingModelEnabled ?? false}
onCheckedChange={onRerankingModelEnabledChange}
disabled={readonly}
/>
{t('modelProvider.rerankModel.key', { ns: 'common' })}

8
web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/top-k-and-score-threshold.tsx
View File

@ -57,7 +57,7 @@ const TopKAndScoreThreshold = ({
return (
<div className="grid grid-cols-2 gap-4">
<div>
<div className="mb-0.5 flex h-6 items-center text-text-secondary system-xs-medium">
<div className="mb-0.5 flex h-6 items-center system-xs-medium text-text-secondary">
{t('datasetConfig.top_k', { ns: 'appDebug' })}
<Tooltip
triggerClassName="ml-0.5 shrink-0 w-3.5 h-3.5"
@ -87,11 +87,11 @@ const TopKAndScoreThreshold = ({
<div className="mb-0.5 flex h-6 items-center">
<Switch
className="mr-2"
value={isScoreThresholdEnabled ?? false}
onChange={onScoreThresholdEnabledChange}
checked={isScoreThresholdEnabled ?? false}
onCheckedChange={onScoreThresholdEnabledChange}
disabled={readonly}
/>
<div className="grow truncate text-text-secondary system-sm-medium">
<div className="grow truncate system-sm-medium text-text-secondary">
{t('datasetConfig.score_threshold', { ns: 'appDebug' })}
</div>
<Tooltip

8
web/app/components/workflow/nodes/list-operator/__tests__/panel.spec.tsx
View File

@ -25,18 +25,18 @@ vi.mock('../use-config', () => ({
vi.mock('@/app/components/base/switch', () => ({
__esModule: true,
default: (props: {
value?: boolean
checked?: boolean
disabled?: boolean
onChange: (value: boolean) => void
onCheckedChange: (value: boolean) => void
}) => {
mockSwitch(props)
return (
<button
type="button"
role="switch"
aria-checked={props.value}
aria-checked={props.checked}
disabled={props.disabled}
onClick={() => props.onChange(!props.value)}
onClick={() => props.onCheckedChange(!props.checked)}
>
{props.disabled ? 'switch:disabled' : 'switch:enabled'}
</button>

8
web/app/components/workflow/nodes/list-operator/components/__tests__/limit-config.spec.tsx
View File

@ -3,8 +3,8 @@ import { fireEvent, render, screen } from '@testing-library/react'
import LimitConfig from '../limit-config'
type MockSwitchProps = {
value: boolean
onChange: (value: boolean) => void
checked: boolean
onCheckedChange: (value: boolean) => void
disabled?: boolean
}
@ -25,9 +25,9 @@ vi.mock('@/app/components/base/switch', () => ({
return (
<button
type="button"
onClick={() => !props.disabled && props.onChange(!props.value)}
onClick={() => !props.disabled && props.onCheckedChange(!props.checked)}
>
{`switch:${props.value}`}
{`switch:${props.checked}`}
</button>
)
},

4
web/app/components/workflow/nodes/list-operator/components/limit-config.tsx
View File

@ -56,8 +56,8 @@ const LimitConfig: FC<Props> = ({
title={t(`${i18nPrefix}.limit`, { ns: 'workflow' })}
operations={(
<Switch
value={payload.enabled}
onChange={handleLimitEnabledChange}
checked={payload.enabled}
onCheckedChange={handleLimitEnabledChange}
size="md"
disabled={readonly}
/>

12
web/app/components/workflow/nodes/list-operator/panel.tsx
View File

@ -65,8 +65,8 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
title={t(`${i18nPrefix}.filterCondition`, { ns: 'workflow' })}
operations={(
<Switch
value={inputs.filter_by?.enabled}
onChange={handleFilterEnabledChange}
checked={inputs.filter_by?.enabled}
onCheckedChange={handleFilterEnabledChange}
size="md"
disabled={readOnly}
/>
@ -90,8 +90,8 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
title={t(`${i18nPrefix}.extractsCondition`, { ns: 'workflow' })}
operations={(
<Switch
value={inputs.extract_by?.enabled}
onChange={handleExtractsEnabledChange}
checked={inputs.extract_by?.enabled}
onCheckedChange={handleExtractsEnabledChange}
size="md"
disabled={readOnly}
/>
@ -123,8 +123,8 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
title={t(`${i18nPrefix}.orderBy`, { ns: 'workflow' })}
operations={(
<Switch
value={inputs.order_by?.enabled}
onChange={handleOrderByEnabledChange}
checked={inputs.order_by?.enabled}
onCheckedChange={handleOrderByEnabledChange}
size="md"
disabled={readOnly}
/>

2
web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/required-switch.tsx
View File

@ -17,7 +17,7 @@ const RequiredSwitch: FC<RequiredSwitchProps> = ({
return (
<div className="flex items-center gap-x-1 rounded-[5px] border border-divider-subtle bg-background-default-lighter px-1.5 py-1">
<span className="system-2xs-medium-uppercase text-text-secondary">{t('nodes.llm.jsonSchema.required', { ns: 'workflow' })}</span>
<Switch size="xs" value={defaultValue} onChange={toggleRequired} />
<Switch size="xs" checked={defaultValue} onCheckedChange={toggleRequired} />
</div>
)
}

4
web/app/components/workflow/nodes/llm/components/panel-output-section.tsx
View File

@ -74,8 +74,8 @@ const PanelOutputSection: FC<Props> = ({
</Tooltip>
<Switch
className="ml-2"
value={!!inputs.structured_output_enabled}
onChange={handleStructureOutputEnableChange}
checked={!!inputs.structured_output_enabled}
onCheckedChange={handleStructureOutputEnableChange}
size="md"
disabled={readOnly}
/>

4
web/app/components/workflow/nodes/llm/components/reasoning-format-config.tsx
View File

@ -24,8 +24,8 @@ const ReasoningFormatConfig: FC<ReasoningFormatConfigProps> = ({
operations={(
// ON = separated, OFF = tagged
<Switch
value={value === 'separated'}
onChange={enabled => onChange(enabled ? 'separated' : 'tagged')}
checked={value === 'separated'}
onCheckedChange={enabled => onChange(enabled ? 'separated' : 'tagged')}
size="md"
disabled={readonly}
key={value}

2
web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
View File

@ -169,7 +169,7 @@ const AddExtractParameter: FC<Props> = ({
<Field title={t(`${i18nPrefix}.addExtractParameterContent.required`, { ns: 'workflow' })}>
<>
<div className="mb-1.5 text-xs leading-[18px] font-normal text-text-tertiary">{t(`${i18nPrefix}.addExtractParameterContent.requiredContent`, { ns: 'workflow' })}</div>
<Switch size="lg" value={param.required ?? false} onChange={handleParamChange('required')} />
<Switch size="lg" checked={param.required ?? false} onCheckedChange={handleParamChange('required')} />
</>
</Field>
</div>

4
web/app/components/workflow/nodes/variable-assigner/panel.tsx
View File

@ -90,8 +90,8 @@ const Panel: FC<NodePanelProps<VariableAssignerNodeType>> = ({
tooltip={t(`${i18nPrefix}.aggregationGroupTip`, { ns: 'workflow' })!}
operations={(
<Switch
value={isEnableGroup}
onChange={handleGroupEnabledChange}
checked={isEnableGroup}
onCheckedChange={handleGroupEnabledChange}
size="md"
disabled={readOnly}
/>

4
web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx
View File

@ -80,8 +80,8 @@ const Operator = ({
<div>{t('nodes.note.editor.showAuthor', { ns: 'workflow' })}</div>
<Switch
size="lg"
value={showAuthor}
onChange={onShowAuthorChange}
checked={showAuthor}
onCheckedChange={onShowAuthorChange}
/>
</div>
</div>

6
web/app/components/workflow/panel/version-history-panel/filter/filter-switch.tsx
View File

@ -17,12 +17,12 @@ const FilterSwitch: FC<FilterSwitchProps> = ({
return (
<div className="flex items-center p-1">
<div className="flex w-full items-center gap-x-1 px-2 py-1.5">
<div className="system-md-regular flex-1 px-1 text-text-secondary">
<div className="flex-1 px-1 system-md-regular text-text-secondary">
{t('versionHistory.filter.onlyShowNamedVersions', { ns: 'workflow' })}
</div>
<Switch
value={enabled}
onChange={v => handleSwitch(v)}
checked={enabled}
onCheckedChange={v => handleSwitch(v)}
size="md"
className="shrink-0"
/>

45
web/eslint-suppressions.json
View File

@ -567,17 +567,11 @@
"app/components/app/configuration/config/config-audio.tsx": {
"no-restricted-imports": {
"count": 1
},
"tailwindcss/enforce-consistent-class-order": {
"count": 3
}
},
"app/components/app/configuration/config/config-document.tsx": {
"no-restricted-imports": {
"count": 1
},
"tailwindcss/enforce-consistent-class-order": {
"count": 3
}
},
"app/components/app/configuration/dataset-config/context-var/index.tsx": {
@ -783,9 +777,6 @@
"app/components/app/overview/app-card.tsx": {
"no-restricted-imports": {
"count": 1
},
"tailwindcss/enforce-consistent-class-order": {
"count": 1
}
},
"app/components/app/overview/customize/index.tsx": {
@ -813,9 +804,6 @@
}
},
"app/components/app/overview/trigger-card.tsx": {
"tailwindcss/enforce-consistent-class-order": {
"count": 6
},
"ts/no-explicit-any": {
"count": 1
}
@ -1433,9 +1421,6 @@
"no-restricted-imports": {
"count": 1
},
"tailwindcss/enforce-consistent-class-order": {
"count": 3
},
"ts/no-explicit-any": {
"count": 5
}
@ -1460,11 +1445,6 @@
"count": 1
}
},
"app/components/base/features/new-feature-panel/moderation/moderation-content.tsx": {
"tailwindcss/enforce-consistent-class-order": {
"count": 2
}
},
"app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx": {
"no-restricted-imports": {
"count": 1
@ -2223,9 +2203,6 @@
"app/components/base/param-item/index.tsx": {
"no-restricted-imports": {
"count": 1
},
"tailwindcss/enforce-consistent-class-order": {
"count": 1
}
},
"app/components/base/popover/index.stories.tsx": {
@ -2735,9 +2712,6 @@
},
"react-refresh/only-export-components": {
"count": 1
},
"tailwindcss/enforce-consistent-class-order": {
"count": 1
}
},
"app/components/billing/pricing/plans/cloud-plan-item/index.tsx": {
@ -3695,9 +3669,6 @@
"app/components/datasets/settings/summary-index-setting.tsx": {
"no-restricted-imports": {
"count": 1
},
"tailwindcss/enforce-consistent-class-order": {
"count": 11
}
},
"app/components/develop/ApiServer.tsx": {
@ -5894,11 +5865,6 @@
"count": 1
}
},
"app/components/workflow/nodes/_base/components/retry/retry-on-panel.tsx": {
"tailwindcss/enforce-consistent-class-order": {
"count": 3
}
},
"app/components/workflow/nodes/_base/components/selector.tsx": {
"ts/no-explicit-any": {
"count": 2
@ -6523,9 +6489,6 @@
"app/components/workflow/nodes/iteration/panel.tsx": {
"no-restricted-imports": {
"count": 1
},
"tailwindcss/enforce-consistent-class-order": {
"count": 3
}
},
"app/components/workflow/nodes/iteration/use-config.ts": {
@ -6566,9 +6529,6 @@
"app/components/workflow/nodes/knowledge-base/components/retrieval-setting/top-k-and-score-threshold.tsx": {
"no-restricted-imports": {
"count": 1
},
"tailwindcss/enforce-consistent-class-order": {
"count": 2
}
},
"app/components/workflow/nodes/knowledge-base/components/retrieval-setting/type.ts": {
@ -7528,11 +7488,6 @@
"count": 1
}
},
"app/components/workflow/panel/version-history-panel/filter/filter-switch.tsx": {
"tailwindcss/enforce-consistent-class-order": {
"count": 1
}
},
"app/components/workflow/panel/version-history-panel/filter/index.tsx": {
"no-restricted-imports": {
"count": 1