diff --git a/src/lib/components/chat/ContentRenderer/FloatingButtons.svelte b/src/lib/components/chat/ContentRenderer/FloatingButtons.svelte
index e36781e090..7caa36e0c7 100644
--- a/src/lib/components/chat/ContentRenderer/FloatingButtons.svelte
+++ b/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 @@
{#if !floatingInput}
diff --git a/src/lib/components/chat/Messages/ContentRenderer.svelte b/src/lib/components/chat/Messages/ContentRenderer.svelte
index 05bc83822f..4bbb87597e 100644
--- a/src/lib/components/chat/Messages/ContentRenderer.svelte
+++ b/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 @@
});
+
+
{#if output?.length}