Emil_Shanaty/open-webui-ai4me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'open-webui:main' into system-prompt-resizing

Browse Source
This commit is contained in:
Classic298
2025-06-16 21:11:21 +02:00
committed by GitHub
parent 9f936a0c19 b5f4c85bb1
commit beb1f3f7fd
153 changed files with 8216 additions and 3021 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/Settings/About.svelte
+1 -1
View File
@@ -42,7 +42,7 @@
});
</script>
<div class="flex flex-col h-full justify-between space-y-3 text-sm mb-6">
<div id="tab-about" class="flex flex-col h-full justify-between space-y-3 text-sm mb-6">
<div class=" space-y-3 overflow-y-scroll max-h-[28rem] lg:max-h-full">
<div>
<div class=" mb-2.5 text-sm font-medium flex space-x-2 items-center">
src/lib/components/chat/Settings/Account.svelte
+1 -1
View File
@@ -86,7 +86,7 @@
});
</script>
<div class="flex flex-col h-full justify-between text-sm">
<div id="tab-account" class="flex flex-col h-full justify-between text-sm">
<div class=" overflow-y-scroll max-h-[28rem] lg:max-h-full">
<input
id="profile-image-input"
src/lib/components/chat/Settings/Advanced/AdvancedParams.svelte
+1 -1
View File
@@ -91,7 +91,7 @@
<div>
<Tooltip
content={$i18n.t(
'Default mode works with a wider range of models by calling tools once before execution. Native mode leverages the model’s built-in tool-calling capabilities, but requires the model to inherently support this feature.'
"Default mode works with a wider range of models by calling tools once before execution. Native mode leverages the model's built-in tool-calling capabilities, but requires the model to inherently support this feature."
)}
placement="top-start"
className="inline-tooltip"
src/lib/components/chat/Settings/Audio.svelte
+1
View File
@@ -154,6 +154,7 @@
</script>
<form
id="tab-audio"
class="flex flex-col h-full justify-between space-y-3 text-sm"
on:submit|preventDefault={async () => {
saveSettings({
src/lib/components/chat/Settings/Chats.svelte
+1 -1
View File
@@ -107,7 +107,7 @@
<ArchivedChatsModal bind:show={showArchivedChatsModal} onUpdate={handleArchivedChatsChange} />
<div class="flex flex-col h-full justify-between space-y-3 text-sm">
<div id="tab-chats" class="flex flex-col h-full justify-between space-y-3 text-sm">
<div class=" space-y-2 overflow-y-scroll max-h-[28rem] lg:max-h-full">
<div class="flex flex-col">
<input
src/lib/components/chat/Settings/Connections.svelte
+6 -1
View File
@@ -70,6 +70,7 @@
<AddConnectionModal direct bind:show={showConnectionModal} onSubmit={addConnectionHandler} />
<form
id="tab-connections"
class="flex flex-col h-full justify-between text-sm"
on:submit|preventDefault={() => {
updateHandler();
@@ -126,7 +127,11 @@
</div>
<div class="my-1.5">
<div class="text-xs text-gray-500">
<div
class="text-xs {($settings?.highContrastMode ?? false)
? 'text-gray-800 dark:text-gray-100'
: 'text-gray-500'}"
>
{$i18n.t('Connect to your own OpenAI compatible API endpoints.')}
<br />
{$i18n.t(
src/lib/components/chat/Settings/Connections/Connection.svelte
+4 -2
View File
@@ -2,6 +2,7 @@
import { getContext, tick } from 'svelte';
const i18n = getContext('i18n');
import { settings } from '$lib/stores';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
import Cog6 from '$lib/components/icons/Cog6.svelte';
@@ -65,7 +66,7 @@
<div class="flex w-full gap-2">
<div class="flex-1 relative">
<input
class=" outline-hidden w-full bg-transparent {pipeline ? 'pr-8' : ''}"
class={`w-full bg-transparent ${($settings?.highContrastMode ?? false) ? '' : 'outline-hidden'} ${pipeline ? 'pr-8' : ''}`}
placeholder={$i18n.t('API Base URL')}
bind:value={url}
autocomplete="off"
@@ -73,7 +74,7 @@
</div>
<SensitiveInput
inputClassName=" outline-hidden bg-transparent w-full"
inputClassName="bg-transparent w-full"
placeholder={$i18n.t('API Key')}
bind:value={key}
/>
@@ -83,6 +84,7 @@
<div class="flex gap-1">
<Tooltip content={$i18n.t('Configure')} className="self-start">
<button
aria-label={$i18n.t('Open modal to configure connection')}
class="self-center p-1 bg-transparent hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 rounded-lg transition"
on:click={() => {
showConfigModal = true;
src/lib/components/chat/Settings/General.svelte
+10 -4
View File
@@ -187,7 +187,7 @@
};
</script>
<div class="flex flex-col h-full justify-between text-sm">
<div class="flex flex-col h-full justify-between text-sm" id="tab-general">
<div class=" overflow-y-scroll max-h-[28rem] lg:max-h-full">
<div class="">
<div class=" mb-1 text-sm font-medium">{$i18n.t('WebUI Settings')}</div>
@@ -196,7 +196,9 @@
<div class=" self-center text-xs font-medium">{$i18n.t('Theme')}</div>
<div class="flex items-center relative">
<select
class=" dark:bg-gray-900 w-fit pr-8 rounded-sm py-2 px-2 text-xs bg-transparent outline-hidden text-right"
class="dark:bg-gray-900 w-fit pr-8 rounded-sm py-2 px-2 text-xs bg-transparent text-right {$settings.highContrastMode
? ''
: 'outline-hidden'}"
bind:value={selectedTheme}
placeholder="Select a theme"
on:change={() => themeChangeHandler(selectedTheme)}
@@ -216,7 +218,9 @@
<div class=" self-center text-xs font-medium">{$i18n.t('Language')}</div>
<div class="flex items-center relative">
<select
class=" dark:bg-gray-900 w-fit pr-8 rounded-sm py-2 px-2 text-xs bg-transparent outline-hidden text-right"
class="dark:bg-gray-900 w-fit pr-8 rounded-sm py-2 px-2 text-xs bg-transparent text-right {$settings.highContrastMode
? ''
: 'outline-hidden'}"
bind:value={lang}
placeholder="Select a language"
on:change={(e) => {
@@ -263,7 +267,7 @@
</div>
</div>
{#if $user?.role === 'admin' || $user?.permissions.chat?.controls}
{#if $user?.role === 'admin' || ($user?.permissions.chat?.system_prompt ?? true)}
<hr class="border-gray-50 dark:border-gray-850 my-3" />
<div>
@@ -275,7 +279,9 @@
placeholder={$i18n.t('Enter system prompt here')}
/>
</div>
{/if}
{#if $user?.role === 'admin' || ($user?.permissions.chat?.controls ?? true)}
<div class="mt-2 space-y-3 pr-1.5">
<div class="flex justify-between items-center text-sm">
<div class=" font-medium">{$i18n.t('Advanced Parameters')}</div>
src/lib/components/chat/Settings/Interface.svelte
+104 -35
View File
@@ -348,6 +348,7 @@
</script>
<form
id="tab-interface"
class="flex flex-col h-full justify-between space-y-3 text-sm"
on:submit|preventDefault={() => {
updateInterfaceHandler();
@@ -384,15 +385,16 @@
<div class=" space-y-3 overflow-y-scroll max-h-[28rem] lg:max-h-full">
<div>
<div class=" mb-1.5 text-sm font-medium">{$i18n.t('UI')}</div>
<h1 class=" mb-1.5 text-sm font-medium">{$i18n.t('UI')}</h1>
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">
<div id="high-contrast-mode-label" class=" self-center text-xs">
{$i18n.t('High Contrast Mode')} ({$i18n.t('Beta')})
</div>
<button
aria-labelledby="high-contrast-mode-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleHighContrastMode();
@@ -410,9 +412,12 @@
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">{$i18n.t('Landing Page Mode')}</div>
<div id="landing-page-mode-label" class=" self-center text-xs">
{$i18n.t('Landing Page Mode')}
</div>
<button
aria-labelledby="landing-page-mode-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleLandingPageMode();
@@ -430,9 +435,12 @@
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">{$i18n.t('Chat Bubble UI')}</div>
<div id="chat-bubble-ui-label" class=" self-center text-xs">
{$i18n.t('Chat Bubble UI')}
</div>
<button
aria-labelledby="chat-bubble-ui-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleChatBubble();
@@ -451,11 +459,12 @@
{#if !$settings.chatBubble}
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">
<div id="chat-bubble-username-label" class=" self-center text-xs">
{$i18n.t('Display the username instead of You in the Chat')}
</div>
<button
aria-labelledby="chat-bubble-username-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleShowUsername();
@@ -474,13 +483,16 @@
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">{$i18n.t('Widescreen Mode')}</div>
<div id="widescreen-mode-label" class=" self-center text-xs">
{$i18n.t('Widescreen Mode')}
</div>
<button
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleWidescreenMode();
}}
aria-labelledby="widescreen-mode-label"
type="button"
>
{#if widescreenMode === true}
@@ -494,9 +506,12 @@
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">{$i18n.t('Chat direction')}</div>
<div id="chat-direction-label" class=" self-center text-xs">
{$i18n.t('Chat direction')}
</div>
<button
aria-labelledby="chat-direction-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={toggleChangeChatDirection}
type="button"
@@ -513,12 +528,13 @@
</div>
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">
<div class="py-0.5 flex w-full justify-between">
<div id="notification-sound-label" class=" self-center text-xs">
{$i18n.t('Notification Sound')}
</div>
<button
aria-labelledby="notification-sound-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleNotificationSound();
@@ -537,11 +553,12 @@
{#if notificationSound}
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">
<div id="play-notification-sound-label" class=" self-center text-xs">
{$i18n.t('Always Play Notification Sound')}
</div>
<button
aria-labelledby="play-notification-sound-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleNotificationSoundAlways();
@@ -561,11 +578,12 @@
{#if $user?.role === 'admin'}
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">
<div id="toast-notifications-label" class=" self-center text-xs">
{$i18n.t('Toast notifications for new updates')}
</div>
<button
aria-labelledby="toast-notifications-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleShowUpdateToast();
@@ -583,11 +601,12 @@
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">
<div id="whats-new-label" class=" self-center text-xs">
{$i18n.t(`Show "What's New" modal on login`)}
</div>
<button
aria-labelledby="whats-new-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleShowChangelog();
@@ -608,9 +627,12 @@
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">{$i18n.t('Title Auto-Generation')}</div>
<div id="auto-generation-label" class=" self-center text-xs">
{$i18n.t('Title Auto-Generation')}
</div>
<button
aria-labelledby="auto-generation-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleTitleAutoGenerate();
@@ -631,6 +653,7 @@
<div class=" self-center text-xs">{$i18n.t('Follow-Up Auto-Generation')}</div>
<button
aria-labelledby="auto-generation-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleAutoFollowUps();
@@ -648,9 +671,12 @@
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">{$i18n.t('Chat Tags Auto-Generation')}</div>
<div id="chat-tags-label" class=" self-center text-xs">
{$i18n.t('Chat Tags Auto-Generation')}
</div>
<button
aria-labelledby="chat-tags-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleAutoTags();
@@ -668,11 +694,12 @@
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">
<div id="detect-artifacts-label" class=" self-center text-xs">
{$i18n.t('Detect Artifacts Automatically')}
</div>
<button
aria-labelledby="detect-artifacts-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleDetectArtifacts();
@@ -690,11 +717,12 @@
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">
<div id="auto-copy-label" class=" self-center text-xs">
{$i18n.t('Auto-Copy Response to Clipboard')}
</div>
<button
aria-labelledby="auto-copy-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleResponseAutoCopy();
@@ -712,11 +740,12 @@
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">
<div id="rich-input-label" class=" self-center text-xs">
{$i18n.t('Rich Text Input for Chat')}
</div>
<button
aria-labelledby="rich-input-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleRichTextInput();
@@ -735,11 +764,12 @@
{#if $config?.features?.enable_autocomplete_generation && richTextInput}
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">
<div id="prompt-autocompletion-label" class=" self-center text-xs">
{$i18n.t('Prompt Autocompletion')}
</div>
<button
aria-labelledby="prompt-autocompletion-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
togglePromptAutocomplete();
@@ -758,11 +788,12 @@
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">
<div id="paste-large-label" class=" self-center text-xs">
{$i18n.t('Paste Large Text as File')}
</div>
<button
aria-labelledby="paste-large-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleLargeTextAsFile();
@@ -780,11 +811,12 @@
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">
<div id="copy-formatted-label" class=" self-center text-xs">
{$i18n.t('Copy Formatted Text')}
</div>
<button
aria-labelledby="copy-formatted-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleCopyFormatted();
@@ -802,9 +834,12 @@
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">{$i18n.t('Always Collapse Code Blocks')}</div>
<div id="always-collapse-label" class=" self-center text-xs">
{$i18n.t('Always Collapse Code Blocks')}
</div>
<button
aria-labelledby="always-collapse-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleCollapseCodeBlocks();
@@ -822,9 +857,12 @@
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">{$i18n.t('Always Expand Details')}</div>
<div id="always-expand-label" class=" self-center text-xs">
{$i18n.t('Always Expand Details')}
</div>
<button
aria-labelledby="always-expand-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleExpandDetails();
@@ -842,11 +880,12 @@
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">
<div id="chat-background-label" class=" self-center text-xs">
{$i18n.t('Chat Background Image')}
</div>
<button
aria-labelledby="chat-background-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
if (backgroundImageUrl !== null) {
@@ -868,10 +907,11 @@
</div>
<div>
<div class=" py-0.5 flex w-full justify-between">
<div id="allow-user-location-label" class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">{$i18n.t('Allow User Location')}</div>
<button
aria-labelledby="allow-user-location-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleUserLocation();
@@ -889,11 +929,12 @@
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">
<div id="haptic-feedback-label" class=" self-center text-xs">
{$i18n.t('Haptic Feedback')} ({$i18n.t('Android')})
</div>
<button
aria-labelledby="haptic-feedback-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleHapticFeedback();
@@ -911,11 +952,12 @@
<!-- <div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">
<div id="fluidly-stream-label" class=" self-center text-xs">
{$i18n.t('Fluidly stream large external response chunks')}
</div>
<button
aria-labelledby="fluidly-stream-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleSplitLargeChunks();
@@ -933,11 +975,12 @@
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">
<div id="enter-key-behavior-label" class=" self-center text-xs">
{$i18n.t('Enter Key Behavior')}
</div>
<button
aria-labelledby="enter-key-behavior-label"
class="p-1 px-3 text-xs flex rounded transition"
on:click={() => {
togglectrlEnterToSend();
@@ -955,11 +998,12 @@
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">
<div id="scroll-on-branch-change-label" class=" self-center text-xs">
{$i18n.t('Scroll On Branch Change')}
</div>
<button
aria-labelledby="scroll-on-branch-change-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
togglesScrollOnBranchChange();
@@ -977,9 +1021,12 @@
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">{$i18n.t('Web Search in Chat')}</div>
<div id="web-search-in-chat-label" class=" self-center text-xs">
{$i18n.t('Web Search in Chat')}
</div>
<button
aria-labelledby="web-search-in-chat-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleWebSearch();
@@ -997,9 +1044,12 @@
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">{$i18n.t('iframe Sandbox Allow Same Origin')}</div>
<div id="iframe-sandbox-allow-same-origin-label" class=" self-center text-xs">
{$i18n.t('iframe Sandbox Allow Same Origin')}
</div>
<button
aria-labelledby="iframe-sandbox-allow-same-origin-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleIframeSandboxAllowSameOrigin();
@@ -1017,9 +1067,12 @@
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">{$i18n.t('iframe Sandbox Allow Forms')}</div>
<div id="iframe-sandbox-allow-forms-label" class=" self-center text-xs">
{$i18n.t('iframe Sandbox Allow Forms')}
</div>
<button
aria-labelledby="iframe-sandbox-allow-forms-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleIframeSandboxAllowForms();
@@ -1037,11 +1090,12 @@
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">
<div id="stylized-pdf-export-label" class=" self-center text-xs">
{$i18n.t('Stylized PDF Export')}
</div>
<button
aria-labelledby="stylized-pdf-export-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleStylizedPdfExport();
@@ -1064,6 +1118,7 @@
<div class=" self-center text-xs">{$i18n.t('Allow Voice Interruption in Call')}</div>
<button
aria-labelledby="allow-voice-interruption-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleVoiceInterruption();
@@ -1081,9 +1136,12 @@
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">{$i18n.t('Display Emoji in Call')}</div>
<div id="display-emoji-label" class=" self-center text-xs">
{$i18n.t('Display Emoji in Call')}
</div>
<button
aria-labelledby="display-emoji-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleEmojiInCall();
@@ -1103,9 +1161,12 @@
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">{$i18n.t('Image Compression')}</div>
<div id="image-compression-label" class=" self-center text-xs">
{$i18n.t('Image Compression')}
</div>
<button
aria-labelledby="image-compression-label"
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
toggleImageCompression();
@@ -1124,9 +1185,14 @@
{#if imageCompression}
<div>
<div class=" py-0.5 flex w-full justify-between text-xs">
<div class=" self-center text-xs">{$i18n.t('Image Max Compression Size')}</div>
<div id="image-compression-size-label" class=" self-center text-xs">
{$i18n.t('Image Max Compression Size')}
</div>
<div>
<label class="sr-only" for="image-comp-width"
>{$i18n.t('Image Max Compression Size width')}</label
>
<input
bind:value={imageCompressionSize.width}
type="number"
@@ -1134,6 +1200,9 @@
min="0"
placeholder="Width"
/>x
<label class="sr-only" for="image-comp-height"
>{$i18n.t('Image Max Compression Size height')}</label
>
<input
bind:value={imageCompressionSize.height}
type="number"
src/lib/components/chat/Settings/Personalization.svelte
+1
View File
@@ -24,6 +24,7 @@
<ManageModal bind:show={showManageModal} />
<form
id="tab-personalization"
class="flex flex-col h-full justify-between space-y-3 text-sm"
on:submit|preventDefault={() => {
dispatch('save');
src/lib/components/chat/Settings/Tools.svelte
+6 -1
View File
@@ -42,6 +42,7 @@
<AddServerModal bind:show={showConnectionModal} onSubmit={addConnectionHandler} direct />
<form
id="tab-tools"
class="flex flex-col h-full justify-between text-sm"
on:submit|preventDefault={() => {
updateHandler();
@@ -60,6 +61,7 @@
<Tooltip content={$i18n.t(`Add Connection`)}>
<button
aria-label={$i18n.t(`Add Connection`)}
class="px-1"
on:click={() => {
showConnectionModal = true;
@@ -89,7 +91,10 @@
</div>
<div class="my-1.5">
<div class="text-xs text-gray-500">
<div
class={`text-xs
${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
>
{$i18n.t('Connect to your own OpenAPI compatible external tool servers.')}
<br />
{$i18n.t(