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

248
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 || '')
) )
@@ -3378,108 +3362,106 @@ This gives the user a chance to refine requirements before implementation.
const fullPrompt = systemPrompt + '\n\n[USER REQUEST]\n' + fullText; const fullPrompt = systemPrompt + '\n\n[USER REQUEST]\n' + fullText;
let fullResponse = ''; let fullResponse = '';
// PROVIDER SWITCH: Use OpenCode Free or Qwen based on provider state // PROVIDER SWITCH: Use OpenCode Free or Qwen based on provider state
const streamStartTime = Date.now(); // Track start time for this request const streamStartTime = Date.now(); // Track start time for this request
let totalCharsReceived = 0; // Track total characters for speed calculation let totalCharsReceived = 0; // Track total characters for speed calculation
const result = provider === 'opencode-free' const result = provider === 'opencode-free'
? await callOpenCodeFree(fullPrompt, freeModel, (chunk) => { ? await callOpenCodeFree(fullPrompt, freeModel, (chunk) => {
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;
} else if (/^```|# |Here is|```|```|```/i.test(trimmedChunk)) { } else if (/^```|# |Here is|```|```|```/i.test(trimmedChunk)) {
// If we encounter code blocks or headers, likely content not thinking // If we encounter code blocks or headers, likely content not thinking
isThinkingChunk = false; isThinkingChunk = false;
} }
// Update character count for speed calculation // Update character count for speed calculation
totalCharsReceived += cleanChunk.length; totalCharsReceived += cleanChunk.length;
// Calculate current streaming speed (chars per second) // Calculate current streaming speed (chars per second)
const elapsedSeconds = (Date.now() - streamStartTime) / 1000; const elapsedSeconds = (Date.now() - streamStartTime) / 1000;
const speed = elapsedSeconds > 0 ? Math.round(totalCharsReceived / elapsedSeconds) : 0; const speed = elapsedSeconds > 0 ? Math.round(totalCharsReceived / elapsedSeconds) : 0;
// GLOBAL STATS UPDATE (Run for ALL chunks) // GLOBAL STATS UPDATE (Run for ALL chunks)
setThinkingStats(prev => ({ setThinkingStats(prev => ({
...prev, ...prev,
chars: totalCharsReceived, chars: totalCharsReceived,
speed: speed speed: speed
})); }));
// GLOBAL AGENT DETECTION (Run for ALL chunks) // GLOBAL AGENT DETECTION (Run for ALL chunks)
const agentMatch = cleanChunk.match(/\[AGENT:\s*([^\]]+)\]/i); const agentMatch = cleanChunk.match(/\[AGENT:\s*([^\]]+)\]/i);
if (agentMatch) { if (agentMatch) {
setThinkingStats(prev => ({ ...prev, activeAgent: agentMatch[1].trim() })); setThinkingStats(prev => ({ ...prev, activeAgent: agentMatch[1].trim() }));
} }
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') { return [...prev.slice(0, -1), { ...last, content: last.content + cleanChunk }];
return [...prev.slice(0, -1), { ...last, content: last.content + cleanChunk }]; }
} return prev;
return prev; });
}); }
} })
}) : await getQwen().sendMessage(fullPrompt, 'qwen-coder-plus', null, (chunk) => {
: await getQwen().sendMessage(fullPrompt, 'qwen-coder-plus', null, (chunk) => { 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)
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;
} else if (/^```|# |Here is|```|```|```/i.test(trimmedChunk)) { } else if (/^```|# |Here is|```|```|```/i.test(trimmedChunk)) {
// If we encounter code blocks or headers, likely content not thinking // If we encounter code blocks or headers, likely content not thinking
isThinkingChunk = false; isThinkingChunk = false;
} }
// Update character count for speed calculation (using same variable as OpenCode path) // Update character count for speed calculation (using same variable as OpenCode path)
totalCharsReceived += cleanChunk.length; totalCharsReceived += cleanChunk.length;
// Calculate current streaming speed (chars per second) // Calculate current streaming speed (chars per second)
const elapsedSeconds = (Date.now() - streamStartTime) / 1000; const elapsedSeconds = (Date.now() - streamStartTime) / 1000;
const speed = elapsedSeconds > 0 ? Math.round(totalCharsReceived / elapsedSeconds) : 0; const speed = elapsedSeconds > 0 ? Math.round(totalCharsReceived / elapsedSeconds) : 0;
setThinkingStats(prev => ({ setThinkingStats(prev => ({
...prev, ...prev,
chars: totalCharsReceived, chars: totalCharsReceived,
speed: speed speed: speed
})); }));
const agentMatch = cleanChunk.match(/\[AGENT:\s*([^\]]+)\]/i); const agentMatch = cleanChunk.match(/\[AGENT:\s*([^\]]+)\]/i);
if (agentMatch) { if (agentMatch) {
setThinkingStats(prev => ({ ...prev, activeAgent: agentMatch[1].trim() })); setThinkingStats(prev => ({ ...prev, activeAgent: agentMatch[1].trim() }));
} }
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') { return [...prev.slice(0, -1), { ...last, content: last.content + cleanChunk }];
return [...prev.slice(0, -1), { ...last, content: last.content + cleanChunk }]; }
} return prev;
return prev; });
}); }
} });
});
if (result.success) { if (result.success) {
const responseText = result.response || fullResponse; const responseText = result.response || fullResponse;