feat: folders as projects

Co-Authored-By: Classic298 <27028174+Classic298@users.noreply.github.com>

src/lib/components/layout/Sidebar/Folders/EditFolderModal.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+	import { getContext, createEventDispatcher, onMount } from 'svelte';
+
+	import Spinner from '$lib/components/common/Spinner.svelte';
+	import Modal from '$lib/components/common/Modal.svelte';
+	import XMark from '$lib/components/icons/XMark.svelte';
+
+	import { toast } from 'svelte-sonner';
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import Textarea from '$lib/components/common/Textarea.svelte';
+	import Knowledge from '$lib/components/workspace/Models/Knowledge.svelte';
+	const i18n = getContext('i18n');
+
+	export let show = false;
+	export let onSubmit: Function = (e) => {};
+
+	export let folder = null;
+
+	let name = '';
+	let data = {
+		system_prompt: '',
+		files: []
+	};
+
+	let loading = false;
+
+	const submitHandler = async () => {
+		loading = true;
+		await onSubmit({
+			name,
+			data
+		});
+		show = false;
+		loading = false;
+	};
+
+	const init = () => {
+		name = folder.name;
+		data = folder.data || {
+			system_prompt: '',
+			files: []
+		};
+	};
+
+	$: if (folder) {
+		init();
+	}
+</script>
+
+<Modal size="md" bind:show>
+	<div>
+		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-1">
+			<div class=" text-lg font-medium self-center">
+				{$i18n.t('Edit Folder')}
+			</div>
+			<button
+				class="self-center"
+				on:click={() => {
+					show = false;
+				}}
+			>
+				<XMark className={'size-5'} />
+			</button>
+		</div>
+
+		<div class="flex flex-col md:flex-row w-full px-5 pb-4 md:space-x-4 dark:text-gray-200">
+			<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
+				<form
+					class="flex flex-col w-full"
+					on:submit|preventDefault={() => {
+						submitHandler();
+					}}
+				>
+					<div class="flex flex-col w-full mt-1">
+						<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Folder Name')}</div>
+
+						<div class="flex-1">
+							<input
+								class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
+								type="text"
+								bind:value={name}
+								placeholder={$i18n.t('Enter folder name')}
+								autocomplete="off"
+							/>
+						</div>
+					</div>
+
+					<hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" />
+
+					<div class="my-1">
+						<div class="mb-2 text-xs text-gray-500">{$i18n.t('System Prompt')}</div>
+						<div>
+							<Textarea
+								className=" text-sm w-full bg-transparent outline-hidden resize-none overflow-y-hidden "
+								placeholder={`Write your model system prompt content here\ne.g.) You are Mario from Super Mario Bros, acting as an assistant.`}
+								rows={4}
+								bind:value={data.system_prompt}
+							/>
+						</div>
+					</div>
+
+					<div class="my-2">
+						<Knowledge bind:selectedItems={data.files}>
+							<div slot="label">
+								<div class="flex w-full justify-between">
+									<div class=" mb-2 text-xs text-gray-500">
+										{$i18n.t('Knowledge')}
+									</div>
+								</div>
+							</div>
+						</Knowledge>
+					</div>
+
+					<div class="flex justify-end pt-3 text-sm font-medium gap-1.5">
+						<button
+							class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-950 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center {loading
+								? ' cursor-not-allowed'
+								: ''}"
+							type="submit"
+							disabled={loading}
+						>
+							{$i18n.t('Save')}
+
+							{#if loading}
+								<div class="ml-2 self-center">
+									<Spinner />
+								</div>
+							{/if}
+						</button>
+					</div>
+				</form>
+			</div>
+		</div>
+	</div>
+</Modal>

src/lib/components/layout/Sidebar/RecursiveFolder.svelte

@@ -8,6 +8,23 @@
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
+	import { toast } from 'svelte-sonner';
+
+	import { selectedFolder } from '$lib/stores';
+
+	import {
+		deleteFolderById,
+		updateFolderIsExpandedById,
+		updateFolderById,
+		updateFolderParentIdById
+	} from '$lib/apis/folders';
+	import {
+		getChatById,
+		getChatsByFolderId,
+		importChat,
+		updateChatFolderIdById
+	} from '$lib/apis/chats';
+
 	import ChevronDown from '../../icons/ChevronDown.svelte';
 	import ChevronRight from '../../icons/ChevronRight.svelte';
 	import Collapsible from '../../common/Collapsible.svelte';
@@ -15,23 +32,11 @@
 
 	import FolderOpen from '$lib/components/icons/FolderOpen.svelte';
 	import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
-	import {
-		deleteFolderById,
-		updateFolderIsExpandedById,
-		updateFolderById,
-		updateFolderParentIdById
-	} from '$lib/apis/folders';
-	import { toast } from 'svelte-sonner';
-	import {
-		getChatById,
-		getChatsByFolderId,
-		importChat,
-		updateChatFolderIdById
-	} from '$lib/apis/chats';
+
 	import ChatItem from './ChatItem.svelte';
 	import FolderMenu from './Folders/FolderMenu.svelte';
 	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
-	import { selectedFolder } from '$lib/stores';
+	import EditFolderModal from './Folders/EditFolderModal.svelte';
 
 	export let open = false;
 
@@ -39,14 +44,13 @@
 	export let folderId;
 	export let shiftKey = false;
 
-	export let onCreateChat = (e) => {};
-
 	export let className = '';
 
 	export let parentDragged = false;
 
 	let folderElement;
 
+	let showEditFolderModal = false;
 	let edit = false;
 
 	let draggedOver = false;
@@ -235,7 +239,7 @@
 			delete folders[folderId].new;
 
 			await tick();
-			editHandler();
+			renameHandler();
 		}
 	});
 
@@ -265,23 +269,21 @@
 		}
 	};
 
-	const nameUpdateHandler = async () => {
+	const updateHandler = async ({ name, data }) => {
 		if (name === '') {
 			toast.error($i18n.t('Folder name cannot be empty.'));
 			return;
 		}
 
-		if (name === folders[folderId].name) {
-			edit = false;
-			return;
-		}
-
 		const currentName = folders[folderId].name;
 
 		name = name.trim();
 		folders[folderId].name = name;
 
-		const res = await updateFolderById(localStorage.token, folderId, { name }).catch((error) => {
+		const res = await updateFolderById(localStorage.token, folderId, {
+			name,
+			...(data ? { data } : {})
+		}).catch((error) => {
 			toast.error(`${error}`);
 
 			folders[folderId].name = currentName;
@@ -290,7 +292,12 @@
 
 		if (res) {
 			folders[folderId].name = name;
-			toast.success($i18n.t('Folder name updated successfully'));
+			if (data) {
+				folders[folderId].data = data;
+			}
+
+			// toast.success($i18n.t('Folder name updated successfully'));
+			toast.success($i18n.t('Folder updated successfully'));
 
 			if ($selectedFolder?.id === folderId) {
 				selectedFolder.set(folders[folderId]);
@@ -320,7 +327,7 @@
 
 	$: isExpandedUpdateDebounceHandler(open);
 
-	const editHandler = async () => {
+	const renameHandler = async () => {
 		console.log('Edit');
 		await tick();
 		name = folders[folderId].name;
@@ -368,6 +375,12 @@
 	</div>
 </DeleteConfirmDialog>
 
+<EditFolderModal
+	bind:show={showEditFolderModal}
+	folder={folders[folderId]}
+	onSubmit={updateHandler}
+/>
+
 {#if dragged && x && y}
 	<DragGhost {x} {y}>
 		<div class=" bg-black/80 backdrop-blur-2xl px-2 py-1 rounded-lg w-fit max-w-40">
@@ -407,7 +420,7 @@
 					? 'bg-gray-100 dark:bg-gray-900'
 					: ''}"
 				on:dblclick={() => {
-					editHandler();
+					renameHandler();
 				}}
 				on:click={(e) => {
 					selectedFolder.set(folders[folderId]);
@@ -431,7 +444,7 @@
 								e.target.select();
 							}}
 							on:blur={() => {
-								nameUpdateHandler();
+								updateHandler({ name });
 								edit = false;
 							}}
 							on:click={(e) => {
@@ -444,7 +457,7 @@
 							}}
 							on:keydown={(e) => {
 								if (e.key === 'Enter') {
-									nameUpdateHandler();
+									updateHandler({ name });
 									edit = false;
 								}
 							}}
@@ -464,10 +477,7 @@
 				>
 					<FolderMenu
 						onEdit={() => {
-							// Requires a timeout to prevent the click event from closing the dropdown
-							setTimeout(() => {
-								editHandler();
-							}, 200);
+							showEditFolderModal = true;
 						}}
 						onDelete={() => {
 							showDeleteConfirm = true;