admin/OpenQode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TUI Gen 5: Major overhaul - Todo List, improved streaming, ESC to abort, cleaner UI

Browse Source
This commit is contained in:
Gemini AI
2025-12-14 04:02:03 +04:00
Unverified
parent e23a2a5efc
commit 63de8fc2d1
6 changed files with 5417 additions and 688 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
bin/ui/components/ChatBubble.mjs
View File

@@ -4,16 +4,21 @@ 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 (RIGHT ALIGNED) - RAIL STYLE
// USER MESSAGE - Clean text-focused presentation
// ═══════════════════════════════════════════════════════════════
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' })
)
return h(Box, {
width: width,
flexDirection: 'row',
justifyContent: 'flex-end',
marginBottom: 1,
paddingLeft: 2
},
h(Text, { color: 'cyan', wrap: 'wrap' }, content)
);
}
@@ -27,27 +32,39 @@ const ChatBubble = ({ role, content, meta, width, children }) => {
}
// ═══════════════════════════════════════════════════════════════
// ERROR - RED GUTTER
// 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, overflow: 'hidden' },
h(Box, { marginRight: 1, borderStyle: 'single', borderRight: false, borderTop: false, borderBottom: false, borderLeftColor: 'red' }),
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 - LEFT GUTTER RAIL
// ASSISTANT - Clean text-focused style (Opencode-like)
// ═══════════════════════════════════════════════════════════════
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)
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)
)
);
};