starred/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-09-27 17:56:26 -04:00
Code Issues Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-09-12 19:23:27 -04:00
parent 15e2259a2a
commit daf2295932
3 changed files with 81 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/Settings/Connections.svelte
+27 -18
View File
@@ -9,7 +9,6 @@
import Tooltip from '$lib/components/common/Tooltip.svelte';
import Plus from '$lib/components/icons/Plus.svelte';
import Connection from './Connections/Connection.svelte';
import UserSettingSection from './UserSettingSection.svelte';
import AddConnectionModal from '$lib/components/AddConnectionModal.svelte';
@@ -75,17 +74,22 @@
>
<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Connections')}</h2>
<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
<div class="flex flex-1 min-h-0 flex-col overflow-y-auto scrollbar-hover pr-1.5">
{#if config !== null}
<UserSettingSection title={$i18n.t('Manage Direct Connections')} first>
<div class="flex items-center justify-between gap-2.5">
<div class="min-w-0 text-[0.6875rem] text-gray-400 dark:text-gray-600">
{$i18n.t('Connect to your own OpenAI compatible API endpoints.')}
<section class="space-y-3" aria-labelledby="direct-connections-heading">
<div class="flex items-start justify-between gap-3">
<div class="min-w-0">
<h3 id="direct-connections-heading" class="text-xs text-gray-600 dark:text-gray-400">
{$i18n.t('Direct Connections')}
</h3>
<p class="mt-1 text-[0.6875rem] leading-relaxed text-gray-400 dark:text-gray-600">
{$i18n.t('Connect to your own OpenAI compatible API endpoints.')}
</p>
</div>
<Tooltip content={$i18n.t(`Add Connection`)}>
<button
class="flex size-6 items-center justify-center rounded-lg text-gray-400 transition-colors hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-300"
class="flex size-7 shrink-0 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-black/5 hover:text-gray-900 dark:text-gray-600 dark:hover:bg-white/5 dark:hover:text-white"
aria-label={$i18n.t('Add Connection')}
on:click={() => {
showConnectionModal = true;
@@ -123,21 +127,26 @@
/>
{/each}
</div>
</section>
<div class="text-[0.6875rem] text-gray-400 dark:text-gray-600">
<!-- LICENSE covers this Open WebUI wordmark.
<div class="mt-6">
<div
class="space-y-3 border-t border-gray-100/50 pt-4 text-[0.6875rem] leading-relaxed text-gray-400 dark:border-white/[0.04] dark:text-gray-600"
>
<p>
{$i18n.t(
'Connections managed through the Admin Panel are recommended for everyday use. Direct connections provide convenient access to your own endpoints, but rely on your browser session to keep requests running, making them better suited to testing and temporary use.'
)}
</p>
<p>
<!-- LICENSE covers this Open WebUI wordmark.
Do not alter, remove, obscure, or replace it except as LICENSE permits:
https://docs.openwebui.com/license. -->
{$i18n.t(
'CORS must be properly configured by the provider to allow requests from Open WebUI.'
)}
{$i18n.t(
'CORS must be properly configured by the provider to allow requests from Open WebUI.'
)}
</p>
</div>
</UserSettingSection>
<div class="mt-4 text-[0.6875rem] text-gray-400 dark:text-gray-600">
{$i18n.t(
'Connections managed through the Admin Panel are recommended for everyday use. Direct connections provide convenient access to your own endpoints, but rely on your browser session to keep requests running, making them better suited to testing and temporary use.'
)}
</div>
{:else}
<div class="flex h-full justify-center">
src/lib/components/chat/Settings/Integrations.svelte
+36 -40
View File
@@ -14,7 +14,6 @@
import Plus from '$lib/components/icons/Plus.svelte';
import Connection from './Tools/Connection.svelte';
import Terminals from './Integrations/Terminals.svelte';
import UserSettingSection from './UserSettingSection.svelte';
import AddToolServerModal from '$lib/components/AddToolServerModal.svelte';
@@ -35,7 +34,6 @@
let servers: ToolServerConnection[] | null = null;
let terminalServerConfigs: TerminalServerConfig[] = [];
let showConnectionModal = false;
const helpTextClass = 'text-[0.6875rem] text-gray-400 dark:text-gray-600';
const addConnectionHandler = async (server: ToolServerConnection) => {
servers = [...(servers ?? []), server];
@@ -104,19 +102,24 @@
>
<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Integrations')}</h2>
<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
<div class="flex flex-1 min-h-0 flex-col overflow-y-auto scrollbar-hover pr-1.5">
{#if servers !== null}
<UserSettingSection title={$i18n.t('Tools')} first>
<section aria-labelledby="tool-servers-heading">
<div>
<div class="mb-2 flex items-center justify-between">
<div class="text-xs text-gray-600 dark:text-gray-400">
{$i18n.t('External Tool Servers')}
<div class="mb-3 flex items-start justify-between gap-3">
<div class="min-w-0">
<h3 id="tool-servers-heading" class="text-xs text-gray-600 dark:text-gray-400">
{$i18n.t('External Tool Servers')}
</h3>
<p class="mt-1 text-[0.6875rem] leading-relaxed text-gray-400 dark:text-gray-600">
{$i18n.t('Connect to your own OpenAPI compatible external tool servers.')}
</p>
</div>
<Tooltip content={$i18n.t('Add Connection')}>
<button
aria-label={$i18n.t('Add Connection')}
class="flex size-6 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-black/5 hover:text-gray-900 dark:text-gray-600 dark:hover:bg-white/5 dark:hover:text-white"
class="flex size-7 shrink-0 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-black/5 hover:text-gray-900 dark:text-gray-600 dark:hover:bg-white/5 dark:hover:text-white"
on:click={() => (showConnectionModal = true)}
type="button"
>
@@ -140,49 +143,42 @@
</div>
{#if (servers ?? []).length === 0}
<div class={helpTextClass}>
<div class="text-[0.6875rem] leading-relaxed text-gray-400 dark:text-gray-600">
{$i18n.t('No tool server connections configured.')}
</div>
{/if}
<div class="mt-1 {helpTextClass}">
{$i18n.t('Connect to your own OpenAPI compatible external tool servers.')}
</div>
<div class={helpTextClass}>
<a
class="mt-2 inline-block text-[0.6875rem] text-gray-500 underline decoration-gray-300 underline-offset-4 hover:text-gray-700 dark:text-gray-500 dark:decoration-gray-700 dark:hover:text-gray-300"
href="https://github.com/open-webui/openapi-servers"
target="_blank"
rel="noopener noreferrer">{$i18n.t('Learn more about OpenAPI tool servers.')} ↗</a
>
</div>
</section>
<section class="mt-6" aria-labelledby="terminal-connections-heading">
<Terminals bind:servers={terminalServerConfigs} onChange={() => updateHandler()} />
</section>
<div class="mt-6">
<div
class="space-y-3 border-t border-gray-100/50 pt-4 text-[0.6875rem] leading-relaxed text-gray-400 dark:border-white/[0.04] dark:text-gray-600"
>
<p>
{$i18n.t(
'Connections managed through the Admin Panel are recommended for everyday use. Direct connections provide convenient access to your own endpoints, but rely on your browser session to keep requests running, making them better suited to testing and temporary use.'
)}
</p>
<p>
<!-- LICENSE covers this Open WebUI wordmark.
Do not alter, remove, obscure, or replace it except as LICENSE permits:
https://docs.openwebui.com/license. -->
{$i18n.t(
'CORS must be properly configured by the provider to allow requests from Open WebUI.'
)}
<a
class="ml-1 text-gray-500 underline hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300"
href="https://github.com/open-webui/openapi-servers"
target="_blank">{$i18n.t('Learn more about OpenAPI tool servers.')} ↗</a
>
</div>
</p>
</div>
</UserSettingSection>
<UserSettingSection title={$i18n.t('Terminal')}>
<Terminals bind:servers={terminalServerConfigs} onChange={() => updateHandler()} />
<div class="mt-1 {helpTextClass}">
{$i18n.t(
'Connect to Open Terminal instances to browse files and use them as always-on tools. Only one can be active at a time.'
)}
</div>
<a
class="mt-0.5 block text-[0.6875rem] text-gray-500 underline hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300"
href="https://github.com/open-webui/open-terminal"
target="_blank">{$i18n.t('Learn more about Open Terminal')} ↗</a
>
</UserSettingSection>
<div class="mt-4 {helpTextClass}">
{$i18n.t(
'Connections managed through the Admin Panel are recommended for everyday use. Direct connections provide convenient access to your own endpoints, but rely on your browser session to keep requests running, making them better suited to testing and temporary use.'
)}
</div>
{:else}
<div class="flex h-full justify-center">
src/lib/components/chat/Settings/Integrations/Terminals.svelte
+18 -5
View File
@@ -57,13 +57,20 @@
/>
<div>
<div class="flex justify-between items-center mb-2">
<div class="flex items-center gap-2">
<div class="text-xs text-gray-600 dark:text-gray-400">{$i18n.t('Open Terminal')}</div>
<div class="flex justify-between items-start gap-3 mb-3">
<div class="min-w-0">
<h3 id="terminal-connections-heading" class="text-xs text-gray-600 dark:text-gray-400">
{$i18n.t('Open Terminal')}
</h3>
<p class="mt-1 text-[0.6875rem] leading-relaxed text-gray-400 dark:text-gray-600">
{$i18n.t(
'Connect to Open Terminal instances to browse files and use them as always-on tools. Only one can be active at a time.'
)}
</p>
</div>
<Tooltip content={$i18n.t('Add Connection')}>
<button
class="flex size-6 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-black/5 hover:text-gray-900 dark:text-gray-600 dark:hover:bg-white/5 dark:hover:text-white"
class="flex size-7 shrink-0 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-black/5 hover:text-gray-900 dark:text-gray-600 dark:hover:bg-white/5 dark:hover:text-white"
on:click={() => (showAddModal = true)}
type="button"
aria-label={$i18n.t('Add Connection')}
@@ -86,8 +93,14 @@
</div>
{#if servers.length === 0}
<div class="text-[0.6875rem] text-gray-400 dark:text-gray-600">
<div class="text-[0.6875rem] leading-relaxed text-gray-400 dark:text-gray-600">
{$i18n.t('No terminal connections configured.')}
</div>
{/if}
<a
class="mt-2 inline-block text-[0.6875rem] text-gray-500 underline decoration-gray-300 underline-offset-4 hover:text-gray-700 dark:text-gray-500 dark:decoration-gray-700 dark:hover:text-gray-300"
href="https://github.com/open-webui/open-terminal"
target="_blank"
rel="noopener noreferrer">{$i18n.t('Learn more about Open Terminal')} ↗</a
>
</div>