Merge 83a617817a into e0ec2cdeb0

backend/open_webui/routers/configs.py

@@ -206,6 +206,7 @@ async def set_models_config(
 class PromptSuggestion(BaseModel):
     title: list[str]
     content: str
+    imageUrl: str = ""
 
 
 class SetDefaultSuggestionsForm(BaseModel):

src/lib/components/admin/Settings/Interface.svelte

@@ -15,6 +15,7 @@
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Switch from '$lib/components/common/Switch.svelte';
 	import Textarea from '$lib/components/common/Textarea.svelte';
+	import Image from '$lib/components/common/Image.svelte';
 
 	const dispatch = createEventDispatcher();
 
@@ -427,15 +428,25 @@
 												bind:value={prompt.title[1]}
 											/>
 										</div>
+										<div class="flex w-full">
+											<textarea
+												class="px-3 py-1.5 w-full text-xs bg-transparent outline-hidden border-r border-gray-100 dark:border-gray-850 resize-none"
+												placeholder={$i18n.t(
+													'Prompt (e.g. Tell me a fun fact about the Roman Empire)'
+												)}
+												rows="3"
+												bind:value={prompt.content}
+											/>
 
-										<textarea
+											{#if prompt.imageUrl && prompt.image !== ''}
-											class="px-3 py-1.5 text-xs w-full bg-transparent outline-hidden border-r border-gray-100 dark:border-gray-850 resize-none"
+												<Image
-											placeholder={$i18n.t(
+													src={prompt.imageUrl}
-												'Prompt (e.g. Tell me a fun fact about the Roman Empire)'
+													alt="suggestion"
-											)}
+													className="outline-hidden focus:outline-hidden"
-											rows="3"
+													imageClassName="min-w-14 size-14 rounded-xl object-cover"
-											bind:value={prompt.content}
+												/>
-										/>
+											{/if}
+										</div>
 									</div>
 
 									<button

src/lib/components/chat/Chat.svelte

@@ -2015,6 +2015,7 @@
 									bind:history
 									bind:autoScroll
 									bind:prompt
+									bind:files
 									{selectedModels}
 									{atSelectedModel}
 									{sendPrompt}

src/lib/components/chat/Messages.svelte

@@ -30,6 +30,7 @@
 	export let user = $_user;
 
 	export let prompt;
+	export let files = [];
 	export let history = {};
 	export let selectedModels;
 	export let atSelectedModel;
@@ -394,15 +395,22 @@
 			modelIds={selectedModels}
 			{atSelectedModel}
 			submitPrompt={async (p) => {
-				let text = p;
+				const {content, imageUrl} = p;
+				let text = content;
 
-				if (p.includes('{{CLIPBOARD}}')) {
+				if (content.includes('{{CLIPBOARD}}')) {
 					const clipboardText = await navigator.clipboard.readText().catch((err) => {
 						toast.error($i18n.t('Failed to read clipboard contents'));
 						return '{{CLIPBOARD}}';
 					});
 
-					text = p.replaceAll('{{CLIPBOARD}}', clipboardText);
+					text = content.replaceAll('{{CLIPBOARD}}', clipboardText);
+
+					console.log('Clipboard text:', clipboardText, text);
+				}
+				
+				if (imageUrl !== "") {
+					files = [{ type: 'image', url: imageUrl }]
 				}
 
 				prompt = text;

src/lib/components/chat/Placeholder.svelte

@@ -43,19 +43,24 @@
 	let models = [];
 
 	const selectSuggestionPrompt = async (p) => {
-		let text = p;
+		const {content, imageUrl} = p;
+		let text = content;
 
-		if (p.includes('{{CLIPBOARD}}')) {
+		if (content.includes('{{CLIPBOARD}}')) {
 			const clipboardText = await navigator.clipboard.readText().catch((err) => {
 				toast.error($i18n.t('Failed to read clipboard contents'));
 				return '{{CLIPBOARD}}';
 			});
 
-			text = p.replaceAll('{{CLIPBOARD}}', clipboardText);
+			text = content.replaceAll('{{CLIPBOARD}}', clipboardText);
 
 			console.log('Clipboard text:', clipboardText, text);
 		}
 		
+		if (imageUrl !== "") {
+			files = [{ type: 'image', url: imageUrl }]
+		}
+
 		prompt = text;
 
 		console.log(prompt);

src/lib/components/chat/Suggestions.svelte

@@ -5,6 +5,8 @@
 	import { WEBUI_NAME } from '$lib/stores';
 	import { WEBUI_VERSION } from '$lib/constants';
 
+	import Image from '../common/Image.svelte';
+
 	const i18n = getContext('i18n');
 	const dispatch = createEventDispatcher();
 
@@ -83,11 +85,11 @@
 	{#if filteredPrompts.length > 0}
 		{#each filteredPrompts as prompt, idx (prompt.id || prompt.content)}
 			<button
-				class="waterfall flex flex-col flex-1 shrink-0 w-full justify-between
+				class="waterfall flex flex-row flex-1 shrink-0 w-full justify-between
-				       px-3 py-2 rounded-xl bg-transparent hover:bg-black/5
+				       pl-3 pr-2 py-2 rounded-xl bg-transparent hover:bg-black/5
 				       dark:hover:bg-white/5 transition group"
 				style="animation-delay: {idx * 60}ms"
-				on:click={() => dispatch('select', prompt.content)}
+				on:click={() => dispatch('select', {content: prompt.content, imageUrl: prompt.imageUrl})}
 			>
 				<div class="flex flex-col text-left">
 					{#if prompt.title && prompt.title[0] !== ''}
@@ -108,6 +110,14 @@
 						<div class="text-xs text-gray-500 font-normal line-clamp-1">{$i18n.t('Prompt')}</div>
 					{/if}
 				</div>
+				{#if prompt.imageUrl && prompt.imageUrl !== ''}
+					<Image
+						src={prompt.imageUrl}
+						alt="input"
+						className="outline-hidden focus:outline-hidden pointer-events-none"
+						imageClassName=" size-10 rounded-lg object-cover"
+					/>
+				{/if}
 			</button>
 		{/each}
 	{/if}

src/lib/components/workspace/Models/ModelEditor.svelte

@@ -10,6 +10,7 @@
 	import ActionsSelector from '$lib/components/workspace/Models/ActionsSelector.svelte';
 	import Capabilities from '$lib/components/workspace/Models/Capabilities.svelte';
 	import Textarea from '$lib/components/common/Textarea.svelte';
+	import Image from '$lib/components/common/Image.svelte';
 	import { getTools } from '$lib/apis/tools';
 	import { getFunctions } from '$lib/apis/functions';
 	import { getKnowledgeBases } from '$lib/apis/knowledge';
@@ -661,6 +662,17 @@
 												bind:value={prompt.content}
 											/>
 
+											{#if prompt.imageUrl && prompt.image !== ''}
+												<Image
+													src={prompt.imageUrl}
+													alt="suggestion"
+													className="outline-hidden focus:outline-hidden"
+													imageClassName="min-w-10 size-10 rounded-xl object-cover"
+												/>
+											{/if}
+
+											<!-- TODO: Add way to upload an image (maybe files) -->
+
 											<button
 												class="px-2"
 												type="button"