refac

Author: tjbck

src/lib/apis/folders/index.ts

@@ -234,3 +234,89 @@ export const deleteFolderById = async (token: string, id: string, deleteContents
 
 	return res;
 };
+
+export const updateFolderAccessById = async (
+	token: string,
+	id: string,
+	accessGrants: any[]
+) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/folders/${id}/access/update`, {
+		method: 'POST',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		},
+		body: JSON.stringify({ access_grants: accessGrants })
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			error = err.detail;
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const getSharedFolders = async (token: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/folders/shared`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			error = err.detail;
+			return [];
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
+export const getSharedFolderChats = async (token: string, folderId: string) => {
+	let error = null;
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/folders/${folderId}/shared/chats`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			error = err.detail;
+			return null;
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};

src/lib/components/chat/Chat.svelte

@@ -169,6 +169,9 @@
 	let chat = null;
 	let tags = [];
 
+	// Read-only when viewing someone else's chat (e.g. via shared folder access)
+	$: readOnly = chat != null && chat.user_id !== $user?.id;
+
 	let chatTasks = [];
 
 	let history = {
@@ -3103,6 +3106,7 @@
 									<Messages
 										bind:this={messagesRef}
 										chatId={$chatId}
+										{readOnly}
 										bind:history
 										bind:autoScroll
 										bind:prompt
@@ -3126,7 +3130,16 @@
 								</div>
 							</div>
 
-							<div class=" pb-2 {dragged ? 'z-0' : 'z-10'}">
+							{#if readOnly}
+							<div class="pb-6 z-10">
+								<div
+									class="text-xs text-gray-400 dark:text-gray-500 text-center"
+								>
+									{$i18n.t('Read only')}
+								</div>
+							</div>
+						{:else}
+						<div class=" pb-2 {dragged ? 'z-0' : 'z-10'}">
 								<MessageInput
 									bind:this={messageInput}
 									{history}
@@ -3208,6 +3221,7 @@
 									<!-- {$i18n.t('LLMs can make mistakes. Verify important information.')} -->
 								</div>
 							</div>
+							{/if}
 						{:else}
 							<div class="flex items-center h-full">
 								<Placeholder

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

@@ -4,12 +4,15 @@
 
 	const i18n: Writable<any> = getContext('i18n');
 
+	import { user } from '$lib/stores';
+
 	import { fade } from 'svelte/transition';
 
 	import ChatList from './ChatList.svelte';
 	import FolderKnowledge from './FolderKnowledge.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import { getChatListByFolderId } from '$lib/apis/chats';
+	import { getSharedFolderChats } from '$lib/apis/folders';
 
 	export let folder: any = null;
 
@@ -22,24 +25,8 @@
 	let allChatsLoaded = false;
 
 	const loadChats = async () => {
-		chatListLoading = true;
-
-		page += 1;
-
-		let newChatList: any[] = [];
-
-		newChatList = await getChatListByFolderId(localStorage.token, folder.id, page).catch(
-			(error) => {
-				console.error(error);
-				return [];
-			}
-		);
-
-		// once the bottom of the list has been reached (no results) there is no need to continue querying
-		allChatsLoaded = newChatList.length === 0;
-		chats = [...(chats || []), ...(newChatList || [])];
-
-		chatListLoading = false;
+		// getSharedFolderChats returns all users' chats in one shot; no pagination
+		allChatsLoaded = true;
 	};
 
 	const setChatList = async () => {
@@ -49,12 +36,21 @@
 		chatListLoading = false;
 
 		if (folder && folder.id) {
-			const res = await getChatListByFolderId(localStorage.token, folder.id, page);
-
-			if (res) {
-				chats = res;
+			// Always use the shared folder endpoint so owners also see
+			// chats created by users who have write access to this folder.
+			const res = await getSharedFolderChats(localStorage.token, folder.id).catch(
+				(error) => {
+					console.error(error);
+					return null;
+				}
+			);
+			if (res && res.chats) {
+				chats = res.chats;
+				allChatsLoaded = true;
 			} else {
-				chats = [];
+				// Fallback to regular API (e.g. if user has no shared access)
+				const fallback = await getChatListByFolderId(localStorage.token, folder.id, page).catch(() => []);
+				chats = fallback || [];
 			}
 		} else {
 			chats = [];

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

@@ -20,6 +20,7 @@
 	import { getChatsByFolderId } from '$lib/apis/chats';
 
 	import FolderModal from '$lib/components/layout/Sidebar/Folders/FolderModal.svelte';
+	import FolderShareModal from '$lib/components/layout/Sidebar/Folders/FolderShareModal.svelte';
 
 	import Folder from '$lib/components/icons/Folder.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
@@ -36,6 +37,7 @@
 
 	let showFolderModal = false;
 	let showCreateSubFolderModal = false;
+	let showShareModal = false;
 	let showDeleteConfirm = false;
 	let deleteFolderContents = true;
 
@@ -173,6 +175,8 @@
 		onSubmit={createSubFolderHandler}
 	/>
 
+	<FolderShareModal bind:show={showShareModal} {folder} />
+
 	<DeleteConfirmDialog
 		bind:show={showDeleteConfirm}
 		title={$i18n.t('Delete folder?')}
@@ -232,6 +236,9 @@
 				onEdit={() => {
 					showFolderModal = true;
 				}}
+				onShare={() => {
+					showShareModal = true;
+				}}
 				onDelete={() => {
 					showDeleteConfirm = true;
 				}}

src/lib/components/layout/Sidebar.svelte

@@ -46,7 +46,7 @@
 		deleteAllChats,
 		getChatListBySearchText
 	} from '$lib/apis/chats';
-	import { createNewFolder, getFolders, updateFolderParentIdById } from '$lib/apis/folders';
+	import { createNewFolder, getFolders, getSharedFolders, updateFolderParentIdById } from '$lib/apis/folders';
 	import { createNewNote, getPinnedNoteList, toggleNotePinnedStatusById } from '$lib/apis/notes';
 	import { updateUserSettings } from '$lib/apis/users';
 	import { checkActiveChats } from '$lib/apis/tasks';
@@ -61,6 +61,7 @@
 	import Folder from '../common/Folder.svelte';
 	import Tooltip from '../common/Tooltip.svelte';
 	import Folders from './Sidebar/Folders.svelte';
+	import SharedFolderItem from './Sidebar/SharedFolderItem.svelte';
 	import { getChannels, createNewChannel } from '$lib/apis/channels';
 	import ChannelModal from './Sidebar/ChannelModal.svelte';
 	import ChannelItem from './Sidebar/ChannelItem.svelte';
@@ -98,12 +99,15 @@
 	let showPinnedNotes = false;
 	let showChannels = false;
 	let showFolders = false;
+	let showSharedFolders = false;
 
 	let folders = {};
 	let folderRegistry = {};
 
 	let newFolderId = null;
 
+	let sharedFolders: any[] = [];
+
 	$: pinnedItems = $settings?.pinnedMenuItems ?? DEFAULT_PINNED_ITEMS;
 
 	const isMenuItemVisible = (id) => {
@@ -215,6 +219,31 @@
 				});
 			}
 		}
+
+		// Merge shared folders into the same structure
+		try {
+			sharedFolders = await getSharedFolders(localStorage.token);
+		} catch (e) {
+			sharedFolders = [];
+		}
+
+		for (const sf of sharedFolders) {
+			if (folders[sf.id]) continue; // Already owned by user
+			folders[sf.id] = { ...sf, shared: true };
+		}
+
+		// Build parent-child relationships for shared folders
+		for (const sf of sharedFolders) {
+			if (folders[sf.id]?.shared && sf.parent_id && folders[sf.parent_id]) {
+				folders[sf.parent_id].childrenIds = folders[sf.parent_id].childrenIds
+					? [...new Set([...folders[sf.parent_id].childrenIds, sf.id])]
+					: [sf.id];
+			}
+		}
+	};
+
+	const initSharedFolders = async () => {
+		await initFolders();
 	};
 
 	const createFolder = async ({ name, data, parent_id }) => {
@@ -291,6 +320,7 @@
 		scrollPaginationEnabled.set(false);
 
 		initFolders();
+		initSharedFolders();
 		await Promise.all([
 			await (async () => {
 				console.log('Init tags');

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

@@ -63,6 +63,7 @@
 
 	export let selected = false;
 	export let shiftKey = false;
+	export let readonly = false;
 
 	export let onDragEnd = () => {};
 
@@ -445,7 +446,7 @@
 	id="sidebar-chat-group"
 	bind:this={itemElement}
 	class=" w-full {className} relative group"
-	draggable={!confirmEdit}
+	draggable={!confirmEdit && !readonly}
 >
 	{#if confirmEdit}
 		<div
@@ -509,6 +510,7 @@
 				lastReadAt = Date.now() / 1000;
 			}}
 			on:dblclick={async (e) => {
+				if (readonly) return;
 				e.preventDefault();
 				e.stopPropagation();
 
@@ -557,6 +559,7 @@
 	{/if}
 
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	{#if !readonly}
 	<div
 		id="sidebar-chat-item-menu"
 		class="
@@ -691,4 +694,5 @@
 			</div>
 		{/if}
 	</div>
+	{/if}
 </div>