forked from open-webui/open-webui
		
	Merge pull request #1004 from dannyl1u/refac/delete-message
refac: delete message logic
This commit is contained in:
		
						commit
						20284dc66d
					
				
					 3 changed files with 122 additions and 77 deletions
				
			
		|  | @ -223,33 +223,80 @@ | ||||||
| 		}, 100); | 		}, 100); | ||||||
| 	}; | 	}; | ||||||
| 
 | 
 | ||||||
| 	// TODO: change delete behaviour |  | ||||||
| 	// const deleteMessageAndDescendants = async (messageId: string) => { |  | ||||||
| 	// 	if (history.messages[messageId]) { |  | ||||||
| 	// 		history.messages[messageId].deleted = true; |  | ||||||
| 
 |  | ||||||
| 	// 		for (const childId of history.messages[messageId].childrenIds) { |  | ||||||
| 	// 			await deleteMessageAndDescendants(childId); |  | ||||||
| 	// 		} |  | ||||||
| 	// 	} |  | ||||||
| 	// }; |  | ||||||
| 
 |  | ||||||
| 	// const triggerDeleteMessageRecursive = async (messageId: string) => { |  | ||||||
| 	// 	await deleteMessageAndDescendants(messageId); |  | ||||||
| 	// 	await updateChatById(localStorage.token, chatId, { history }); |  | ||||||
| 	// 	await chats.set(await getChatList(localStorage.token)); |  | ||||||
| 	// }; |  | ||||||
| 
 |  | ||||||
| 	const messageDeleteHandler = async (messageId) => { | 	const messageDeleteHandler = async (messageId) => { | ||||||
| 		if (history.messages[messageId]) { | 		const messageToDelete = history.messages[messageId]; | ||||||
| 			history.messages[messageId].deleted = true; | 		const messageParentId = messageToDelete.parentId; | ||||||
| 
 | 		const messageChildrenIds = messageToDelete.childrenIds ?? []; | ||||||
| 			for (const childId of history.messages[messageId].childrenIds) { | 		const hasSibling = messageChildrenIds.some( | ||||||
| 				history.messages[childId].deleted = true; | 			(childId) => history.messages[childId]?.childrenIds?.length > 0 | ||||||
|  | 		); | ||||||
|  | 		messageChildrenIds.forEach((childId) => { | ||||||
|  | 			const child = history.messages[childId]; | ||||||
|  | 			if (child && child.childrenIds) { | ||||||
|  | 				if (child.childrenIds.length === 0 && !hasSibling) { | ||||||
|  | 					// if last prompt/response pair | ||||||
|  | 					history.messages[messageParentId].childrenIds = []; | ||||||
|  | 					history.currentId = messageParentId; | ||||||
|  | 				} else { | ||||||
|  | 					child.childrenIds.forEach((grandChildId) => { | ||||||
|  | 						if (history.messages[grandChildId]) { | ||||||
|  | 							history.messages[grandChildId].parentId = messageParentId; | ||||||
|  | 							history.messages[messageParentId].childrenIds.push(grandChildId); | ||||||
|  | 						} | ||||||
|  | 					}); | ||||||
|  | 				} | ||||||
| 			} | 			} | ||||||
| 		} | 			// remove response | ||||||
| 		await updateChatById(localStorage.token, chatId, { history }); | 			history.messages[messageParentId].childrenIds = history.messages[ | ||||||
|  | 				messageParentId | ||||||
|  | 			].childrenIds.filter((id) => id !== childId); | ||||||
|  | 		}); | ||||||
|  | 		// remove prompt | ||||||
|  | 		history.messages[messageParentId].childrenIds = history.messages[ | ||||||
|  | 			messageParentId | ||||||
|  | 		].childrenIds.filter((id) => id !== messageId); | ||||||
|  | 		await updateChatById(localStorage.token, chatId, { | ||||||
|  | 			messages: messages, | ||||||
|  | 			history: history | ||||||
|  | 		}); | ||||||
| 	}; | 	}; | ||||||
|  | 
 | ||||||
|  | 	// const messageDeleteHandler = async (messageId) => { | ||||||
|  | 	// 	const message = history.messages[messageId]; | ||||||
|  | 	// 	const parentId = message.parentId; | ||||||
|  | 	// 	const childrenIds = message.childrenIds ?? []; | ||||||
|  | 	// 	const grandchildrenIds = []; | ||||||
|  | 
 | ||||||
|  | 	// 	// Iterate through childrenIds to find grandchildrenIds | ||||||
|  | 	// 	for (const childId of childrenIds) { | ||||||
|  | 	// 		const childMessage = history.messages[childId]; | ||||||
|  | 	// 		const grandChildrenIds = childMessage.childrenIds ?? []; | ||||||
|  | 
 | ||||||
|  | 	// 		for (const grandchildId of grandchildrenIds) { | ||||||
|  | 	// 			const childMessage = history.messages[grandchildId]; | ||||||
|  | 	// 			childMessage.parentId = parentId; | ||||||
|  | 	// 		} | ||||||
|  | 	// 		grandchildrenIds.push(...grandChildrenIds); | ||||||
|  | 	// 	} | ||||||
|  | 
 | ||||||
|  | 	// 	history.messages[parentId].childrenIds.push(...grandchildrenIds); | ||||||
|  | 	// 	history.messages[parentId].childrenIds = history.messages[parentId].childrenIds.filter( | ||||||
|  | 	// 		(id) => id !== messageId | ||||||
|  | 	// 	); | ||||||
|  | 
 | ||||||
|  | 	// 	// Select latest message | ||||||
|  | 	// 	let currentMessageId = grandchildrenIds.at(-1); | ||||||
|  | 	// 	if (currentMessageId) { | ||||||
|  | 	// 		let messageChildrenIds = history.messages[currentMessageId].childrenIds; | ||||||
|  | 	// 		while (messageChildrenIds.length !== 0) { | ||||||
|  | 	// 			currentMessageId = messageChildrenIds.at(-1); | ||||||
|  | 	// 			messageChildrenIds = history.messages[currentMessageId].childrenIds; | ||||||
|  | 	// 		} | ||||||
|  | 	// 		history.currentId = currentMessageId; | ||||||
|  | 	// 	} | ||||||
|  | 
 | ||||||
|  | 	// 	await updateChatById(localStorage.token, chatId, { messages, history }); | ||||||
|  | 	// }; | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
| {#if messages.length == 0} | {#if messages.length == 0} | ||||||
|  | @ -258,57 +305,55 @@ | ||||||
| 	<div class=" pb-10"> | 	<div class=" pb-10"> | ||||||
| 		{#key chatId} | 		{#key chatId} | ||||||
| 			{#each messages as message, messageIdx} | 			{#each messages as message, messageIdx} | ||||||
| 				{#if !message.deleted} | 				<div class=" w-full"> | ||||||
| 					<div class=" w-full"> | 					<div | ||||||
| 						<div | 						class="flex flex-col justify-between px-5 mb-3 {$settings?.fullScreenMode ?? null | ||||||
| 							class="flex flex-col justify-between px-5 mb-3 {$settings?.fullScreenMode ?? null | 							? 'max-w-full' | ||||||
| 								? 'max-w-full' | 							: 'max-w-3xl'} mx-auto rounded-lg group" | ||||||
| 								: 'max-w-3xl'} mx-auto rounded-lg group" | 					> | ||||||
| 						> | 						{#if message.role === 'user'} | ||||||
| 							{#if message.role === 'user'} | 							<UserMessage | ||||||
| 								<UserMessage | 								on:delete={() => messageDeleteHandler(message.id)} | ||||||
| 									on:delete={() => messageDeleteHandler(message.id)} | 								user={$user} | ||||||
| 									user={$user} | 								{message} | ||||||
| 									{message} | 								isFirstMessage={messageIdx === 0} | ||||||
| 									isFirstMessage={messageIdx === 0} | 								siblings={message.parentId !== null | ||||||
| 									siblings={message.parentId !== null | 									? history.messages[message.parentId]?.childrenIds ?? [] | ||||||
| 										? history.messages[message.parentId]?.childrenIds ?? [] | 									: Object.values(history.messages) | ||||||
| 										: Object.values(history.messages) | 											.filter((message) => message.parentId === null) | ||||||
| 												.filter((message) => message.parentId === null) | 											.map((message) => message.id) ?? []} | ||||||
| 												.map((message) => message.id) ?? []} | 								{confirmEditMessage} | ||||||
| 									{confirmEditMessage} | 								{showPreviousMessage} | ||||||
| 									{showPreviousMessage} | 								{showNextMessage} | ||||||
| 									{showNextMessage} | 								{copyToClipboard} | ||||||
| 									{copyToClipboard} | 							/> | ||||||
| 								/> | 						{:else} | ||||||
| 							{:else} | 							<ResponseMessage | ||||||
| 								<ResponseMessage | 								{message} | ||||||
| 									{message} | 								modelfiles={selectedModelfiles} | ||||||
| 									modelfiles={selectedModelfiles} | 								siblings={history.messages[message.parentId]?.childrenIds ?? []} | ||||||
| 									siblings={history.messages[message.parentId]?.childrenIds ?? []} | 								isLastMessage={messageIdx + 1 === messages.length} | ||||||
| 									isLastMessage={messageIdx + 1 === messages.length} | 								{confirmEditResponseMessage} | ||||||
| 									{confirmEditResponseMessage} | 								{showPreviousMessage} | ||||||
| 									{showPreviousMessage} | 								{showNextMessage} | ||||||
| 									{showNextMessage} | 								{rateMessage} | ||||||
| 									{rateMessage} | 								{copyToClipboard} | ||||||
| 									{copyToClipboard} | 								{continueGeneration} | ||||||
| 									{continueGeneration} | 								{regenerateResponse} | ||||||
| 									{regenerateResponse} | 								on:save={async (e) => { | ||||||
| 									on:save={async (e) => { | 									console.log('save', e); | ||||||
| 										console.log('save', e); |  | ||||||
| 
 | 
 | ||||||
| 										const message = e.detail; | 									const message = e.detail; | ||||||
| 										history.messages[message.id] = message; | 									history.messages[message.id] = message; | ||||||
| 										await updateChatById(localStorage.token, chatId, { | 									await updateChatById(localStorage.token, chatId, { | ||||||
| 											messages: messages, | 										messages: messages, | ||||||
| 											history: history | 										history: history | ||||||
| 										}); | 									}); | ||||||
| 									}} | 								}} | ||||||
| 								/> | 							/> | ||||||
| 							{/if} | 						{/if} | ||||||
| 						</div> |  | ||||||
| 					</div> | 					</div> | ||||||
| 				{/if} | 				</div> | ||||||
| 			{/each} | 			{/each} | ||||||
| 
 | 
 | ||||||
| 			{#if bottomPadding} | 			{#if bottomPadding} | ||||||
|  |  | ||||||
|  | @ -339,7 +339,7 @@ | ||||||
| 						content: $settings.system | 						content: $settings.system | ||||||
| 				  } | 				  } | ||||||
| 				: undefined, | 				: undefined, | ||||||
| 			...messages.filter((message) => !message.deleted) | 			...messages | ||||||
| 		] | 		] | ||||||
| 			.filter((message) => message) | 			.filter((message) => message) | ||||||
| 			.map((message, idx, arr) => ({ | 			.map((message, idx, arr) => ({ | ||||||
|  | @ -547,7 +547,7 @@ | ||||||
| 								content: $settings.system | 								content: $settings.system | ||||||
| 						  } | 						  } | ||||||
| 						: undefined, | 						: undefined, | ||||||
| 					...messages.filter((message) => !message.deleted) | 					...messages | ||||||
| 				] | 				] | ||||||
| 					.filter((message) => message) | 					.filter((message) => message) | ||||||
| 					.map((message, idx, arr) => ({ | 					.map((message, idx, arr) => ({ | ||||||
|  |  | ||||||
|  | @ -352,7 +352,7 @@ | ||||||
| 						content: $settings.system | 						content: $settings.system | ||||||
| 				  } | 				  } | ||||||
| 				: undefined, | 				: undefined, | ||||||
| 			...messages.filter((message) => !message.deleted) | 			...messages | ||||||
| 		] | 		] | ||||||
| 			.filter((message) => message) | 			.filter((message) => message) | ||||||
| 			.map((message, idx, arr) => ({ | 			.map((message, idx, arr) => ({ | ||||||
|  | @ -560,7 +560,7 @@ | ||||||
| 								content: $settings.system | 								content: $settings.system | ||||||
| 						  } | 						  } | ||||||
| 						: undefined, | 						: undefined, | ||||||
| 					...messages.filter((message) => !message.deleted) | 					...messages | ||||||
| 				] | 				] | ||||||
| 					.filter((message) => message) | 					.filter((message) => message) | ||||||
| 					.map((message, idx, arr) => ({ | 					.map((message, idx, arr) => ({ | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue