diff --git a/templates/chat.html b/templates/chat.html index b2b32a7..143c5af 100644 --- a/templates/chat.html +++ b/templates/chat.html @@ -1364,9 +1364,16 @@ function addCopyButtonToCodeBlock(block, wasTruncated = false) { executeCodeBlock(contentToCopy, block, playButton); }; + // Create a button to download compiled binary (hidden initially) + const downloadBinaryButton = document.createElement('button'); + downloadBinaryButton.textContent = '⬇ Download Binary'; + downloadBinaryButton.classList.add('download-binary-button'); + downloadBinaryButton.style.display = 'none'; + // Add buttons to container buttonContainer.appendChild(copyButton); buttonContainer.appendChild(playButton); + buttonContainer.appendChild(downloadBinaryButton); // Insert the button container after the
element (not inside it)
// block is , block.parentNode is
@@ -1600,55 +1607,57 @@ function displayExecutionResults(result, resultsContainer, language) {
resultsContainer.innerHTML = outputHtml;
+ // Find the download binary button (it's in the button container next to the Run button)
+ // resultsContainer is inside , button container is the next sibling of
+ const preElement = resultsContainer.parentNode;
+ const buttonContainer = preElement.nextSibling;
+ const downloadButton = buttonContainer?.querySelector('.download-binary-button');
+
// Check for compiled binary artifact
if (result.artifact && result.artifact.type === 'base64' && result.artifact.data) {
- // Create download binary button
- const downloadButton = document.createElement('button');
- downloadButton.textContent = '⬇ Download Binary';
- downloadButton.style.marginTop = '10px';
- downloadButton.style.padding = '6px 12px';
- downloadButton.style.backgroundColor = 'var(--button-primary)';
- downloadButton.style.color = 'white';
- downloadButton.style.border = 'none';
- downloadButton.style.borderRadius = '4px';
- downloadButton.style.cursor = 'pointer';
- downloadButton.style.fontFamily = 'inherit';
- downloadButton.style.fontSize = '14px';
+ // Show and populate the download button
+ if (downloadButton) {
+ downloadButton.style.display = 'inline-block';
+ downloadButton.onclick = () => {
+ try {
+ // Convert base64 to binary
+ const binaryString = atob(result.artifact.data);
+ const bytes = new Uint8Array(binaryString.length);
+ for (let i = 0; i < binaryString.length; i++) {
+ bytes[i] = binaryString.charCodeAt(i);
+ }
- downloadButton.onclick = () => {
- try {
- // Convert base64 to binary
- const binaryString = atob(result.artifact.data);
- const bytes = new Uint8Array(binaryString.length);
- for (let i = 0; i < binaryString.length; i++) {
- bytes[i] = binaryString.charCodeAt(i);
+ // Create blob and download
+ const blob = new Blob([bytes], { type: 'application/octet-stream' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = result.artifact.filename || 'compiled_binary';
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+ } catch (error) {
+ console.error('Error downloading binary:', error);
+ alert('Failed to download binary: ' + error.message);
}
+ };
+ }
+ } else {
+ // Hide the download button if no artifact or artifact error
+ if (downloadButton) {
+ downloadButton.style.display = 'none';
+ }
- // Create blob and download
- const blob = new Blob([bytes], { type: 'application/octet-stream' });
- const url = URL.createObjectURL(blob);
- const a = document.createElement('a');
- a.href = url;
- a.download = result.artifact.filename || 'compiled_binary';
- document.body.appendChild(a);
- a.click();
- document.body.removeChild(a);
- URL.revokeObjectURL(url);
- } catch (error) {
- console.error('Error downloading binary:', error);
- alert('Failed to download binary: ' + error.message);
- }
- };
-
- resultsContainer.appendChild(downloadButton);
- } else if (result.artifact && result.artifact.type === 'error') {
// Show artifact error if present
- const artifactError = document.createElement('div');
- artifactError.style.color = 'var(--text-warning)';
- artifactError.style.marginTop = '8px';
- artifactError.style.fontSize = '12px';
- artifactError.textContent = `Artifact error: ${result.artifact.error}`;
- resultsContainer.appendChild(artifactError);
+ if (result.artifact && result.artifact.type === 'error') {
+ const artifactError = document.createElement('div');
+ artifactError.style.color = 'var(--text-warning)';
+ artifactError.style.marginTop = '8px';
+ artifactError.style.fontSize = '12px';
+ artifactError.textContent = `Artifact error: ${result.artifact.error}`;
+ resultsContainer.appendChild(artifactError);
+ }
}
}