feat: many model interaction ui

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

@@ -0,0 +1,156 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
+	import { updateChatById } from '$lib/apis/chats';
+	import { onMount, tick } from 'svelte';
+	import ResponseMessage from './ResponseMessage.svelte';
+
+	export let chatId;
+
+	export let history;
+	export let messages = [];
+	export let messageIdx;
+
+	export let parentMessage;
+
+	export let selectedModelfiles;
+
+	export let updateChatMessages: Function;
+	export let confirmEditResponseMessage: Function;
+	export let rateMessage: Function;
+
+	export let copyToClipboard: Function;
+	export let continueGeneration: Function;
+	export let regenerateResponse: Function;
+
+	const dispatch = createEventDispatcher();
+
+	let currentMessageId;
+
+	let groupedMessagesIdx = {};
+	let groupedMessages = {};
+
+	$: groupedMessages = parentMessage?.models.reduce((a, model) => {
+		const modelMessages = parentMessage?.childrenIds
+			.map((id) => history.messages[id])
+			.filter((m) => m.model === model);
+
+		return {
+			...a,
+			[model]: { messages: modelMessages }
+		};
+	}, {});
+
+	onMount(async () => {
+		await tick();
+		currentMessageId = messages[messageIdx].id;
+
+		for (const model of parentMessage?.models) {
+			const idx = groupedMessages[model].messages.findIndex((m) => m.id === currentMessageId);
+
+			if (idx !== -1) {
+				groupedMessagesIdx[model] = idx;
+			} else {
+				groupedMessagesIdx[model] = 0;
+			}
+		}
+	});
+</script>
+
+<div>
+	<div class="flex snap-x snap-mandatory overflow-x-auto scrollbar-none">
+		{#each Object.keys(groupedMessages) as model}
+			{#if groupedMessagesIdx[model] !== undefined && groupedMessages[model].messages.length > 0}
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+
+				<div
+					class=" snap-center min-w-96 w-full max-w-full m-1 outline outline-1 {history.messages[
+						currentMessageId
+					].model === model
+						? 'outline-gray-200 dark:outline-gray-700 outline-2'
+						: 'outline-gray-100 dark:outline-gray-850 '} transition p-6 rounded-3xl"
+					on:click={() => {
+						currentMessageId = groupedMessages[model].messages[groupedMessagesIdx[model]].id;
+
+						let messageId = groupedMessages[model].messages[groupedMessagesIdx[model]].id;
+
+						console.log(messageId);
+						let messageChildrenIds = history.messages[messageId].childrenIds;
+
+						while (messageChildrenIds.length !== 0) {
+							messageId = messageChildrenIds.at(-1);
+							messageChildrenIds = history.messages[messageId].childrenIds;
+						}
+
+						history.currentId = messageId;
+						dispatch('change');
+					}}
+				>
+					<ResponseMessage
+						message={groupedMessages[model].messages[groupedMessagesIdx[model]]}
+						modelfiles={selectedModelfiles}
+						siblings={groupedMessages[model].messages.map((m) => m.id)}
+						isLastMessage={true}
+						{updateChatMessages}
+						{confirmEditResponseMessage}
+						showPreviousMessage={() => {
+							groupedMessagesIdx[model] = Math.max(0, groupedMessagesIdx[model] - 1);
+							let messageId = groupedMessages[model].messages[groupedMessagesIdx[model]].id;
+
+							console.log(messageId);
+							let messageChildrenIds = history.messages[messageId].childrenIds;
+
+							while (messageChildrenIds.length !== 0) {
+								messageId = messageChildrenIds.at(-1);
+								messageChildrenIds = history.messages[messageId].childrenIds;
+							}
+
+							history.currentId = messageId;
+
+							dispatch('change');
+						}}
+						showNextMessage={() => {
+							groupedMessagesIdx[model] = Math.min(
+								groupedMessages[model].messages.length - 1,
+								groupedMessagesIdx[model] + 1
+							);
+
+							let messageId = groupedMessages[model].messages[groupedMessagesIdx[model]].id;
+							console.log(messageId);
+
+							let messageChildrenIds = history.messages[messageId].childrenIds;
+
+							while (messageChildrenIds.length !== 0) {
+								messageId = messageChildrenIds.at(-1);
+								messageChildrenIds = history.messages[messageId].childrenIds;
+							}
+
+							history.currentId = messageId;
+
+							dispatch('change');
+						}}
+						{rateMessage}
+						{copyToClipboard}
+						{continueGeneration}
+						regenerateResponse={async (model) => {
+							regenerateResponse(model);
+							await tick();
+							groupedMessagesIdx[model] = groupedMessages[model].messages.length - 1;
+						}}
+						on:save={async (e) => {
+							console.log('save', e);
+
+							const message = e.detail;
+							history.messages[message.id] = message;
+							await updateChatById(localStorage.token, chatId, {
+								messages: messages,
+								history: history
+							});
+						}}
+					/>
+				</div>
+			{/if}
+		{/each}
+	</div>
+</div>