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

refactor: improve layout responsiveness and styling for chat components

Browse Source
This commit is contained in:
mlogclub
2026-05-09 23:00:55 +08:00
parent d238bf17bb
commit a077e50c6f
5 changed files with 55 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/components/chat/shared-message-editor.tsx
+2 -2
View File
@@ -389,7 +389,7 @@ export function SharedMessageEditor({
) : null}
</div>
<div className="flex items-center gap-2">
<p className={isCustomer ? "text-[10px] text-muted-foreground" : "text-xs text-muted-foreground"}>
<p className={isCustomer ? "hidden text-[10px] text-muted-foreground sm:block" : "text-xs text-muted-foreground"}>
Enter 发送
</p>
{isCustomer ? (
@@ -422,7 +422,7 @@ export function SharedMessageEditor({
if (isCustomer) {
return (
<div className="p-3">
<div className="px-3 pt-2 pb-3">
<div className="rounded-xl border border-border bg-background p-2 shadow-[0_8px_24px_rgba(15,23,42,0.05)] dark:shadow-none">
{editorContent}
</div>
web/components/kefu/chat-shell.tsx
+13 -11
View File
@@ -255,19 +255,19 @@ export function KefuChatShell() {
return (
<main
className="relative flex h-screen overflow-hidden bg-muted text-foreground"
className="relative flex h-[100dvh] min-h-[100dvh] overflow-hidden bg-muted text-foreground supports-not-[height:100dvh]:h-screen supports-not-[height:100dvh]:min-h-screen"
style={{ "--primary": themeColor } as CSSProperties}
>
<section className="flex h-full w-full flex-col overflow-hidden bg-card text-card-foreground">
<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">
<header className="shrink-0 border-b border-border bg-card/95 px-3 py-2.5 shadow-[0_8px_24px_rgba(15,23,42,0.04)] dark:shadow-none sm:px-4 sm:py-3">
<div className="flex min-w-0 items-center justify-between gap-2 sm:gap-3">
<div className="min-w-0">
<div className="truncate text-base font-semibold text-foreground">
{title}
</div>
<div className="mt-1 truncate text-xs text-muted-foreground">{subtitle}</div>
<div className="mt-0.5 truncate text-xs text-muted-foreground sm:mt-1">{subtitle}</div>
</div>
<div className="flex items-center gap-2">
<div className="flex shrink-0 items-center gap-1 sm:gap-2">
{status !== "connected" ? (
<KefuConnectionStatus status={status} />
) : null}
@@ -338,12 +338,14 @@ export function KefuChatShell() {
loadingOlder={messagesLoadingMore}
onLoadOlder={loadOlderMessages}
/>
<CustomerMessageEditor
disabled={!conversation}
onSend={handleSend}
onUploadImage={uploadMessageImage}
onSendAttachment={sendAttachment}
/>
<div className="shrink-0 pb-[env(safe-area-inset-bottom)]">
<CustomerMessageEditor
disabled={!conversation}
onSend={handleSend}
onUploadImage={uploadMessageImage}
onSendAttachment={sendAttachment}
/>
</div>
</div>
{error ? (