feat: save as new response message

src/lib/components/chat/Messages.svelte

@@ -108,6 +108,33 @@
 		await updateChatMessages();
 	};
 
+	const saveNewResponseMessage = async (message, content) => {
+		const responseMessageId = uuidv4();
+		const parentId = message.parentId;
+
+		const responseMessage = {
+			...message,
+			id: responseMessageId,
+			parentId: parentId,
+			childrenIds: [],
+			content: content,
+			timestamp: Math.floor(Date.now() / 1000) // Unix epoch
+		};
+
+		history.messages[responseMessageId] = responseMessage;
+		history.currentId = responseMessageId;
+
+		// Append messageId to childrenIds of parent message
+		if (parentId !== null) {
+			history.messages[parentId].childrenIds = [
+				...history.messages[parentId].childrenIds,
+				responseMessageId
+			];
+		}
+
+		await updateChatMessages();
+	};
+
 	const rateMessage = async (messageId, rating) => {
 		history.messages[messageId].annotation = {
 			...history.messages[messageId].annotation,
@@ -342,6 +369,7 @@
 										{readOnly}
 										{updateChatMessages}
 										{confirmEditResponseMessage}
+										{saveNewResponseMessage}
 										{showPreviousMessage}
 										{showNextMessage}
 										{rateMessage}

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

@@ -85,6 +85,8 @@
 
 	export let updateChatMessages: Function;
 	export let confirmEditResponseMessage: Function;
+	export let saveNewResponseMessage: Function;
+
 	export let showPreviousMessage: Function;
 	export let showNextMessage: Function;
 	export let rateMessage: Function;
@@ -267,6 +269,15 @@
 		await tick();
 	};
 
+	const saveNewMessageHandler = async () => {
+		saveNewResponseMessage(message, editedContent);
+
+		edit = false;
+		editedContent = '';
+
+		await tick();
+	};
+
 	const cancelEditMessage = async () => {
 		edit = false;
 		editedContent = '';
@@ -404,26 +415,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 hover:bg-gray-100 text-gray-800 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="close-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={() => {
+												saveNewMessageHandler();
+											}}
+										>
+											{$i18n.t('Save New Message')}
+										</button>
+									</div>
 
-									<button
-										id="save-edit-message-button"
-										class=" px-4 py-2 bg-gray-900 hover:bg-gray-850 text-gray-100 transition rounded-3xl"
-										on:click={() => {
-											editMessageConfirmHandler();
-										}}
-									>
-										{$i18n.t('Save')}
-									</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="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={() => {
+												editMessageConfirmHandler();
+											}}
+										>
+											{$i18n.t('Save')}
+										</button>
+									</div>
 								</div>
 							</div>
 						{:else}