From f78196d7e051c6bff88959abf03692c40b52cd1c Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Sat, 12 Apr 2025 10:53:32 +0800
Subject: [PATCH] feat(components): add bot visibility toggle component

- Added a toggle to control the visibility of the bot panel
- Implemented loading state with Skeleton component
- Integrated with dockview store to manage panel visibility
- Added tooltip to indicate bot's current state (Open/Close)
---
 src/components/bot-visibility-toggle.tsx | 78 ++++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 src/components/bot-visibility-toggle.tsx

diff --git a/src/components/bot-visibility-toggle.tsx b/src/components/bot-visibility-toggle.tsx
new file mode 100644
index 0000000..49f0887
--- /dev/null
+++ b/src/components/bot-visibility-toggle.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { BotIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Toggle } from "@/components/ui/toggle";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useDockviewStore } from "@/stores/dockview";
+import { DefaultDockviewOptions } from "@/config/dockview";
+
+export default function BotVisibilityToggle() {
+  const { api } = useDockviewStore();
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isBotVisible, setBotVisible] = useState<boolean>(false);
+
+  const botOption = DefaultDockviewOptions.find(
+    (option) => option.id === "Bot"
+  );
+
+  useEffect(() => {
+    if (api) {
+      const panel = api.getPanel("Bot");
+      setBotVisible(!!panel);
+      setIsLoading(false);
+    }
+  }, [api]);
+
+  const handleBotToggle = (newState: boolean) => {
+    setBotVisible(newState);
+    if (!api) return;
+
+    const panel = api.getPanel("Bot");
+
+    if (newState) {
+      if (panel) {
+        panel.api.setActive();
+      } else if (botOption) {
+        api.addPanel(botOption).api.setActive();
+      }
+    } else {
+      if (panel) {
+        api.removePanel(panel);
+      }
+    }
+  };
+
+  return (
+    <TooltipProvider delayDuration={0}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div>
+            {isLoading ? (
+              <Skeleton className="h-8 w-8 rounded-lg" />
+            ) : (
+              <Toggle
+                aria-label="Toggle bot"
+                pressed={isBotVisible}
+                onPressedChange={handleBotToggle}
+                size="sm"
+                className="rounded-lg"
+              >
+                <BotIcon size={16} aria-hidden="true" />
+              </Toggle>
+            )}
+          </div>
+        </TooltipTrigger>
+        <TooltipContent className="px-2 py-1 text-xs">
+          <p>{isBotVisible ? "Close Bot" : "Open Bot"}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}