feie9454/simple-llm-chat-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化聊天 UI

Browse Source 
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
feie9456 2026-04-26 22:15:02 +08:00
parent 47e6da63e9
commit 1e3e04f7d8
2 changed files with 58 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.tsx
View File

@ -464,7 +464,7 @@ function AppContent() {
return undefined
}
const timeoutId = window.setTimeout(() => setNotice(null), 2600)
const timeoutId = window.setTimeout(() => setNotice(null), 600)
return () => window.clearTimeout(timeoutId)
}, [notice])
@ -1677,7 +1677,7 @@ function AppContent() {
onDeleteSession={deleteSession}
/>
<main className="main-panel min-w-0">
<main className="main-panel relative min-w-0">
<header className="topbar border-b bg-background/95 px-3 py-2 backdrop-blur">
<div className="topbar-left">
<Button
@ -1721,10 +1721,10 @@ function AppContent() {
</header>
{notice ? (
<div className="notice-wrap px-4 pt-3">
<div className="notice-wrap pointer-events-none absolute left-0 right-0 top-14 z-20 px-4 bg-background">
<div
className={cn(
"rounded-lg border px-3 py-2 text-sm",
"rounded-lg border px-3 py-2 text-sm shadow-sm",
notice.tone === "success" &&
"border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
notice.tone === "warning" &&

108
src/components/app/chat-view.tsx
View File

@ -452,9 +452,9 @@ function MessageItem({
return (
<article
className={cn(
"message-row flex",
"message-row flex flex-col",
message.role === "tool" && "gap-3",
isUserMessage ? "justify-end" : "justify-start"
isUserMessage ? "items-end" : "items-start"
)}
>
{message.role === "tool" ? (
@ -466,11 +466,11 @@ function MessageItem({
className={cn(
"message-bubble min-w-0",
isUserMessage &&
"message-bubble-user max-w-[min(720px,88%)] px-4 py-3 text-foreground",
"message-bubble-user max-w-[min(720px,88%)] px-4 py-3 text-foreground",
message.role === "assistant" &&
"message-bubble-assistant max-w-[min(760px,100%)] px-0 py-1 pl-2",
"message-bubble-assistant max-w-[min(760px,100%)] px-0 py-1 pl-2",
message.role === "tool" &&
"message-bubble-tool max-w-[min(760px,90%)] rounded-lg border bg-background px-3 py-3"
"message-bubble-tool max-w-[min(760px,90%)] rounded-lg border bg-background px-3 py-3"
)}
>
<div className="mb-2 flex flex-wrap items-center gap-2 text-xs opacity-75">
@ -541,8 +541,8 @@ function MessageItem({
</div>
) : null}
{!message.content.trim() &&
!message.reasoningContent?.trim() &&
!message.toolCalls?.length ? (
!message.reasoningContent?.trim() &&
!message.toolCalls?.length ? (
<MarkdownMessage content="..." />
) : null}
</>
@ -572,54 +572,54 @@ function MessageItem({
{usage ? <span>Token {usage}</span> : null}
</div>
) : null}
{!editing ? (
<div
className={cn(
"message-actions mt-2 flex flex-wrap gap-1",
isUserMessage ? "justify-end" : "justify-start"
)}
>
<Button
type="button"
size="icon-xs"
variant={isUserMessage ? "secondary" : "ghost"}
title="复制消息"
onClick={() => onCopy(getMessageCopyContent(message))}
>
<Copy />
</Button>
{isUserMessage ? (
<Button
type="button"
size="icon-xs"
variant="secondary"
title="编辑消息"
onClick={() => onEdit(message)}
>
<Edit3 />
</Button>
) : null}
<Button
type="button"
size="icon-xs"
variant={isUserMessage ? "secondary" : "ghost"}
title="从此处分叉会话"
onClick={() => onFork(message.id)}
>
<GitFork />
</Button>
<Button
type="button"
size="icon-xs"
variant={isUserMessage ? "secondary" : "ghost"}
title="删除消息"
onClick={() => onDelete(message.id)}
>
<Trash2 />
</Button>
</div>
) : null}
</div>
{!editing ? (
<div
className={cn(
"message-actions mt-2 flex flex-wrap gap-1",
isUserMessage ? "justify-end" : "justify-start"
)}
>
<Button
type="button"
size="icon-xs"
variant={isUserMessage ? "secondary" : "ghost"}
title="复制消息"
onClick={() => onCopy(getMessageCopyContent(message))}
>
<Copy />
</Button>
{isUserMessage ? (
<Button
type="button"
size="icon-xs"
variant="secondary"
title="编辑消息"
onClick={() => onEdit(message)}
>
<Edit3 />
</Button>
) : null}
<Button
type="button"
size="icon-xs"
variant={isUserMessage ? "secondary" : "ghost"}
title="从此处分叉会话"
onClick={() => onFork(message.id)}
>
<GitFork />
</Button>
<Button
type="button"
size="icon-xs"
variant={isUserMessage ? "secondary" : "ghost"}
title="删除消息"
onClick={() => onDelete(message.id)}
>
<Trash2 />
</Button>
</div>
) : null}
</article>
)
}