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

TUI5: Enhanced typewriter with batching, fixed infinite loop, premium streaming feel

Browse Source
This commit is contained in:
Gemini AI
2025-12-14 18:44:59 +04:00
Unverified
parent 2854f65cfd
commit 9e83d9d2c2
1 changed files with 121 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
bin/opencode-ink.mjs
View File

@@ -1050,29 +1050,17 @@ const SmoothCounter = ({ value }) => {
return h(Text, { color: 'white' }, displayValue.toLocaleString()); return h(Text, { color: 'white' }, displayValue.toLocaleString());
}; };
// Component: ProfessionalTypewriter - Premium text streaming with advanced flow control // Component: EnhancedTypewriterText - Improved text reveal with batching and adaptive speed
// Default content type speeds (defined outside component for stable reference) const EnhancedTypewriterText = ({
const DEFAULT_CONTENT_TYPES = {
text: 25, // Normal text - smooth flow
code: 8, // Code - faster for readability
thinking: 40, // Thinking - deliberate pace
bold: 18 // Bold text - slightly faster
};
const ProfessionalTypewriter = ({
children, children,
baseSpeed = 20, speed = 25,
contentTypes = DEFAULT_CONTENT_TYPES batchSize = 1 // Default to 1 for safety, can be increased for batching
}) => { }) => {
const fullText = String(children || ''); const fullText = String(children || '');
const [displayText, setDisplayText] = useState(''); const [displayText, setDisplayText] = useState('');
const positionRef = useRef(0); const positionRef = useRef(0);
const timerRef = useRef(null); const timerRef = useRef(null);
// Use refs for values that shouldn't trigger re-render
const contentTypesRef = useRef(contentTypes);
contentTypesRef.current = contentTypes;
useEffect(() => { useEffect(() => {
// Reset when text changes // Reset when text changes
setDisplayText(''); setDisplayText('');
@@ -1086,49 +1074,45 @@ const ProfessionalTypewriter = ({
return; return;
} }
// Professional streaming with intelligent pacing // Safer approach: process in small batches to prevent overwhelming the UI
const streamNext = () => { const processNextBatch = () => {
if (positionRef.current >= fullText.length) { if (positionRef.current >= fullText.length) {
if (timerRef.current) clearTimeout(timerRef.current); if (timerRef.current) clearTimeout(timerRef.current);
return; return;
} }
// Look ahead to determine context-appropriate speed // Calculate batch size (may be smaller near the end)
const currentPos = positionRef.current; const remaining = fullText.length - positionRef.current;
const context = fullText.substring(Math.max(0, currentPos - 15), currentPos + 15); const currentBatchSize = Math.min(batchSize, remaining);
const types = contentTypesRef.current;
let speed = types.text; // Get the next batch of characters
if (context.includes('```')) speed = types.code; const nextBatch = fullText.substring(positionRef.current, positionRef.current + currentBatchSize);
else if (context.match(/^(Let me|Thinking|Analyzing)/i)) speed = types.thinking;
else if (context.includes('**') || context.includes('__')) speed = types.bold;
// Add the next character // Update display and position
const nextChar = fullText.charAt(positionRef.current); setDisplayText(prev => prev + nextBatch);
setDisplayText(prev => prev + nextChar); positionRef.current += currentBatchSize;
positionRef.current += 1;
// Schedule next character with context-aware timing // Schedule next batch
timerRef.current = setTimeout(streamNext, speed); timerRef.current = setTimeout(processNextBatch, speed);
}; };
streamNext(); processNextBatch();
return () => { return () => {
if (timerRef.current) { if (timerRef.current) {
clearTimeout(timerRef.current); clearTimeout(timerRef.current);
} }
}; };
}, [fullText]); // Only depend on fullText to prevent infinite loops }, [fullText, speed, batchSize]); // Include batchSize in dependency array
// Professional cursor that feels natural // Enhanced cursor effect
const displayWithCursor = displayText + (Math.floor(Date.now() / 500) % 2 ? '█' : ' '); const displayWithCursor = displayText + (Math.floor(Date.now() / 500) % 2 ? '█' : ' ');
return h(Text, { wrap: 'wrap' }, displayWithCursor); return h(Text, { wrap: 'wrap' }, displayWithCursor);
}; };
// Maintain backward compatibility with TypewriterText alias // Maintain backward compatibility
const TypewriterText = ProfessionalTypewriter; const TypewriterText = EnhancedTypewriterText;
// Component: FadeInBox - Animated fade-in wrapper (simulates fade with opacity chars) // Component: FadeInBox - Animated fade-in wrapper (simulates fade with opacity chars)
const FadeInBox = ({ children, delay = 0 }) => { const FadeInBox = ({ children, delay = 0 }) => {
@@ -1552,8 +1536,8 @@ const UserCard = ({ content, width }) => {
); );
}; };
// AGENT CARD - Professional content display with proper flow // AGENT CARD - Enhanced streaming with premium feel
// Clean, structured presentation with smooth streaming // Text-focused with minimal styling, clean left gutter
const AgentCard = ({ content, isStreaming, width }) => { const AgentCard = ({ content, isStreaming, width }) => {
const contentWidth = width ? width - 4 : undefined; // Account for left gutter and spacing const contentWidth = width ? width - 4 : undefined; // Account for left gutter and spacing
@@ -1563,7 +1547,7 @@ const AgentCard = ({ content, isStreaming, width }) => {
marginBottom: 1, marginBottom: 1,
width: width, width: width,
}, },
// Professional status indicator // Enhanced left gutter with premium styling
h(Box, { h(Box, {
width: 2, width: 2,
marginRight: 1, marginRight: 1,
@@ -1571,22 +1555,22 @@ const AgentCard = ({ content, isStreaming, width }) => {
borderRight: false, borderRight: false,
borderTop: false, borderTop: false,
borderBottom: false, borderBottom: false,
borderLeftColor: isStreaming ? 'cyan' : 'green' borderLeftColor: isStreaming ? 'cyan' : 'green' // Changed to premium cyan color
}), }),
// Content area with proper flow // Content area - text focused, no boxy borders
h(Box, { h(Box, {
flexDirection: 'column', flexDirection: 'column',
flexGrow: 1, flexGrow: 1,
minWidth: 10 minWidth: 10
}, },
// Content with professional streaming - use stable DEFAULT_CONTENT_TYPES // Content with enhanced streaming effect
h(Box, { width: contentWidth }, h(Box, { width: contentWidth },
isStreaming isStreaming
? h(ProfessionalTypewriter, { ? h(EnhancedTypewriterText, {
children: content || '', children: content || '',
baseSpeed: 20 speed: 25, // Optimal speed for readability
// Uses DEFAULT_CONTENT_TYPES automatically batchSize: 1 // Can be increased for batching (safely set to 1 for now)
}) })
: h(Markdown, { syntaxTheme: 'github', width: contentWidth }, content || '') : h(Markdown, { syntaxTheme: 'github', width: contentWidth }, content || '')
) )
@@ -3387,11 +3371,11 @@ This gives the user a chance to refine requirements before implementation.
const cleanChunk = chunk.replace(/[\u001b\u009b][[\]()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, ''); const cleanChunk = chunk.replace(/[\u001b\u009b][[\]()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, '');
// IMPROVED STREAM SPLITTING LOGIC (Thinking vs Content) // IMPROVED STREAM SPLITTING LOGIC (Thinking vs Content)
// Professional separation of thinking from response // Claude Code style: cleaner separation of thinking from response
const lines = cleanChunk.split('\n'); const lines = cleanChunk.split('\n');
let isThinkingChunk = false; let isThinkingChunk = false;
// Enhanced heuristics for better thinking detection // Enhanced heuristics for better Claude-like thinking detection
const trimmedChunk = cleanChunk.trim(); const trimmedChunk = cleanChunk.trim();
if (/^(Let me|Now let me|I'll|I need to|I should|I notice|I can|I will|Thinking:|Analyzing|Considering|Checking|Looking|Planning|First|Next|Finally)/i.test(trimmedChunk)) { if (/^(Let me|Now let me|I'll|I need to|I should|I notice|I can|I will|Thinking:|Analyzing|Considering|Checking|Looking|Planning|First|Next|Finally)/i.test(trimmedChunk)) {
isThinkingChunk = true; isThinkingChunk = true;
@@ -3423,7 +3407,6 @@ This gives the user a chance to refine requirements before implementation.
if (isThinkingChunk) { if (isThinkingChunk) {
setThinkingLines(prev => [...prev, ...lines.map(l => l.trim()).filter(l => l && !/^(Let me|Now let me|I'll|I need to|I notice)/i.test(l.trim()))]); setThinkingLines(prev => [...prev, ...lines.map(l => l.trim()).filter(l => l && !/^(Let me|Now let me|I'll|I need to|I notice)/i.test(l.trim()))]);
} else { } else {
// Direct message update - simple and stable
setMessages(prev => { setMessages(prev => {
const last = prev[prev.length - 1]; const last = prev[prev.length - 1];
if (last && last.role === 'assistant') { if (last && last.role === 'assistant') {
@@ -3440,7 +3423,7 @@ This gives the user a chance to refine requirements before implementation.
const lines = cleanChunk.split('\n'); const lines = cleanChunk.split('\n');
let isThinkingChunk = false; let isThinkingChunk = false;
// Enhanced heuristics for better thinking detection // Enhanced heuristics for better Claude-like thinking detection
const trimmedChunk = cleanChunk.trim(); const trimmedChunk = cleanChunk.trim();
if (/^(Let me|Now let me|I'll|I need to|I should|I notice|I can|I will|Thinking:|Analyzing|Considering|Checking|Looking|Planning|First|Next|Finally)/i.test(trimmedChunk)) { if (/^(Let me|Now let me|I'll|I need to|I should|I notice|I can|I will|Thinking:|Analyzing|Considering|Checking|Looking|Planning|First|Next|Finally)/i.test(trimmedChunk)) {
isThinkingChunk = true; isThinkingChunk = true;
@@ -3470,7 +3453,6 @@ This gives the user a chance to refine requirements before implementation.
if (isThinkingChunk) { if (isThinkingChunk) {
setThinkingLines(prev => [...prev, ...lines.map(l => l.trim()).filter(l => l && !/^(Let me|Now let me|I'll|I need to|I notice)/i.test(l.trim()))]); setThinkingLines(prev => [...prev, ...lines.map(l => l.trim()).filter(l => l && !/^(Let me|Now let me|I'll|I need to|I notice)/i.test(l.trim()))]);
} else { } else {
// Direct message update - simple and stable
setMessages(prev => { setMessages(prev => {
const last = prev[prev.length - 1]; const last = prev[prev.length - 1];
if (last && last.role === 'assistant') { if (last && last.role === 'assistant') {