mirror of
https://github.com/langgenius/dify.git
synced 2026-09-09 13:52:42 +08:00
80 lines
2.9 KiB
TypeScript
80 lines
2.9 KiB
TypeScript
import type { FC } from 'react'
|
|
import { cn } from '@langgenius/dify-ui/cn'
|
|
import { debounce } from 'es-toolkit/compat'
|
|
import { useCallback, useEffect, useId, useMemo } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import ResizeHandle from '@/app/components/base/resize-handle'
|
|
import { useResizePanel } from '../nodes/_base/hooks/use-resize-panel'
|
|
import { useSetWorkflowVariableInspectPanelHeight } from '../persistence/local-storage-options'
|
|
import { useStore } from '../store'
|
|
import Panel from './panel'
|
|
|
|
const VariableInspectPanel: FC = () => {
|
|
const { t } = useTranslation('workflow')
|
|
const panelId = useId()
|
|
const showVariableInspectPanel = useStore((s) => s.showVariableInspectPanel)
|
|
const workflowCanvasHeight = useStore((s) => s.workflowCanvasHeight)
|
|
const variableInspectPanelHeight = useStore((s) => s.variableInspectPanelHeight)
|
|
const setVariableInspectPanelHeight = useStore((s) => s.setVariableInspectPanelHeight)
|
|
|
|
const maxHeight = useMemo(() => {
|
|
if (!workflowCanvasHeight) return 480
|
|
return Math.max(120, workflowCanvasHeight - 60)
|
|
}, [workflowCanvasHeight])
|
|
|
|
useEffect(() => {
|
|
if (!workflowCanvasHeight) return
|
|
if (variableInspectPanelHeight > maxHeight) setVariableInspectPanelHeight(maxHeight)
|
|
}, [workflowCanvasHeight, variableInspectPanelHeight, maxHeight, setVariableInspectPanelHeight])
|
|
|
|
const setPanelHeightStorage = useSetWorkflowVariableInspectPanelHeight()
|
|
|
|
const handleResize = useCallback(
|
|
(width: number, height: number) => {
|
|
setPanelHeightStorage(height)
|
|
setVariableInspectPanelHeight(height)
|
|
},
|
|
[setVariableInspectPanelHeight, setPanelHeightStorage],
|
|
)
|
|
|
|
const { triggerRef, containerRef } = useResizePanel({
|
|
direction: 'vertical',
|
|
triggerDirection: 'top',
|
|
minHeight: 120,
|
|
maxHeight,
|
|
onResize: debounce(handleResize),
|
|
})
|
|
|
|
if (!showVariableInspectPanel) return null
|
|
|
|
return (
|
|
<div className={cn('relative pb-1')}>
|
|
<ResizeHandle
|
|
ref={triggerRef}
|
|
side="top"
|
|
value={variableInspectPanelHeight}
|
|
min={120}
|
|
max={maxHeight}
|
|
controls={panelId}
|
|
label={t(($) => $['debug.variableInspect.title'])}
|
|
onResize={(height) => handleResize(0, height)}
|
|
className="absolute -top-1 left-0 flex h-1 w-full cursor-row-resize items-center justify-center"
|
|
>
|
|
<div className="h-0.5 w-10 rounded-xs bg-state-base-handle group-focus-visible/resize:w-full group-focus-visible/resize:bg-state-accent-solid hover:w-full hover:bg-state-accent-solid active:w-full active:bg-state-accent-solid"></div>
|
|
</ResizeHandle>
|
|
<div
|
|
id={panelId}
|
|
ref={containerRef}
|
|
className={cn(
|
|
'overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl',
|
|
)}
|
|
style={{ height: `${variableInspectPanelHeight}px` }}
|
|
>
|
|
<Panel />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default VariableInspectPanel
|