diff --git a/web/app/dashboard/ai-workflows/_components/workflow-config-sidebar.tsx b/web/app/dashboard/ai-workflows/_components/workflow-config-sidebar.tsx index f8845f9..23e1903 100644 --- a/web/app/dashboard/ai-workflows/_components/workflow-config-sidebar.tsx +++ b/web/app/dashboard/ai-workflows/_components/workflow-config-sidebar.tsx @@ -1,5 +1,6 @@ "use client" +import { useState, type PointerEvent as ReactPointerEvent } from "react" import { XIcon } from "lucide-react" import { Button } from "@/components/ui/button" @@ -15,6 +16,10 @@ import { type WorkflowNodeData, } from "./workflow-utils" +const PANEL_DEFAULT_WIDTH = 380 +const PANEL_MIN_WIDTH = 320 +const PANEL_MAX_WIDTH = 560 + export function WorkflowConfigPanel({ definition, nodeSpecs, @@ -34,6 +39,7 @@ export function WorkflowConfigPanel({ onChangeNodeData: (nodeId: string, data: WorkflowNodeData) => void onDeleteNode: (nodeId: string) => void }) { + const [panelWidth, setPanelWidth] = useState(PANEL_DEFAULT_WIDTH) const selectedNode = definition.nodes.find((node) => node.id === selectedNodeId) ?? null const selectedNodeSpec = selectedNode ? nodeSpecs.find((spec) => spec.type === selectedNode.type) @@ -87,9 +93,37 @@ export function WorkflowConfigPanel({ title, }) } + const startResize = (event: ReactPointerEvent) => { + event.preventDefault() + const startX = event.clientX + const startWidth = panelWidth + const maxWidth = Math.max(PANEL_MIN_WIDTH, Math.min(PANEL_MAX_WIDTH, window.innerWidth - 320)) + + const resize = (moveEvent: PointerEvent) => { + const nextWidth = startWidth + startX - moveEvent.clientX + setPanelWidth(Math.min(Math.max(nextWidth, PANEL_MIN_WIDTH), maxWidth)) + } + const stopResize = () => { + window.removeEventListener("pointermove", resize) + window.removeEventListener("pointerup", stopResize) + } + + window.addEventListener("pointermove", resize) + window.addEventListener("pointerup", stopResize) + } return ( -
+
+