57 lines
1.7 KiB
JavaScript
57 lines
1.7 KiB
JavaScript
import React from 'react';
|
|
|
|
export default function MessageBubble({ message }) {
|
|
const isUser = message.role === 'user';
|
|
|
|
return (
|
|
<div className="flex" style={{
|
|
justifyContent: isUser ? 'flex-end' : 'flex-start',
|
|
marginBottom: '12px',
|
|
padding: '0 16px',
|
|
}}>
|
|
{!isUser && (
|
|
<div className="flex items-center justify-center flex-shrink" style={{
|
|
width: '28px',
|
|
height: '28px',
|
|
borderRadius: '50%',
|
|
background: 'var(--accent)',
|
|
fontSize: '12px',
|
|
fontWeight: 600,
|
|
marginRight: '8px',
|
|
alignSelf: 'flex-end',
|
|
}}>N</div>
|
|
)}
|
|
|
|
<div style={{
|
|
maxWidth: '70%',
|
|
padding: '10px 14px',
|
|
borderRadius: isUser ? '18px 18px 4px 18px' : '18px 18px 18px 4px',
|
|
background: isUser ? 'var(--bubble-user)' : 'var(--bubble-ai)',
|
|
color: 'var(--text-primary)',
|
|
fontSize: '14px',
|
|
lineHeight: '1.6',
|
|
border: isUser ? 'none' : '1px solid var(--border)',
|
|
whiteSpace: 'pre-wrap',
|
|
wordBreak: 'break-word',
|
|
}}>
|
|
{message.text}
|
|
{message.streaming && (
|
|
<span style={{
|
|
display: 'inline-block',
|
|
width: '8px',
|
|
height: '14px',
|
|
background: 'var(--text-secondary)',
|
|
marginLeft: '2px',
|
|
borderRadius: 'var(--radius-sm)',
|
|
animation: 'blink 1s step-end infinite',
|
|
}} />
|
|
)}
|
|
{message.error && (
|
|
<div className="text-xs" style={{ marginTop: '6px', color: '#ff6b6b' }}>
|
|
⚠ Failed to complete response
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |