From ba76f1dbcd13b17f42a06739fe612ae1326ffd57 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell.ballestrini@gmail.com>
Date: Wed, 2 Jul 2025 14:43:47 -0400
Subject: [PATCH] feat: move delete buttons inside user message bubbles

---
 src/ui.js | 54 ++++++++++++++++++++++++++++++++++++------------------
 1 file changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/ui.js b/src/ui.js
index fbafcad..5b8996b 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -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");