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

refactor: enhance UI components and improve styling consistency across chat interface

Browse Source
This commit is contained in:
mlogclub
2026-04-25 11:26:53 +08:00
parent 25928c1b7d
commit 4da7e168fa
5 changed files with 141 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/components/kefu/chat-shell.tsx
+79 -63
View File
@@ -7,7 +7,7 @@ import {
RotateCwIcon,
XIcon,
} from "lucide-react"
import { useCallback, useEffect, useRef, useState } from "react"
import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react"
import { useShallow } from "zustand/react/shallow"
import { KefuConnectionStatus } from "@/components/kefu/connection-status"
@@ -23,6 +23,15 @@ import {
requestKefuHostToggleMaximize,
} from "@/lib/kefu-host-bridge"
import { useKefuChatStore } from "@/lib/stores/kefu-chat"
import { Button } from "@/components/ui/button"
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog"
export function KefuChatShell() {
const messageListRef = useRef<KefuMessageListHandle | null>(null)
@@ -191,74 +200,81 @@ export function KefuChatShell() {
return (
<main
className="cs-agent-shell relative flex h-screen overflow-hidden bg-(--background)"
style={{ "--primary": themeColor } as React.CSSProperties}
className="relative flex h-screen overflow-hidden bg-[#f6f8fb] text-slate-950"
style={{ "--primary": themeColor } as CSSProperties}
>
<section className="cs-agent-panel flex h-full w-full flex-col overflow-hidden border border-white/70">
<header className="relative shrink-0 overflow-hidden border-b border-white/60 px-4 pb-3 pt-3 shadow-[0_10px_24px_rgba(15,23,42,0.05)]">
<div className="absolute inset-x-0 top-0 h-20 bg-[radial-gradient(circle_at_top_right,rgba(37,99,235,0.14),transparent_52%)]" />
<div className="relative flex items-center justify-between gap-3">
<section className="flex h-full w-full flex-col overflow-hidden border border-slate-200/70 bg-white">
<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)]">
<div className="flex items-center justify-between gap-3">
<div className="min-w-0">
<div className="truncate text-[16px] font-semibold tracking-[0.01em] text-slate-950">
<div className="truncate text-base font-semibold text-slate-950">
{title}
</div>
<div className="mt-1 text-[12px] text-slate-500">{subtitle}</div>
<div className="mt-1 truncate text-xs text-slate-500">{subtitle}</div>
</div>
<div className="flex items-center gap-2">
{status !== "connected" ? (
<KefuConnectionStatus status={status} />
) : null}
<div className="inline-flex items-center gap-1 rounded-[18px] border border-white/70 bg-[linear-gradient(180deg,rgba(255,255,255,0.88),rgba(241,245,249,0.82))] p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.9),0_12px_28px_rgba(15,23,42,0.07)] backdrop-blur-xl">
<button
<div className="inline-flex items-center gap-1 rounded-lg border border-slate-200 bg-slate-50 p-1">
<Button
type="button"
variant="ghost"
size="icon-xs"
onClick={retry}
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(239,246,255,0.96))] hover:text-sky-600 hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.95),0_10px_18px_rgba(56,189,248,0.16)]"
className="text-slate-500 hover:bg-white hover:text-sky-600"
>
<RotateCwIcon className="size-3.75 transition duration-200 group-hover:rotate-[-20deg]" />
</button>
<RotateCwIcon />
</Button>
{showHostActions ? (
<button
<Button
type="button"
variant="ghost"
size="icon-xs"
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)]"
className="text-slate-500 hover:bg-white hover:text-slate-800"
>
<MinusIcon className="size-3.75 transition duration-200 group-hover:scale-x-[0.88]" />
</button>
<MinusIcon />
</Button>
) : null}
{showHostActions ? (
<button
<Button
type="button"
variant="ghost"
size="icon-xs"
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)]"
className="text-slate-500 hover:bg-white hover:text-emerald-700"
>
{isMaximized ? (
<Minimize2Icon className="size-3.75 transition duration-200 group-hover:scale-[0.94]" />
<Minimize2Icon />
) : (
<Maximize2Icon className="size-3.75 transition duration-200 group-hover:scale-[1.04]" />
<Maximize2Icon />
)}
</button>
</Button>
) : null}
<button
<Button
type="button"
variant="ghost"
size="icon-xs"
onClick={() => setIsCloseDialogOpen(true)}
aria-label="关闭聊天窗口"
title="关闭聊天窗口"
className="group inline-flex h-6 w-6 items-center justify-center rounded-[14px] text-rose-400 transition duration-200 hover:-translate-y-0.5 hover:bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(255,241,242,0.98))] hover:text-rose-600 hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.95),0_10px_18px_rgba(244,63,94,0.16)]"
className="text-rose-500 hover:bg-rose-50 hover:text-rose-600"
>
<XIcon className="size-3.75 transition duration-200 group-hover:scale-[0.92]" />
</button>
<XIcon />
</Button>
</div>
</div>
</div>
</header>
<div className=".cs-agent-grid-bg grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)_auto] overflow-hidden">
<div className="grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)_auto] overflow-hidden bg-[#f6f8fb]">
<KefuMessageList
ref={messageListRef}
messages={safeMessages}
@@ -282,41 +298,41 @@ export function KefuChatShell() {
) : null}
</section>
{isCloseDialogOpen ? (
<div className="absolute inset-0 z-50 flex items-center justify-center bg-[radial-gradient(circle_at_top,rgba(37,99,235,0.16),transparent_38%),rgba(15,23,42,0.24)] px-5 backdrop-blur-sm">
<div className="cs-agent-fade-up w-full max-w-[320px] rounded-[26px] border border-white/70 bg-[linear-gradient(180deg,rgba(255,255,255,0.96),rgba(241,245,249,0.94))] p-5 shadow-[0_28px_80px_rgba(15,23,42,0.18),inset_0_1px_0_rgba(255,255,255,0.92)]">
<div className="flex items-start gap-3">
<div className="min-w-0">
<div className="text-[15px] font-semibold tracking-[0.01em] text-slate-950">
结束当前对话？
</div>
<div className="mt-1.5 text-[12px] leading-5 text-slate-500">
结束会话，客服将无法再查看您的消息记录，如需再次联系请重新发起对话。
</div>
</div>
</div>
<div className="mt-5 flex items-center justify-end gap-2">
<button
type="button"
disabled={isClosingConversation}
onClick={() => setIsCloseDialogOpen(false)}
className="inline-flex h-9 items-center justify-center rounded-2xl border border-slate-200/80 bg-white/80 px-4 text-[12px] font-medium text-slate-600 shadow-[0_10px_20px_rgba(15,23,42,0.05)] transition hover:-translate-y-0.5 hover:border-slate-300 hover:bg-white hover:text-slate-800 disabled:translate-y-0 disabled:cursor-not-allowed disabled:opacity-60"
>
继续对话
</button>
<button
type="button"
disabled={isClosingConversation}
onClick={() => void confirmCloseConversation()}
className="inline-flex h-9 items-center justify-center rounded-2xl bg-[linear-gradient(135deg,#f43f5e,#fb7185)] px-4 text-[12px] font-semibold text-white shadow-[0_14px_28px_rgba(244,63,94,0.24)] transition hover:-translate-y-0.5 hover:opacity-92 disabled:translate-y-0 disabled:cursor-not-allowed disabled:opacity-60"
>
{isClosingConversation ? "结束中..." : "确认结束"}
</button>
</div>
</div>
</div>
) : null}
<Dialog
open={isCloseDialogOpen}
onOpenChange={(open) => {
if (!isClosingConversation) {
setIsCloseDialogOpen(open)
}
}}
>
<DialogContent className="max-w-[320px]" showCloseButton={!isClosingConversation}>
<DialogHeader>
<DialogTitle>结束当前对话？</DialogTitle>
<DialogDescription className="text-xs leading-5">
结束会话，客服将无法再查看您的消息记录，如需再次联系请重新发起对话。
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button
type="button"
variant="outline"
disabled={isClosingConversation}
onClick={() => setIsCloseDialogOpen(false)}
>
继续对话
</Button>
<Button
type="button"
variant="destructive"
disabled={isClosingConversation}
onClick={() => void confirmCloseConversation()}
>
{isClosingConversation ? "结束中..." : "确认结束"}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</main>
)
}
web/components/kefu/connection-status.tsx
+8 -10
View File
@@ -1,5 +1,6 @@
"use client"
import { Badge } from "@/components/ui/badge"
import { cn } from "@/lib/utils"
type KefuConnectionStatusProps = {
@@ -15,17 +16,15 @@ const statusText: Record<KefuConnectionStatusProps["status"], string> = {
export function KefuConnectionStatus({ status }: KefuConnectionStatusProps) {
const toneClass =
status === "connected"
? "border-emerald-200/80 bg-emerald-50 text-emerald-700"
? "border-emerald-200 bg-emerald-50 text-emerald-700"
: status === "connecting"
? "border-amber-200/80 bg-amber-50 text-amber-700"
: "border-slate-200/80 bg-slate-100 text-slate-600"
? "border-amber-200 bg-amber-50 text-amber-700"
: "border-slate-200 bg-slate-100 text-slate-600"
return (
<div
className={cn(
"inline-flex items-center gap-2 rounded-full border px-2.5 py-1 text-[11px] font-medium tracking-[0.02em] shadow-[0_6px_16px_rgba(15,23,42,0.06)]",
toneClass
)}
<Badge
variant="outline"
className={cn("h-6 gap-2 px-2.5 text-[11px] font-medium shadow-sm", toneClass)}
>
<span
className={cn(
@@ -38,7 +37,6 @@ export function KefuConnectionStatus({ status }: KefuConnectionStatusProps) {
)}
/>
<span>{statusText[status]}</span>
</div>
</Badge>
)
}
web/components/kefu/message-editor.tsx
+26 -17
View File
@@ -7,6 +7,7 @@ import Placeholder from "@tiptap/extension-placeholder"
import StarterKit from "@tiptap/starter-kit"
import { ImageIcon, PaperclipIcon, SendHorizonalIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
import { generateUUID } from "@/lib/utils"
type UploadedImage = {
@@ -99,7 +100,7 @@ export function KefuMessageEditor({
editorProps: {
attributes: {
class:
"min-h-12 max-h-40 overflow-y-auto px-1.5 py-1 text-[13px] leading-6 text-slate-900 outline-none [&_p]:m-0 [&_p+*]:mt-2 [&_img]:my-2 [&_img]:max-h-64 [&_img]:rounded-xl [&_img]:object-contain",
"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",
},
handleKeyDown: (_view, event) => {
if (event.key === "Enter" && !event.shiftKey) {
@@ -232,8 +233,8 @@ export function KefuMessageEditor({
}
return (
<div className="px-3 pb-3 pt-2">
<div className="rounded-xl border border-white/60 bg-white/78 p-2 shadow-[0_10px_24px_rgba(15,23,42,0.05)] backdrop-blur">
<div className="border-t border-slate-200/70 bg-white 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)]">
<input
ref={imageInputRef}
type="file"
@@ -250,10 +251,12 @@ export function KefuMessageEditor({
<div className="min-h-10">
<EditorContent editor={editor} />
</div>
<div className="mt-1.5 flex items-center justify-between">
<div className="mt-2 flex items-center justify-between">
<div className="flex items-center gap-1.5">
<button
<Button
type="button"
variant="ghost"
size="icon"
onMouseDown={(event) => event.preventDefault()}
onClick={() => {
shouldRestoreFocusRef.current = editor?.isFocused ?? true
@@ -261,12 +264,15 @@ export function KefuMessageEditor({
}}
disabled={disabled || isUploading}
aria-label={isUploading ? "图片上传中" : "发送图片"}
className="inline-flex size-8 shrink-0 items-center justify-center rounded-xl border border-slate-200/80 bg-white/90 text-slate-500 shadow-[0_8px_18px_rgba(15,23,42,0.05)] transition duration-200 hover:-translate-y-0.5 hover:text-slate-700 disabled:translate-y-0 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-300"
title={isUploading ? "图片上传中" : "发送图片"}
className="text-slate-500 hover:bg-slate-100 hover:text-slate-800"
>
<ImageIcon className="size-4" />
</button>
<button
<ImageIcon />
</Button>
<Button
type="button"
variant="ghost"
size="icon"
onMouseDown={(event) => event.preventDefault()}
onClick={() => {
shouldRestoreFocusRef.current = editor?.isFocused ?? true
@@ -274,22 +280,25 @@ export function KefuMessageEditor({
}}
disabled={disabled || isUploading}
aria-label={isUploading ? "附件上传中" : "发送附件"}
className="inline-flex size-8 shrink-0 items-center justify-center rounded-xl border border-slate-200/80 bg-white/90 text-slate-500 shadow-[0_8px_18px_rgba(15,23,42,0.05)] transition duration-200 hover:-translate-y-0.5 hover:text-slate-700 disabled:translate-y-0 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-300"
title={isUploading ? "附件上传中" : "发送附件"}
className="text-slate-500 hover:bg-slate-100 hover:text-slate-800"
>
<PaperclipIcon className="size-4" />
</button>
<PaperclipIcon />
</Button>
</div>
<div className="flex items-center gap-1">
<div className="flex items-center gap-2">
<p className="text-[10px] text-slate-400">Enter 发送</p>
<button
<Button
type="button"
size="icon"
onClick={() => void handleSend()}
disabled={disabled || isUploading}
aria-label="发送"
className="inline-flex size-8 shrink-0 items-center justify-center rounded-xl bg-[linear-gradient(135deg,var(--primary),color-mix(in_srgb,var(--primary)_75%,white_25%))] text-white shadow-[0_10px_20px_color-mix(in_srgb,var(--primary)_28%,transparent)] transition duration-200 hover:-translate-y-0.5 hover:brightness-105 disabled:translate-y-0 disabled:cursor-not-allowed disabled:bg-slate-300 disabled:shadow-none"
title="发送"
className="bg-[var(--primary)] text-white shadow-[0_10px_20px_color-mix(in_srgb,var(--primary)_24%,transparent)] hover:bg-[var(--primary)] hover:brightness-105"
>
<SendHorizonalIcon className="size-4" />
</button>
<SendHorizonalIcon />
</Button>
</div>
</div>
</div>
web/components/kefu/message-list.tsx
+28 -21
View File
@@ -1,6 +1,5 @@
"use client"
import Image from "next/image"
import {
forwardRef,
memo,
@@ -13,6 +12,9 @@ import {
import { ImMessageHTML } from "@/components/im-message-html"
import { useImageLightbox } from "@/components/image-lightbox"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import type { ImMessage } from "@/lib/api/im"
import { renderIMMessageHTML } from "@/lib/im-message"
import { cn, formatDateTime } from "@/lib/utils"
@@ -211,14 +213,16 @@ export const KefuMessageList = forwardRef<KefuMessageListHandle, KefuMessageList
<div ref={contentRef} className="flex flex-col gap-4">
{hasMoreOlder && onLoadOlder ? (
<div className="flex justify-center py-1">
<button
<Button
type="button"
variant="outline"
size="sm"
disabled={loadingOlder}
onClick={() => void handleLoadOlder()}
className="rounded-full border border-white/70 bg-white/75 px-3 py-1 text-[11px] font-medium text-slate-500 shadow-[0_8px_18px_rgba(15,23,42,0.04)] backdrop-blur transition hover:-translate-y-0.5 hover:border-sky-200 hover:text-sky-700 disabled:translate-y-0 disabled:opacity-60"
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"
>
{loadingOlder ? "加载中…" : "加载更早的消息"}
</button>
</Button>
</div>
) : null}
@@ -257,35 +261,38 @@ const MessageItem = memo(
const avatarSrc =
!isCustomer && message.senderAvatar?.trim() ? message.senderAvatar.trim() : undefined
const htmlContent = renderIMMessageHTML(message)
const fallbackName = senderName.slice(0, 1).toUpperCase()
return (
<div className="cs-agent-fade-up">
<div>
{showTimeline ? (
<div className="mb-3 flex items-center justify-center">
<div className="rounded-full border border-white/70 bg-white/80 px-3 py-1 text-[11px] font-medium text-slate-500 shadow-[0_8px_18px_rgba(15,23,42,0.04)] backdrop-blur">
<Badge
variant="outline"
className="border-slate-200 bg-white/85 text-[11px] font-medium text-slate-500 shadow-sm"
>
{getTimelineLabel(message.sentAt)}
</div>
</Badge>
</div>
) : null}
<div className={cn("flex gap-2", isCustomer ? "justify-end" : "justify-start")}>
{!isCustomer && avatarSrc ? (
<Image
src={avatarSrc}
alt=""
width={32}
height={32}
className="size-8 shrink-0 rounded-full object-cover ring-1 ring-white/80"
/>
<div className={cn("flex gap-2.5", isCustomer ? "justify-end" : "justify-start")}>
{!isCustomer ? (
<Avatar className="mt-5">
{avatarSrc ? <AvatarImage src={avatarSrc} alt="" /> : null}
<AvatarFallback className="bg-slate-200 text-slate-600">
{fallbackName || "客"}
</AvatarFallback>
</Avatar>
) : null}
<div
className={cn(
"flex max-w-[86%] flex-col gap-1",
"flex max-w-[86%] flex-col gap-1.5",
isCustomer ? "items-end" : "items-start"
)}
>
<div className="flex items-center gap-2 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-slate-400">
<span className="font-medium">{senderName}</span>
<span>{formatDateTime(message.sentAt)}</span>
{isCustomer ? (
@@ -294,10 +301,10 @@ const MessageItem = memo(
</div>
<div
className={cn(
"rounded-lg px-3 py-2 text-sm leading-normal shadow-[0_14px_28px_rgba(15,23,42,0.08)]",
"rounded-lg px-3 py-2 text-sm leading-normal shadow-[0_10px_22px_rgba(15,23,42,0.06)]",
isCustomer
? "bg-[#A9EA7A] text-[#161616]"
: "border border-white/80 bg-white/94 text-slate-900"
? "bg-[#a9ea7a] text-[#161616]"
: "border border-slate-200/80 bg-white text-slate-900"
)}
>
<ImMessageHTML
web/styles/main.scss
-92
View File
@@ -4,31 +4,6 @@
$thumb: #cbd5e1;
$thumb-hover: #94a3b8;
textarea.cs-agent-scrollbar {
scrollbar-width: thin;
scrollbar-color: $thumb transparent;
&::-webkit-scrollbar {
width: 8px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
border: 2px solid transparent;
border-radius: 999px;
background: $thumb;
background-clip: padding-box;
}
&::-webkit-scrollbar-thumb:hover {
background: $thumb-hover;
background-clip: padding-box;
}
}
.cs-agent-scrollbar {
scrollbar-width: thin;
scrollbar-color: $thumb transparent;
@@ -54,73 +29,6 @@ textarea.cs-agent-scrollbar {
}
}
.cs-agent-shell {
/* 与 widget 保持一致：容器本身不额外加 padding。 */
}
.cs-agent-panel {
border-radius: 28px;
box-shadow:
0 24px 80px rgba(15, 23, 42, 0.14),
0 10px 24px rgba(15, 23, 42, 0.08);
backdrop-filter: blur(16px);
}
.cs-agent-grid-bg,
.\.cs-agent-grid-bg {
background-image:
radial-gradient(circle at top, rgba(255, 255, 255, 0.72), transparent 32%),
linear-gradient(180deg, rgba(247, 249, 252, 0.92) 0%, rgba(238, 244, 251, 0.94) 100%),
linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
background-size:
auto,
auto,
22px 22px,
22px 22px;
background-position:
center top,
center,
center,
center;
}
.cs-agent-fade-up {
animation: cs-agent-fade-up 220ms ease-out;
}
.cs-agent-status-dot {
animation: cs-agent-pulse 1.8s ease-in-out infinite;
}
@keyframes cs-agent-fade-up {
from {
opacity: 0;
transform: translate3d(0, 8px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes cs-agent-pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
}
/* 图片预览：遮罩在 dialog 内部绘制，避免与原生 ::backdrop 叠色 */
.cs-agent-image-lightbox::backdrop {
background: transparent;
}
.dark .cs-agent-scrollbar {
scrollbar-color: hsl(var(--border)) transparent;