admin/infinite-canvas
1
0
Fork 0
mirror of https://github.com/basketikun/infinite-canvas.git synced 2026-08-05 17:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(agent): implement global Agent panel with site navigation and interrupt functionality

Browse Source
This commit is contained in:
HouYunFei
2026-07-09 16:19:32 +08:00
parent 387d8be961
commit 7b347729ec
17 changed files with 319 additions and 1588 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/layout/app-top-nav.tsx
+15 -10
View File
@@ -1,4 +1,4 @@
import { Menu } from "lucide-react";
import { Bot, Menu } from "lucide-react";
import { Button, Tooltip } from "antd";
import { Link, useLocation } from "react-router-dom";
@@ -8,17 +8,19 @@ import { MobileNavDrawer } from "@/components/layout/mobile-nav-drawer";
import { UserStatusActions } from "@/components/layout/user-status-actions";
import { cn } from "@/lib/utils";
import { useEffect, useRef, useState } from "react";
import { useCanvasAgentStore } from "@/stores/canvas/use-canvas-agent-store";
import { useAgentStore } from "@/stores/use-agent-store";
import { useConfigStore } from "@/stores/use-config-store";
export function AppTopNav() {
const { pathname } = useLocation();
const [mobileNavOpen, setMobileNavOpen] = useState(false);
const autoConnectRef = useRef(false);
const agentToken = useCanvasAgentStore((state) => state.token);
const agentEnabled = useCanvasAgentStore((state) => state.enabled);
const agentConnected = useCanvasAgentStore((state) => state.connected);
const connectAgent = useCanvasAgentStore((state) => state.connectAgent);
const agentToken = useAgentStore((state) => state.token);
const agentEnabled = useAgentStore((state) => state.enabled);
const agentConnected = useAgentStore((state) => state.connected);
const connectAgent = useAgentStore((state) => state.connectAgent);
const togglePanel = useAgentStore((state) => state.togglePanel);
const panelOpen = useAgentStore((state) => state.panelOpen);
const hideHeader = /^\/canvas\/[^/]+/.test(pathname);
const slug = pathname.split("/").filter(Boolean)[0];
const activeToolSlug = navigationTools.some((tool) => tool.slug === slug) ? (slug as NavigationToolSlug) : undefined;
@@ -81,6 +83,9 @@ export function AppTopNav() {
<div className="my-auto flex h-9 min-w-0 items-center justify-end gap-2 justify-self-end whitespace-nowrap">
<CodexStatusButton />
<Tooltip title={panelOpen ? "收起 Agent" : "打开 Agent"}>
<Button type="text" shape="circle" className="!h-8 !w-8 !min-w-8" icon={<Bot className="size-4" />} onClick={togglePanel} aria-label="打开 Agent" />
</Tooltip>
<UserStatusActions />
</div>
</div>
@@ -94,10 +99,10 @@ export function AppTopNav() {
}
function CodexStatusButton() {
const connected = useCanvasAgentStore((state) => state.connected);
const enabled = useCanvasAgentStore((state) => state.enabled);
const activity = useCanvasAgentStore((state) => state.activity);
const connectError = useCanvasAgentStore((state) => state.connectError);
const connected = useAgentStore((state) => state.connected);
const enabled = useAgentStore((state) => state.enabled);
const activity = useAgentStore((state) => state.activity);
const connectError = useAgentStore((state) => state.connectError);
const openConfigDialog = useConfigStore((state) => state.openConfigDialog);
const color = connectError ? "#dc2626" : connected ? "#16a34a" : enabled ? "#d97706" : "currentColor";
const title = connectError || (connected ? activity || "Codex 已连接" : enabled ? "Codex 连接中" : "Codex 未连接");