From 14f220619fd67911520c41e7c5de4d0e14f72ff3 Mon Sep 17 00:00:00 2001
From: mlogclub <mlog1@qq.com>
Date: Fri, 24 Apr 2026 22:40:34 +0800
Subject: [PATCH] feat: add host actions visibility control in KefuChatShell

---
 web/components/kefu/chat-shell.tsx | 52 +++++++++++++++++-------------
 web/lib/kefu-host-bridge.ts        |  2 ++
 2 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/web/components/kefu/chat-shell.tsx b/web/components/kefu/chat-shell.tsx
index 8183fcb..c6c3327 100644
--- a/web/components/kefu/chat-shell.tsx
+++ b/web/components/kefu/chat-shell.tsx
@@ -29,6 +29,7 @@ export function KefuChatShell() {
   const [isMaximized, setIsMaximized] = useState(false)
   const [isCloseDialogOpen, setIsCloseDialogOpen] = useState(false)
   const [isClosingConversation, setIsClosingConversation] = useState(false)
+  const [showHostActions, setShowHostActions] = useState(false)
 
   const {
     title,
@@ -95,6 +96,9 @@ export function KefuChatShell() {
 
   useEffect(() => {
     return bindKefuHostBridge({
+      onInit: () => {
+        setShowHostActions(true)
+      },
       onOpen: () => {
         setIsOpen(true)
         setIsVisible(true)
@@ -214,28 +218,32 @@ export function KefuChatShell() {
                 >
                   <RotateCwIcon className="size-3.75 transition duration-200 group-hover:rotate-[-20deg]" />
                 </button>
-                <button
-                  type="button"
-                  onClick={handleMinimize}
-                  aria-label="收起聊天窗口"
-                  title="收起聊天窗口"
-                  className="group inline-flex h-6 w-6 items-center justify-center rounded-[14px] text-slate-400 transition duration-200 hover:-translate-y-0.5 hover:bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(248,250,252,0.96))] hover:text-slate-700 hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.95),0_10px_18px_rgba(15,23,42,0.10)]"
-                >
-                  <MinusIcon className="size-3.75 transition duration-200 group-hover:scale-x-[0.88]" />
-                </button>
-                <button
-                  type="button"
-                  onClick={handleToggleMaximize}
-                  aria-label={isMaximized ? "取消最大化" : "最大化聊天窗口"}
-                  title={isMaximized ? "取消最大化" : "最大化聊天窗口"}
-                  className="group inline-flex h-6 w-6 items-center justify-center rounded-[14px] text-slate-400 transition duration-200 hover:-translate-y-0.5 hover:bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(238,249,244,0.96))] hover:text-emerald-700 hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.95),0_10px_18px_rgba(16,185,129,0.14)]"
-                >
-                  {isMaximized ? (
-                    <Minimize2Icon className="size-3.75 transition duration-200 group-hover:scale-[0.94]" />
-                  ) : (
-                    <Maximize2Icon className="size-3.75 transition duration-200 group-hover:scale-[1.04]" />
-                  )}
-                </button>
+                {showHostActions ? (
+                  <button
+                    type="button"
+                    onClick={handleMinimize}
+                    aria-label="收起聊天窗口"
+                    title="收起聊天窗口"
+                    className="group inline-flex h-6 w-6 items-center justify-center rounded-[14px] text-slate-400 transition duration-200 hover:-translate-y-0.5 hover:bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(248,250,252,0.96))] hover:text-slate-700 hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.95),0_10px_18px_rgba(15,23,42,0.10)]"
+                  >
+                    <MinusIcon className="size-3.75 transition duration-200 group-hover:scale-x-[0.88]" />
+                  </button>
+                ) : null}
+                {showHostActions ? (
+                  <button
+                    type="button"
+                    onClick={handleToggleMaximize}
+                    aria-label={isMaximized ? "取消最大化" : "最大化聊天窗口"}
+                    title={isMaximized ? "取消最大化" : "最大化聊天窗口"}
+                    className="group inline-flex h-6 w-6 items-center justify-center rounded-[14px] text-slate-400 transition duration-200 hover:-translate-y-0.5 hover:bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(238,249,244,0.96))] hover:text-emerald-700 hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.95),0_10px_18px_rgba(16,185,129,0.14)]"
+                  >
+                    {isMaximized ? (
+                      <Minimize2Icon className="size-3.75 transition duration-200 group-hover:scale-[0.94]" />
+                    ) : (
+                      <Maximize2Icon className="size-3.75 transition duration-200 group-hover:scale-[1.04]" />
+                    )}
+                  </button>
+                ) : null}
                 <button
                   type="button"
                   onClick={() => setIsCloseDialogOpen(true)}
diff --git a/web/lib/kefu-host-bridge.ts b/web/lib/kefu-host-bridge.ts
index 9586371..f7b7b78 100644
--- a/web/lib/kefu-host-bridge.ts
+++ b/web/lib/kefu-host-bridge.ts
@@ -4,6 +4,7 @@ import {
 } from "@/lib/kefu-widget-config"
 
 type HostBridgeOptions = {
+  onInit?: () => void
   onOpen?: () => void
   onMinimize?: () => void
   onMaximizedChange?: (isMaximized: boolean) => void
@@ -40,6 +41,7 @@ export function bindKefuHostBridge(options: HostBridgeOptions = {}) {
 
     if (data.type === INIT_MESSAGE_TYPE && data.payload) {
       setKefuWidgetConfig(data.payload as KefuWidgetHostConfig)
+      options.onInit?.()
       return
     }