68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { MessageCircle, Sparkles } from "lucide-react";
|
|
import { useBackendHealth } from "@/hooks/use-backend-health";
|
|
import { cn } from "@/lib/utils";
|
|
import { useAiAgentUiStore } from "@/store/ai-agent-ui";
|
|
|
|
export function BottomToolbar() {
|
|
const status = useBackendHealth();
|
|
const documentAgentAvailable = useAiAgentUiStore((s) => s.documentAgentAvailable);
|
|
const toggleDocumentAgentOpen = useAiAgentUiStore((s) => s.toggleDocumentAgentOpen);
|
|
const indicatorColor =
|
|
status === "ok"
|
|
? "bg-green-500"
|
|
: status === "error"
|
|
? "bg-red-500"
|
|
: "bg-gray-300";
|
|
|
|
return (
|
|
<footer className="flex h-12 items-center justify-between border-t border-[#eeeeee] px-6 text-sm">
|
|
<div className="flex items-center gap-2 text-xs text-gray-500">
|
|
<span className={cn("h-2 w-2 rounded-full", indicatorColor)} />
|
|
后端连接：
|
|
{status === "ok"
|
|
? "正常"
|
|
: status === "disabled"
|
|
? "未配置"
|
|
: status === "error"
|
|
? "异常"
|
|
: "检测中"}
|
|
</div>
|
|
{/* 右侧预留空间，避免被 TanStack Devtools 悬浮按钮遮挡 */}
|
|
<div className="flex items-center gap-3 pr-16 text-gray-600">
|
|
<button type="button" className="wolai-hover rounded-full px-3 py-1">
|
|
<MessageCircle className="mr-1 inline h-4 w-4" />
|
|
发送
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={cn(
|
|
"wolai-hover rounded-full px-3 py-1",
|
|
!documentAgentAvailable && "cursor-not-allowed opacity-50",
|
|
)}
|
|
onClick={() => toggleDocumentAgentOpen()}
|
|
disabled={!documentAgentAvailable}
|
|
title={documentAgentAvailable ? "打开页面 AI" : "仅在页面编辑区可用"}
|
|
>
|
|
<Sparkles className="mr-1 inline h-4 w-4" />
|
|
AI
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={cn(
|
|
"flex h-8 w-8 items-center justify-center rounded-full bg-[#2563eb] text-white shadow-sm",
|
|
!documentAgentAvailable && "cursor-not-allowed opacity-50",
|
|
)}
|
|
onClick={() => toggleDocumentAgentOpen()}
|
|
disabled={!documentAgentAvailable}
|
|
aria-label="打开页面 AI"
|
|
title={documentAgentAvailable ? "打开页面 AI" : "仅在页面编辑区可用"}
|
|
>
|
|
<Sparkles className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|