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

feat: move delete buttons inside user message bubbles

Browse source
This commit is contained in:
Russell Ballestrini 2025-07-02 14:43:47 -04:00
parent 36289d6f5c
commit ba76f1dbcd
1 changed files with 36 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/ui.js
View file

@ -1191,16 +1191,17 @@ async function openUncloseaiEmbeddedModalNew() {
max-width: 80%;
word-wrap: break-word;
`;
userMsg.textContent = message;
chatBox.appendChild(userMsg);
// Add user message actions
// Add message text and actions inside the bubble
const messageText = document.createElement("div");
messageText.textContent = message;
messageText.style.cssText = `margin-bottom: 8px;`;
const userMessageActions = document.createElement("div");
userMessageActions.style.cssText = `
margin-top: 8px;
display: flex;
gap: 8px;
opacity: 0.7;
opacity: 0.8;
justify-content: flex-end;
`;
@ -1208,14 +1209,21 @@ async function openUncloseaiEmbeddedModalNew() {
userDeleteBtn.textContent = "🗑️";
userDeleteBtn.title = "Delete message";
userDeleteBtn.style.cssText = `
background: none;
border: 1px solid #dee2e6;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 4px;
padding: 4px 8px;
cursor: pointer;
font-size: 12px;
color: white;
transition: all 0.2s;
`;
userDeleteBtn.onmouseenter = () => {
userDeleteBtn.style.background = 'rgba(255, 255, 255, 0.3)';
};
userDeleteBtn.onmouseleave = () => {
userDeleteBtn.style.background = 'rgba(255, 255, 255, 0.2)';
};
userDeleteBtn.onclick = () => {
// Remove from chat history
const currentHistory = getChatHistory();
@ -1224,11 +1232,12 @@ async function openUncloseaiEmbeddedModalNew() {
saveConversationHistory(updatedHistory);
userMsg.remove();
userMessageActions.remove();
};
userMessageActions.appendChild(userDeleteBtn);
chatBox.appendChild(userMessageActions);
userMsg.appendChild(messageText);
userMsg.appendChild(userMessageActions);
chatBox.appendChild(userMsg);
// Add AI response placeholder
const aiMsg = document.createElement("div");
@ -1519,16 +1528,17 @@ You have complete knowledge of this page content and can reference any details,
max-width: 80%;
word-wrap: break-word;
`;
userMsg.textContent = msg.content;
chatBox.appendChild(userMsg);
// Add user message actions
// Add message text and actions inside the bubble
const messageText = document.createElement("div");
messageText.textContent = msg.content;
messageText.style.cssText = `margin-bottom: 8px;`;
const userMessageActions = document.createElement("div");
userMessageActions.style.cssText = `
margin-top: 8px;
display: flex;
gap: 8px;
opacity: 0.7;
opacity: 0.8;
justify-content: flex-end;
`;
@ -1536,14 +1546,21 @@ You have complete knowledge of this page content and can reference any details,
userDeleteBtn.textContent = "🗑️";
userDeleteBtn.title = "Delete message";
userDeleteBtn.style.cssText = `
background: none;
border: 1px solid #dee2e6;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 4px;
padding: 4px 8px;
cursor: pointer;
font-size: 12px;
color: white;
transition: all 0.2s;
`;
userDeleteBtn.onmouseenter = () => {
userDeleteBtn.style.background = 'rgba(255, 255, 255, 0.3)';
};
userDeleteBtn.onmouseleave = () => {
userDeleteBtn.style.background = 'rgba(255, 255, 255, 0.2)';
};
userDeleteBtn.onclick = () => {
// Remove from chat history by index
const currentHistory = loadConversationHistory();
@ -1561,11 +1578,12 @@ You have complete knowledge of this page content and can reference any details,
}
userMsg.remove();
userMessageActions.remove();
};
userMessageActions.appendChild(userDeleteBtn);
chatBox.appendChild(userMessageActions);
userMsg.appendChild(messageText);
userMsg.appendChild(userMessageActions);
chatBox.appendChild(userMsg);
console.log("Added user message to chatBox");
} else if (msg.role === 'assistant') {
const aiMsg = document.createElement("div");