Emil_Shanaty/open-webui-ai4me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Fix memory leaking of MessageInput (#21968)

Browse Source
This commit is contained in:
Shirasawa
2026-02-28 14:03:08 -05:00
committed by GitHub
parent 242b3f0c01
commit 5bb1c42fa8
2 changed files with 58 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/channel/MessageInput.svelte
+25 -17
View File
@@ -2,7 +2,7 @@
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
import { tick, getContext, onMount, onDestroy } from 'svelte'; import { tick, getContext, onMount } from 'svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@@ -510,7 +510,7 @@
} }
}; };
const onDragOver = (e) => { const onDragOver = (e: DragEvent) => {
e.preventDefault(); e.preventDefault();
// Check if a file is being draggedOver. // Check if a file is being draggedOver.
@@ -525,7 +525,7 @@
draggedOver = false; draggedOver = false;
}; };
const onDrop = async (e) => { const onDrop = async (e: DragEvent) => {
e.preventDefault(); e.preventDefault();
if (e.dataTransfer?.files && acceptFiles) { if (e.dataTransfer?.files && acceptFiles) {
@@ -567,7 +567,7 @@
onChange(); onChange();
} }
onMount(async () => { onMount(() => {
suggestions = [ suggestions = [
{ {
char: '@', char: '@',
@@ -633,24 +633,32 @@
}, 100); }, 100);
window.addEventListener('keydown', handleKeyDown); window.addEventListener('keydown', handleKeyDown);
await tick();
const dropzoneElement = document.getElementById('channel-container'); let isDestroyed = false;
let dropzoneElement: HTMLElement | null = null;
const initialize = async () => {
await tick();
if (isDestroyed) return;
dropzoneElement?.addEventListener('dragover', onDragOver); dropzoneElement = document.getElementById('channel-container');
dropzoneElement?.addEventListener('drop', onDrop); if (dropzoneElement) {
dropzoneElement?.addEventListener('dragleave', onDragLeave); dropzoneElement.addEventListener('dragover', onDragOver);
}); dropzoneElement.addEventListener('drop', onDrop);
dropzoneElement.addEventListener('dragleave', onDragLeave);
}
}
initialize();
onDestroy(() => { return () => {
window.removeEventListener('keydown', handleKeyDown); isDestroyed = true;
const dropzoneElement = document.getElementById('channel-container'); window.removeEventListener('keydown', handleKeyDown);
if (dropzoneElement) { if (dropzoneElement) {
dropzoneElement?.removeEventListener('dragover', onDragOver); dropzoneElement.removeEventListener('dragover', onDragOver);
dropzoneElement?.removeEventListener('drop', onDrop); dropzoneElement.removeEventListener('drop', onDrop);
dropzoneElement?.removeEventListener('dragleave', onDragLeave); dropzoneElement.removeEventListener('dragleave', onDragLeave);
}
} }
}); });
</script> </script>
src/lib/components/chat/MessageInput.svelte
+33 -27
View File
@@ -11,7 +11,7 @@
dayjs.extend(duration); dayjs.extend(duration);
dayjs.extend(relativeTime); dayjs.extend(relativeTime);
import { onMount, tick, getContext, createEventDispatcher, onDestroy } from 'svelte'; import { onMount, tick, getContext, createEventDispatcher } from 'svelte';
import { createPicker, getAuthToken } from '$lib/utils/google-drive-picker'; import { createPicker, getAuthToken } from '$lib/utils/google-drive-picker';
import { pickAndDownloadFile } from '$lib/utils/onedrive-file-picker'; import { pickAndDownloadFile } from '$lib/utils/onedrive-file-picker';
@@ -798,7 +798,7 @@
} }
}; };
const onDragOver = (e) => { const onDragOver = (e: DragEvent) => {
e.preventDefault(); e.preventDefault();
// Check if a file is being dragged. // Check if a file is being dragged.
@@ -809,14 +809,14 @@
} }
}; };
const onDragLeave = (e) => { const onDragLeave = (e: DragEvent) => {
if (e.currentTarget.contains(e.relatedTarget)) { if ((e.currentTarget as HTMLElement)?.contains(e.relatedTarget as Node)) {
return; return;
} }
dragged = false; dragged = false;
}; };
const onDrop = async (e) => { const onDrop = async (e: DragEvent) => {
e.preventDefault(); e.preventDefault();
console.log(e); console.log(e);
@@ -831,7 +831,7 @@
dragged = false; dragged = false;
}; };
const onKeyDown = (e) => { const onKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Shift') { if (e.key === 'Shift') {
shiftKey = true; shiftKey = true;
} }
@@ -855,7 +855,7 @@
} }
}; };
const onKeyUp = (e) => { const onKeyUp = (e: KeyboardEvent) => {
if (e.key === 'Shift') { if (e.key === 'Shift') {
shiftKey = false; shiftKey = false;
} }
@@ -867,7 +867,7 @@
shiftKey = false; shiftKey = false;
}; };
onMount(async () => { onMount(() => {
suggestions = [ suggestions = [
{ {
char: '@', char: '@',
@@ -1000,31 +1000,37 @@
window.addEventListener('focus', onFocus); window.addEventListener('focus', onFocus);
window.addEventListener('blur', onBlur); window.addEventListener('blur', onBlur);
await tick(); let isDestroyed = false;
let dropzoneElement: HTMLElement | null = null;
const initialize = async () => {
await tick();
if (isDestroyed) return;
const dropzoneElement = document.getElementById('chat-pane'); dropzoneElement = document.getElementById('chat-pane');
if (dropzoneElement) {
dropzoneElement.addEventListener('dragover', onDragOver);
dropzoneElement.addEventListener('drop', onDrop);
dropzoneElement.addEventListener('dragleave', onDragLeave);
}
dropzoneElement?.addEventListener('dragover', onDragOver); tools.set(await getTools(localStorage.token));
dropzoneElement?.addEventListener('drop', onDrop); }
dropzoneElement?.addEventListener('dragleave', onDragLeave); initialize();
await tools.set(await getTools(localStorage.token)); return () => {
}); isDestroyed = true;
onDestroy(() => { window.removeEventListener('keydown', onKeyDown);
console.log('destroy'); window.removeEventListener('keyup', onKeyUp);
window.removeEventListener('keydown', onKeyDown);
window.removeEventListener('keyup', onKeyUp);
window.removeEventListener('focus', onFocus); window.removeEventListener('focus', onFocus);
window.removeEventListener('blur', onBlur); window.removeEventListener('blur', onBlur);
const dropzoneElement = document.getElementById('chat-pane'); if (dropzoneElement) {
dropzoneElement.removeEventListener('dragover', onDragOver);
if (dropzoneElement) { dropzoneElement.removeEventListener('drop', onDrop);
dropzoneElement?.removeEventListener('dragover', onDragOver); dropzoneElement.removeEventListener('dragleave', onDragLeave);
dropzoneElement?.removeEventListener('drop', onDrop); }
dropzoneElement?.removeEventListener('dragleave', onDragLeave);
} }
}); });
</script> </script>