104 lines
3.4 KiB
TypeScript
104 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { useEffect } from "react";
|
|
import { useBoolean, fetch } from "@/utils";
|
|
|
|
import { CloseIcon, CloudIcon, CogneeIcon } from "../Icons";
|
|
import { CTAButton, GhostButton, IconButton, Modal, StatusDot } from "../elements";
|
|
import syncData from "@/modules/cloud/syncData";
|
|
|
|
interface HeaderProps {
|
|
user?: {
|
|
name: string;
|
|
email: string;
|
|
picture: string;
|
|
};
|
|
}
|
|
|
|
export default function Header({ user }: HeaderProps) {
|
|
const {
|
|
value: isSyncModalOpen,
|
|
setTrue: openSyncModal,
|
|
setFalse: closeSyncModal,
|
|
} = useBoolean(false);
|
|
|
|
const {
|
|
value: isMCPConnected,
|
|
setTrue: setMCPConnected,
|
|
setFalse: setMCPDisconnected,
|
|
} = useBoolean(false);
|
|
|
|
const handleDataSyncConfirm = () => {
|
|
syncData()
|
|
.finally(() => {
|
|
closeSyncModal();
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
const checkMCPConnection = () => {
|
|
fetch.checkMCPHealth()
|
|
.then(() => setMCPConnected())
|
|
.catch(() => setMCPDisconnected());
|
|
};
|
|
|
|
checkMCPConnection();
|
|
const interval = setInterval(checkMCPConnection, 30000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, [setMCPConnected, setMCPDisconnected]);
|
|
|
|
return (
|
|
<>
|
|
<header className="relative flex flex-row h-14 min-h-14 px-5 items-center justify-between w-full max-w-[1920px] mx-auto">
|
|
<div className="flex flex-row gap-4 items-center">
|
|
<CogneeIcon />
|
|
<div className="text-lg">Cognee Local</div>
|
|
</div>
|
|
|
|
<div className="flex flex-row items-center gap-2.5">
|
|
<Link href="/mcp-status" className="!text-indigo-600 pl-4 pr-4">
|
|
<StatusDot className="mr-2" isActive={isMCPConnected} />
|
|
{ isMCPConnected ? "MCP connected" : "MCP disconnected" }
|
|
</Link>
|
|
<GhostButton onClick={openSyncModal} className="text-indigo-600 gap-3 pl-4 pr-4">
|
|
<CloudIcon />
|
|
<div>Sync</div>
|
|
</GhostButton>
|
|
<a href="/plan" className="!text-indigo-600 pl-4 pr-4">
|
|
Premium
|
|
</a>
|
|
<a href="https://platform.cognee.ai" className="!text-indigo-600 pl-4 pr-4">API keys</a>
|
|
{/* <div className="px-2 py-2 mr-3">
|
|
<SettingsIcon />
|
|
</div> */}
|
|
<Link href="/account" className="bg-indigo-600 w-8 h-8 rounded-full overflow-hidden">
|
|
{user?.picture ? (
|
|
<Image width="32" height="32" alt="Name of the user" src={user.picture} />
|
|
) : (
|
|
<div className="w-8 h-8 rounded-full text-white flex items-center justify-center">
|
|
{user?.email?.charAt(0) || "C"}
|
|
</div>
|
|
)}
|
|
</Link>
|
|
</div>
|
|
</header>
|
|
|
|
<Modal isOpen={isSyncModalOpen}>
|
|
<div className="w-full max-w-2xl">
|
|
<div className="flex flex-row items-center justify-between">
|
|
<span className="text-2xl">Sync local datasets with cloud datasets?</span>
|
|
<IconButton onClick={closeSyncModal}><CloseIcon /></IconButton>
|
|
</div>
|
|
<div className="mt-8 mb-6">Are you sure you want to sync local datasets to cloud?</div>
|
|
<div className="flex flex-row gap-4 mt-4 justify-end">
|
|
<GhostButton type="button" onClick={closeSyncModal}>cancel</GhostButton>
|
|
<CTAButton onClick={handleDataSyncConfirm} type="submit">confirm</CTAButton>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|