shiyue/PinchChat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: visually differentiate user vs assistant message bubbles

Browse Source 
User messages now have a subtle violet tint (border + gradient) to
distinguish them from assistant messages, similar to WhatsApp/Telegram
style. Keeps the dark theme and soft palette.
This commit is contained in:
Nicolas Varrot
2026-02-12 22:26:18 +00:00
parent 6c0558f5ed
commit 792a34bfb9
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/ChatMessage.tsx
View File

@@ -300,10 +300,10 @@ export function ChatMessageComponent({ message, onRetry }: { message: ChatMessag
{/* Bubble */} {/* Bubble */}
<div className={`min-w-0 max-w-[80%] ${isUser ? 'text-right' : ''}`}> <div className={`min-w-0 max-w-[80%] ${isUser ? 'text-right' : ''}`}>
<div className={`group relative inline-block text-left rounded-3xl px-4 py-3 text-sm leading-relaxed border border-white/8 max-w-full overflow-hidden ${ <div className={`group relative inline-block text-left rounded-3xl px-4 py-3 text-sm leading-relaxed max-w-full overflow-hidden ${
isUser isUser
? 'bg-gradient-to-b from-zinc-800/70 to-zinc-900/70 text-zinc-200' ? 'bg-gradient-to-b from-violet-900/20 to-zinc-900/60 text-zinc-200 border border-violet-400/15'
: 'bg-zinc-800/40 text-zinc-300 shadow-[0_0_0_1px_rgba(255,255,255,0.03)]' : 'bg-zinc-800/40 text-zinc-300 border border-white/8 shadow-[0_0_0_1px_rgba(255,255,255,0.03)]'
}`}> }`}>
{/* Copy button (assistant messages only) */} {/* Copy button (assistant messages only) */}
{!isUser && !message.isStreaming && getPlainText(message).trim() && ( {!isUser && !message.isStreaming && getPlainText(message).trim() && (