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 return undefined
} }
const timeoutId = window.setTimeout(() => setNotice(null), 2600) const timeoutId = window.setTimeout(() => setNotice(null), 600)
return () => window.clearTimeout(timeoutId) return () => window.clearTimeout(timeoutId)
}, [notice]) }, [notice])
@ -1677,7 +1677,7 @@ function AppContent() {
onDeleteSession={deleteSession} 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"> <header className="topbar border-b bg-background/95 px-3 py-2 backdrop-blur">
<div className="topbar-left"> <div className="topbar-left">
<Button <Button
@ -1721,10 +1721,10 @@ function AppContent() {
</header> </header>
{notice ? ( {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 <div
className={cn( 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" && notice.tone === "success" &&
"border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300", "border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
notice.tone === "warning" && notice.tone === "warning" &&

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

@ -452,9 +452,9 @@ function MessageItem({
return ( return (
<article <article
className={cn( className={cn(
"message-row flex", "message-row flex flex-col",
message.role === "tool" && "gap-3", message.role === "tool" && "gap-3",
isUserMessage ? "justify-end" : "justify-start" isUserMessage ? "items-end" : "items-start"
)} )}
> >
{message.role === "tool" ? ( {message.role === "tool" ? (
@ -572,6 +572,7 @@ function MessageItem({
{usage ? <span>Token {usage}</span> : null} {usage ? <span>Token {usage}</span> : null}
</div> </div>
) : null} ) : null}
</div>
{!editing ? ( {!editing ? (
<div <div
className={cn( className={cn(
@ -619,7 +620,6 @@ function MessageItem({
</Button> </Button>
</div> </div>
) : null} ) : null}
</div>
</article> </article>
) )
} }