feat: experimental open terminal integration

src/lib/components/chat/Settings/Advanced/AdvancedParams.svelte

@@ -63,7 +63,7 @@
 			className="inline-tooltip"
 		>
 			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">
+				<div class=" self-center text-xs">
 					{$i18n.t('Stream Chat Response')}
 				</div>
 				<button
@@ -100,7 +100,7 @@
 				className="inline-tooltip"
 			>
 				<div class="flex w-full justify-between">
-					<div class=" self-center text-xs font-medium">
+					<div class=" self-center text-xs">
 						{$i18n.t('Stream Delta Chunk Size')}
 					</div>
 					<button
@@ -156,7 +156,7 @@
 			className="inline-tooltip"
 		>
 			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">
+				<div class=" self-center text-xs">
 					{$i18n.t('Function Calling')}
 				</div>
 				<button
@@ -185,7 +185,7 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">
+				<div class=" self-center text-xs">
 					{$i18n.t('Reasoning Tags')}
 				</div>
 				<button
@@ -250,7 +250,7 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">
+				<div class=" self-center text-xs">
 					{$i18n.t('Seed')}
 				</div>
 
@@ -295,7 +295,7 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">
+				<div class=" self-center text-xs">
 					{$i18n.t('Stop Sequence')}
 				</div>
 
@@ -339,7 +339,7 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">
+				<div class=" self-center text-xs">
 					{$i18n.t('Temperature')}
 				</div>
 				<button
@@ -394,7 +394,7 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">
+				<div class=" self-center text-xs">
 					{$i18n.t('Reasoning Effort')}
 				</div>
 				<button
@@ -437,7 +437,7 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">
+				<div class=" self-center text-xs">
 					{'logit_bias'}
 				</div>
 				<button
@@ -482,7 +482,7 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">
+				<div class=" self-center text-xs">
 					{'max_tokens'}
 				</div>
 
@@ -537,7 +537,7 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">
+				<div class=" self-center text-xs">
 					{'top_k'}
 				</div>
 				<button
@@ -592,7 +592,7 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">
+				<div class=" self-center text-xs">
 					{'top_p'}
 				</div>
 
@@ -648,7 +648,7 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">
+				<div class=" self-center text-xs">
 					{'min_p'}
 				</div>
 				<button
@@ -703,7 +703,7 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">
+				<div class=" self-center text-xs">
 					{'frequency_penalty'}
 				</div>
 
@@ -759,7 +759,7 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">
+				<div class=" self-center text-xs">
 					{'presence_penalty'}
 				</div>
 
@@ -813,7 +813,7 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">
+				<div class=" self-center text-xs">
 					{'mirostat'}
 				</div>
 				<button
@@ -868,7 +868,7 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">
+				<div class=" self-center text-xs">
 					{'mirostat_eta'}
 				</div>
 				<button
@@ -923,7 +923,7 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">
+				<div class=" self-center text-xs">
 					{'mirostat_tau'}
 				</div>
 
@@ -977,7 +977,7 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">
+				<div class=" self-center text-xs">
 					{'repeat_last_n'}
 				</div>
 
@@ -1033,7 +1033,7 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">
+				<div class=" self-center text-xs">
 					{'tfs_z'}
 				</div>
 
@@ -1089,7 +1089,7 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">
+				<div class=" self-center text-xs">
 					{'repeat_penalty'}
 				</div>
 
@@ -1146,7 +1146,7 @@
 				className="inline-tooltip"
 			>
 				<div class="flex w-full justify-between">
-					<div class=" self-center text-xs font-medium">
+					<div class=" self-center text-xs">
 						{'use_mmap'}
 					</div>
 					<button
@@ -1186,7 +1186,7 @@
 				className="inline-tooltip"
 			>
 				<div class="flex w-full justify-between">
-					<div class=" self-center text-xs font-medium">
+					<div class=" self-center text-xs">
 						{'use_mlock'}
 					</div>
 
@@ -1229,7 +1229,7 @@
 			className="inline-tooltip"
 		>
 			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">
+				<div class=" self-center text-xs">
 					{'think'} ({$i18n.t('Ollama')})
 				</div>
 				<button
@@ -1282,7 +1282,7 @@
 			className="inline-tooltip"
 		>
 			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">
+				<div class=" self-center text-xs">
 					{'format'} ({$i18n.t('Ollama')})
 				</div>
 				<button
@@ -1321,7 +1321,7 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">
+				<div class=" self-center text-xs">
 					{'num_keep'} ({$i18n.t('Ollama')})
 				</div>
 
@@ -1374,7 +1374,7 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">
+				<div class=" self-center text-xs">
 					{'num_ctx'} ({$i18n.t('Ollama')})
 				</div>
 
@@ -1429,7 +1429,7 @@
 			className="inline-tooltip"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">
+				<div class=" self-center text-xs">
 					{'num_batch'} ({$i18n.t('Ollama')})
 				</div>
 
@@ -1485,7 +1485,7 @@
 				className="inline-tooltip"
 			>
 				<div class="flex w-full justify-between">
-					<div class=" self-center text-xs font-medium">
+					<div class=" self-center text-xs">
 						{'num_thread'} ({$i18n.t('Ollama')})
 					</div>
 
@@ -1541,7 +1541,7 @@
 				className="inline-tooltip"
 			>
 				<div class="flex w-full justify-between">
-					<div class=" self-center text-xs font-medium">
+					<div class=" self-center text-xs">
 						{'num_gpu'} ({$i18n.t('Ollama')})
 					</div>
 
@@ -1597,7 +1597,7 @@
 				className="inline-tooltip"
 			>
 				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs font-medium">
+					<div class=" self-center text-xs">
 						{'keep_alive'} ({$i18n.t('Ollama')})
 					</div>
 					<button
@@ -1633,7 +1633,7 @@
 				{#each Object.keys(params?.custom_params ?? {}) as key}
 					<div class=" py-0.5 w-full justify-between mb-1">
 						<div class="flex w-full justify-between">
-							<div class=" self-center text-xs font-medium">
+							<div class=" self-center text-xs">
 								<input
 									type="text"
 									class=" text-xs w-full bg-transparent outline-none"

src/lib/components/chat/Settings/Integrations/Terminals.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	const i18n = getContext('i18n');
+
+	import Plus from '$lib/components/icons/Plus.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Connection from './Terminals/Connection.svelte';
+	import AddTerminalServerModal from '$lib/components/AddTerminalServerModal.svelte';
+
+	export let servers: {
+		url: string;
+		key: string;
+		name?: string;
+		path?: string;
+		enabled: boolean;
+	}[] = [];
+	export let onChange: (servers: typeof servers) => void = () => {};
+
+	let showAddModal = false;
+
+	const addServer = (server: (typeof servers)[0]) => {
+		servers = [...servers, server];
+		onChange(servers);
+	};
+
+	const enableServer = (idx: number) => {
+		servers = servers.map((s, i) => ({ ...s, enabled: i === idx }));
+		onChange(servers);
+	};
+
+	const updateServer = (idx: number, updated: (typeof servers)[0]) => {
+		servers = servers.map((s, i) => (i === idx ? updated : s));
+		onChange(servers);
+	};
+
+	const deleteServer = (idx: number) => {
+		servers = servers.filter((_, i) => i !== idx);
+		onChange(servers);
+	};
+</script>
+
+<AddTerminalServerModal bind:show={showAddModal} onSubmit={(server) => addServer(server)} />
+
+<div>
+	<div class="flex justify-between items-center mb-1">
+		<div class="flex items-center gap-2">
+			<div class="font-medium">{$i18n.t('Open Terminal')}</div>
+			<span
+				class="text-[0.65rem] font-medium uppercase px-1.5 py-0.5 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400"
+				>{$i18n.t('Experimental')}</span
+			>
+		</div>
+		<Tooltip content={$i18n.t('Add Connection')}>
+			<button
+				class="px-1"
+				on:click={() => (showAddModal = true)}
+				type="button"
+				aria-label={$i18n.t('Add Connection')}
+			>
+				<Plus />
+			</button>
+		</Tooltip>
+	</div>
+
+	<div class="flex flex-col gap-1.5">
+		{#each servers as server, idx}
+			<Connection
+				bind:connection={server}
+				onSubmit={(updated) => updateServer(idx, updated)}
+				onDelete={() => deleteServer(idx)}
+				onEnable={() => enableServer(idx)}
+			/>
+		{/each}
+	</div>
+
+	{#if servers.length === 0}
+		<div class="text-xs text-gray-400 dark:text-gray-500">
+			{$i18n.t('No terminal connections configured.')}
+			<a
+				href="https://github.com/open-webui/open-terminal"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="underline hover:text-gray-700 dark:hover:text-gray-200"
+			>
+				{$i18n.t('Learn more')} ↗
+			</a>
+		</div>
+	{/if}
+</div>

src/lib/components/chat/Settings/Integrations/Terminals/Connection.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	const i18n = getContext('i18n');
+
+	import Switch from '$lib/components/common/Switch.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Cog6 from '$lib/components/icons/Cog6.svelte';
+	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
+	import AddTerminalServerModal from '$lib/components/AddTerminalServerModal.svelte';
+	import Cloud from '$lib/components/icons/Cloud.svelte';
+
+	export let connection = { url: '', key: '', name: '', path: '/openapi.json', enabled: false };
+	export let onSubmit: (c: typeof connection) => void = () => {};
+	export let onDelete: () => void = () => {};
+	export let onEnable: () => void = () => {};
+
+	let showConfigModal = false;
+	let showDeleteConfirmDialog = false;
+</script>
+
+<AddTerminalServerModal
+	edit
+	bind:show={showConfigModal}
+	{connection}
+	onDelete={() => {
+		showDeleteConfirmDialog = true;
+	}}
+	onSubmit={(c) => {
+		connection = c;
+		onSubmit(c);
+	}}
+/>
+
+<ConfirmDialog
+	bind:show={showDeleteConfirmDialog}
+	on:confirm={() => {
+		onDelete();
+		showConfigModal = false;
+	}}
+/>
+
+<div class="flex w-full gap-2 items-center">
+	<Tooltip className="w-full relative" content={''} placement="top-start">
+		<div class="flex w-full">
+			<div
+				class="flex-1 relative flex gap-1.5 items-center {!connection.enabled ? 'opacity-50' : ''}"
+			>
+				<Tooltip content={$i18n.t('Terminal')}>
+					<Cloud className="size-4" strokeWidth="1.5" />
+				</Tooltip>
+
+				<div class="capitalize outline-hidden w-full bg-transparent text-sm">
+					{connection.name || connection.url || $i18n.t('New Terminal')}
+				</div>
+			</div>
+		</div>
+	</Tooltip>
+
+	<div class="flex gap-1 items-center">
+		<Tooltip content={$i18n.t('Configure')}>
+			<button
+				class="self-center p-1 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg transition"
+				on:click={() => {
+					showConfigModal = true;
+				}}
+				type="button"
+			>
+				<Cog6 />
+			</button>
+		</Tooltip>
+
+		<Tooltip content={connection.enabled ? $i18n.t('Enabled') : $i18n.t('Disabled')}>
+			<Switch state={connection.enabled} on:change={() => onEnable()} />
+		</Tooltip>
+	</div>
+</div>

src/lib/components/chat/Settings/Tools.svelte

@@ -1,24 +1,25 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
-	import { createEventDispatcher, onMount, getContext, tick } from 'svelte';
-	import { getModels as _getModels, getToolServersData } from '$lib/apis';
+	import { createEventDispatcher, onMount, getContext } from 'svelte';
+	import { getToolServersData } from '$lib/apis';
 
 	const dispatch = createEventDispatcher();
 	const i18n = getContext('i18n');
 
-	import { models, settings, toolServers, user } from '$lib/stores';
+	import { settings, toolServers, terminalServers } from '$lib/stores';
 
-	import Switch from '$lib/components/common/Switch.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Plus from '$lib/components/icons/Plus.svelte';
 	import Connection from './Tools/Connection.svelte';
+	import Terminals from './Integrations/Terminals.svelte';
 
 	import AddToolServerModal from '$lib/components/AddToolServerModal.svelte';
 
 	export let saveSettings: Function;
 
 	let servers = null;
+	let terminalServerConfigs: { url: string; key: string; name?: string; enabled: boolean }[] = [];
 	let showConnectionModal = false;
 
 	const addConnectionHandler = async (server) => {
@@ -28,27 +29,44 @@
 
 	const updateHandler = async () => {
 		await saveSettings({
-			toolServers: servers
+			toolServers: servers,
+			terminalServers: terminalServerConfigs
 		});
 
 		let toolServersData = await getToolServersData($settings?.toolServers ?? []);
 		toolServersData = toolServersData.filter((data) => {
 			if (data.error) {
 				toast.error(
-					$i18n.t(`Failed to connect to {{URL}} OpenAPI tool server`, {
-						URL: data?.url
-					})
+					$i18n.t(`Failed to connect to {{URL}} OpenAPI tool server`, { URL: data?.url })
 				);
 				return false;
 			}
-
 			return true;
 		});
 		toolServers.set(toolServersData);
+
+		// Refresh terminal servers store
+		const activeTerminals = terminalServerConfigs.filter((s) => s.enabled);
+		if (activeTerminals.length > 0) {
+			let terminalServersData = await getToolServersData(
+				activeTerminals.map((t) => ({
+					url: t.url,
+					auth_type: t.auth_type ?? 'bearer',
+					key: t.key ?? '',
+					path: t.path ?? '/openapi.json',
+					config: { enable: true }
+				}))
+			);
+			terminalServersData = terminalServersData.filter((data) => data && !data.error);
+			terminalServers.set(terminalServersData);
+		} else {
+			terminalServers.set([]);
+		}
 	};
 
 	onMount(async () => {
 		servers = $settings?.toolServers ?? [];
+		terminalServerConfigs = $settings?.terminalServers ?? [];
 	});
 </script>
 
@@ -61,24 +79,19 @@
 		updateHandler();
 	}}
 >
-	<div class=" overflow-y-scroll scrollbar-hidden h-full">
+	<div class="overflow-y-scroll scrollbar-hidden h-full">
 		{#if servers !== null}
-			<div class="">
+			<div>
 				<div class="pr-1.5">
-					<!-- {$i18n.t(`Failed to connect to {{URL}} OpenAPI tool server`, {
-						URL: 'server?.url'
-					})} -->
 					<div class="">
 						<div class="flex justify-between items-center mb-0.5">
 							<div class="font-medium">{$i18n.t('Manage Tool Servers')}</div>
 
-							<Tooltip content={$i18n.t(`Add Connection`)}>
+							<Tooltip content={$i18n.t('Add Connection')}>
 								<button
-									aria-label={$i18n.t(`Add Connection`)}
+									aria-label={$i18n.t('Add Connection')}
 									class="px-1"
-									on:click={() => {
-										showConnectionModal = true;
-									}}
+									on:click={() => (showConnectionModal = true)}
 									type="button"
 								>
 									<Plus />
@@ -91,9 +104,7 @@
 								<Connection
 									bind:connection={server}
 									direct
-									onSubmit={() => {
-										updateHandler();
-									}}
+									onSubmit={() => updateHandler()}
 									onDelete={() => {
 										servers = servers.filter((_, i) => i !== idx);
 										updateHandler();
@@ -105,8 +116,7 @@
 
 					<div class="my-1.5">
 						<div
-							class={`text-xs 
-								${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
+							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 />
@@ -116,14 +126,38 @@
 						</div>
 					</div>
 
-					<div class=" text-xs text-gray-600 dark:text-gray-300 mb-2">
+					<div class="text-xs text-gray-600 dark:text-gray-300 mb-2">
 						<a
 							class="underline"
 							href="https://github.com/open-webui/openapi-servers"
-							target="_blank">{$i18n.t('Learn more about OpenAPI tool servers.')}</a
+							target="_blank">{$i18n.t('Learn more about OpenAPI tool servers.')} ↗</a
 						>
 					</div>
 				</div>
+
+				<hr class="border-gray-100/50 dark:border-gray-850/50 my-4" />
+
+				<div class="pr-1.5">
+					<Terminals bind:servers={terminalServerConfigs} onChange={() => updateHandler()} />
+
+					<div class="mt-1.5">
+						<div
+							class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
+						>
+							{$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>
+
+						<div class="text-xs text-gray-600 dark:text-gray-300 mt-1">
+							<a
+								class="underline"
+								href="https://github.com/open-webui/open-terminal"
+								target="_blank">{$i18n.t('Learn more about Open Terminal')} ↗</a
+							>
+						</div>
+					</div>
+				</div>
 			</div>
 		{:else}
 			<div class="flex h-full justify-center">