Spaces:
Sleeping
Sleeping
File size: 1,774 Bytes
0d37119 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | import { useEffect, useRef } from 'react';
export default function ConversationOverlay({ messages, isThinking }) {
const endRef = useRef(null);
useEffect(() => {
endRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [messages, isThinking]);
if ((!messages || messages.length === 0) && !isThinking) return null;
return (
<div style={{
width: '100%',
maxWidth: '600px',
maxHeight: '40vh',
overflowY: 'auto',
display: 'flex',
flexDirection: 'column',
gap: '10px',
padding: '10px 0',
}}>
{messages.map((msg, i) => (
<div key={i} style={{
padding: '12px 16px',
borderRadius: '12px',
fontSize: '14px',
lineHeight: '1.6',
whiteSpace: 'pre-wrap',
background: msg.role === 'user' ? '#e8f0fe' : '#f8f9fa',
borderLeft: `3px solid ${msg.role === 'user' ? '#4285f4' : '#a142f4'}`,
color: '#1f1f1f',
animation: 'fadeInUp 0.3s ease-out',
alignSelf: msg.role === 'user' ? 'flex-end' : 'flex-start',
maxWidth: '85%',
}}>
<span style={{
fontSize: '11px',
color: msg.role === 'user' ? '#4285f4' : '#a142f4',
fontWeight: 500,
display: 'block',
marginBottom: '4px',
}}>
{msg.role === 'user' ? 'Toi' : 'Oppy'}
</span>
{msg.text}
</div>
))}
{isThinking && (
<div style={{
padding: '12px 16px',
fontSize: '14px',
color: '#a142f4',
fontStyle: 'italic',
animation: 'pulse 1.5s infinite',
}}>
Oppy reflechit...
</div>
)}
<div ref={endRef} />
</div>
);
}
|