feat: experimental open terminal integration

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>