enh: tool servers info modal

src/lib/components/chat/MessageInput.svelte

@@ -46,6 +46,7 @@
 	import Photo from '../icons/Photo.svelte';
 	import CommandLine from '../icons/CommandLine.svelte';
 	import { KokoroWorker } from '$lib/workers/KokoroWorker';
+	import ToolServersModal from './ToolServersModal.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -84,6 +85,8 @@
 		webSearchEnabled
 	});
 
+	let showToolServers = false;
+
 	let loaded = false;
 	let recording = false;
 
@@ -345,6 +348,8 @@
 
 <FilesOverlay show={dragged} />
 
+<ToolServersModal bind:show={showToolServers} />
+
 {#if loaded}
 	<div class="w-full font-primary">
 		<div class=" mx-auto inset-x-0 bg-transparent flex justify-center">
@@ -1238,9 +1243,13 @@
 													COUNT: toolServers.length
 												})}
 											>
-												<div
+												<button
 													class="translate-y-[1.5px] flex gap-1 items-center text-gray-600 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 transition rounded-lg px-1.5 py-0.5 mr-0.5 self-center border border-gray-100 dark:border-gray-800"
 													aria-label="Available Tool Servers"
+													type="button"
+													on:click={() => {
+														showToolServers = !showToolServers;
+													}}
 												>
 													<svg
 														xmlns="http://www.w3.org/2000/svg"
@@ -1265,7 +1274,7 @@
 													<span class="text-xs">
 														{toolServers.length}
 													</span>
-												</div>
+												</button>
 											</Tooltip>
 										{/if}
 

src/lib/components/chat/ToolServersModal.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { getContext, onMount } from 'svelte';
+	import { models, config, toolServers } from '$lib/stores';
+
+	import { toast } from 'svelte-sonner';
+	import { deleteSharedChatById, getChatById, shareChatById } from '$lib/apis/chats';
+	import { copyToClipboard } from '$lib/utils';
+
+	import Modal from '../common/Modal.svelte';
+	import Link from '../icons/Link.svelte';
+	import Collapsible from '../common/Collapsible.svelte';
+
+	export let show = false;
+
+	const i18n = getContext('i18n');
+</script>
+
+<Modal bind:show size="md">
+	<div>
+		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-0.5">
+			<div class=" text-lg font-medium self-center">{$i18n.t('Available Tool Servers')}</div>
+			<button
+				class="self-center"
+				on:click={() => {
+					show = false;
+				}}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+					class="w-5 h-5"
+				>
+					<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>
+
+		<div class="px-5 pb-5 w-full flex flex-col justify-center">
+			<div class=" text-sm dark:text-gray-300 mb-2">
+				Open WebUI can use tools provided by any OpenAPI server. <br /><a
+					class="underline"
+					href="https://github.com/open-webui/openapi-servers"
+					target="_blank">Learn more about OpenAPI tool servers.</a
+				>
+			</div>
+			<div class=" text-sm dark:text-gray-300 mb-1">
+				{#each $toolServers as toolServer}
+					<Collapsible chevron>
+						<div>
+							<div class="text-base font-medium dark:text-gray-100 text-gray-800">
+								{toolServer?.openapi?.info?.title} - v{toolServer?.openapi?.info?.version}
+							</div>
+
+							<div class="text-sm text-gray-500">
+								{toolServer?.openapi?.info?.description}
+							</div>
+
+							<div class="text-sm text-gray-500">
+								{toolServer?.url}
+							</div>
+						</div>
+
+						<div slot="content">
+							{#each toolServer?.specs ?? [] as tool_spec}
+								<div class="my-1">
+									<div class="font-medium text-gray-800 dark:text-gray-100">
+										{tool_spec?.name}
+									</div>
+
+									<div>
+										{tool_spec?.description}
+									</div>
+								</div>
+							{/each}
+						</div>
+					</Collapsible>
+				{/each}
+			</div>
+		</div>
+	</div>
+</Modal>

src/lib/components/common/Collapsible.svelte

@@ -47,6 +47,7 @@
 	export let title = null;
 	export let attributes = null;
 
+	export let chevron = false;
 	export let grow = false;
 
 	export let disabled = false;
@@ -141,7 +142,19 @@
 			}}
 		>
 			<div>
-				<slot />
+				<div class="flex items-start justify-between">
+					<slot />
+
+					{#if chevron}
+						<div class="flex self-start translate-y-1">
+							{#if open}
+								<ChevronUp strokeWidth="3.5" className="size-3.5" />
+							{:else}
+								<ChevronDown strokeWidth="3.5" className="size-3.5" />
+							{/if}
+						</div>
+					{/if}
+				</div>
 
 				{#if grow}
 					{#if open && !hide}