Merge pull request #3559 from open-webui/dev

0.3.8

src/routes/(app)/workspace/functions/create/+page.svelte

@@ -7,6 +7,8 @@
 	import { createNewFunction, getFunctions } from '$lib/apis/functions';
 	import FunctionEditor from '$lib/components/workspace/Functions/FunctionEditor.svelte';
 	import { getModels } from '$lib/apis';
+	import { compareVersion, extractFrontmatter } from '$lib/utils';
+	import { WEBUI_VERSION } from '$lib/constants';
 
 	const i18n = getContext('i18n');
 
@@ -16,6 +18,22 @@
 
 	const saveHandler = async (data) => {
 		console.log(data);
+
+		const manifest = extractFrontmatter(data.content);
+		if (compareVersion(manifest?.required_open_webui_version ?? '0.0.0', WEBUI_VERSION)) {
+			console.log('Version is lower than required');
+			toast.error(
+				$i18n.t(
+					'Open WebUI version (v{{OPEN_WEBUI_VERSION}}) is lower than required version (v{{REQUIRED_VERSION}})',
+					{
+						OPEN_WEBUI_VERSION: WEBUI_VERSION,
+						REQUIRED_VERSION: manifest?.required_open_webui_version ?? '0.0.0'
+					}
+				)
+			);
+			return;
+		}
+
 		const res = await createNewFunction(localStorage.token, {
 			id: data.id,
 			name: data.name,

src/routes/(app)/workspace/functions/edit/+page.svelte

@@ -10,6 +10,8 @@
 	import FunctionEditor from '$lib/components/workspace/Functions/FunctionEditor.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import { getModels } from '$lib/apis';
+	import { compareVersion, extractFrontmatter } from '$lib/utils';
+	import { WEBUI_VERSION } from '$lib/constants';
 
 	const i18n = getContext('i18n');
 
@@ -17,6 +19,22 @@
 
 	const saveHandler = async (data) => {
 		console.log(data);
+
+		const manifest = extractFrontmatter(data.content);
+		if (compareVersion(manifest?.required_open_webui_version ?? '0.0.0', WEBUI_VERSION)) {
+			console.log('Version is lower than required');
+			toast.error(
+				$i18n.t(
+					'Open WebUI version (v{{OPEN_WEBUI_VERSION}}) is lower than required version (v{{REQUIRED_VERSION}})',
+					{
+						OPEN_WEBUI_VERSION: WEBUI_VERSION,
+						REQUIRED_VERSION: manifest?.required_open_webui_version ?? '0.0.0'
+					}
+				)
+			);
+			return;
+		}
+
 		const res = await updateFunctionById(localStorage.token, func.id, {
 			id: data.id,
 			name: data.name,

src/routes/(app)/workspace/models/create/+page.svelte

@@ -136,7 +136,7 @@
 				...info,
 				meta: {
 					...info.meta,
-					profile_image_url: info.meta.profile_image_url ?? '/favicon.png',
+					profile_image_url: info.meta.profile_image_url ?? '/static/favicon.png',
 					suggestion_prompts: info.meta.suggestion_prompts
 						? info.meta.suggestion_prompts.filter((prompt) => prompt.content !== '')
 						: null

src/routes/(app)/workspace/models/edit/+page.svelte

@@ -46,7 +46,7 @@
 		base_model_id: null,
 		name: '',
 		meta: {
-			profile_image_url: '/favicon.png',
+			profile_image_url: '/static/favicon.png',
 			description: '',
 			suggestion_prompts: null,
 			tags: []
@@ -459,14 +459,14 @@
 							class="p-1 text-xs flex rounded transition"
 							type="button"
 							on:click={() => {
-								if (info.meta.suggestion_prompts === null) {
+								if ((info?.meta?.suggestion_prompts ?? null) === null) {
 									info.meta.suggestion_prompts = [{ content: '' }];
 								} else {
 									info.meta.suggestion_prompts = null;
 								}
 							}}
 						>
-							{#if info.meta.suggestion_prompts === null}
+							{#if (info?.meta?.suggestion_prompts ?? null) === null}
 								<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 							{:else}
 								<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
@@ -474,7 +474,7 @@
 						</button>
 					</div>
 
-					{#if info.meta.suggestion_prompts !== null}
+					{#if (info?.meta?.suggestion_prompts ?? null) !== null}
 						<button
 							class="p-1 px-2 text-xs flex rounded transition"
 							type="button"
@@ -501,7 +501,7 @@
 					{/if}
 				</div>
 
-				{#if info.meta.suggestion_prompts}
+				{#if info?.meta?.suggestion_prompts}
 					<div class="flex flex-col space-y-1 mt-2">
 						{#if info.meta.suggestion_prompts.length > 0}
 							{#each info.meta.suggestion_prompts as prompt, promptIdx}

src/routes/(app)/workspace/prompts/create/+page.svelte

@@ -137,7 +137,7 @@
 
 			<div class="flex items-center mb-1">
 				<div
-					class="bg-gray-200 dark:bg-gray-600 font-bold px-3 py-1 border border-r-0 dark:border-gray-600 rounded-l-lg"
+					class="bg-gray-200 dark:bg-gray-600 font-semibold px-3 py-1 border border-r-0 dark:border-gray-600 rounded-l-lg"
 				>
 					/
 				</div>

src/routes/(app)/workspace/prompts/edit/+page.svelte

@@ -123,7 +123,7 @@
 
 			<div class="flex items-center mb-1">
 				<div
-					class="bg-gray-200 dark:bg-gray-600 font-bold px-3 py-1 border border-r-0 dark:border-gray-600 rounded-l-lg"
+					class="bg-gray-200 dark:bg-gray-600 font-semibold px-3 py-1 border border-r-0 dark:border-gray-600 rounded-l-lg"
 				>
 					/
 				</div>

src/routes/(app)/workspace/tools/create/+page.svelte

@@ -2,7 +2,9 @@
 	import { goto } from '$app/navigation';
 	import { createNewTool, getTools } from '$lib/apis/tools';
 	import ToolkitEditor from '$lib/components/workspace/Tools/ToolkitEditor.svelte';
+	import { WEBUI_VERSION } from '$lib/constants';
 	import { tools } from '$lib/stores';
+	import { compareVersion, extractFrontmatter } from '$lib/utils';
 	import { onMount, getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 
@@ -14,6 +16,22 @@
 
 	const saveHandler = async (data) => {
 		console.log(data);
+
+		const manifest = extractFrontmatter(data.content);
+		if (compareVersion(manifest?.required_open_webui_version ?? '0.0.0', WEBUI_VERSION)) {
+			console.log('Version is lower than required');
+			toast.error(
+				$i18n.t(
+					'Open WebUI version (v{{OPEN_WEBUI_VERSION}}) is lower than required version (v{{REQUIRED_VERSION}})',
+					{
+						OPEN_WEBUI_VERSION: WEBUI_VERSION,
+						REQUIRED_VERSION: manifest?.required_open_webui_version ?? '0.0.0'
+					}
+				)
+			);
+			return;
+		}
+
 		const res = await createNewTool(localStorage.token, {
 			id: data.id,
 			name: data.name,

src/routes/(app)/workspace/tools/edit/+page.svelte

@@ -4,7 +4,9 @@
 	import { getToolById, getTools, updateToolById } from '$lib/apis/tools';
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import ToolkitEditor from '$lib/components/workspace/Tools/ToolkitEditor.svelte';
+	import { WEBUI_VERSION } from '$lib/constants';
 	import { tools } from '$lib/stores';
+	import { compareVersion, extractFrontmatter } from '$lib/utils';
 	import { onMount, getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 
@@ -14,6 +16,22 @@
 
 	const saveHandler = async (data) => {
 		console.log(data);
+
+		const manifest = extractFrontmatter(data.content);
+		if (compareVersion(manifest?.required_open_webui_version ?? '0.0.0', WEBUI_VERSION)) {
+			console.log('Version is lower than required');
+			toast.error(
+				$i18n.t(
+					'Open WebUI version (v{{OPEN_WEBUI_VERSION}}) is lower than required version (v{{REQUIRED_VERSION}})',
+					{
+						OPEN_WEBUI_VERSION: WEBUI_VERSION,
+						REQUIRED_VERSION: manifest?.required_open_webui_version ?? '0.0.0'
+					}
+				)
+			);
+			return;
+		}
+
 		const res = await updateToolById(localStorage.token, tool.id, {
 			id: data.id,
 			name: data.name,

src/routes/auth/+page.svelte

@@ -116,11 +116,11 @@
 		</div>
 	</div>
 
-	<div class=" bg-white dark:bg-gray-950 min-h-screen w-full flex justify-center font-mona">
+	<div class=" bg-white dark:bg-gray-950 min-h-screen w-full flex justify-center font-primary">
 		<!-- <div class="hidden lg:flex lg:flex-1 px-10 md:px-16 w-full bg-yellow-50 justify-center">
 			<div class=" my-auto pb-16 text-left">
 				<div>
-					<div class=" font-bold text-yellow-600 text-4xl">
+					<div class=" font-semibold text-yellow-600 text-4xl">
 						Get up and running with <br />large language models, locally.
 					</div>
 
@@ -135,7 +135,7 @@
 			{#if ($config?.features.auth_trusted_header ?? false) || $config?.features.auth === false}
 				<div class=" my-auto pb-10 w-full">
 					<div
-						class="flex items-center justify-center gap-3 text-xl sm:text-2xl text-center font-medium dark:text-gray-200"
+						class="flex items-center justify-center gap-3 text-xl sm:text-2xl text-center font-semibold dark:text-gray-200"
 					>
 						<div>
 							{$i18n.t('Signing in')}
@@ -346,7 +346,7 @@
 
 <style>
 	.font-mona {
-		font-family: 'Mona Sans', -apple-system, 'Arimo', ui-sans-serif, system-ui, 'Segoe UI', Roboto,
+		font-family: 'Mona Sans', -apple-system, 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto,
 			Ubuntu, Cantarell, 'Noto Sans', sans-serif, 'Helvetica Neue', Arial, 'Apple Color Emoji',
 			'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 	}

src/tailwind.css

@@ -5,9 +5,9 @@
 @layer base {
 	html,
 	pre {
-		font-family: -apple-system, 'Arimo', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Ubuntu,
-			Cantarell, 'Noto Sans', sans-serif, 'Helvetica Neue', Arial, 'Apple Color Emoji',
-			'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+		font-family: -apple-system, BlinkMacSystemFont, 'Inter', ui-sans-serif, system-ui, 'Segoe UI',
+			Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif, 'Helvetica Neue', Arial,
+			'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 	}
 
 	pre {

static/logo.svg

-<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="347.666" y="139" width="44.3349" height="221.675" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M202.643 360.287C263.75 360.287 313.287 310.75 313.287 249.643C313.287 188.537 263.75 139 202.643 139C141.537 139 92 188.537 92 249.643C92 310.75 141.537 360.287 202.643 360.287ZM202.645 316.029C239.309 316.029 269.031 286.307 269.031 249.643C269.031 212.979 239.309 183.257 202.645 183.257C165.981 183.257 136.259 212.979 136.259 249.643C136.259 286.307 165.981 316.029 202.645 316.029Z" fill="black"/>
-</svg>

tailwind.config.js

@@ -14,8 +14,8 @@ export default {
 					500: '#9b9b9b',
 					600: '#676767',
 					700: '#4e4e4e',
-					800: '#333',
-					850: '#262626',
+					800: 'var(--color-gray-800, #333)',
+					850: 'var(--color-gray-850, #262626)',
 					900: 'var(--color-gray-900, #171717)',
 					950: 'var(--color-gray-950, #0d0d0d)'
 				}