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

fix: resolve chat bubble download button issues

Browse source 
- Fix multiple download button creation by using correct selector
- Add download buttons to historical messages during creation
- Ensure download buttons appear next to play buttons consistently
- Show/hide download buttons instead of creating them dynamically
This commit is contained in:
Russell Ballestrini 2025-07-10 21:54:32 -04:00
parent e58303f971
commit 48c5146e65
3 changed files with 28 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/uncloseai-embed-modal.js
View file

@ -1399,12 +1399,10 @@ You have complete knowledge of this page content and can reference any details,
);
historicalUserAudio = result.audio;
// Add download button if not already present
if (!userMessageActions.querySelector('.download-btn')) {
const downloadBtn = document.createElement("button");
downloadBtn.textContent = "💾";
downloadBtn.title = getUIText("downloadChatAudio");
downloadBtn.className = "uncloseai-btn-small uncloseai-download-btn";
// Show and set up the download button
const downloadBtn = userMessageActions.querySelector('.uncloseai-download-btn');
if (downloadBtn) {
downloadBtn.style.display = ""; // Show the button
downloadBtn.onclick = async () => {
try {
const { generateTitleForTTS } = await import("./tts.js");
@ -1421,13 +1419,6 @@ You have complete knowledge of this page content and can reference any details,
a.click();
}
};
// Insert download button right after the play button (before delete button)
const userDeleteBtn = userMessageActions.querySelector('button[title="Delete message"]');
if (userDeleteBtn) {
userMessageActions.insertBefore(downloadBtn, userDeleteBtn);
} else {
userMessageActions.appendChild(downloadBtn);
}
}
// Set up audio event handlers
@ -1487,6 +1478,15 @@ You have complete knowledge of this page content and can reference any details,
};
userMessageActions.appendChild(userTtsBtn);
// Add download button initially (hidden until audio is generated)
const userHistoricalDownloadBtn = document.createElement("button");
userHistoricalDownloadBtn.textContent = "💾";
userHistoricalDownloadBtn.title = getUIText("downloadChatAudio");
userHistoricalDownloadBtn.className = "uncloseai-btn-small uncloseai-download-btn";
userHistoricalDownloadBtn.style.display = "none"; // Hidden initially
userMessageActions.appendChild(userHistoricalDownloadBtn);
userMessageActions.appendChild(userDeleteBtn);
userMsg.appendChild(messageText);
userMsg.appendChild(userMessageActions);
@ -1557,12 +1557,10 @@ You have complete knowledge of this page content and can reference any details,
);
historicalAudio = result.audio;
// Add download button if not already present
if (!messageActions.querySelector('.download-btn')) {
const downloadBtn = document.createElement("button");
downloadBtn.textContent = "💾";
downloadBtn.title = getUIText("downloadChatAudio");
downloadBtn.className = "uncloseai-btn-small uncloseai-download-btn";
// Show and set up the download button
const downloadBtn = messageActions.querySelector('.uncloseai-download-btn');
if (downloadBtn) {
downloadBtn.style.display = ""; // Show the button
downloadBtn.onclick = async () => {
try {
const { generateTitleForTTS } = await import("./tts.js");
@ -1579,13 +1577,6 @@ You have complete knowledge of this page content and can reference any details,
a.click();
}
};
// Insert download button right after the play button (before copy buttons)
const copyRawBtn = messageActions.querySelector('button[title="Copy raw response"]');
if (copyRawBtn) {
messageActions.insertBefore(downloadBtn, copyRawBtn);
} else {
messageActions.appendChild(downloadBtn);
}
}
// Set up audio event handlers
@ -1684,6 +1675,15 @@ You have complete knowledge of this page content and can reference any details,
};
messageActions.appendChild(ttsBtn);
// Add download button initially (hidden until audio is generated)
const aiHistoricalDownloadBtn = document.createElement("button");
aiHistoricalDownloadBtn.textContent = "💾";
aiHistoricalDownloadBtn.title = getUIText("downloadChatAudio");
aiHistoricalDownloadBtn.className = "uncloseai-btn-small uncloseai-download-btn";
aiHistoricalDownloadBtn.style.display = "none"; // Hidden initially
messageActions.appendChild(aiHistoricalDownloadBtn);
messageActions.appendChild(copyRawBtn);
messageActions.appendChild(copyHtmlBtn);
messageActions.appendChild(deleteBtn);

2
src/uncloseai-modal-builtin.css
View file

@ -828,7 +828,7 @@ dialog#tts-modal {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
gap: 8px;
gap: 18px;
opacity: 0.8;
justify-content: end;
}

2
src/uncloseai-modal-pico.css
View file

@ -884,7 +884,7 @@ dialog#tts-modal::backdrop {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
gap: 8px;
gap: 18px;
opacity: 0.8;
justify-content: end;
}