Merge pull request #5956 from open-webui/dev

0.3.32

CHANGELOG.md

@@ -5,6 +5,25 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.3.32] - 2024-10-06
+
+### Added
+
+- **🔢 Workspace Enhancements**: Added a display count for models, prompts, tools, and functions in the workspace, providing a clear overview and easier management.
+
+### Fixed
+
+- **🖥️ Web and YouTube Attachment Fix**: Resolved an issue where attaching web links and YouTube videos was malfunctioning, ensuring seamless integration and display within chats.
+- **📞 Call Mode Activation on Landing Page**: Fixed a bug where call mode was not operational from the landing page.
+
+### Changed
+
+- **🔄 URL Parameter Refinement**: Updated the 'tool_ids' URL parameter to 'tools' or 'tool-ids' for more intuitive and consistent user experience.
+- **🎨 Floating Buttons Styling Update**: Refactored the styling of floating buttons to intelligently adjust to the left side when there isn't enough room on the right, improving interface usability and aesthetic.
+- **🔧 Enhanced Accessibility for Floating Buttons**: Implemented the ability to close floating buttons with the 'Esc' key, making workflow smoother and more efficient for users navigating via keyboard.
+- **🖇️ Updated Information URL**: Information URLs now direct users to a general release page rather than a version-specific URL, ensuring access to the latest and relevant details all in one place.
+- **📦 Library Dependencies Update**: Upgraded dependencies to ensure compatibility and performance optimization for pip installs.
+
 ## [0.3.31] - 2024-10-06
 
 ### Added

backend/open_webui/apps/retrieval/main.py

@@ -923,15 +923,22 @@ def process_youtube_video(form_data: ProcessUrlForm, user=Depends(get_verified_u
             translation=app.state.YOUTUBE_LOADER_TRANSLATION,
         )
         docs = loader.load()
-        text_content = " ".join([doc.page_content for doc in docs])
-        log.debug(f"text_content: {text_content}")
+        content = " ".join([doc.page_content for doc in docs])
+        log.debug(f"text_content: {content}")
         save_docs_to_vector_db(docs, collection_name, overwrite=True)
 
         return {
             "status": True,
             "collection_name": collection_name,
             "filename": form_data.url,
-            "content": text_content,
+            "file": {
+                "data": {
+                    "content": content,
+                },
+                "meta": {
+                    "name": form_data.url,
+                },
+            },
         }
     except Exception as e:
         log.exception(e)
@@ -954,15 +961,22 @@ def process_web(form_data: ProcessUrlForm, user=Depends(get_verified_user)):
             requests_per_second=app.state.config.RAG_WEB_SEARCH_CONCURRENT_REQUESTS,
         )
         docs = loader.load()
-        text_content = " ".join([doc.page_content for doc in docs])
-        log.debug(f"text_content: {text_content}")
+        content = " ".join([doc.page_content for doc in docs])
+        log.debug(f"text_content: {content}")
         save_docs_to_vector_db(docs, collection_name, overwrite=True)
 
         return {
             "status": True,
             "collection_name": collection_name,
             "filename": form_data.url,
-            "content": text_content,
+            "file": {
+                "data": {
+                    "content": content,
+                },
+                "meta": {
+                    "name": form_data.url,
+                },
+            },
         }
     except Exception as e:
         log.exception(e)

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "open-webui",
-	"version": "0.3.31",
+	"version": "0.3.32",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "open-webui",
-			"version": "0.3.31",
+			"version": "0.3.32",
 			"dependencies": {
 				"@codemirror/lang-javascript": "^6.2.2",
 				"@codemirror/lang-python": "^6.1.6",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "open-webui",
-	"version": "0.3.31",
+	"version": "0.3.32",
 	"private": true,
 	"scripts": {
 		"dev": "npm run pyodide:fetch && vite dev --host",

pyproject.toml

@@ -8,7 +8,7 @@ license = { file = "LICENSE" }
 dependencies = [
     "fastapi==0.111.0",
     "uvicorn[standard]==0.30.6",
-    "pydantic==2.8.2",
+    "pydantic==2.9.2",
     "python-multipart==0.0.9",
 
     "Flask==3.0.3",
@@ -19,7 +19,7 @@ dependencies = [
     "passlib[bcrypt]==1.7.4",
 
     "requests==2.32.3",
-    "aiohttp==3.10.5",
+    "aiohttp==3.10.8",
 
     "sqlalchemy==2.0.32",
     "alembic==1.13.2",
@@ -43,7 +43,7 @@ dependencies = [
 
     "langchain==0.2.15",
     "langchain-community==0.2.12",
-    "langchain-chroma==0.1.2",
+    "langchain-chroma==0.1.4",
 
     "fake-useragent==1.5.1",
     "chromadb==0.5.9",
@@ -62,7 +62,7 @@ dependencies = [
     "nltk==3.9.1",
     "Markdown==3.7",
     "pypandoc==1.13",
-    "pandas==2.2.2",
+    "pandas==2.2.3",
     "openpyxl==3.1.5",
     "pyxlsb==1.0.10",
     "xlrd==2.0.1",
@@ -87,10 +87,10 @@ dependencies = [
 
     "extract_msg",
     "pydub",
-    "duckduckgo-search~=6.2.11",
+    "duckduckgo-search~=6.2.13",
 
     "docker~=7.1.0",
-    "pytest~=8.2.2",
+    "pytest~=8.3.2",
     "pytest-docker~=3.1.1"
 ]
 readme = "README.md"

src/lib/components/chat/Chat.svelte

@@ -352,12 +352,22 @@
 			webSearchEnabled = true;
 		}
 
-		if ($page.url.searchParams.get('q')) {
-			prompt = $page.url.searchParams.get('q') ?? '';
-			selectedToolIds = ($page.url.searchParams.get('tool_ids') ?? '')
-				.split(',')
+		if ($page.url.searchParams.get('tools')) {
+			selectedToolIds = $page.url.searchParams
+				.get('tools')
+				?.split(',')
 				.map((id) => id.trim())
 				.filter((id) => id);
+		} else if ($page.url.searchParams.get('tool-ids')) {
+			selectedToolIds = $page.url.searchParams
+				.get('tool-ids')
+				?.split(',')
+				.map((id) => id.trim())
+				.filter((id) => id);
+		}
+
+		if ($page.url.searchParams.get('q')) {
+			prompt = $page.url.searchParams.get('q') ?? '';
 
 			if (prompt) {
 				await tick();

src/lib/components/chat/ChatControls.svelte

@@ -83,7 +83,7 @@
 		document.removeEventListener('mouseup', onMouseUp);
 	});
 
-	$: if (!chatId) {
+	const closeHandler = () => {
 		showControls.set(false);
 		showOverview.set(false);
 		showArtifacts.set(false);
@@ -91,6 +91,10 @@
 		if ($showCallOverlay) {
 			showCallOverlay.set(false);
 		}
+	};
+
+	$: if (!chatId) {
+		closeHandler();
 	}
 </script>
 

src/lib/components/chat/MessageInput/Commands.svelte

@@ -34,7 +34,7 @@
 			type: 'doc',
 			name: url,
 			collection_name: '',
-			status: false,
+			status: 'uploading',
 			url: url,
 			error: ''
 		};
@@ -44,10 +44,10 @@
 			const res = await processWeb(localStorage.token, '', url);
 
 			if (res) {
-				fileItem.status = 'processed';
+				fileItem.status = 'uploaded';
 				fileItem.collection_name = res.collection_name;
 				fileItem.file = {
-					content: res.content,
+					...res.file,
 					...fileItem.file
 				};
 
@@ -67,7 +67,7 @@
 			type: 'doc',
 			name: url,
 			collection_name: '',
-			status: false,
+			status: 'uploading',
 			url: url,
 			error: ''
 		};
@@ -77,10 +77,10 @@
 			const res = await processYoutubeVideo(localStorage.token, url);
 
 			if (res) {
-				fileItem.status = 'processed';
+				fileItem.status = 'uploaded';
 				fileItem.collection_name = res.collection_name;
 				fileItem.file = {
-					content: res.content,
+					...res.file,
 					...fileItem.file
 				};
 				files = files;

src/lib/components/chat/Messages/ContentRenderer.svelte

@@ -36,26 +36,46 @@
 				const range = selection.getRangeAt(0);
 				const rect = range.getBoundingClientRect();
 
-				// Calculate position relative to the viewport (now that it's in document.body)
-				const top = rect.bottom + window.scrollY;
-				const left = rect.left + window.scrollX;
+				const parentRect = contentContainerElement.getBoundingClientRect();
+
+				// Adjust based on parent rect
+				const top = rect.bottom - parentRect.top;
+				const left = rect.left - parentRect.left;
 
 				if (buttonsContainerElement) {
 					buttonsContainerElement.style.display = 'block';
-					buttonsContainerElement.style.left = `${left}px`;
+
+					// Calculate space available on the right
+					const spaceOnRight = parentRect.width - (left + buttonsContainerElement.offsetWidth);
+
+					if (spaceOnRight < 0) {
+						// Not enough space on the right, position using 'right'
+						const right = parentRect.right - rect.right;
+						buttonsContainerElement.style.right = `${right}px`;
+						buttonsContainerElement.style.left = 'auto'; // Reset left
+					} else {
+						// Enough space, position using 'left'
+						buttonsContainerElement.style.left = `${left}px`;
+						buttonsContainerElement.style.right = 'auto'; // Reset right
+					}
+
 					buttonsContainerElement.style.top = `${top + 5}px`; // +5 to add some spacing
 				}
 			} else {
-				if (buttonsContainerElement) {
-					buttonsContainerElement.style.display = 'none';
-					selectedText = '';
-					floatingInput = false;
-					floatingInputValue = '';
-				}
+				closeFloatingButtons();
 			}
 		}, 0);
 	};
 
+	const closeFloatingButtons = () => {
+		if (buttonsContainerElement) {
+			buttonsContainerElement.style.display = 'none';
+			selectedText = '';
+			floatingInput = false;
+			floatingInputValue = '';
+		}
+	};
+
 	const selectAskHandler = () => {
 		dispatch('select', {
 			type: 'ask',
@@ -72,10 +92,17 @@
 		buttonsContainerElement.style.display = 'none';
 	};
 
+	const keydownHandler = (e) => {
+		if (e.key === 'Escape') {
+			closeFloatingButtons();
+		}
+	};
+
 	onMount(() => {
 		if (floatingButtons) {
 			contentContainerElement?.addEventListener('mouseup', updateButtonPosition);
 			document.addEventListener('mouseup', updateButtonPosition);
+			document.addEventListener('keydown', keydownHandler);
 		}
 	});
 
@@ -83,18 +110,7 @@
 		if (floatingButtons) {
 			contentContainerElement?.removeEventListener('mouseup', updateButtonPosition);
 			document.removeEventListener('mouseup', updateButtonPosition);
-		}
-	});
-
-	$: if (floatingButtons) {
-		if (buttonsContainerElement) {
-			document.body.appendChild(buttonsContainerElement);
-		}
-	}
-
-	onDestroy(() => {
-		if (buttonsContainerElement) {
-			document.body.removeChild(buttonsContainerElement);
+			document.removeEventListener('keydown', keydownHandler);
 		}
 	});
 </script>
@@ -131,7 +147,7 @@
 	>
 		{#if !floatingInput}
 			<div
-				class="flex flex-row gap-0.5 shrink-0 p-1 bg-white dark:bg-gray-850 dark:text-gray-100 text-medium shadow-xl"
+				class="flex flex-row gap-0.5 shrink-0 p-1 bg-white dark:bg-gray-850 dark:text-gray-100 text-medium rounded-lg shadow-xl"
 			>
 				<button
 					class="px-1 hover:bg-gray-50 dark:hover:bg-gray-800 rounded flex items-center gap-1 min-w-fit"

src/lib/components/layout/UpdateInfoToast.svelte

@@ -21,11 +21,7 @@
 			LATEST_VERSION: version.latest
 		})}
 
-		<a
-			href="https://github.com/open-webui/open-webui/releases/tag/v{version.latest}"
-			target="_blank"
-			class="underline"
-		>
+		<a href="https://github.com/open-webui/open-webui/releases" target="_blank" class="underline">
 			{$i18n.t('Update for the latest features and improvements.')}</a
 		>
 	</div>

src/lib/components/workspace/Functions.svelte

@@ -174,8 +174,14 @@
 	</title>
 </svelte:head>
 
-<div class="mb-3 flex justify-between items-center">
-	<div class=" text-lg font-semibold self-center">{$i18n.t('Functions')}</div>
+<div class="mb-3">
+	<div class="flex justify-between items-center">
+		<div class="flex md:self-center text-lg font-medium px-0.5">
+			{$i18n.t('Functions')}
+			<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-200 dark:bg-gray-700" />
+			<span class="text-lg font-medium text-gray-500 dark:text-gray-300">{$functions.length}</span>
+		</div>
+	</div>
 </div>
 
 <div class=" flex w-full space-x-2">
@@ -219,7 +225,7 @@
 		</a>
 	</div>
 </div>
-<hr class=" dark:border-gray-850 my-2.5" />
+<hr class=" border-gray-50 dark:border-gray-850 my-2.5" />
 
 <div class="my-3 mb-5">
 	{#each $functions.filter((f) => query === '' || f.name

src/lib/components/workspace/Models.svelte

@@ -294,7 +294,15 @@
 	}}
 />
 
-<div class=" text-lg font-semibold mb-3">{$i18n.t('Models')}</div>
+<div class="mb-3">
+	<div class="flex justify-between items-center">
+		<div class="flex md:self-center text-lg font-medium px-0.5">
+			{$i18n.t('Models')}
+			<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-200 dark:bg-gray-700" />
+			<span class="text-lg font-medium text-gray-500 dark:text-gray-300">{$models.length}</span>
+		</div>
+	</div>
+</div>
 
 <div class=" flex w-full space-x-2">
 	<div class="flex flex-1">
@@ -337,9 +345,10 @@
 		</a>
 	</div>
 </div>
-<hr class=" dark:border-gray-850 my-2.5" />
 
-<a class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-2" href="/workspace/models/create">
+<hr class=" border-gray-50 dark:border-gray-850 my-2.5" />
+
+<a class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-1" href="/workspace/models/create">
 	<div class=" self-center w-10 flex-shrink-0">
 		<div
 			class="w-full h-10 flex justify-center rounded-full bg-transparent dark:bg-gray-700 border border-dashed border-gray-200"
@@ -360,7 +369,7 @@
 	</div>
 </a>
 
-<hr class=" dark:border-gray-850" />
+<hr class=" border-gray-50 dark:border-gray-850 my-2.5" />
 
 <div class=" my-2 mb-5" id="model-list">
 	{#each _models.filter((m) => searchValue === '' || m.name

src/lib/components/workspace/Prompts.svelte

@@ -64,8 +64,14 @@
 	</title>
 </svelte:head>
 
-<div class="mb-3 flex justify-between items-center">
-	<div class=" text-lg font-semibold self-center">{$i18n.t('Prompts')}</div>
+<div class="mb-3">
+	<div class="flex justify-between items-center">
+		<div class="flex md:self-center text-lg font-medium px-0.5">
+			{$i18n.t('Prompts')}
+			<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-200 dark:bg-gray-700" />
+			<span class="text-lg font-medium text-gray-500 dark:text-gray-300">{$prompts.length}</span>
+		</div>
+	</div>
 </div>
 
 <div class=" flex w-full space-x-2">
@@ -109,7 +115,8 @@
 		</a>
 	</div>
 </div>
-<hr class=" dark:border-gray-850 my-2.5" />
+
+<hr class=" border-gray-50 dark:border-gray-850 my-2.5" />
 
 <div class="my-3 mb-5">
 	{#each $prompts.filter((p) => query === '' || p.command.includes(query)) as prompt}

src/lib/components/workspace/Tools.svelte

@@ -146,8 +146,14 @@
 	</title>
 </svelte:head>
 
-<div class="mb-3 flex justify-between items-center">
-	<div class=" text-lg font-semibold self-center">{$i18n.t('Tools')}</div>
+<div class="mb-3">
+	<div class="flex justify-between items-center">
+		<div class="flex md:self-center text-lg font-medium px-0.5">
+			{$i18n.t('Tools')}
+			<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-200 dark:bg-gray-700" />
+			<span class="text-lg font-medium text-gray-500 dark:text-gray-300">{$tools.length}</span>
+		</div>
+	</div>
 </div>
 
 <div class=" flex w-full space-x-2">
@@ -191,7 +197,8 @@
 		</a>
 	</div>
 </div>
-<hr class=" dark:border-gray-850 my-2.5" />
+
+<hr class=" border-gray-50 dark:border-gray-850 my-2.5" />
 
 <div class="my-3 mb-5">
 	{#each $tools.filter((t) => query === '' || t.name