2e34bde07a
When submitting a message without a model/session configured, the error path showed a help message but never cleared the textarea, leaving the user's text stuck in the input field. Clear the input and trigger autoResize on both the no-default-model and catch paths. Fixes #1475 Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
4547 lines
216 KiB
JavaScript
4547 lines
216 KiB
JavaScript
// static/js/chat.js
|
|
|
|
/**
|
|
* Main chat functionality - message handling and streaming
|
|
*/
|
|
// ES6 module — IIFE removed
|
|
|
|
import Storage from './storage.js';
|
|
import uiModule from './ui.js';
|
|
import sessionModule from './sessions.js';
|
|
import chatRenderer from './chatRenderer.js';
|
|
import chatStream from './chatStream.js';
|
|
import { addAITTSButton } from './tts-ai.js';
|
|
import markdownModule from './markdown.js';
|
|
import spinnerModule from './spinner.js';
|
|
import presetsModule from './presets.js';
|
|
import fileHandlerModule from './fileHandler.js';
|
|
import searchModule from './search.js';
|
|
import documentModule from './document.js';
|
|
import * as emailInbox from './emailInbox.js';
|
|
import codeRunnerModule from './codeRunner.js';
|
|
import slashCommands, { initSlashCommands, isCommand, handleSlashCommand, handleSetupInput, handleSetupWizard, typewriterInto } from './slashCommands.js';
|
|
import createResearchSynapse from './researchSynapse.js';
|
|
const RESEARCH_TIMEOUT_MS = 360000;
|
|
const DEFAULT_TIMEOUT_MS = 120000;
|
|
const RESEARCH_SVG = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>';
|
|
|
|
let API_BASE = '';
|
|
let currentAbort = null;
|
|
let isStreaming = false;
|
|
// Continuous stall watchdog: while streaming, if the SSE stream produces
|
|
// NOTHING for STALL_THRESHOLD_MS (no deltas, no tool heartbeat — tools beat
|
|
// every 2s, so a full minute of silence means it's genuinely stuck or the
|
|
// model quietly stopped), surface a non-destructive "still working?" prompt
|
|
// instead of silently hanging. Replaces relying only on the tab-refocus
|
|
// recovery (which fired only on visibilitychange and silently reloaded).
|
|
let _stallWatchdog = null;
|
|
let _stallBannerShown = false;
|
|
const STALL_THRESHOLD_MS = 60000;
|
|
let _sendInFlight = false; // covers the window from click → streaming start
|
|
let _displayOverride = null; // Override visible user bubble text (hides injected prompts)
|
|
let _hideUserBubble = false; // Skip user bubble entirely (e.g. continue after stop)
|
|
let _pendingContinue = null; // Stores the stopped AI element to merge with new response
|
|
// ── Auto-recovery: when a turn's stream silently dies (connection drop) or
|
|
// goes quiet while the connection is alive, re-engage the model with a
|
|
// completion handshake instead of leaving it hung. Capped so it can't loop.
|
|
let _autoNudges = 0; // handshakes fired for the CURRENT user turn
|
|
let _autoContinuePending = false; // marks the next submit as an auto-continue (don't reset the counter)
|
|
const _AUTO_NUDGE_CAP = 3;
|
|
|
|
// shortModel and modelColor are now in chatRenderer.js
|
|
var _shortModel = chatRenderer.shortModel;
|
|
var _applyModelColor = chatRenderer.applyModelColor;
|
|
// Per-session research tracking (supports concurrent research across sessions)
|
|
const _researchingStreamIds = new Set();
|
|
let _researchTimerEl = null, _researchTimerInterval = null;
|
|
let _researchStartTime = 0, _researchAvgDuration = null;
|
|
let _researchSynapse = null;
|
|
function _clearResearchTimer() {
|
|
if (_researchTimerInterval) { clearInterval(_researchTimerInterval); _researchTimerInterval = null; }
|
|
if (_researchTimerEl) { _researchTimerEl.remove(); _researchTimerEl = null; }
|
|
if (_researchSynapse) {
|
|
// Mark complete first so the user briefly sees the "done" state,
|
|
// then tear it down on next tick.
|
|
try { _researchSynapse.complete(); } catch {}
|
|
const s = _researchSynapse;
|
|
_researchSynapse = null;
|
|
setTimeout(() => { try { s.destroy(); } catch {} }, 800);
|
|
}
|
|
_researchStartTime = 0;
|
|
_researchAvgDuration = null;
|
|
}
|
|
|
|
/** Append a "Generate Visual Report" button — delegates to chatRenderer. */
|
|
function _appendViewReportLink(msgEl, sessionId) {
|
|
const body = msgEl.querySelector('.body');
|
|
if (body) chatRenderer.appendReportButton(body, sessionId);
|
|
}
|
|
let currentAccumulated = ''; // Track accumulated text across function scope
|
|
let currentHolder = null; // Track current message holder
|
|
let currentSpinner = null; // Track current spinner for stop cleanup
|
|
|
|
// Background streaming support
|
|
const _backgroundStreams = new Map(); // sessionId -> { status, accumulated, sourcesHtml, abortCtrl, query, metrics }
|
|
let _streamSessionId = null; // Session ID for the currently active reader loop
|
|
let _lastReaderActivity = 0; // Timestamp of last reader.read() success — used to detect frozen streams
|
|
let _webLockRelease = null; // Function to release the Web Lock held during streaming
|
|
|
|
/** Check if an SSE reader is still actively connected for a session. */
|
|
function hasActiveStream(sessionId) {
|
|
return _streamSessionId === sessionId || _backgroundStreams.has(sessionId);
|
|
}
|
|
|
|
// Sources box builder and toggleSources are now in chatRenderer.js
|
|
var _buildSourcesBox = chatRenderer.buildSourcesBox;
|
|
|
|
// Browser notifications now in chatStream.js
|
|
var _notifyResearchComplete = chatStream.notifyResearchComplete;
|
|
|
|
// Model/image pricing, _buildImageBubble now in chatRenderer.js
|
|
var _buildImageBubble = chatRenderer.buildImageBubble;
|
|
var getModelCost = chatRenderer.getModelCost;
|
|
var getImageCost = chatRenderer.getImageCost;
|
|
|
|
// stripToolBlocks and roleTimestamp now in chatRenderer.js
|
|
var stripToolBlocks = chatRenderer.stripToolBlocks;
|
|
|
|
function _normalizeEndpointForCompare(url) {
|
|
if (!url) return '';
|
|
try {
|
|
const u = new URL(String(url), window.location.origin);
|
|
let path = u.pathname.replace(/\/+$/, '');
|
|
const suffixes = [
|
|
'/v1/chat/completions', '/chat/completions',
|
|
'/v1/completions', '/completions',
|
|
'/v1/messages', '/messages',
|
|
'/v1/models', '/models',
|
|
];
|
|
for (const suffix of suffixes) {
|
|
if (path.toLowerCase().endsWith(suffix)) {
|
|
path = path.slice(0, -suffix.length).replace(/\/+$/, '');
|
|
break;
|
|
}
|
|
}
|
|
return (u.origin + path).toLowerCase();
|
|
} catch (_) {
|
|
return String(url).trim().replace(/\/+$/, '').toLowerCase();
|
|
}
|
|
}
|
|
|
|
async function _probeCurrentEndpointStatus(endpointUrl, signal) {
|
|
const target = _normalizeEndpointForCompare(endpointUrl);
|
|
if (!target) return null;
|
|
const modelsRes = await fetch(`${API_BASE}/api/models`, { credentials: 'same-origin', signal });
|
|
if (!modelsRes.ok) return null;
|
|
const modelsData = await modelsRes.json().catch(() => ({}));
|
|
const item = (modelsData.items || []).find(ep =>
|
|
_normalizeEndpointForCompare(ep.url || ep.endpoint_url || ep.base_url) === target
|
|
);
|
|
if (!item || !item.endpoint_id) return null;
|
|
|
|
const probesRes = await fetch(`${API_BASE}/api/model-endpoints/probe-local`, {
|
|
credentials: 'same-origin',
|
|
signal,
|
|
});
|
|
if (!probesRes.ok) return null;
|
|
const probes = await probesRes.json().catch(() => ({}));
|
|
return probes[item.endpoint_id] || null;
|
|
}
|
|
|
|
/**
|
|
* Initialize with dependencies
|
|
*/
|
|
export function init(apiBase) {
|
|
API_BASE = apiBase;
|
|
initSlashCommands({ apiBase, isStreaming: () => isStreaming });
|
|
// Initialize email inbox
|
|
emailInbox.init(documentModule);
|
|
// Wire the slash-command autocomplete popup on the chat composer. The
|
|
// dispatcher already handles the typed command — this just surfaces the
|
|
// registry as a discoverable menu when the user starts a message with /.
|
|
import('./slashAutocomplete.js').then(mod => {
|
|
const ta = document.getElementById('message');
|
|
if (ta && mod.initSlashAutocomplete) mod.initSlashAutocomplete(ta);
|
|
}).catch(() => {});
|
|
}
|
|
|
|
// addMessage, createMsgFooter, displayMetrics, hideWelcomeScreen, showWelcomeScreen
|
|
// are now in chatRenderer.js — referenced via the public API delegation above.
|
|
var addMessage = chatRenderer.addMessage;
|
|
var createMsgFooter = chatRenderer.createMsgFooter;
|
|
var displayMetrics = chatRenderer.displayMetrics;
|
|
var hideWelcomeScreen = chatRenderer.hideWelcomeScreen;
|
|
var showWelcomeScreen = chatRenderer.showWelcomeScreen;
|
|
|
|
/**
|
|
* Update submit button state
|
|
*/
|
|
function updateSubmitButton(state, submitBtn) {
|
|
if (!submitBtn) return;
|
|
|
|
if (state === 'streaming') {
|
|
// Clear any pending transitions from + → arrow swap
|
|
submitBtn.classList.remove('anim-spin', 'anim-spin-swap', 'anim-land', 'mic-mode', 'newchat-mode', 'newchat-expanded', 'recording');
|
|
// Ensure arrow icon is showing before launch
|
|
var icons = window._odysseusBtnIcons;
|
|
if (icons) submitBtn.innerHTML = icons.send;
|
|
void submitBtn.offsetWidth;
|
|
// Arrow launches up, then stop icon lands in
|
|
submitBtn.classList.add('anim-launch');
|
|
const _stopSvg = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>';
|
|
// Wait for the launch keyframe to finish (0.3s) before swapping the
|
|
// arrow out for the stop icon — otherwise the swap happens mid-flight
|
|
// and the user sees nothing fly out.
|
|
setTimeout(() => {
|
|
submitBtn.innerHTML = _stopSvg;
|
|
submitBtn.classList.remove('anim-launch');
|
|
void submitBtn.offsetWidth;
|
|
submitBtn.classList.add('anim-land');
|
|
submitBtn.addEventListener('animationend', () => submitBtn.classList.remove('anim-land'), { once: true });
|
|
}, 300);
|
|
submitBtn.title = 'Stop generation';
|
|
submitBtn.dataset.mode = 'streaming';
|
|
submitBtn.dataset.phase = 'processing';
|
|
isStreaming = true;
|
|
_startStallWatchdog();
|
|
} else if (state === 'idle') {
|
|
submitBtn.dataset.mode = '';
|
|
delete submitBtn.dataset.phase;
|
|
submitBtn.classList.remove('recording');
|
|
isStreaming = false;
|
|
_stopStallWatchdog();
|
|
// Defer to global updater which handles mic/newchat/send modes
|
|
if (window._updateSendBtnIcon) {
|
|
setTimeout(window._updateSendBtnIcon, 50);
|
|
} else {
|
|
var icons = window._odysseusBtnIcons;
|
|
submitBtn.innerHTML = icons ? icons.send : '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>';
|
|
submitBtn.title = 'Send message';
|
|
submitBtn.classList.remove('mic-mode', 'newchat-mode');
|
|
}
|
|
}
|
|
}
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Slash commands — now in slashCommands.js
|
|
// -----------------------------------------------------------------------
|
|
|
|
// API key pattern for the guard in handleChatSubmit
|
|
const API_KEY_RE = /^(sk-[a-zA-Z0-9_\-]{20,}|gsk_[a-zA-Z0-9]{20,}|AIza[a-zA-Z0-9_\-]{30,}|xai-[a-zA-Z0-9]{20,})$/;
|
|
|
|
|
|
/**
|
|
* Handle chat form submission
|
|
*/
|
|
export async function handleChatSubmit(e) {
|
|
e.preventDefault();
|
|
// Cancel research clarification timeout if active
|
|
if (window._researchTimeoutTimer) {
|
|
clearTimeout(window._researchTimeoutTimer);
|
|
window._researchTimeoutTimer = null;
|
|
}
|
|
// Get current session
|
|
const sessionId = sessionModule.getCurrentSessionId();
|
|
const session = sessionModule.getSessions().find(s => s.id === sessionId);
|
|
|
|
const submitBtn = document.querySelector('.send-btn');
|
|
|
|
// If compare is active, stop all compare streams
|
|
if (window.compareModule && window.compareModule.isActive()) {
|
|
window.compareModule.handleCompareSubmit();
|
|
return;
|
|
}
|
|
|
|
// If currently streaming, stop it
|
|
if (isStreaming) {
|
|
// Cancel server-side research if in progress
|
|
const _cancelSid = sessionModule.getCurrentSessionId();
|
|
if (_cancelSid && _researchingStreamIds.has(_cancelSid)) {
|
|
fetch(`${API_BASE}/api/research/cancel/${_cancelSid}`, { method: 'POST' }).catch(e => console.warn('Research cancel failed:', e));
|
|
_researchingStreamIds.delete(_cancelSid);
|
|
_clearResearchTimer();
|
|
}
|
|
abortCurrentRequest(true); // explicit user Stop → also cancel the detached server run
|
|
|
|
// Clean up any running agent thread nodes (stop wave animation, remove "running" state)
|
|
document.querySelectorAll('.agent-thread-node.running').forEach(node => {
|
|
if (node._waveInterval) { clearInterval(node._waveInterval); node._waveInterval = null; }
|
|
if (node._elapsedTicker) { clearInterval(node._elapsedTicker); node._elapsedTicker = null; }
|
|
node.classList.remove('running');
|
|
const wave = node.querySelector('.agent-thread-wave');
|
|
if (wave) wave.textContent = '';
|
|
const icon = node.querySelector('.agent-thread-icon');
|
|
if (icon) icon.textContent = '\u25A0'; // stop square
|
|
const statusEl = node.querySelector('.agent-thread-status');
|
|
if (!statusEl) {
|
|
const header = node.querySelector('.agent-thread-header');
|
|
if (header) {
|
|
const s = document.createElement('span');
|
|
s.className = 'agent-thread-status';
|
|
s.textContent = 'stopped';
|
|
header.appendChild(s);
|
|
}
|
|
}
|
|
});
|
|
document.querySelectorAll('.agent-thread.streaming').forEach(t => t.classList.remove('streaming'));
|
|
|
|
// Clean up any thinking spinners
|
|
document.querySelectorAll('.agent-thinking-dots').forEach(el => {
|
|
if (el._spinner) el._spinner.destroy();
|
|
el.remove();
|
|
});
|
|
// No text accumulated — remove the empty holder with spinner
|
|
if (currentHolder && !currentAccumulated) {
|
|
if (currentSpinner) { currentSpinner.destroy(); currentSpinner = null; }
|
|
// Empty cancel — keep the assistant bubble around with a "Cancelled
|
|
// by user" indicator and persist a placeholder server-side so the
|
|
// turn survives a refresh instead of vanishing without a trace.
|
|
_renderCancelledBubble(currentHolder);
|
|
currentHolder = null;
|
|
updateSubmitButton('idle', submitBtn);
|
|
const messageInput = uiModule.el('message');
|
|
if (messageInput) messageInput.disabled = false;
|
|
currentAccumulated = '';
|
|
return;
|
|
}
|
|
// Render whatever was accumulated so far
|
|
if (currentHolder && currentAccumulated) {
|
|
// Store accumulated in a closure variable before it gets cleared
|
|
const stoppedContent = currentAccumulated;
|
|
|
|
// Store raw content in dataset for consistency with other messages
|
|
currentHolder.dataset.raw = stoppedContent;
|
|
|
|
currentHolder.querySelector('.body').innerHTML = markdownModule.processWithThinking(
|
|
markdownModule.squashOutsideCode(stoppedContent)
|
|
);
|
|
|
|
// Highlight code blocks
|
|
if (window.hljs) {
|
|
currentHolder.querySelectorAll('pre code').forEach((block) => {
|
|
window.hljs.highlightElement(block);
|
|
});
|
|
}
|
|
|
|
// Add the stopped indicator with continue button
|
|
const stoppedIndicator = document.createElement('div');
|
|
stoppedIndicator.className = 'stopped-indicator';
|
|
const stoppedLabel = document.createElement('span');
|
|
stoppedLabel.textContent = '[Message interrupted]';
|
|
stoppedIndicator.appendChild(stoppedLabel);
|
|
const continueBtn = document.createElement('button');
|
|
continueBtn.className = 'continue-btn';
|
|
continueBtn.title = 'Continue';
|
|
continueBtn.textContent = '\u25B8';
|
|
const _stoppedHolder = currentHolder; // capture before it gets cleared
|
|
continueBtn.addEventListener('click', () => {
|
|
stoppedIndicator.remove();
|
|
_hideUserBubble = true;
|
|
_pendingContinue = _stoppedHolder;
|
|
const cutoff = stoppedContent;
|
|
const msgInput = uiModule.el('message');
|
|
if (msgInput) {
|
|
msgInput.value = 'Your previous response was interrupted. It ended with:\n\n' + cutoff.slice(-500) + '\n\nDo NOT repeat what you already said. Continue exactly from where you were cut off.';
|
|
const sb = document.querySelector('.send-btn');
|
|
if (sb) sb.click();
|
|
}
|
|
});
|
|
stoppedIndicator.appendChild(continueBtn);
|
|
currentHolder.querySelector('.body').appendChild(stoppedIndicator);
|
|
|
|
// Tell server to mark this message as stopped
|
|
const _sid = sessionModule.getCurrentSessionId();
|
|
if (_sid) fetch(`${API_BASE}/api/session/${_sid}/mark-stopped`, { method: 'POST' }).catch(e => console.warn('mark-stopped failed:', e));
|
|
|
|
// Add footer with copy/regen if not already present
|
|
if (!currentHolder.querySelector('.msg-footer')) {
|
|
currentHolder.dataset.raw = stoppedContent;
|
|
currentHolder.appendChild(createMsgFooter(currentHolder));
|
|
}
|
|
|
|
uiModule.scrollHistory();
|
|
}
|
|
|
|
// Reset button state
|
|
updateSubmitButton('idle', submitBtn);
|
|
|
|
// Re-enable message input
|
|
const messageInput = uiModule.el('message');
|
|
if (messageInput) messageInput.disabled = false;
|
|
|
|
// Clear tracking variables
|
|
currentAccumulated = '';
|
|
currentHolder = null;
|
|
|
|
return;
|
|
}
|
|
|
|
// --- Send-path entry: block re-clicks between submit and stream start ---
|
|
if (_sendInFlight) return;
|
|
_sendInFlight = true;
|
|
// Instant visual feedback so the user sees their click was accepted
|
|
// even before the streaming button state kicks in below.
|
|
const _earlyMessageInput = uiModule.el('message');
|
|
if (_earlyMessageInput) _earlyMessageInput.disabled = true;
|
|
if (submitBtn) submitBtn.classList.add('send-pending');
|
|
const _releaseSendFlag = () => {
|
|
_sendInFlight = false;
|
|
if (_earlyMessageInput) _earlyMessageInput.disabled = false;
|
|
if (submitBtn) submitBtn.classList.remove('send-pending');
|
|
};
|
|
|
|
// --- Setup mode: intercept next message (but let slash commands through) ---
|
|
{
|
|
const el = uiModule.el;
|
|
const rawMsg = (el('message').value || '').trim();
|
|
const currentSetupMode = slashCommands.getSetupMode();
|
|
if (currentSetupMode && rawMsg && !isCommand(rawMsg)) {
|
|
const mode = currentSetupMode;
|
|
slashCommands.clearSetupMode(mode === 'endpoint-provider' || mode === 'endpoint-key-for-provider');
|
|
el('message').value = '';
|
|
if (window._syncModelPickerAutohide) window._syncModelPickerAutohide();
|
|
if (uiModule.autoResize) uiModule.autoResize(el('message'));
|
|
if (mode === true || mode === 'endpoint') {
|
|
handleSetupInput(rawMsg);
|
|
} else {
|
|
handleSetupWizard(mode, rawMsg);
|
|
}
|
|
_releaseSendFlag();
|
|
return;
|
|
}
|
|
if (currentSetupMode && rawMsg && isCommand(rawMsg)) {
|
|
slashCommands.clearSetupMode(); // Clear setup mode, fall through to slash handler
|
|
}
|
|
}
|
|
|
|
const el = uiModule.el;
|
|
const msg = el('message').value;
|
|
// Allow empty text when a regen carries over the original message's
|
|
// attachment ids — a photo-only message still has something to send.
|
|
if (!msg.trim() && !fileHandlerModule.getPendingCount() && !(_pendingRegenAttachments && _pendingRegenAttachments.length)) { _releaseSendFlag(); return; }
|
|
|
|
// --- Slash commands: execute directly without AI (no session needed) ---
|
|
if (isCommand(msg.trim())) {
|
|
const handled = await handleSlashCommand(msg.trim());
|
|
if (handled) {
|
|
el('message').value = '';
|
|
if (window._syncModelPickerAutohide) window._syncModelPickerAutohide();
|
|
if (uiModule.autoResize) uiModule.autoResize(el('message'));
|
|
_releaseSendFlag();
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Materialize pending session (deferred from model click) on first message
|
|
if (sessionModule.hasPendingChat && sessionModule.hasPendingChat()) {
|
|
const ok = await sessionModule.materializePendingSession();
|
|
if (!ok || !sessionModule.getCurrentSessionId()) { _releaseSendFlag(); return; }
|
|
}
|
|
|
|
if (!sessionModule.getCurrentSessionId()) {
|
|
// Auto-create a session using default chat config. Always fetch fresh
|
|
// so that a recent Settings change takes effect without a page reload.
|
|
try {
|
|
let dc = null;
|
|
try {
|
|
const dcRes = await fetch('/api/default-chat');
|
|
dc = await dcRes.json();
|
|
if (dc && dc.endpoint_url && dc.model) {
|
|
try { window.__odysseusDefaultChat = dc; } catch (_) {}
|
|
}
|
|
} catch (_) {
|
|
dc = (typeof window !== 'undefined' && window.__odysseusDefaultChat) || null;
|
|
}
|
|
if (dc.endpoint_url && dc.model) {
|
|
await sessionModule.createDirectChat(dc.endpoint_url, dc.model, dc.endpoint_id);
|
|
const ok = await sessionModule.materializePendingSession();
|
|
if (!ok || !sessionModule.getCurrentSessionId()) { _releaseSendFlag(); return; }
|
|
} else {
|
|
el('message').value = '';
|
|
if (uiModule.autoResize) uiModule.autoResize(el('message'));
|
|
addMessage('assistant',
|
|
'No chat session active. You can:\n\n' +
|
|
'- Open the model picker in the chat box and pick a model\n' +
|
|
'- Use the `+` button in the model picker to add a model endpoint\n' +
|
|
'- Use `/help` to see all available commands');
|
|
_releaseSendFlag();
|
|
return;
|
|
}
|
|
} catch (e) {
|
|
el('message').value = '';
|
|
if (uiModule.autoResize) uiModule.autoResize(el('message'));
|
|
addMessage('assistant',
|
|
'No chat session active. You can:\n\n' +
|
|
'- Open the model picker in the chat box and pick a model\n' +
|
|
'- Use the `+` button in the model picker to add a model endpoint\n' +
|
|
'- Use `/help` to see all available commands');
|
|
_releaseSendFlag();
|
|
return;
|
|
}
|
|
}
|
|
|
|
// --- API key guard: warn if message looks like an API key ---
|
|
if (API_KEY_RE.test(msg.trim())) {
|
|
if (!await window.styledConfirm('This looks like an API key. Sending it to the AI could expose it.\n\nDid you mean to use /setup instead?', { confirmText: 'Send anyway', danger: true })) {
|
|
_releaseSendFlag();
|
|
return;
|
|
}
|
|
}
|
|
|
|
|
|
const messageInput = el('message');
|
|
const originalBtnText = submitBtn ? submitBtn.innerHTML : '';
|
|
|
|
// Re-enable the textarea now that we've handed off to the stream: the
|
|
// user wants to compose the next message while the AI is still talking.
|
|
// The `isStreaming` flag is the re-click guard for the send button.
|
|
if (messageInput) messageInput.disabled = false;
|
|
updateSubmitButton('streaming', submitBtn);
|
|
if (submitBtn) submitBtn.classList.remove('send-pending');
|
|
_sendInFlight = false;
|
|
|
|
// Capture session ID for background stream detection
|
|
const streamSessionId = sessionModule.getCurrentSessionId();
|
|
_streamSessionId = streamSessionId;
|
|
const streamQuery = msg;
|
|
_lastReaderActivity = Date.now();
|
|
|
|
// Acquire Web Lock to hint browser not to discard this tab while streaming
|
|
if (navigator.locks) {
|
|
navigator.locks.request('odysseus-stream-' + streamSessionId, { mode: 'exclusive', ifAvailable: true }, lock => {
|
|
if (!lock) return; // Another stream already holds a lock — fine
|
|
return new Promise(resolve => { _webLockRelease = resolve; });
|
|
}).catch(e => console.warn('web lock acquire failed:', e)); // Ignore lock errors — best-effort
|
|
}
|
|
|
|
// Declare accumulated outside try block so it's accessible in catch
|
|
let accumulated = '';
|
|
// Are we currently inside an unclosed <think> block? Toggled per think/answer
|
|
// cycle so a multi-round agent response (one reasoning phase PER round) wraps each
|
|
// round's reasoning in its own <think>…</think> instead of leaking rounds 2+ as text.
|
|
let _thinkOpen = false;
|
|
let holder = null;
|
|
let finalMeta = null;
|
|
let finalModelName = null;
|
|
let spinner = null;
|
|
let timedOut = false;
|
|
let processingProbeTimer = null;
|
|
let processingProbeAbort = null;
|
|
let _renderStream = () => {};
|
|
let _cancelThinkingTimer = () => {};
|
|
let _removeThinkingSpinner = () => {};
|
|
const clearProcessingProbe = () => {
|
|
if (processingProbeTimer) {
|
|
clearTimeout(processingProbeTimer);
|
|
processingProbeTimer = null;
|
|
}
|
|
if (processingProbeAbort) {
|
|
try { processingProbeAbort.abort(); } catch (_) {}
|
|
processingProbeAbort = null;
|
|
}
|
|
};
|
|
|
|
// Reset tracking variables at start
|
|
currentAccumulated = '';
|
|
currentHolder = null;
|
|
|
|
try {
|
|
// Re-enable auto-scroll when user sends a message
|
|
uiModule.setAutoScroll(true);
|
|
uiModule.scrollHistoryInstant();
|
|
// Clear completed dot now that user is interacting
|
|
if (sessionModule.clearStreamComplete) sessionModule.clearStreamComplete(sessionModule.getCurrentSessionId());
|
|
|
|
// Check for document selection context before consuming display override
|
|
const docSel = documentModule && documentModule.getSelectionContext();
|
|
if (docSel) {
|
|
const sels = Array.isArray(docSel) ? docSel : [docSel];
|
|
const lineRefs = sels.map(s =>
|
|
s.startLine === s.endLine ? `L${s.startLine}` : `L${s.startLine}-${s.endLine}`
|
|
);
|
|
_displayOverride = `[Doc edit: ${lineRefs.join(', ')}] ${msg}`;
|
|
}
|
|
|
|
const userDisplay = _displayOverride || msg;
|
|
_displayOverride = null;
|
|
const skipBubble = _hideUserBubble;
|
|
_hideUserBubble = false;
|
|
// Auto-recovery counter: carries across a turn's auto-continues, but resets
|
|
// when the user genuinely sends a new message (so each task gets a fresh cap).
|
|
// A real user turn (visible bubble) ALWAYS resets the budget — even if a
|
|
// prior auto-continue's deferred click never cleared the pending flag — so a
|
|
// stuck flag can't silently eat the next turn's recovery budget.
|
|
if (!skipBubble) { _autoNudges = 0; _autoContinuePending = false; }
|
|
else if (_autoContinuePending) { _autoContinuePending = false; }
|
|
const _pendingAttachInfo = fileHandlerModule.getPendingCount() ? fileHandlerModule.getPendingInfo() : null;
|
|
// Pre-read importable file contents before upload clears pending files
|
|
const IMPORTABLE_EXT = /\.(txt|py|js|ts|html|htm|css|md|json|csv|yml|yaml|sh|sql|rs|go|java|c|cpp|h|rb|php|xml|jsx|tsx|log|toml|ini|conf|env|vue|svelte|scss|sass|less)$/i;
|
|
const _importableFiles = [];
|
|
if (_pendingAttachInfo && documentModule) {
|
|
const rawFiles = fileHandlerModule.getPendingRaw ? fileHandlerModule.getPendingRaw() : [];
|
|
for (let i = 0; i < _pendingAttachInfo.length; i++) {
|
|
const att = _pendingAttachInfo[i];
|
|
if (IMPORTABLE_EXT.test(att.name) && rawFiles[i]) {
|
|
_importableFiles.push({ info: att, file: rawFiles[i] });
|
|
}
|
|
}
|
|
}
|
|
let _userMsgEl = null;
|
|
if (!skipBubble) {
|
|
_userMsgEl = addMessage('user', userDisplay, null, _pendingAttachInfo ? { attachments: _pendingAttachInfo } : null);
|
|
}
|
|
messageInput.value = '';
|
|
messageInput.style.height = '';
|
|
messageInput.dispatchEvent(new Event('input'));
|
|
// Mobile: dismiss the on-screen keyboard after sending. iOS in
|
|
// particular ignores a bare blur() in some cases (or some other
|
|
// listener refocuses straight after), so we temporarily mark the
|
|
// input readonly which forces the keyboard to retract, then blur,
|
|
// then drop the readonly attribute after the keyboard is gone so
|
|
// typing still works for the next message.
|
|
if (window.innerWidth <= 768) {
|
|
try {
|
|
messageInput.setAttribute('readonly', 'readonly');
|
|
messageInput.blur();
|
|
const _dropReadonly = () => { try { messageInput.removeAttribute('readonly'); } catch {} };
|
|
setTimeout(() => {
|
|
// If the blur stuck, the input is no longer the active element —
|
|
// safe to drop readonly now so the next message can be typed.
|
|
// If it did NOT stick (some mobile browsers keep the textarea
|
|
// focused after a programmatic blur), removing readonly here would
|
|
// re-summon the keyboard mid-stream — the "bounce up" that then
|
|
// lingers until the end-of-stream blur. In that case keep readonly
|
|
// on (keyboard stays down) and drop it the moment the user taps to
|
|
// type again, so typing still works without the bounce.
|
|
if (document.activeElement === messageInput) {
|
|
messageInput.addEventListener('pointerdown', _dropReadonly, { once: true });
|
|
messageInput.addEventListener('focus', _dropReadonly, { once: true });
|
|
} else {
|
|
_dropReadonly();
|
|
}
|
|
}, 120);
|
|
} catch {}
|
|
}
|
|
|
|
let ids = [];
|
|
try {
|
|
ids = await fileHandlerModule.uploadPending();
|
|
} catch(e) {
|
|
console.error('upload failed', e);
|
|
}
|
|
|
|
// Carry over the original message's file-ids on a regenerate so the new
|
|
// send still references the same photos / docs (and picks up the user's
|
|
// edited OCR text via the server-side .vision cache). Always CONSUME the
|
|
// slot — even when empty / errored — so the regen ids can't bleed into
|
|
// an unrelated next message if uploadPending() above had thrown.
|
|
if (_pendingRegenAttachments && _pendingRegenAttachments.length) {
|
|
ids = ids.concat(_pendingRegenAttachments);
|
|
}
|
|
_pendingRegenAttachments = null;
|
|
|
|
// The optimistic user bubble was rendered before the upload assigned ids,
|
|
// so image previews couldn't show (the renderer needs att.id). Now that
|
|
// the upload resolved, stamp the ids — plus width/height for images so
|
|
// the skeleton can size itself to the photo's aspect ratio — and
|
|
// re-render so the thumbnail appears live, no refresh needed.
|
|
if (_userMsgEl && _pendingAttachInfo && ids.length) {
|
|
const _meta = fileHandlerModule.getLastUploadedMeta?.() || [];
|
|
for (let i = 0; i < _pendingAttachInfo.length && i < ids.length; i++) {
|
|
_pendingAttachInfo[i].id = ids[i];
|
|
const _m = _meta[i];
|
|
if (_m) {
|
|
if (_m.width) _pendingAttachInfo[i].width = _m.width;
|
|
if (_m.height) _pendingAttachInfo[i].height = _m.height;
|
|
}
|
|
}
|
|
chatRenderer.updateMessageAttachments(_userMsgEl, _pendingAttachInfo);
|
|
}
|
|
|
|
// Offer to import text files to document library
|
|
if (_importableFiles.length > 0) {
|
|
const existing = document.getElementById('import-prompt-banner');
|
|
if (existing) existing.remove();
|
|
const banner = document.createElement('div');
|
|
banner.id = 'import-prompt-banner';
|
|
banner.className = 'import-prompt-banner';
|
|
const label = _importableFiles.length === 1
|
|
? `Import "${_importableFiles[0].info.name}" to document library?`
|
|
: `Import ${_importableFiles.length} files to document library?`;
|
|
const textEl = document.createElement('span');
|
|
textEl.textContent = label;
|
|
banner.appendChild(textEl);
|
|
const importBtn = document.createElement('button');
|
|
importBtn.textContent = 'Import';
|
|
importBtn.addEventListener('click', async () => {
|
|
importBtn.disabled = true;
|
|
importBtn.textContent = 'Importing…';
|
|
const EXT_LANG = {'.py':'python','.js':'javascript','.ts':'typescript','.html':'html','.css':'css','.md':'markdown','.json':'json','.yml':'yaml','.yaml':'yaml','.sh':'bash','.sql':'sql','.rs':'rust','.go':'go','.java':'java','.c':'c','.cpp':'cpp','.rb':'ruby','.php':'php','.xml':'xml','.jsx':'javascript','.tsx':'typescript'};
|
|
let imported = 0;
|
|
for (const { info, file } of _importableFiles) {
|
|
try {
|
|
const content = await file.text();
|
|
const dotIdx = info.name.lastIndexOf('.');
|
|
const title = dotIdx > 0 ? info.name.slice(0, dotIdx) : info.name;
|
|
const ext = dotIdx >= 0 ? info.name.slice(dotIdx).toLowerCase() : '';
|
|
await fetch(`${API_BASE}/api/document`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ title, language: EXT_LANG[ext] || '', content }),
|
|
});
|
|
imported++;
|
|
} catch (e) { console.error('Import failed:', info.name, e); }
|
|
}
|
|
banner.textContent = `Imported ${imported} file${imported !== 1 ? 's' : ''}`;
|
|
setTimeout(() => banner.remove(), 2000);
|
|
});
|
|
banner.appendChild(importBtn);
|
|
const dismissBtn = document.createElement('button');
|
|
dismissBtn.textContent = '\u00d7';
|
|
dismissBtn.className = 'import-prompt-dismiss';
|
|
dismissBtn.addEventListener('click', () => banner.remove());
|
|
banner.appendChild(dismissBtn);
|
|
const chatBar = document.getElementById('chat-bar');
|
|
if (chatBar) chatBar.parentNode.insertBefore(banner, chatBar);
|
|
// Auto-dismiss after 15 seconds
|
|
setTimeout(() => { if (banner.parentNode) banner.remove(); }, 15000);
|
|
}
|
|
|
|
// Auto-save document editor content before sending so the AI sees latest text
|
|
if (documentModule && documentModule.isPanelOpen() && documentModule.getCurrentDocId()) {
|
|
try { await documentModule.saveDocument(); } catch(e) { console.warn('doc auto-save failed', e); }
|
|
}
|
|
|
|
// Inject document selection context if present
|
|
let finalMsg = msg;
|
|
if (docSel) {
|
|
const sels = Array.isArray(docSel) ? docSel : [docSel];
|
|
if (sels.length === 1) {
|
|
const s = sels[0];
|
|
const lineRef = s.startLine === s.endLine ? `line ${s.startLine}` : `lines ${s.startLine}-${s.endLine}`;
|
|
finalMsg = `In the document, edit this specific text (${lineRef}):\n\`\`\`\n${s.text}\n\`\`\`\n\nInstruction: ${msg}`;
|
|
} else {
|
|
const parts = sels.map((s, i) => {
|
|
const lineRef = s.startLine === s.endLine ? `line ${s.startLine}` : `lines ${s.startLine}-${s.endLine}`;
|
|
return `Selection ${i + 1} (${lineRef}):\n\`\`\`\n${s.text}\n\`\`\``;
|
|
});
|
|
finalMsg = `In the document, edit these specific sections:\n\n${parts.join('\n\n')}\n\nInstruction: ${msg}`;
|
|
}
|
|
}
|
|
|
|
// Apply inject prefix/suffix
|
|
const _inject = presetsModule.getInject ? presetsModule.getInject() : { prefix: '', suffix: '' };
|
|
let _finalMsgWithInject = finalMsg;
|
|
if (_inject.prefix) _finalMsgWithInject = _inject.prefix + ' ' + _finalMsgWithInject;
|
|
if (_inject.suffix) _finalMsgWithInject = _finalMsgWithInject + ' ' + _inject.suffix;
|
|
|
|
const fd = new FormData();
|
|
fd.append('message', _finalMsgWithInject);
|
|
fd.append('session', streamSessionId);
|
|
if (ids.length) fd.append('attachments', JSON.stringify(ids));
|
|
// Auto-save & send active doc ID so the backend sees latest content
|
|
if (documentModule && documentModule.isPanelOpen() && documentModule.getCurrentDocId()) {
|
|
try { await documentModule.saveDocument({ silent: true }); } catch (_e) { /* best-effort */ }
|
|
fd.append('active_doc_id', documentModule.getCurrentDocId());
|
|
}
|
|
// Web toggle: pre-search in Chat mode, tool permission in Agent mode
|
|
const toggleState = Storage.loadToggleState();
|
|
let isAgentMode = (toggleState.mode || 'chat') === 'agent';
|
|
// Auto-escalate to agent mode when a document is open — the user expects
|
|
// the AI to see the document and have tools to edit it
|
|
if (!isAgentMode && documentModule && documentModule.isPanelOpen() && documentModule.getCurrentDocId()) {
|
|
isAgentMode = true;
|
|
}
|
|
fd.append('mode', isAgentMode ? 'agent' : 'chat');
|
|
if (el('web-toggle').checked) {
|
|
if (isAgentMode) {
|
|
fd.append('allow_web_search', 'true');
|
|
} else {
|
|
fd.append('use_web', 'true');
|
|
}
|
|
}
|
|
if (el('research-toggle').checked) {
|
|
fd.append('use_research', 'true');
|
|
// Research always runs in chat mode — override agent if set
|
|
fd.set('mode', 'chat');
|
|
}
|
|
if (el('bash-toggle').checked) {
|
|
fd.append('allow_bash', 'true');
|
|
}
|
|
const ragChk = el('rag-toggle');
|
|
if (ragChk && !ragChk.checked) {
|
|
fd.append('use_rag', 'false');
|
|
}
|
|
const incognitoChk = el('incognito-toggle');
|
|
if (incognitoChk && incognitoChk.checked) {
|
|
fd.append('incognito', 'true');
|
|
}
|
|
if (presetsModule.getSelectedPreset()) {
|
|
fd.append('preset_id', presetsModule.getSelectedPreset());
|
|
}
|
|
|
|
|
|
const abortCtrl = new AbortController();
|
|
abortCtrl._reason = '';
|
|
currentAbort = abortCtrl;
|
|
|
|
const _tState = Storage.loadToggleState();
|
|
const _isAgent = (_tState.mode || 'chat') === 'agent';
|
|
|
|
// Timeout: 6 min for research and agent mode, 3 min otherwise
|
|
const timeoutMs = el('research-toggle').checked || _isAgent ? RESEARCH_TIMEOUT_MS : DEFAULT_TIMEOUT_MS;
|
|
const timeoutId = setTimeout(() => {
|
|
if (!abortCtrl.signal.aborted) {
|
|
timedOut = true;
|
|
abortCtrl._reason = 'timeout';
|
|
abortCtrl.abort();
|
|
}
|
|
}, timeoutMs);
|
|
|
|
const box = el('chat-history');
|
|
holder = document.createElement('div');
|
|
holder.className = 'msg msg-ai streaming';
|
|
|
|
// Track holder globally so stop button can access it
|
|
currentHolder = holder;
|
|
holder._researchQuery = msg; // Store query for notification text
|
|
|
|
const modelName = sessionModule.getCurrentModel() || null;
|
|
|
|
let loadingText = 'Initializing...';
|
|
|
|
if (el('web-toggle').checked && !_isAgent) {
|
|
const _searchLabel = searchModule ? searchModule.getProviderLabel() : 'web';
|
|
loadingText = `Searching via ${_searchLabel}...<br>
|
|
<span style="font-size: 0.9em; opacity: 0.8;">
|
|
Query: "${msg.substring(0, 50)}${msg.length > 50 ? '...' : ''}"<br>
|
|
Fetching top results...</span>`;
|
|
} else if (el('research-toggle').checked) {
|
|
loadingText = 'Deep research mode active...';
|
|
} else {
|
|
loadingText = 'Processing request...';
|
|
}
|
|
|
|
var roleLabel = _shortModel(modelName);
|
|
var _charNameInit = presetsModule.getCharacterName ? presetsModule.getCharacterName() : '';
|
|
if (_charNameInit) roleLabel = _charNameInit;
|
|
const roleTs = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
|
|
holder.innerHTML = `<div class="role">${roleLabel} <span class="role-timestamp">${roleTs}</span></div><div class="body"></div>`;
|
|
_applyModelColor(holder.querySelector('.role'), modelName);
|
|
holder.style.position = 'relative';
|
|
|
|
// Create spinner
|
|
spinner = spinnerModule.create('Initializing', 'right', 'wave');
|
|
currentSpinner = spinner;
|
|
const bodyDiv = holder.querySelector('.body');
|
|
bodyDiv.appendChild(spinner.createElement());
|
|
spinner.start();
|
|
|
|
// Update spinner message based on mode
|
|
if (el('web-toggle').checked && !_isAgent) {
|
|
spinner.updateMessage('Searching web with ' + (searchModule ? searchModule.getProviderLabel() : 'SearXNG'));
|
|
setTimeout(() => spinner.updateMessage('Processing results'), 1500);
|
|
} else if (el('research-toggle').checked) {
|
|
spinner.updateMessage('Researching');
|
|
setTimeout(() => spinner.updateMessage('Analyzing sources'), 1500);
|
|
} else {
|
|
spinner.updateMessage('Processing request');
|
|
const endpointUrlForProbe = sessionModule.getCurrentEndpointUrl ? sessionModule.getCurrentEndpointUrl() : null;
|
|
if (endpointUrlForProbe && modelName) {
|
|
processingProbeTimer = setTimeout(async () => {
|
|
processingProbeTimer = null;
|
|
if (accumulated || !spinner || !spinner.element || (currentAbort && currentAbort.signal.aborted)) return;
|
|
processingProbeAbort = new AbortController();
|
|
try {
|
|
spinner.updateMessage('Checking model endpoint');
|
|
const status = await _probeCurrentEndpointStatus(endpointUrlForProbe, processingProbeAbort.signal);
|
|
if (accumulated || !spinner || !spinner.element || (currentAbort && currentAbort.signal.aborted)) return;
|
|
if (!status) {
|
|
spinner.updateMessage('Still waiting for model');
|
|
} else if (status.alive) {
|
|
const latency = status.latency_ms ? ` (${status.latency_ms}ms)` : '';
|
|
spinner.updateMessage(`Endpoint online${latency}; waiting for first token`);
|
|
} else {
|
|
// Probe confirms the endpoint isn't responding. Don't
|
|
// sit on a hung fetch — give the user 5s to read the
|
|
// status, then auto-abort with reason='offline' so the
|
|
// catch handler shows a clean "switch model" message
|
|
// instead of leaving the spinner spinning forever.
|
|
if (status.error) console.warn('Model endpoint probe failed:', status.error);
|
|
let _countdown = 5;
|
|
spinner.updateMessage(`Endpoint offline — cancelling in ${_countdown}s`);
|
|
const _tick = setInterval(() => {
|
|
_countdown--;
|
|
if (!spinner || !spinner.element || (currentAbort && currentAbort.signal.aborted) || accumulated) {
|
|
clearInterval(_tick);
|
|
return;
|
|
}
|
|
if (_countdown > 0) {
|
|
spinner.updateMessage(`Endpoint offline — cancelling in ${_countdown}s`);
|
|
} else {
|
|
clearInterval(_tick);
|
|
if (currentAbort && !currentAbort.signal.aborted) {
|
|
currentAbort._reason = 'offline';
|
|
currentAbort.abort();
|
|
}
|
|
}
|
|
}, 1000);
|
|
}
|
|
} catch (e) {
|
|
if (e && e.name !== 'AbortError' && spinner && spinner.element && !accumulated) {
|
|
spinner.updateMessage('Still waiting for model');
|
|
}
|
|
} finally {
|
|
processingProbeAbort = null;
|
|
}
|
|
}, 10000);
|
|
}
|
|
}
|
|
|
|
const researchBtn = el('research-toggle-btn');
|
|
if (el('research-toggle').checked && researchBtn) {
|
|
researchBtn.disabled = true;
|
|
researchBtn.classList.remove('active');
|
|
}
|
|
box.appendChild(holder);
|
|
uiModule.scrollHistory();
|
|
|
|
const enableResearchBtn = () => {
|
|
if (!researchBtn) return;
|
|
researchBtn.disabled = false;
|
|
researchBtn.classList.toggle('active', el('research-toggle').checked);
|
|
};
|
|
|
|
if (el('research-toggle').checked && researchBtn) {
|
|
researchBtn.style.display = 'none';
|
|
// Uncheck research toggle so follow-up messages don't trigger another research
|
|
el('research-toggle').checked = false;
|
|
}
|
|
|
|
// User's current UTC offset in minutes (east of UTC). Threaded into
|
|
// the agent so natural-language times like "today at 9pm" are
|
|
// interpreted in YOUR timezone, not the server's.
|
|
const _tzOffsetMin = -new Date().getTimezoneOffset();
|
|
const res = await fetch(`${API_BASE}/api/chat_stream`, {
|
|
method: 'POST',
|
|
body: fd,
|
|
headers: { 'X-Tz-Offset': String(_tzOffsetMin) },
|
|
signal: abortCtrl.signal
|
|
});
|
|
|
|
clearTimeout(timeoutId);
|
|
|
|
if (!res.ok) {
|
|
if (res.status === 404) {
|
|
// Session was deleted (e.g. by AI) — reload and go to welcome
|
|
holder.remove();
|
|
if (sessionModule) await sessionModule.loadSessions();
|
|
return;
|
|
}
|
|
let errText = `Error ${res.status}`;
|
|
try {
|
|
const errBody = await res.text();
|
|
// Parse nested JSON error if present
|
|
const m = errBody.match(/"message"\s*:\s*"([^"]+)"/);
|
|
if (m) errText = m[1].replace(/\\"/g, '"');
|
|
else if (errBody.length < 200) errText = errBody;
|
|
} catch {}
|
|
// Auto-switch to chat mode for tool-related errors
|
|
if (errText.includes('tool') || errText.includes('auto')) {
|
|
errText = 'This model doesn\'t support agent tools — switched to Chat mode. Try again.';
|
|
const _ab = document.getElementById('mode-agent-btn');
|
|
const _cb = document.getElementById('mode-chat-btn');
|
|
if (_ab && _cb) {
|
|
_ab.classList.remove('active');
|
|
_cb.classList.add('active');
|
|
const _toggle = _ab.closest('.mode-toggle');
|
|
if (_toggle) _toggle.classList.add('mode-chat');
|
|
}
|
|
if (typeof Storage !== 'undefined' && Storage.KEYS) {
|
|
const _st = Storage.getJSON(Storage.KEYS.TOGGLES, {});
|
|
_st.mode = 'chat';
|
|
Storage.setJSON(Storage.KEYS.TOGGLES, _st);
|
|
}
|
|
}
|
|
typewriterInto(holder.querySelector('.body'), errText);
|
|
enableResearchBtn();
|
|
return;
|
|
}
|
|
|
|
// Mark the chat log busy while streaming so screen readers wait for the
|
|
// settled response instead of announcing every token. Cleared in finally.
|
|
const _chatLog = document.getElementById('chat-history');
|
|
if (_chatLog) _chatLog.setAttribute('aria-busy', 'true');
|
|
|
|
const reader = res.body.getReader();
|
|
const decoder = new TextDecoder();
|
|
let buffer = '';
|
|
let metrics = null;
|
|
let isThinking = false;
|
|
let thinkingStartTime = null;
|
|
// Streaming TTS: synthesize sentence-by-sentence during streaming
|
|
const streamingTTS = !!(window.aiTTSManager && window.aiTTSManager.autoPlay && window.aiTTSManager.available);
|
|
if (streamingTTS) window.aiTTSManager.streamingStart();
|
|
// Multi-bubble agent tracking
|
|
let roundHolder = holder; // Current AI text bubble (changes per round)
|
|
let roundText = ''; // Text accumulated for current round
|
|
let currentToolBubble = null; // Current tool execution bubble
|
|
let roundFinalized = false; // Whether current round's text is finalized
|
|
let _sourcesHtml = ''; // Sources box HTML to prepend to body
|
|
let _sourcesExpanded = false; // Track if user expanded sources during stream
|
|
let _sourcesData = null; // Raw sources data for rebuilding
|
|
let _sourcesType = ''; // 'web' or 'research'
|
|
let _findingsData = null; // Raw findings data for collapsible box
|
|
// _keepResearchOn removed — clarification state now persisted server-side via DB mode
|
|
// Insert sources box as a stable DOM node that won't be replaced during streaming.
|
|
// Returns the content container to use for innerHTML updates.
|
|
function _ensureStreamLayout(body) {
|
|
if (!body) return body;
|
|
// Sources are deferred to final render — don't insert during streaming
|
|
// Ensure a stable content div exists for text content
|
|
var contentDiv = body.querySelector('.stream-content');
|
|
if (!contentDiv) {
|
|
contentDiv = document.createElement('div');
|
|
contentDiv.className = 'stream-content';
|
|
body.appendChild(contentDiv);
|
|
}
|
|
return contentDiv;
|
|
}
|
|
const esc = uiModule.esc;
|
|
// Remove thinking spinner helper
|
|
_removeThinkingSpinner = () => {
|
|
const el = document.querySelector('.agent-thinking-dots');
|
|
if (el) {
|
|
if (el._spinner) el._spinner.destroy();
|
|
el.remove();
|
|
}
|
|
};
|
|
|
|
// Tool-aware thinking spinner
|
|
let _lastToolName = '';
|
|
const _searchIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" style="vertical-align:-2px;margin-right:4px"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>';
|
|
const _toolLabels = {
|
|
'web_search': _searchIcon + 'Searching',
|
|
'bash': 'Running',
|
|
'python': 'Running',
|
|
'create_document': 'Writing',
|
|
'update_document': 'Writing',
|
|
'read_document': 'Reading',
|
|
'edit_file': 'Editing',
|
|
'read_file': 'Reading',
|
|
'write_file': 'Writing',
|
|
'list_files': 'Browsing',
|
|
'image_gen': 'Generating',
|
|
'generate_image': 'Generating',
|
|
'manage_memory': 'Remembering',
|
|
'save_memory': 'Remembering',
|
|
'search_memory': 'Recalling',
|
|
'manage_session': 'Organizing',
|
|
'deep_research': 'Researching',
|
|
'list_models': 'Browsing',
|
|
'ui_control': 'Adjusting',
|
|
};
|
|
function _thinkingLabel() {
|
|
if (!_lastToolName) {
|
|
return 'Thinking';
|
|
}
|
|
// Check exact match first, then prefix match
|
|
const lower = _lastToolName.toLowerCase();
|
|
if (_toolLabels[lower]) return _toolLabels[lower];
|
|
for (const [key, label] of Object.entries(_toolLabels)) {
|
|
if (lower.includes(key) || key.includes(lower)) return label;
|
|
}
|
|
return 'Thinking';
|
|
}
|
|
|
|
function _showThinkingSpinner(label) {
|
|
if (document.querySelector('.agent-thinking-dots')) return;
|
|
const _thinkMsg = document.createElement('div');
|
|
_thinkMsg.className = 'msg msg-ai agent-thinking-dots';
|
|
const _thinkBody = document.createElement('div');
|
|
_thinkBody.className = 'body';
|
|
const _ts = spinnerModule.create(label || 'Thinking', 'right', 'wave');
|
|
_thinkBody.appendChild(_ts.createElement());
|
|
_ts.start(120);
|
|
_thinkMsg._spinner = _ts;
|
|
_thinkMsg.appendChild(_thinkBody);
|
|
document.getElementById('chat-history').appendChild(_thinkMsg);
|
|
uiModule.scrollHistory();
|
|
}
|
|
|
|
// Auto-show thinking spinner after text stops streaming
|
|
let _textPauseTimer = null;
|
|
function _scheduleThinkingSpinner() {
|
|
if (_textPauseTimer) clearTimeout(_textPauseTimer);
|
|
_textPauseTimer = setTimeout(() => {
|
|
if (!document.querySelector('.agent-thinking-dots') && isStreaming) {
|
|
_showThinkingSpinner(_thinkingLabel());
|
|
}
|
|
}, 400);
|
|
}
|
|
_cancelThinkingTimer = () => {
|
|
if (_textPauseTimer) { clearTimeout(_textPauseTimer); _textPauseTimer = null; }
|
|
};
|
|
|
|
// Document streaming state (text-fence detection)
|
|
let _docFenceOpened = false;
|
|
let _docFenceContentStart = -1;
|
|
let _liveThinkSection = null;
|
|
let _liveThinkContent = null;
|
|
let _liveThinkInner = null;
|
|
let _liveThinkHeader = null;
|
|
let _liveThinkSpinnerSlot = null;
|
|
let _liveThinkTimerEl = null;
|
|
let _liveThinkToggle = null;
|
|
let _liveThinkDomId = null;
|
|
|
|
// Offscreen measurement div — reused across renders
|
|
let _measureDiv = null;
|
|
|
|
function _replyAfterClosedThinking(text) {
|
|
const closeRe = /<\/think(?:ing)?>/gi;
|
|
let match = null;
|
|
let last = null;
|
|
while ((match = closeRe.exec(text || '')) !== null) last = match;
|
|
if (!last) return '';
|
|
return (text || '').slice(last.index + last[0].length).trimStart();
|
|
}
|
|
|
|
// Direct render helper for streaming text
|
|
_renderStream = () => {
|
|
let dt = stripToolBlocks(roundText);
|
|
const bodyEl = roundHolder.querySelector('.body');
|
|
const contentEl = _ensureStreamLayout(bodyEl);
|
|
|
|
// If thinking was already collapsed in-place, only render the reply portion
|
|
let liveReply = contentEl.querySelector('.live-reply-content');
|
|
if (liveReply) {
|
|
// Extract reply text — handle native <think> tags and non-tag patterns
|
|
const closedThinkReply = _replyAfterClosedThinking(dt);
|
|
const { thinkingBlocks, content: replyText } = closedThinkReply
|
|
? { thinkingBlocks: [''], content: closedThinkReply }
|
|
: markdownModule.extractThinkingBlocks(dt);
|
|
let replyTrimmed = '';
|
|
if (thinkingBlocks.length) {
|
|
replyTrimmed = (replyText || '').trim();
|
|
} else {
|
|
// Non-tag: check for garbled <think> (reasoning\n<think>reply)
|
|
const _gm = dt.match(/^[\s\S]+?<think(?:ing)?>\s*([\s\S]*?)(?:<\/think(?:ing)?>)?\s*$/i);
|
|
if (_gm && _gm[1].trim()) {
|
|
replyTrimmed = _gm[1].trim();
|
|
} else {
|
|
// Pure non-tag: find reply boundary
|
|
const _rPrefixes = markdownModule.startsWithReasoningPrefix;
|
|
const _rpStarts = ['Hey', 'Hi ', 'Hi!', 'Hello', 'Sure', 'Yes', 'No ', 'No,', 'Yo', 'OK', 'Here', 'Absolutely', 'Of course', 'Great', 'Alright', 'Thanks', 'Welcome', 'Good ', "I'm happy", "I'd be"];
|
|
const _rt = (replyText || '').trimStart();
|
|
if (_rPrefixes(_rt)) {
|
|
const _rLines = _rt.split('\n');
|
|
for (let _ri = 1; _ri < _rLines.length; _ri++) {
|
|
const _rl = _rLines[_ri].trim();
|
|
if (!_rl) continue;
|
|
if (_rpStarts.some(rp => _rl.startsWith(rp))) { replyTrimmed = _rLines.slice(_ri).join('\n'); break; }
|
|
}
|
|
if (!replyTrimmed) {
|
|
for (const rp of _rpStarts) {
|
|
const rx = new RegExp('[.!?]\\s*(' + rp.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')');
|
|
const m = rx.exec(_rt);
|
|
if (m && m.index > 20) { replyTrimmed = _rt.slice(m.index + 1).trim(); break; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (replyTrimmed) {
|
|
const replyHtml = markdownModule.mdToHtml(markdownModule.squashOutsideCode(replyTrimmed));
|
|
const prevLen = liveReply._prevTextLen || 0;
|
|
liveReply.innerHTML = replyHtml;
|
|
_fadeNewTokens(liveReply, prevLen);
|
|
liveReply._prevTextLen = liveReply.textContent.length;
|
|
if (window.hljs) liveReply.querySelectorAll('pre code').forEach((b) => window.hljs.highlightElement(b));
|
|
}
|
|
// Reply empty or not — preserve thinking bar, don't fall through to full re-render
|
|
uiModule.scrollHistory();
|
|
return;
|
|
}
|
|
|
|
const prevLen = contentEl._prevTextLen || 0;
|
|
// If thinking is still streaming (unclosed <think>), show indicator instead of raw text
|
|
if (markdownModule.hasUnclosedThinkTag && markdownModule.hasUnclosedThinkTag(dt)) {
|
|
const thinkStart = dt.search(/<think(?:ing)?>/i);
|
|
const thinkContent = dt.substring(thinkStart).replace(/<think(?:ing)?>/i, '').trim();
|
|
const lines = thinkContent.split('\n').length;
|
|
// Don't show beforeThink text during streaming — it'll appear in the final render
|
|
// This prevents the "split into two" duplication
|
|
contentEl.innerHTML =
|
|
'<div class="thinking-section"><div class="thinking-header"><div class="thinking-header-left">Thinking' +
|
|
(lines > 1 ? ` (${lines} lines)` : '') + '</div></div></div>';
|
|
contentEl._prevTextLen = 0;
|
|
uiModule.scrollHistory();
|
|
return;
|
|
}
|
|
const html = markdownModule.processWithThinking(markdownModule.squashOutsideCode(dt));
|
|
|
|
// Smooth expand only for regular chat text (not thinking/agent blocks)
|
|
const _hasThinking = html.includes('thinking-section');
|
|
const _isAgentRound = roundHolder !== holder;
|
|
if (!_hasThinking && !_isAgentRound) {
|
|
// Render into offscreen clone to measure new height before swapping
|
|
if (!_measureDiv) {
|
|
_measureDiv = document.createElement('div');
|
|
_measureDiv.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;z-index:-1;';
|
|
}
|
|
_measureDiv.style.width = contentEl.offsetWidth + 'px';
|
|
_measureDiv.className = contentEl.className;
|
|
_measureDiv.innerHTML = html;
|
|
contentEl.parentNode.appendChild(_measureDiv);
|
|
const measuredH = _measureDiv.offsetHeight;
|
|
_measureDiv.remove();
|
|
const curMin = parseFloat(contentEl.style.minHeight) || 0;
|
|
contentEl.style.minHeight = Math.max(curMin, measuredH) + 'px';
|
|
} else {
|
|
contentEl.style.minHeight = '';
|
|
}
|
|
|
|
contentEl.innerHTML = html;
|
|
_fadeNewTokens(contentEl, prevLen);
|
|
contentEl._prevTextLen = contentEl.textContent.length;
|
|
if (window.hljs) contentEl.querySelectorAll('pre code').forEach((b) => window.hljs.highlightElement(b));
|
|
uiModule.scrollHistory();
|
|
};
|
|
|
|
// Walk text nodes, skip past `prevLen` characters of old text,
|
|
// wrap everything after that in <span class="token-new"> for fade-in
|
|
function _fadeNewTokens(container, prevLen) {
|
|
if (!prevLen) return; // First chunk — skip, whole msg already has entrance anim
|
|
const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
|
|
let charCount = 0;
|
|
const toWrap = [];
|
|
while (walker.nextNode()) {
|
|
const node = walker.currentNode;
|
|
const len = node.textContent.length;
|
|
if (charCount + len <= prevLen) { charCount += len; continue; }
|
|
const splitAt = charCount < prevLen ? prevLen - charCount : 0;
|
|
toWrap.push({ node, splitAt });
|
|
charCount += len;
|
|
}
|
|
for (const { node, splitAt } of toWrap) {
|
|
const parent = node.parentNode;
|
|
if (!parent || parent.closest('pre, .think-content')) continue;
|
|
const target = splitAt > 0 ? node.splitText(splitAt) : node;
|
|
const span = document.createElement('span');
|
|
span.className = 'token-new';
|
|
parent.replaceChild(span, target);
|
|
span.appendChild(target);
|
|
}
|
|
}
|
|
|
|
let _nextIsError = false;
|
|
let _streamSawDone = false;
|
|
|
|
while (true) {
|
|
const { done, value } = await reader.read();
|
|
_lastReaderActivity = Date.now();
|
|
if (done) break;
|
|
|
|
buffer += decoder.decode(value, { stream: true });
|
|
const lines = buffer.split('\n');
|
|
buffer = lines.pop() || '';
|
|
|
|
for (const line of lines) {
|
|
// Log SSE event types (e.g. "event: error") for debugging
|
|
if (line.startsWith('event: ')) {
|
|
const evtType = line.slice(7).trim();
|
|
if (evtType === 'error') _nextIsError = true;
|
|
continue;
|
|
}
|
|
if (line.startsWith('data: ')) {
|
|
const data = line.slice(6);
|
|
|
|
// (thinking spinner removal is handled in agent_step / tool_start / content handlers)
|
|
|
|
// Background detection: are we on a different session?
|
|
const _isBg = (sessionModule.getCurrentSessionId() !== streamSessionId);
|
|
|
|
// On first transition to background, store state in map
|
|
if (_isBg && !_backgroundStreams.has(streamSessionId)) {
|
|
_backgroundStreams.set(streamSessionId, {
|
|
status: 'running',
|
|
accumulated: accumulated,
|
|
sourcesHtml: _sourcesHtml,
|
|
findingsData: null,
|
|
abortCtrl: currentAbort,
|
|
query: streamQuery,
|
|
metrics: null,
|
|
});
|
|
if (sessionModule && sessionModule.markStreaming) {
|
|
sessionModule.markStreaming(streamSessionId);
|
|
}
|
|
}
|
|
|
|
if (data === '[DONE]') {
|
|
_streamSawDone = true;
|
|
// Always update background map if entry exists (even if user switched back)
|
|
var bgDone = _backgroundStreams.get(streamSessionId);
|
|
if (bgDone) {
|
|
bgDone.status = 'completed';
|
|
bgDone.accumulated = accumulated;
|
|
if (_isBg) {
|
|
try {
|
|
_notifyStreamComplete(streamSessionId, streamQuery);
|
|
_insertStreamDoneToast(streamSessionId, streamQuery);
|
|
} catch (toastErr) {
|
|
console.warn('[bg-stream] Toast/notification error:', toastErr);
|
|
}
|
|
}
|
|
// CRITICAL: always mark stream complete for the sidebar dot
|
|
try {
|
|
if (sessionModule && sessionModule.markStreamComplete) {
|
|
sessionModule.markStreamComplete(streamSessionId);
|
|
}
|
|
} catch (dotErr) {
|
|
console.warn('[bg-stream] markStreamComplete error:', dotErr);
|
|
}
|
|
// Don't do foreground final render — the checkBackgroundStream poll
|
|
// will detect 'completed' and reload history cleanly
|
|
break;
|
|
}
|
|
// Force-close thinking if still open (model never output boundary)
|
|
if (isThinking) {
|
|
isThinking = false;
|
|
cancelAnimationFrame(_thinkTimerRAF);
|
|
var _elapsedDone = thinkingStartTime ? ((Date.now() - thinkingStartTime) / 1000).toFixed(1) : null;
|
|
if (_elapsedDone) {
|
|
accumulated = accumulated.replace(/<think>/i, '<think time="' + _elapsedDone + '">');
|
|
roundText = roundText.replace(/<think>/i, '<think time="' + _elapsedDone + '">');
|
|
}
|
|
if (_liveThinkHeader) _liveThinkHeader.textContent = 'View thinking process';
|
|
if (_liveThinkSpinnerSlot) _liveThinkSpinnerSlot.remove();
|
|
if (_liveThinkTimerEl && _elapsedDone) {
|
|
_liveThinkTimerEl.textContent = _elapsedDone + 's';
|
|
_liveThinkTimerEl.style.marginLeft = 'auto';
|
|
_liveThinkTimerEl.style.marginRight = '5px';
|
|
var _hdrDone = _liveThinkTimerEl.closest('.thinking-header');
|
|
// Keep the chevron furthest right with the timer to its left
|
|
// (match the live + final-render layout) — insert before the
|
|
// toggle rather than appending (which would land after it).
|
|
if (_hdrDone) {
|
|
if (_liveThinkToggle && _liveThinkToggle.parentElement === _hdrDone)
|
|
_hdrDone.insertBefore(_liveThinkTimerEl, _liveThinkToggle);
|
|
else _hdrDone.appendChild(_liveThinkTimerEl);
|
|
}
|
|
}
|
|
// Assign stable IDs
|
|
var _thinkIdDone = 'think-' + Date.now();
|
|
var _liveHdrDone = _liveThinkSection && _liveThinkSection.querySelector('.thinking-header');
|
|
if (_liveHdrDone) _liveHdrDone.dataset.thinkingId = _thinkIdDone;
|
|
if (_liveThinkContent) _liveThinkContent.id = _thinkIdDone;
|
|
if (_liveThinkToggle) _liveThinkToggle.id = _thinkIdDone + '-toggle';
|
|
// Create live-reply container so final render preserves thinking bar
|
|
var _streamElDone = _liveThinkSection ? _liveThinkSection.parentElement : roundHolder.querySelector('.stream-content');
|
|
if (!_streamElDone) _streamElDone = roundHolder.querySelector('.body');
|
|
if (_streamElDone && !_streamElDone.querySelector('.live-reply-content')) {
|
|
var _replyElDone = document.createElement('div');
|
|
_replyElDone.className = 'live-reply-content';
|
|
_streamElDone.appendChild(_replyElDone);
|
|
}
|
|
}
|
|
// Normal foreground completion — metrics will be displayed in the final render block below
|
|
break;
|
|
}
|
|
try {
|
|
const json = JSON.parse(data);
|
|
// Handle SSE error events (e.g. HTTP 404 from provider)
|
|
if (_nextIsError || json.status >= 400) {
|
|
_nextIsError = false;
|
|
const errMsg = json.text || json.error?.message || `Error ${json.status || 'unknown'}`;
|
|
console.error('Stream error:', errMsg);
|
|
if (spinner && spinner.element) spinner.destroy();
|
|
typewriterInto(roundHolder.querySelector('.body'), errMsg);
|
|
break;
|
|
}
|
|
if (json.delta || json.type === 'tool_start' || json.type === 'agent_step' || json.type === 'doc_stream_delta') {
|
|
clearProcessingProbe();
|
|
}
|
|
if (json.delta) {
|
|
_cancelThinkingTimer();
|
|
_removeThinkingSpinner();
|
|
// Text arrived after tools — connect thread line to this bubble
|
|
const _threadAbove = roundHolder?.previousElementSibling;
|
|
if (_threadAbove && _threadAbove.classList.contains('agent-thread') && !_threadAbove.classList.contains('has-bottom')) {
|
|
_threadAbove.classList.add('has-bottom');
|
|
}
|
|
// VLLM reasoning tokens: wrap in <think> tags for the thinking UI.
|
|
// Stateful open/close (not a whole-message substring check) so each round
|
|
// of a multi-round agent response gets its own <think>…</think> — otherwise
|
|
// only round 1 is wrapped and rounds 2+ reasoning leaks into the answer.
|
|
let _delta = json.delta;
|
|
if (json.thinking) {
|
|
if (!_thinkOpen) { _delta = '<think>' + _delta; _thinkOpen = true; }
|
|
} else if (_thinkOpen) {
|
|
_delta = '</think>' + _delta; _thinkOpen = false;
|
|
}
|
|
const wasEmpty = !accumulated;
|
|
accumulated += _delta;
|
|
roundText += _delta;
|
|
currentAccumulated = accumulated; // Update global tracker
|
|
// First token arrived — switch stop button from processing to streaming
|
|
if (wasEmpty && submitBtn && !_isBg) {
|
|
submitBtn.dataset.phase = 'receiving';
|
|
}
|
|
|
|
// Update background map if running in background
|
|
if (_isBg) {
|
|
var bgEntry = _backgroundStreams.get(streamSessionId);
|
|
if (bgEntry) bgEntry.accumulated = accumulated;
|
|
continue; // Skip all DOM writes
|
|
}
|
|
|
|
// --- Text-fence doc streaming (for models that don't use native tool calls) ---
|
|
if (!_docFenceOpened && documentModule && roundText.includes('```create_document\n')) {
|
|
const fenceIdx = roundText.indexOf('```create_document\n');
|
|
const afterFence = roundText.slice(fenceIdx + '```create_document\n'.length);
|
|
const fenceLines = afterFence.split('\n');
|
|
if (fenceLines.length >= 1 && fenceLines[0].trim()) {
|
|
_docFenceOpened = true;
|
|
const title = fenceLines[0].trim();
|
|
// Keep in sync with backend _KNOWN_LANGS in src/tool_implementations.py
|
|
const knownLangs = ['python','py','javascript','js','typescript','ts','html','css','json','yaml','bash','sql','rust','go','java','c','cpp','markdown','text','plain','ruby','swift','kotlin','php','email','csv','xml','toml','ini'];
|
|
const isLang = fenceLines.length >= 2 && knownLangs.includes(fenceLines[1].trim().toLowerCase());
|
|
const lang = isLang ? fenceLines[1].trim() : '';
|
|
_docFenceContentStart = fenceIdx + '```create_document\n'.length + title.length + 1 + (isLang ? fenceLines[1].length + 1 : 0);
|
|
documentModule.streamDocOpen(title, lang);
|
|
}
|
|
}
|
|
if (_docFenceOpened && _docFenceContentStart > 0 && documentModule) {
|
|
let raw = roundText.slice(_docFenceContentStart);
|
|
const closeIdx = raw.indexOf('\n```');
|
|
if (closeIdx >= 0) raw = raw.slice(0, closeIdx);
|
|
documentModule.streamDocDelta(raw);
|
|
}
|
|
|
|
// Detect thinking-in-progress:
|
|
// 1. Normal: <think>...no closing tag yet
|
|
// 2. Malformed: <think></think>\n...text but no second </think> yet
|
|
// 3. Qwen3.5: "Thinking Process:" without <think> tags
|
|
let hasUnclosedThink = markdownModule.hasUnclosedThinkTag(roundText);
|
|
// Detect non-tag thinking patterns: "Thinking:", "Thinking Process:", Gemma-style reasoning
|
|
// These patterns don't use <think> tags, so we simulate unclosed thinking during streaming
|
|
const _replyPrefixes = ['Hey', 'Hi ', 'Hi!', 'Hello', 'Sure', 'Yes', 'No ', 'No,', 'Yo', 'OK', 'Here', 'Absolutely', 'Of course', 'Great', 'Alright', 'Thanks', 'Welcome', 'Good ', "I'm happy", "I'd be"];
|
|
if (!hasUnclosedThink && !roundText.includes('<think')) {
|
|
const _trimmedRT = roundText.trimStart();
|
|
const _isReasoning = markdownModule.startsWithReasoningPrefix(_trimmedRT);
|
|
if (_isReasoning) {
|
|
// Check if we can see a reply boundary yet (newline then reply pattern)
|
|
const _lines = _trimmedRT.split('\n');
|
|
let _replyFound = false;
|
|
for (let li = 1; li < _lines.length; li++) {
|
|
const _l = _lines[li].trim();
|
|
if (!_l) continue;
|
|
if (_replyPrefixes.some(rp => _l.startsWith(rp))) {
|
|
_replyFound = true;
|
|
break;
|
|
}
|
|
}
|
|
if (!_replyFound) {
|
|
// Also check within-line: "reasoning text.Reply text"
|
|
const _inlineReply = _replyPrefixes.some(rp => {
|
|
const rx = new RegExp('[.!?]\\s*' + rp.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
|
|
const m = rx.exec(_trimmedRT);
|
|
return m && m.index > 20;
|
|
});
|
|
if (!_inlineReply) hasUnclosedThink = true;
|
|
}
|
|
}
|
|
}
|
|
if (!hasUnclosedThink && /^<think(?:ing)?>\s*<\/think(?:ing)?>/i.test(roundText)) {
|
|
// Empty <think></think> — the model likely put thinking outside the tags
|
|
const afterEmpty = roundText.replace(/^<think(?:ing)?>\s*<\/think(?:ing)?>/i, '').trim();
|
|
const closeTags = (afterEmpty.match(/<\/think(?:ing)?>/gi) || []).length;
|
|
if (closeTags === 0 && afterEmpty.length > 0) {
|
|
hasUnclosedThink = true; // still waiting for real closing tag
|
|
}
|
|
}
|
|
// Detect false close: <think>short</think> where real thinking follows untagged
|
|
// Only applies when there's a second </think> later (model leaked thinking outside tags)
|
|
// Do NOT trigger if the text after </think> contains tool calls (that's real content)
|
|
if (!hasUnclosedThink && isThinking) {
|
|
const _thinkMatch = roundText.match(/<think(?:ing)?>([\s\S]*?)<\/think(?:ing)?>/i);
|
|
const _thinkLen = _thinkMatch ? _thinkMatch[1].trim().length : 0;
|
|
if (_thinkLen < 20) {
|
|
const _afterClose = roundText.replace(/<think(?:ing)?>([\s\S]*?)<\/think(?:ing)?>/i, '').trim();
|
|
// Only keep waiting if there's trailing text that looks like thinking (not tool calls)
|
|
const _hasToolCall = /```(?:bash|python|web_search|read_file|write_file|create_document|edit_document|manage_|generate_image)/i.test(_afterClose);
|
|
const _hasOrphanClose = /<\/think(?:ing)?>/i.test(_afterClose);
|
|
if (!_hasToolCall && (_hasOrphanClose || (Date.now() - thinkingStartTime) < 500)) {
|
|
hasUnclosedThink = true; // keep waiting for real </think>
|
|
}
|
|
}
|
|
}
|
|
|
|
if (hasUnclosedThink && !isThinking) {
|
|
isThinking = true;
|
|
thinkingStartTime = Date.now();
|
|
if (spinner && spinner.element) spinner.destroy();
|
|
|
|
// Create a live thinking box — starts expanded so content streams visibly
|
|
var thinkBody = roundHolder.querySelector('.body');
|
|
var thinkContent = _ensureStreamLayout(thinkBody);
|
|
thinkContent.style.minHeight = '';
|
|
_liveThinkDomId = 'live-think-' + Date.now() + '-' + Math.random().toString(36).slice(2, 8);
|
|
thinkContent.innerHTML = `
|
|
<div class="thinking-section">
|
|
<div class="thinking-header" data-thinking-id="${_liveThinkDomId}">
|
|
<div class="thinking-header-left"><span class="live-think-header-text">Thinking\u2026</span></div>
|
|
<span class="live-think-spinner-slot" style="flex-shrink:0;margin-left:auto;"></span>
|
|
<span class="live-think-timer" style="font-size:11px;opacity:0.4;font-variant-numeric:tabular-nums;margin-left:6px;margin-right:5px;"></span>
|
|
<span class="thinking-toggle live-think-toggle" id="${_liveThinkDomId}-toggle"></span>
|
|
</div>
|
|
<div class="thinking-content" id="${_liveThinkDomId}">
|
|
<div class="thinking-content-inner live-think-inner"></div>
|
|
</div>
|
|
</div>`;
|
|
_liveThinkSection = thinkContent.querySelector('.thinking-section');
|
|
_liveThinkContent = thinkContent.querySelector('.thinking-content');
|
|
_liveThinkInner = thinkContent.querySelector('.live-think-inner');
|
|
_liveThinkHeader = thinkContent.querySelector('.live-think-header-text');
|
|
_liveThinkSpinnerSlot = thinkContent.querySelector('.live-think-spinner-slot');
|
|
_liveThinkTimerEl = thinkContent.querySelector('.live-think-timer');
|
|
_liveThinkToggle = thinkContent.querySelector('.live-think-toggle');
|
|
// Live timer
|
|
var _thinkTimerStart = Date.now();
|
|
var _thinkTimerRAF = 0;
|
|
function _tickThinkTimer() {
|
|
if (!_liveThinkTimerEl || !_liveThinkTimerEl.isConnected) return;
|
|
var s = ((Date.now() - _thinkTimerStart) / 1000).toFixed(1);
|
|
_liveThinkTimerEl.textContent = s + 's';
|
|
_thinkTimerRAF = requestAnimationFrame(_tickThinkTimer);
|
|
}
|
|
_thinkTimerRAF = requestAnimationFrame(_tickThinkTimer);
|
|
// Whirlpool spinner
|
|
if (_liveThinkSpinnerSlot) {
|
|
var _wp = spinnerModule.createWhirlpool(12);
|
|
_wp.element.style.margin = '0';
|
|
_wp.element.style.width = '12px';
|
|
_wp.element.style.height = '12px';
|
|
_wp.element.style.transform = 'translateY(-1px)'; // align the whirlpool with the header text
|
|
_liveThinkSpinnerSlot.appendChild(_wp.element);
|
|
}
|
|
} else if (hasUnclosedThink && isThinking) {
|
|
if (_liveThinkInner) {
|
|
// Extract raw thinking text (strip all <think>/<thinking> open/close tags and prefixes)
|
|
var thinkText = roundText.replace(/<\/?think(?:ing)?>/gi, '');
|
|
thinkText = thinkText.replace(/^\s*Thinking(?:\s+Process)?:\s*/i, '');
|
|
_liveThinkInner.innerHTML = markdownModule.mdToHtml(thinkText);
|
|
// Keep thinking box scrolled to bottom
|
|
var thinkBox = _liveThinkInner.closest('.thinking-content');
|
|
if (thinkBox) thinkBox.scrollTop = thinkBox.scrollHeight;
|
|
}
|
|
uiModule.scrollHistory();
|
|
continue;
|
|
} else if (!hasUnclosedThink && isThinking) {
|
|
isThinking = false;
|
|
var _thinkTextLen = _liveThinkInner ? _liveThinkInner.textContent.trim().length : 0;
|
|
|
|
// If thinking was trivially short (< 20 chars), remove the section entirely
|
|
// Models sometimes emit <think>The</think> or similar noise
|
|
if (_thinkTextLen < 20 && _liveThinkSection) {
|
|
_liveThinkSection.remove();
|
|
_liveThinkSection = null;
|
|
_liveThinkContent = null;
|
|
_liveThinkInner = null;
|
|
_liveThinkHeader = null;
|
|
_liveThinkSpinnerSlot = null;
|
|
_liveThinkTimerEl = null;
|
|
_liveThinkToggle = null;
|
|
_liveThinkDomId = null;
|
|
// Fall through to normal streaming
|
|
if (spinner && spinner.element) spinner.destroy();
|
|
_renderStream();
|
|
_scheduleThinkingSpinner();
|
|
continue;
|
|
}
|
|
|
|
// Thinking ended — smooth transition: update header, pause, then collapse
|
|
// Stop live timer and spinner
|
|
cancelAnimationFrame(_thinkTimerRAF);
|
|
var elapsed = thinkingStartTime ? ((Date.now() - thinkingStartTime) / 1000).toFixed(1) : null;
|
|
// Embed thinking time in the <think> tag for persistence on reload
|
|
if (elapsed) {
|
|
accumulated = accumulated.replace(/<think>/i, '<think time="' + elapsed + '">');
|
|
roundText = roundText.replace(/<think>/i, '<think time="' + elapsed + '">');
|
|
}
|
|
if (_liveThinkHeader) _liveThinkHeader.textContent = 'View thinking process';
|
|
if (_liveThinkSpinnerSlot) _liveThinkSpinnerSlot.remove();
|
|
// Move timer to right side of header
|
|
if (_liveThinkTimerEl && elapsed) {
|
|
_liveThinkTimerEl.textContent = elapsed + 's';
|
|
_liveThinkTimerEl.style.marginLeft = 'auto';
|
|
_liveThinkTimerEl.style.marginRight = '5px';
|
|
var _hdrRow = _liveThinkTimerEl.closest('.thinking-header');
|
|
// Chevron furthest right, timer to its left — insert before
|
|
// the toggle (appending would put the timer after it).
|
|
if (_hdrRow) {
|
|
if (_liveThinkToggle && _liveThinkToggle.parentElement === _hdrRow)
|
|
_hdrRow.insertBefore(_liveThinkTimerEl, _liveThinkToggle);
|
|
else _hdrRow.appendChild(_liveThinkTimerEl);
|
|
}
|
|
}
|
|
|
|
// Assign stable IDs (for click-toggle handler in markdown.js)
|
|
var _thinkId = 'think-' + Date.now();
|
|
var _liveHdr = _liveThinkSection && _liveThinkSection.querySelector('.thinking-header');
|
|
if (_liveHdr) _liveHdr.dataset.thinkingId = _thinkId;
|
|
if (_liveThinkContent) _liveThinkContent.id = _thinkId;
|
|
if (_liveThinkToggle) _liveThinkToggle.id = _thinkId + '-toggle';
|
|
|
|
// Append a container for the reply text that follows thinking
|
|
var _streamEl = _liveThinkSection ? _liveThinkSection.parentElement : roundHolder.querySelector('.stream-content');
|
|
if (!_streamEl) _streamEl = roundHolder.querySelector('.body');
|
|
if (_streamEl) {
|
|
var _replyEl = document.createElement('div');
|
|
_replyEl.className = 'live-reply-content';
|
|
_streamEl.appendChild(_replyEl);
|
|
}
|
|
|
|
// Render any reply text that arrived with the closing </think> token
|
|
_renderStream();
|
|
} else {
|
|
// Normal streaming
|
|
if (spinner && spinner.element) spinner.destroy();
|
|
_renderStream();
|
|
_scheduleThinkingSpinner();
|
|
// Feed streaming TTS with accumulated text
|
|
if (streamingTTS) window.aiTTSManager.streamingUpdate(roundText);
|
|
}
|
|
} else if (json.type === 'research_progress') {
|
|
if (_isBg) continue; // Skip DOM updates in background
|
|
_researchingStreamIds.add(streamSessionId);
|
|
// Highlight research button while running
|
|
var _rToggle = document.getElementById('research-toggle-btn');
|
|
if (_rToggle) _rToggle.classList.add('research-running');
|
|
// Request notification permission on first research event
|
|
if ('Notification' in window && Notification.permission === 'default') {
|
|
Notification.requestPermission();
|
|
}
|
|
// Mark session as researching in sidebar
|
|
var _rSid = sessionModule && sessionModule.getCurrentSessionId();
|
|
if (_rSid && sessionModule.markResearching) sessionModule.markResearching(_rSid);
|
|
const rp = json.data;
|
|
// Start research timer + synapse on first progress event
|
|
if (!_researchTimerEl && spinner && spinner.element) {
|
|
_researchStartTime = rp.started_at ? rp.started_at * 1000 : Date.now();
|
|
_researchAvgDuration = rp.avg_duration || null;
|
|
_researchTimerEl = document.createElement('div');
|
|
_researchTimerEl.className = 'research-timer';
|
|
// Styles in .research-timer CSS class
|
|
spinner.element.parentNode.insertBefore(_researchTimerEl, spinner.element.nextSibling);
|
|
_researchTimerInterval = setInterval(() => {
|
|
if (!_researchTimerEl) return;
|
|
var elapsed = Math.floor((Date.now() - _researchStartTime) / 1000);
|
|
var mm = String(Math.floor(elapsed / 60)).padStart(2, '0');
|
|
var ss = String(elapsed % 60).padStart(2, '0');
|
|
var txt = mm + ':' + ss;
|
|
if (_researchAvgDuration) {
|
|
var avgM = String(Math.floor(_researchAvgDuration / 60)).padStart(2, '0');
|
|
var avgS = String(Math.round(_researchAvgDuration % 60)).padStart(2, '0');
|
|
txt += ' / avg ' + avgM + ':' + avgS;
|
|
}
|
|
_researchTimerEl.textContent = txt;
|
|
}, 1000);
|
|
// Synapse visualization — insert right above the timer so
|
|
// it sits between the spinner message and the timer line.
|
|
try {
|
|
_researchSynapse = createResearchSynapse(spinner.element.parentNode, {
|
|
query: holder._researchQuery || rp.query || '',
|
|
startedAt: _researchStartTime,
|
|
});
|
|
// Move it to live between spinner and timer
|
|
if (_researchSynapse.element && _researchTimerEl) {
|
|
spinner.element.parentNode.insertBefore(_researchSynapse.element, _researchTimerEl);
|
|
}
|
|
} catch (e) { console.warn('synapse init failed', e); }
|
|
}
|
|
if (_researchSynapse) {
|
|
_researchSynapse.setPhase(rp.phase, rp);
|
|
if (typeof rp.round === 'number') _researchSynapse.setRound(rp.round);
|
|
if (typeof rp.total_sources === 'number') _researchSynapse.setSourceCount(rp.total_sources);
|
|
if (rp.phase === 'error') _researchSynapse.complete();
|
|
}
|
|
if (spinner && spinner.element) {
|
|
if (rp.phase === 'probing') {
|
|
spinner.updateMessage(`Verifying model: ${rp.model || '?'}`);
|
|
} else if (rp.phase === 'planning') {
|
|
spinner.updateMessage('Analyzing question & planning research strategy');
|
|
} else if (rp.phase === 'searching') {
|
|
const q = rp.queries ? `${rp.queries} queries` : '';
|
|
const s = rp.total_sources ? ` · ${rp.total_sources} sources` : '';
|
|
spinner.updateMessage(`Round ${rp.round || '?'}: Searching${q ? ' (' + q + ')' : ''}${s}`);
|
|
} else if (rp.phase === 'reading') {
|
|
spinner.updateMessage(rp.title ? `Reading: ${rp.title}` : `Round ${rp.round || '?'}: Reading ${rp.new_sources || ''} pages · ${rp.total_sources || 0} sources total`);
|
|
} else if (rp.phase === 'analyzing') {
|
|
spinner.updateMessage(`Round ${rp.round || '?'}: Analyzing ${rp.total_findings || 0} findings`);
|
|
} else if (rp.phase === 'writing') {
|
|
spinner.updateMessage(`Writing report · ${rp.total_sources || 0} sources`);
|
|
} else if (rp.phase === 'error') {
|
|
spinner.updateMessage(rp.message || 'Search error');
|
|
}
|
|
}
|
|
} else if (json.type === 'research_sources') {
|
|
if (_isBg) {
|
|
// Store sources HTML in background map
|
|
if (json.data && json.data.length > 0) {
|
|
_sourcesHtml = _buildSourcesBox(json.data, 'research');
|
|
var bgE = _backgroundStreams.get(streamSessionId);
|
|
if (bgE) bgE.sourcesHtml = _sourcesHtml;
|
|
}
|
|
// Clear researching indicator for this background session
|
|
if (sessionModule && sessionModule.clearResearching) sessionModule.clearResearching(streamSessionId);
|
|
continue;
|
|
}
|
|
// Research done — clean up timer, show sources box, then spinner for LLM response
|
|
_clearResearchTimer();
|
|
holder._researchSources = json.data;
|
|
var _rSid2 = sessionModule && sessionModule.getCurrentSessionId();
|
|
if (_rSid2 && sessionModule.clearResearching) sessionModule.clearResearching(_rSid2);
|
|
if (json.data && json.data.length > 0) {
|
|
_sourcesData = json.data; _sourcesType = 'research';
|
|
_sourcesHtml = _buildSourcesBox(json.data, 'research');
|
|
}
|
|
if (document.hidden) {
|
|
_notifyResearchComplete(_rSid2 || '', holder._researchQuery || '');
|
|
}
|
|
} else if (json.type === 'research_findings') {
|
|
if (_isBg) {
|
|
var bgEf = _backgroundStreams.get(streamSessionId);
|
|
if (bgEf) bgEf.findingsData = json.data;
|
|
continue;
|
|
}
|
|
if (json.data && json.data.length > 0) {
|
|
_findingsData = json.data;
|
|
}
|
|
} else if (json.type === 'research_done') {
|
|
// Research complete — reload session to show the persisted report
|
|
_clearResearchTimer();
|
|
if (sessionModule && sessionModule.clearResearching) {
|
|
sessionModule.clearResearching(streamSessionId);
|
|
}
|
|
_researchingStreamIds.delete(streamSessionId);
|
|
// Small delay then reload session history which includes the full report
|
|
setTimeout(async () => {
|
|
// Don't yank the user back to this chat if they've navigated
|
|
// away (e.g. started a new chat) while research finished —
|
|
// just refresh the sidebar so the report shows when they return.
|
|
if (sessionModule.getCurrentSessionId && sessionModule.getCurrentSessionId() === streamSessionId) {
|
|
await sessionModule.selectSession(streamSessionId);
|
|
} else {
|
|
await sessionModule.loadSessions();
|
|
}
|
|
}, 500);
|
|
continue;
|
|
} else if (json.type === 'web_sources') {
|
|
if (_isBg) {
|
|
if (json.data && json.data.length > 0) {
|
|
_sourcesHtml = _buildSourcesBox(json.data, 'web');
|
|
var bgE2 = _backgroundStreams.get(streamSessionId);
|
|
if (bgE2) bgE2.sourcesHtml = _sourcesHtml;
|
|
}
|
|
continue;
|
|
}
|
|
// Web search done — store sources for final render (don't render mid-stream)
|
|
holder._webSources = json.data;
|
|
if (json.data && json.data.length > 0) {
|
|
_sourcesData = json.data; _sourcesType = 'web';
|
|
_sourcesHtml = _buildSourcesBox(json.data, 'web');
|
|
}
|
|
} else if (json.type === 'model_fallback') {
|
|
// Model went offline — switched to fallback
|
|
var _fbData = json.data || {};
|
|
uiModule.showToast(
|
|
`Model ${_fbData.old_model || '?'} offline — switched to ${_fbData.new_model || '?'}`,
|
|
5000
|
|
);
|
|
// Update the model picker to reflect the new model
|
|
if (sessionModule && sessionModule.updateModelPicker) {
|
|
sessionModule.updateModelPicker();
|
|
}
|
|
continue;
|
|
} else if (json.type === 'model_info') {
|
|
// Update role label with model name as soon as we know it
|
|
if (!_isBg && holder) {
|
|
const roleEl = holder.querySelector('.role');
|
|
if (roleEl) {
|
|
const tsSpan = roleEl.querySelector('.role-timestamp');
|
|
var _modelLabel = _shortModel(json.model);
|
|
if (json.suffix) {
|
|
_modelLabel += ' (' + json.suffix + ')';
|
|
holder._roleSuffix = json.suffix;
|
|
}
|
|
// Prepend character name if sent by server or set locally
|
|
var _charName = json.character_name || (presetsModule.getCharacterName ? presetsModule.getCharacterName() : '');
|
|
if (_charName) {
|
|
_modelLabel = _charName;
|
|
holder._characterName = _charName;
|
|
}
|
|
roleEl.textContent = _modelLabel + ' ';
|
|
_applyModelColor(roleEl, json.model);
|
|
if (tsSpan) roleEl.appendChild(tsSpan);
|
|
}
|
|
}
|
|
} else if (json.type === 'fallback') {
|
|
// The selected model failed and another provider answered. Make
|
|
// it visible so a misconfigured provider is never silently
|
|
// masked under the selected model's name.
|
|
if (!_isBg) {
|
|
var _selM = _shortModel(json.selected_model || '');
|
|
var _ansM = _shortModel(json.answered_by || '');
|
|
uiModule.showToast('⚠ ' + _selM + ' failed — answered by ' + _ansM, 6000);
|
|
if (holder) {
|
|
var _rEl = holder.querySelector('.role');
|
|
if (_rEl) {
|
|
var _tsS = _rEl.querySelector('.role-timestamp');
|
|
_rEl.textContent = _ansM + ' (fallback) ';
|
|
_rEl.title = (json.selected_model || '') + ' failed' +
|
|
(json.reason ? ': ' + json.reason : '') + ' — answered by ' + (json.answered_by || '');
|
|
_applyModelColor(_rEl, json.answered_by);
|
|
if (_tsS) _rEl.appendChild(_tsS);
|
|
}
|
|
}
|
|
}
|
|
} else if (json.type === 'attachments') {
|
|
if (_isBg) continue;
|
|
// Update user bubble — replace file chips with image previews
|
|
const _ub = document.querySelector('#chat-history .msg-user:last-of-type');
|
|
if (_ub) {
|
|
const _aw = _ub.querySelector('.attach-cards');
|
|
if (_aw) {
|
|
for (const _att of json.data) {
|
|
const _isImg = (_att.mime || '').startsWith('image/') || /\.(png|jpg|jpeg|gif|webp|svg|bmp)$/i.test(_att.name || '');
|
|
if (_isImg && _att.id) {
|
|
// Skip if we already have a preview for this file id —
|
|
// on a regenerate the original user bubble keeps its
|
|
// photo and the backend re-emits the attachment event
|
|
// for the same id; without this guard we'd append a
|
|
// duplicate (which visually pushes the real photo off).
|
|
const _existingPreview = _aw.querySelector('[data-file-id="' + _att.id + '"]');
|
|
if (_existingPreview) {
|
|
if (_att.vision_model && !_existingPreview.querySelector('.attach-vision-model')) {
|
|
const _vl = document.createElement('div');
|
|
_vl.className = 'attach-vision-model';
|
|
_vl.textContent = 'Vision: ' + String(_att.vision_model).split('/').pop();
|
|
const _name = _existingPreview.querySelector('.attach-image-name');
|
|
if (_name) _existingPreview.insertBefore(_vl, _name);
|
|
else _existingPreview.appendChild(_vl);
|
|
}
|
|
continue;
|
|
}
|
|
const _card = _aw.querySelector('.attach-card[data-name="' + (_att.name || '').replace(/"/g, '\\"') + '"]');
|
|
const _iw = document.createElement('div');
|
|
_iw.className = 'attach-image-preview';
|
|
_iw.dataset.fileId = _att.id;
|
|
_iw.style.cursor = 'pointer';
|
|
_iw.onclick = () => window.open(API_BASE + '/api/upload/' + _att.id, '_blank');
|
|
const _im = document.createElement('img');
|
|
_im.src = API_BASE + '/api/upload/' + _att.id;
|
|
_im.alt = _att.name || 'Image';
|
|
_im.style.cssText = 'max-width:300px;max-height:200px;border-radius:6px;display:block;';
|
|
_iw.appendChild(_im);
|
|
if (_att.vision_model) {
|
|
const _vl = document.createElement('div');
|
|
_vl.className = 'attach-vision-model';
|
|
_vl.textContent = 'Vision: ' + String(_att.vision_model).split('/').pop();
|
|
_iw.appendChild(_vl);
|
|
}
|
|
if (_att.name) {
|
|
const _nm = document.createElement('div');
|
|
_nm.className = 'attach-image-name';
|
|
_nm.textContent = _att.name;
|
|
_iw.appendChild(_nm);
|
|
}
|
|
if (_card) _card.replaceWith(_iw); else _aw.appendChild(_iw);
|
|
} else {
|
|
const _card = _aw.querySelector('.attach-card[data-name="' + (_att.name || '').replace(/"/g, '\\"') + '"]');
|
|
if (_card && _att.id) {
|
|
_card.dataset.fileId = _att.id;
|
|
_card.style.cursor = 'pointer';
|
|
_card.onclick = () => window.open(API_BASE + '/api/upload/' + _att.id, '_blank');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Caption / OCR text is no longer rendered as an inline
|
|
// collapsible on the user bubble — the user can view/edit
|
|
// it via the "Caption" button on the photo thumbnail.
|
|
}
|
|
} else if (json.type === 'rag_sources') {
|
|
if (_isBg) continue;
|
|
holder._ragSources = json.data;
|
|
} else if (json.type === 'memories_used') {
|
|
if (_isBg) continue;
|
|
holder._memoriesUsed = json.data;
|
|
} else if (json.type === 'compacted') {
|
|
if (!_isBg) {
|
|
uiModule.showToast('Context compacted — older messages summarized');
|
|
}
|
|
} else if (json.type === 'metrics') {
|
|
metrics = json.data;
|
|
if (_isBg) {
|
|
var bgM = _backgroundStreams.get(streamSessionId);
|
|
if (bgM) bgM.metrics = json.data;
|
|
continue;
|
|
}
|
|
|
|
} else if (json.type === 'message_saved') {
|
|
// Wire the persisted DB id onto the just-streamed bubble so it
|
|
// can be edited/deleted immediately, without reloading the chat.
|
|
if (_isBg) continue;
|
|
if (currentHolder && json.id) currentHolder.dataset.dbId = json.id;
|
|
|
|
} else if (json.type === 'tool_start') {
|
|
if (_isBg) continue;
|
|
_cancelThinkingTimer();
|
|
_removeThinkingSpinner();
|
|
// Force-close thinking if still open — tools are real content, not thinking
|
|
if (isThinking) {
|
|
isThinking = false;
|
|
cancelAnimationFrame(_thinkTimerRAF);
|
|
var _elapsed2 = thinkingStartTime ? ((Date.now() - thinkingStartTime) / 1000).toFixed(1) : null;
|
|
if (_liveThinkHeader) _liveThinkHeader.textContent = 'View thinking process';
|
|
if (_liveThinkTimerEl) _liveThinkTimerEl.textContent = _elapsed2 ? _elapsed2 + 's' : '';
|
|
if (_liveThinkSpinnerSlot) _liveThinkSpinnerSlot.remove();
|
|
// Assign stable IDs
|
|
var _thinkId2 = 'think-' + Date.now();
|
|
var _liveHdr2 = _liveThinkSection && _liveThinkSection.querySelector('.thinking-header');
|
|
if (_liveHdr2) _liveHdr2.dataset.thinkingId = _thinkId2;
|
|
if (_liveThinkContent) _liveThinkContent.id = _thinkId2;
|
|
if (_liveThinkToggle) _liveThinkToggle.id = _thinkId2 + '-toggle';
|
|
}
|
|
_renderStream();
|
|
// --- Finalize current text bubble (only once per round) ---
|
|
if (!roundFinalized) {
|
|
roundFinalized = true;
|
|
if (spinner && spinner.element) spinner.destroy();
|
|
const dt = stripToolBlocks(roundText);
|
|
if (dt.trim()) {
|
|
var _body3 = roundHolder.querySelector('.body');
|
|
var _contentEl3 = _ensureStreamLayout(_body3);
|
|
_contentEl3.style.minHeight = ''; // clear streaming inflate
|
|
_contentEl3.innerHTML = markdownModule.processWithThinking(markdownModule.squashOutsideCode(dt));
|
|
if (window.hljs) roundHolder.querySelectorAll('pre code').forEach((b) => window.hljs.highlightElement(b));
|
|
} else {
|
|
roundHolder.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// Track tool name for contextual spinner labels
|
|
_lastToolName = json.tool || '';
|
|
|
|
// --- Thread timeline: group tools in a thread container ---
|
|
const cmd = json.command || '';
|
|
const chatBox = document.getElementById('chat-history');
|
|
// Find existing thread to append to — check last few children
|
|
// (agent_step may insert an empty msg-ai between tool rounds)
|
|
let threadWrap = null;
|
|
for (let ci = chatBox.children.length - 1; ci >= Math.max(0, chatBox.children.length - 5); ci--) {
|
|
const child = chatBox.children[ci];
|
|
if (child.classList.contains('agent-thread')) {
|
|
threadWrap = child;
|
|
break;
|
|
}
|
|
// Skip hidden (empty) bubbles and thinking spinners
|
|
if (child.style.display === 'none' || child.classList.contains('agent-thinking-dots')) continue;
|
|
// Stop if we hit a visible message bubble (has real content between tools)
|
|
if (child.classList.contains('msg')) break;
|
|
}
|
|
if (threadWrap) {
|
|
// Continuing an existing thread — remove has-bottom (agent_step may have set it
|
|
// expecting text, but we got more tools instead)
|
|
threadWrap.classList.remove('has-bottom');
|
|
} else {
|
|
threadWrap = document.createElement('div');
|
|
threadWrap.className = 'agent-thread';
|
|
// Extend line up to connect to chat bubble above (if there is one)
|
|
const _prevSib = chatBox.lastElementChild;
|
|
const _hasBubbleAbove = _prevSib && (_prevSib.classList.contains('msg') && _prevSib.style.display !== 'none');
|
|
const _hasThreadAbove = _prevSib && _prevSib.classList.contains('agent-thread');
|
|
if (_hasBubbleAbove || _hasThreadAbove || (roundText.trim() && roundHolder && roundHolder.style.display !== 'none')) {
|
|
threadWrap.classList.add('has-top');
|
|
}
|
|
chatBox.appendChild(threadWrap);
|
|
}
|
|
threadWrap.classList.add('streaming');
|
|
const toolLabel = _toolLabels[json.tool.toLowerCase()] || json.tool;
|
|
const node = document.createElement('div')
|
|
node.className = 'agent-thread-node running';
|
|
const cmdHtml = cmd ? `<pre class="agent-thread-cmd">${esc(cmd)}</pre>` : '';
|
|
node.innerHTML = `<div class="agent-thread-dot"></div><div class="agent-thread-header"><span class="agent-thread-icon">\u25B6</span><span class="agent-thread-tool">${toolLabel}</span><span class="agent-thread-wave">▁▂▃</span></div><div class="agent-thread-content">${cmdHtml}</div>`;
|
|
// Expand/collapse via delegated click handler (init at module bottom).
|
|
threadWrap.appendChild(node);
|
|
currentToolBubble = node;
|
|
// Animate the wave
|
|
const waveEl = node.querySelector('.agent-thread-wave');
|
|
if (waveEl) {
|
|
const waveFrames = ['▁▂▃', '▂▃▄', '▃▄▅', '▄▅▆', '▅▆▇', '▆▅▄', '▅▄▃', '▄▃▂'];
|
|
let waveIdx = 0;
|
|
node._waveInterval = setInterval(() => {
|
|
waveIdx = (waveIdx + 1) % waveFrames.length;
|
|
waveEl.textContent = waveFrames[waveIdx];
|
|
}, 100);
|
|
}
|
|
// Smooth per-second "cooking" timer — ticks every second (not
|
|
// just on the 2s backend heartbeat) so a long-running tool
|
|
// always shows visible motion and never reads as frozen.
|
|
node._startTime = Date.now();
|
|
node._elapsedTicker = setInterval(() => {
|
|
const hdr2 = node.querySelector('.agent-thread-header');
|
|
if (!hdr2) return;
|
|
let el2 = hdr2.querySelector('.agent-thread-elapsed');
|
|
if (!el2) {
|
|
el2 = document.createElement('span');
|
|
el2.className = 'agent-thread-elapsed';
|
|
// Sits on the LEFT, right after the icon.
|
|
const icon = hdr2.querySelector('.agent-thread-icon');
|
|
if (icon && icon.nextSibling) hdr2.insertBefore(el2, icon.nextSibling);
|
|
else hdr2.appendChild(el2);
|
|
}
|
|
const s = (Date.now() - node._startTime) / 1000;
|
|
// Hundredths so it visibly counts sub-second (1.00, 1.05, …).
|
|
el2.textContent = s < 60 ? `${s.toFixed(2)}s` : `${Math.floor(s / 60)}m ${(s % 60).toFixed(2).padStart(5, '0')}s`;
|
|
}, 50);
|
|
uiModule.scrollHistory();
|
|
|
|
} else if (json.type === 'tool_progress') {
|
|
// Long-running subprocess (bash, python) is still in
|
|
// flight — refresh the running tool card with the
|
|
// elapsed-time + tail of its stdout/stderr so the
|
|
// user doesn't stare at a blind "Running…" spinner.
|
|
if (_isBg) continue;
|
|
if (!currentToolBubble) continue;
|
|
// The per-second ticker (started in tool_start) owns the
|
|
// elapsed display; here we just surface the live output tail.
|
|
const tailStr = (json.tail || '').trim();
|
|
if (tailStr) {
|
|
let tailEl = currentToolBubble.querySelector('.agent-thread-tail');
|
|
if (!tailEl) {
|
|
tailEl = document.createElement('pre');
|
|
tailEl.className = 'agent-thread-tail';
|
|
tailEl.style.cssText = 'margin:4px 0 0;padding:6px 8px;font-size:11px;background:rgba(0,0,0,0.18);border-radius:4px;max-height:140px;overflow:auto;white-space:pre-wrap;opacity:0.85;';
|
|
const content = currentToolBubble.querySelector('.agent-thread-content');
|
|
if (content) content.appendChild(tailEl);
|
|
}
|
|
tailEl.textContent = tailStr;
|
|
tailEl.scrollTop = tailEl.scrollHeight;
|
|
}
|
|
uiModule.scrollHistory();
|
|
|
|
} else if (json.type === 'tool_output') {
|
|
if (_isBg) continue;
|
|
// --- Update the current thread node ---
|
|
if (currentToolBubble) {
|
|
// Stop wave animation + the per-second cooking ticker
|
|
if (currentToolBubble._waveInterval) {
|
|
clearInterval(currentToolBubble._waveInterval);
|
|
currentToolBubble._waveInterval = null;
|
|
}
|
|
if (currentToolBubble._elapsedTicker) {
|
|
clearInterval(currentToolBubble._elapsedTicker);
|
|
currentToolBubble._elapsedTicker = null;
|
|
}
|
|
const ok = (json.exit_code === 0 || json.exit_code == null);
|
|
const cmd = json.command || '';
|
|
let outHtml = '';
|
|
if (json.output && json.output.trim()) {
|
|
outHtml = `<details class="agent-tool-output"><summary>Output</summary><pre>${esc(json.output)}</pre></details>`;
|
|
}
|
|
const cmdHtml2 = cmd ? `<pre class="agent-thread-cmd">${esc(cmd)}</pre>` : '';
|
|
// Preserve the user's .open choice across the innerHTML
|
|
// rewrite \u2014 otherwise expanding a running tool collapses
|
|
// it as soon as the result lands, forcing the user to
|
|
// click again. Click handling is delegated (see init at
|
|
// bottom of file) so no per-node listener needed.
|
|
const _wasOpen = currentToolBubble.classList.contains('open');
|
|
currentToolBubble.className = 'agent-thread-node' + (ok ? '' : ' error') + (_wasOpen ? ' open' : '');
|
|
currentToolBubble.innerHTML = `<div class="agent-thread-dot"></div><div class="agent-thread-header"><span class="agent-thread-icon">${ok ? '\u2713' : '\u2717'}</span><span class="agent-thread-tool">${esc(json.tool)}</span><span class="agent-thread-status">${ok ? 'done' : 'failed'}</span><span class="agent-thread-chevron">\u25B6</span></div><div class="agent-thread-content">${cmdHtml2}${outHtml}</div>`;
|
|
// Reset so thinking spinner between tools says "Thinking" not the old tool's label
|
|
_lastToolName = '';
|
|
uiModule.scrollHistory();
|
|
}
|
|
// --- Render generated images inline ---
|
|
if (json.image_url) {
|
|
const chatBox = document.getElementById('chat-history');
|
|
chatBox.appendChild(_buildImageBubble(json.image_url, json.image_prompt, json.image_model, json.image_size, json.image_quality, json.image_id));
|
|
uiModule.scrollHistory();
|
|
// Notify gallery to refresh if open
|
|
window.dispatchEvent(new CustomEvent('gallery-refresh'));
|
|
}
|
|
// --- Render browser screenshots in tool output ---
|
|
if (json.screenshot && currentToolBubble) {
|
|
const contentEl = currentToolBubble.querySelector('.agent-thread-content');
|
|
if (contentEl) {
|
|
const details = document.createElement('details');
|
|
details.className = 'agent-tool-output';
|
|
details.innerHTML = `<summary>Screenshot</summary><img src="${json.screenshot}" style="max-width:100%;border-radius:6px;margin-top:6px;border:1px solid var(--border)" />`;
|
|
contentEl.appendChild(details);
|
|
}
|
|
}
|
|
// --- Reload sessions after manage_session tool (delete, rename, etc.) ---
|
|
// Debounce so bulk deletes don't fire loadSessions per call
|
|
if (json.tool === 'manage_session' && sessionModule) {
|
|
if (window._manageSessionTimer) clearTimeout(window._manageSessionTimer);
|
|
window._manageSessionTimer = setTimeout(() => sessionModule.loadSessions(), 1000);
|
|
}
|
|
// --- Live-refresh the calendar after manage_calendar (add/edit/delete) ---
|
|
// so a new event shows without the user hard-refreshing. Debounced
|
|
// so a batch of event creates only triggers one refetch.
|
|
if (json.tool === 'manage_calendar') {
|
|
if (window._manageCalTimer) clearTimeout(window._manageCalTimer);
|
|
window._manageCalTimer = setTimeout(
|
|
() => window.dispatchEvent(new CustomEvent('calendar-refresh')), 600);
|
|
}
|
|
// --- Live-refresh Memories after manage_memory changes ---
|
|
if (json.tool === 'manage_memory') {
|
|
if (window._manageMemoryTimer) clearTimeout(window._manageMemoryTimer);
|
|
window._manageMemoryTimer = setTimeout(
|
|
() => window.dispatchEvent(new CustomEvent('memory-refresh')), 600);
|
|
}
|
|
// --- Apply UI control actions embedded in tool_output ---
|
|
if (json.ui_event) {
|
|
chatStream.handleUIControl(json);
|
|
}
|
|
|
|
// Schedule a thinking spinner between tool rounds (short delay so
|
|
// agent_step in the same SSE chunk can cancel it before it shows)
|
|
_scheduleThinkingSpinner();
|
|
uiModule.scrollHistory();
|
|
|
|
} else if (json.type === 'doc_stream_open') {
|
|
if (_isBg) {
|
|
// Store for replay when user returns to this session
|
|
var bgDocOpen = _backgroundStreams.get(streamSessionId);
|
|
if (bgDocOpen) {
|
|
bgDocOpen._docTitle = json.title || '';
|
|
bgDocOpen._docLang = json.language || '';
|
|
bgDocOpen._docContent = '';
|
|
}
|
|
continue;
|
|
}
|
|
if (documentModule) {
|
|
documentModule.streamDocOpen(json.title || '', json.language || '');
|
|
}
|
|
|
|
} else if (json.type === 'doc_stream_delta') {
|
|
if (_isBg) {
|
|
var bgDocDelta = _backgroundStreams.get(streamSessionId);
|
|
if (bgDocDelta) bgDocDelta._docContent = json.content || '';
|
|
continue;
|
|
}
|
|
if (documentModule) {
|
|
documentModule.streamDocDelta(json.content || '');
|
|
}
|
|
|
|
} else if (json.type === 'doc_update') {
|
|
// doc_update means the server already saved the doc to DB.
|
|
if (_isBg) continue;
|
|
if (documentModule) {
|
|
documentModule.handleDocUpdate(json);
|
|
}
|
|
|
|
} else if (json.type === 'doc_suggestions') {
|
|
if (_isBg) continue;
|
|
if (documentModule && documentModule.handleDocSuggestions) {
|
|
documentModule.handleDocSuggestions(json);
|
|
}
|
|
|
|
} else if (json.type === 'ui_control') {
|
|
if (_isBg) continue;
|
|
chatStream.handleUIControl(json.data || {});
|
|
|
|
} else if (json.type === 'agent_step') {
|
|
if (_isBg) continue;
|
|
_cancelThinkingTimer();
|
|
_removeThinkingSpinner();
|
|
_renderStream();
|
|
// Mark thread as connected to bubble below
|
|
const _activeThread = document.querySelector('.agent-thread.streaming');
|
|
if (_activeThread) {
|
|
_activeThread.classList.add('has-bottom');
|
|
}
|
|
// --- New round: create fresh AI bubble with spinner ---
|
|
currentToolBubble = null;
|
|
roundFinalized = false;
|
|
isThinking = false;
|
|
_docFenceOpened = false;
|
|
_docFenceContentStart = -1;
|
|
const box = document.getElementById('chat-history');
|
|
const newWrap = document.createElement('div');
|
|
newWrap.className = 'msg msg-ai msg-continuation streaming';
|
|
// Add model name label
|
|
const newRole = document.createElement('div');
|
|
newRole.className = 'role';
|
|
const metaS = sessionModule.getSessions().find(s => s.id === streamSessionId);
|
|
newRole.textContent = _shortModel(metaS?.model) || '';
|
|
_applyModelColor(newRole, metaS?.model);
|
|
newWrap.appendChild(newRole);
|
|
const newBody = document.createElement('div');
|
|
newBody.className = 'body';
|
|
newWrap.appendChild(newBody);
|
|
box.appendChild(newWrap);
|
|
roundHolder = newWrap;
|
|
roundText = '';
|
|
// Destroy any previous spinner before creating new one
|
|
if (spinner && spinner.element) spinner.destroy();
|
|
// Show spinner while waiting for text (skip for research — has its own progress)
|
|
if (!_researchingStreamIds.has(streamSessionId)) {
|
|
spinner = spinnerModule.create('Generating response', 'right', 'wave');
|
|
newBody.appendChild(spinner.createElement());
|
|
spinner.start();
|
|
}
|
|
if (streamingTTS) window.aiTTSManager._streamSentencesSent = 0;
|
|
uiModule.scrollHistory();
|
|
} else if (json.type === 'budget_exceeded') {
|
|
if (_isBg) continue;
|
|
_cancelThinkingTimer();
|
|
_removeThinkingSpinner();
|
|
const budgetDiv = document.createElement('div');
|
|
budgetDiv.style.cssText = 'font-size:11px;opacity:0.6;font-style:italic;padding:4px 8px;margin:4px 0;';
|
|
budgetDiv.textContent = `Tool budget reached (${json.used}/${json.limit} calls). Agent stopped.`;
|
|
const chatBox = document.getElementById('chat-history');
|
|
chatBox.appendChild(budgetDiv);
|
|
|
|
} else if (json.type === 'teacher_takeover') {
|
|
if (_isBg) continue;
|
|
_cancelThinkingTimer();
|
|
_removeThinkingSpinner();
|
|
// Finalize any in-flight bubble so the takeover banner
|
|
// separates student attempt from teacher attempt.
|
|
if (spinner && spinner.element) { try { spinner.destroy(); } catch(_){} spinner = null; }
|
|
const chatBox = document.getElementById('chat-history');
|
|
const banner = document.createElement('div');
|
|
banner.className = 'teacher-takeover-banner';
|
|
banner.style.cssText = 'margin:10px 0;padding:8px 12px;border-left:3px solid #c08a3e;background:rgba(192,138,62,0.08);font-size:12px;color:var(--fg);border-radius:4px;';
|
|
const teacherName = json.teacher_model || 'teacher';
|
|
const why = json.student_failure ? ` — <span style="opacity:0.7">${esc(json.student_failure)}</span>` : '';
|
|
banner.innerHTML = `<strong>Teacher takeover:</strong> escalating to <code>${esc(teacherName)}</code>${why}`;
|
|
chatBox.appendChild(banner);
|
|
// Reset round bubble state so the teacher's first text starts a new bubble
|
|
roundHolder = null;
|
|
roundText = '';
|
|
roundFinalized = false;
|
|
currentToolBubble = null;
|
|
uiModule.scrollHistory();
|
|
|
|
} else if (json.type === 'skill_saved') {
|
|
if (_isBg) continue;
|
|
const chatBox = document.getElementById('chat-history');
|
|
const note = document.createElement('div');
|
|
note.className = 'skill-saved-note';
|
|
note.style.cssText = 'margin:6px 0;padding:6px 10px;border-left:3px solid #4a8a4a;background:rgba(74,138,74,0.07);font-size:12px;color:var(--fg);border-radius:4px;';
|
|
note.innerHTML = `<strong>Skill learned:</strong> <code>${esc(json.name || '')}</code>${json.category ? ` <span style="opacity:0.6">[${esc(json.category)}]</span>` : ''}`;
|
|
chatBox.appendChild(note);
|
|
uiModule.scrollHistory();
|
|
|
|
} else if (json.type === 'escalation_failed' || json.type === 'skill_save_failed') {
|
|
if (_isBg) continue;
|
|
const chatBox = document.getElementById('chat-history');
|
|
const note = document.createElement('div');
|
|
note.className = 'escalation-failed-note';
|
|
note.style.cssText = 'margin:6px 0;padding:6px 10px;border-left:3px solid #8a4a4a;background:rgba(138,74,74,0.07);font-size:12px;color:var(--fg);border-radius:4px;';
|
|
const label = json.type === 'escalation_failed' ? 'Teacher could not solve it' : 'Skill not saved';
|
|
note.innerHTML = `<strong>${label}:</strong> <span style="opacity:0.75">${esc(json.reason || '')}</span>`;
|
|
chatBox.appendChild(note);
|
|
uiModule.scrollHistory();
|
|
|
|
} else if (json.error) {
|
|
// --- Backend error (timeout, connection issue, etc.) ---
|
|
console.error('Stream error from backend:', json.error);
|
|
if (_isBg) continue;
|
|
if (spinner && spinner.element) spinner.destroy();
|
|
const errDiv = document.createElement('div');
|
|
errDiv.style.cssText = 'color: var(--color-error); font-style: italic; padding: 4px 0;';
|
|
errDiv.textContent = `[Error: ${json.error}]`;
|
|
roundHolder.querySelector('.body').appendChild(errDiv);
|
|
uiModule.scrollHistory();
|
|
}
|
|
} catch (e) {
|
|
console.error('Error parsing SSE data:', e);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!_streamSawDone) {
|
|
throw new Error('Stream closed before completion');
|
|
}
|
|
|
|
_renderStream();
|
|
_cancelThinkingTimer();
|
|
_removeThinkingSpinner();
|
|
// Stop any thread pulse animations
|
|
document.querySelectorAll('.agent-thread.streaming').forEach(t => t.classList.remove('streaming'));
|
|
// --- Final render (skip if stream was ever backgrounded or currently in background) ---
|
|
// Remove streaming class from all round bubbles
|
|
holder.classList.remove('streaming');
|
|
if (roundHolder && roundHolder !== holder) roundHolder.classList.remove('streaming');
|
|
|
|
const _isBgFinal = (sessionModule.getCurrentSessionId() !== streamSessionId) || _backgroundStreams.has(streamSessionId);
|
|
if (!_isBgFinal) {
|
|
finalMeta = sessionModule.getSessions().find(s => s.id === sessionModule.getCurrentSessionId());
|
|
finalModelName = _shortModel(metrics?.model || finalMeta?.model);
|
|
// Preserve suffix (e.g. "Research") if set by model_info event
|
|
if (holder._roleSuffix) finalModelName += ' (' + holder._roleSuffix + ')';
|
|
// Prepend character name if set
|
|
var _charNameFinal = presetsModule.getCharacterName ? presetsModule.getCharacterName() : '';
|
|
if (_charNameFinal) finalModelName = _charNameFinal;
|
|
const roleEl = holder.querySelector('.role');
|
|
if (roleEl) {
|
|
const tsSpan = roleEl.querySelector('.role-timestamp');
|
|
roleEl.textContent = finalModelName + ' ';
|
|
_applyModelColor(roleEl, metrics?.model || finalMeta?.model);
|
|
if (tsSpan) roleEl.appendChild(tsSpan);
|
|
}
|
|
holder.dataset.raw = accumulated;
|
|
|
|
// Anti-stall: a turn that ran tools but ended with essentially no
|
|
// final prose usually means the model stopped mid-task (the case
|
|
// where you had to type "did you finish?"). Offer a one-click
|
|
// Continue that resumes exactly where it left off — reuses the same
|
|
// resume mechanism as the user-stop "[Message interrupted]" button.
|
|
try {
|
|
const _usedTools = holder.querySelector('.agent-thread-node');
|
|
const _proseLen = (accumulated || '').replace(/<[^>]*>/g, '').trim().length;
|
|
if (_usedTools && _proseLen < 24 && !holder.querySelector('.agent-continue-btn')) {
|
|
const _stall = document.createElement('div');
|
|
_stall.className = 'stopped-indicator';
|
|
const _lbl = document.createElement('span');
|
|
_lbl.style.cssText = 'font-style:italic;opacity:0.7;';
|
|
_lbl.textContent = 'Paused mid-task';
|
|
_stall.appendChild(_lbl);
|
|
const _cont = document.createElement('button');
|
|
_cont.className = 'continue-btn agent-continue-btn';
|
|
_cont.title = 'Continue — pick up where it left off';
|
|
_cont.textContent = '▸';
|
|
_cont.addEventListener('click', () => {
|
|
_stall.remove();
|
|
const mi = uiModule.el('message');
|
|
if (mi) {
|
|
mi.value = 'Continue — you stopped before finishing. Pick up exactly where you left off and complete the task.';
|
|
const sb = document.querySelector('.send-btn');
|
|
if (sb) sb.click();
|
|
}
|
|
});
|
|
_stall.appendChild(_cont);
|
|
(holder.querySelector('.body') || holder).appendChild(_stall);
|
|
}
|
|
} catch (_) {}
|
|
|
|
// Clear streaming minHeight lock
|
|
const _streamContent = roundHolder.querySelector('.stream-content');
|
|
if (_streamContent) _streamContent.style.minHeight = '';
|
|
|
|
// Finalize the last round's bubble — flatten stream-content wrapper for clean DOM
|
|
const finalDisplay = stripToolBlocks(roundText);
|
|
if (finalDisplay.trim()) {
|
|
var _body4 = roundHolder.querySelector('.body');
|
|
// Preserve sources expanded state before final render
|
|
var _wasExpanded = _sourcesExpanded || !!(_body4 && _body4.querySelector('.sources-content.expanded'));
|
|
|
|
// If thinking was collapsed in-place during streaming, preserve it
|
|
var _liveReplyEl = _body4 && _body4.querySelector('.live-reply-content');
|
|
var _extracted = _liveReplyEl ? markdownModule.extractThinkingBlocks(finalDisplay) : null;
|
|
var _finalReply = '';
|
|
if (_liveReplyEl) {
|
|
// Try standard extraction first (for native <think> tags)
|
|
if (_extracted?.thinkingBlocks?.length) {
|
|
_finalReply = (_extracted.content || '').trim();
|
|
} else {
|
|
// Non-tag thinking: extract reply from raw text
|
|
// Handle garbled <think> tag: "Thinking: reasoning\n<think>reply"
|
|
const _garbledMatch = finalDisplay.match(/^[\s\S]+?<think(?:ing)?>\s*([\s\S]*?)(?:<\/think(?:ing)?>)?\s*$/i);
|
|
if (_garbledMatch && _garbledMatch[1].trim()) {
|
|
_finalReply = _garbledMatch[1].trim();
|
|
} else {
|
|
// Pure non-tag: find reply boundary by prefix patterns
|
|
const _rs2 = ['Hey', 'Hi ', 'Hi!', 'Hello', 'Sure', 'Yes', 'No ', 'No,', 'Yo', 'OK', 'Here', 'Absolutely', 'Of course', 'Great', 'Alright', 'Thanks', 'Welcome', 'Good ', "I'm happy", "I'd be"];
|
|
const _fr = (finalDisplay || '').trimStart();
|
|
if (markdownModule.startsWithReasoningPrefix(_fr)) {
|
|
const _fLines = _fr.split('\n');
|
|
for (let _fi = 1; _fi < _fLines.length; _fi++) {
|
|
const _fl = _fLines[_fi].trim();
|
|
if (!_fl) continue;
|
|
if (_rs2.some(rp => _fl.startsWith(rp))) { _finalReply = _fLines.slice(_fi).join('\n'); break; }
|
|
}
|
|
// Within-line check
|
|
if (!_finalReply) {
|
|
for (const rp of _rs2) {
|
|
const rx = new RegExp('[.!?]\\s*(' + rp.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')');
|
|
const m = rx.exec(_fr);
|
|
if (m && m.index > 20) { _finalReply = _fr.slice(m.index + 1).trim(); break; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (_liveReplyEl && _finalReply) {
|
|
// Render reply into the live-reply container (thinking bar already showing)
|
|
var _replyHtml = markdownModule.mdToHtml(markdownModule.squashOutsideCode(_finalReply));
|
|
_liveReplyEl.innerHTML = _replyHtml;
|
|
_liveReplyEl.classList.remove('live-reply-content');
|
|
if (_sourcesData) {
|
|
var _srcEl = document.createElement('div');
|
|
_srcEl.innerHTML = _buildSourcesBox(_sourcesData, _sourcesType, _wasExpanded);
|
|
_body4.insertBefore(_srcEl.firstChild || _srcEl, _body4.firstChild);
|
|
}
|
|
if (_findingsData) _body4.insertAdjacentHTML('beforeend', chatRenderer.buildFindingsBox(_findingsData));
|
|
} else {
|
|
// Full re-render (reply empty or no live-reply container)
|
|
_body4.innerHTML = (_sourcesData ? _buildSourcesBox(_sourcesData, _sourcesType, _wasExpanded) : '')
|
|
+ markdownModule.processWithThinking(markdownModule.squashOutsideCode(finalDisplay))
|
|
+ (_findingsData ? chatRenderer.buildFindingsBox(_findingsData) : '');
|
|
}
|
|
} else if (_sourcesHtml) {
|
|
var _body4b = roundHolder.querySelector('.body');
|
|
var _wasExpanded2 = _sourcesExpanded || !!(_body4b && _body4b.querySelector('.sources-content.expanded'));
|
|
_body4b.innerHTML = _sourcesData ? _buildSourcesBox(_sourcesData, _sourcesType, _wasExpanded2) : _sourcesHtml;
|
|
} else if (roundHolder !== holder) {
|
|
// Check if there's thinking content worth showing
|
|
const _thinkMatch = roundText.match(/<think(?:ing)?>([\s\S]*?)<\/think(?:ing)?>/i);
|
|
if (_thinkMatch && _thinkMatch[1].trim()) {
|
|
// Show thinking in a collapsed section even if no visible reply text
|
|
const _body4c = roundHolder.querySelector('.body');
|
|
if (_body4c) _body4c.innerHTML = markdownModule.processWithThinking(roundText);
|
|
} else {
|
|
roundHolder.style.display = 'none';
|
|
// Thread above expected a bubble below — remove has-bottom since bubble is hidden
|
|
const _lastThread = roundHolder.previousElementSibling;
|
|
if (_lastThread && _lastThread.classList.contains('agent-thread')) {
|
|
_lastThread.classList.remove('has-bottom');
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
if (window.hljs) {
|
|
roundHolder.querySelectorAll('pre code').forEach((block) => {
|
|
window.hljs.highlightElement(block);
|
|
});
|
|
}
|
|
if (markdownModule.renderMermaid) markdownModule.renderMermaid(roundHolder);
|
|
|
|
uiModule.scrollHistory();
|
|
// Render RAG sources if present
|
|
if (holder._ragSources && holder._ragSources.length) {
|
|
const details = document.createElement('details');
|
|
details.className = 'rag-sources';
|
|
const summary = document.createElement('summary');
|
|
summary.textContent = `Sources (${holder._ragSources.length} documents)`;
|
|
details.appendChild(summary);
|
|
holder._ragSources.forEach(src => {
|
|
const item = document.createElement('div');
|
|
item.className = 'rag-source-item';
|
|
const _esc = uiModule.esc;
|
|
item.innerHTML = `<strong>${_esc(src.filename)}</strong> <span class="rag-similarity">${(src.similarity * 100).toFixed(1)}%</span><div class="rag-snippet">${_esc(src.snippet)}</div>`;
|
|
details.appendChild(item);
|
|
});
|
|
holder.querySelector('.body').appendChild(details);
|
|
}
|
|
|
|
// Hide first bubble if it has no visible text content (e.g. agent went straight to tools)
|
|
if (holder !== roundHolder && holder.style.display !== 'none') {
|
|
const _hBody = holder.querySelector('.body');
|
|
const _hText = _hBody ? _hBody.textContent.trim() : '';
|
|
if (!_hText) holder.style.display = 'none';
|
|
}
|
|
|
|
// Attach footer to the last visible bubble (roundHolder for multi-round agent, holder for single)
|
|
const footerTarget = (roundHolder && roundHolder !== holder && roundHolder.style.display !== 'none') ? roundHolder : holder;
|
|
footerTarget.appendChild(createMsgFooter(footerTarget));
|
|
// Add "View Report" link for completed research
|
|
if (_researchingStreamIds.has(streamSessionId)) {
|
|
_appendViewReportLink(footerTarget, streamSessionId);
|
|
}
|
|
// Also store raw on the footer target so copy/TTS work
|
|
if (footerTarget !== holder) footerTarget.dataset.raw = accumulated;
|
|
if (addAITTSButton && accumulated && window.aiTTSManager?._provider !== 'disabled' && window.aiTTSManager?.available) {
|
|
addAITTSButton(footerTarget, accumulated);
|
|
}
|
|
// TTS auto-play: streaming mode flushes remaining text, non-streaming enqueues full message
|
|
if (accumulated && window.aiTTSManager && window.aiTTSManager.autoPlay) {
|
|
const ttsBtn = holder.querySelector('.ai-tts-button');
|
|
if (ttsBtn) {
|
|
var ICON_PLAY_TTS = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="6 3 20 12 6 21 6 3"/></svg>';
|
|
var ICON_STOP_TTS = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><rect x="5" y="5" width="14" height="14" rx="2"/></svg>';
|
|
const resetFn = () => {
|
|
ttsBtn.innerHTML = ICON_PLAY_TTS;
|
|
ttsBtn.classList.remove('playing', 'loading');
|
|
ttsBtn.style.color = '#6b7280';
|
|
ttsBtn.title = 'Read aloud';
|
|
};
|
|
if (streamingTTS) {
|
|
// Flush remaining partial sentence and attach the real button
|
|
window.aiTTSManager.streamingEnd(accumulated);
|
|
window.aiTTSManager.streamingAttachButton(ttsBtn, resetFn);
|
|
// If still playing sentences from the stream, show stop icon
|
|
if (window.aiTTSManager.isPlaying || window.aiTTSManager._processing) {
|
|
ttsBtn.innerHTML = ICON_STOP_TTS;
|
|
ttsBtn.classList.add('playing');
|
|
ttsBtn.style.color = '#ccc';
|
|
ttsBtn.title = 'Stop';
|
|
}
|
|
} else {
|
|
// Non-streaming fallback (autoPlay toggled mid-stream, etc.)
|
|
window.aiTTSManager.enqueue(accumulated, ttsBtn, resetFn);
|
|
}
|
|
}
|
|
}
|
|
if (metrics) {
|
|
displayMetrics(footerTarget, metrics);
|
|
}
|
|
// Attach variant navigation if this was a regeneration
|
|
_attachVariantNav(footerTarget);
|
|
|
|
// Merge with previous stopped message if this was a continue
|
|
if (_pendingContinue) {
|
|
const prevEl = _pendingContinue;
|
|
_pendingContinue = null;
|
|
const prevBody = prevEl.querySelector('.body');
|
|
const newBody = footerTarget.querySelector('.body');
|
|
if (prevBody && newBody && prevEl.parentNode) {
|
|
// Merge: combine raw text with *(continued)* marker
|
|
const oldRaw = prevEl.dataset.raw || '';
|
|
const newRaw = footerTarget.dataset.raw || '';
|
|
const mergedRaw = oldRaw + '\n\n*(continued)*\n\n' + newRaw;
|
|
prevEl.dataset.raw = mergedRaw;
|
|
// Re-render merged content
|
|
prevBody.innerHTML = markdownModule.processWithThinking(
|
|
markdownModule.squashOutsideCode(mergedRaw)
|
|
);
|
|
// Remove the new bubble and re-add footer to the merged one
|
|
footerTarget.remove();
|
|
const oldFooter = prevEl.querySelector('.msg-footer');
|
|
if (oldFooter) oldFooter.remove();
|
|
prevEl.appendChild(createMsgFooter(prevEl));
|
|
if (window.hljs) {
|
|
prevEl.querySelectorAll('pre code').forEach(block => window.hljs.highlightElement(block));
|
|
}
|
|
|
|
// Persist merge to server
|
|
const sid = sessionModule.getCurrentSessionId();
|
|
if (sid) {
|
|
fetch(`${API_BASE}/api/session/${sid}/merge-last-assistant`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ separator: '\n\n*(continued)*\n\n' })
|
|
}).catch(e => console.warn('merge-last-assistant failed:', e));
|
|
}
|
|
}
|
|
}
|
|
} // end if (!_isBgFinal)
|
|
|
|
} catch (err) {
|
|
_renderStream();
|
|
// Clean up any active spinner (e.g. "Generating response" during tool calls)
|
|
if (spinner && spinner.element) spinner.destroy();
|
|
_cancelThinkingTimer();
|
|
_removeThinkingSpinner();
|
|
document.querySelectorAll('.agent-thread.streaming').forEach(t => t.classList.remove('streaming'));
|
|
// Check if this stream was running in background
|
|
const _isBgCatch = (sessionModule.getCurrentSessionId() !== streamSessionId) || _backgroundStreams.has(streamSessionId);
|
|
|
|
if (_isBgCatch) {
|
|
// Error happened while backgrounded — update map, don't touch DOM
|
|
console.error('Background stream error:', err);
|
|
var bgErr = _backgroundStreams.get(streamSessionId);
|
|
if (bgErr && bgErr.status === 'completed') {
|
|
// [DONE] was already processed — this error is benign (e.g. reader.read() after close)
|
|
// Don't override the completed status; just ensure the completed dot stays
|
|
if (sessionModule && sessionModule.clearStreaming) {
|
|
sessionModule.clearStreaming(streamSessionId);
|
|
}
|
|
} else if (bgErr) {
|
|
bgErr.status = 'error';
|
|
if (sessionModule && sessionModule.clearStreaming) {
|
|
sessionModule.clearStreaming(streamSessionId);
|
|
}
|
|
}
|
|
} else {
|
|
// Stop streaming TTS on any error/abort
|
|
if (streamingTTS && window.aiTTSManager) window.aiTTSManager.stop();
|
|
|
|
if (currentAbort && currentAbort.signal.aborted) {
|
|
const abortReason = currentAbort._reason || '';
|
|
// Timeout-triggered aborts should remain visible instead of disappearing.
|
|
if (timedOut || abortReason === 'timeout') {
|
|
const timeoutMsg = _isAgent
|
|
? 'Agent response timed out. Try again, switch to a faster model, or reduce tool usage.'
|
|
: 'Response timed out. Try again.';
|
|
|
|
if (holder && !accumulated) {
|
|
holder.querySelector('.body').innerHTML =
|
|
`<div style="color: var(--color-error); font-style: italic; padding: 4px 0;">[${timeoutMsg}]</div>`;
|
|
} else if (holder && accumulated) {
|
|
const timeoutNote = document.createElement('div');
|
|
timeoutNote.className = 'stopped-indicator';
|
|
timeoutNote.innerHTML =
|
|
`<span style="color: var(--color-error);">[${timeoutMsg}]</span>`;
|
|
holder.querySelector('.body').appendChild(timeoutNote);
|
|
}
|
|
currentAbort = null;
|
|
return;
|
|
}
|
|
|
|
if (abortReason === 'offline') {
|
|
const offlineMsg = 'Endpoint offline — switch model or try again.';
|
|
if (holder && !accumulated) {
|
|
holder.querySelector('.body').innerHTML =
|
|
`<div style="color: var(--color-error); font-style: italic; padding: 4px 0;">[${offlineMsg}]</div>`;
|
|
} else if (holder && accumulated) {
|
|
const offlineNote = document.createElement('div');
|
|
offlineNote.className = 'stopped-indicator';
|
|
offlineNote.innerHTML =
|
|
`<span style="color: var(--color-error);">[${offlineMsg}]</span>`;
|
|
holder.querySelector('.body').appendChild(offlineNote);
|
|
}
|
|
currentAbort = null;
|
|
return;
|
|
}
|
|
|
|
if (abortReason === 'recovery') {
|
|
const recoveryMsg = 'Streaming was interrupted after the tab went inactive. Partial output was preserved.';
|
|
if (holder && !accumulated) {
|
|
holder.querySelector('.body').innerHTML =
|
|
`<div style="color: var(--color-error); font-style: italic; padding: 4px 0;">[${recoveryMsg}]</div>`;
|
|
} else if (holder && accumulated) {
|
|
const recoveryNote = document.createElement('div');
|
|
recoveryNote.className = 'stopped-indicator';
|
|
recoveryNote.innerHTML =
|
|
`<span style="color: var(--color-error);">[${recoveryMsg}]</span>`;
|
|
holder.querySelector('.body').appendChild(recoveryNote);
|
|
}
|
|
currentAbort = null;
|
|
return;
|
|
}
|
|
|
|
// User-initiated stop (or browser navigation abort).
|
|
// Stopped before any text arrived — keep the bubble as a
|
|
// "Cancelled by user" record (so it survives a refresh).
|
|
if (holder && !accumulated) {
|
|
_renderCancelledBubble(holder);
|
|
}
|
|
|
|
// But just in case the stop button didn't render it, render it here
|
|
if (holder && accumulated && !currentHolder) {
|
|
holder.dataset.raw = accumulated;
|
|
holder.querySelector('.body').innerHTML = markdownModule.processWithThinking(
|
|
markdownModule.squashOutsideCode(accumulated)
|
|
);
|
|
|
|
if (window.hljs) {
|
|
holder.querySelectorAll('pre code').forEach((block) => {
|
|
window.hljs.highlightElement(block);
|
|
});
|
|
}
|
|
|
|
const stoppedIndicator = document.createElement('div');
|
|
stoppedIndicator.className = 'stopped-indicator';
|
|
const stoppedLabel = document.createElement('span');
|
|
stoppedLabel.textContent = '[Message interrupted]';
|
|
stoppedIndicator.appendChild(stoppedLabel);
|
|
const continueBtn = document.createElement('button');
|
|
continueBtn.className = 'continue-btn';
|
|
continueBtn.title = 'Continue';
|
|
continueBtn.textContent = '\u25B8';
|
|
continueBtn.addEventListener('click', () => {
|
|
stoppedIndicator.remove();
|
|
_hideUserBubble = true;
|
|
_pendingContinue = holder;
|
|
const cutoff = accumulated;
|
|
const msgInput = uiModule.el('message');
|
|
if (msgInput) {
|
|
msgInput.value = 'Your previous response was interrupted. It ended with:\n\n' + cutoff.slice(-500) + '\n\nDo NOT repeat what you already said. Continue exactly from where you were cut off.';
|
|
const sb = document.querySelector('.send-btn');
|
|
if (sb) sb.click();
|
|
}
|
|
});
|
|
stoppedIndicator.appendChild(continueBtn);
|
|
holder.querySelector('.body').appendChild(stoppedIndicator);
|
|
|
|
// Tell server to mark this message as stopped
|
|
const _sid2 = sessionModule.getCurrentSessionId();
|
|
if (_sid2) fetch(`${API_BASE}/api/session/${_sid2}/mark-stopped`, { method: 'POST' }).catch(e => console.warn('mark-stopped failed:', e));
|
|
|
|
if (!holder.querySelector('.msg-footer')) {
|
|
holder.appendChild(createMsgFooter(holder));
|
|
}
|
|
|
|
uiModule.scrollHistory();
|
|
}
|
|
|
|
// Now clear the abort controller
|
|
currentAbort = null;
|
|
} else {
|
|
console.error(err);
|
|
// Stream died with a tool node still spinning. Its per-node tickers
|
|
// (_elapsedTicker 50ms / _waveInterval 100ms) are normally cleared in
|
|
// `tool_output`, which will never arrive now — without this sweep they
|
|
// fire forever on the orphaned node (and auto-recover compounds it per
|
|
// nudge). Safe here: auto-recover's new send is deferred 200ms, so no
|
|
// fresh running nodes exist yet.
|
|
document.querySelectorAll('.agent-thread-node.running').forEach(node => {
|
|
if (node._waveInterval) { clearInterval(node._waveInterval); node._waveInterval = null; }
|
|
if (node._elapsedTicker) { clearInterval(node._elapsedTicker); node._elapsedTicker = null; }
|
|
node.classList.remove('running');
|
|
});
|
|
// Stream died unexpectedly — the "silently died" case. Re-engage the
|
|
// model immediately (no wait) with a completion handshake, up to the
|
|
// cap. Only auto-recover from connection-class failures; deterministic
|
|
// errors (unsupported tools, 4xx/5xx, parse failures) surface right away
|
|
// instead of burning the nudge budget on a guaranteed-to-fail retry.
|
|
if (!(_isRecoverableStreamErr(err) && _tryAutoRecover(holder, accumulated, streamSessionId))) {
|
|
const errorHolder = document.querySelector('.msg-ai:last-of-type .body');
|
|
if (errorHolder) {
|
|
let errMsg = `Error: ${err.message}`;
|
|
// Add hint for tool-call errors
|
|
if (err.message && (err.message.includes('tool') || err.message.includes('auto'))) {
|
|
errMsg += '\n\nThis model may not support tools — try switching to Chat mode.';
|
|
}
|
|
typewriterInto(errorHolder, errMsg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} finally {
|
|
clearProcessingProbe();
|
|
// Streaming done — let screen readers announce the settled response.
|
|
const _chatLogDone = document.getElementById('chat-history');
|
|
if (_chatLogDone) _chatLogDone.setAttribute('aria-busy', 'false');
|
|
// Always clean up research tracking regardless of background state
|
|
_researchingStreamIds.delete(streamSessionId);
|
|
if (_researchingStreamIds.size === 0) {
|
|
var _rToggleCleanup = document.getElementById('research-toggle-btn');
|
|
if (_rToggleCleanup) _rToggleCleanup.classList.remove('research-running');
|
|
}
|
|
|
|
// Only reset UI state if still on the stream's session and was never backgrounded
|
|
const _isBgFinally = (sessionModule.getCurrentSessionId() !== streamSessionId) || _backgroundStreams.has(streamSessionId);
|
|
|
|
if (!_isBgFinally) {
|
|
// Reset button to idle state
|
|
updateSubmitButton('idle', submitBtn);
|
|
|
|
// Re-enable message input; on mobile blur to dismiss keyboard
|
|
if (messageInput) {
|
|
messageInput.disabled = false;
|
|
if (window.innerWidth <= 768) {
|
|
messageInput.blur();
|
|
} else {
|
|
messageInput.focus();
|
|
}
|
|
}
|
|
|
|
// Clear tracking variables
|
|
currentAccumulated = '';
|
|
currentHolder = null;
|
|
currentSpinner = null;
|
|
_researchingStreamIds.delete(streamSessionId);
|
|
// Clear research-running highlight if no more active research
|
|
if (_researchingStreamIds.size === 0) {
|
|
var _rToggle2 = document.getElementById('research-toggle-btn');
|
|
if (_rToggle2) _rToggle2.classList.remove('research-running');
|
|
}
|
|
_clearResearchTimer();
|
|
|
|
// Re-enable research button and auto-untoggle after use
|
|
// (skip if clarification round — keep toggle on for follow-up)
|
|
const _el = uiModule.el;
|
|
const _researchBtn = _el('research-toggle-btn');
|
|
const _researchToggle = _el('research-toggle');
|
|
if (_researchToggle && _researchToggle.checked) {
|
|
_researchToggle.checked = false;
|
|
Storage.setToggle('research', false);
|
|
}
|
|
if (_researchBtn) {
|
|
_researchBtn.disabled = false;
|
|
_researchBtn.classList.remove('active');
|
|
_researchBtn.style.display = 'none';
|
|
}
|
|
// Also sync overflow and tool sidebar buttons
|
|
const _overflowRes = _el('overflow-research-btn');
|
|
if (_overflowRes) _overflowRes.classList.remove('active');
|
|
const _toolRes = _el('tool-research-btn');
|
|
if (_toolRes) _toolRes.classList.remove('active');
|
|
|
|
}
|
|
|
|
// Research clarification timeout — if user doesn't reply within 5 min, show timeout
|
|
if (holder && holder._roleSuffix === 'Research' && !_researchingStreamIds.has(streamSessionId)) {
|
|
var _timeoutSessionId = streamSessionId;
|
|
var _timeoutTimer = setTimeout(async function() {
|
|
// Check if research_pending is still active (user hasn't replied)
|
|
try {
|
|
var _box = document.getElementById('chat-history');
|
|
if (_box && sessionModule.getCurrentSessionId() === _timeoutSessionId) {
|
|
var _timeoutMsg = document.createElement('div');
|
|
_timeoutMsg.className = 'msg msg-ai';
|
|
_timeoutMsg.innerHTML = '<div class="role">Odysseus</div><div class="body" style="opacity:0.6;font-style:italic;">Research clarification timed out. Toggle research again to start over.</div>';
|
|
_box.appendChild(_timeoutMsg);
|
|
uiModule.scrollHistory();
|
|
}
|
|
} catch(_te) {}
|
|
}, 5 * 60 * 1000);
|
|
// Cancel timeout if user sends a message
|
|
var _origSubmit = window._researchTimeoutTimer;
|
|
if (_origSubmit) clearTimeout(_origSubmit);
|
|
window._researchTimeoutTimer = _timeoutTimer;
|
|
}
|
|
|
|
// Release Web Lock
|
|
if (_webLockRelease) {
|
|
_webLockRelease();
|
|
_webLockRelease = null;
|
|
}
|
|
|
|
// Refresh session list after a delay (picks up auto-generated names)
|
|
setTimeout(() => {
|
|
if (sessionModule && sessionModule.loadSessions) {
|
|
sessionModule.loadSessions();
|
|
}
|
|
}, 3000);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Abort current chat request
|
|
*/
|
|
// stopServer=true ONLY for an explicit user Stop. The run is now DETACHED
|
|
// (survives tab close / navigation), so the generic abort used by cleanup
|
|
// paths (session switch, delete, reader teardown on tab close) must NOT stop
|
|
// the server run — otherwise closing the tab would kill the background task,
|
|
// defeating the whole point. Only the Stop button cancels the server run.
|
|
export function abortCurrentRequest(stopServer = false) {
|
|
if (currentAbort) {
|
|
currentAbort.abort();
|
|
// Don't set to null here - let catch block handle it
|
|
}
|
|
if (stopServer) {
|
|
try {
|
|
const _sid = _streamSessionId
|
|
|| (window.sessionModule && window.sessionModule.getCurrentSessionId && window.sessionModule.getCurrentSessionId());
|
|
if (_sid) {
|
|
fetch(`/api/chat/stop/${encodeURIComponent(_sid)}`, { method: 'POST', credentials: 'same-origin' }).catch(() => {});
|
|
}
|
|
} catch (_) {}
|
|
}
|
|
}
|
|
|
|
// ── Stall watchdog ──────────────────────────────────────────────
|
|
// Auto-recover a turn whose stream died (connection drop) or went silent:
|
|
// preserve the partial, then re-submit a completion handshake by reusing the
|
|
// existing continue/resume path. Returns false at the cap so the caller can
|
|
// surface the failure instead of nudging forever.
|
|
// Only auto-recover from connection-class failures (the genuine "silently
|
|
// died" case). Deterministic errors — unsupported tools, HTTP 4xx/5xx, JSON
|
|
// parse failures — will fail identically on retry, so surfacing them
|
|
// immediately is both more honest and avoids wasting the nudge budget.
|
|
function _isRecoverableStreamErr(err) {
|
|
if (!err) return false;
|
|
if (err.name === 'TypeError') return true; // fetch/reader network failure
|
|
const m = (err.message || '').toLowerCase();
|
|
if (/\btool\b|unsupported|json|parse|\b4\d\d\b|\b5\d\d\b/.test(m)) return false;
|
|
return /network|fetch|connection|reset|closed|aborted|stream|tim(?:e|ed)\s?out|econn|eof/.test(m);
|
|
}
|
|
|
|
function _tryAutoRecover(holder, accumulated, sessionId) {
|
|
if (_autoNudges >= _AUTO_NUDGE_CAP) return false;
|
|
_autoNudges++;
|
|
if (holder && accumulated) {
|
|
holder.dataset.raw = accumulated;
|
|
try {
|
|
holder.querySelector('.body').innerHTML =
|
|
markdownModule.processWithThinking(markdownModule.squashOutsideCode(accumulated));
|
|
} catch (_) {}
|
|
}
|
|
_pendingContinue = holder || null; // merge the continuation into the same bubble
|
|
_hideUserBubble = true; // no user bubble for the handshake
|
|
_autoContinuePending = true; // don't reset the counter on this submit
|
|
const _abandon = () => { // clear the pending flags so they can't
|
|
_pendingContinue = null; // leak into whatever chat is now open
|
|
_hideUserBubble = false;
|
|
_autoContinuePending = false;
|
|
};
|
|
// Defer so the stream's finally resets state first — otherwise the send
|
|
// button is still in "stop" mode and clicking it would toggle, not send.
|
|
setTimeout(() => {
|
|
// The stream that died may not be the chat the user is now looking at —
|
|
// never inject the recovery handshake into the wrong conversation.
|
|
if (sessionId && sessionModule.getCurrentSessionId() !== sessionId) { _abandon(); return; }
|
|
const msgInput = uiModule.el('message');
|
|
const sb = document.querySelector('.send-btn');
|
|
if (!msgInput || !sb) { _abandon(); return; }
|
|
const tail = (accumulated || '').slice(-400);
|
|
msgInput.value = tail
|
|
? `The stream dropped before you finished. It ended with:\n\n${tail}\n\nIf the task is fully complete, reply with just: DONE. Otherwise continue exactly where you left off and finish it — do not repeat what you already wrote.`
|
|
: `The stream dropped before you produced anything. If the task is already done, reply with just: DONE. Otherwise complete it now.`;
|
|
sb.click();
|
|
}, 200);
|
|
return true;
|
|
}
|
|
|
|
function _removeStallBanner() {
|
|
const b = document.getElementById('stall-banner');
|
|
if (b) b.remove();
|
|
_stallBannerShown = false;
|
|
}
|
|
function _showStallBanner(secs) {
|
|
if (document.getElementById('stall-banner')) return;
|
|
_stallBannerShown = true;
|
|
const box = document.getElementById('chat-history');
|
|
if (!box) return;
|
|
const bar = document.createElement('div');
|
|
bar.id = 'stall-banner';
|
|
bar.className = 'stall-banner';
|
|
const mins = Math.floor(secs / 60);
|
|
const label = mins >= 1 ? `${mins}m` : `${secs}s`;
|
|
bar.innerHTML = `<span class="stall-banner-txt">Quiet for ${label} — still working?</span>`;
|
|
const cont = document.createElement('button');
|
|
cont.className = 'stall-banner-btn';
|
|
cont.textContent = 'Nudge it';
|
|
cont.title = 'Stop the stalled stream and ask it to continue';
|
|
cont.addEventListener('click', () => {
|
|
_removeStallBanner();
|
|
const mi = uiModule.el('message');
|
|
if (mi) {
|
|
mi.value = 'Are you still working? If you stopped, continue exactly where you left off and finish the task.';
|
|
const sb = document.querySelector('.send-btn');
|
|
if (sb) sb.click();
|
|
}
|
|
});
|
|
const stop = document.createElement('button');
|
|
stop.className = 'stall-banner-btn stall-banner-stop';
|
|
stop.textContent = 'Stop';
|
|
stop.addEventListener('click', () => { _removeStallBanner(); abortCurrentRequest(true); });
|
|
bar.appendChild(cont);
|
|
bar.appendChild(stop);
|
|
box.appendChild(bar);
|
|
if (uiModule.scrollHistory) uiModule.scrollHistory();
|
|
}
|
|
function _startStallWatchdog() {
|
|
// Disabled: the server-side stall detector / auto-continue (agent
|
|
// loop-breaker) handles quiet/stalled streams now, so the manual
|
|
// "Quiet for Nm — still working?" banner is redundant (and annoying).
|
|
if (_stallWatchdog) { clearInterval(_stallWatchdog); _stallWatchdog = null; }
|
|
_removeStallBanner();
|
|
}
|
|
function _stopStallWatchdog() {
|
|
if (_stallWatchdog) { clearInterval(_stallWatchdog); _stallWatchdog = null; }
|
|
_removeStallBanner();
|
|
}
|
|
|
|
/** Show a "Cancelled by user" record in `holder` and persist an empty
|
|
* assistant placeholder server-side so the turn survives a refresh.
|
|
* Called from both abort paths when no tokens had streamed yet. */
|
|
function _renderCancelledBubble(holder) {
|
|
if (!holder) return;
|
|
holder.dataset.raw = '';
|
|
const body = holder.querySelector('.body');
|
|
if (body) {
|
|
body.innerHTML = '';
|
|
const indicator = document.createElement('div');
|
|
indicator.className = 'stopped-indicator';
|
|
const label = document.createElement('span');
|
|
label.style.fontStyle = 'italic';
|
|
label.style.opacity = '0.7';
|
|
label.textContent = '[Cancelled by user]';
|
|
indicator.appendChild(label);
|
|
body.appendChild(indicator);
|
|
}
|
|
if (typeof createMsgFooter === 'function' && !holder.querySelector('.msg-footer')) {
|
|
holder.appendChild(createMsgFooter(holder));
|
|
}
|
|
// Persist as an assistant message with stopped+cancelled metadata so the
|
|
// chat-history loader renders the same indicator after a refresh.
|
|
// Include the model name so the bubble header still shows which model
|
|
// was running when the user hit Stop.
|
|
const sid = sessionModule.getCurrentSessionId();
|
|
if (sid) {
|
|
let modelName = '';
|
|
try { modelName = sessionModule.getCurrentModel?.() || ''; } catch {}
|
|
// Fallback: pull from the holder's existing meta (the streaming
|
|
// placeholder usually has the model set in the header already).
|
|
if (!modelName) {
|
|
modelName = holder.dataset.model
|
|
|| holder.querySelector('.msg-header .msg-model')?.textContent
|
|
|| '';
|
|
}
|
|
fetch(`${API_BASE}/api/session/${sid}/inject_messages`, {
|
|
method: 'POST', credentials: 'same-origin',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
messages: [{
|
|
role: 'assistant',
|
|
content: '',
|
|
metadata: { stopped: true, cancelled: true, model: modelName },
|
|
}],
|
|
}),
|
|
}).catch(() => {});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Detach current stream to run in background instead of aborting.
|
|
* Called when user switches sessions mid-stream.
|
|
*/
|
|
export function detachCurrentStream(sessionId) {
|
|
if (!isStreaming || !currentAbort) {
|
|
// Not streaming — fall through to abort
|
|
abortCurrentRequest();
|
|
return;
|
|
}
|
|
// Store background stream state
|
|
_backgroundStreams.set(sessionId, {
|
|
status: 'running',
|
|
accumulated: currentAccumulated,
|
|
sourcesHtml: '',
|
|
findingsData: null,
|
|
abortCtrl: currentAbort,
|
|
query: currentHolder ? (currentHolder._researchQuery || '') : '',
|
|
metrics: null,
|
|
});
|
|
// Mark session with pulsing dot in sidebar
|
|
if (sessionModule && sessionModule.markStreaming) {
|
|
sessionModule.markStreaming(sessionId);
|
|
}
|
|
// Clear local state WITHOUT aborting the fetch
|
|
currentAbort = null;
|
|
isStreaming = false;
|
|
currentHolder = null;
|
|
currentAccumulated = '';
|
|
// Reset submit button so the new chat is ready to send
|
|
const submitBtn = document.querySelector('.send-btn');
|
|
if (submitBtn) updateSubmitButton('idle', submitBtn);
|
|
}
|
|
|
|
// _notifyStreamComplete and _insertStreamDoneToast now in chatStream.js
|
|
var _notifyStreamComplete = chatStream.notifyStreamComplete;
|
|
var _insertStreamDoneToast = chatStream.insertStreamDoneToast;
|
|
|
|
/**
|
|
* Check for background streams when switching to a session.
|
|
* Called after history loads on session switch.
|
|
*/
|
|
export function checkBackgroundStream(sessionId) {
|
|
if (!sessionId || !_backgroundStreams.has(sessionId)) return;
|
|
var entry = _backgroundStreams.get(sessionId);
|
|
|
|
if (entry.status === 'completed') {
|
|
// Response is already saved to DB and will appear in history — just clean up
|
|
_backgroundStreams.delete(sessionId);
|
|
return;
|
|
}
|
|
|
|
if (entry.status === 'error') {
|
|
_backgroundStreams.delete(sessionId);
|
|
var box = document.getElementById('chat-history');
|
|
if (box) {
|
|
var errHolder = document.createElement('div');
|
|
errHolder.className = 'msg msg-ai';
|
|
errHolder.innerHTML = '<div class="body"><i style="color: var(--color-error);">[Background stream encountered an error]</i></div>';
|
|
box.appendChild(errHolder);
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (entry.status === 'running') {
|
|
// Stream is still active — show a clean spinner, poll until done,
|
|
// then reload history to show the final saved response.
|
|
var box = document.getElementById('chat-history');
|
|
if (!box) return;
|
|
|
|
// Replay any doc content that was streamed in the background
|
|
if (entry._docTitle != null && documentModule) {
|
|
documentModule.streamDocOpen(entry._docTitle, entry._docLang || '');
|
|
if (entry._docContent) {
|
|
documentModule.streamDocDelta(entry._docContent);
|
|
}
|
|
}
|
|
|
|
var holder = document.createElement('div');
|
|
holder.className = 'msg msg-ai';
|
|
var meta = sessionModule.getSessions().find(function(s) { return s.id === sessionId; });
|
|
var roleLabel = _shortModel(meta && meta.model);
|
|
var roleTs = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
|
|
holder.innerHTML = '<div class="role">' + roleLabel + ' <span class="role-timestamp">' + roleTs + '</span></div><div class="body"></div>';
|
|
_applyModelColor(holder.querySelector('.role'), meta && meta.model);
|
|
|
|
var bodyDiv = holder.querySelector('.body');
|
|
var spinner = spinnerModule.create('Response streaming in background', 'right');
|
|
bodyDiv.appendChild(spinner.createElement());
|
|
spinner.start();
|
|
|
|
box.appendChild(holder);
|
|
uiModule.scrollHistory();
|
|
|
|
// Poll map until stream finishes, then reload history
|
|
var pollId = setInterval(function() {
|
|
if (sessionModule.getCurrentSessionId() !== sessionId) {
|
|
clearInterval(pollId);
|
|
spinner.destroy();
|
|
if (holder.parentNode) holder.remove();
|
|
return;
|
|
}
|
|
// Update doc content while polling
|
|
var curPoll = _backgroundStreams.get(sessionId);
|
|
if (curPoll && curPoll._docContent && documentModule) {
|
|
documentModule.streamDocDelta(curPoll._docContent);
|
|
}
|
|
if (!curPoll || curPoll.status !== 'running') {
|
|
clearInterval(pollId);
|
|
spinner.destroy();
|
|
if (holder.parentNode) holder.remove(); // Remove entire holder, not just spinner
|
|
_backgroundStreams.delete(sessionId);
|
|
// Reload session to show the completed response — but only if the user
|
|
// is still on it; don't yank them back from a new chat they opened.
|
|
if (sessionModule.getCurrentSessionId && sessionModule.getCurrentSessionId() === sessionId) {
|
|
sessionModule.selectSession(sessionId);
|
|
} else {
|
|
sessionModule.loadSessions();
|
|
}
|
|
}
|
|
}, 500);
|
|
}
|
|
}
|
|
|
|
// Tag short single-line code blocks with .pre-compact so the CSS can
|
|
// render the Run/Edit/Copy buttons as a slim row that doesn't make a
|
|
// 1-line bash block taller than its own contents.
|
|
function _markCompactPre(pre) {
|
|
const code = pre.querySelector('code');
|
|
if (!code) return;
|
|
const txt = code.textContent || '';
|
|
// Count visible lines — ignore trailing newline (common with fenced
|
|
// blocks) and treat any empty extra line as not a real second line.
|
|
const lines = txt.replace(/\n+$/, '').split('\n');
|
|
const compact = lines.length <= 1 && txt.length < 200;
|
|
pre.classList.toggle('pre-compact', compact);
|
|
}
|
|
function _scanCompactPres(root) {
|
|
if (!root || !root.querySelectorAll) return;
|
|
root.querySelectorAll('pre').forEach(_markCompactPre);
|
|
}
|
|
// Global observer so any <pre> added anywhere in the app (chat stream,
|
|
// chat re-renders, document library chat previews, slash commands,
|
|
// research previews, etc.) gets tagged without each call site needing
|
|
// to remember.
|
|
(function _initCompactPreObserver() {
|
|
if (window._cmpPreObserverWired) return;
|
|
window._cmpPreObserverWired = true;
|
|
_scanCompactPres(document.body);
|
|
const obs = new MutationObserver((muts) => {
|
|
for (const m of muts) {
|
|
for (const n of m.addedNodes) {
|
|
if (n.nodeType !== 1) continue;
|
|
if (n.tagName === 'PRE') _markCompactPre(n);
|
|
if (n.querySelectorAll) _scanCompactPres(n);
|
|
}
|
|
}
|
|
});
|
|
obs.observe(document.body, { childList: true, subtree: true });
|
|
})();
|
|
|
|
/**
|
|
* Initialize event listeners
|
|
*/
|
|
export function initListeners() {
|
|
// Global event delegation for copy-code buttons
|
|
document.addEventListener('click', (e) => {
|
|
const btn = e.target.closest('.copy-code');
|
|
if (!btn) return;
|
|
e.stopPropagation();
|
|
const code = btn.getAttribute('data-code');
|
|
if (code && uiModule) {
|
|
uiModule.copyToClipboard(code);
|
|
// Visual feedback: swap the icon to a checkmark (regular size)
|
|
// and add .copied which the CSS uses to flash green + pulse.
|
|
// For slim/.pre-compact buttons the label text comes from a
|
|
// CSS ::before — swap it via data-state so we don't break the
|
|
// text-button layout.
|
|
const origHTML = btn.innerHTML;
|
|
const isCompact = !!btn.closest('pre.pre-compact');
|
|
if (!isCompact) {
|
|
btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
|
|
}
|
|
btn.classList.add('copied');
|
|
btn.dataset.state = 'copied';
|
|
setTimeout(() => {
|
|
if (!isCompact) btn.innerHTML = origHTML;
|
|
btn.classList.remove('copied');
|
|
delete btn.dataset.state;
|
|
}, 1500);
|
|
}
|
|
});
|
|
|
|
// Run code button delegation
|
|
document.addEventListener('click', (e) => {
|
|
const btn = e.target.closest('.run-code');
|
|
if (!btn) return;
|
|
e.stopPropagation();
|
|
if (codeRunnerModule) codeRunnerModule.run(btn);
|
|
});
|
|
|
|
// Edit code button delegation — toggle contentEditable on the code element
|
|
document.addEventListener('click', (e) => {
|
|
const btn = e.target.closest('.edit-code');
|
|
if (!btn) return;
|
|
e.stopPropagation();
|
|
const pre = btn.closest('pre');
|
|
if (!pre) return;
|
|
const codeEl = pre.querySelector('code');
|
|
if (!codeEl) return;
|
|
const isEditing = codeEl.contentEditable !== 'false' && codeEl.contentEditable !== 'inherit';
|
|
if (isEditing) {
|
|
// Save: exit edit mode, update data-code on copy/run buttons
|
|
codeEl.contentEditable = 'false';
|
|
codeEl.classList.remove('editing');
|
|
pre.classList.remove('editing');
|
|
const newCode = codeEl.textContent;
|
|
const copyBtn = pre.querySelector('.copy-code');
|
|
if (copyBtn) copyBtn.setAttribute('data-code', newCode);
|
|
const runBtn = pre.querySelector('.run-code');
|
|
if (runBtn) runBtn.setAttribute('data-code', newCode);
|
|
// Swap icon back to pencil
|
|
btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>';
|
|
btn.title = 'Edit';
|
|
btn.classList.remove('active');
|
|
} else {
|
|
// Enter edit mode. Firefox (especially on mobile) historically lacks
|
|
// contentEditable="plaintext-only" — setting it there leaves the block
|
|
// non-editable, so the tap "just gets a checkmark" with no way to type.
|
|
// Fall back to "true" when plaintext-only didn't take.
|
|
try { codeEl.contentEditable = 'plaintext-only'; } catch (_) { /* unsupported value */ }
|
|
if (codeEl.contentEditable !== 'plaintext-only') codeEl.contentEditable = 'true';
|
|
codeEl.classList.add('editing');
|
|
pre.classList.add('editing');
|
|
// preventScroll keeps the page from jumping to the codeblock when
|
|
// focusing the editable on mobile — the browser would otherwise
|
|
// scroll it into view above the keyboard, which reads as "auto-
|
|
// scroll triggered by clicking Edit".
|
|
try { codeEl.focus({ preventScroll: true }); } catch (_) { codeEl.focus(); }
|
|
// Swap icon to checkmark
|
|
btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
|
|
btn.title = 'Done editing';
|
|
btn.classList.add('active');
|
|
}
|
|
});
|
|
|
|
// Tapping a code block body (not its buttons) toggles the overlay
|
|
// copy/edit/run buttons, which otherwise cover the text on mobile.
|
|
document.addEventListener('click', (e) => {
|
|
if (e.target.closest('.copy-code, .edit-code, .run-code')) return;
|
|
const pre = e.target.closest('pre');
|
|
if (!pre || !pre.querySelector('.copy-code')) return;
|
|
// Don't hide while editing — the buttons (incl. the Done checkmark) matter.
|
|
if (pre.classList.contains('editing')) return;
|
|
pre.classList.toggle('buttons-hidden');
|
|
});
|
|
|
|
// Position copy/run buttons top or bottom based on viewport position
|
|
// — DESKTOP ONLY. On mobile this was constantly retriggering on tap
|
|
// (synthetic mouseenter) and made the buttons jump, so the user's
|
|
// finger landed on the moved target. Keep them pinned at the top on
|
|
// touch — no auto-repositioning.
|
|
document.addEventListener('mouseenter', (e) => {
|
|
if (window.matchMedia('(max-width: 768px)').matches) return;
|
|
const pre = e.target.closest ? e.target.closest('pre') : null;
|
|
if (!pre || pre.dataset.btnPosComputed) return;
|
|
const rect = pre.getBoundingClientRect();
|
|
const threshold = window.innerHeight * 0.35;
|
|
const isBottom = rect.top < threshold;
|
|
const copyBtn = pre.querySelector('.copy-code');
|
|
if (copyBtn) copyBtn.classList.toggle('bottom', isBottom);
|
|
const editBtn = pre.querySelector('.edit-code');
|
|
if (editBtn) editBtn.classList.toggle('bottom', isBottom);
|
|
const runBtn = pre.querySelector('.run-code');
|
|
if (runBtn) runBtn.classList.toggle('bottom', isBottom);
|
|
pre.dataset.btnPosComputed = '1';
|
|
}, true);
|
|
|
|
// Tab suspension recovery: when user tabs back in, check if stream froze
|
|
document.addEventListener('visibilitychange', () => {
|
|
if (document.visibilityState !== 'visible') return;
|
|
if (!isStreaming) return;
|
|
|
|
// Stream claims to be running — check if reader is actually alive
|
|
const staleSince = Date.now() - _lastReaderActivity;
|
|
if (staleSince < 20000) return; // Active recently, probably fine
|
|
|
|
// Reader hasn't produced data in 5+ seconds after tab resume.
|
|
// Give it a short grace period then recover.
|
|
console.warn('[tab-recovery] Stream appears frozen (no activity for ' + Math.round(staleSince/1000) + 's). Recovering...');
|
|
|
|
setTimeout(() => {
|
|
// Re-check — maybe the reader woke up during the grace period
|
|
if (!isStreaming) return;
|
|
const stillStale = Date.now() - _lastReaderActivity;
|
|
if (stillStale < 5000) return; // Came back to life
|
|
|
|
console.warn('[tab-recovery] Stream confirmed dead. Aborting and reloading session.');
|
|
|
|
// Abort the frozen stream, but preserve the visible bubble.
|
|
if (currentAbort) {
|
|
currentAbort._reason = 'recovery';
|
|
currentAbort.abort();
|
|
}
|
|
isStreaming = false;
|
|
|
|
// Release Web Lock
|
|
if (_webLockRelease) {
|
|
_webLockRelease();
|
|
_webLockRelease = null;
|
|
}
|
|
|
|
// Reset UI state
|
|
var _submitBtn = document.getElementById('submit');
|
|
updateSubmitButton('idle', _submitBtn);
|
|
var _msgInput = document.getElementById('message');
|
|
if (_msgInput) _msgInput.disabled = false;
|
|
}, 2000); // 2 second grace period
|
|
});
|
|
|
|
// On mobile, fade out welcome text when keyboard opens to prevent overlap
|
|
if (window.innerWidth <= 768) {
|
|
const msgInput = document.getElementById('message');
|
|
if (msgInput) {
|
|
msgInput.addEventListener('focus', () => {
|
|
const ws = document.getElementById('welcome-screen');
|
|
if (ws && !ws.classList.contains('hidden')) {
|
|
ws.classList.add('kb-hidden');
|
|
}
|
|
});
|
|
msgInput.addEventListener('blur', () => {
|
|
const ws = document.getElementById('welcome-screen');
|
|
if (ws && !ws.classList.contains('hidden')) {
|
|
// Delay re-show so tapping within chatbox doesn't flash
|
|
setTimeout(() => {
|
|
if (document.activeElement !== msgInput) {
|
|
ws.classList.remove('kb-hidden');
|
|
}
|
|
}, 200);
|
|
}
|
|
});
|
|
}
|
|
// Smooth viewport resize when keyboard opens/closes
|
|
if (window.visualViewport) {
|
|
window.visualViewport.addEventListener('resize', () => {
|
|
document.documentElement.style.setProperty('--vh', window.visualViewport.height + 'px');
|
|
});
|
|
document.documentElement.style.setProperty('--vh', window.visualViewport.height + 'px');
|
|
}
|
|
}
|
|
|
|
// If the browser discarded and restored this tab, reload the current session
|
|
// so the user sees the server-saved partial response instead of a blank page
|
|
if (document.wasDiscarded) {
|
|
console.warn('[tab-recovery] Tab was discarded by browser — reloading session');
|
|
setTimeout(() => {
|
|
var _sid = sessionModule && sessionModule.getCurrentSessionId();
|
|
if (_sid) sessionModule.selectSession(_sid);
|
|
}, 500);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Regenerate response: truncate history to the user message before this AI message,
|
|
* then re-submit that user message.
|
|
*/
|
|
/**
|
|
* Edit a user message: show an input, truncate to before it, resubmit the edited text.
|
|
*/
|
|
export async function editUserMessage(userMsgElement) {
|
|
const box = document.getElementById('chat-history');
|
|
const allMsgs = Array.from(box.querySelectorAll('.msg'));
|
|
const msgIndex = allMsgs.indexOf(userMsgElement);
|
|
if (msgIndex < 0) return;
|
|
|
|
const bodyEl = userMsgElement.querySelector('.body');
|
|
const currentText = bodyEl ? bodyEl.textContent.trim().replace(/\s*\[\d+ attachment\(s\)\]$/, '') : '';
|
|
|
|
// Replace body with an editable textarea
|
|
const editor = document.createElement('textarea');
|
|
editor.className = 'edit-textarea';
|
|
editor.value = currentText;
|
|
editor.rows = Math.max(2, currentText.split('\n').length);
|
|
|
|
const btnRow = document.createElement('div');
|
|
btnRow.style.cssText = 'display:flex; gap:6px; margin-top:4px;';
|
|
|
|
const saveBtn = document.createElement('button');
|
|
saveBtn.className = 'edit-save-btn';
|
|
saveBtn.textContent = 'Send';
|
|
const cancelBtn = document.createElement('button');
|
|
cancelBtn.className = 'edit-cancel-btn';
|
|
cancelBtn.textContent = 'Cancel';
|
|
btnRow.appendChild(saveBtn);
|
|
btnRow.appendChild(cancelBtn);
|
|
|
|
const originalHTML = bodyEl.innerHTML;
|
|
bodyEl.innerHTML = '';
|
|
bodyEl.appendChild(editor);
|
|
bodyEl.appendChild(btnRow);
|
|
editor.focus();
|
|
|
|
cancelBtn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
bodyEl.innerHTML = originalHTML;
|
|
});
|
|
|
|
saveBtn.addEventListener('click', async (e) => {
|
|
e.stopPropagation();
|
|
const newText = editor.value.trim();
|
|
if (!newText) return;
|
|
|
|
const sessionId = sessionModule.getCurrentSessionId();
|
|
if (!sessionId) return;
|
|
|
|
const keepCount = msgIndex;
|
|
try {
|
|
await fetch(`${API_BASE}/api/session/${sessionId}/truncate`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ keep_count: keepCount })
|
|
});
|
|
|
|
// Remove DOM elements from msgIndex onward
|
|
for (let i = allMsgs.length - 1; i >= msgIndex; i--) {
|
|
allMsgs[i].remove();
|
|
}
|
|
|
|
// Submit the edited text
|
|
const messageInput = uiModule.el('message');
|
|
messageInput.value = newText;
|
|
const submitBtn = document.querySelector('.send-btn');
|
|
if (submitBtn) submitBtn.click();
|
|
} catch (err) {
|
|
console.error('Edit failed:', err);
|
|
if (uiModule) uiModule.showError('Edit failed: ' + err.message);
|
|
bodyEl.innerHTML = originalHTML;
|
|
}
|
|
});
|
|
|
|
// Also submit on Enter (without shift)
|
|
editor.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
|
|
e.preventDefault();
|
|
saveBtn.click();
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Resend a user message — truncates history to that point and resubmits.
|
|
*/
|
|
export async function resendUserMessage(userMsgElement) {
|
|
const box = document.getElementById('chat-history');
|
|
const allMsgs = Array.from(box.querySelectorAll('.msg'));
|
|
const msgIndex = allMsgs.indexOf(userMsgElement);
|
|
if (msgIndex < 0) return;
|
|
|
|
// Prefer dataset.raw (stripped original user text) over .body.textContent
|
|
// — the latter slurps the rendered "View image description" collapsible
|
|
// content too, which would then be sent back as the user's question and
|
|
// the AI would reply to that gibberish instead of the actual prompt.
|
|
const bodyEl = userMsgElement.querySelector('.body');
|
|
let text = (userMsgElement.dataset.raw || (bodyEl ? bodyEl.textContent : '') || '').trim();
|
|
text = text.replace(/\s*\[\d+ attachment\(s\)\]$/, '');
|
|
|
|
// Collect file_ids attached to this user message so the resend re-carries
|
|
// the photos / docs (and the chat handler picks up the user-edited OCR
|
|
// text cached server-side under those file ids).
|
|
const _attachEls = userMsgElement.querySelectorAll('[data-file-id]');
|
|
let _ids = Array.from(_attachEls).map(el => el.dataset.fileId).filter(Boolean);
|
|
if (!_ids.length) {
|
|
const _imgs = userMsgElement.querySelectorAll('.attach-image-preview img, .attach-card img');
|
|
for (const _im of _imgs) {
|
|
const _m = (_im.getAttribute('src') || '').match(/\/api\/upload\/([A-Za-z0-9_\-]+)/);
|
|
if (_m && _m[1] && !_ids.includes(_m[1])) _ids.push(_m[1]);
|
|
}
|
|
}
|
|
|
|
// Rescue: legacy bubbles may have stored the filename as the message
|
|
// content (artifact of earlier broken resends). Don't re-send that as
|
|
// the user prompt if we still have the file attached. Loosen the regex
|
|
// to cover real-world camera/screenshot names with spaces, parens,
|
|
// multi-dots: "Screen Shot 2026-05-28 at 4.05.32 PM.png", "IMG (1).JPG".
|
|
if (text && _ids.length && /^[^\n\r]{1,200}\.(png|jpe?g|gif|webp|svg|bmp|heic|heif)$/i.test(text)) {
|
|
text = '';
|
|
}
|
|
// Empty text + no attachments → tell the user instead of silently bailing.
|
|
// The common case is a regen during a pre-upload race where the bubble
|
|
// never had an `[data-file-id]` to scrape.
|
|
if (!text && !_ids.length) {
|
|
if (uiModule?.showError) uiModule.showError('Nothing to resend — message has no text and no attachments yet (try again after the upload finishes).');
|
|
return;
|
|
}
|
|
|
|
const sessionId = sessionModule.getCurrentSessionId();
|
|
if (!sessionId) return;
|
|
|
|
// Truncate backend to keep everything before this user message
|
|
const keepCount = msgIndex;
|
|
try {
|
|
await fetch(`${API_BASE}/api/session/${sessionId}/truncate`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ keep_count: keepCount })
|
|
});
|
|
|
|
// Drop the AI replies after the user message but KEEP the user bubble
|
|
// itself (so its photo stays visible). Then suppress the new user
|
|
// bubble that send would otherwise add — same pattern as regenerate.
|
|
let sibling = userMsgElement.nextSibling;
|
|
while (sibling) {
|
|
const next = sibling.nextSibling;
|
|
sibling.remove();
|
|
sibling = next;
|
|
}
|
|
_hideUserBubble = true;
|
|
_pendingRegenAttachments = _ids;
|
|
|
|
// Resubmit
|
|
const messageInput = uiModule.el('message');
|
|
messageInput.value = text;
|
|
const submitBtn = document.querySelector('.send-btn');
|
|
if (submitBtn) submitBtn.click();
|
|
} catch (err) {
|
|
console.error('Resend failed:', err);
|
|
if (uiModule) uiModule.showError('Resend failed: ' + err.message);
|
|
}
|
|
}
|
|
|
|
export async function regenerateFrom(aiMsgElement) {
|
|
const box = document.getElementById('chat-history');
|
|
const allMsgs = Array.from(box.querySelectorAll('.msg'));
|
|
const aiIndex = allMsgs.indexOf(aiMsgElement);
|
|
if (aiIndex < 0) return;
|
|
|
|
// Find the preceding user message
|
|
let userIndex = -1;
|
|
let userText = '';
|
|
let userMsgEl = null;
|
|
for (let i = aiIndex - 1; i >= 0; i--) {
|
|
if (allMsgs[i].classList.contains('msg-user')) {
|
|
userIndex = i;
|
|
userMsgEl = allMsgs[i];
|
|
// Prefer dataset.raw (set by addMessage with the stripped, original
|
|
// user text) over the rendered body's textContent — the latter
|
|
// pulls in the "View image description" collapsible content too,
|
|
// duplicating the OCR text on regen.
|
|
const bodyEl = userMsgEl.querySelector('.body');
|
|
userText = (userMsgEl.dataset.raw || (bodyEl ? bodyEl.textContent : '') || '').trim();
|
|
userText = userText.replace(/\s*\[\d+ attachment\(s\)\]$/, '');
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (userIndex < 0) {
|
|
if (uiModule) uiModule.showError('Could not find the user message to regenerate');
|
|
return;
|
|
}
|
|
|
|
// Collect any file_ids attached to the original user message so the
|
|
// regenerated send re-uses them. Without this the AI is regenerated on
|
|
// text alone — photos (and the user-edited OCR text cached server-side
|
|
// under that file_id) would be silently dropped.
|
|
const _attachEls = userMsgEl ? userMsgEl.querySelectorAll('[data-file-id]') : [];
|
|
let _regenIds = Array.from(_attachEls).map(el => el.dataset.fileId).filter(Boolean);
|
|
// Fallback for bubbles rendered before the data-file-id stamp landed:
|
|
// sniff the file id straight out of any `.attach-image-preview img`
|
|
// src URLs (matches /api/upload/<id>). Otherwise an older bubble would
|
|
// regen with zero attachments and the photo would be lost from the
|
|
// resulting message even though the file still exists on disk.
|
|
if (!_regenIds.length && userMsgEl) {
|
|
const _imgs = userMsgEl.querySelectorAll('.attach-image-preview img, .attach-card img');
|
|
for (const _im of _imgs) {
|
|
const _m = (_im.getAttribute('src') || '').match(/\/api\/upload\/([A-Za-z0-9_\-]+)/);
|
|
if (_m && _m[1] && !_regenIds.includes(_m[1])) _regenIds.push(_m[1]);
|
|
}
|
|
}
|
|
_pendingRegenAttachments = _regenIds;
|
|
|
|
// Rescue: earlier-version regens (before the dataset.raw fix) stored the
|
|
// photo's filename as the user-message content. On a follow-up regen,
|
|
// that filename would be sent back as the literal user prompt, so the
|
|
// AI thinks the question is "blue_night_preview.jpg" and replies "that's
|
|
// an image file". If userText is just a bare image filename and we have
|
|
// attachments, drop it so the OCR text (or the image bytes for vision
|
|
// models) is what the model actually sees.
|
|
if (userText && _pendingRegenAttachments.length &&
|
|
/^[^\n\r]{1,200}\.(png|jpe?g|gif|webp|svg|bmp|heic|heif)$/i.test(userText.trim())) {
|
|
userText = '';
|
|
}
|
|
|
|
// A photo-only message has empty user text — regen must still proceed,
|
|
// because the attachments themselves are the message. Bail only if there
|
|
// is no text AND no attachments to send.
|
|
if (!userText && !_pendingRegenAttachments.length) {
|
|
if (uiModule) uiModule.showError('Nothing to regenerate — the user message has no text and no attachments');
|
|
return;
|
|
}
|
|
|
|
const sessionId = sessionModule.getCurrentSessionId();
|
|
if (!sessionId) return;
|
|
|
|
// Save current response as a variant
|
|
const oldRaw = aiMsgElement.dataset.raw || aiMsgElement.querySelector('.body')?.textContent || '';
|
|
const oldHtml = aiMsgElement.querySelector('.body')?.innerHTML || '';
|
|
let variants = [];
|
|
try { variants = JSON.parse(aiMsgElement.dataset.variants || '[]'); } catch(_) {}
|
|
if (variants.length === 0) {
|
|
// First regen — save the original as variant 0
|
|
variants.push({ raw: oldRaw, html: oldHtml, label: 'original' });
|
|
}
|
|
|
|
const keepCount = userIndex;
|
|
|
|
try {
|
|
await fetch(`${API_BASE}/api/session/${sessionId}/truncate`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ keep_count: keepCount })
|
|
});
|
|
|
|
for (let i = allMsgs.length - 1; i > aiIndex; i--) {
|
|
allMsgs[i].remove();
|
|
}
|
|
|
|
// Remove the AI message from DOM — it will be replaced by the new streaming response
|
|
// But first, stash the variants data so we can transfer it to the new element
|
|
_pendingVariants = variants;
|
|
_pendingVariantLabel = 'regen';
|
|
aiMsgElement.remove();
|
|
|
|
_hideUserBubble = true;
|
|
const messageInput = uiModule.el('message');
|
|
messageInput.value = userText;
|
|
const submitBtn = document.querySelector('.send-btn');
|
|
if (submitBtn) submitBtn.click();
|
|
|
|
} catch (err) {
|
|
console.error('Regenerate failed:', err);
|
|
if (uiModule) uiModule.showError('Regenerate failed: ' + err.message);
|
|
}
|
|
}
|
|
|
|
// Pending variants from a regeneration — transferred to new streaming element
|
|
let _pendingVariants = null;
|
|
let _pendingVariantLabel = null;
|
|
// File-ids carried over from the original user message during a regen, so
|
|
// photos / OCR overrides survive into the new send. Consumed once.
|
|
let _pendingRegenAttachments = null;
|
|
|
|
/**
|
|
* Called after streaming completes to attach variant navigation if this was a regen.
|
|
*/
|
|
function _attachVariantNav(msgElement) {
|
|
if (!_pendingVariants) return;
|
|
const variants = _pendingVariants;
|
|
_pendingVariants = null;
|
|
|
|
// Add the new response as the latest variant
|
|
const newRaw = msgElement.dataset.raw || msgElement.querySelector('.body')?.textContent || '';
|
|
const newHtml = msgElement.querySelector('.body')?.innerHTML || '';
|
|
const varLabel = _pendingVariantLabel || 'regen';
|
|
_pendingVariantLabel = null;
|
|
variants.push({ raw: newRaw, html: newHtml, label: varLabel });
|
|
|
|
msgElement.dataset.variants = JSON.stringify(variants);
|
|
msgElement.dataset.variantIndex = String(variants.length - 1);
|
|
|
|
_renderVariantNav(msgElement, variants, variants.length - 1);
|
|
|
|
// Persist variants to server
|
|
const sid = sessionModule.getCurrentSessionId();
|
|
if (sid) {
|
|
fetch(`${API_BASE}/api/session/${sid}/update-last-meta`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ metadata: { variants: variants, variantIndex: variants.length - 1 } })
|
|
}).catch(e => console.warn('update-last-meta (variants) failed:', e));
|
|
}
|
|
}
|
|
|
|
const _VARIANT_ICONS = { regen: '\u21BB', shorter: '\u2702', simpler: '?', original: '\u25CB' };
|
|
function _variantTagText(label) {
|
|
return _VARIANT_ICONS[label] || _VARIANT_ICONS['original'];
|
|
}
|
|
|
|
function _renderVariantNav(msgElement, variants, currentIdx) {
|
|
// Remove existing nav if any
|
|
const old = msgElement.querySelector('.variant-nav');
|
|
if (old) old.remove();
|
|
|
|
if (variants.length < 2) return;
|
|
|
|
const nav = document.createElement('span');
|
|
nav.className = 'variant-nav';
|
|
nav.addEventListener('click', (e) => e.stopPropagation());
|
|
|
|
// Label showing what this variant is
|
|
// Divider
|
|
const divider = document.createElement('span');
|
|
divider.className = 'variant-divider';
|
|
divider.textContent = '|';
|
|
nav.appendChild(divider);
|
|
|
|
// Label
|
|
const curVariant = variants[currentIdx];
|
|
const tagLabel = document.createElement('span');
|
|
tagLabel.className = 'variant-tag' + (curVariant?.label === 'shorter' ? ' variant-tag-scissors' : '');
|
|
tagLabel.textContent = _variantTagText(curVariant?.label);
|
|
nav.appendChild(tagLabel);
|
|
|
|
// < button
|
|
const prevBtn = document.createElement('button');
|
|
prevBtn.className = 'variant-btn';
|
|
prevBtn.textContent = '<';
|
|
prevBtn.disabled = currentIdx === 0;
|
|
prevBtn.addEventListener('click', (e) => { e.stopPropagation(); _switchVariant(msgElement, variants, currentIdx - 1); });
|
|
nav.appendChild(prevBtn);
|
|
|
|
// Clickable number for current index (click left number = go left, right = go right)
|
|
const numLeft = document.createElement('button');
|
|
numLeft.className = 'variant-num';
|
|
numLeft.textContent = String(currentIdx + 1);
|
|
numLeft.disabled = currentIdx === 0;
|
|
numLeft.addEventListener('click', (e) => { e.stopPropagation(); _switchVariant(msgElement, variants, currentIdx - 1); });
|
|
nav.appendChild(numLeft);
|
|
|
|
const slash = document.createElement('span');
|
|
slash.className = 'variant-slash';
|
|
slash.textContent = '/';
|
|
nav.appendChild(slash);
|
|
|
|
const numRight = document.createElement('button');
|
|
numRight.className = 'variant-num';
|
|
numRight.textContent = String(variants.length);
|
|
numRight.disabled = currentIdx === variants.length - 1;
|
|
numRight.addEventListener('click', (e) => { e.stopPropagation(); _switchVariant(msgElement, variants, currentIdx + 1); });
|
|
nav.appendChild(numRight);
|
|
|
|
// > button
|
|
const nextBtn = document.createElement('button');
|
|
nextBtn.className = 'variant-btn';
|
|
nextBtn.textContent = '>';
|
|
nextBtn.disabled = currentIdx === variants.length - 1;
|
|
nextBtn.addEventListener('click', (e) => { e.stopPropagation(); _switchVariant(msgElement, variants, currentIdx + 1); });
|
|
nav.appendChild(nextBtn);
|
|
|
|
// Insert into the .role header
|
|
const roleEl = msgElement.querySelector('.role');
|
|
if (roleEl) {
|
|
roleEl.appendChild(nav);
|
|
} else {
|
|
msgElement.appendChild(nav);
|
|
}
|
|
}
|
|
|
|
function _switchVariant(msgElement, variants, newIdx) {
|
|
if (newIdx < 0 || newIdx >= variants.length) return;
|
|
const v = variants[newIdx];
|
|
const body = msgElement.querySelector('.body');
|
|
if (body) body.innerHTML = v.html;
|
|
msgElement.dataset.raw = v.raw;
|
|
msgElement.dataset.variantIndex = String(newIdx);
|
|
if (window.hljs) {
|
|
msgElement.querySelectorAll('pre code').forEach(block => window.hljs.highlightElement(block));
|
|
}
|
|
_renderVariantNav(msgElement, variants, newIdx);
|
|
|
|
// Persist selected variant to server
|
|
const sid = sessionModule.getCurrentSessionId();
|
|
if (sid) {
|
|
fetch(`${API_BASE}/api/session/${sid}/update-last-meta`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ metadata: { variantIndex: newIdx } })
|
|
}).catch(e => console.warn('update-last-meta (variantIndex) failed:', e));
|
|
}
|
|
}
|
|
|
|
export async function forkFrom(aiMsgElement) {
|
|
const box = document.getElementById('chat-history');
|
|
const allMsgs = Array.from(box.querySelectorAll('.msg'));
|
|
const aiIndex = allMsgs.indexOf(aiMsgElement);
|
|
if (aiIndex < 0) return;
|
|
|
|
const sessionId = sessionModule.getCurrentSessionId();
|
|
if (!sessionId) return;
|
|
|
|
const keepCount = aiIndex + 1;
|
|
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/session/${sessionId}/fork`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ keep_count: keepCount }),
|
|
});
|
|
if (!res.ok) throw new Error(await res.text());
|
|
const data = await res.json();
|
|
|
|
await sessionModule.loadSessions();
|
|
await sessionModule.selectSession(data.id);
|
|
if (uiModule) uiModule.showToast(`Forked → ${data.name}`);
|
|
} catch (err) {
|
|
console.error('Fork failed:', err);
|
|
if (uiModule) uiModule.showError('Fork failed: ' + err.message);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Check for pending/completed research after page refresh or session switch.
|
|
* If research is still running, show a spinner and poll until done.
|
|
* If research is done, fetch result and render it.
|
|
*/
|
|
export async function checkPendingResearch(sessionId) {
|
|
if (!sessionId) return;
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/research/status/${sessionId}`);
|
|
if (!res.ok) return; // 404 = no research for this session
|
|
const data = await res.json();
|
|
|
|
if (data.status === 'done') {
|
|
// Fetch and render the completed result
|
|
_notifyResearchComplete(sessionId, data.query || '');
|
|
if (sessionModule && sessionModule.clearResearching) sessionModule.clearResearching(sessionId);
|
|
const resultRes = await fetch(`${API_BASE}/api/research/result/${sessionId}`, { method: 'POST' });
|
|
if (resultRes.ok) {
|
|
const resultData = await resultRes.json();
|
|
if (resultData.result) {
|
|
// Skip if history already has a research message for this session
|
|
if (document.querySelector(`#chat-history .msg-ai[data-research-session="${sessionId}"]`)) return;
|
|
|
|
var srcBox = '';
|
|
if (resultData.sources && resultData.sources.length > 0) {
|
|
srcBox = _buildSourcesBox(resultData.sources, 'research');
|
|
}
|
|
var findingsBox = chatRenderer.buildFindingsBox(resultData.raw_findings);
|
|
var cleanResult = resultData.result;
|
|
// Build DOM directly to avoid double-processing through addMessage
|
|
chatRenderer.hideWelcomeScreen();
|
|
var _box = document.getElementById('chat-history');
|
|
if (_box) {
|
|
var _wrap = document.createElement('div');
|
|
_wrap.className = 'msg msg-ai';
|
|
_wrap.dataset.researchSession = sessionId;
|
|
var _role = document.createElement('div');
|
|
_role.className = 'role';
|
|
var _meta = sessionModule.getSessions().find(function(s) { return s.id === sessionId; });
|
|
_role.textContent = _shortModel(_meta?.model);
|
|
_applyModelColor(_role, _meta?.model);
|
|
_role.appendChild(chatRenderer.roleTimestamp());
|
|
var _body = document.createElement('div');
|
|
_body.className = 'body';
|
|
_body.innerHTML = srcBox + markdownModule.processWithThinking(
|
|
markdownModule.squashOutsideCode(cleanResult)
|
|
) + findingsBox;
|
|
_wrap.dataset.raw = cleanResult;
|
|
_wrap.appendChild(_role);
|
|
_wrap.appendChild(_body);
|
|
_wrap.appendChild(chatRenderer.createMsgFooter(_wrap));
|
|
_appendViewReportLink(_wrap, sessionId);
|
|
_box.appendChild(_wrap);
|
|
if (window.hljs) _wrap.querySelectorAll('pre code').forEach(function(b) { window.hljs.highlightElement(b); });
|
|
uiModule.scrollHistory();
|
|
}
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (data.status !== 'running') return;
|
|
|
|
// Don't show reconnect UI if we've already switched away
|
|
if (sessionModule.getCurrentSessionId() !== sessionId) return;
|
|
|
|
// Research is still running — show reconnect UI with spinner
|
|
const box = document.getElementById('chat-history');
|
|
if (!box) return;
|
|
|
|
const holder = document.createElement('div');
|
|
holder.className = 'msg msg-ai research-reconnect';
|
|
holder.dataset.researchSession = sessionId;
|
|
const roleTs = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
|
|
const agentMeta = sessionModule.getSessions().find(s => s.id === sessionModule.getCurrentSessionId());
|
|
const agentModelLabel = _shortModel(agentMeta?.model);
|
|
holder.innerHTML = `<div class="role">${agentModelLabel} <span class="role-timestamp">${roleTs}</span></div><div class="body"></div>`;
|
|
_applyModelColor(holder.querySelector('.role'), agentMeta?.model);
|
|
box.appendChild(holder);
|
|
|
|
const bodyDiv = holder.querySelector('.body');
|
|
const spinner = spinnerModule.create('Reconnecting to research...', 'right');
|
|
bodyDiv.appendChild(spinner.createElement());
|
|
spinner.start();
|
|
|
|
// Update spinner with current progress if available
|
|
function updateSpinnerFromProgress(progress) {
|
|
if (!progress || !progress.phase) return;
|
|
const rp = progress;
|
|
if (rp.phase === 'probing') {
|
|
spinner.updateMessage(`Verifying model: ${rp.model || '?'}`);
|
|
} else if (rp.phase === 'planning') {
|
|
spinner.updateMessage('Analyzing question & planning research strategy');
|
|
} else if (rp.phase === 'searching') {
|
|
const q = rp.queries ? `${rp.queries} queries` : '';
|
|
const s = rp.total_sources ? ` · ${rp.total_sources} sources` : '';
|
|
spinner.updateMessage(`Round ${rp.round || '?'}: Searching${q ? ' (' + q + ')' : ''}${s}`);
|
|
} else if (rp.phase === 'reading') {
|
|
spinner.updateMessage(rp.title ? `Reading: ${rp.title}` : `Round ${rp.round || '?'}: Reading ${rp.new_sources || ''} pages · ${rp.total_sources || 0} sources total`);
|
|
} else if (rp.phase === 'analyzing') {
|
|
spinner.updateMessage(`Round ${rp.round || '?'}: Analyzing ${rp.total_findings || 0} findings`);
|
|
} else if (rp.phase === 'writing') {
|
|
spinner.updateMessage(`Writing report · ${rp.total_sources || 0} sources`);
|
|
}
|
|
}
|
|
|
|
updateSpinnerFromProgress(data.progress);
|
|
_researchingStreamIds.add(sessionId);
|
|
if (sessionModule && sessionModule.markResearching) sessionModule.markResearching(sessionId);
|
|
|
|
// Restore research timer from started_at
|
|
if (data.started_at && spinner && spinner.element) {
|
|
_researchStartTime = data.started_at * 1000;
|
|
_researchAvgDuration = data.avg_duration || null;
|
|
_researchTimerEl = document.createElement('div');
|
|
_researchTimerEl.className = 'research-timer';
|
|
_researchTimerEl.style.cssText = 'font-size:0.8em; opacity:0.6; margin-top:4px; font-family:monospace;';
|
|
spinner.element.parentNode.insertBefore(_researchTimerEl, spinner.element.nextSibling);
|
|
_researchTimerInterval = setInterval(() => {
|
|
if (!_researchTimerEl) return;
|
|
var elapsed = Math.floor((Date.now() - _researchStartTime) / 1000);
|
|
var mm = String(Math.floor(elapsed / 60)).padStart(2, '0');
|
|
var ss = String(elapsed % 60).padStart(2, '0');
|
|
var txt = mm + ':' + ss;
|
|
if (_researchAvgDuration) {
|
|
var avgM = String(Math.floor(_researchAvgDuration / 60)).padStart(2, '0');
|
|
var avgS = String(Math.round(_researchAvgDuration % 60)).padStart(2, '0');
|
|
txt += ' / avg ' + avgM + ':' + avgS;
|
|
}
|
|
_researchTimerEl.textContent = txt;
|
|
}, 1000);
|
|
// Reconnect synapse — seed it with whatever progress is already known
|
|
try {
|
|
_researchSynapse = createResearchSynapse(spinner.element.parentNode, {
|
|
query: data.query || '',
|
|
startedAt: _researchStartTime,
|
|
});
|
|
if (_researchSynapse.element && _researchTimerEl) {
|
|
spinner.element.parentNode.insertBefore(_researchSynapse.element, _researchTimerEl);
|
|
}
|
|
if (data.progress) {
|
|
_researchSynapse.setPhase(data.progress.phase, data.progress);
|
|
if (typeof data.progress.round === 'number') _researchSynapse.setRound(data.progress.round);
|
|
if (typeof data.progress.total_sources === 'number') _researchSynapse.setSourceCount(data.progress.total_sources);
|
|
}
|
|
} catch (e) { console.warn('synapse reconnect failed', e); }
|
|
}
|
|
|
|
// Poll for completion
|
|
const pollInterval = setInterval(async () => {
|
|
// Stop polling if user switched to a different session
|
|
if (sessionModule.getCurrentSessionId() !== sessionId) {
|
|
clearInterval(pollInterval);
|
|
spinner.destroy();
|
|
_clearResearchTimer();
|
|
if (holder.parentNode) holder.remove();
|
|
_researchingStreamIds.delete(sessionId);
|
|
if (_researchingStreamIds.size === 0) {
|
|
var _rToggleP = document.getElementById('research-toggle-btn');
|
|
if (_rToggleP) _rToggleP.classList.remove('research-running');
|
|
}
|
|
return;
|
|
}
|
|
try {
|
|
const pollRes = await fetch(`${API_BASE}/api/research/status/${sessionId}`);
|
|
if (!pollRes.ok) {
|
|
clearInterval(pollInterval);
|
|
spinner.destroy();
|
|
_clearResearchTimer();
|
|
_researchingStreamIds.delete(sessionId);
|
|
if (sessionModule && sessionModule.clearResearching) sessionModule.clearResearching(sessionId);
|
|
return;
|
|
}
|
|
const pollData = await pollRes.json();
|
|
updateSpinnerFromProgress(pollData.progress);
|
|
if (_researchSynapse && pollData.progress) {
|
|
_researchSynapse.setPhase(pollData.progress.phase, pollData.progress);
|
|
if (typeof pollData.progress.round === 'number') _researchSynapse.setRound(pollData.progress.round);
|
|
if (typeof pollData.progress.total_sources === 'number') _researchSynapse.setSourceCount(pollData.progress.total_sources);
|
|
}
|
|
|
|
if (pollData.status !== 'running') {
|
|
clearInterval(pollInterval);
|
|
spinner.destroy();
|
|
_clearResearchTimer();
|
|
_researchingStreamIds.delete(sessionId);
|
|
if (sessionModule && sessionModule.clearResearching) sessionModule.clearResearching(sessionId);
|
|
|
|
if (pollData.status === 'done') {
|
|
_notifyResearchComplete(sessionId, data.query || '');
|
|
const rRes = await fetch(`${API_BASE}/api/research/result/${sessionId}`, { method: 'POST' });
|
|
if (rRes.ok) {
|
|
const rData = await rRes.json();
|
|
if (rData.result) {
|
|
var srcHtml = '';
|
|
if (rData.sources && rData.sources.length > 0) {
|
|
srcHtml = _buildSourcesBox(rData.sources, 'research');
|
|
}
|
|
var findingsHtml = chatRenderer.buildFindingsBox(rData.raw_findings);
|
|
bodyDiv.innerHTML = srcHtml + markdownModule.processWithThinking(
|
|
markdownModule.squashOutsideCode(rData.result)
|
|
) + findingsHtml;
|
|
holder.dataset.raw = rData.result;
|
|
_appendViewReportLink(holder, sessionId);
|
|
if (window.hljs) {
|
|
holder.querySelectorAll('pre code').forEach(b => window.hljs.highlightElement(b));
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
bodyDiv.innerHTML = '<i style="color: var(--color-error);">[Research ' + pollData.status + ']</i>';
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.error('Research poll error:', e);
|
|
}
|
|
}, 2000);
|
|
} catch (e) {
|
|
// No research pending, that's fine
|
|
}
|
|
}
|
|
|
|
/** Set a display override for the next user message bubble */
|
|
export function setDisplayOverride(text) {
|
|
_displayOverride = text;
|
|
}
|
|
|
|
/** Hide the user bubble for the next submit (e.g. continue after stop) */
|
|
export function setHideUserBubble() {
|
|
_hideUserBubble = true;
|
|
}
|
|
|
|
/** Set the AI element to merge with the next streamed response (continue after stop) */
|
|
export function setPendingContinue(el) {
|
|
_pendingContinue = el;
|
|
}
|
|
|
|
/**
|
|
* Delete an AI message and its preceding user message from the conversation.
|
|
*/
|
|
export async function deleteMessage(msgElement) {
|
|
const box = document.getElementById('chat-history');
|
|
const allMsgs = Array.from(box.querySelectorAll('.msg'));
|
|
const clickedIndex = allMsgs.indexOf(msgElement);
|
|
if (clickedIndex < 0) return;
|
|
|
|
// No early-out on a missing session: an output shown before any model was
|
|
// selected (issue #1428) has no session/persisted rows, but its "x" must
|
|
// still remove it. We only need the session id for the server-side delete
|
|
// below; without one we fall back to removing the DOM.
|
|
const sessionId = sessionModule.getCurrentSessionId();
|
|
|
|
const clickedIsUser = msgElement.classList.contains('msg-user');
|
|
|
|
// Find the user+AI pair
|
|
let userIndex = -1;
|
|
let aiIndex = -1;
|
|
if (clickedIsUser) {
|
|
userIndex = clickedIndex;
|
|
// Find the following AI message
|
|
for (let i = clickedIndex + 1; i < allMsgs.length; i++) {
|
|
if (allMsgs[i].classList.contains('msg-ai') && !allMsgs[i].classList.contains('msg-continuation')) {
|
|
aiIndex = i;
|
|
break;
|
|
}
|
|
if (allMsgs[i].classList.contains('msg-user')) break; // next user msg, no AI response
|
|
}
|
|
} else {
|
|
// If clicked on a continuation, walk back to the main AI message
|
|
let mainAiIndex = clickedIndex;
|
|
if (allMsgs[mainAiIndex].classList.contains('msg-continuation')) {
|
|
for (let i = mainAiIndex - 1; i >= 0; i--) {
|
|
if (allMsgs[i].classList.contains('msg-ai') && !allMsgs[i].classList.contains('msg-continuation')) {
|
|
mainAiIndex = i;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
aiIndex = mainAiIndex;
|
|
// Find the preceding user message
|
|
for (let i = aiIndex - 1; i >= 0; i--) {
|
|
if (allMsgs[i].classList.contains('msg-user')) {
|
|
userIndex = i;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Collect DB message IDs and DOM elements to remove
|
|
const msgIds = [];
|
|
const domToRemove = [];
|
|
|
|
// Add the user message if found
|
|
if (userIndex >= 0) {
|
|
domToRemove.push(allMsgs[userIndex]);
|
|
const uid = allMsgs[userIndex].dataset.dbId;
|
|
if (uid) msgIds.push(uid);
|
|
}
|
|
|
|
// Add the AI message if found
|
|
if (aiIndex >= 0) {
|
|
domToRemove.push(allMsgs[aiIndex]);
|
|
const aid = allMsgs[aiIndex].dataset.dbId;
|
|
if (aid) msgIds.push(aid);
|
|
|
|
const aiEl = allMsgs[aiIndex];
|
|
// Also remove agent-thread elements BETWEEN user and AI
|
|
if (userIndex >= 0) {
|
|
let between = allMsgs[userIndex].nextElementSibling;
|
|
while (between && between !== aiEl) {
|
|
domToRemove.push(between);
|
|
between = between.nextElementSibling;
|
|
}
|
|
}
|
|
// Walk forward from the AI element to remove continuations and tool bubbles
|
|
let sibling = aiEl.nextElementSibling;
|
|
while (sibling) {
|
|
if (sibling.classList.contains('msg-user') ||
|
|
(sibling.classList.contains('msg-ai') && !sibling.classList.contains('msg-continuation'))) {
|
|
break;
|
|
}
|
|
domToRemove.push(sibling);
|
|
sibling = sibling.nextElementSibling;
|
|
}
|
|
}
|
|
|
|
if (!msgIds.length || !sessionId) {
|
|
// No persisted rows to delete (no DB IDs, or no session at all — e.g. an
|
|
// error output shown before a model was selected, #1428). Just remove the
|
|
// DOM so the "x" works regardless.
|
|
domToRemove.forEach(el => el.remove());
|
|
if (uiModule) uiModule.showToast('Message deleted');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/session/${sessionId}/delete-messages`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ msg_ids: msgIds })
|
|
});
|
|
if (!res.ok) throw new Error('Server error ' + res.status);
|
|
domToRemove.forEach(el => el.remove());
|
|
if (uiModule) uiModule.showToast('Message deleted');
|
|
} catch (err) {
|
|
console.error('Delete failed:', err);
|
|
if (uiModule) uiModule.showError('Delete failed: ' + err.message);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Edit an AI message inline. Makes the body contentEditable, saves to DB on confirm.
|
|
*/
|
|
export async function editAIMessage(msgElement) {
|
|
const body = msgElement.querySelector('.body');
|
|
if (!body) return;
|
|
|
|
const isEditing = body.contentEditable === 'true' || body.contentEditable === 'plaintext-only';
|
|
if (isEditing) return; // already editing
|
|
|
|
const originalRaw = msgElement.dataset.raw || body.textContent || '';
|
|
|
|
// Create editable textarea overlay
|
|
const textarea = document.createElement('textarea');
|
|
textarea.className = 'msg-edit-textarea';
|
|
textarea.value = originalRaw;
|
|
textarea.style.width = '100%';
|
|
textarea.style.minHeight = Math.max(100, body.offsetHeight) + 'px';
|
|
body.style.display = 'none';
|
|
body.parentNode.insertBefore(textarea, body.nextSibling);
|
|
textarea.focus();
|
|
|
|
// Add save/cancel bar
|
|
const bar = document.createElement('div');
|
|
bar.className = 'msg-edit-bar';
|
|
const saveBtn = document.createElement('button');
|
|
saveBtn.className = 'msg-edit-save';
|
|
saveBtn.textContent = 'Save';
|
|
const cancelBtn = document.createElement('button');
|
|
cancelBtn.className = 'msg-edit-cancel';
|
|
cancelBtn.textContent = 'Cancel';
|
|
bar.appendChild(saveBtn);
|
|
bar.appendChild(cancelBtn);
|
|
textarea.parentNode.insertBefore(bar, textarea.nextSibling);
|
|
|
|
function cleanup() {
|
|
textarea.remove();
|
|
bar.remove();
|
|
body.style.display = '';
|
|
}
|
|
|
|
cancelBtn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
cleanup();
|
|
});
|
|
|
|
saveBtn.addEventListener('click', async (e) => {
|
|
e.stopPropagation();
|
|
const newContent = textarea.value;
|
|
if (newContent === originalRaw) { cleanup(); return; }
|
|
|
|
const msgId = msgElement.dataset.dbId;
|
|
if (!msgId) { if (uiModule) uiModule.showError('Cannot edit: message ID not found'); cleanup(); return; }
|
|
|
|
const sessionId = sessionModule.getCurrentSessionId();
|
|
if (!sessionId) { cleanup(); return; }
|
|
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/session/${sessionId}/edit-message`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ msg_id: msgId, content: newContent }),
|
|
});
|
|
if (!res.ok) throw new Error('Server error ' + res.status);
|
|
|
|
// Re-render body with markdown
|
|
body.innerHTML = markdownModule.processWithThinking(markdownModule.squashOutsideCode(newContent));
|
|
msgElement.dataset.raw = newContent;
|
|
|
|
// Add edited indicator if not already present
|
|
if (!msgElement.querySelector('.edited-indicator')) {
|
|
const indicator = document.createElement('div');
|
|
indicator.className = 'edited-indicator';
|
|
indicator.textContent = '[Message edited]';
|
|
body.parentNode.insertBefore(indicator, body.nextSibling);
|
|
}
|
|
|
|
cleanup();
|
|
if (uiModule) uiModule.showToast('Message edited');
|
|
} catch (err) {
|
|
console.error('Edit failed:', err);
|
|
if (uiModule) uiModule.showError('Edit failed: ' + err.message);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Rewrite the AI's last response with a specific instruction.
|
|
* Uses the lightweight /api/rewrite endpoint — no tools, no agent loop.
|
|
* Just rewrites the text of the last AI bubble.
|
|
*/
|
|
export async function rewriteWith(aiMsgElement, instruction) {
|
|
const sessionId = sessionModule.getCurrentSessionId();
|
|
if (!sessionId) return;
|
|
|
|
// Get the original text from the AI bubble
|
|
const oldRaw = aiMsgElement.dataset.raw || aiMsgElement.querySelector('.body')?.textContent || '';
|
|
const oldHtml = aiMsgElement.querySelector('.body')?.innerHTML || '';
|
|
|
|
if (!oldRaw.trim()) {
|
|
if (uiModule) uiModule.showError('No text to rewrite');
|
|
return;
|
|
}
|
|
|
|
// Save current response as a variant
|
|
let variants = [];
|
|
try { variants = JSON.parse(aiMsgElement.dataset.variants || '[]'); } catch(_) {}
|
|
if (variants.length === 0) {
|
|
variants.push({ raw: oldRaw, html: oldHtml, label: 'original' });
|
|
}
|
|
|
|
// Determine label from instruction
|
|
let varLabel = 'rewrite';
|
|
if (instruction.includes('shorter')) varLabel = 'shorter';
|
|
else if (instruction.includes('simpler')) varLabel = 'simpler';
|
|
|
|
// Clear the bubble and show a whirlpool spinner while we wait for the
|
|
// rewrite (replaces the old "Rewriting..." text).
|
|
const bodyEl = aiMsgElement.querySelector('.body');
|
|
let _rwSpin = null;
|
|
if (bodyEl) {
|
|
bodyEl.innerHTML = '';
|
|
_rwSpin = spinnerModule.createWhirlpool(18);
|
|
_rwSpin.element.style.margin = '4px 0';
|
|
bodyEl.appendChild(_rwSpin.element);
|
|
}
|
|
// Stop + detach the spinner (called once real content starts rendering, and
|
|
// on the failure path so it never spins forever).
|
|
const _killRwSpin = () => { if (_rwSpin) { try { _rwSpin.destroy(); } catch (_) {} _rwSpin = null; } };
|
|
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/rewrite`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
session_id: sessionId,
|
|
original_text: oldRaw,
|
|
instruction: instruction,
|
|
}),
|
|
});
|
|
|
|
if (!res.ok) {
|
|
throw new Error(`HTTP ${res.status}`);
|
|
}
|
|
|
|
const reader = res.body.getReader();
|
|
const decoder = new TextDecoder();
|
|
let buffer = '';
|
|
let newText = '';
|
|
|
|
while (true) {
|
|
const { done, value } = await reader.read();
|
|
if (done) break;
|
|
buffer += decoder.decode(value, { stream: true });
|
|
const lines = buffer.split('\n');
|
|
buffer = lines.pop() || '';
|
|
|
|
for (const line of lines) {
|
|
if (!line.startsWith('data: ')) continue;
|
|
const payload = line.slice(6).trim();
|
|
if (payload === '[DONE]') continue;
|
|
try {
|
|
const data = JSON.parse(payload);
|
|
// The endpoint streams `event: error\ndata: {error,status}` on
|
|
// failure — surface it instead of silently hanging on "Rewriting…".
|
|
if (data.error) {
|
|
throw new Error(data.error || ('HTTP ' + (data.status || 500)));
|
|
}
|
|
// Reasoning tokens (vLLM --reasoning-parser: Qwen3 / DeepSeek-R1)
|
|
// arrive as separate {delta, thinking:true} chunks. They are NOT
|
|
// the rewrite — fold them away so they don't pollute the result.
|
|
if (data.thinking) continue;
|
|
if (data.delta) {
|
|
newText += data.delta;
|
|
_killRwSpin();
|
|
if (bodyEl) {
|
|
bodyEl.innerHTML = markdownModule.processWithThinking(
|
|
markdownModule.squashOutsideCode(newText)
|
|
);
|
|
}
|
|
}
|
|
} catch (e) {
|
|
if (e instanceof Error && e.message) throw e; // re-throw real errors
|
|
/* ignore JSON parse noise */
|
|
}
|
|
}
|
|
}
|
|
|
|
// Strip any thinking markup from the answer. A reasoning model may emit
|
|
// an inline <think>…</think> block, a bare </think> (no opener), or — when
|
|
// its reasoning came via reasoning_content — a stray leading <think> that
|
|
// never closes (so it would otherwise hide the whole answer). Peel all of
|
|
// those off so what's left is just the rewritten text.
|
|
const _stripThink = (t) => {
|
|
t = t.replace(/<think>[\s\S]*?<\/think>/gi, ''); // complete blocks
|
|
if (/<\/think>/i.test(t)) t = t.replace(/^[\s\S]*?<\/think>/i, ''); // reasoning w/o opener
|
|
return t.replace(/<\/?think>/gi, '').trim(); // any orphan tag
|
|
};
|
|
newText = _stripThink(newText);
|
|
|
|
// Nothing left after stripping (or an empty stream) → real failure, not a
|
|
// blank bubble.
|
|
if (!newText.trim()) {
|
|
throw new Error('model returned no rewritten text');
|
|
}
|
|
|
|
// Update the element's raw text
|
|
if (newText) {
|
|
aiMsgElement.dataset.raw = newText;
|
|
// Final render with proper markdown
|
|
if (bodyEl) {
|
|
bodyEl.innerHTML = markdownModule.processWithThinking(
|
|
markdownModule.squashOutsideCode(newText)
|
|
);
|
|
}
|
|
|
|
// Save the new response as a variant
|
|
variants.push({ raw: newText, html: bodyEl ? bodyEl.innerHTML : '', label: varLabel });
|
|
aiMsgElement.dataset.variants = JSON.stringify(variants);
|
|
aiMsgElement.dataset.variantIndex = String(variants.length - 1);
|
|
|
|
// Persist variant metadata to server
|
|
try {
|
|
await fetch(`${API_BASE}/api/session/${sessionId}/update-last-meta`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ metadata: { variants: variants, variantIndex: variants.length - 1 } }),
|
|
});
|
|
} catch (_) {}
|
|
|
|
// Re-render variant navigation
|
|
_renderVariantNav(aiMsgElement, variants, variants.length - 1);
|
|
}
|
|
|
|
if (uiModule) uiModule.scrollHistory();
|
|
|
|
} catch (err) {
|
|
console.error('Rewrite failed:', err);
|
|
_killRwSpin();
|
|
// Restore original content on failure
|
|
if (bodyEl) bodyEl.innerHTML = oldHtml;
|
|
if (uiModule) uiModule.showError('Rewrite failed: ' + err.message);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Continue the AI's response from where it left off.
|
|
*/
|
|
export async function continueFrom(aiMsgElement) {
|
|
const sessionId = sessionModule.getCurrentSessionId();
|
|
if (!sessionId) return;
|
|
|
|
const messageInput = uiModule.el('message');
|
|
if (messageInput) {
|
|
messageInput.value = 'Continue from where you left off.';
|
|
const submitBtn = document.querySelector('.send-btn');
|
|
if (submitBtn) submitBtn.click();
|
|
}
|
|
}
|
|
|
|
// Open a chat attachment in the right place: images → Gallery editor; PDFs &
|
|
// text/code/markdown → Documents viewer; anything else → raw file. A given
|
|
// upload's imported document is reused (cached by upload id) so clicking it
|
|
// again re-opens the same doc instead of making duplicates.
|
|
const _attachDocCache = new Map(); // upload id -> doc id
|
|
function _attachLang(name) {
|
|
const m = (name || '').toLowerCase().match(/\.([a-z0-9]+)$/);
|
|
const ext = m ? m[1] : '';
|
|
const map = { md:'markdown', markdown:'markdown', js:'javascript', ts:'typescript',
|
|
jsx:'javascript', tsx:'typescript', py:'python', rb:'ruby', go:'go', rs:'rust',
|
|
java:'java', c:'c', cpp:'cpp', h:'c', hpp:'cpp', cs:'csharp', php:'php', html:'html',
|
|
htm:'html', css:'css', scss:'scss', json:'json', yaml:'yaml', yml:'yaml', sh:'bash',
|
|
bash:'bash', sql:'sql', csv:'csv', xml:'xml' };
|
|
return map[ext] || '';
|
|
}
|
|
async function openAttachment(att, isImage) {
|
|
if (!att || !att.id) return;
|
|
const id = att.id, name = att.name || '', mime = att.mime || '';
|
|
const url = `${API_BASE}/api/upload/${id}`;
|
|
|
|
// Images → Gallery editor.
|
|
if (isImage) {
|
|
try {
|
|
const gx = await import('./galleryEditor.js');
|
|
if (gx.openEditor) { gx.openEditor(url, id, null, name); return; }
|
|
} catch (e) { console.warn('gallery open failed', e); }
|
|
window.open(url, '_blank');
|
|
return;
|
|
}
|
|
|
|
const isPdf = mime === 'application/pdf' || /\.pdf$/i.test(name);
|
|
const TEXT_EXT = /\.(txt|md|markdown|js|ts|jsx|tsx|py|rb|go|rs|java|c|cpp|h|hpp|cs|php|html?|css|scss|sass|less|json|ya?ml|toml|ini|conf|env|sh|bash|sql|csv|tsv|xml|log|vue|svelte)$/i;
|
|
const isTextDoc = TEXT_EXT.test(name) || /^text\//.test(mime);
|
|
if (!isPdf && !isTextDoc) { window.open(url, '_blank'); return; } // binary/unknown → raw
|
|
|
|
// Reuse the doc we already imported for this upload, if it still loads.
|
|
const cached = _attachDocCache.get(id);
|
|
if (cached) {
|
|
try {
|
|
documentModule.openPanel && documentModule.openPanel();
|
|
await documentModule.loadDocument(cached);
|
|
return;
|
|
} catch (_) { _attachDocCache.delete(id); }
|
|
}
|
|
|
|
// Need a session to attach the doc to (bare-session fallback, same as compose).
|
|
let sid = '';
|
|
try { sid = sessionModule.getCurrentSessionId() || ''; } catch (_) {}
|
|
if (!sid) {
|
|
try {
|
|
const _fd = new FormData();
|
|
_fd.append('name', name || 'Attachment');
|
|
_fd.append('skip_validation', 'true');
|
|
const r = await fetch(`${API_BASE}/api/session`, { method: 'POST', body: _fd, credentials: 'same-origin' });
|
|
if (r.ok) { const d = await r.json(); if (d && d.id) { sid = d.id; if (sessionModule.loadSessions) await sessionModule.loadSessions(); } }
|
|
} catch (_) {}
|
|
}
|
|
|
|
try {
|
|
let doc;
|
|
if (isPdf) {
|
|
// import-pdf wants a fresh file upload — re-fetch the stored blob and post it.
|
|
const blob = await (await fetch(url)).blob();
|
|
const fd = new FormData();
|
|
fd.append('file', blob, name || 'document.pdf');
|
|
if (sid) fd.append('session_id', sid);
|
|
const res = await fetch(`${API_BASE}/api/documents/import-pdf`, { method: 'POST', body: fd, credentials: 'same-origin' });
|
|
if (!res.ok) throw new Error('import-pdf ' + res.status);
|
|
doc = await res.json();
|
|
} else {
|
|
const text = await (await fetch(url)).text();
|
|
const res = await fetch(`${API_BASE}/api/document`, {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ session_id: sid || null, title: name.replace(/\.[^.]+$/, '') || 'Document', content: text, language: _attachLang(name) }),
|
|
});
|
|
if (!res.ok) throw new Error('document ' + res.status);
|
|
doc = await res.json();
|
|
}
|
|
if (doc && doc.id) {
|
|
_attachDocCache.set(id, doc.id);
|
|
documentModule.openPanel && documentModule.openPanel();
|
|
if (documentModule.injectFreshDoc) documentModule.injectFreshDoc(doc);
|
|
else await documentModule.loadDocument(doc.id);
|
|
}
|
|
} catch (e) {
|
|
console.error('open attachment as document failed', e);
|
|
import('./ui.js').then(m => m.showError && m.showError('Could not open attachment')).catch(() => {});
|
|
window.open(url, '_blank'); // fallback so the file is still reachable
|
|
}
|
|
}
|
|
|
|
// Public API
|
|
const chatModule = {
|
|
init,
|
|
initListeners,
|
|
openAttachment,
|
|
addMessage: chatRenderer.addMessage,
|
|
displayMetrics: chatRenderer.displayMetrics,
|
|
handleChatSubmit,
|
|
abortCurrentRequest,
|
|
detachCurrentStream,
|
|
checkBackgroundStream,
|
|
hideWelcomeScreen: chatRenderer.hideWelcomeScreen,
|
|
showWelcomeScreen: chatRenderer.showWelcomeScreen,
|
|
checkPendingResearch,
|
|
getImageCost: chatRenderer.getImageCost,
|
|
setDisplayOverride,
|
|
setHideUserBubble,
|
|
setPendingContinue,
|
|
regenerateFrom,
|
|
forkFrom,
|
|
editUserMessage,
|
|
editAIMessage,
|
|
resendUserMessage,
|
|
deleteMessage,
|
|
rewriteWith,
|
|
continueFrom,
|
|
_appendViewReportLink,
|
|
hasActiveStream,
|
|
};
|
|
|
|
// Single delegated handler for tool-call fold/expand. One listener on
|
|
// document.body covers every .agent-thread-node — running, completed,
|
|
// streaming, history-rendered, compare-mode, all of them. Re-attaching
|
|
// per-node listeners on every innerHTML rewrite was the source of the
|
|
// "needs many clicks" bug.
|
|
if (!window.__odysseus_thread_click_bound) {
|
|
document.body.addEventListener('click', (e) => {
|
|
const header = e.target.closest('.agent-thread-header');
|
|
if (!header) return;
|
|
const node = header.closest('.agent-thread-node');
|
|
if (!node) return;
|
|
node.classList.toggle('open');
|
|
});
|
|
window.__odysseus_thread_click_bound = true;
|
|
}
|
|
|
|
export default chatModule;
|
|
window.chatModule = chatModule;
|