diff --git a/src/components/Header.tsx b/src/components/Header.tsx index a4349f30..a3c11fc1 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,6 +1,6 @@ "use client"; -import { useState, useMemo, useCallback, useEffect, type ReactNode } from "react"; +import { useState, useMemo, useCallback, useEffect, useRef, type ReactNode } from "react"; import Link from "next/link"; import { useSearchParams } from "next/navigation"; import { @@ -16,6 +16,7 @@ import { CostIndicator } from "./CostIndicator"; import { useI18n } from "@/i18n"; import { buildSerializedWorkflow } from "@/store/utils/workflowSerialization"; import { HeaderUserMenu } from "@/components/auth/HeaderUserMenu"; +import { useCommitOnOutsidePointerDown } from "@/hooks/useCommitOnOutsidePointerDown"; const SHOW_UNUSED_HEADER_ACTIONS = false; @@ -123,6 +124,9 @@ export function Header() { const [showSettingsModal, setShowSettingsModal] = useState(false); const [workflowNameDraft, setWorkflowNameDraft] = useState(workflowName || ""); + const [isEditingWorkflowName, setIsEditingWorkflowName] = useState(false); + const workflowNameEditorRef = useRef(null); + const lastCommittedWorkflowNameDraftRef = useRef(null); const currentCanvasWorkflowDescription = useCanvasWorkflowStore((state) => state.currentCanvasWorkflowDescription); const setCurrentCanvasWorkflow = useCanvasWorkflowStore((state) => state.setCurrentCanvasWorkflow); @@ -159,12 +163,20 @@ export function Header() { const commitWorkflowName = useCallback(() => { const nextName = workflowNameDraft.trim(); + if (lastCommittedWorkflowNameDraftRef.current === nextName) { + setIsEditingWorkflowName(false); + return; + } + lastCommittedWorkflowNameDraftRef.current = nextName; + if (!nextName || nextName === workflowName) { setWorkflowNameDraft(workflowName || ""); + setIsEditingWorkflowName(false); return; } setWorkflowName(nextName); + setIsEditingWorkflowName(false); if (urlWorkflowId) { setCurrentCanvasWorkflow({ title: nextName, @@ -180,6 +192,12 @@ export function Header() { setCurrentCanvasWorkflow, ]); + useCommitOnOutsidePointerDown({ + active: isEditingWorkflowName, + rootRef: workflowNameEditorRef, + onCommit: commitWorkflowName, + }); + const handleRevertAIChanges = useCallback(() => { const confirmed = window.confirm( t("header.revertConfirm") @@ -205,7 +223,7 @@ export function Header() {
-
+