From 83a617817ae56e117d32852a5cef5e256be21e9e Mon Sep 17 00:00:00 2001
From: Luca Gutzeit <luca.gutzeit@bertrandt-development.com>
Date: Mon, 31 Mar 2025 11:17:36 +0200
Subject: [PATCH] Show images in settings for prompt suggestions

---
 .../admin/Settings/Interface.svelte           | 27 +++++++++++++------
 .../workspace/Models/ModelEditor.svelte       | 12 +++++++++
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/admin/Settings/Interface.svelte b/src/lib/components/admin/Settings/Interface.svelte
index e3542475e..191190de7 100644
--- a/src/lib/components/admin/Settings/Interface.svelte
+++ b/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
-											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"
-											placeholder={$i18n.t(
-												'Prompt (e.g. Tell me a fun fact about the Roman Empire)'
-											)}
-											rows="3"
-											bind:value={prompt.content}
-										/>
+											{#if prompt.imageUrl && prompt.image !== ''}
+												<Image
+													src={prompt.imageUrl}
+													alt="suggestion"
+													className="outline-hidden focus:outline-hidden"
+													imageClassName="min-w-14 size-14 rounded-xl object-cover"
+												/>
+											{/if}
+										</div>
 									</div>
 
 									<button
diff --git a/src/lib/components/workspace/Models/ModelEditor.svelte b/src/lib/components/workspace/Models/ModelEditor.svelte
index 170c37f22..142ffe014 100644
--- a/src/lib/components/workspace/Models/ModelEditor.svelte
+++ b/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';
@@ -657,6 +658,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"