UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2024-11-28 23:13:30 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Merge pull request #5953 from open-webui/dev

Browse Source 
enh: floating buttons styling
This commit is contained in:
Timothy Jaeryang Baek 2024-10-07 05:31:44 +02:00 committed by GitHub
commit cd62d89dd9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 38 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/lib/components/chat/Messages/ContentRenderer.svelte
View File

@ -36,26 +36,46 @@
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 {
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',
@ -72,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);
}
});
@ -83,18 +110,7 @@
if (floatingButtons) {
contentContainerElement?.removeEventListener('mouseup', updateButtonPosition);
document.removeEventListener('mouseup', updateButtonPosition);
}
});
$: if (floatingButtons) {
if (buttonsContainerElement) {
document.body.appendChild(buttonsContainerElement);
}
}
onDestroy(() => {
if (buttonsContainerElement) {
document.body.removeChild(buttonsContainerElement);
document.removeEventListener('keydown', keydownHandler);
}
});
</script>