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

refactor KefuChatShell button layout to use ButtonGroup and update styles for better consistency

Browse Source
This commit is contained in:
mlogclub
2026-04-27 14:31:16 +08:00
parent 1e2a0c43d8
commit b4e26d2359
1 changed files with 20 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/components/kefu/chat-shell.tsx
+20 -19
View File
@@ -31,6 +31,7 @@ import {
} from "@/lib/kefu-host-bridge" } from "@/lib/kefu-host-bridge"
import { useKefuChatStore } from "@/lib/stores/kefu-chat" import { useKefuChatStore } from "@/lib/stores/kefu-chat"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@@ -252,60 +253,60 @@ export function KefuChatShell() {
{status !== "connected" ? ( {status !== "connected" ? (
<KefuConnectionStatus status={status} /> <KefuConnectionStatus status={status} />
) : null} ) : null}
<div className="inline-flex items-center gap-1 rounded-lg border border-border bg-muted/60 p-1"> <ButtonGroup>
<Button <Button
type="button" type="button"
variant="ghost" variant="outline"
size="icon-xs" size="icon-sm"
onClick={retry} onClick={retry}
aria-label="重新连接" aria-label="重新连接"
title="重新连接" title="重新连接"
className="text-muted-foreground hover:bg-background hover:text-sky-600 dark:hover:text-sky-400" className="bg-background text-muted-foreground hover:text-sky-600 dark:hover:text-sky-400"
> >
<RotateCwIcon /> <RotateCwIcon className="size-4" />
</Button> </Button>
{showHostActions ? ( {showHostActions ? (
<Button <Button
type="button" type="button"
variant="ghost" variant="outline"
size="icon-xs" size="icon-sm"
onClick={handleMinimize} onClick={handleMinimize}
aria-label="收起聊天窗口" aria-label="收起聊天窗口"
title="收起聊天窗口" title="收起聊天窗口"
className="text-muted-foreground hover:bg-background hover:text-foreground" className="bg-background text-muted-foreground hover:text-foreground"
> >
<MinusIcon /> <MinusIcon className="size-4" />
</Button> </Button>
) : null} ) : null}
{showHostActions ? ( {showHostActions ? (
<Button <Button
type="button" type="button"
variant="ghost" variant="outline"
size="icon-xs" size="icon-sm"
onClick={handleToggleMaximize} onClick={handleToggleMaximize}
aria-label={isMaximized ? "取消最大化" : "最大化聊天窗口"} aria-label={isMaximized ? "取消最大化" : "最大化聊天窗口"}
title={isMaximized ? "取消最大化" : "最大化聊天窗口"} title={isMaximized ? "取消最大化" : "最大化聊天窗口"}
className="text-muted-foreground hover:bg-background hover:text-emerald-700 dark:hover:text-emerald-400" className="bg-background text-muted-foreground hover:text-emerald-700 dark:hover:text-emerald-400"
> >
{isMaximized ? ( {isMaximized ? (
<Minimize2Icon /> <Minimize2Icon className="size-4" />
) : ( ) : (
<Maximize2Icon /> <Maximize2Icon className="size-4" />
)} )}
</Button> </Button>
) : null} ) : null}
<Button <Button
type="button" type="button"
variant="ghost" variant="outline"
size="icon-xs" size="icon-sm"
onClick={() => setIsCloseDialogOpen(true)} onClick={() => setIsCloseDialogOpen(true)}
aria-label="关闭聊天窗口" aria-label="关闭聊天窗口"
title="关闭聊天窗口" title="关闭聊天窗口"
className="text-rose-500 hover:bg-rose-50 hover:text-rose-600 dark:hover:bg-rose-950/40 dark:hover:text-rose-300" className="bg-background text-rose-500 hover:bg-rose-50 hover:text-rose-600 dark:hover:bg-rose-950/40 dark:hover:text-rose-300"
> >
<XIcon /> <XIcon className="size-4" />
</Button> </Button>
</div> </ButtonGroup>
</div> </div>
</div> </div>
</header> </header>