From a3dfa906685a0f832a7e3872c042dca19eb77d06 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Tue, 31 Dec 2024 00:11:46 -0800
Subject: [PATCH] refac: optimisation

---
 src/lib/components/channel/Channel.svelte     |  5 -----
 .../Messages/Message/ReactionPicker.svelte    | 19 +++++++++++++++++--
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/channel/Channel.svelte b/src/lib/components/channel/Channel.svelte
index c1731725b..65bad2746 100644
--- a/src/lib/components/channel/Channel.svelte
+++ b/src/lib/components/channel/Channel.svelte
@@ -74,7 +74,6 @@
 			const data = event?.data?.data ?? null;
 
 			if (type === 'message') {
-				console.log('message', data);
 				messages = [data, ...messages];
 
 				if (typingUsers.find((user) => user.id === event.user.id)) {
@@ -86,18 +85,14 @@
 					messagesContainerElement.scrollTop = messagesContainerElement.scrollHeight;
 				}
 			} else if (type === 'message:update') {
-				console.log('message:update', data);
 				const idx = messages.findIndex((message) => message.id === data.id);
 
 				if (idx !== -1) {
 					messages[idx] = data;
 				}
 			} else if (type === 'message:delete') {
-				console.log('message:delete', data);
 				messages = messages.filter((message) => message.id !== data.id);
 			} else if (type === 'message:reaction') {
-				console.log('message:reaction', data);
-
 				const idx = messages.findIndex((message) => message.id === data.id);
 				if (idx !== -1) {
 					messages[idx] = data;
diff --git a/src/lib/components/channel/Messages/Message/ReactionPicker.svelte b/src/lib/components/channel/Messages/Message/ReactionPicker.svelte
index 710bb1839..5191636f9 100644
--- a/src/lib/components/channel/Messages/Message/ReactionPicker.svelte
+++ b/src/lib/components/channel/Messages/Message/ReactionPicker.svelte
@@ -14,7 +14,7 @@
 	export let user = null;
 	let show = false;
 
-	let emojis = emojiShortCodes;
+	let emojis = {};
 	let search = '';
 
 	$: if (search) {
@@ -39,6 +39,21 @@
 	} else {
 		emojis = emojiShortCodes;
 	}
+
+	$: if (show) {
+		init();
+	} else {
+		destroy();
+	}
+
+	const init = () => {
+		emojis = emojiShortCodes;
+	};
+
+	const destroy = () => {
+		search = '';
+		emojis = {};
+	};
 </script>
 
 <DropdownMenu.Root
@@ -86,7 +101,7 @@
 									</div>
 
 									<div class="flex mb-2 flex-wrap gap-1">
-										{#each groupEmojis as emoji}
+										{#each groupEmojis as emoji (emoji)}
 											<Tooltip
 												content={(typeof emojiShortCodes[emoji] === 'string'
 													? [emojiShortCodes[emoji]]