Merge 0fe9349b61 into d34f73066d

src/lib/components/chat/ContentRenderer/FloatingButtons.svelte

@@ -16,6 +16,15 @@
 	let selectedText = '';
 	let floatingInputValue = '';
 
+	const portal = (node: HTMLElement) => {
+		document.body.appendChild(node);
+		return {
+			destroy() {
+				node.remove();
+			}
+		};
+	};
+
 	$: DEFAULT_ACTIONS = [
 		{
 			id: 'ask',
@@ -82,8 +91,9 @@
 </script>
 
 <div
+	use:portal
 	id={`floating-buttons-${id}`}
-	class="absolute rounded-lg mt-1 text-xs z-9999"
+	class="fixed rounded-lg mt-1 text-xs z-9999"
 	style="display: none"
 >
 	{#if !floatingInput}

src/lib/components/chat/Messages/ContentRenderer.svelte

@@ -99,6 +99,7 @@
 
 	let contentContainerElement;
 	let floatingButtonsElement;
+	let floatingButtonsRange = null;
 
 	let sourceIds = [];
 	$: getSourceIds(sources);
@@ -199,40 +200,41 @@
 			let selection = window.getSelection();
 
 			if (selection.toString().trim().length > 0) {
-				const range = selection.getRangeAt(0);
-				const rect = range.getBoundingClientRect();
-
-				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';
-
-					// Calculate space available on the right
-					const spaceOnRight = parentRect.width - left;
-					let halfScreenWidth = $mobile ? window.innerWidth / 2 : window.innerWidth / 3;
-
-					if (spaceOnRight < halfScreenWidth) {
-						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
-				}
+				floatingButtonsRange = selection.getRangeAt(0);
+				positionFloatingButtons();
 			} else {
 				closeFloatingButtons();
 			}
 		}, 0);
 	};
 
+	const positionFloatingButtons = () => {
+		const buttonsContainerElement = document.getElementById(`floating-buttons-${id}`);
+		if (!floatingButtonsRange || !buttonsContainerElement) return;
+
+		const rect = floatingButtonsRange.getBoundingClientRect();
+		const parentRect = contentContainerElement.getBoundingClientRect();
+
+		buttonsContainerElement.style.display = 'block';
+
+		// Calculate space available on the right
+		const spaceOnRight = parentRect.right - rect.left;
+		let halfScreenWidth = $mobile ? window.innerWidth / 2 : window.innerWidth / 3;
+
+		if (spaceOnRight < halfScreenWidth) {
+			const right = document.documentElement.clientWidth - rect.right;
+			buttonsContainerElement.style.right = `${right}px`;
+			buttonsContainerElement.style.left = 'auto'; // Reset left
+		} else {
+			// Enough space, position using 'left'
+			buttonsContainerElement.style.left = `${rect.left}px`;
+			buttonsContainerElement.style.right = 'auto'; // Reset right
+		}
+		buttonsContainerElement.style.top = `${rect.bottom + 5}px`; // +5 to add some spacing
+	};
+
 	const closeFloatingButtons = () => {
+		floatingButtonsRange = null;
 		const buttonsContainerElement = document.getElementById(`floating-buttons-${id}`);
 		if (buttonsContainerElement) {
 			buttonsContainerElement.style.display = 'none';
@@ -287,6 +289,8 @@
 	});
 </script>
 
+<svelte:window on:scroll|capture={positionFloatingButtons} on:resize={positionFloatingButtons} />
+
 <div bind:this={contentContainerElement}>
 	{#if output?.length}
 		<StructuredOutputRenderer