diff --git a/web/app/components/workflow/hooks/use-workflow.ts b/web/app/components/workflow/hooks/use-workflow.ts index 15e2034c5b..6895ce2e20 100644 --- a/web/app/components/workflow/hooks/use-workflow.ts +++ b/web/app/components/workflow/hooks/use-workflow.ts @@ -75,6 +75,11 @@ export const useWorkflow = () => { const { handleSyncWorkflowDraft } = useNodesSyncDraft() const { eventEmitter } = useEventEmitterContextContext() + const setPanelWidth = useCallback((width: number) => { + localStorage.setItem('workflow-node-panel-width', `${width}`) + workflowStore.setState({ panelWidth: width }) + }, [workflowStore]) + const handleLayout = useCallback(async () => { workflowStore.setState({ nodeAnimation: true }) const { @@ -353,6 +358,7 @@ export const useWorkflow = () => { }, [workflowStore]) return { + setPanelWidth, handleLayout, getTreeLeafNodes, getBeforeNodesInSameBranch, diff --git a/web/app/components/workflow/nodes/_base/hooks/use-resize-panel.ts b/web/app/components/workflow/nodes/_base/hooks/use-resize-panel.ts index fbb7185874..1a521cd58f 100644 --- a/web/app/components/workflow/nodes/_base/hooks/use-resize-panel.ts +++ b/web/app/components/workflow/nodes/_base/hooks/use-resize-panel.ts @@ -13,6 +13,7 @@ export type UseResizePanelPrarams = { minHeight?: number maxHeight?: number onResized?: (width: number, height: number) => void + onResize?: (width: number, height: number) => void } export const useResizePanel = (params?: UseResizePanelPrarams) => { const { @@ -23,6 +24,7 @@ export const useResizePanel = (params?: UseResizePanelPrarams) => { minHeight = -Infinity, maxHeight = Infinity, onResized, + onResize, } = params || {} const triggerRef = useRef(null) const containerRef = useRef(null) @@ -63,6 +65,7 @@ export const useResizePanel = (params?: UseResizePanelPrarams) => { if (width > maxWidth) width = maxWidth containerRef.current.style.width = `${width}px` + onResize?.(width, 0) } if (direction === 'vertical' || direction === 'both') { @@ -79,6 +82,7 @@ export const useResizePanel = (params?: UseResizePanelPrarams) => { height = maxHeight containerRef.current.style.height = `${height}px` + onResize?.(0, height) } }, [ direction, @@ -87,6 +91,7 @@ export const useResizePanel = (params?: UseResizePanelPrarams) => { maxWidth, minHeight, maxHeight, + onResize, ]) const handleStopResize = useCallback(() => { diff --git a/web/app/components/workflow/nodes/_base/hooks/use-toggle-expend.ts b/web/app/components/workflow/nodes/_base/hooks/use-toggle-expend.ts index 979dafbb0a..51e05d3c7b 100644 --- a/web/app/components/workflow/nodes/_base/hooks/use-toggle-expend.ts +++ b/web/app/components/workflow/nodes/_base/hooks/use-toggle-expend.ts @@ -1,4 +1,5 @@ import { useEffect, useState } from 'react' +import { useStore } from '@/app/components/workflow/store' type Params = { ref: React.RefObject @@ -9,6 +10,7 @@ type Params = { const useToggleExpend = ({ ref, hasFooter = true, isInNode }: Params) => { const [isExpand, setIsExpand] = useState(false) const [wrapHeight, setWrapHeight] = useState(ref.current?.clientHeight) + const panelWidth = useStore(state => state.panelWidth) const editorExpandHeight = isExpand ? wrapHeight! - (hasFooter ? 56 : 29) : 0 useEffect(() => { setWrapHeight(ref.current?.clientHeight) @@ -20,11 +22,16 @@ const useToggleExpend = ({ ref, hasFooter = true, isInNode }: Params) => { return '' if (isInNode) - return 'fixed z-10 right-[9px] top-[166px] bottom-[8px] w-[419px] p-4 bg-white rounded-xl' + return 'fixed z-10 right-[9px] top-[166px] bottom-[8px] p-4 bg-white rounded-xl' return 'absolute z-10 left-4 right-6 top-[52px] bottom-0 pb-4 bg-white' })() - const wrapStyle = isExpand ? { boxShadow: '0px 0px 12px -4px rgba(16, 24, 40, 0.05), 0px -3px 6px -2px rgba(16, 24, 40, 0.03)' } : {} + const wrapStyle = isExpand + ? { + boxShadow: '0px 0px 12px -4px rgba(16, 24, 40, 0.05), 0px -3px 6px -2px rgba(16, 24, 40, 0.03)', + width: panelWidth - 1, + } + : {} return { wrapClassName, wrapStyle, diff --git a/web/app/components/workflow/nodes/_base/panel.tsx b/web/app/components/workflow/nodes/_base/panel.tsx index ecae0c85a1..63e93622a5 100644 --- a/web/app/components/workflow/nodes/_base/panel.tsx +++ b/web/app/components/workflow/nodes/_base/panel.tsx @@ -26,6 +26,7 @@ import { useNodesReadOnly, useNodesSyncDraft, useToolIcon, + useWorkflow, } from '@/app/components/workflow/hooks' import { canRunBySingle } from '@/app/components/workflow/utils' import { Play } from '@/app/components/base/icons/src/vender/line/mediaAndDevices' @@ -42,7 +43,10 @@ const BasePanel: FC = ({ children, }) => { const { t } = useTranslation() - const initPanelWidth = localStorage.getItem('workflow-node-panel-width') || 420 + const panelWidth = localStorage.getItem('workflow-node-panel-width') ? parseFloat(localStorage.getItem('workflow-node-panel-width')!) : 420 + const { + setPanelWidth, + } = useWorkflow() const { handleNodeSelect } = useNodesInteractions() const { handleSyncWorkflowDraft } = useNodesSyncDraft() const { nodesReadOnly } = useNodesReadOnly() @@ -50,9 +54,9 @@ const BasePanel: FC = ({ const availableNextNodes = nodesExtraData[data.type].availableNextNodes const toolIcon = useToolIcon(data) - const handleResized = useCallback((width: number) => { - localStorage.setItem('workflow-node-panel-width', `${width}`) - }, []) + const handleResize = useCallback((width: number) => { + setPanelWidth(width) + }, [setPanelWidth]) const { triggerRef, @@ -62,7 +66,7 @@ const BasePanel: FC = ({ triggerDirection: 'left', minWidth: 420, maxWidth: 720, - onResized: handleResized, + onResize: handleResize, }) const { @@ -88,7 +92,7 @@ const BasePanel: FC = ({ ref={containerRef} className='relative h-full bg-white shadow-lg border-[0.5px] border-gray-200 rounded-2xl overflow-y-auto' style={{ - width: `${initPanelWidth}px`, + width: `${panelWidth}px`, }} >
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx index 705ab82fd7..cb1e3b767c 100644 --- a/web/app/components/workflow/nodes/llm/panel.tsx +++ b/web/app/components/workflow/nodes/llm/panel.tsx @@ -1,8 +1,6 @@ import type { FC } from 'react' -import React, { useMemo } from 'react' -import { useStoreApi } from 'reactflow' +import React from 'react' import { useTranslation } from 'react-i18next' -import { BlockEnum } from '../../types' import MemoryConfig from '../_base/components/memory-config' import VarReferencePicker from '../_base/components/variable/var-reference-picker' import useConfig from './use-config' @@ -29,12 +27,6 @@ const Panel: FC> = ({ data, }) => { const { t } = useTranslation() - const store = useStoreApi() - - const startNode = useMemo(() => { - const nodes = store.getState().getNodes() - return nodes.find(node => node.data.type === BlockEnum.Start) - }, [store]) const { readOnly, diff --git a/web/app/components/workflow/store.ts b/web/app/components/workflow/store.ts index 3701ed1535..9186a610f7 100644 --- a/web/app/components/workflow/store.ts +++ b/web/app/components/workflow/store.ts @@ -21,6 +21,7 @@ import { WorkflowContext } from './context' type Shape = { appId: string + panelWidth: number workflowRunningData?: WorkflowRunningData setWorkflowRunningData: (workflowData: WorkflowRunningData) => void historyWorkflowData?: HistoryWorkflowData @@ -72,6 +73,7 @@ type Shape = { export const createWorkflowStore = () => { return createStore(set => ({ appId: '', + panelWidth: localStorage.getItem('workflow-node-panel-width') ? parseFloat(localStorage.getItem('workflow-node-panel-width')!) : 420, workflowRunningData: undefined, setWorkflowRunningData: workflowRunningData => set(() => ({ workflowRunningData })), historyWorkflowData: undefined,