engineering/opencompletion.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move download binary button next to Run button (#38)

Browse source 
- Reposition download button from output area to button container
- Place next to Copy and Run buttons with consistent styling
- Button hidden by default, shown only when artifact available
- Remove colored background to match other action buttons

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Russell 2025-11-11 16:41:55 -05:00 • committed by GitHub
parent a260b5fa02
commit 14bfce710d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 52 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

95
templates/chat.html
View file

@ -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 <pre> element (not inside it)
// block is <code>, block.parentNode is <pre>
@ -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 <pre>, button container is the next sibling of <pre>
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);
}
}
}