wlw/ai-agent
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add host actions visibility control in KefuChatShell

Browse Source
This commit is contained in:
mlogclub
2026-04-24 22:40:34 +08:00
parent 1db5c3bf39
commit 14f220619f
2 changed files with 32 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/components/kefu/chat-shell.tsx
+30 -22
View File
@@ -29,6 +29,7 @@ export function KefuChatShell() {
const [isMaximized, setIsMaximized] = useState(false) const [isMaximized, setIsMaximized] = useState(false)
const [isCloseDialogOpen, setIsCloseDialogOpen] = useState(false) const [isCloseDialogOpen, setIsCloseDialogOpen] = useState(false)
const [isClosingConversation, setIsClosingConversation] = useState(false) const [isClosingConversation, setIsClosingConversation] = useState(false)
const [showHostActions, setShowHostActions] = useState(false)
const { const {
title, title,
@@ -95,6 +96,9 @@ export function KefuChatShell() {
useEffect(() => { useEffect(() => {
return bindKefuHostBridge({ return bindKefuHostBridge({
onInit: () => {
setShowHostActions(true)
},
onOpen: () => { onOpen: () => {
setIsOpen(true) setIsOpen(true)
setIsVisible(true) setIsVisible(true)
@@ -214,28 +218,32 @@ export function KefuChatShell() {
> >
<RotateCwIcon className="size-3.75 transition duration-200 group-hover:rotate-[-20deg]" /> <RotateCwIcon className="size-3.75 transition duration-200 group-hover:rotate-[-20deg]" />
</button> </button>
<button {showHostActions ? (
type="button" <button
onClick={handleMinimize} type="button"
aria-label="收起聊天窗口" onClick={handleMinimize}
title="收起聊天窗口" aria-label="收起聊天窗口"
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)]" 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> <MinusIcon className="size-3.75 transition duration-200 group-hover:scale-x-[0.88]" />
<button </button>
type="button" ) : null}
onClick={handleToggleMaximize} {showHostActions ? (
aria-label={isMaximized ? "取消最大化" : "最大化聊天窗口"} <button
title={isMaximized ? "取消最大化" : "最大化聊天窗口"} type="button"
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)]" onClick={handleToggleMaximize}
> aria-label={isMaximized ? "取消最大化" : "最大化聊天窗口"}
{isMaximized ? ( title={isMaximized ? "取消最大化" : "最大化聊天窗口"}
<Minimize2Icon className="size-3.75 transition duration-200 group-hover:scale-[0.94]" /> 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)]"
) : ( >
<Maximize2Icon className="size-3.75 transition duration-200 group-hover:scale-[1.04]" /> {isMaximized ? (
)} <Minimize2Icon className="size-3.75 transition duration-200 group-hover:scale-[0.94]" />
</button> ) : (
<Maximize2Icon className="size-3.75 transition duration-200 group-hover:scale-[1.04]" />
)}
</button>
) : null}
<button <button
type="button" type="button"
onClick={() => setIsCloseDialogOpen(true)} onClick={() => setIsCloseDialogOpen(true)}
web/lib/kefu-host-bridge.ts
+2
View File
@@ -4,6 +4,7 @@ import {
} from "@/lib/kefu-widget-config" } from "@/lib/kefu-widget-config"
type HostBridgeOptions = { type HostBridgeOptions = {
onInit?: () => void
onOpen?: () => void onOpen?: () => void
onMinimize?: () => void onMinimize?: () => void
onMaximizedChange?: (isMaximized: boolean) => void onMaximizedChange?: (isMaximized: boolean) => void
@@ -40,6 +41,7 @@ export function bindKefuHostBridge(options: HostBridgeOptions = {}) {
if (data.type === INIT_MESSAGE_TYPE && data.payload) { if (data.type === INIT_MESSAGE_TYPE && data.payload) {
setKefuWidgetConfig(data.payload as KefuWidgetHostConfig) setKefuWidgetConfig(data.payload as KefuWidgetHostConfig)
options.onInit?.()
return return
} }