refac

src/lib/apis/automations/index.ts

@@ -14,6 +14,7 @@ export type AutomationData = {
 
 export type AutomationForm = {
 	name: string;
+	folder_id?: string | null;
 	data: AutomationData;
 	meta?: {
 		system_prompt?: string;
@@ -36,6 +37,7 @@ export type AutomationRunModel = {
 export type AutomationResponse = {
 	id: string;
 	user_id: string;
+	folder_id: string | null;
 	name: string;
 	data: AutomationData;
 	meta: Record<string, any> | null;
@@ -53,7 +55,8 @@ export const getAutomationItems = async (
 	token: string,
 	query: string | null,
 	status: string | null,
-	page: number
+	page: number,
+	folder_id?: string | null
 ): Promise<{ items: AutomationResponse[]; total: number }> => {
 	let error = null;
 
@@ -67,6 +70,9 @@ export const getAutomationItems = async (
 	if (page) {
 		searchParams.append('page', page.toString());
 	}
+	if (folder_id !== undefined && folder_id !== null) {
+		searchParams.append('folder_id', folder_id);
+	}
 
 	const res = await fetch(`${WEBUI_API_BASE_URL}/automations/list?${searchParams.toString()}`, {
 		method: 'GET',

src/lib/components/AutomationModal.svelte

@@ -8,6 +8,9 @@
 
 	import ScheduleDropdown from '$lib/components/automations/ScheduleDropdown.svelte';
 	import ModelDropdown from '$lib/components/automations/ModelDropdown.svelte';
+	import FolderDropdown from '$lib/components/automations/FolderDropdown.svelte';
+	import { getFolders } from '$lib/apis/folders';
+	import { folders } from '$lib/stores';
 
 	import {
 		createAutomation,
@@ -26,9 +29,11 @@
 	let name = '';
 	let prompt = '';
 	let model_id = '';
+	let folder_id = '';
 	let is_active = true;
 
 	let loading = false;
+	let foldersLoaded = false;
 
 	// Schedule dropdown ref
 	let scheduleDropdown: ScheduleDropdown;
@@ -49,6 +54,7 @@
 		try {
 			const form: AutomationForm = {
 				name: name.trim(),
+				folder_id: folder_id || null,
 				data: {
 					prompt: prompt.trim(),
 					model_id: model_id.trim(),
@@ -77,11 +83,17 @@
 
 	const init = async () => {
 		await tick();
+		if (!foldersLoaded && ($folders ?? []).length === 0) {
+			const res = await getFolders(localStorage.token).catch(() => null);
+			if (res) folders.set(res);
+			foldersLoaded = true;
+		}
 
 		if (automation) {
 			name = automation.name;
 			prompt = automation.data.prompt;
 			model_id = automation.data.model_id;
+			folder_id = automation.folder_id ?? '';
 			is_active = automation.is_active;
 			if (scheduleDropdown) {
 				scheduleDropdown.parseRrule(automation.data.rrule);
@@ -90,6 +102,9 @@
 			name = cloneFrom.name;
 			prompt = cloneFrom.data.prompt;
 			model_id = cloneFrom.data.model_id;
+			folder_id = ($folders ?? []).some((folder) => folder.id === cloneFrom.folder_id)
+				? (cloneFrom.folder_id ?? '')
+				: '';
 			is_active = true;
 			if (scheduleDropdown) {
 				scheduleDropdown.parseRrule(cloneFrom.data.rrule);
@@ -98,6 +113,7 @@
 			name = '';
 			prompt = '';
 			model_id = '';
+			folder_id = '';
 			is_active = true;
 		}
 	};
@@ -145,6 +161,8 @@
 				<ScheduleDropdown bind:this={scheduleDropdown} side="top" align="start" />
 
 				<ModelDropdown bind:model_id side="top" align="start" />
+
+				<FolderDropdown bind:folder_id side="top" align="start" />
 			</div>
 
 			<div class="flex items-center justify-end gap-2 shrink-0">

src/lib/components/automations/AutomationEditor.svelte

@@ -7,7 +7,8 @@
 	import localizedFormat from 'dayjs/plugin/localizedFormat';
 	import type i18nType from '$lib/i18n';
 
-	import { WEBUI_NAME } from '$lib/stores';
+	import { WEBUI_NAME, folders } from '$lib/stores';
+	import { getFolders } from '$lib/apis/folders';
 
 	import {
 		getAutomationById,
@@ -42,6 +43,19 @@
 	let runsLoading = false;
 	let hasMoreRuns = true;
 	let runsPage = 0;
+	let foldersLoaded = false;
+
+	const ensureFolders = async () => {
+		if (foldersLoaded || ($folders ?? []).length > 0) return;
+		const res = await getFolders(localStorage.token).catch(() => null);
+		if (res) folders.set(res);
+		foldersLoaded = true;
+	};
+
+	const getFolderName = (folderId: string | null): string =>
+		folderId
+			? (($folders ?? []).find((folder) => folder.id === folderId)?.name ?? $i18n.t('None'))
+			: $i18n.t('None');
 
 	const formatTime = (ts: number | null): string => {
 		if (!ts) return '-';
@@ -201,6 +215,7 @@
 	onMount(async () => {
 		is_active = automation.is_active;
 
+		await ensureFolders();
 		await loadRuns();
 	});
 
@@ -263,6 +278,15 @@
 			</span>
 		</div>
 
+		<div class="flex h-7 items-center px-3">
+			<span class="w-24 shrink-0 text-[11px] text-gray-400 dark:text-gray-500">
+				{$i18n.t('Folder')}
+			</span>
+			<span class="min-w-0 truncate text-xs text-gray-700 dark:text-gray-300">
+				{getFolderName(automation.folder_id)}
+			</span>
+		</div>
+
 		<div class="flex h-7 items-center px-3">
 			<span class="w-24 shrink-0 text-[11px] text-gray-400 dark:text-gray-500">
 				{$i18n.t('Model')}

src/lib/components/automations/FolderDropdown.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+
+	import { folders } from '$lib/stores';
+	import { decodeString } from '$lib/utils';
+
+	import Select from '$lib/components/common/Select.svelte';
+	import Check from '$lib/components/icons/Check.svelte';
+	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
+	import Folder from '$lib/components/icons/Folder.svelte';
+	import Search from '$lib/components/icons/Search.svelte';
+	import XMark from '$lib/components/icons/XMark.svelte';
+
+	const i18n = getContext('i18n');
+
+	export let folder_id = '';
+	export let side: 'top' | 'bottom' = 'top';
+	export let align: 'start' | 'end' = 'start';
+	export let onChange: () => void = () => {};
+
+	let folderSearch = '';
+
+	const folderName = (folder: any) => decodeString(folder?.name ?? $i18n.t('Folder'));
+
+	const folderPath = (folder: any) => {
+		const names: string[] = [];
+		const seen = new Set<string>();
+		let current = folder;
+
+		while (current?.parent_id && !seen.has(current.parent_id)) {
+			seen.add(current.parent_id);
+			const parent = folderById.get(current.parent_id);
+			if (!parent) break;
+			names.unshift(folderName(parent));
+			current = parent;
+		}
+
+		return names.join(' / ');
+	};
+
+	$: folderOptions = [...((($folders ?? []) as any[]) ?? [])]
+		.filter((folder) => folder?.id && !folder?.shared)
+		.sort((a, b) => folderName(a).localeCompare(folderName(b)));
+	$: folderById = new Map(folderOptions.map((folder) => [folder.id, folder]));
+	$: selectedFolder = folderOptions.find((folder) => folder.id === folder_id);
+	$: folderLabel = selectedFolder ? folderName(selectedFolder) : $i18n.t('Choose folder');
+	$: normalizedSearch = folderSearch.trim().toLowerCase();
+	$: filteredFolderOptions = normalizedSearch
+		? folderOptions.filter((folder) =>
+				`${folderName(folder)} ${folderPath(folder)}`.toLowerCase().includes(normalizedSearch)
+			)
+		: folderOptions;
+</script>
+
+<Select
+	bind:value={folder_id}
+	items={folderOptions.map((folder) => ({ value: folder.id, label: folderName(folder) }))}
+	placeholder={$i18n.t('Choose folder')}
+	{align}
+	triggerClass="relative h-8 max-w-[11rem] flex items-center gap-1.5 px-2.5 py-1.5 bg-transparent rounded-2xl text-xs font-normal text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
+	contentClass="w-72 shadow-lg"
+	maxHeight="18rem"
+	onChange={() => onChange()}
+	onClose={() => {
+		folderSearch = '';
+	}}
+>
+	<svelte:fragment slot="trigger">
+		<Folder className="size-3.5 shrink-0" />
+		<div class="inline-flex h-input min-w-0 flex-1 truncate bg-transparent outline-hidden">
+			{folderLabel}
+		</div>
+
+		{#if folder_id}
+			<button
+				class="outline-none"
+				type="button"
+				on:click|stopPropagation={() => {
+					folder_id = '';
+					folderSearch = '';
+					onChange();
+				}}
+				aria-label={$i18n.t('Clear')}
+			>
+				<XMark className="size-3.5" />
+			</button>
+		{:else}
+			<ChevronDown className="size-2.5 shrink-0" strokeWidth="2.5" />
+		{/if}
+	</svelte:fragment>
+
+	<svelte:fragment let:selectItem>
+		<div class="flex items-center gap-1.5 px-2 py-1">
+			<Search className="size-3.5 shrink-0" strokeWidth="2.5" />
+			<input
+				bind:value={folderSearch}
+				class="w-full bg-transparent text-[13px] outline-hidden"
+				placeholder={$i18n.t('Search folders')}
+				autocomplete="off"
+				on:click|stopPropagation
+			/>
+		</div>
+
+		{#if folderOptions.length > 0}
+			<hr class="mx-1 my-0.5 border-gray-50/30 dark:border-gray-800/30" />
+			<div class="px-2 py-1 text-[11px] text-gray-500 dark:text-gray-400">
+				{$i18n.t('Folders')}
+			</div>
+		{/if}
+
+		{#each filteredFolderOptions as folder (folder.id)}
+			{@const path = folderPath(folder)}
+			<button
+				type="button"
+				class="flex h-[1.6875rem] w-full cursor-pointer items-center justify-between gap-2 rounded-xl bg-transparent px-2 text-[13px] hover:bg-gray-50/40 hover:text-gray-900 dark:hover:bg-gray-800/40 dark:hover:text-gray-100 {folder_id ===
+				folder.id
+					? 'text-gray-900 dark:text-gray-100'
+					: 'text-gray-700 dark:text-gray-300'}"
+				title={path ? `${path} / ${folderName(folder)}` : folderName(folder)}
+				on:click={() => {
+					selectItem({
+						value: folder_id === folder.id ? '' : folder.id,
+						label: folder_id === folder.id ? $i18n.t('Choose folder') : folderName(folder)
+					});
+					folderSearch = '';
+				}}
+			>
+				<div class="flex min-w-0 items-center gap-1.5">
+					<Folder className="size-3.5 shrink-0" />
+					<span class="min-w-0 truncate">{folderName(folder)}</span>
+					{#if path}
+						<span class="min-w-0 truncate text-[11px] text-gray-400 dark:text-gray-500">
+							{path}
+						</span>
+					{/if}
+				</div>
+				{#if folder_id === folder.id}
+					<Check className="size-3.5 shrink-0" strokeWidth="2" />
+				{/if}
+			</button>
+		{:else}
+			<div class="px-2 py-1 text-[11px] text-gray-500 dark:text-gray-400">
+				{folderOptions.length > 0 ? $i18n.t('No results found') : $i18n.t('No folders')}
+			</div>
+		{/each}
+	</svelte:fragment>
+</Select>

src/lib/components/chat/Placeholder/ChatList.svelte

@@ -12,6 +12,8 @@
 	import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
 	import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Spinner from '$lib/components/common/Spinner.svelte';
+	import { chatId } from '$lib/stores';
 
 	dayjs.extend(localizedFormat);
 
@@ -138,6 +140,11 @@
 		{/if}
 
 		{#each chatList as chat, idx (chat.id)}
+			{@const unread =
+				chat.id !== $chatId &&
+				!chat.active &&
+				(chat.last_read_at == null ||
+					(chat.updated_at != null && chat.updated_at > chat.last_read_at))}
 			{#if (idx === 0 || (idx > 0 && chat.time_range !== chatList[idx - 1].time_range)) && chat?.time_range}
 				<div
 					class="w-full text-xs text-gray-500 dark:text-gray-500 font-normal {idx === 0
@@ -171,8 +178,24 @@
 				draggable="false"
 				href={`/c/${chat.id}`}
 			>
-				<div class="text-ellipsis line-clamp-1 w-full sm:basis-3/5">
-					{chat?.title}
+				<div class="flex min-w-0 items-center w-full sm:basis-3/5">
+					{#if chat.active}
+						<div class="shrink-0 self-center pr-2">
+							<Spinner className="size-3" />
+						</div>
+					{:else if unread}
+						<div class="shrink-0 self-center pr-2.5 flex transition-opacity duration-300">
+							<div class="size-1.5 bg-sky-500 rounded-full"></div>
+						</div>
+					{/if}
+
+					<div
+						class="text-ellipsis line-clamp-1 min-w-0 {unread
+							? 'font-normal text-gray-800 dark:text-gray-200'
+							: ''}"
+					>
+						{chat?.title}
+					</div>
 				</div>
 
 				<div class="hidden sm:flex sm:basis-2/5 items-center justify-end gap-2">

src/lib/components/layout/Sidebar.svelte

@@ -386,6 +386,7 @@
 	const refreshChatRows = async () => {
 		const result = await refreshChatList(localStorage.token, { refreshPinned: true });
 		if (result.accepted) {
+			await initFolders();
 			await Promise.all(Object.values(folderRegistry).map((folder) => folder?.setFolderItems?.()));
 			allChatsLoaded = result.allLoaded;
 			chatListReady = true;

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

@@ -77,6 +77,12 @@
 
 	let name = '';
 
+	const formatUnreadCount = (count) =>
+		new Intl.NumberFormat(undefined, {
+			notation: 'compact',
+			compactDisplay: 'short'
+		}).format(count);
+
 	const onDragOver = (e) => {
 		e.preventDefault();
 		e.stopPropagation();
@@ -632,7 +638,9 @@
 					{/if}
 				</button>
 
-				<div class="translate-y-[0.5px] flex-1 justify-start text-start line-clamp-1">
+				<div
+					class="translate-y-[0.5px] flex min-w-0 flex-1 items-center gap-1.5 pr-6 text-start"
+				>
 					{#if edit}
 						<input
 							id="folder-{folderId}-input"
@@ -660,7 +668,18 @@
 							class="w-full h-full bg-transparent outline-hidden"
 						/>
 					{:else}
-						{folders[folderId].name}
+						<div class="min-w-0 truncate">
+							{folders[folderId].name}
+						</div>
+
+						{#if !folders[folderId]?.shared && (folders[folderId]?.unread_count ?? 0) > 0}
+							<div
+								class="inline-flex h-4 min-w-4 shrink-0 items-center justify-center rounded-md bg-sky-500/10 px-1 text-[10px] font-semibold leading-4 text-sky-600 dark:bg-sky-400/10 dark:text-sky-300"
+								title={$i18n.t('Unread')}
+							>
+								{formatUnreadCount(folders[folderId].unread_count)}
+							</div>
+						{/if}
 					{/if}
 				</div>
 

src/routes/(app)/automations/+page.svelte

@@ -5,7 +5,8 @@
 	import relativeTime from 'dayjs/plugin/relativeTime';
 	import { toast } from 'svelte-sonner';
 	import { goto } from '$app/navigation';
-	import { WEBUI_NAME, user, config } from '$lib/stores';
+	import { WEBUI_NAME, user, config, folders } from '$lib/stores';
+	import { getFolders } from '$lib/apis/folders';
 
 	import {
 		createAutomation,
@@ -65,6 +66,7 @@
 	let page = 1;
 	let importFiles: FileList | null = null;
 	let automationsImportInputElement: HTMLInputElement;
+	let foldersLoaded = false;
 
 	const syncHeader = () => {
 		automationsLayout?.setHeader({
@@ -142,6 +144,16 @@
 		}
 	};
 
+	const ensureFolders = async () => {
+		if (foldersLoaded || ($folders ?? []).length > 0) return;
+		const res = await getFolders(localStorage.token).catch(() => null);
+		if (res) folders.set(res);
+		foldersLoaded = true;
+	};
+
+	const getFolderName = (folderId: string | null): string | null =>
+		folderId ? (($folders ?? []).find((folder) => folder.id === folderId)?.name ?? null) : null;
+
 	const toggleHandler = async (automation: AutomationResponse) => {
 		const res = await toggleAutomationById(localStorage.token, automation.id).catch((err) => {
 			toast.error(`${err}`);
@@ -227,6 +239,7 @@
 
 	const toAutomationForm = (automation: AutomationResponse): AutomationForm => ({
 		name: automation.name,
+		folder_id: automation.folder_id,
 		data: automation.data,
 		meta: automation.meta ?? undefined,
 		is_active: automation.is_active
@@ -257,9 +270,13 @@
 			throw new Error($i18n.t('Invalid JSON format'));
 		}
 
+		await ensureFolders();
+		const validFolderIds = new Set(($folders ?? []).map((folder) => folder.id));
+
 		for (const automation of automationItems) {
 			await createAutomation(localStorage.token, {
 				name: automation.name,
+				folder_id: validFolderIds.has(automation.folder_id) ? automation.folder_id : null,
 				data: automation.data,
 				meta: automation.meta ?? undefined,
 				is_active: automation.is_active ?? true
@@ -327,6 +344,7 @@
 
 		loaded = true;
 		syncHeader();
+		void ensureFolders();
 
 		return () => {
 			clearTimeout(searchDebounceTimer);
@@ -519,6 +537,7 @@
 			{:else}
 				<div class="gap-y-0.5 grid my-1">
 					{#each automations as automation (automation.id)}
+						{@const folderName = getFolderName(automation.folder_id)}
 						<div
 							role="button"
 							tabindex="0"
@@ -546,6 +565,15 @@
 												</div>
 											</Tooltip>
 
+											{#if folderName}
+												<div
+													class="max-w-32 shrink-0 truncate rounded-md bg-sky-500/10 px-1.5 py-0.5 text-[10px] leading-4 text-sky-600 dark:bg-sky-400/10 dark:text-sky-300"
+													title={folderName}
+												>
+													{folderName}
+												</div>
+											{/if}
+
 											<Tooltip
 												content={automation.last_run_at
 													? dayjs(automation.last_run_at / 1000000).format('LLLL')