From 83097cd8be106565119fe98d08fb04cb6fab3131 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Fri, 24 May 2024 22:40:36 -0700
Subject: [PATCH] refac: remove modelfiles completely

---
 src/lib/components/chat/MessageInput.svelte   |  2 +-
 .../chat/Messages/CompareMessages.svelte      |  3 ---
 .../chat/Messages/UserMessage.svelte          | 13 ++++--------
 src/lib/components/chat/ShareChatModal.svelte |  6 ++----
 src/lib/components/layout/Navbar.svelte       |  1 -
 src/lib/components/workspace/Models.svelte    | 19 +++++++++---------
 src/routes/(app)/+layout.svelte               |  1 -
 .../workspace/models/create/+page.svelte      |  2 +-
 src/routes/modelfiles/create/+page.svelte     |  6 +++---
 src/routes/s/[id]/+page.svelte                | 20 +++----------------
 10 files changed, 24 insertions(+), 49 deletions(-)

diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index c9bc3e3fe..5ed6ee129 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
 	import { onMount, tick, getContext } from 'svelte';
-	import { type Model, mobile, modelfiles, settings, showSidebar, models } from '$lib/stores';
+	import { type Model, mobile, settings, showSidebar, models } from '$lib/stores';
 	import { blobToFile, calculateSHA256, findWordIndices } from '$lib/utils';
 
 	import {
diff --git a/src/lib/components/chat/Messages/CompareMessages.svelte b/src/lib/components/chat/Messages/CompareMessages.svelte
index 60efdb2ab..f904a57ab 100644
--- a/src/lib/components/chat/Messages/CompareMessages.svelte
+++ b/src/lib/components/chat/Messages/CompareMessages.svelte
@@ -13,8 +13,6 @@
 
 	export let parentMessage;
 
-	export let selectedModelfiles;
-
 	export let updateChatMessages: Function;
 	export let confirmEditResponseMessage: Function;
 	export let rateMessage: Function;
@@ -130,7 +128,6 @@
 				>
 					<ResponseMessage
 						message={groupedMessages[model].messages[groupedMessagesIdx[model]]}
-						modelfiles={selectedModelfiles}
 						siblings={groupedMessages[model].messages.map((m) => m.id)}
 						isLastMessage={true}
 						{updateChatMessages}
diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte
index b68277805..c895adb61 100644
--- a/src/lib/components/chat/Messages/UserMessage.svelte
+++ b/src/lib/components/chat/Messages/UserMessage.svelte
@@ -4,7 +4,7 @@
 	import { tick, createEventDispatcher, getContext } from 'svelte';
 	import Name from './Name.svelte';
 	import ProfileImage from './ProfileImage.svelte';
-	import { modelfiles, settings } from '$lib/stores';
+	import { models, settings } from '$lib/stores';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 
 	import { user as _user } from '$lib/stores';
@@ -60,8 +60,7 @@
 	{#if !($settings?.chatBubble ?? true)}
 		<ProfileImage
 			src={message.user
-				? $modelfiles.find((modelfile) => modelfile.tagName === message.user)?.imageUrl ??
-				  '/user.png'
+				? $models.find((m) => m.id === message.user)?.info?.meta?.profile_image_url ?? '/user.png'
 				: user?.profile_image_url ?? '/user.png'}
 		/>
 	{/if}
@@ -70,12 +69,8 @@
 			<div>
 				<Name>
 					{#if message.user}
-						{#if $modelfiles.map((modelfile) => modelfile.tagName).includes(message.user)}
-							{$modelfiles.find((modelfile) => modelfile.tagName === message.user)?.title}
-						{:else}
-							{$i18n.t('You')}
-							<span class=" text-gray-500 text-sm font-medium">{message?.user ?? ''}</span>
-						{/if}
+						{$i18n.t('You')}
+						<span class=" text-gray-500 text-sm font-medium">{message?.user ?? ''}</span>
 					{:else if $settings.showUsername || $_user.name !== user.name}
 						{user.name}
 					{:else}
diff --git a/src/lib/components/chat/ShareChatModal.svelte b/src/lib/components/chat/ShareChatModal.svelte
index cc8f91623..2c0042fb5 100644
--- a/src/lib/components/chat/ShareChatModal.svelte
+++ b/src/lib/components/chat/ShareChatModal.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { getContext, onMount } from 'svelte';
+	import { models } from '$lib/stores';
 
 	import { toast } from 'svelte-sonner';
 	import { deleteSharedChatById, getChatById, shareChatById } from '$lib/apis/chats';
-	import { modelfiles } from '$lib/stores';
 	import { copyToClipboard } from '$lib/utils';
 
 	import Modal from '../common/Modal.svelte';
@@ -43,9 +43,7 @@
 					tab.postMessage(
 						JSON.stringify({
 							chat: _chat,
-							modelfiles: $modelfiles.filter((modelfile) =>
-								_chat.models.includes(modelfile.tagName)
-							)
+							models: $models.filter((m) => _chat.models.includes(m.id))
 						}),
 						'*'
 					);
diff --git a/src/lib/components/layout/Navbar.svelte b/src/lib/components/layout/Navbar.svelte
index 131c704e1..8abf44ccf 100644
--- a/src/lib/components/layout/Navbar.svelte
+++ b/src/lib/components/layout/Navbar.svelte
@@ -6,7 +6,6 @@
 		WEBUI_NAME,
 		chatId,
 		mobile,
-		modelfiles,
 		settings,
 		showArchivedChats,
 		showSettings,
diff --git a/src/lib/components/workspace/Models.svelte b/src/lib/components/workspace/Models.svelte
index 2d028897d..bcf7eb31e 100644
--- a/src/lib/components/workspace/Models.svelte
+++ b/src/lib/components/workspace/Models.svelte
@@ -16,8 +16,9 @@
 	const i18n = getContext('i18n');
 
 	let localModelfiles = [];
+
 	let importFiles;
-	let modelfilesImportInputElement: HTMLInputElement;
+	let modelsImportInputElement: HTMLInputElement;
 
 	const deleteModelHandler = async (model) => {
 		console.log(model.info);
@@ -243,8 +244,8 @@
 <div class=" flex justify-end w-full mb-3">
 	<div class="flex space-x-1">
 		<input
-			id="modelfiles-import-input"
-			bind:this={modelfilesImportInputElement}
+			id="models-import-input"
+			bind:this={modelsImportInputElement}
 			bind:files={importFiles}
 			type="file"
 			accept=".json"
@@ -254,16 +255,16 @@
 
 				let reader = new FileReader();
 				reader.onload = async (event) => {
-					let savedModelfiles = JSON.parse(event.target.result);
-					console.log(savedModelfiles);
+					let savedModels = JSON.parse(event.target.result);
+					console.log(savedModels);
 
-					for (const modelfile of savedModelfiles) {
-						await addNewModel(localStorage.token, modelfile).catch((error) => {
+					for (const model of savedModels) {
+						await addNewModel(localStorage.token, model).catch((error) => {
 							return null;
 						});
 					}
 
-					await modelfiles.set(await getModelInfos(localStorage.token));
+					await models.set(await getModels(localStorage.token));
 				};
 
 				reader.readAsText(importFiles[0]);
@@ -273,7 +274,7 @@
 		<button
 			class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
 			on:click={() => {
-				modelfilesImportInputElement.click();
+				modelsImportInputElement.click();
 			}}
 		>
 			<div class=" self-center mr-2 font-medium">{$i18n.t('Import Models')}</div>
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 0aa9ce683..a0e128ccb 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -19,7 +19,6 @@
 		showSettings,
 		settings,
 		models,
-		modelfiles,
 		prompts,
 		documents,
 		tags,
diff --git a/src/routes/(app)/workspace/models/create/+page.svelte b/src/routes/(app)/workspace/models/create/+page.svelte
index 1bbaa694b..3dffa021b 100644
--- a/src/routes/(app)/workspace/models/create/+page.svelte
+++ b/src/routes/(app)/workspace/models/create/+page.svelte
@@ -2,7 +2,7 @@
 	import { v4 as uuidv4 } from 'uuid';
 	import { toast } from 'svelte-sonner';
 	import { goto } from '$app/navigation';
-	import { settings, user, config, modelfiles, models } from '$lib/stores';
+	import { settings, user, config, models } from '$lib/stores';
 
 	import { onMount, tick, getContext } from 'svelte';
 	import { addNewModel, getModelById, getModelInfos } from '$lib/apis/models';
diff --git a/src/routes/modelfiles/create/+page.svelte b/src/routes/modelfiles/create/+page.svelte
index a86d08c83..9d0d60d0b 100644
--- a/src/routes/modelfiles/create/+page.svelte
+++ b/src/routes/modelfiles/create/+page.svelte
@@ -14,10 +14,10 @@
 				].includes(event.origin)
 			)
 				return;
-			const modelfile = JSON.parse(event.data);
-			sessionStorage.modelfile = JSON.stringify(modelfile);
+			const model = JSON.parse(event.data);
+			sessionStorage.model = JSON.stringify(model);
 
-			goto('/workspace/modelfiles/create');
+			goto('/workspace/models/create');
 		});
 
 		if (window.opener ?? false) {
diff --git a/src/routes/s/[id]/+page.svelte b/src/routes/s/[id]/+page.svelte
index d6fcd839b..441440175 100644
--- a/src/routes/s/[id]/+page.svelte
+++ b/src/routes/s/[id]/+page.svelte
@@ -5,7 +5,7 @@
 
 	import dayjs from 'dayjs';
 
-	import { modelfiles, settings, chatId, WEBUI_NAME } from '$lib/stores';
+	import { settings, chatId, WEBUI_NAME, models } from '$lib/stores';
 	import { convertMessagesToHistory } from '$lib/utils';
 
 	import { getChatByShareId } from '$lib/apis/chats';
@@ -14,6 +14,7 @@
 	import Navbar from '$lib/components/layout/Navbar.svelte';
 	import { getUserById } from '$lib/apis/users';
 	import { error } from '@sveltejs/kit';
+	import { getModels } from '$lib/apis';
 
 	const i18n = getContext('i18n');
 
@@ -27,17 +28,6 @@
 	let showModelSelector = false;
 	let selectedModels = [''];
 
-	let selectedModelfiles = {};
-	$: selectedModelfiles = selectedModels.reduce((a, tagName, i, arr) => {
-		const modelfile =
-			$modelfiles.filter((modelfile) => modelfile.tagName === tagName)?.at(0) ?? undefined;
-
-		return {
-			...a,
-			...(modelfile && { [tagName]: modelfile })
-		};
-	}, {});
-
 	let chat = null;
 	let user = null;
 
@@ -69,10 +59,6 @@
 			if (await loadSharedChat()) {
 				await tick();
 				loaded = true;
-
-				window.setTimeout(() => scrollToBottom(), 0);
-				const chatInput = document.getElementById('chat-textarea');
-				chatInput?.focus();
 			} else {
 				await goto('/');
 			}
@@ -84,6 +70,7 @@
 	//////////////////////////
 
 	const loadSharedChat = async () => {
+		await models.set(await getModels(localStorage.token));
 		await chatId.set($page.params.id);
 		chat = await getChatByShareId(localStorage.token, $chatId).catch(async (error) => {
 			await goto('/');
@@ -168,7 +155,6 @@
 							chatId={$chatId}
 							readOnly={true}
 							{selectedModels}
-							{selectedModelfiles}
 							{processing}
 							bind:history
 							bind:messages