refac: deprecate messages for history

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

@@ -0,0 +1,156 @@
+<script lang="ts">
+	import { toast } from 'svelte-sonner';
+
+	import { tick, getContext, onMount } from 'svelte';
+	const i18n = getContext('i18n');
+
+	import { settings } from '$lib/stores';
+	import { copyToClipboard } from '$lib/utils';
+
+	import MultiResponseMessages from './MultiResponseMessages.svelte';
+	import ResponseMessage from './ResponseMessage.svelte';
+	import UserMessage from './UserMessage.svelte';
+
+	export let chatId;
+
+	export let history;
+	export let messageId;
+
+	export let user;
+
+	export let scrollToBottom;
+	export let chatActionHandler;
+
+	export let confirmEditMessage;
+	export let confirmEditResponseMessage;
+
+	export let showPreviousMessage;
+	export let showNextMessage;
+
+	export let rateMessage;
+	export let deleteMessage;
+
+	export let saveNewResponseMessage;
+
+	export let regenerateResponse;
+	export let continueGeneration;
+
+	// MultiResponseMessages
+	export let mergeResponses;
+
+	export let readOnly = false;
+
+	const copyToClipboardWithToast = async (text) => {
+		const res = await copyToClipboard(text);
+		if (res) {
+			toast.success($i18n.t('Copying to clipboard was successful!'));
+		}
+	};
+</script>
+
+<div class="w-full">
+	<div
+		class="flex flex-col justify-between px-5 mb-3 {($settings?.widescreenMode ?? null)
+			? 'max-w-full'
+			: 'max-w-5xl'} mx-auto rounded-lg group"
+	>
+		{#if history.messages[messageId].role === 'user'}
+			{@const message = history.messages[messageId]}
+			<UserMessage
+				{user}
+				{history}
+				siblings={message.parentId !== null
+					? (history.messages[message.parentId]?.childrenIds ?? [])
+					: (Object.values(history.messages)
+							.filter((message) => message.parentId === null)
+							.map((message) => message.id) ?? [])}
+				{confirmEditMessage}
+				{showPreviousMessage}
+				{showNextMessage}
+				copyToClipboard={copyToClipboardWithToast}
+				isFirstMessage={messageIdx === 0}
+				on:delete={() => deleteMessage(message.id)}
+				{readOnly}
+			/>
+		{:else if (history.messages[message.parentId]?.models?.length ?? 1) === 1}
+			<ResponseMessage
+				{message}
+				siblings={history.messages[message.parentId]?.childrenIds ?? []}
+				isLastMessage={messageIdx + 1 === messages.length}
+				{readOnly}
+				{updateChatMessages}
+				{confirmEditResponseMessage}
+				{saveNewResponseMessage}
+				{showPreviousMessage}
+				{showNextMessage}
+				{rateMessage}
+				copyToClipboard={copyToClipboardWithToast}
+				{continueGeneration}
+				{regenerateResponse}
+				on:action={async (e) => {
+					console.log('action', e);
+					if (typeof e.detail === 'string') {
+						await chatActionHandler(chatId, e.detail, message.model, message.id);
+					} else {
+						const { id, event } = e.detail;
+						await chatActionHandler(chatId, id, message.model, message.id, event);
+					}
+				}}
+				on:save={async (e) => {
+					console.log('save', e);
+
+					const message = e.detail;
+					if (message) {
+						history.messages[message.id] = message;
+						await updateChatById(localStorage.token, chatId, {
+							history: history
+						});
+					} else {
+						await updateChatById(localStorage.token, chatId, {
+							history: history
+						});
+					}
+				}}
+			/>
+		{:else}
+			<MultiResponseMessages
+				bind:history
+				{chatId}
+				messageIds={[]}
+				parentMessage={history.messages[message.parentId]}
+				isLastMessage={messageIdx + 1 === messages.length}
+				{readOnly}
+				{updateChatMessages}
+				{saveNewResponseMessage}
+				{confirmEditResponseMessage}
+				{rateMessage}
+				copyToClipboard={copyToClipboardWithToast}
+				{continueGeneration}
+				{mergeResponses}
+				{regenerateResponse}
+				on:action={async (e) => {
+					console.log('action', e);
+					if (typeof e.detail === 'string') {
+						await chatActionHandler(chatId, e.detail, message.model, message.id);
+					} else {
+						const { id, event } = e.detail;
+						await chatActionHandler(chatId, id, message.model, message.id, event);
+					}
+				}}
+				on:change={async () => {
+					await updateChatById(localStorage.token, chatId, {
+						history: history
+					});
+
+					if (autoScroll) {
+						const element = document.getElementById('messages-container');
+						autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
+						setTimeout(() => {
+							scrollToBottom();
+						}, 100);
+					}
+				}}
+			/>
+		{/if}
+	</div>
+</div>

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

@@ -22,7 +22,6 @@
 	export let chatId;
 
 	export let history;
-	export let messages = [];
 	export let messageIdx;
 
 	export let parentMessage;
@@ -46,7 +45,9 @@
 	let groupedMessages = {};
 	let groupedMessagesIdx = {};
 
-	$: if (parentMessage) {
+	$: if (history.messages) {
+		console.log('history.messages', history.messages);
+
 		initHandler();
 	}
 
@@ -87,6 +88,7 @@
 	};
 
 	const initHandler = async () => {
+		console.log('multiresponse:initHandler');
 		await tick();
 		currentMessageId = messages[messageIdx].id;
 
@@ -146,78 +148,76 @@
 		class="flex snap-x snap-mandatory overflow-x-auto scrollbar-hidden"
 		id="responses-container-{chatId}-{parentMessage.id}"
 	>
-		{#key currentMessageId}
-			{#each Object.keys(groupedMessages) as modelIdx}
-				{#if groupedMessagesIdx[modelIdx] !== undefined && groupedMessages[modelIdx].messages.length > 0}
-					<!-- svelte-ignore a11y-no-static-element-interactions -->
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					{@const message = groupedMessages[modelIdx].messages[groupedMessagesIdx[modelIdx]]}
+		{#each Object.keys(groupedMessages) as modelIdx}
+			{#if groupedMessagesIdx[modelIdx] !== undefined && groupedMessages[modelIdx].messages.length > 0}
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				{@const message = groupedMessages[modelIdx].messages[groupedMessagesIdx[modelIdx]]}
 
-					<div
-						class=" snap-center w-full max-w-full m-1 border {history.messages[currentMessageId]
-							?.modelIdx == modelIdx
-							? `border-gray-100 dark:border-gray-800 border-[1.5px] ${
-									$mobile ? 'min-w-full' : 'min-w-[32rem]'
-								}`
-							: `border-gray-50 dark:border-gray-850 border-dashed ${
-									$mobile ? 'min-w-full' : 'min-w-80'
-								}`} transition-all p-5 rounded-2xl"
-						on:click={() => {
-							if (currentMessageId != message.id) {
-								currentMessageId = message.id;
-								let messageId = message.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');
+				<div
+					class=" snap-center w-full max-w-full m-1 border {history.messages[currentMessageId]
+						?.modelIdx == modelIdx
+						? `border-gray-100 dark:border-gray-800 border-[1.5px] ${
+								$mobile ? 'min-w-full' : 'min-w-[32rem]'
+							}`
+						: `border-gray-50 dark:border-gray-850 border-dashed ${
+								$mobile ? 'min-w-full' : 'min-w-80'
+							}`} transition-all p-5 rounded-2xl"
+					on:click={() => {
+						if (currentMessageId != message.id) {
+							currentMessageId = message.id;
+							let messageId = message.id;
+							console.log(messageId);
+							//
+							let messageChildrenIds = history.messages[messageId].childrenIds;
+							while (messageChildrenIds.length !== 0) {
+								messageId = messageChildrenIds.at(-1);
+								messageChildrenIds = history.messages[messageId].childrenIds;
 							}
-						}}
-					>
-						{#key history.currentId}
-							{#if message}
-								<ResponseMessage
-									{message}
-									siblings={groupedMessages[modelIdx].messages.map((m) => m.id)}
-									isLastMessage={true}
-									{updateChatMessages}
-									{saveNewResponseMessage}
-									{confirmEditResponseMessage}
-									showPreviousMessage={() => showPreviousMessage(modelIdx)}
-									showNextMessage={() => showNextMessage(modelIdx)}
-									{readOnly}
-									{rateMessage}
-									{copyToClipboard}
-									{continueGeneration}
-									regenerateResponse={async (message) => {
-										regenerateResponse(message);
-										await tick();
-										groupedMessagesIdx[modelIdx] = groupedMessages[modelIdx].messages.length - 1;
-									}}
-									on:action={async (e) => {
-										dispatch('action', e.detail);
-									}}
-									on:save={async (e) => {
-										console.log('save', e);
+							history.currentId = messageId;
+							dispatch('change');
+						}
+					}}
+				>
+					{#key history.currentId}
+						{#if message}
+							<ResponseMessage
+								{message}
+								siblings={groupedMessages[modelIdx].messages.map((m) => m.id)}
+								isLastMessage={true}
+								{updateChatMessages}
+								{saveNewResponseMessage}
+								{confirmEditResponseMessage}
+								showPreviousMessage={() => showPreviousMessage(modelIdx)}
+								showNextMessage={() => showNextMessage(modelIdx)}
+								{readOnly}
+								{rateMessage}
+								{copyToClipboard}
+								{continueGeneration}
+								regenerateResponse={async (message) => {
+									regenerateResponse(message);
+									await tick();
+									groupedMessagesIdx[modelIdx] = groupedMessages[modelIdx].messages.length - 1;
+								}}
+								on:action={async (e) => {
+									dispatch('action', e.detail);
+								}}
+								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
-										});
-									}}
-								/>
-							{/if}
-						{/key}
-					</div>
-				{/if}
-			{/each}
-		{/key}
+									const message = e.detail;
+									history.messages[message.id] = message;
+									await updateChatById(localStorage.token, chatId, {
+										messages: messages,
+										history: history
+									});
+								}}
+							/>
+						{/if}
+					{/key}
+				</div>
+			{/if}
+		{/each}
 	</div>
 
 	{#if !readOnly && isLastMessage}