Merge remote-tracking branch 'upstream/dev' into feat/model-config

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

@@ -5,7 +5,7 @@
 	import 'highlight.js/styles/github-dark.min.css';
 	import { loadPyodide } from 'pyodide';
 	import { tick } from 'svelte';
-	import PyodideWorker from '../../../workers/pyodide.worker?worker';
+	import PyodideWorker from '$lib/workers/pyodide.worker?worker';
 
 	export let id = '';
 
@@ -286,7 +286,7 @@ __builtins__.input = input`);
 			<div class="p-1">{@html lang}</div>
 
 			<div class="flex items-center">
-				{#if lang === 'python' || checkPythonCode(code)}
+				{#if ['', 'python'].includes(lang) && (lang === 'python' || checkPythonCode(code))}
 					{#if executing}
 						<div class="copy-code-button bg-none border-none p-1 cursor-not-allowed">Running</div>
 					{:else}

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

@@ -0,0 +1,159 @@
+<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-hidden"
+		id="responses-container-{parentMessage.id}"
+	>
+		{#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-80 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 (message) => {
+							regenerateResponse(message);
+							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>

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

@@ -69,7 +69,7 @@
 
 	let selectedCitation = null;
 
-	$: tokens = marked.lexer(sanitizeResponseContent(message.content));
+	$: tokens = marked.lexer(sanitizeResponseContent(message?.content));
 
 	const renderer = new marked.Renderer();
 
@@ -499,7 +499,7 @@
 									class=" flex justify-start overflow-x-auto buttons text-gray-600 dark:text-gray-500"
 								>
 									{#if siblings.length > 1}
-										<div class="flex self-center" dir="ltr">
+										<div class="flex self-center min-w-fit" dir="ltr">
 											<button
 												class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition"
 												on:click={() => {
@@ -523,7 +523,7 @@
 											</button>
 
 											<div
-												class="text-sm tracking-widest font-semibold self-center dark:text-gray-100"
+												class="text-sm tracking-widest font-semibold self-center dark:text-gray-100 min-w-fit"
 											>
 												{siblings.indexOf(message.id) + 1}/{siblings.length}
 											</div>
@@ -894,7 +894,9 @@
 													class="{isLastMessage
 														? 'visible'
 														: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button"
-													on:click={regenerateResponse}
+													on:click={() => {
+														regenerateResponse(message);
+													}}
 												>
 													<svg
 														xmlns="http://www.w3.org/2000/svg"

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

@@ -65,7 +65,7 @@
 				: user?.profile_image_url ?? '/user.png'}
 		/>
 	{/if}
-	<div class="w-full overflow-hidden">
+	<div class="w-full overflow-hidden pl-1">
 		{#if !($settings?.chatBubble ?? true)}
 			<div>
 				<Name>