mirror of
https://github.com/langgenius/dify.git
synced 2026-02-13 07:01:23 -05:00
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 (commitsa0188bd9b5,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)
51 lines
1.4 KiB
TypeScript
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)
|