From fa33c94944c0d99e854d1a443aa26f3b4d5980e0 Mon Sep 17 00:00:00 2001
From: u80861711 <diego.diaz@bit.admin.ch>
Date: Mon, 1 Sep 2025 17:11:16 +0200
Subject: [PATCH] use the configuration languages for all Title Models,
 Suggested Prompts and Banners. So this is now ready for translations globally

---
 backend/open_webui/utils/models.py            |   1 +
 .../admin/Settings/Interface.svelte           |   2 +-
 .../admin/Settings/Interface/Banners.svelte   | 298 +++++++++++++-----
 src/lib/components/common/Banner.svelte       |   4 +-
 .../workspace/Models/ModelEditor.svelte       | 169 +++++-----
 src/lib/i18n/index.ts                         |  66 ++++
 src/lib/stores/index.ts                       |   1 +
 7 files changed, 380 insertions(+), 161 deletions(-)

diff --git a/backend/open_webui/utils/models.py b/backend/open_webui/utils/models.py
index 6eb5d3f4b1..b53d71a181 100644
--- a/backend/open_webui/utils/models.py
+++ b/backend/open_webui/utils/models.py
@@ -233,6 +233,7 @@ async def get_all_models(request, refresh: bool = False, user: UserModel = None)
                 if "filterIds" in meta:
                     filter_ids.extend(meta["filterIds"])
 
+            custom_model.name = translate_model_title(custom_model.name, request.headers.get("X-Language"))
             models.append(
                 {
                     "id": f"{custom_model.id}",
diff --git a/src/lib/components/admin/Settings/Interface.svelte b/src/lib/components/admin/Settings/Interface.svelte
index 86507f7c08..4fe01b5e2e 100644
--- a/src/lib/components/admin/Settings/Interface.svelte
+++ b/src/lib/components/admin/Settings/Interface.svelte
@@ -408,7 +408,7 @@
 											id: uuidv4(),
 											type: '',
 											title: '',
-											content: '',
+											content: JSON.stringify({ de: '', en: '', fr: '', it: '' }),
 											dismissible: true,
 											timestamp: Math.floor(Date.now() / 1000)
 										}
diff --git a/src/lib/components/admin/Settings/Interface/Banners.svelte b/src/lib/components/admin/Settings/Interface/Banners.svelte
index 6b96374d5e..1456c18c80 100644
--- a/src/lib/components/admin/Settings/Interface/Banners.svelte
+++ b/src/lib/components/admin/Settings/Interface/Banners.svelte
@@ -1,102 +1,228 @@
 <script lang="ts">
-	import Switch from '$lib/components/common/Switch.svelte';
-	import Textarea from '$lib/components/common/Textarea.svelte';
-	import Tooltip from '$lib/components/common/Tooltip.svelte';
-	import EllipsisVertical from '$lib/components/icons/EllipsisVertical.svelte';
-	import XMark from '$lib/components/icons/XMark.svelte';
-	import Sortable from 'sortablejs';
-	import { getContext } from 'svelte';
-	const i18n = getContext('i18n');
+  import Switch from '$lib/components/common/Switch.svelte';
+  import Textarea from '$lib/components/common/Textarea.svelte';
+  import Tooltip from '$lib/components/common/Tooltip.svelte';
+  import EllipsisVertical from '$lib/components/icons/EllipsisVertical.svelte';
+  import XMark from '$lib/components/icons/XMark.svelte';
+  import PencilSolid from '$lib/components/icons/PencilSolid.svelte';
+  import Sortable from 'sortablejs';
+  import { getContext } from 'svelte';
+  import { config } from '$lib/stores';
 
-	export let banners = [];
+  const i18n = getContext('i18n');
 
-	let sortable = null;
-	let bannerListElement = null;
 
-	const positionChangeHandler = () => {
-		const bannerIdOrder = Array.from(bannerListElement.children).map((child) =>
-			child.id.replace('banner-item-', '')
-		);
+  export let banners: any[] = [];
 
-		// Sort the banners array based on the new order
-		banners = bannerIdOrder.map((id) => {
-			const index = banners.findIndex((banner) => banner.id === id);
-			return banners[index];
-		});
-	};
+  let sortable: any = null;
+  let bannerListElement: HTMLDivElement | null = null;
 
-	const classNames: Record<string, string> = {
-		info: 'bg-blue-500/20 text-blue-700 dark:text-blue-200 ',
-		success: 'bg-green-500/20 text-green-700 dark:text-green-200',
-		warning: 'bg-yellow-500/20 text-yellow-700 dark:text-yellow-200',
-		error: 'bg-red-500/20 text-red-700 dark:text-red-200'
-	};
+  // dynamic languages from config
+  $: LANGS = Array.isArray($config.features.translation_languages)
+    ? $config.features.translation_languages
+    : ['de']; // fallback if missing
 
-	$: if (banners) {
-		init();
-	}
+  // reactive UI language code
+  $: langCode = $i18n?.language?.split('-')[0] || 'de';
 
-	const init = () => {
-		if (sortable) {
-			sortable.destroy();
-		}
+  // contentObjs stores parsed content objects keyed by banner.id
+  let contentObjs: Record<string, Record<string, string>> = {};
 
-		if (bannerListElement) {
-			sortable = new Sortable(bannerListElement, {
-				animation: 150,
-				handle: '.item-handle',
-				onUpdate: async (event) => {
-					positionChangeHandler();
-				}
-			});
-		}
-	};
+  // Initialize/Sync contentObjs with banners
+  $: if (banners) {
+    for (const b of banners) {
+      if (!b) continue;
+      const id = b.id ?? (b.id = crypto?.randomUUID ? crypto.randomUUID() : String(Date.now()));
+      if (!contentObjs[id]) {
+        contentObjs[id] = parseContentToObj(b.content);
+      } else {
+        const currentString = safeStringify(contentObjs[id]);
+        const incomingString = typeof b.content === 'string'
+          ? b.content
+          : safeStringify(parseContentToObj(b.content));
+        if (incomingString !== currentString) {
+          contentObjs[id] = parseContentToObj(b.content);
+        }
+      }
+    }
+
+    // remove entries for banners that no longer exist
+    const ids = new Set(banners.map((b) => b.id));
+    for (const key of Object.keys(contentObjs)) {
+      if (!ids.has(key)) delete contentObjs[key];
+    }
+
+    initSortable();
+  }
+
+  function parseContentToObj(content: any) {
+    let parsed: Record<string, string> = {};
+    try {
+      parsed = typeof content === 'string' ? JSON.parse(content) : { ...content };
+    } catch {
+      parsed = { de: content || '' };
+    }
+
+    // ensure all languages from config exist
+    for (const lang of LANGS) {
+      if (parsed[lang] == null) parsed[lang] = '';
+    }
+    return parsed;
+  }
+
+  function safeStringify(obj: any) {
+    try { return JSON.stringify(obj); } 
+    catch { return '{}'; }
+  }
+
+  function initSortable() {
+    if (sortable) { try { sortable.destroy(); } catch {} sortable = null; }
+    if (bannerListElement) {
+      sortable = Sortable.create(bannerListElement, {
+        animation: 150,
+        handle: '.item-handle',
+        onUpdate: () => {
+          const order = Array.from(bannerListElement!.children)
+            .map(ch => (ch as HTMLElement).id.replace('banner-item-', ''));
+          banners = order.map(id => banners.find(b => b.id === id));
+        }
+      });
+    }
+  }
+
+  function handleInlineChange(e: any, idx: number, id: string) {
+    const val = e?.detail ?? e?.target?.value ?? '';
+    if (!contentObjs[id]) contentObjs[id] = Object.fromEntries(LANGS.map(l => [l, '']));
+    contentObjs[id][langCode] = val;
+    contentObjs = { ...contentObjs };
+    banners[idx].content = safeStringify(contentObjs[id]);
+    banners = [...banners];
+  }
+
+  let showBannerModal = false;
+  let editingBannerIndex: number | null = null;
+  let newBanner: { id: string; content: Record<string, string> } = { id: '', content: {} };
+
+  function openEditModal(idx: number) {
+    editingBannerIndex = idx;
+    const b = banners[idx];
+    if (!b) return;
+    const id = b.id;
+    if (!contentObjs[id]) contentObjs[id] = parseContentToObj(b.content);
+    newBanner = { id, content: { ...contentObjs[id] } };
+    showBannerModal = true;
+  }
+
+  function closeModal() {
+    showBannerModal = false;
+    editingBannerIndex = null;
+    newBanner = { id: '', content: Object.fromEntries(LANGS.map(l => [l, ''])) };
+  }
+
+  function saveModal() {
+    const any = Object.values(newBanner.content).some(v => v && v.trim() !== '');
+    if (!any) {
+      alert('At least one translation is required.');
+      return;
+    }
+
+    if (!newBanner.content.de?.trim()) {
+      const first = Object.values(newBanner.content).find(v => v.trim() !== '');
+      if (first) newBanner.content.de = first;
+    }
+
+    if (editingBannerIndex != null) {
+      banners[editingBannerIndex].content = safeStringify(newBanner.content);
+      contentObjs[newBanner.id] = { ...newBanner.content };
+      contentObjs = { ...contentObjs };
+      banners = [...banners];
+    }
+
+    closeModal();
+  }
 </script>
 
-<div class=" flex flex-col gap-3 {banners?.length > 0 ? 'mt-2' : ''}" bind:this={bannerListElement}>
-	{#each banners as banner, bannerIdx (banner.id)}
-		<div class=" flex justify-between items-start -ml-1" id="banner-item-{banner.id}">
-			<EllipsisVertical className="size-4 cursor-move item-handle" />
+<!-- Draggable banners -->
+<div class="flex flex-col gap-3 {banners?.length > 0 ? 'mt-2' : ''}" bind:this={bannerListElement}>
+  {#each banners as banner, bannerIdx (banner.id)}
+    <div class="flex justify-between items-start -ml-1" id={"banner-item-" + banner.id}>
+      <EllipsisVertical className="size-4 cursor-move item-handle" />
 
-			<div class="flex flex-row flex-1 gap-2 items-start">
-				<select
-					class="w-fit capitalize rounded-xl text-xs bg-transparent outline-hidden pl-1 pr-5"
-					bind:value={banner.type}
-					required
-				>
-					{#if banner.type == ''}
-						<option value="" selected disabled class="text-gray-900">{$i18n.t('Type')}</option>
-					{/if}
-					<option value="info" class="text-gray-900">{$i18n.t('Info')}</option>
-					<option value="warning" class="text-gray-900">{$i18n.t('Warning')}</option>
-					<option value="error" class="text-gray-900">{$i18n.t('Error')}</option>
-					<option value="success" class="text-gray-900">{$i18n.t('Success')}</option>
-				</select>
+      <div class="flex flex-row flex-1 gap-2 items-start">
+        <select
+          class="w-fit capitalize rounded-xl text-xs bg-transparent outline-hidden pl-1 pr-5"
+          bind:value={banner.type}
+          required
+        >
+          {#if banner.type == ''}
+            <option value="" selected disabled class="text-gray-900">{$i18n.t('Type')}</option>
+          {/if}
+          <option value="info" class="text-gray-900">{$i18n.t('Info')}</option>
+          <option value="warning" class="text-gray-900">{$i18n.t('Warning')}</option>
+          <option value="error" class="text-gray-900">{$i18n.t('Error')}</option>
+          <option value="success" class="text-gray-900">{$i18n.t('Success')}</option>
+        </select>
 
-				<Textarea
-					className="mr-2 text-xs w-full bg-transparent outline-hidden resize-none"
-					placeholder={$i18n.t('Content')}
-					bind:value={banner.content}
-					maxSize={100}
-				/>
+        <Textarea
+          className="mr-2 text-xs w-full bg-transparent outline-hidden resize-none"
+          placeholder={$i18n.t('Content')}
+          value={(contentObjs[banner.id]?.[langCode]) ?? ''}
+          on:input={(e) => handleInlineChange(e, bannerIdx, banner.id)}
+          maxSize={100}
+          readonly
+        />
 
-				<div class="relative -left-2">
-					<Tooltip content={$i18n.t('Remember Dismissal')} className="flex h-fit items-center">
-						<Switch bind:state={banner.dismissible} />
-					</Tooltip>
-				</div>
-			</div>
+        <div class="relative -left-2">
+          <Tooltip content={$i18n.t('Remember Dismissal')} class="flex h-fit items-center">
+            <Switch bind:state={banner.dismissible} />
+          </Tooltip>
+        </div>
+      </div>
 
-			<button
-				class="pr-3"
-				type="button"
-				on:click={() => {
-					banners.splice(bannerIdx, 1);
-					banners = banners;
-				}}
-			>
-				<XMark className={'size-4'} />
-			</button>
-		</div>
-	{/each}
+      <button class="p-1 text-gray-500 hover:text-yellow-600" type="button" on:click={() => openEditModal(bannerIdx)} title={$i18n.t('Edit')}>
+        <PencilSolid />
+      </button>
+
+      <button class="pr-3" type="button" on:click={() => { banners.splice(bannerIdx, 1); banners = banners; }}>
+        <XMark className={'size-4'} />
+      </button>
+    </div>
+  {/each}
 </div>
+
+<!-- Modal -->
+{#if showBannerModal}
+  <div class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
+    <div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow-md w-[90%] max-w-md">
+      <div class="flex justify-between dark:text-gray-300 pt-4 pb-1">
+        <h2 class="text-sm font-bold mb-2">{$i18n.t('Edit Translations')}</h2>
+        <button class="text-xs px-2 py-1" on:click={closeModal}>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+            <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22z"/>
+          </svg>
+        </button>
+      </div>
+
+      {#each LANGS as lang}
+        <div class="mb-2">
+          <label class="text-xs font-semibold block mb-1">{lang.toUpperCase()}</label>
+          <Textarea
+            class="w-full text-sm p-1 border border-gray-300 dark:border-gray-700 rounded"
+            bind:value={newBanner.content[lang]}
+            placeholder={`Enter ${lang.toUpperCase()} content`}
+            maxSize={200}
+          />
+        </div>
+      {/each}
+
+      <div class="flex justify-end space-x-2 mt-3">
+        <button
+          class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
+          on:click={saveModal}
+        >
+          {$i18n.t('Save')}
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}
diff --git a/src/lib/components/common/Banner.svelte b/src/lib/components/common/Banner.svelte
index a79b8b42c3..e67af78ceb 100644
--- a/src/lib/components/common/Banner.svelte
+++ b/src/lib/components/common/Banner.svelte
@@ -5,6 +5,7 @@
 	import DOMPurify from 'dompurify';
 	import { marked } from 'marked';
 	import { WEBUI_BASE_URL } from '$lib/constants';
+	import { getLangCode, getTranslatedLabel } from '$lib/i18n';
 
 	const dispatch = createEventDispatcher();
 	const i18n = getContext('i18n');
@@ -41,6 +42,7 @@
 
 		console.log('Banner mounted:', banner);
 	});
+$: langCode = getLangCode($i18n.language, 'en');
 </script>
 
 {#if !dismissed}
@@ -100,7 +102,7 @@
 					{/if}
 				</div>
 				<div class="flex-1 text-xs text-gray-700 dark:text-white max-h-60 overflow-y-auto">
-					{@html marked.parse(DOMPurify.sanitize((banner?.content ?? '').replace(/\n/g, '<br>')))}
+					{@html marked.parse(DOMPurify.sanitize((getTranslatedLabel(banner?.content, langCode) ?? '').replace(/\n/g, '<br>')))}
 				</div>
 			</div>
 
diff --git a/src/lib/components/workspace/Models/ModelEditor.svelte b/src/lib/components/workspace/Models/ModelEditor.svelte
index c3344792f4..0999aa1642 100644
--- a/src/lib/components/workspace/Models/ModelEditor.svelte
+++ b/src/lib/components/workspace/Models/ModelEditor.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount, getContext, tick } from 'svelte';
-	import { models, tools, functions, knowledge as knowledgeCollections, user } from '$lib/stores';
+	import { models, tools, functions, knowledge as knowledgeCollections, user, config } from '$lib/stores';
 	import { WEBUI_BASE_URL } from '$lib/constants';
 
 	import AdvancedParams from '$lib/components/chat/Settings/Advanced/AdvancedParams.svelte';
@@ -306,32 +306,77 @@
 		it: ''
 	};
 
-	// Call this when the component loads with existing data
+	// Dynamic languages from config
+	$: LANGS = Array.isArray($config.features.translation_languages)
+		? $config.features.translation_languages
+		: ['de']; // fallback if missing
+
+	// Utility function to create empty translation object
+	function createEmptyTranslations() {
+		const translations = {};
+		LANGS.forEach(lang => {
+			translations[lang] = '';
+		});
+		return translations;
+	}
+
+	// Parse content to object with dynamic languages
+	function parseContentToObj(content) {
+		let parsed = {};
+		try {
+			parsed = typeof content === 'string' ? JSON.parse(content) : { ...content };
+		} catch {
+			parsed = { [LANGS[0] || 'de']: content || '' };
+		}
+		
+		// ensure all languages from config exist
+		for (const lang of LANGS) {
+			if (parsed[lang] == null) parsed[lang] = '';
+		}
+		return parsed;
+	}
+
+	// Call this when the component loads with existing data 
 	function initializeTitleTranslations(existingName) {
 		if (existingName) {
-			try {
-				// If existingName is already an object, use it directly
-				if (typeof existingName === 'object') {
-					titleTranslations = { de: '', en: '', fr: '', it: '', ...existingName };
-				} else {
-					// If it's a JSON string, parse it
-					const parsed = JSON.parse(existingName);
-					titleTranslations = { de: '', en: '', fr: '', it: '', ...parsed };
-				}
-			} catch (e) {
-				// If parsing fails, treat as a simple string and put it in the default language
-				titleTranslations = { de: existingName, en: '', fr: '', it: '' };
-			}
+			titleTranslations = parseContentToObj(existingName);
 		} else {
-			titleTranslations = { de: '', en: '', fr: '', it: '' };
+			titleTranslations = createEmptyTranslations();
 		}
 	}
 
+	// Get translated text with fallback logic
+	function getTranslatedText(translationObj, targetLang = langCode) {
+		if (!translationObj) return '';
+		
+		const parsed = parseContentToObj(translationObj);
+		
+		// Try target language first
+		if (parsed[targetLang] && parsed[targetLang].trim()) {
+			return parsed[targetLang];
+		}
+		
+		// Try German as fallback (if it exists in LANGS)
+		if (LANGS.includes('de') && parsed['de'] && parsed['de'].trim()) {
+			return parsed['de'];
+		}
+		
+		// Try first available language from LANGS
+		for (const lang of LANGS) {
+			if (parsed[lang] && parsed[lang].trim()) {
+				return parsed[lang];
+			}
+		}
+		
+		return '';
+	}
+
+	// Initialize when info.name changes
 	$: if (info?.name) {
 		initializeTitleTranslations(info.name);
 	}
 
-	// Keep info.name in sync as JSON string
+		// Keep info.name in sync as JSON string
 	$: info.name = JSON.stringify(titleTranslations);
 
 	// Function to get the JSON string for the backend
@@ -339,9 +384,12 @@
 		return JSON.stringify(titleTranslations);
 	}
 
-	// Function to get the display value for the current language
-	function getTitleDisplayValue(langCode) {
-		return titleTranslations[langCode] || titleTranslations.de || '';
+	// Initialize translation objects dynamically
+	$: if (LANGS.length > 0) {
+		// Initialize newPrompt if not already done
+		if (!newPrompt || Object.keys(newPrompt).length !== LANGS.length) {
+			newPrompt = createEmptyTranslations();
+		}
 	}
 </script>
 
@@ -677,27 +725,18 @@
 
 						<!-- MODAL: Full translation editor -->
 						{#if showTitleModal}
-							<div
-								class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50"
-							>
+							<div class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
 								<div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow-md w-[90%] max-w-md">
 									<div class="flex justify-between dark:text-gray-300 pt-4 pb-1 s--7fsHGLC475o">
 										<h2 class="text-sm font-bold mb-2">{$i18n.t('Edit Title Translations')}</h2>
 										<button class="text-xs px-2 py-1" on:click={() => (showTitleModal = false)}>
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												viewBox="0 0 20 20"
-												fill="currentColor"
-												class="w-4 h-4"
-											>
-												<path
-													d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
-												/>
+											<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+												<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
 											</svg>
 										</button>
 									</div>
-
-									{#each Object.keys(titleTranslations) as lang}
+								
+									{#each LANGS as lang}
 										<div class="mb-2">
 											<label class="text-xs font-semibold block mb-1">{lang.toUpperCase()}</label>
 											<input
@@ -890,19 +929,12 @@
 										type="button"
 										on:click={() => {
 											editingIndex = null;
-											newPrompt = { de: '', en: '', fr: '', it: '' };
+											newPrompt = createEmptyTranslations(); // Changed: use dynamic function
 											showPromptModal = true;
 										}}
 									>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											viewBox="0 0 20 20"
-											fill="currentColor"
-											class="w-4 h-4"
-										>
-											<path
-												d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
-											/>
+										<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+											<path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
 										</svg>
 									</button>
 								{/if}
@@ -916,24 +948,24 @@
 												<input
 													class="text-sm w-full bg-transparent outline-none border border-gray-200 dark:border-gray-800 rounded px-2 py-1"
 													readonly
-													value={prompt.content?.[langCode] || prompt.content?.de || ''}
+													value={prompt.content?.[langCode] || prompt.content?.[LANGS[0]] || ''}
 												/>
-
+											
 												<button
 													class="p-1 text-gray-500 hover:text-yellow-600"
 													type="button"
 													on:click={() => {
 														editingIndex = promptIdx;
-														newPrompt = { ...prompt.content };
+														newPrompt = parseContentToObj(prompt.content); // Changed: use parseContentToObj
 														showPromptModal = true;
 													}}
 													title="Edit"
 												>
 													<div class=" self-center mr-2">
 														<PencilSolid />
-													</div></button
-												>
-
+													</div>
+												</button>
+											
 												<button
 													class="text-xs px-2 py-1 bg-red-200 hover:bg-red-300 rounded"
 													type="button"
@@ -952,12 +984,10 @@
 								</div>
 							{/if}
 						</div>
-
+					
 						<!-- MODAL for adding/editing prompt translations -->
 						{#if showPromptModal}
-							<div
-								class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50"
-							>
+							<div class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
 								<div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow-md w-[90%] max-w-md">
 									<div class="flex justify-between dark:text-gray-300 pt-4 pb-1 s--7fsHGLC475o">
 										<h2 class="text-sm font-bold mb-2">
@@ -970,39 +1000,33 @@
 											on:click={() => {
 												showPromptModal = false;
 												editingIndex = null;
-												newPrompt = { de: '', en: '', fr: '', it: '' };
+												newPrompt = createEmptyTranslations(); // Changed: use dynamic function
 											}}
 										>
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												viewBox="0 0 20 20"
-												fill="currentColor"
-												class="w-4 h-4"
-											>
-												<path
-													d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
-												/>
+											<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+												<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
 											</svg>
 										</button>
 									</div>
-
-									{#each Object.keys(newPrompt) as lang}
+								
+									{#each LANGS as lang}
 										<div class="mb-2">
 											<label class="text-xs font-semibold block mb-1">{lang.toUpperCase()}</label>
 											<input
 												class="w-full text-sm p-1 border border-gray-300 dark:border-gray-700 rounded"
-												value={newPrompt[lang]}
+												value={newPrompt[lang] || ''}
 												on:input={(e) => (newPrompt[lang] = e.target.value)}
 												placeholder={`Enter ${lang.toUpperCase()} translation`}
 											/>
 										</div>
 									{/each}
-
+									
 									<div class="flex justify-end space-x-2 mt-3">
 										<button
 											class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
 											on:click={() => {
-												if (newPrompt.de.trim()) {
+												const firstLang = LANGS[0] || 'de';
+												if (newPrompt[firstLang]?.trim()) {
 													if (editingIndex === null) {
 														info.meta.suggestion_prompts = [
 															...(info.meta.suggestion_prompts ?? []),
@@ -1013,13 +1037,12 @@
 														info.meta.suggestion_prompts = [...info.meta.suggestion_prompts];
 													}
 													showPromptModal = false;
-													newPrompt = { de: '', en: '', fr: '', it: '' };
+													newPrompt = createEmptyTranslations(); // Changed: use dynamic function
 													editingIndex = null;
 												} else {
-													alert('German translation is required.');
+													alert(`${firstLang.toUpperCase()} translation is required.`); // Changed: dynamic language
 												}
-											}}>{editingIndex === null ? 'Add' : 'Save'}</button
-										>
+											}}>{editingIndex === null ? 'Add' : 'Save'}</button>
 									</div>
 								</div>
 							</div>
diff --git a/src/lib/i18n/index.ts b/src/lib/i18n/index.ts
index ccfa3a25b6..28e627f9d7 100644
--- a/src/lib/i18n/index.ts
+++ b/src/lib/i18n/index.ts
@@ -114,3 +114,69 @@ export function initI18nContext() {
 // ---- exports ----
 export const isLoading = createIsLoadingStore(i18next);
 export default getI18nStore();
+
+// Utils for translations
+export interface Translations {
+  [key: string]: string;
+}
+
+/**
+ * Extracts the language code from a locale string (e.g., 'en-US' -> 'en')
+ * @param language - Full language code (e.g., 'en-US', 'es-ES')
+ * @param fallback - Default language code if parsing fails
+ * @returns Language code (e.g., 'en', 'es', 'de')
+ */
+export function getLangCode(language?: string, fallback: string = 'de'): string {
+  return language?.split('-')[0] || fallback;
+}
+
+/**
+ * Gets translated label from translation object or JSON string
+ * @param label - Translation object or JSON string containing translations
+ * @param langCode - Target language code (e.g., 'en', 'es', 'de')
+ * @returns Translated string or empty string if not found
+ */
+export function getTranslatedLabel(
+  label: string | Translations | null | undefined, 
+  langCode: string
+): string {
+  if (!label) return '';
+
+  try {
+    // If it's already an object, use it directly
+    const translations: Translations = typeof label === 'object' ? label : JSON.parse(label);
+    
+    return (
+      translations[langCode] ||
+      translations.en ||
+      translations.de ||
+      translations.fr ||
+      translations.it ||
+      ''
+    );
+  } catch (error) {
+    // Log parsing errors for debugging in development
+    if (process.env.NODE_ENV === 'development') {
+      console.warn('Failed to parse translation label:', label, error);
+    }
+    
+    // If parsing fails, return the original value if it's a string
+    return typeof label === 'string' ? label : '';
+  }
+}
+
+/**
+ * Convenience function that combines getLangCode and getTranslatedLabel
+ * @param label - Translation object or JSON string
+ * @param language - Full language code (e.g., 'en-US')
+ * @param fallback - Fallback language code
+ * @returns Translated string
+ */
+export function translate(
+  label: string | Translations | null | undefined,
+  language?: string,
+  fallback: string = 'de'
+): string {
+  const langCode = getLangCode(language, fallback);
+  return getTranslatedLabel(label, langCode);
+}
\ No newline at end of file
diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts
index 441d3ca681..b22dec97c1 100644
--- a/src/lib/stores/index.ts
+++ b/src/lib/stores/index.ts
@@ -260,6 +260,7 @@ type Config = {
 		enable_autocomplete_generation: boolean;
 		enable_direct_connections: boolean;
 		enable_version_update_check: boolean;
+		translation_languages: string[];
 	};
 	oauth: {
 		providers: {