UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-01-29 13:58:09 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refac: tools & functions styling

Browse Source
This commit is contained in:
Timothy J. Baek 2024-10-20 18:24:50 -07:00
parent e378f70f34
commit 254c6ca709
2 changed files with 77 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/lib/components/workspace/Functions/FunctionEditor.svelte
View File

@ -7,6 +7,7 @@
import CodeEditor from '$lib/components/common/CodeEditor.svelte'; import CodeEditor from '$lib/components/common/CodeEditor.svelte';
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte'; import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import Badge from '$lib/components/common/Badge.svelte';
let formElement = null; let formElement = null;
let loading = false; let loading = false;
@ -321,34 +322,49 @@ class Pipe:
</div> </div>
<div class="flex flex-col flex-1 overflow-auto h-0 rounded-lg"> <div class="flex flex-col flex-1 overflow-auto h-0 rounded-lg">
<div class="w-full mb-2 flex flex-col gap-1.5"> <div class="w-full mb-2 flex flex-col gap-0.5">
<div class="flex gap-2 w-full"> <div class="flex gap-2 w-full items-center">
<input <div class="flex-1">
class="w-full px-3 py-2 text-sm font-medium bg-gray-50 dark:bg-gray-850 dark:text-gray-200 rounded-lg outline-none" <input
type="text" class="w-full text-2xl font-medium bg-transparent outline-none"
placeholder={$i18n.t('Function Name (e.g. My Filter)')} type="text"
bind:value={name} placeholder={$i18n.t('Function Name (e.g. My Filter)')}
required bind:value={name}
/> required
/>
</div>
<div>
<Badge type="muted" content={$i18n.t('Function')} />
</div>
</div>
<div class=" flex gap-2">
{#if edit}
<div class="text-sm text-gray-500 flex-shrink-0">
{id}
</div>
{:else}
<input
class="w-full text-sm disabled:text-gray-500 bg-transparent outline-none"
type="text"
placeholder={$i18n.t('Function ID (e.g. my_filter)')}
bind:value={id}
required
disabled={edit}
/>
{/if}
<input <input
class="w-full px-3 py-2 text-sm font-medium disabled:text-gray-300 dark:disabled:text-gray-700 bg-gray-50 dark:bg-gray-850 dark:text-gray-200 rounded-lg outline-none" class="w-full text-sm bg-transparent outline-none"
type="text" type="text"
placeholder={$i18n.t('Function ID (e.g. my_filter)')} placeholder={$i18n.t(
bind:value={id} 'Function Description (e.g. A filter to remove profanity from text)'
)}
bind:value={meta.description}
required required
disabled={edit}
/> />
</div> </div>
<input
class="w-full px-3 py-2 text-sm font-medium bg-gray-50 dark:bg-gray-850 dark:text-gray-200 rounded-lg outline-none"
type="text"
placeholder={$i18n.t(
'Function Description (e.g. A filter to remove profanity from text)'
)}
bind:value={meta.description}
required
/>
</div> </div>
<div class="mb-2 flex-1 overflow-auto h-0 rounded-lg"> <div class="mb-2 flex-1 overflow-auto h-0 rounded-lg">

62
src/lib/components/workspace/Tools/ToolkitEditor.svelte
View File

@ -6,6 +6,7 @@
import CodeEditor from '$lib/components/common/CodeEditor.svelte'; import CodeEditor from '$lib/components/common/CodeEditor.svelte';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte'; import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import Badge from '$lib/components/common/Badge.svelte';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -208,35 +209,50 @@ class Tools:
</button> </button>
</div> </div>
<div class="flex flex-col flex-1 overflow-auto h-0 rounded-lg"> <div class="flex flex-col flex-1 overflow-auto h-0">
<div class="w-full mb-2 flex flex-col gap-1.5"> <div class="w-full mb-2 flex flex-col gap-0.5">
<div class="flex gap-2 w-full"> <div class="flex gap-2 w-full items-center">
<input <div class="flex-1">
class="w-full px-3 py-2 text-sm font-medium bg-gray-50 dark:bg-gray-850 dark:text-gray-200 rounded-lg outline-none" <input
type="text" class="w-full text-2xl font-medium bg-transparent outline-none"
placeholder={$i18n.t('Toolkit Name (e.g. My ToolKit)')} type="text"
bind:value={name} placeholder={$i18n.t('Toolkit Name (e.g. My ToolKit)')}
required bind:value={name}
/> required
/>
</div>
<div>
<Badge type="muted" content={$i18n.t('Tool')} />
</div>
</div>
<div class=" flex gap-2">
{#if edit}
<div class="text-sm text-gray-500 flex-shrink-0">
{id}
</div>
{:else}
<input
class="w-full text-sm disabled:text-gray-500 bg-transparent outline-none"
type="text"
placeholder={$i18n.t('Toolkit ID (e.g. my_toolkit)')}
bind:value={id}
required
disabled={edit}
/>
{/if}
<input <input
class="w-full px-3 py-2 text-sm font-medium disabled:text-gray-300 dark:disabled:text-gray-700 bg-gray-50 dark:bg-gray-850 dark:text-gray-200 rounded-lg outline-none" class="w-full text-sm bg-transparent outline-none"
type="text" type="text"
placeholder={$i18n.t('Toolkit ID (e.g. my_toolkit)')} placeholder={$i18n.t(
bind:value={id} 'Toolkit Description (e.g. A toolkit for performing various operations)'
)}
bind:value={meta.description}
required required
disabled={edit}
/> />
</div> </div>
<input
class="w-full px-3 py-2 text-sm font-medium bg-gray-50 dark:bg-gray-850 dark:text-gray-200 rounded-lg outline-none"
type="text"
placeholder={$i18n.t(
'Toolkit Description (e.g. A toolkit for performing various operations)'
)}
bind:value={meta.description}
required
/>
</div> </div>
<div class="mb-2 flex-1 overflow-auto h-0 rounded-lg"> <div class="mb-2 flex-1 overflow-auto h-0 rounded-lg">