mirror of
https://github.com/open-webui/open-webui
synced 2025-06-26 18:26:48 +00:00
refac: tools styling
This commit is contained in:
Timothy Jaeryang Baek
parent
793aa307ef
commit
cb94a87cb0
@ -52,6 +52,7 @@
|
|||||||
import CommandLine from '../icons/CommandLine.svelte';
|
import CommandLine from '../icons/CommandLine.svelte';
|
||||||
import { KokoroWorker } from '$lib/workers/KokoroWorker';
|
import { KokoroWorker } from '$lib/workers/KokoroWorker';
|
||||||
import ToolServersModal from './ToolServersModal.svelte';
|
import ToolServersModal from './ToolServersModal.svelte';
|
||||||
|
import Wrench from '../icons/Wrench.svelte';
|
||||||
|
|
||||||
const i18n = getContext('i18n');
|
const i18n = getContext('i18n');
|
||||||
|
|
||||||
@ -90,7 +91,7 @@
|
|||||||
webSearchEnabled
|
webSearchEnabled
|
||||||
});
|
});
|
||||||
|
|
||||||
let showToolServers = false;
|
let showTools = false;
|
||||||
|
|
||||||
let loaded = false;
|
let loaded = false;
|
||||||
let recording = false;
|
let recording = false;
|
||||||
@ -353,7 +354,7 @@
|
|||||||
|
|
||||||
<FilesOverlay show={dragged} />
|
<FilesOverlay show={dragged} />
|
||||||
|
|
||||||
<ToolServersModal bind:show={showToolServers} />
|
<ToolServersModal bind:show={showTools} {selectedToolIds} />
|
||||||
|
|
||||||
{#if loaded}
|
{#if loaded}
|
||||||
<div class="w-full font-primary">
|
<div class="w-full font-primary">
|
||||||
@ -397,38 +398,6 @@
|
|||||||
<div
|
<div
|
||||||
class="px-3 pb-0.5 pt-1.5 text-left w-full flex flex-col absolute bottom-0 left-0 right-0 bg-linear-to-t from-white dark:from-gray-900 z-10"
|
class="px-3 pb-0.5 pt-1.5 text-left w-full flex flex-col absolute bottom-0 left-0 right-0 bg-linear-to-t from-white dark:from-gray-900 z-10"
|
||||||
>
|
>
|
||||||
{#if selectedToolIds.length > 0}
|
|
||||||
<div class="flex items-center justify-between w-full">
|
|
||||||
<div class="flex items-center gap-2.5 text-sm dark:text-gray-500">
|
|
||||||
<div class="pl-1">
|
|
||||||
<span class="relative flex size-2">
|
|
||||||
<span
|
|
||||||
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-yellow-400 opacity-75"
|
|
||||||
/>
|
|
||||||
<span class="relative inline-flex rounded-full size-2 bg-yellow-500" />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class=" text-ellipsis line-clamp-1 flex">
|
|
||||||
{#each selectedToolIds.map((id) => {
|
|
||||||
return $tools ? $tools.find((t) => t.id === id) : { id: id, name: id };
|
|
||||||
}) as tool, toolIdx (toolIdx)}
|
|
||||||
<Tooltip
|
|
||||||
content={tool?.meta?.description ?? ''}
|
|
||||||
className=" {toolIdx !== 0 ? 'pl-0.5' : ''} shrink-0"
|
|
||||||
placement="top"
|
|
||||||
>
|
|
||||||
{tool.name}
|
|
||||||
</Tooltip>
|
|
||||||
|
|
||||||
{#if toolIdx !== selectedToolIds.length - 1}
|
|
||||||
<span>, </span>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if atSelectedModel !== undefined}
|
{#if atSelectedModel !== undefined}
|
||||||
<div class="flex items-center justify-between w-full">
|
<div class="flex items-center justify-between w-full">
|
||||||
<div class="pl-[1px] flex items-center gap-2 text-sm dark:text-gray-500">
|
<div class="pl-[1px] flex items-center gap-2 text-sm dark:text-gray-500">
|
||||||
@ -1133,6 +1102,29 @@
|
|||||||
</InputMenu>
|
</InputMenu>
|
||||||
|
|
||||||
<div class="flex gap-0.5 items-center overflow-x-auto scrollbar-none flex-1">
|
<div class="flex gap-0.5 items-center overflow-x-auto scrollbar-none flex-1">
|
||||||
|
{#if toolServers.length + selectedToolIds.length > 0}
|
||||||
|
<Tooltip
|
||||||
|
content={$i18n.t('{{COUNT}} Available Tools', {
|
||||||
|
COUNT: toolServers.length + selectedToolIds.length
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="translate-y-[0.5px] flex gap-1 items-center text-gray-600 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 rounded-lg p-1 mr-0.5 self-center transition"
|
||||||
|
aria-label="Available Tools"
|
||||||
|
type="button"
|
||||||
|
on:click={() => {
|
||||||
|
showTools = !showTools;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Wrench className="size-4" strokeWidth="1.75" />
|
||||||
|
|
||||||
|
<span class="text-sm font-medium text-gray-600 dark:text-gray-300">
|
||||||
|
{toolServers.length + selectedToolIds.length}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
{/if}
|
||||||
|
|
||||||
{#if $_user}
|
{#if $_user}
|
||||||
{#if $config?.features?.enable_web_search && ($_user.role === 'admin' || $_user?.permissions?.features?.web_search)}
|
{#if $config?.features?.enable_web_search && ($_user.role === 'admin' || $_user?.permissions?.features?.web_search)}
|
||||||
<Tooltip content={$i18n.t('Search the internet')} placement="top">
|
<Tooltip content={$i18n.t('Search the internet')} placement="top">
|
||||||
@ -1195,47 +1187,6 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="self-end flex space-x-1 mr-1 shrink-0">
|
<div class="self-end flex space-x-1 mr-1 shrink-0">
|
||||||
{#if toolServers.length > 0}
|
|
||||||
<Tooltip
|
|
||||||
content={$i18n.t('{{COUNT}} Available Tool Servers', {
|
|
||||||
COUNT: toolServers.length
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
<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 rounded-lg px-1.5 py-0.5 mr-0.5 self-center border border-gray-100 dark:border-gray-800 transition"
|
|
||||||
aria-label="Available Tool Servers"
|
|
||||||
type="button"
|
|
||||||
on:click={() => {
|
|
||||||
showToolServers = !showToolServers;
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke="currentColor"
|
|
||||||
class="size-3"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
d="M21.75 6.75a4.5 4.5 0 0 1-4.884 4.484c-1.076-.091-2.264.071-2.95.904l-7.152 8.684a2.548 2.548 0 1 1-3.586-3.586l8.684-7.152c.833-.686.995-1.874.904-2.95a4.5 4.5 0 0 1 6.336-4.486l-3.276 3.276a3.004 3.004 0 0 0 2.25 2.25l3.276-3.276c.256.565.398 1.192.398 1.852Z"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
d="M4.867 19.125h.008v.008h-.008v-.008Z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<span class="text-xs">
|
|
||||||
{toolServers.length}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</Tooltip>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if !history?.currentId || history.messages[history.currentId]?.done == true}
|
{#if !history?.currentId || history.messages[history.currentId]?.done == true}
|
||||||
<Tooltip content={$i18n.t('Record voice')}>
|
<Tooltip content={$i18n.t('Record voice')}>
|
||||||
<button
|
<button
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { getContext, onMount } from 'svelte';
|
import { getContext, onMount } from 'svelte';
|
||||||
import { models, config, toolServers } from '$lib/stores';
|
import { models, config, toolServers, tools } from '$lib/stores';
|
||||||
|
|
||||||
import { toast } from 'svelte-sonner';
|
import { toast } from 'svelte-sonner';
|
||||||
import { deleteSharedChatById, getChatById, shareChatById } from '$lib/apis/chats';
|
import { deleteSharedChatById, getChatById, shareChatById } from '$lib/apis/chats';
|
||||||
@ -11,6 +11,11 @@
|
|||||||
import Collapsible from '../common/Collapsible.svelte';
|
import Collapsible from '../common/Collapsible.svelte';
|
||||||
|
|
||||||
export let show = false;
|
export let show = false;
|
||||||
|
export let selectedToolIds = [];
|
||||||
|
|
||||||
|
let selectedTools = [];
|
||||||
|
|
||||||
|
$: selectedTools = $tools.filter((tool) => selectedToolIds.includes(tool.id));
|
||||||
|
|
||||||
const i18n = getContext('i18n');
|
const i18n = getContext('i18n');
|
||||||
</script>
|
</script>
|
||||||
@ -18,7 +23,7 @@
|
|||||||
<Modal bind:show size="md">
|
<Modal bind:show size="md">
|
||||||
<div>
|
<div>
|
||||||
<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-0.5">
|
<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>
|
<div class=" text-lg font-medium self-center">{$i18n.t('Available Tools')}</div>
|
||||||
<button
|
<button
|
||||||
class="self-center"
|
class="self-center"
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
@ -38,47 +43,85 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="px-5 pb-5 w-full flex flex-col justify-center">
|
{#if selectedTools.length > 0}
|
||||||
<div class=" text-sm dark:text-gray-300 mb-2">
|
{#if $toolServers.length > 0}
|
||||||
Open WebUI can use tools provided by any OpenAPI server. <br /><a
|
<div class=" flex justify-between dark:text-gray-300 px-5 pb-1">
|
||||||
class="underline"
|
<div class=" text-base font-medium self-center">{$i18n.t('Tools')}</div>
|
||||||
href="https://github.com/open-webui/openapi-servers"
|
</div>
|
||||||
target="_blank">Learn more about OpenAPI tool servers.</a
|
{/if}
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class=" text-sm dark:text-gray-300 mb-1">
|
|
||||||
{#each $toolServers as toolServer}
|
|
||||||
<Collapsible buttonClassName="w-full" 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">
|
<div class="px-5 pb-3 w-full flex flex-col justify-center">
|
||||||
{toolServer?.openapi?.info?.description}
|
<div class=" text-sm dark:text-gray-300 mb-1">
|
||||||
</div>
|
{#each selectedTools as tool}
|
||||||
|
<Collapsible buttonClassName="w-full mb-0.5">
|
||||||
<div class="text-sm text-gray-500">
|
<div>
|
||||||
{toolServer?.url}
|
<div class="text-sm font-medium dark:text-gray-100 text-gray-800">
|
||||||
</div>
|
{tool?.name}
|
||||||
</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>
|
</div>
|
||||||
{/each}
|
|
||||||
</div>
|
{#if tool?.meta?.description}
|
||||||
</Collapsible>
|
<div class="text-xs text-gray-500">
|
||||||
{/each}
|
{tool?.meta?.description}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div slot="content">
|
||||||
|
{JSON.stringify(tool, null, 2)}
|
||||||
|
</div> -->
|
||||||
|
</Collapsible>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{/if}
|
||||||
|
|
||||||
|
{#if $toolServers.length > 0}
|
||||||
|
<div class=" flex justify-between dark:text-gray-300 px-5 pb-0.5">
|
||||||
|
<div class=" text-base font-medium self-center">{$i18n.t('Tool Servers')}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="px-5 pb-5 w-full flex flex-col justify-center">
|
||||||
|
<div class=" text-xs text-gray-600 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 buttonClassName="w-full" chevron>
|
||||||
|
<div>
|
||||||
|
<div class="text-sm font-medium dark:text-gray-100 text-gray-800">
|
||||||
|
{toolServer?.openapi?.info?.title} - v{toolServer?.openapi?.info?.version}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-xs text-gray-500">
|
||||||
|
{toolServer?.openapi?.info?.description}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-xs 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>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user