Files
dify/web/app/components/workflow/view-picker.tsx
yyh 772dbe620d fix(workflow): disable view switch during preview run instead of mounted guard
Simpler approach: disable the view picker toggle when preview is running,
preventing users from switching views during active runs.

This replaces the previous mounted ref guard approach (commits a0188bd9b5,
b7f1eb9b7b, 8332f0de2b) which added complexity to handle post-unmount
operations. Disabling the toggle is more direct and follows KISS principle.

Changes:
- Add disabled prop to ViewPicker based on isResponding state
- Revert mounted ref guards in use-chat-flow-control.ts
- Revert isMountedRef parameter in use-nodes/edges-interactions-without-sync.ts
- Revert defensive type check in markdown-utils.ts (no longer needed)
2026-01-27 01:31:22 +08:00

51 lines
1.4 KiB
TypeScript

'use client'
import type { FC } from 'react'
import * as React from 'react'
import { useCallback, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import SegmentedControl from '@/app/components/base/segmented-control'
import { cn } from '@/utils/classnames'
import { ViewType } from '../workflow/types'
type ViewPickerProps = {
value: ViewType
onChange: (value: ViewType) => void
className?: string
disabled?: boolean
}
const ViewPicker: FC<ViewPickerProps> = ({
value,
onChange,
className,
disabled,
}) => {
const { t } = useTranslation()
const options = useMemo(() => ([
{ value: ViewType.graph, text: t('viewPicker.graph', { ns: 'workflow' }), disabled: disabled && value !== ViewType.graph },
{ value: ViewType.skill, text: t('viewPicker.skill', { ns: 'workflow' }), disabled: disabled && value !== ViewType.skill },
]), [t, disabled, value])
const handleChange = useCallback((nextValue: string | number | symbol) => {
if (nextValue === value)
return
onChange(nextValue as ViewType)
}, [onChange, value])
return (
<SegmentedControl
className={cn('text-text-accent-light-mode-only', className)}
options={options}
value={value}
onChange={handleChange}
btnClassName="system-sm-semibold-uppercase text-text-secondary"
activeClassName="!text-text-accent-light-mode-only"
size="regular"
padding="none"
/>
)
}
export default React.memo(ViewPicker)