From aaa4350eb49c968d2ddba331e6c648461ec0cadf Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sun, 6 Oct 2024 20:26:35 -0700
Subject: [PATCH 1/2] refac: floating buttons styling

---
 .../chat/Messages/ContentRenderer.svelte      | 44 +++++++++++++------
 1 file changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/chat/Messages/ContentRenderer.svelte b/src/lib/components/chat/Messages/ContentRenderer.svelte
index efbc7377e..9efeeb4aa 100644
--- a/src/lib/components/chat/Messages/ContentRenderer.svelte
+++ b/src/lib/components/chat/Messages/ContentRenderer.svelte
@@ -36,13 +36,29 @@
 				const range = selection.getRangeAt(0);
 				const rect = range.getBoundingClientRect();
 
-				// Calculate position relative to the viewport (now that it's in document.body)
-				const top = rect.bottom + window.scrollY;
-				const left = rect.left + window.scrollX;
+				const parentRect = contentContainerElement.getBoundingClientRect();
+
+				// Adjust based on parent rect
+				const top = rect.bottom - parentRect.top;
+				const left = rect.left - parentRect.left;
 
 				if (buttonsContainerElement) {
 					buttonsContainerElement.style.display = 'block';
-					buttonsContainerElement.style.left = `${left}px`;
+
+					// Calculate space available on the right
+					const spaceOnRight = parentRect.width - (left + buttonsContainerElement.offsetWidth);
+
+					if (spaceOnRight < 0) {
+						// Not enough space on the right, position using 'right'
+						const right = parentRect.right - rect.right;
+						buttonsContainerElement.style.right = `${right}px`;
+						buttonsContainerElement.style.left = 'auto'; // Reset left
+					} else {
+						// Enough space, position using 'left'
+						buttonsContainerElement.style.left = `${left}px`;
+						buttonsContainerElement.style.right = 'auto'; // Reset right
+					}
+
 					buttonsContainerElement.style.top = `${top + 5}px`; // +5 to add some spacing
 				}
 			} else {
@@ -86,17 +102,17 @@
 		}
 	});
 
-	$: if (floatingButtons) {
-		if (buttonsContainerElement) {
-			document.body.appendChild(buttonsContainerElement);
-		}
-	}
+	// $: if (floatingButtons) {
+	// 	if (buttonsContainerElement) {
+	// 		document.body.appendChild(buttonsContainerElement);
+	// 	}
+	// }
 
-	onDestroy(() => {
-		if (buttonsContainerElement) {
-			document.body.removeChild(buttonsContainerElement);
-		}
-	});
+	// onDestroy(() => {
+	// 	if (buttonsContainerElement) {
+	// 		document.body.removeChild(buttonsContainerElement);
+	// 	}
+	// });
 </script>
 
 <div bind:this={contentContainerElement}>

From 3686cf7365564662a739c1862b77e1ac9aa16e81 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sun, 6 Oct 2024 20:29:30 -0700
Subject: [PATCH 2/2] enh: esc to close floating buttons

---
 .../chat/Messages/ContentRenderer.svelte      | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/chat/Messages/ContentRenderer.svelte b/src/lib/components/chat/Messages/ContentRenderer.svelte
index 9efeeb4aa..0aede0065 100644
--- a/src/lib/components/chat/Messages/ContentRenderer.svelte
+++ b/src/lib/components/chat/Messages/ContentRenderer.svelte
@@ -62,16 +62,20 @@
 					buttonsContainerElement.style.top = `${top + 5}px`; // +5 to add some spacing
 				}
 			} else {
-				if (buttonsContainerElement) {
-					buttonsContainerElement.style.display = 'none';
-					selectedText = '';
-					floatingInput = false;
-					floatingInputValue = '';
-				}
+				closeFloatingButtons();
 			}
 		}, 0);
 	};
 
+	const closeFloatingButtons = () => {
+		if (buttonsContainerElement) {
+			buttonsContainerElement.style.display = 'none';
+			selectedText = '';
+			floatingInput = false;
+			floatingInputValue = '';
+		}
+	};
+
 	const selectAskHandler = () => {
 		dispatch('select', {
 			type: 'ask',
@@ -88,10 +92,17 @@
 		buttonsContainerElement.style.display = 'none';
 	};
 
+	const keydownHandler = (e) => {
+		if (e.key === 'Escape') {
+			closeFloatingButtons();
+		}
+	};
+
 	onMount(() => {
 		if (floatingButtons) {
 			contentContainerElement?.addEventListener('mouseup', updateButtonPosition);
 			document.addEventListener('mouseup', updateButtonPosition);
+			document.addEventListener('keydown', keydownHandler);
 		}
 	});
 
@@ -99,20 +110,9 @@
 		if (floatingButtons) {
 			contentContainerElement?.removeEventListener('mouseup', updateButtonPosition);
 			document.removeEventListener('mouseup', updateButtonPosition);
+			document.removeEventListener('keydown', keydownHandler);
 		}
 	});
-
-	// $: if (floatingButtons) {
-	// 	if (buttonsContainerElement) {
-	// 		document.body.appendChild(buttonsContainerElement);
-	// 	}
-	// }
-
-	// onDestroy(() => {
-	// 	if (buttonsContainerElement) {
-	// 		document.body.removeChild(buttonsContainerElement);
-	// 	}
-	// });
 </script>
 
 <div bind:this={contentContainerElement}>