upstream-archive/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-07-23 09:10:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-06-29 12:43:32 -05:00
parent c0c6c2181a
commit db9977926c
1 changed files with 54 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/lib/components/chat/ToolServersModal.svelte
View File

@@ -1,13 +1,8 @@
<script lang="ts">
import { getContext, onMount } from 'svelte';
import { models, config, toolServers, tools, terminalServers } from '$lib/stores';
import { toast } from 'svelte-sonner';
import { deleteSharedChatById, getChatById, shareChatById } from '$lib/apis/chats';
import { copyToClipboard } from '$lib/utils';
import { getContext } from 'svelte';
import { toolServers, tools } from '$lib/stores';
import Modal from '../common/Modal.svelte';
import Link from '../icons/Link.svelte';
import Collapsible from '../common/Collapsible.svelte';
import XMark from '$lib/components/icons/XMark.svelte';
@@ -19,6 +14,25 @@
$: selectedTools = ($tools ?? []).filter((tool) => selectedToolIds.includes(tool.id));
const i18n = getContext('i18n');
const authStatus = (tool) =>
tool?.authenticated === false
? {
label: $i18n.t('Auth required'),
dot: 'bg-amber-500',
pill: 'text-amber-700 dark:text-amber-300'
}
: tool?.authenticated === true
? {
label: $i18n.t('Connected'),
dot: 'bg-green-500',
pill: 'text-green-700 dark:text-green-300'
}
: {
label: $i18n.t('No auth'),
dot: 'bg-gray-400',
pill: 'text-gray-500 dark:text-gray-400'
};
</script>
<Modal bind:show size="md">
@@ -46,22 +60,47 @@
<div class="px-5 pb-3 w-full flex flex-col justify-center">
<div class=" text-sm dark:text-gray-300 mb-1">
{#each selectedTools as tool}
<Collapsible buttonClassName="w-full mb-0.5">
<div class="truncate">
<div class="text-sm font-medium dark:text-gray-100 text-gray-800 truncate">
{tool?.name}
{@const status = authStatus(tool)}
{@const toolSpecs = tool?.specs ?? []}
<Collapsible
buttonClassName="w-full mb-1 rounded-lg px-2 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-800/50"
chevron={toolSpecs.length > 0}
disabled={toolSpecs.length === 0}
>
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2 min-w-0">
<span class="size-2 rounded-full {status.dot}"></span>
<div class="text-sm font-medium dark:text-gray-100 text-gray-800 truncate">
{tool?.name}
</div>
</div>
{#if tool?.meta?.description}
<div class="text-xs text-gray-500">
<div class="text-xs text-gray-500 truncate">
{tool?.meta?.description}
</div>
{/if}
</div>
<!-- <div slot="content">
{JSON.stringify(tool, null, 2)}
</div> -->
<div class="ml-3 flex shrink-0 items-center gap-2 text-[11px]">
<span class="text-gray-500 dark:text-gray-400">{$i18n.t('Enabled')}</span>
<span class={status.pill}>{status.label}</span>
{#if toolSpecs.length > 0}
<span class="text-gray-500 dark:text-gray-400">
{$i18n.t('{{COUNT}} tools', { COUNT: toolSpecs.length })}
</span>
{/if}
</div>
<div slot="content" class="pl-4 pr-2 pb-2 text-xs text-gray-500 dark:text-gray-400">
{#if toolSpecs.length > 0}
{#each toolSpecs as toolSpec}
<div class="mt-1 truncate">
{toolSpec?.name ?? toolSpec?.function?.name}
</div>
{/each}
{/if}
</div>
</Collapsible>
{/each}
</div>