enh: user message edit

src/lib/components/chat/Messages.svelte

@@ -51,34 +51,43 @@
 		}
 	};
 
-	const confirmEditMessage = async (messageId, content) => {
-		let userPrompt = content;
-		let userMessageId = uuidv4();
-
-		let userMessage = {
-			id: userMessageId,
-			parentId: history.messages[messageId].parentId,
-			childrenIds: [],
-			role: 'user',
-			content: userPrompt,
-			...(history.messages[messageId].files && { files: history.messages[messageId].files }),
-			models: selectedModels
-		};
+	const confirmEditMessage = async (messageId, content, submit = true) => {
+		if (submit) {
+			let userPrompt = content;
+			let userMessageId = uuidv4();
+
+			let userMessage = {
+				id: userMessageId,
+				parentId: history.messages[messageId].parentId,
+				childrenIds: [],
+				role: 'user',
+				content: userPrompt,
+				...(history.messages[messageId].files && { files: history.messages[messageId].files }),
+				models: selectedModels
+			};
+
+			let messageParentId = history.messages[messageId].parentId;
+
+			if (messageParentId !== null) {
+				history.messages[messageParentId].childrenIds = [
+					...history.messages[messageParentId].childrenIds,
+					userMessageId
+				];
+			}
 
-		let messageParentId = history.messages[messageId].parentId;
+			history.messages[userMessageId] = userMessage;
+			history.currentId = userMessageId;
 
-		if (messageParentId !== null) {
-			history.messages[messageParentId].childrenIds = [
-				...history.messages[messageParentId].childrenIds,
-				userMessageId
-			];
+			await tick();
+			await sendPrompt(userPrompt, userMessageId);
+		} else {
+			history.messages[messageId].content = content;
+			await tick();
+			await updateChatById(localStorage.token, chatId, {
+				messages: messages,
+				history: history
+			});
 		}
-
-		history.messages[userMessageId] = userMessage;
-		history.currentId = userMessageId;
-
-		await tick();
-		await sendPrompt(userPrompt, userMessageId);
 	};
 
 	const updateChatMessages = async () => {

src/lib/components/chat/Messages/UserMessage.svelte

@@ -45,8 +45,8 @@
 		messageEditTextAreaElement?.focus();
 	};
 
-	const editMessageConfirmHandler = async () => {
-		confirmEditMessage(message.id, editedContent);
+	const editMessageConfirmHandler = async (submit = true) => {
+		confirmEditMessage(message.id, editedContent, submit);
 
 		edit = false;
 		editedContent = '';
@@ -140,26 +140,40 @@
 						}}
 					/>
 
-					<div class=" mt-2 mb-1 flex justify-end space-x-1.5 text-sm font-medium">
-						<button
-							id="close-edit-message-button"
-							class="px-4 py-2 bg-white dark:bg-gray-900 hover:bg-gray-100 text-gray-800 dark:text-gray-100 transition rounded-3xl"
-							on:click={() => {
-								cancelEditMessage();
-							}}
-						>
-							{$i18n.t('Cancel')}
-						</button>
+					<div class=" mt-2 mb-1 flex justify-between text-sm font-medium">
+						<div>
+							<button
+								id="save-edit-message-button"
+								class=" px-4 py-2 bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border dark:border-gray-700 text-gray-700 dark:text-gray-200 transition rounded-3xl"
+								on:click={() => {
+									editMessageConfirmHandler(false);
+								}}
+							>
+								{$i18n.t('Save')}
+							</button>
+						</div>
 
-						<button
-							id="save-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={() => {
-								editMessageConfirmHandler();
-							}}
-						>
-							{$i18n.t('Send')}
-						</button>
+						<div class="flex space-x-1.5">
+							<button
+								id="close-edit-message-button"
+								class="px-4 py-2 bg-white dark:bg-gray-900 hover:bg-gray-100 text-gray-800 dark:text-gray-100 transition rounded-3xl"
+								on:click={() => {
+									cancelEditMessage();
+								}}
+							>
+								{$i18n.t('Cancel')}
+							</button>
+
+							<button
+								id="save-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={() => {
+									editMessageConfirmHandler();
+								}}
+							>
+								{$i18n.t('Send')}
+							</button>
+						</div>
 					</div>
 				</div>
 			{:else}