enh: message edit/delete integration

src/lib/apis/channels/index.ts

@@ -233,5 +233,68 @@ export const sendMessage = async (token: string = '', channel_id: string, messag
 		throw error;
 	}
 
+	return res;
+}
+
+export const updateMessage = async (token: string = '', channel_id: string, message_id: string, message: MessageForm) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/channels/${channel_id}/messages/${message_id}/update`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		},
+		body: JSON.stringify({ ...message })
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err.detail;
+			console.log(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+}
+
+export const deleteMessage = async (token: string = '', channel_id: string, message_id: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/channels/${channel_id}/messages/${message_id}/delete`, {
+		method: 'DELETE',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.then((json) => {
+			return json;
+		})
+		.catch((err) => {
+			error = err.detail;
+			console.log(err);
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
 	return res;
 }

src/lib/components/channel/Channel.svelte

@@ -66,6 +66,16 @@
 				if (scrollEnd) {
 					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);
 			}
 		}
 	};

src/lib/components/channel/Messages.svelte

@@ -16,6 +16,7 @@
 	import Message from './Messages/Message.svelte';
 	import Loader from '../common/Loader.svelte';
 	import Spinner from '../common/Spinner.svelte';
+	import { deleteMessage, updateMessage } from '$lib/apis/channels';
 
 	const i18n = getContext('i18n');
 
@@ -92,6 +93,22 @@
 				{message}
 				showUserProfile={messageIdx === 0 ||
 					messageList.at(messageIdx - 1)?.user_id !== message.user_id}
+				onDelete={() => {
+					const res = deleteMessage(localStorage.token, message.channel_id, message.id).catch(
+						(error) => {
+							toast.error(error);
+							return null;
+						}
+					);
+				}}
+				onEdit={(content) => {
+					const res = updateMessage(localStorage.token, message.channel_id, message.id, {
+						content: content
+					}).catch((error) => {
+						toast.error(error);
+						return null;
+					});
+				}}
 			/>
 		{/each}
 

src/lib/components/channel/Messages/Message.svelte

@@ -53,7 +53,7 @@
 	title={$i18n.t('Delete Message')}
 	message={$i18n.t('Are you sure you want to delete this message?')}
 	onConfirm={async () => {
-		await onDelete(message.id);
+		await onDelete();
 	}}
 />
 
@@ -177,7 +177,7 @@
 									id="confirm-edit-message-button"
 									class=" px-4 py-2 bg-gray-900 dark:bg-white hover:bg-gray-850 text-gray-100 dark:text-gray-800 transition rounded-3xl"
 									on:click={async () => {
-										onEdit(message.id, editedContent);
+										onEdit(editedContent);
 										edit = false;
 										editedContent = null;
 									}}