69 lines
2.2 KiB
Plaintext
69 lines
2.2 KiB
Plaintext
import React, { useState, useEffect } from 'react';
|
|
import { Box, Text } from 'ink';
|
|
|
|
const h = React.createElement;
|
|
|
|
const ThinkingBlock = ({
|
|
lines = [],
|
|
isThinking = false,
|
|
stats = { chars: 0 },
|
|
width = 80
|
|
}) => {
|
|
// If no thinking lines and not thinking, show nothing
|
|
if (lines.length === 0 && !isThinking) return null;
|
|
|
|
// Show only last few lines to avoid clutter
|
|
const visibleLines = lines.slice(-3); // Show cleaner view
|
|
const hiddenCount = Math.max(0, lines.length - 3);
|
|
|
|
return h(Box, {
|
|
flexDirection: 'row',
|
|
width: width,
|
|
marginBottom: 1,
|
|
paddingLeft: 1 // Only left padding, no borders like opencode
|
|
},
|
|
// Clean left gutter similar to opencode
|
|
h(Box, {
|
|
width: 2,
|
|
marginRight: 1,
|
|
borderStyle: 'single',
|
|
borderRight: false,
|
|
borderTop: false,
|
|
borderBottom: false,
|
|
borderLeftColor: isThinking ? 'yellow' : 'gray'
|
|
}),
|
|
|
|
h(Box, { flexDirection: 'column', flexGrow: 1 },
|
|
// Header with minimal stats - opencode style
|
|
h(Box, { marginBottom: 0.5, flexDirection: 'row' },
|
|
h(Text, { color: isThinking ? 'yellow' : 'gray', dimColor: !isThinking },
|
|
isThinking ? '💭 thinking...' : '💭 thinking'
|
|
),
|
|
stats.activeAgent && h(Text, { color: 'magenta', marginLeft: 1 }, `(${stats.activeAgent})`),
|
|
h(Text, { color: 'gray', marginLeft: 1, dimColor: true }, `(${stats.chars} chars)`)
|
|
),
|
|
// Thinking lines with cleaner presentation
|
|
visibleLines.map((line, i) =>
|
|
h(Text, {
|
|
key: i,
|
|
color: 'gray',
|
|
dimColor: true,
|
|
wrap: 'truncate'
|
|
},
|
|
` ${line.substring(0, width - 4)}` // Cleaner indentation
|
|
)
|
|
),
|
|
// Hidden count indicator
|
|
hiddenCount > 0 && h(Text, {
|
|
color: 'gray',
|
|
dimColor: true,
|
|
marginLeft: 2
|
|
},
|
|
`+${hiddenCount} steps`
|
|
)
|
|
)
|
|
);
|
|
};
|
|
|
|
export default ThinkingBlock;
|