33 lines
1.3 KiB
TypeScript
33 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { SitesmithMessage } from '../../types/sitesmith';
|
|
|
|
export const MessageList: React.FC<{ messages: SitesmithMessage[] }> = ({ messages }) => {
|
|
const extract = (m: SitesmithMessage): string => {
|
|
if (m.role === 'user') return m.content;
|
|
try { const obj = JSON.parse(m.content); if (obj.type === 'ask') return obj.question; if (obj.message) return obj.message; } catch {}
|
|
return m.content;
|
|
};
|
|
return (
|
|
<div style={{ flex: 1, overflowY: 'auto', padding: '8px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
|
|
{messages.length === 0 && (
|
|
<div style={{ color: '#71717a', fontSize: 13, textAlign: 'center', padding: 30 }}>
|
|
Describe the site you want and Sitesmith builds it. e.g. "A two-page site for a small bakery, friendly tone, photo of cupcakes in the hero."
|
|
</div>
|
|
)}
|
|
{messages.map((m, i) => {
|
|
const isUser = m.role === 'user';
|
|
return (
|
|
<div key={i} style={{
|
|
alignSelf: isUser ? 'flex-end' : 'flex-start',
|
|
maxWidth: '80%', padding: '10px 14px', borderRadius: 10,
|
|
background: isUser ? '#312e81' : '#1f2937', color: '#f3f4f6',
|
|
fontSize: 14, whiteSpace: 'pre-wrap',
|
|
}}>
|
|
{extract(m)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|