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

refactor: update styling for chat components to enhance visual consistency and accessibility

Browse Source
This commit is contained in:
mlogclub
2026-04-25 11:31:16 +08:00
parent 4da7e168fa
commit 9d9c83a72c
4 changed files with 67 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/components/kefu/chat-shell.tsx
+49 -13
View File
@@ -7,7 +7,14 @@ import {
RotateCwIcon, RotateCwIcon,
XIcon, XIcon,
} from "lucide-react" } from "lucide-react"
import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react" import {
useCallback,
useEffect,
useLayoutEffect,
useRef,
useState,
type CSSProperties,
} from "react"
import { useShallow } from "zustand/react/shallow" import { useShallow } from "zustand/react/shallow"
import { KefuConnectionStatus } from "@/components/kefu/connection-status" import { KefuConnectionStatus } from "@/components/kefu/connection-status"
@@ -33,7 +40,36 @@ import {
DialogTitle, DialogTitle,
} from "@/components/ui/dialog" } from "@/components/ui/dialog"
function useKefuSystemTheme() {
useLayoutEffect(() => {
if (typeof window === "undefined") {
return
}
const root = document.documentElement
const query = window.matchMedia("(prefers-color-scheme: dark)")
const previousDarkClass = root.classList.contains("dark")
const previousColorScheme = root.style.colorScheme
const syncTheme = () => {
const isDark = query.matches
root.classList.toggle("dark", isDark)
root.style.colorScheme = isDark ? "dark" : "light"
}
syncTheme()
query.addEventListener("change", syncTheme)
return () => {
query.removeEventListener("change", syncTheme)
root.classList.toggle("dark", previousDarkClass)
root.style.colorScheme = previousColorScheme
}
}, [])
}
export function KefuChatShell() { export function KefuChatShell() {
useKefuSystemTheme()
const messageListRef = useRef<KefuMessageListHandle | null>(null) const messageListRef = useRef<KefuMessageListHandle | null>(null)
const [isMaximized, setIsMaximized] = useState(false) const [isMaximized, setIsMaximized] = useState(false)
const [isCloseDialogOpen, setIsCloseDialogOpen] = useState(false) const [isCloseDialogOpen, setIsCloseDialogOpen] = useState(false)
@@ -200,23 +236,23 @@ export function KefuChatShell() {
return ( return (
<main <main
className="relative flex h-screen overflow-hidden bg-[#f6f8fb] text-slate-950" className="relative flex h-screen overflow-hidden bg-muted text-foreground"
style={{ "--primary": themeColor } as CSSProperties} style={{ "--primary": themeColor } as CSSProperties}
> >
<section className="flex h-full w-full flex-col overflow-hidden border border-slate-200/70 bg-white"> <section className="flex h-full w-full flex-col overflow-hidden border border-border bg-card text-card-foreground">
<header className="shrink-0 border-b border-slate-200/70 bg-white/95 px-4 py-3 shadow-[0_8px_24px_rgba(15,23,42,0.04)]"> <header className="shrink-0 border-b border-border bg-card/95 px-4 py-3 shadow-[0_8px_24px_rgba(15,23,42,0.04)] dark:shadow-none">
<div className="flex items-center justify-between gap-3"> <div className="flex items-center justify-between gap-3">
<div className="min-w-0"> <div className="min-w-0">
<div className="truncate text-base font-semibold text-slate-950"> <div className="truncate text-base font-semibold text-foreground">
{title} {title}
</div> </div>
<div className="mt-1 truncate text-xs text-slate-500">{subtitle}</div> <div className="mt-1 truncate text-xs text-muted-foreground">{subtitle}</div>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{status !== "connected" ? ( {status !== "connected" ? (
<KefuConnectionStatus status={status} /> <KefuConnectionStatus status={status} />
) : null} ) : null}
<div className="inline-flex items-center gap-1 rounded-lg border border-slate-200 bg-slate-50 p-1"> <div className="inline-flex items-center gap-1 rounded-lg border border-border bg-muted/60 p-1">
<Button <Button
type="button" type="button"
variant="ghost" variant="ghost"
@@ -224,7 +260,7 @@ export function KefuChatShell() {
onClick={retry} onClick={retry}
aria-label="重新连接" aria-label="重新连接"
title="重新连接" title="重新连接"
className="text-slate-500 hover:bg-white hover:text-sky-600" className="text-muted-foreground hover:bg-background hover:text-sky-600 dark:hover:text-sky-400"
> >
<RotateCwIcon /> <RotateCwIcon />
</Button> </Button>
@@ -236,7 +272,7 @@ export function KefuChatShell() {
onClick={handleMinimize} onClick={handleMinimize}
aria-label="收起聊天窗口" aria-label="收起聊天窗口"
title="收起聊天窗口" title="收起聊天窗口"
className="text-slate-500 hover:bg-white hover:text-slate-800" className="text-muted-foreground hover:bg-background hover:text-foreground"
> >
<MinusIcon /> <MinusIcon />
</Button> </Button>
@@ -249,7 +285,7 @@ export function KefuChatShell() {
onClick={handleToggleMaximize} onClick={handleToggleMaximize}
aria-label={isMaximized ? "取消最大化" : "最大化聊天窗口"} aria-label={isMaximized ? "取消最大化" : "最大化聊天窗口"}
title={isMaximized ? "取消最大化" : "最大化聊天窗口"} title={isMaximized ? "取消最大化" : "最大化聊天窗口"}
className="text-slate-500 hover:bg-white hover:text-emerald-700" className="text-muted-foreground hover:bg-background hover:text-emerald-700 dark:hover:text-emerald-400"
> >
{isMaximized ? ( {isMaximized ? (
<Minimize2Icon /> <Minimize2Icon />
@@ -265,7 +301,7 @@ export function KefuChatShell() {
onClick={() => setIsCloseDialogOpen(true)} onClick={() => setIsCloseDialogOpen(true)}
aria-label="关闭聊天窗口" aria-label="关闭聊天窗口"
title="关闭聊天窗口" title="关闭聊天窗口"
className="text-rose-500 hover:bg-rose-50 hover:text-rose-600" className="text-rose-500 hover:bg-rose-50 hover:text-rose-600 dark:hover:bg-rose-950/40 dark:hover:text-rose-300"
> >
<XIcon /> <XIcon />
</Button> </Button>
@@ -274,7 +310,7 @@ export function KefuChatShell() {
</div> </div>
</header> </header>
<div className="grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)_auto] overflow-hidden bg-[#f6f8fb]"> <div className="grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)_auto] overflow-hidden bg-muted/70">
<KefuMessageList <KefuMessageList
ref={messageListRef} ref={messageListRef}
messages={safeMessages} messages={safeMessages}
@@ -292,7 +328,7 @@ export function KefuChatShell() {
</div> </div>
{error ? ( {error ? (
<div className="border-t border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700"> <div className="border-t border-destructive/20 bg-destructive/10 px-4 py-3 text-sm text-destructive">
{error} {error}
</div> </div>
) : null} ) : null}
web/components/kefu/connection-status.tsx
+4 -4
View File
@@ -16,10 +16,10 @@ const statusText: Record<KefuConnectionStatusProps["status"], string> = {
export function KefuConnectionStatus({ status }: KefuConnectionStatusProps) { export function KefuConnectionStatus({ status }: KefuConnectionStatusProps) {
const toneClass = const toneClass =
status === "connected" status === "connected"
? "border-emerald-200 bg-emerald-50 text-emerald-700" ? "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900/70 dark:bg-emerald-950/50 dark:text-emerald-300"
: status === "connecting" : status === "connecting"
? "border-amber-200 bg-amber-50 text-amber-700" ? "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900/70 dark:bg-amber-950/50 dark:text-amber-300"
: "border-slate-200 bg-slate-100 text-slate-600" : "border-border bg-muted text-muted-foreground"
return ( return (
<Badge <Badge
@@ -33,7 +33,7 @@ export function KefuConnectionStatus({ status }: KefuConnectionStatusProps) {
? "bg-emerald-500 shadow-[0_0_0_4px_rgba(16,185,129,0.14)]" ? "bg-emerald-500 shadow-[0_0_0_4px_rgba(16,185,129,0.14)]"
: status === "connecting" : status === "connecting"
? "bg-amber-500 shadow-[0_0_0_4px_rgba(245,158,11,0.16)]" ? "bg-amber-500 shadow-[0_0_0_4px_rgba(245,158,11,0.16)]"
: "bg-slate-400 shadow-[0_0_0_4px_rgba(148,163,184,0.14)]" : "bg-muted-foreground shadow-[0_0_0_4px_rgba(148,163,184,0.14)]"
)} )}
/> />
<span>{statusText[status]}</span> <span>{statusText[status]}</span>
web/components/kefu/message-editor.tsx
+6 -6
View File
@@ -100,7 +100,7 @@ export function KefuMessageEditor({
editorProps: { editorProps: {
attributes: { attributes: {
class: class:
"min-h-12 max-h-40 overflow-y-auto px-1.5 py-1 text-sm leading-6 text-slate-900 outline-none [&_p]:m-0 [&_p+*]:mt-2 [&_img]:my-2 [&_img]:max-h-64 [&_img]:rounded-lg [&_img]:object-contain", "min-h-12 max-h-40 overflow-y-auto px-1.5 py-1 text-sm leading-6 text-foreground outline-none [&_p]:m-0 [&_p+*]:mt-2 [&_img]:my-2 [&_img]:max-h-64 [&_img]:rounded-lg [&_img]:object-contain",
}, },
handleKeyDown: (_view, event) => { handleKeyDown: (_view, event) => {
if (event.key === "Enter" && !event.shiftKey) { if (event.key === "Enter" && !event.shiftKey) {
@@ -233,8 +233,8 @@ export function KefuMessageEditor({
} }
return ( return (
<div className="border-t border-slate-200/70 bg-white px-3 pb-3 pt-2"> <div className="border-t border-border bg-card px-3 pb-3 pt-2">
<div className="rounded-xl border border-slate-200 bg-white p-2 shadow-[0_8px_24px_rgba(15,23,42,0.05)]"> <div className="rounded-xl border border-border bg-background p-2 shadow-[0_8px_24px_rgba(15,23,42,0.05)] dark:shadow-none">
<input <input
ref={imageInputRef} ref={imageInputRef}
type="file" type="file"
@@ -265,7 +265,7 @@ export function KefuMessageEditor({
disabled={disabled || isUploading} disabled={disabled || isUploading}
aria-label={isUploading ? "图片上传中" : "发送图片"} aria-label={isUploading ? "图片上传中" : "发送图片"}
title={isUploading ? "图片上传中" : "发送图片"} title={isUploading ? "图片上传中" : "发送图片"}
className="text-slate-500 hover:bg-slate-100 hover:text-slate-800" className="text-muted-foreground hover:bg-muted hover:text-foreground"
> >
<ImageIcon /> <ImageIcon />
</Button> </Button>
@@ -281,13 +281,13 @@ export function KefuMessageEditor({
disabled={disabled || isUploading} disabled={disabled || isUploading}
aria-label={isUploading ? "附件上传中" : "发送附件"} aria-label={isUploading ? "附件上传中" : "发送附件"}
title={isUploading ? "附件上传中" : "发送附件"} title={isUploading ? "附件上传中" : "发送附件"}
className="text-slate-500 hover:bg-slate-100 hover:text-slate-800" className="text-muted-foreground hover:bg-muted hover:text-foreground"
> >
<PaperclipIcon /> <PaperclipIcon />
</Button> </Button>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<p className="text-[10px] text-slate-400">Enter 发送</p> <p className="text-[10px] text-muted-foreground">Enter 发送</p>
<Button <Button
type="button" type="button"
size="icon" size="icon"
web/components/kefu/message-list.tsx
+8 -8
View File
@@ -219,7 +219,7 @@ export const KefuMessageList = forwardRef<KefuMessageListHandle, KefuMessageList
size="sm" size="sm"
disabled={loadingOlder} disabled={loadingOlder}
onClick={() => void handleLoadOlder()} onClick={() => void handleLoadOlder()}
className="h-7 rounded-full border-slate-200 bg-white/90 text-xs text-slate-600 shadow-sm hover:bg-white hover:text-sky-700" className="h-7 rounded-full bg-background/90 text-xs text-muted-foreground shadow-sm hover:bg-background hover:text-sky-700 dark:hover:text-sky-400"
> >
{loadingOlder ? "加载中…" : "加载更早的消息"} {loadingOlder ? "加载中…" : "加载更早的消息"}
</Button> </Button>
@@ -269,7 +269,7 @@ const MessageItem = memo(
<div className="mb-3 flex items-center justify-center"> <div className="mb-3 flex items-center justify-center">
<Badge <Badge
variant="outline" variant="outline"
className="border-slate-200 bg-white/85 text-[11px] font-medium text-slate-500 shadow-sm" className="border-border bg-background/85 text-[11px] font-medium text-muted-foreground shadow-sm"
> >
{getTimelineLabel(message.sentAt)} {getTimelineLabel(message.sentAt)}
</Badge> </Badge>
@@ -280,7 +280,7 @@ const MessageItem = memo(
{!isCustomer ? ( {!isCustomer ? (
<Avatar className="mt-5"> <Avatar className="mt-5">
{avatarSrc ? <AvatarImage src={avatarSrc} alt="" /> : null} {avatarSrc ? <AvatarImage src={avatarSrc} alt="" /> : null}
<AvatarFallback className="bg-slate-200 text-slate-600"> <AvatarFallback className="bg-muted text-muted-foreground">
{fallbackName || "客"} {fallbackName || "客"}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
@@ -292,7 +292,7 @@ const MessageItem = memo(
isCustomer ? "items-end" : "items-start" isCustomer ? "items-end" : "items-start"
)} )}
> >
<div className="flex flex-wrap items-center gap-x-2 gap-y-1 px-1 text-[11px] text-slate-400"> <div className="flex flex-wrap items-center gap-x-2 gap-y-1 px-1 text-[11px] text-muted-foreground">
<span className="font-medium">{senderName}</span> <span className="font-medium">{senderName}</span>
<span>{formatDateTime(message.sentAt)}</span> <span>{formatDateTime(message.sentAt)}</span>
{isCustomer ? ( {isCustomer ? (
@@ -303,16 +303,16 @@ const MessageItem = memo(
className={cn( className={cn(
"rounded-lg px-3 py-2 text-sm leading-normal shadow-[0_10px_22px_rgba(15,23,42,0.06)]", "rounded-lg px-3 py-2 text-sm leading-normal shadow-[0_10px_22px_rgba(15,23,42,0.06)]",
isCustomer isCustomer
? "bg-[#a9ea7a] text-[#161616]" ? "bg-[#a9ea7a] text-[#161616] dark:bg-emerald-500 dark:text-emerald-950"
: "border border-slate-200/80 bg-white text-slate-900" : "border border-border bg-card text-card-foreground dark:bg-background"
)} )}
> >
<ImMessageHTML <ImMessageHTML
html={htmlContent} html={htmlContent}
className={cn( className={cn(
isCustomer isCustomer
? "[&_p]:text-[#161616] [&_a]:text-[#161616] [&_a]:underline [&_img]:cursor-zoom-in" ? "[&_p]:text-[#161616] dark:[&_p]:text-emerald-950 [&_a]:text-[#161616] dark:[&_a]:text-emerald-950 [&_a]:underline [&_img]:cursor-zoom-in"
: "[&_a]:text-slate-900 [&_a]:underline [&_img]:cursor-zoom-in" : "[&_a]:text-card-foreground [&_a]:underline [&_img]:cursor-zoom-in"
)} )}
onImageSettled={onImageSettled} onImageSettled={onImageSettled}
onImageClick={open} onImageClick={open}