page-assist/src/components/Layouts/Header.tsx

import React, { useContext } from "react"
import { HistoryContext } from "@/components/Layouts/Layout.tsx"
import { PanelLeftIcon } from "lucide-react"
import { Button } from "antd"
import { PlusOutlined } from "@ant-design/icons"
import { useMessageOption } from "@/hooks/useMessageOption.tsx"
import { useTranslation } from "react-i18next"

export const Header = () => {
  const { show, setShow } = useContext(HistoryContext)

  const { t } = useTranslation(["option", "common", "settings"])

  const { clearChat } = useMessageOption()
  return (
    <div
      className={`w-full h-[60px] absolute inset-0 pl-5 z-10 flex items-center transition-all duration-300 ease-in-out ${show ? "left-[300px]" : ""}`}>
      {/*控制侧边栏显示隐藏与新建对话*/}
      {!show && (
        <div className="flex items-center gap-3">
          <button
            className="text-gray-500 dark:text-gray-400"
            onClick={() => {
              setShow(!show)
            }}>
            <PanelLeftIcon className="w-6 h-6" />
          </button>
          <Button
            color="cyan"
            variant="filled"
            shape="round"
            style={{
              color: "#0057ff",
              background: "#0057ff0f",
              border: "1px solid #0066ff26"
            }}
            onClick={clearChat}>
            <div className="flex items-center justify-between w-full">
              <div className="flex items-center">
                <PlusOutlined
                  className="text-sm"
                  style={{ fontSize: "16px", fontWeight: 500 }}
                />
                <span>{t("newChat")}</span>
              </div>
            </div>
          </Button>
        </div>
      )}
      {/* 项目标题 */}
      <div
        className={`
       absolute left-1/2 transform -translate-x-1/2
       w-[600px] h-[55px] bg-white dark:bg-black
       flex items-center justify-center
       shadow-[0px_0px_5px_rgba(0,0,0,0.2)]
       rounded-b-[15px]
       transition-[top]
       ${show ? "-top-[56px]" : "-top-[1px] delay-200"}
      `}>
        <h2 className="text-xl font-bold text-zinc-700 dark:text-zinc-300 mr-3">
          <span className="text-[#d30100]">数联网</span>科创智能体
        </h2>
      </div>
    </div>
  )
}