From 371201d82056ddbc78be3746cdd2feb9db494e43 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 30 Dec 2024 23:12:50 -0800
Subject: [PATCH] refac

---
 backend/open_webui/routers/channels.py        |  3 ++
 src/lib/components/channel/Messages.svelte    | 38 ++++++++++++++++++-
 .../channel/Messages/Message.svelte           |  4 +-
 3 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/backend/open_webui/routers/channels.py b/backend/open_webui/routers/channels.py
index c66e637ca..c79bb46a2 100644
--- a/backend/open_webui/routers/channels.py
+++ b/backend/open_webui/routers/channels.py
@@ -312,6 +312,8 @@ async def update_message_by_id(
 
     try:
         message = Messages.update_message_by_id(message_id, form_data)
+        message = Messages.get_message_by_id(message_id)
+
         if message:
             await sio.emit(
                 "channel-events",
@@ -446,6 +448,7 @@ async def remove_reaction_by_id_and_user_id_and_name(
         )
 
         message = Messages.get_message_by_id(message_id)
+
         await sio.emit(
             "channel-events",
             {
diff --git a/src/lib/components/channel/Messages.svelte b/src/lib/components/channel/Messages.svelte
index 169082cf4..101eaf3c7 100644
--- a/src/lib/components/channel/Messages.svelte
+++ b/src/lib/components/channel/Messages.svelte
@@ -94,6 +94,8 @@
 				showUserProfile={messageIdx === 0 ||
 					messageList.at(messageIdx - 1)?.user_id !== message.user_id}
 				onDelete={() => {
+					messages = messages.filter((m) => m.id !== message.id);
+
 					const res = deleteMessage(localStorage.token, message.channel_id, message.id).catch(
 						(error) => {
 							toast.error(error);
@@ -102,6 +104,13 @@
 					);
 				}}
 				onEdit={(content) => {
+					messages = messages.map((m) => {
+						if (m.id === message.id) {
+							m.content = content;
+						}
+						return m;
+					});
+
 					const res = updateMessage(localStorage.token, message.channel_id, message.id, {
 						content: content
 					}).catch((error) => {
@@ -111,11 +120,18 @@
 				}}
 				onReaction={(name) => {
 					if (
-						message.reactions
+						(message?.reactions ?? [])
 							.find((reaction) => reaction.name === name)
 							?.user_ids?.includes($user.id) ??
 						false
 					) {
+						messages = messages.map((m) => {
+							if (m.id === message.id) {
+								m.reactions = m.reactions.filter((reaction) => reaction.name !== name);
+							}
+							return m;
+						});
+
 						const res = removeReaction(
 							localStorage.token,
 							message.channel_id,
@@ -126,6 +142,26 @@
 							return null;
 						});
 					} else {
+						messages = messages.map((m) => {
+							if (m.id === message.id) {
+								if (m.reactions) {
+									const reaction = m.reactions.find((reaction) => reaction.name === name);
+
+									if (reaction) {
+										reaction.user_ids.push($user.id);
+										reaction.count = reaction.user_ids.length;
+									} else {
+										m.reactions.push({
+											name: name,
+											user_ids: [$user.id],
+											count: 1
+										});
+									}
+								}
+							}
+							return m;
+						});
+
 						const res = addReaction(localStorage.token, message.channel_id, message.id, name).catch(
 							(error) => {
 								toast.error(error);
diff --git a/src/lib/components/channel/Messages/Message.svelte b/src/lib/components/channel/Messages/Message.svelte
index ba757c2f1..928e7fabd 100644
--- a/src/lib/components/channel/Messages/Message.svelte
+++ b/src/lib/components/channel/Messages/Message.svelte
@@ -266,9 +266,9 @@
 							>{/if}
 					</div>
 
-					{#if message.reactions.length > 0}
+					{#if (message?.reactions ?? []).length > 0}
 						<div>
-							<div class="flex items-center gap-1 mt-1 mb-2">
+							<div class="flex items-center flex-wrap gap-y-1.5 gap-1 mt-1 mb-2">
 								{#each message.reactions as reaction}
 									<Tooltip content={`:${reaction.name}:`}>
 										<button