Merge pull request #1881 from open-webui/dev

0.1.123

src/lib/stores/index.ts

@@ -34,6 +34,8 @@ export const documents = writable([
 ]);
 
 export const settings: Writable<Settings> = writable({});
+
+export const showSidebar = writable(false);
 export const showSettings = writable(false);
 export const showChangelog = writable(false);
 
@@ -78,6 +80,7 @@ type Settings = {
 	saveChatHistory?: boolean;
 	notificationEnabled?: boolean;
 	title?: TitleSettings;
+	splitLargeDeltas?: boolean;
 
 	system?: string;
 	requestFormat?: string;

src/routes/(app)/+layout.svelte

@@ -154,7 +154,7 @@
 				if (isCtrlPressed && event.key === '.') {
 					event.preventDefault();
 					console.log('openSettings');
-					document.getElementById('open-settings-button')?.click();
+					showSettings.set(!$showSettings);
 				}
 
 				// Check if Ctrl + / is pressed
@@ -192,6 +192,8 @@
 </div>
 
 <ShortcutsModal bind:show={showShortcuts} />
+<SettingsModal bind:show={$showSettings} />
+<ChangelogModal bind:show={$showChangelog} />
 
 <div class="app relative">
 	<div
@@ -292,8 +294,6 @@
 			{/if}
 
 			<Sidebar />
-			<SettingsModal bind:show={$showSettings} />
-			<ChangelogModal bind:show={$showChangelog} />
 			<slot />
 		{/if}
 	</div>

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

@@ -15,7 +15,8 @@
 		chatId,
 		config,
 		WEBUI_NAME,
-		tags as _tags
+		tags as _tags,
+		showSidebar
 	} from '$lib/stores';
 	import { copyToClipboard, splitStream } from '$lib/utils';
 
@@ -50,7 +51,9 @@
 	let currentRequestId = null;
 
 	let showModelSelector = true;
+
 	let selectedModels = [''];
+	let atSelectedModel = '';
 
 	let selectedModelfile = null;
 	$: selectedModelfile =
@@ -144,7 +147,8 @@
 		setTimeout(() => chatInput?.focus(), 0);
 	};
 
-	const scrollToBottom = () => {
+	const scrollToBottom = async () => {
+		await tick();
 		if (messagesContainerElement) {
 			messagesContainerElement.scrollTop = messagesContainerElement.scrollHeight;
 		}
@@ -242,7 +246,8 @@
 		const _chatId = JSON.parse(JSON.stringify($chatId));
 
 		await Promise.all(
-			selectedModels.map(async (modelId) => {
+			(atSelectedModel !== '' ? [atSelectedModel.id] : selectedModels).map(async (modelId) => {
+				console.log('modelId', modelId);
 				const model = $models.filter((m) => m.id === modelId).at(0);
 
 				if (model) {
@@ -536,7 +541,7 @@
 
 		console.log(docs);
 
-		console.log(model);
+		scrollToBottom();
 
 		const [res, controller] = await generateOpenAIChatCompletion(
 			localStorage.token,
@@ -605,14 +610,8 @@
 
 		scrollToBottom();
 
-		if (res && res.ok) {
-			const reader = res.body
-				.pipeThrough(new TextDecoderStream())
-				.pipeThrough(splitStream('\n'))
-				.getReader();
-
-			const textStream = await createOpenAITextStream(reader, $settings.splitLargeChunks);
-			console.log(textStream);
+		if (res && res.ok && res.body) {
+			const textStream = await createOpenAITextStream(res.body, $settings.splitLargeChunks);
 
 			for await (const update of textStream) {
 				const { value, done } = update;
@@ -844,7 +843,11 @@
 	</title>
 </svelte:head>
 
-<div class="h-screen max-h-[100dvh] w-full flex flex-col">
+<div
+	class="min-h-screen max-h-screen {$showSidebar
+		? 'lg:max-w-[calc(100%-260px)]'
+		: ''} w-full max-w-full flex flex-col"
+>
 	<Navbar
 		{title}
 		bind:selectedModels
@@ -855,7 +858,7 @@
 	/>
 	<div class="flex flex-col flex-auto">
 		<div
-			class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0"
+			class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0 max-w-full"
 			id="messages-container"
 			bind:this={messagesContainerElement}
 			on:scroll={(e) => {
@@ -873,22 +876,25 @@
 					bind:history
 					bind:messages
 					bind:autoScroll
+					bind:prompt
 					bottomPadding={files.length > 0}
+					suggestionPrompts={selectedModelfile?.suggestionPrompts ??
+						$config.default_prompt_suggestions}
 					{sendPrompt}
 					{continueGeneration}
 					{regenerateResponse}
 				/>
 			</div>
 		</div>
+	</div>
+</div>
 
-		<MessageInput
+<MessageInput
 	bind:files
 	bind:prompt
 	bind:autoScroll
-			suggestionPrompts={selectedModelfile?.suggestionPrompts ?? $config.default_prompt_suggestions}
+	bind:selectedModel={atSelectedModel}
 	{messages}
 	{submitPrompt}
 	{stopResponse}
-		/>
-	</div>
-</div>
+/>

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

@@ -18,6 +18,7 @@
 	import ChatBubbles from '$lib/components/icons/ChatBubbles.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import UserChatsModal from '$lib/components/admin/UserChatsModal.svelte';
+	import AddUserModal from '$lib/components/admin/AddUserModal.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -30,6 +31,7 @@
 	let page = 1;
 
 	let showSettingsModal = false;
+	let showAddUserModal = false;
 
 	let showUserChatsModal = false;
 	let showEditUserModal = false;
@@ -91,6 +93,12 @@
 	/>
 {/key}
 
+<AddUserModal
+	bind:show={showAddUserModal}
+	on:save={async () => {
+		users = await getUsers(localStorage.token);
+	}}
+/>
 <UserChatsModal bind:show={showUserChatsModal} user={selectedUser} />
 <SettingsModal bind:show={showSettingsModal} />
 
@@ -100,12 +108,13 @@
 			<div class=" mx-auto w-full">
 				<div class="w-full">
 					<div class=" flex flex-col justify-center">
-						<div class=" px-5 pt-3">
+						<div class=" px-6 pt-4">
 							<div class=" flex justify-between items-center">
 								<div class="flex items-center text-2xl font-semibold">Dashboard</div>
 								<div>
+									<Tooltip content={$i18n.t('Admin Settings')}>
 										<button
-										class="flex 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 transition"
+											class="flex items-center space-x-1 p-2 md:px-3 md:py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition"
 											type="button"
 											on:click={() => {
 												showSettingsModal = !showSettingsModal;
@@ -124,21 +133,22 @@
 												/>
 											</svg>
 
-										<div class=" text-xs">{$i18n.t('Admin Settings')}</div>
+											<div class="hidden md:inline text-xs">{$i18n.t('Admin Settings')}</div>
 										</button>
+									</Tooltip>
 								</div>
 							</div>
 						</div>
 
-						<div class="px-5 flex text-sm gap-2.5">
+						<div class="px-6 flex text-sm gap-2.5">
 							<div class="py-3 border-b font-medium text-gray-100 cursor-pointer">Overview</div>
 							<!-- <div class="py-3 text-gray-300 cursor-pointer">Users</div> -->
 						</div>
 
 						<hr class=" mb-3 dark:border-gray-800" />
 
-						<div class="px-5">
-							<div class="mt-0.5 mb-3 flex justify-between">
+						<div class="px-6">
+							<div class="mt-0.5 mb-3 gap-1 flex flex-col md:flex-row justify-between">
 								<div class="flex text-lg font-medium px-0.5">
 									{$i18n.t('All Users')}
 									<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-200 dark:bg-gray-700" />
@@ -147,12 +157,34 @@
 									>
 								</div>
 
-								<div class="">
+								<div class="flex gap-1">
 									<input
-										class=" w-60 rounded-lg py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
+										class="w-full md:w-60 rounded-xl py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
 										placeholder={$i18n.t('Search')}
 										bind:value={search}
 									/>
+
+									<div>
+										<Tooltip content="Add User">
+											<button
+												class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition font-medium text-sm flex items-center space-x-1"
+												on:click={() => {
+													showAddUserModal = !showAddUserModal;
+												}}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 16 16"
+													fill="currentColor"
+													class="w-4 h-4"
+												>
+													<path
+														d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
+													/>
+												</svg>
+											</button>
+										</Tooltip>
+									</div>
 								</div>
 							</div>
 
@@ -235,6 +267,7 @@
 
 												<td class="px-3 py-2 text-right">
 													<div class="flex justify-end w-full">
+														{#if user.role !== 'admin'}
 															<Tooltip content="Chats">
 																<button
 																	class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
@@ -247,7 +280,7 @@
 																</button>
 															</Tooltip>
 
-														<Tooltip content="Edit User">
+															<Tooltip content={$i18n.t('Edit User')}>
 																<button
 																	class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
 																	on:click={async () => {
@@ -272,7 +305,7 @@
 																</button>
 															</Tooltip>
 
-														<Tooltip content="Delete User">
+															<Tooltip content={$i18n.t('Delete User')}>
 																<button
 																	class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
 																	on:click={async () => {
@@ -295,6 +328,7 @@
 																	</svg>
 																</button>
 															</Tooltip>
+														{/if}
 													</div>
 												</td>
 											</tr>

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

@@ -345,7 +345,7 @@
 										// await chats.set(await getChatListByTagName(localStorage.token, tag.name));
 									}}
 								>
-									<div class=" text-xs font-medium self-center line-clamp-1">{$i18n.t('add tags')}</div>
+									<div class=" text-xs font-medium self-center line-clamp-1">add tags</div>
 								</button> -->
 
 								<button

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

@@ -316,7 +316,7 @@
 						</div>
 					</div>
 
-					<div class="flex flex-col gap-1 px-1 w-full">
+					<div class="flex flex-col gap-1 w-full">
 						<div class="flex w-full">
 							<div class="overflow-hidden w-full">
 								<div class="max-w-full">
@@ -330,6 +330,7 @@
 												info: model
 											}))}
 										bind:value={selectedModelId}
+										className="max-w-2xl"
 									/>
 								</div>
 							</div>