From e1edf9227dce639a3c7e710223b049874b52df4a Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sun, 9 Jun 2024 16:34:34 -0700
Subject: [PATCH] feat: model knowledge ui

---
 .../workspace/Models/Knowledge.svelte         | 38 +++++++++++++++++++
 .../workspace/models/create/+page.svelte      | 27 ++++++++++---
 .../(app)/workspace/models/edit/+page.svelte  | 27 +++++++++++--
 3 files changed, 82 insertions(+), 10 deletions(-)
 create mode 100644 src/lib/components/workspace/Models/Knowledge.svelte

diff --git a/src/lib/components/workspace/Models/Knowledge.svelte b/src/lib/components/workspace/Models/Knowledge.svelte
new file mode 100644
index 000000000..94653b9b9
--- /dev/null
+++ b/src/lib/components/workspace/Models/Knowledge.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+
+	export let knowledge = [];
+
+	const i18n = getContext('i18n');
+</script>
+
+<div>
+	<div class="flex w-full justify-between mb-1">
+		<div class=" self-center text-sm font-semibold">{$i18n.t('Knowledge')}</div>
+	</div>
+
+	<div class=" text-xs dark:text-gray-500">
+		To add documents here, upload them to the "Documents" workspace first.
+	</div>
+
+	<div class="flex flex-col">
+		{#if knowledge.length > 0}
+			{#each knowledge as doc}
+				<div class=" flex items-center gap-2">
+					<div class=" py-0.5 text-sm w-full">{doc.name}</div>
+				</div>
+			{/each}
+		{/if}
+
+		<div class="flex flex-wrap text-sm font-medium gap-1.5 mt-2">
+			<button
+				class=" px-3.5 py-1.5 font-medium hover:bg-black/5 dark:hover:bg-white/5 outline outline-1 outline-gray-300 dark:outline-gray-800 rounded-3xl"
+				type="button"
+				on:click={() => {
+					console.log('hi');
+				}}>Select Documents</button
+			>
+		</div>
+		<!-- {knowledge} -->
+	</div>
+</div>
diff --git a/src/routes/(app)/workspace/models/create/+page.svelte b/src/routes/(app)/workspace/models/create/+page.svelte
index 4778c97da..2552a5763 100644
--- a/src/routes/(app)/workspace/models/create/+page.svelte
+++ b/src/routes/(app)/workspace/models/create/+page.svelte
@@ -11,6 +11,7 @@
 	import AdvancedParams from '$lib/components/chat/Settings/Advanced/AdvancedParams.svelte';
 	import Checkbox from '$lib/components/common/Checkbox.svelte';
 	import Tags from '$lib/components/common/Tags.svelte';
+	import Knowledge from '$lib/components/workspace/Models/Knowledge.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -30,11 +31,6 @@
 	let id = '';
 	let name = '';
 
-	let params = {};
-	let capabilities = {
-		vision: true
-	};
-
 	let info = {
 		id: '',
 		base_model_id: null,
@@ -53,6 +49,13 @@
 		}
 	};
 
+	let params = {};
+	let capabilities = {
+		vision: true
+	};
+
+	let knowledge = [];
+
 	$: if (name) {
 		id = name.replace(/\s+/g, '-').toLowerCase();
 	}
@@ -77,8 +80,16 @@
 		info.id = id;
 		info.name = name;
 		info.meta.capabilities = capabilities;
-		info.params.stop = params.stop ? params.stop.split(',').filter((s) => s.trim()) : null;
 
+		if (knowledge.length > 0) {
+			info.meta.knowledge = knowledge;
+		} else {
+			if (info.meta.knowledge) {
+				delete info.meta.knowledge;
+			}
+		}
+
+		info.params.stop = params.stop ? params.stop.split(',').filter((s) => s.trim()) : null;
 		Object.keys(info.params).forEach((key) => {
 			if (info.params[key] === '' || info.params[key] === null) {
 				delete info.params[key];
@@ -536,6 +547,10 @@
 			{/if}
 		</div>
 
+		<div class="my-2">
+			<Knowledge bind:knowledge />
+		</div>
+
 		<div class="my-1">
 			<div class="flex w-full justify-between mb-1">
 				<div class=" self-center text-sm font-semibold">{$i18n.t('Capabilities')}</div>
diff --git a/src/routes/(app)/workspace/models/edit/+page.svelte b/src/routes/(app)/workspace/models/edit/+page.svelte
index 8bad44428..4afc5e1f3 100644
--- a/src/routes/(app)/workspace/models/edit/+page.svelte
+++ b/src/routes/(app)/workspace/models/edit/+page.svelte
@@ -14,6 +14,7 @@
 	import { getModels } from '$lib/apis';
 	import Checkbox from '$lib/components/common/Checkbox.svelte';
 	import Tags from '$lib/components/common/Tags.svelte';
+	import Knowledge from '$lib/components/workspace/Models/Knowledge.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -54,19 +55,28 @@
 	};
 
 	let params = {};
-
 	let capabilities = {
 		vision: true
 	};
 
+	let knowledge = [];
+
 	const updateHandler = async () => {
 		loading = true;
 
 		info.id = id;
 		info.name = name;
 		info.meta.capabilities = capabilities;
-		info.params.stop = params.stop ? params.stop.split(',').filter((s) => s.trim()) : null;
 
+		if (knowledge.length > 0) {
+			info.meta.knowledge = knowledge;
+		} else {
+			if (info.meta.knowledge) {
+				delete info.meta.knowledge;
+			}
+		}
+
+		info.params.stop = params.stop ? params.stop.split(',').filter((s) => s.trim()) : null;
 		Object.keys(info.params).forEach((key) => {
 			if (info.params[key] === '' || info.params[key] === null) {
 				delete info.params[key];
@@ -119,6 +129,10 @@
 					  )
 					: null;
 
+				if (model?.info?.meta?.knowledge) {
+					knowledge = [...model?.info?.meta?.knowledge];
+				}
+
 				if (model?.owned_by === 'openai') {
 					capabilities.usage = false;
 				}
@@ -126,6 +140,7 @@
 				if (model?.info?.meta?.capabilities) {
 					capabilities = { ...capabilities, ...model?.info?.meta?.capabilities };
 				}
+
 				console.log(model);
 			} else {
 				goto('/workspace/models');
@@ -405,7 +420,7 @@
 
 			<hr class=" dark:border-gray-850 my-1" />
 
-			<div class="my-1">
+			<div class="my-2">
 				<div class="flex w-full justify-between items-center">
 					<div class="flex w-full justify-between items-center">
 						<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt suggestions')}</div>
@@ -495,7 +510,11 @@
 				{/if}
 			</div>
 
-			<div class="my-1">
+			<div class="my-2">
+				<Knowledge bind:knowledge />
+			</div>
+
+			<div class="my-2">
 				<div class="flex w-full justify-between mb-1">
 					<div class=" self-center text-sm font-semibold">{$i18n.t('Capabilities')}</div>
 				</div>