.*?<\/execute>/gs, "");
msgDiv.innerHTML = `${sender}:${useMarkdown ? renderMarkdown(displayText) : `${escapeHtml(displayText)}`}`;
commands.forEach(cmd => {
const cmdWrapper = document.createElement("div");
cmdWrapper.className = "command-wrapper";
const cmdPre = document.createElement("pre");
cmdPre.className = "command-block";
cmdPre.textContent = cmd;
const btnContainer = document.createElement("div");
btnContainer.className = "command-buttons";
const executeBtn = createExecuteButton(cmd, container);
const copyBtn = createCopyButton(cmd);
btnContainer.appendChild(executeBtn);
btnContainer.appendChild(copyBtn);
cmdWrapper.appendChild(cmdPre);
cmdWrapper.appendChild(btnContainer);
msgDiv.appendChild(cmdWrapper);
});
} else if (useMarkdown) {
msgDiv.innerHTML = `${sender}:${renderMarkdown(String(message))}
`;
addCopyButtonsToCodeBlocks(msgDiv);
} else {
msgDiv.innerHTML = `${sender}: ${escapeHtml(String(message))}`;
}
container.appendChild(msgDiv);
container.scrollTop = container.scrollHeight;
if (window.Prism) {
try {
Prism.highlightAllUnder(msgDiv);
} catch (_) {}
}
return msgDiv;
}
// ---------- Streaming UI ----------
function createStreamingMessage(container, sender) {
const msgDiv = document.createElement("div");
msgDiv.classList.add("message", "loading");
msgDiv.innerHTML = `${sender}: `;
const contentSpan = msgDiv.querySelector(".streaming-content");
container.appendChild(msgDiv);
container.scrollTop = container.scrollHeight;
return {
msgDiv,
contentSpan,
updateContent: (text) => {
contentSpan.textContent = text;
container.scrollTop = container.scrollHeight;
},
finalize: (text) => {
msgDiv.remove();
appendMessage(container, sender, text, true);
}
};
}
// ---------- SSE Streaming ----------
async function sendPromptStreaming(prompt, output, sendBtn, input) {
const streamUI = createStreamingMessage(output, "DeepShell");
let fullText = "";
try {
const response = await fetch("/chat/run-agent-stream", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ prompt, mode: window.currentMode || "assistant" }),
});
if (!response.ok) {
throw new Error(`Server error: ${response.status}`);
}
const reader = response.body.getReader();
const decoder = new TextDecoder("utf-8");
let buffer = "";
while (true) {
const { done, value } = await reader.read();
if (done) break;
buffer += decoder.decode(value, { stream: true });
const lines = buffer.split("\n\n");
buffer = lines.pop();
for (const line of lines) {
if (!line.trim() || !line.startsWith("data: ")) continue;
const jsonStr = line.substring(6);
try {
const data = JSON.parse(jsonStr);
if (data.type === "token") {
fullText += data.text;
streamUI.updateContent(fullText);
} else if (data.type === "done") {
streamUI.finalize(fullText);
window.speakText(fullText);
return;
} else if (data.type === "error") {
throw new Error(data.message);
}
} catch (e) {
console.warn("Failed to parse SSE data:", jsonStr, e);
}
}
}
if (fullText) {
streamUI.finalize(fullText);
}
} catch (err) {
streamUI.msgDiv.remove();
appendMessage(output, "Error", `${err.message}`, false, true);
console.error("Streaming error:", err);
} finally {
if (sendBtn) sendBtn.disabled = false;
input.focus();
}
}
// ---------- Clear Chat ----------
async function clearChat(output) {
if (!confirm("Clear conversation history? This cannot be undone.")) {
return;
}
try {
const response = await fetch("/chat/clear", {
method: "POST",
});
if (response.ok) {
output.innerHTML = "";
appendMessage(output, "System", "Chat cleared. Session history reset.", false);
} else {
throw new Error("Failed to clear chat");
}
} catch (err) {
appendMessage(output, "Error", `Failed to clear chat: ${err.message}`, false, true);
}
}
// ---------- Export Chat ----------
function exportChat(output) {
const messages = output.querySelectorAll(".message");
if (messages.length === 0) {
alert("No messages to export!");
return;
}
let markdown = "# DeepShell Chat Export\n\n";
markdown += `**Exported:** ${new Date().toLocaleString()}\n\n---\n\n`;
messages.forEach((msg) => {
const sender = msg.querySelector("strong")?.textContent.replace(":", "") || "Unknown";
// Get text content, excluding buttons
const clone = msg.cloneNode(true);
clone.querySelectorAll("button").forEach(btn => btn.remove());
const content = clone.textContent
.replace(sender + ":", "")
.trim();
markdown += `## ${sender}\n\n${content}\n\n---\n\n`;
});
// Create download
const blob = new Blob([markdown], { type: "text/markdown" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = `deepshell-chat-${Date.now()}.md`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
// ---------- Chat wiring ----------
document.addEventListener("DOMContentLoaded", () => {
const form = document.getElementById("chat-form");
const input = document.getElementById("chat-input");
const output = document.getElementById("chat-output");
const sendBtn = document.getElementById("chat-send");
const clearBtn = document.getElementById("clear-btn");
const exportBtn = document.getElementById("export-btn");
if (!form || !input || !output) {
console.warn("Chat elements not found (chat-form/chat-input/chat-output).");
return;
}
// Send message
form.addEventListener("submit", (e) => {
e.preventDefault();
const prompt = input.value.trim();
if (!prompt) return;
// Hide welcome message on first user input
const welcome = document.getElementById("welcome-msg");
if (welcome) welcome.style.display = "none";
appendMessage(output, "You", prompt);
input.value = "";
if (sendBtn) sendBtn.disabled = true;
sendPromptStreaming(prompt, output, sendBtn, input);
});
if (sendBtn) {
sendBtn.addEventListener("click", (e) => {
e.preventDefault();
form.requestSubmit();
});
}
// Clear chat button
if (clearBtn) {
clearBtn.addEventListener("click", () => {
clearChat(output);
});
}
// Export chat button
if (exportBtn) {
exportBtn.addEventListener("click", () => {
exportChat(output);
});
}
// Enter to send, Shift+Enter for newline
input.addEventListener("keydown", (e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
form.requestSubmit();
}
});
});
})();