73 lines
3.5 KiB
JavaScript
73 lines
3.5 KiB
JavaScript
import React from 'react';
|
|
import { Box, Text } from 'ink';
|
|
|
|
const h = React.createElement;
|
|
|
|
const ChatBubble = ({ role, content, meta, width, children }) => {
|
|
// Calculate safe content width accounting for gutter
|
|
const contentWidth = width ? width - 2 : undefined; // Account for left gutter only
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
// USER MESSAGE - Clean text-focused presentation
|
|
// ═══════════════════════════════════════════════════════════════
|
|
if (role === 'user') {
|
|
return h(Box, {
|
|
width: width,
|
|
flexDirection: 'row',
|
|
justifyContent: 'flex-end',
|
|
marginBottom: 1,
|
|
paddingLeft: 2
|
|
},
|
|
h(Text, { color: 'cyan', wrap: 'wrap' }, content)
|
|
);
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
// SYSTEM - MINIMALIST TOAST
|
|
// ═══════════════════════════════════════════════════════════════
|
|
if (role === 'system') {
|
|
return h(Box, { width: width, justifyContent: 'center', marginBottom: 1 },
|
|
h(Text, { color: 'gray', dimColor: true }, ` ${content} `)
|
|
);
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
// ERROR - CLEAN GUTTER STYLE
|
|
// ═══════════════════════════════════════════════════════════════
|
|
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
|
|
},
|
|
h(Box, { width: 1, marginRight: 1, backgroundColor: 'red' }),
|
|
h(Text, { color: 'red', wrap: 'wrap' }, cleanContent)
|
|
);
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
// ASSISTANT - Clean text-focused style (Opencode-like)
|
|
// ═══════════════════════════════════════════════════════════════
|
|
return h(Box, {
|
|
width: width,
|
|
flexDirection: 'row',
|
|
marginBottom: 1
|
|
},
|
|
// Clean left gutter similar to opencode
|
|
h(Box, { width: 2, marginRight: 1, borderStyle: 'single', borderRight: false, borderTop: false, borderBottom: false, borderLeftColor: 'green' }),
|
|
|
|
// Content area - text focused, no borders
|
|
h(Box, {
|
|
flexDirection: 'column',
|
|
flexGrow: 1,
|
|
minWidth: 10
|
|
},
|
|
children ? children : h(Text, { color: 'white', wrap: 'wrap' }, content)
|
|
)
|
|
);
|
|
};
|
|
|
|
export default ChatBubble;
|