0.1.13 AI功能大改

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

@@ -1,32 +1,63 @@
 "use client";
 
-import { MessageCircle, Sparkles, Wand2 } from "lucide-react";
+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";
+    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 === "error" ? "异常" : "检测中"}
+        后端连接：
+        {status === "ok"
+          ? "正常"
+          : status === "disabled"
+            ? "未配置"
+            : status === "error"
+              ? "异常"
+              : "检测中"}
       </div>
-      <div className="flex items-center gap-3 text-gray-600">
+      {/* 右侧预留空间，避免被 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="wolai-hover rounded-full px-3 py-1">
-          <Wand2 className="mr-1 inline h-4 w-4" />
-          魔力
+        <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="flex h-8 w-8 items-center justify-center rounded-full bg-[#2563eb] text-white shadow-sm"
+          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>