mnote/wolai-frontend/src/components/bottom-toolbar.tsx

"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>
  );
}