56 lines
3.4 KiB
JavaScript
56 lines
3.4 KiB
JavaScript
import React from 'react';
|
|
import { Box, Text } from 'ink';
|
|
|
|
const h = React.createElement;
|
|
|
|
const ChatBubble = ({ role, content, meta, width, children }) => {
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
// USER MESSAGE (RIGHT ALIGNED) - RAIL STYLE
|
|
// ═══════════════════════════════════════════════════════════════
|
|
if (role === 'user') {
|
|
return h(Box, { width: width, flexDirection: 'row', justifyContent: 'flex-end', marginBottom: 1, overflow: 'hidden' },
|
|
h(Box, { flexDirection: 'row', paddingRight: 1 },
|
|
h(Text, { color: 'cyan', wrap: 'wrap' }, content),
|
|
h(Box, { marginLeft: 1, borderStyle: 'single', borderLeft: false, borderTop: false, borderBottom: false, borderRightColor: 'cyan' })
|
|
)
|
|
);
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
// SYSTEM - MINIMALIST TOAST
|
|
// ═══════════════════════════════════════════════════════════════
|
|
if (role === 'system') {
|
|
return h(Box, { width: width, justifyContent: 'center', marginBottom: 1 },
|
|
h(Text, { color: 'gray', dimColor: true }, ` ${content} `)
|
|
);
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
// ERROR - RED GUTTER
|
|
// ═══════════════════════════════════════════════════════════════
|
|
if (role === 'error') {
|
|
// Strip redundant "Error: " prefix if present in content
|
|
const cleanContent = content.replace(/^Error:\s*/i, '');
|
|
return h(Box, { width: width, flexDirection: 'row', marginBottom: 1, overflow: 'hidden' },
|
|
h(Box, { marginRight: 1, borderStyle: 'single', borderRight: false, borderTop: false, borderBottom: false, borderLeftColor: 'red' }),
|
|
h(Text, { color: 'red', wrap: 'wrap' }, cleanContent)
|
|
);
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
// ASSISTANT - LEFT GUTTER RAIL
|
|
// ═══════════════════════════════════════════════════════════════
|
|
return h(Box, { width: width, flexDirection: 'row', marginBottom: 1, overflow: 'hidden' },
|
|
// Left Gutter
|
|
h(Box, { marginRight: 1, borderStyle: 'single', borderRight: false, borderTop: false, borderBottom: false, borderLeftColor: 'green' }),
|
|
|
|
// Content
|
|
h(Box, { flexDirection: 'column', paddingRight: 2, flexGrow: 1 },
|
|
children ? children : h(Text, { wrap: 'wrap' }, content)
|
|
)
|
|
);
|
|
};
|
|
|
|
export default ChatBubble;
|