Function Header

src/renderer/src/components/editors/ChatEditor/Header.tsx:14–133

({ page, onGenerate }: HeaderProps)

}

export function Header({ page, onGenerate }: HeaderProps): React.JSX.Element {
  const [isEditing, setIsEditing] = useState(false)
  const [editValue, setEditValue] = useState(page.name)
  const [popoverOpen, setPopoverOpen] = useState(false)
  const inputRef = useRef<InputRef>(null)

  // 同步外部 name 变化
  useEffect(() => {
    if (!isEditing) {
      setEditValue(page.name)
    }
  }, [page.name, isEditing])

  // 进入编辑模式时聚焦输入框
  useEffect(() => {
    if (isEditing) {
      inputRef.current?.focus()
      inputRef.current?.select()
    }
  }, [isEditing])

  const handleEdit = useCallback(() => {
    setEditValue(page.name)
    setIsEditing(true)
  }, [page.name])

  const handleSave = useCallback(async () => {
    const trimmed = editValue.trim()
    if (trimmed && trimmed !== page.name) {
      await updatePage(page.id, { name: trimmed })
    }
    setIsEditing(false)
  }, [editValue, page.id, page.name])

  const handleCancel = useCallback(() => {
    setEditValue(page.name)
    setIsEditing(false)
  }, [page.name])

  const handleKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (e.key === 'Enter') {
        handleSave()
      } else if (e.key === 'Escape') {
        handleCancel()
      }
    },
    [handleSave, handleCancel]
  )

  const handleAIGenerate = useCallback(
    async (options: GenerateOptions) => {
      if (onGenerate) {
        await onGenerate(options)
      }
      setIsEditing(false)
    },
    [onGenerate]