OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-14 18:33:15 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek 2025-02-15 19:50:40 -08:00
parent 052531ac13
commit fd8998a38f
37 changed files with 281 additions and 273 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/NotificationToast.svelte
View File

@ -31,7 +31,7 @@
</script> </script>
<button <button
class="flex gap-2.5 text-left min-w-[var(--width)] w-full dark:bg-gray-850 dark:text-white bg-white text-black border border-gray-50 dark:border-gray-800 rounded-xl px-3.5 py-3.5" class="flex gap-2.5 text-left min-w-[var(--width)] w-full dark:bg-gray-850 dark:text-white bg-white text-black border border-gray-100 dark:border-gray-850 rounded-xl px-3.5 py-3.5"
on:click={() => { on:click={() => {
onClick(); onClick();
dispatch('closeToast'); dispatch('closeToast');

4
src/lib/components/admin/Functions/FunctionMenu.svelte
View File

@ -63,7 +63,7 @@
</div> </div>
</div> </div>
<hr class="border-gray-100 dark:border-gray-800 my-1" /> <hr class="border-gray-100 dark:border-gray-850 my-1" />
{/if} {/if}
<DropdownMenu.Item <DropdownMenu.Item
@ -122,7 +122,7 @@
<div class="flex items-center">{$i18n.t('Export')}</div> <div class="flex items-center">{$i18n.t('Export')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
<hr class="border-gray-100 dark:border-gray-800 my-1" /> <hr class="border-gray-100 dark:border-gray-850 my-1" />
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"

8
src/lib/components/admin/Settings/Connections.svelte
View File

@ -234,7 +234,7 @@
</div> </div>
{#if ENABLE_OPENAI_API} {#if ENABLE_OPENAI_API}
<hr class=" border-gray-50 dark:border-gray-850" /> <hr class=" border-gray-100 dark:border-gray-850" />
<div class=""> <div class="">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
@ -283,7 +283,7 @@
</div> </div>
</div> </div>
<hr class=" border-gray-50 dark:border-gray-850" /> <hr class=" border-gray-100 dark:border-gray-850" />
<div class="pr-1.5 my-2"> <div class="pr-1.5 my-2">
<div class="flex justify-between items-center text-sm mb-2"> <div class="flex justify-between items-center text-sm mb-2">
@ -300,7 +300,7 @@
</div> </div>
{#if ENABLE_OLLAMA_API} {#if ENABLE_OLLAMA_API}
<hr class=" border-gray-50 dark:border-gray-850 my-2" /> <hr class=" border-gray-100 dark:border-gray-850 my-2" />
<div class=""> <div class="">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
@ -357,7 +357,7 @@
{/if} {/if}
</div> </div>
<hr class=" border-gray-50 dark:border-gray-850" /> <hr class=" border-gray-100 dark:border-gray-850" />
<div class="pr-1.5 my-2"> <div class="pr-1.5 my-2">
<div class="flex justify-between items-center text-sm"> <div class="flex justify-between items-center text-sm">

6
src/lib/components/admin/Settings/General.svelte
View File

@ -118,7 +118,7 @@
<div class="mb-3.5"> <div class="mb-3.5">
<div class=" mb-2.5 text-base font-medium">{$i18n.t('General')}</div> <div class=" mb-2.5 text-base font-medium">{$i18n.t('General')}</div>
<hr class=" border-gray-50 dark:border-gray-850 my-2" /> <hr class=" border-gray-100 dark:border-gray-850 my-2" />
<div class="mb-2.5"> <div class="mb-2.5">
<div class=" mb-1 text-xs font-medium flex space-x-2 items-center"> <div class=" mb-1 text-xs font-medium flex space-x-2 items-center">
@ -241,7 +241,7 @@
<div class="mb-3"> <div class="mb-3">
<div class=" mb-2.5 text-base font-medium">{$i18n.t('Authentication')}</div> <div class=" mb-2.5 text-base font-medium">{$i18n.t('Authentication')}</div>
<hr class=" border-gray-50 dark:border-gray-850 my-2" /> <hr class=" border-gray-100 dark:border-gray-850 my-2" />
<div class=" mb-2.5 flex w-full justify-between"> <div class=" mb-2.5 flex w-full justify-between">
<div class=" self-center text-xs font-medium">{$i18n.t('Default User Role')}</div> <div class=" self-center text-xs font-medium">{$i18n.t('Default User Role')}</div>
@ -553,7 +553,7 @@
<div class="mb-3"> <div class="mb-3">
<div class=" mb-2.5 text-base font-medium">{$i18n.t('Features')}</div> <div class=" mb-2.5 text-base font-medium">{$i18n.t('Features')}</div>
<hr class=" border-gray-50 dark:border-gray-850 my-2" /> <hr class=" border-gray-100 dark:border-gray-850 my-2" />
<div class="mb-2.5 flex w-full items-center justify-between pr-2"> <div class="mb-2.5 flex w-full items-center justify-between pr-2">
<div class=" self-center text-xs font-medium"> <div class=" self-center text-xs font-medium">

2
src/lib/components/admin/Settings/Images.svelte
View File

@ -525,7 +525,7 @@
/> />
<button <button
class="w-full text-sm font-medium py-2 bg-transparent hover:bg-gray-100 border border-dashed dark:border-gray-800 dark:hover:bg-gray-850 text-center rounded-xl" class="w-full text-sm font-medium py-2 bg-transparent hover:bg-gray-100 border border-dashed dark:border-gray-850 dark:hover:bg-gray-850 text-center rounded-xl"
type="button" type="button"
on:click={() => { on:click={() => {
document.getElementById('upload-comfyui-workflow-input')?.click(); document.getElementById('upload-comfyui-workflow-input')?.click();

434
src/lib/components/admin/Settings/Interface.svelte
View File

@ -69,9 +69,13 @@
}} }}
> >
<div class=" overflow-y-scroll scrollbar-hidden h-full pr-1.5"> <div class=" overflow-y-scroll scrollbar-hidden h-full pr-1.5">
<div> <div class="mb-3.5">
<div class=" mb-2.5 text-sm font-medium flex items-center"> <div class=" mb-2.5 text-base font-medium">{$i18n.t('Tasks')}</div>
<div class=" mr-1">{$i18n.t('Set Task Model')}</div>
<hr class=" border-gray-100 dark:border-gray-850 my-2" />
<div class=" mb-1 font-medium flex items-center">
<div class=" text-xs mr-1">{$i18n.t('Set Task Model')}</div>
<Tooltip <Tooltip
content={$i18n.t( content={$i18n.t(
'A task model is used when performing tasks such as generating titles for chats and web search queries' 'A task model is used when performing tasks such as generating titles for chats and web search queries'
@ -93,7 +97,8 @@
</svg> </svg>
</Tooltip> </Tooltip>
</div> </div>
<div class="flex w-full gap-2">
<div class=" mb-2.5 flex w-full gap-2">
<div class="flex-1"> <div class="flex-1">
<div class=" text-xs mb-1">{$i18n.t('Local Models')}</div> <div class=" text-xs mb-1">{$i18n.t('Local Models')}</div>
<select <select
@ -127,9 +132,7 @@
</div> </div>
</div> </div>
<hr class=" border-gray-50 dark:border-gray-850 my-3" /> <div class="mb-2.5 flex w-full items-center justify-between">
<div class="my-3 flex w-full items-center justify-between">
<div class=" self-center text-xs font-medium"> <div class=" self-center text-xs font-medium">
{$i18n.t('Title Generation')} {$i18n.t('Title Generation')}
</div> </div>
@ -138,8 +141,8 @@
</div> </div>
{#if taskConfig.ENABLE_TITLE_GENERATION} {#if taskConfig.ENABLE_TITLE_GENERATION}
<div class="mt-3"> <div class="mb-2.5">
<div class=" mb-2.5 text-xs font-medium">{$i18n.t('Title Generation Prompt')}</div> <div class=" mb-1 text-xs font-medium">{$i18n.t('Title Generation Prompt')}</div>
<Tooltip <Tooltip
content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')} content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
@ -155,15 +158,57 @@
</div> </div>
{/if} {/if}
<div class="mt-3"> <div class="mb-2.5 flex w-full items-center justify-between">
<div class=" mb-2.5 text-xs font-medium">{$i18n.t('Image Prompt Generation Prompt')}</div> <div class=" self-center text-xs font-medium">
{$i18n.t('Tags Generation')}
</div>
<Switch bind:state={taskConfig.ENABLE_TAGS_GENERATION} />
</div>
{#if taskConfig.ENABLE_TAGS_GENERATION}
<div class="mb-2.5">
<div class=" mb-1 text-xs font-medium">{$i18n.t('Tags Generation Prompt')}</div>
<Tooltip
content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
placement="top-start"
>
<Textarea
bind:value={taskConfig.TAGS_GENERATION_PROMPT_TEMPLATE}
placeholder={$i18n.t(
'Leave empty to use the default prompt, or enter a custom prompt'
)}
/>
</Tooltip>
</div>
{/if}
<div class="mb-2.5 flex w-full items-center justify-between">
<div class=" self-center text-xs font-medium">
{$i18n.t('Retrieval Query Generation')}
</div>
<Switch bind:state={taskConfig.ENABLE_RETRIEVAL_QUERY_GENERATION} />
</div>
<div class="mb-2.5 flex w-full items-center justify-between">
<div class=" self-center text-xs font-medium">
{$i18n.t('Web Search Query Generation')}
</div>
<Switch bind:state={taskConfig.ENABLE_SEARCH_QUERY_GENERATION} />
</div>
<div class="mb-2.5">
<div class=" mb-1 text-xs font-medium">{$i18n.t('Query Generation Prompt')}</div>
<Tooltip <Tooltip
content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')} content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
placement="top-start" placement="top-start"
> >
<Textarea <Textarea
bind:value={taskConfig.IMAGE_PROMPT_GENERATION_PROMPT_TEMPLATE} bind:value={taskConfig.QUERY_GENERATION_PROMPT_TEMPLATE}
placeholder={$i18n.t( placeholder={$i18n.t(
'Leave empty to use the default prompt, or enter a custom prompt' 'Leave empty to use the default prompt, or enter a custom prompt'
)} )}
@ -171,9 +216,7 @@
</Tooltip> </Tooltip>
</div> </div>
<hr class=" border-gray-50 dark:border-gray-850 my-3" /> <div class="mb-2.5 flex w-full items-center justify-between">
<div class="my-3 flex w-full items-center justify-between">
<div class=" self-center text-xs font-medium"> <div class=" self-center text-xs font-medium">
{$i18n.t('Autocomplete Generation')} {$i18n.t('Autocomplete Generation')}
</div> </div>
@ -184,8 +227,8 @@
</div> </div>
{#if taskConfig.ENABLE_AUTOCOMPLETE_GENERATION} {#if taskConfig.ENABLE_AUTOCOMPLETE_GENERATION}
<div class="mt-3"> <div class="mb-2.5">
<div class=" mb-2.5 text-xs font-medium"> <div class=" mb-1 text-xs font-medium">
{$i18n.t('Autocomplete Generation Input Max Length')} {$i18n.t('Autocomplete Generation Input Max Length')}
</div> </div>
@ -202,61 +245,31 @@
</div> </div>
{/if} {/if}
<hr class=" border-gray-50 dark:border-gray-850 my-3" /> <div class="mb-2.5">
<div class=" mb-1 text-xs font-medium">{$i18n.t('Image Prompt Generation Prompt')}</div>
<div class="my-3 flex w-full items-center justify-between">
<div class=" self-center text-xs font-medium">
{$i18n.t('Tags Generation')}
</div>
<Switch bind:state={taskConfig.ENABLE_TAGS_GENERATION} />
</div>
{#if taskConfig.ENABLE_TAGS_GENERATION}
<div class="mt-3">
<div class=" mb-2.5 text-xs font-medium">{$i18n.t('Tags Generation Prompt')}</div>
<Tooltip
content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
placement="top-start"
>
<Textarea
bind:value={taskConfig.TAGS_GENERATION_PROMPT_TEMPLATE}
placeholder={$i18n.t(
'Leave empty to use the default prompt, or enter a custom prompt'
)}
/>
</Tooltip>
</div>
{/if}
<hr class=" border-gray-50 dark:border-gray-850 my-3" />
<div class="my-3 flex w-full items-center justify-between">
<div class=" self-center text-xs font-medium">
{$i18n.t('Retrieval Query Generation')}
</div>
<Switch bind:state={taskConfig.ENABLE_RETRIEVAL_QUERY_GENERATION} />
</div>
<div class="my-3 flex w-full items-center justify-between">
<div class=" self-center text-xs font-medium">
{$i18n.t('Web Search Query Generation')}
</div>
<Switch bind:state={taskConfig.ENABLE_SEARCH_QUERY_GENERATION} />
</div>
<div class="">
<div class=" mb-2.5 text-xs font-medium">{$i18n.t('Query Generation Prompt')}</div>
<Tooltip <Tooltip
content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')} content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
placement="top-start" placement="top-start"
> >
<Textarea <Textarea
bind:value={taskConfig.QUERY_GENERATION_PROMPT_TEMPLATE} bind:value={taskConfig.IMAGE_PROMPT_GENERATION_PROMPT_TEMPLATE}
placeholder={$i18n.t(
'Leave empty to use the default prompt, or enter a custom prompt'
)}
/>
</Tooltip>
</div>
<div class="mb-2.5">
<div class=" mb-1 text-xs font-medium">{$i18n.t('Tools Function Calling Prompt')}</div>
<Tooltip
content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
placement="top-start"
>
<Textarea
bind:value={taskConfig.TOOLS_FUNCTION_CALLING_PROMPT_TEMPLATE}
placeholder={$i18n.t( placeholder={$i18n.t(
'Leave empty to use the default prompt, or enter a custom prompt' 'Leave empty to use the default prompt, or enter a custom prompt'
)} )}
@ -265,129 +278,33 @@
</div> </div>
</div> </div>
<div class="mt-3"> <div class="mb-3.5">
<div class=" mb-2.5 text-xs font-medium">{$i18n.t('Tools Function Calling Prompt')}</div> <div class=" mb-2.5 text-base font-medium">{$i18n.t('UI')}</div>
<Tooltip <hr class=" border-gray-100 dark:border-gray-850 my-2" />
content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
placement="top-start"
>
<Textarea
bind:value={taskConfig.TOOLS_FUNCTION_CALLING_PROMPT_TEMPLATE}
placeholder={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
/>
</Tooltip>
</div>
<hr class=" border-gray-50 dark:border-gray-850 my-3" /> <div class=" {banners.length > 0 ? ' mb-3' : ''}">
<div class="mb-2.5 flex w-full justify-between">
<div class=" space-y-3 {banners.length > 0 ? ' mb-3' : ''}">
<div class="flex w-full justify-between">
<div class=" self-center text-sm font-semibold">
{$i18n.t('Banners')}
</div>
<button
class="p-1 px-3 text-xs flex rounded-sm transition"
type="button"
on:click={() => {
if (banners.length === 0 || banners.at(-1).content !== '') {
banners = [
...banners,
{
id: uuidv4(),
type: '',
title: '',
content: '',
dismissible: true,
timestamp: Math.floor(Date.now() / 1000)
}
];
}
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
/>
</svg>
</button>
</div>
<div class="flex flex-col space-y-1">
{#each banners as banner, bannerIdx}
<div class=" flex justify-between">
<div class="flex flex-row flex-1 border rounded-xl dark:border-gray-800">
<select
class="w-fit capitalize rounded-xl py-2 px-4 text-xs bg-transparent outline-hidden"
bind:value={banner.type}
required
>
{#if banner.type == ''}
<option value="" selected disabled class="text-gray-900"
>{$i18n.t('Type')}</option
>
{/if}
<option value="info" class="text-gray-900">{$i18n.t('Info')}</option>
<option value="warning" class="text-gray-900">{$i18n.t('Warning')}</option>
<option value="error" class="text-gray-900">{$i18n.t('Error')}</option>
<option value="success" class="text-gray-900">{$i18n.t('Success')}</option>
</select>
<input
class="pr-5 py-1.5 text-xs w-full bg-transparent outline-hidden"
placeholder={$i18n.t('Content')}
bind:value={banner.content}
/>
<div class="relative top-1.5 -left-2">
<Tooltip content={$i18n.t('Dismissible')} className="flex h-fit items-center">
<Switch bind:state={banner.dismissible} />
</Tooltip>
</div>
</div>
<button
class="px-2"
type="button"
on:click={() => {
banners.splice(bannerIdx, 1);
banners = banners;
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<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>
{/each}
</div>
</div>
{#if $user.role === 'admin'}
<div class=" space-y-3">
<div class="flex w-full justify-between mb-2">
<div class=" self-center text-sm font-semibold"> <div class=" self-center text-sm font-semibold">
{$i18n.t('Default Prompt Suggestions')} {$i18n.t('Banners')}
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded-sm transition" class="p-1 px-3 text-xs flex rounded-sm transition"
type="button" type="button"
on:click={() => { on:click={() => {
if (promptSuggestions.length === 0 || promptSuggestions.at(-1).content !== '') { if (banners.length === 0 || banners.at(-1).content !== '') {
promptSuggestions = [...promptSuggestions, { content: '', title: ['', ''] }]; banners = [
...banners,
{
id: uuidv4(),
type: '',
title: '',
content: '',
dismissible: true,
timestamp: Math.floor(Date.now() / 1000)
}
];
} }
}} }}
> >
@ -403,40 +320,48 @@
</svg> </svg>
</button> </button>
</div> </div>
<div class="grid lg:grid-cols-2 flex-col gap-1.5">
{#each promptSuggestions as prompt, promptIdx}
<div
class=" flex border border-gray-100 dark:border-none dark:bg-gray-850 rounded-xl py-1.5"
>
<div class="flex flex-col flex-1 pl-1">
<div class="flex border-b border-gray-100 dark:border-gray-800 w-full">
<input
class="px-3 py-1.5 text-xs w-full bg-transparent outline-hidden border-r border-gray-100 dark:border-gray-800"
placeholder={$i18n.t('Title (e.g. Tell me a fun fact)')}
bind:value={prompt.title[0]}
/>
<input <div class=" flex flex-col space-y-1">
class="px-3 py-1.5 text-xs w-full bg-transparent outline-hidden border-r border-gray-100 dark:border-gray-800" {#each banners as banner, bannerIdx}
placeholder={$i18n.t('Subtitle (e.g. about the Roman Empire)')} <div class=" flex justify-between">
bind:value={prompt.title[1]} <div
/> class="flex flex-row flex-1 border rounded-xl border-gray-100 dark:border-gray-850"
</div> >
<select
class="w-fit capitalize rounded-xl py-2 px-4 text-xs bg-transparent outline-hidden"
bind:value={banner.type}
required
>
{#if banner.type == ''}
<option value="" selected disabled class="text-gray-900"
>{$i18n.t('Type')}</option
>
{/if}
<option value="info" class="text-gray-900">{$i18n.t('Info')}</option>
<option value="warning" class="text-gray-900">{$i18n.t('Warning')}</option>
<option value="error" class="text-gray-900">{$i18n.t('Error')}</option>
<option value="success" class="text-gray-900">{$i18n.t('Success')}</option>
</select>
<textarea <input
class="px-3 py-1.5 text-xs w-full bg-transparent outline-hidden border-r border-gray-100 dark:border-gray-800 resize-none" class="pr-5 py-1.5 text-xs w-full bg-transparent outline-hidden"
placeholder={$i18n.t('Prompt (e.g. Tell me a fun fact about the Roman Empire)')} placeholder={$i18n.t('Content')}
rows="3" bind:value={banner.content}
bind:value={prompt.content}
/> />
<div class="relative top-1.5 -left-2">
<Tooltip content={$i18n.t('Dismissible')} className="flex h-fit items-center">
<Switch bind:state={banner.dismissible} />
</Tooltip>
</div>
</div> </div>
<button <button
class="px-3" class="px-2"
type="button" type="button"
on:click={() => { on:click={() => {
promptSuggestions.splice(promptIdx, 1); banners.splice(bannerIdx, 1);
promptSuggestions = promptSuggestions; banners = banners;
}} }}
> >
<svg <svg
@ -453,14 +378,97 @@
</div> </div>
{/each} {/each}
</div> </div>
{#if promptSuggestions.length > 0}
<div class="text-xs text-left w-full mt-2">
{$i18n.t('Adjusting these settings will apply changes universally to all users.')}
</div>
{/if}
</div> </div>
{/if}
{#if $user.role === 'admin'}
<div class=" space-y-3">
<div class="flex w-full justify-between mb-2">
<div class=" self-center text-sm font-semibold">
{$i18n.t('Default Prompt Suggestions')}
</div>
<button
class="p-1 px-3 text-xs flex rounded-sm transition"
type="button"
on:click={() => {
if (promptSuggestions.length === 0 || promptSuggestions.at(-1).content !== '') {
promptSuggestions = [...promptSuggestions, { content: '', title: ['', ''] }];
}
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
/>
</svg>
</button>
</div>
<div class="grid lg:grid-cols-2 flex-col gap-1.5">
{#each promptSuggestions as prompt, promptIdx}
<div
class=" flex border border-gray-100 dark:border-none dark:bg-gray-850 rounded-xl py-1.5"
>
<div class="flex flex-col flex-1 pl-1">
<div class="flex border-b border-gray-100 dark:border-gray-850 w-full">
<input
class="px-3 py-1.5 text-xs w-full bg-transparent outline-hidden border-r border-gray-100 dark:border-gray-850"
placeholder={$i18n.t('Title (e.g. Tell me a fun fact)')}
bind:value={prompt.title[0]}
/>
<input
class="px-3 py-1.5 text-xs w-full bg-transparent outline-hidden border-r border-gray-100 dark:border-gray-850"
placeholder={$i18n.t('Subtitle (e.g. about the Roman Empire)')}
bind:value={prompt.title[1]}
/>
</div>
<textarea
class="px-3 py-1.5 text-xs w-full bg-transparent outline-hidden border-r border-gray-100 dark:border-gray-850 resize-none"
placeholder={$i18n.t(
'Prompt (e.g. Tell me a fun fact about the Roman Empire)'
)}
rows="3"
bind:value={prompt.content}
/>
</div>
<button
class="px-3"
type="button"
on:click={() => {
promptSuggestions.splice(promptIdx, 1);
promptSuggestions = promptSuggestions;
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<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>
{/each}
</div>
{#if promptSuggestions.length > 0}
<div class="text-xs text-left w-full mt-2">
{$i18n.t('Adjusting these settings will apply changes universally to all users.')}
</div>
{/if}
</div>
{/if}
</div>
</div> </div>
<div class="flex justify-end text-sm font-medium"> <div class="flex justify-end text-sm font-medium">

2
src/lib/components/admin/Settings/Pipelines.svelte
View File

@ -271,7 +271,7 @@
/> />
<button <button
class="w-full text-sm font-medium py-2 bg-transparent hover:bg-gray-100 border border-dashed dark:border-gray-800 dark:hover:bg-gray-850 text-center rounded-xl" class="w-full text-sm font-medium py-2 bg-transparent hover:bg-gray-100 border border-dashed dark:border-gray-850 dark:hover:bg-gray-850 text-center rounded-xl"
type="button" type="button"
on:click={() => { on:click={() => {
document.getElementById('pipelines-upload-input')?.click(); document.getElementById('pipelines-upload-input')?.click();

4
src/lib/components/admin/Users/Groups.svelte
View File

@ -195,7 +195,7 @@
<div class="w-full"></div> <div class="w-full"></div>
</div> </div>
<hr class="mt-1.5 border-gray-50 dark:border-gray-850" /> <hr class="mt-1.5 border-gray-100 dark:border-gray-850" />
{#each filteredGroups as group} {#each filteredGroups as group}
<div class="my-2"> <div class="my-2">
@ -205,7 +205,7 @@
</div> </div>
{/if} {/if}
<hr class="mb-2 border-gray-50 dark:border-gray-850" /> <hr class="mb-2 border-gray-100 dark:border-gray-850" />
<GroupModal <GroupModal
bind:show={showDefaultPermissionsModal} bind:show={showDefaultPermissionsModal}

6
src/lib/components/admin/Users/Groups/Permissions.svelte
View File

@ -150,7 +150,7 @@
</div> </div>
</div> </div>
<hr class=" border-gray-50 dark:border-gray-850 my-2" /> --> <hr class=" border-gray-100 dark:border-gray-850 my-2" /> -->
<div> <div>
<div class=" mb-2 text-sm font-medium">{$i18n.t('Workspace Permissions')}</div> <div class=" mb-2 text-sm font-medium">{$i18n.t('Workspace Permissions')}</div>
@ -192,7 +192,7 @@
</div> </div>
</div> </div>
<hr class=" border-gray-50 dark:border-gray-850 my-2" /> <hr class=" border-gray-100 dark:border-gray-850 my-2" />
<div> <div>
<div class=" mb-2 text-sm font-medium">{$i18n.t('Chat Permissions')}</div> <div class=" mb-2 text-sm font-medium">{$i18n.t('Chat Permissions')}</div>
@ -238,7 +238,7 @@
</div> </div>
</div> </div>
<hr class=" border-gray-50 dark:border-gray-850 my-2" /> <hr class=" border-gray-100 dark:border-gray-850 my-2" />
<div> <div>
<div class=" mb-2 text-sm font-medium">{$i18n.t('Features Permissions')}</div> <div class=" mb-2 text-sm font-medium">{$i18n.t('Features Permissions')}</div>

4
src/lib/components/admin/Users/UserList/AddUserModal.svelte
View File

@ -208,7 +208,7 @@
</div> </div>
</div> </div>
<hr class=" border-gray-50 dark:border-gray-850 my-2.5 w-full" /> <hr class=" border-gray-100 dark:border-gray-850 my-2.5 w-full" />
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Email')}</div> <div class=" mb-1 text-xs text-gray-500">{$i18n.t('Email')}</div>
@ -249,7 +249,7 @@
/> />
<button <button
class="w-full text-sm font-medium py-3 bg-transparent hover:bg-gray-100 border border-dashed dark:border-gray-800 dark:hover:bg-gray-850 text-center rounded-xl" class="w-full text-sm font-medium py-3 bg-transparent hover:bg-gray-100 border border-dashed dark:border-gray-850 dark:hover:bg-gray-850 text-center rounded-xl"
type="button" type="button"
on:click={() => { on:click={() => {
document.getElementById('upload-user-csv-input')?.click(); document.getElementById('upload-user-csv-input')?.click();

2
src/lib/components/admin/Users/UserList/UserChatsModal.svelte
View File

@ -82,7 +82,7 @@
<div class="relative overflow-x-auto"> <div class="relative overflow-x-auto">
<table class="w-full text-sm text-left text-gray-600 dark:text-gray-400 table-auto"> <table class="w-full text-sm text-left text-gray-600 dark:text-gray-400 table-auto">
<thead <thead
class="text-xs text-gray-700 uppercase bg-transparent dark:text-gray-200 border-b-2 dark:border-gray-800" class="text-xs text-gray-700 uppercase bg-transparent dark:text-gray-200 border-b-2 dark:border-gray-850"
> >
<tr> <tr>
<th <th

2
src/lib/components/channel/Messages/Message.svelte
View File

@ -72,7 +72,7 @@
class=" absolute {showButtons ? '' : 'invisible group-hover:visible'} right-1 -top-2 z-10" class=" absolute {showButtons ? '' : 'invisible group-hover:visible'} right-1 -top-2 z-10"
> >
<div <div
class="flex gap-1 rounded-lg bg-white dark:bg-gray-850 shadow-md p-0.5 border border-gray-100 dark:border-gray-800" class="flex gap-1 rounded-lg bg-white dark:bg-gray-850 shadow-md p-0.5 border border-gray-100 dark:border-gray-850"
> >
<ReactionPicker <ReactionPicker
onClose={() => (showButtons = false)} onClose={() => (showButtons = false)}

2
src/lib/components/chat/ChatControls.svelte
View File

@ -230,7 +230,7 @@
<div <div
class="w-full {($showOverview || $showArtifacts) && !$showCallOverlay class="w-full {($showOverview || $showArtifacts) && !$showCallOverlay
? ' ' ? ' '
: 'px-4 py-4 bg-white dark:shadow-lg dark:bg-gray-850 border border-gray-50 dark:border-gray-850'} rounded-xl z-40 pointer-events-auto overflow-y-auto scrollbar-hidden" : 'px-4 py-4 bg-white dark:shadow-lg dark:bg-gray-850 border border-gray-100 dark:border-gray-850'} rounded-xl z-40 pointer-events-auto overflow-y-auto scrollbar-hidden"
> >
{#if $showCallOverlay} {#if $showCallOverlay}
<div class="w-full h-full flex justify-center"> <div class="w-full h-full flex justify-center">

2
src/lib/components/chat/ContentRenderer/FloatingButtons.svelte
View File

@ -262,7 +262,7 @@
</div> </div>
{:else} {:else}
<div <div
class="py-1 flex dark:text-gray-100 bg-gray-50 dark:bg-gray-800 border dark:border-gray-800 w-72 rounded-full shadow-xl" class="py-1 flex dark:text-gray-100 bg-gray-50 dark:bg-gray-800 border dark:border-gray-850 w-72 rounded-full shadow-xl"
> >
<input <input
type="text" type="text"

2
src/lib/components/chat/MessageInput/Commands.svelte
View File

@ -112,7 +112,7 @@
id="commands-container" id="commands-container"
class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10" class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10"
> >
<div class="flex w-full rounded-xl border border-gray-50 dark:border-gray-850"> <div class="flex w-full rounded-xl border border-gray-100 dark:border-gray-850">
<div <div
class="max-h-60 flex flex-col w-full rounded-xl bg-white dark:bg-gray-900 dark:text-gray-100" class="max-h-60 flex flex-col w-full rounded-xl bg-white dark:bg-gray-900 dark:text-gray-100"
> >

2
src/lib/components/chat/MessageInput/Commands/Knowledge.svelte
View File

@ -161,7 +161,7 @@
id="commands-container" id="commands-container"
class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10" class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10"
> >
<div class="flex w-full rounded-xl border border-gray-50 dark:border-gray-850"> <div class="flex w-full rounded-xl border border-gray-100 dark:border-gray-850">
<div <div
class="max-h-60 flex flex-col w-full rounded-xl bg-white dark:bg-gray-900 dark:text-gray-100" class="max-h-60 flex flex-col w-full rounded-xl bg-white dark:bg-gray-900 dark:text-gray-100"
> >

2
src/lib/components/chat/MessageInput/Commands/Models.svelte
View File

@ -70,7 +70,7 @@
id="commands-container" id="commands-container"
class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10" class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10"
> >
<div class="flex w-full rounded-xl border border-gray-50 dark:border-gray-850"> <div class="flex w-full rounded-xl border border-gray-100 dark:border-gray-850">
<div <div
class="max-h-60 flex flex-col w-full rounded-xl bg-white dark:bg-gray-900 dark:text-gray-100" class="max-h-60 flex flex-col w-full rounded-xl bg-white dark:bg-gray-900 dark:text-gray-100"
> >

2
src/lib/components/chat/MessageInput/Commands/Prompts.svelte
View File

@ -139,7 +139,7 @@
id="commands-container" id="commands-container"
class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10" class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10"
> >
<div class="flex w-full rounded-xl border border-gray-50 dark:border-gray-850"> <div class="flex w-full rounded-xl border border-gray-100 dark:border-gray-850">
<div <div
class="max-h-60 flex flex-col w-full rounded-xl bg-white dark:bg-gray-900 dark:text-gray-100" class="max-h-60 flex flex-col w-full rounded-xl bg-white dark:bg-gray-900 dark:text-gray-100"
> >

2
src/lib/components/chat/Messages/CodeBlock.svelte
View File

@ -302,7 +302,7 @@
{#if lang === 'mermaid'} {#if lang === 'mermaid'}
{#if mermaidHtml} {#if mermaidHtml}
<SvgPanZoom <SvgPanZoom
className=" border border-gray-50 dark:border-gray-850 rounded-lg max-h-fit overflow-hidden" className=" border border-gray-100 dark:border-gray-850 rounded-lg max-h-fit overflow-hidden"
svg={mermaidHtml} svg={mermaidHtml}
content={_token.text} content={_token.text}
/> />

6
src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
View File

@ -74,7 +74,7 @@
<!-- {JSON.stringify(tokens)} --> <!-- {JSON.stringify(tokens)} -->
{#each tokens as token, tokenIdx (tokenIdx)} {#each tokens as token, tokenIdx (tokenIdx)}
{#if token.type === 'hr'} {#if token.type === 'hr'}
<hr class=" border-gray-50 dark:border-gray-850" /> <hr class=" border-gray-100 dark:border-gray-850" />
{:else if token.type === 'heading'} {:else if token.type === 'heading'}
<svelte:element this={headerComponent(token.depth)}> <svelte:element this={headerComponent(token.depth)}>
<MarkdownInlineTokens id={`${id}-${tokenIdx}-h`} tokens={token.tokens} {onSourceClick} /> <MarkdownInlineTokens id={`${id}-${tokenIdx}-h`} tokens={token.tokens} {onSourceClick} />
@ -115,7 +115,7 @@
{#each token.header as header, headerIdx} {#each token.header as header, headerIdx}
<th <th
scope="col" scope="col"
class="px-3! py-1.5! cursor-pointer border border-gray-50 dark:border-gray-850" class="px-3! py-1.5! cursor-pointer border border-gray-100 dark:border-gray-850"
style={token.align[headerIdx] ? '' : `text-align: ${token.align[headerIdx]}`} style={token.align[headerIdx] ? '' : `text-align: ${token.align[headerIdx]}`}
> >
<div class="flex flex-col gap-1.5 text-left"> <div class="flex flex-col gap-1.5 text-left">
@ -136,7 +136,7 @@
<tr class="bg-white dark:bg-gray-900 dark:border-gray-850 text-xs"> <tr class="bg-white dark:bg-gray-900 dark:border-gray-850 text-xs">
{#each row ?? [] as cell, cellIdx} {#each row ?? [] as cell, cellIdx}
<td <td
class="px-3! py-1.5! text-gray-900 dark:text-white w-max border border-gray-50 dark:border-gray-850" class="px-3! py-1.5! text-gray-900 dark:text-white w-max border border-gray-100 dark:border-gray-850"
style={token.align[cellIdx] ? '' : `text-align: ${token.align[cellIdx]}`} style={token.align[cellIdx] ? '' : `text-align: ${token.align[cellIdx]}`}
> >
<div class="flex flex-col break-normal"> <div class="flex flex-col break-normal">

4
src/lib/components/chat/Messages/MultiResponseMessages.svelte
View File

@ -194,10 +194,10 @@
<div <div
class=" snap-center w-full max-w-full m-1 border {history.messages[messageId] class=" snap-center w-full max-w-full m-1 border {history.messages[messageId]
?.modelIdx == modelIdx ?.modelIdx == modelIdx
? `border-gray-100 dark:border-gray-800 border-[1.5px] ${ ? `border-gray-100 dark:border-gray-850 border-[1.5px] ${
$mobile ? 'min-w-full' : 'min-w-80' $mobile ? 'min-w-full' : 'min-w-80'
}` }`
: `border-gray-50 dark:border-gray-850 border-dashed ${ : `border-gray-100 dark:border-gray-850 border-dashed ${
$mobile ? 'min-w-full' : 'min-w-80' $mobile ? 'min-w-full' : 'min-w-80'
}`} transition-all p-5 rounded-2xl" }`} transition-all p-5 rounded-2xl"
on:click={async () => { on:click={async () => {

6
src/lib/components/chat/Messages/RateComment.svelte
View File

@ -110,7 +110,7 @@
{/if} {/if}
<div <div
class=" my-2.5 rounded-xl px-4 py-3 border border-gray-50 dark:border-gray-850" class=" my-2.5 rounded-xl px-4 py-3 border border-gray-100 dark:border-gray-850"
id="message-feedback-{message.id}" id="message-feedback-{message.id}"
> >
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
@ -142,7 +142,7 @@
<!-- 1-10 scale --> <!-- 1-10 scale -->
{#each Array.from({ length: 10 }).map((_, i) => i + 1) as rating} {#each Array.from({ length: 10 }).map((_, i) => i + 1) as rating}
<button <button
class="size-7 text-sm border border-gray-50 dark:border-gray-850 hover:bg-gray-50 dark:hover:bg-gray-850 {detailedRating === class="size-7 text-sm border border-gray-100 dark:border-gray-850 hover:bg-gray-50 dark:hover:bg-gray-850 {detailedRating ===
rating rating
? 'bg-gray-100 dark:bg-gray-800' ? 'bg-gray-100 dark:bg-gray-800'
: ''} transition rounded-full disabled:cursor-not-allowed disabled:text-gray-500 disabled:bg-white dark:disabled:bg-gray-900" : ''} transition rounded-full disabled:cursor-not-allowed disabled:text-gray-500 disabled:bg-white dark:disabled:bg-gray-900"
@ -175,7 +175,7 @@
<div class="flex flex-wrap gap-1.5 text-sm mt-1.5"> <div class="flex flex-wrap gap-1.5 text-sm mt-1.5">
{#each reasons as reason} {#each reasons as reason}
<button <button
class="px-3 py-0.5 border border-gray-50 dark:border-gray-850 hover:bg-gray-50 dark:hover:bg-gray-850 {selectedReason === class="px-3 py-0.5 border border-gray-100 dark:border-gray-850 hover:bg-gray-50 dark:hover:bg-gray-850 {selectedReason ===
reason reason
? 'bg-gray-100 dark:bg-gray-800' ? 'bg-gray-100 dark:bg-gray-800'
: ''} transition rounded-xl" : ''} transition rounded-xl"

4
src/lib/components/chat/ModelSelector/Selector.svelte
View File

@ -298,7 +298,7 @@
/> />
</div> </div>
<hr class="border-gray-50 dark:border-gray-800" /> <hr class="border-gray-100 dark:border-gray-850" />
{/if} {/if}
<div class="px-3 my-2 max-h-64 overflow-y-auto scrollbar-hidden group"> <div class="px-3 my-2 max-h-64 overflow-y-auto scrollbar-hidden group">
@ -575,7 +575,7 @@
</div> </div>
{#if showTemporaryChatControl} {#if showTemporaryChatControl}
<hr class="border-gray-50 dark:border-gray-800" /> <hr class="border-gray-100 dark:border-gray-850" />
<div class="flex items-center mx-2 my-2"> <div class="flex items-center mx-2 my-2">
<button <button

4
src/lib/components/chat/Settings/Personalization/ManageModal.svelte
View File

@ -66,7 +66,7 @@
<div class="relative overflow-x-auto"> <div class="relative overflow-x-auto">
<table class="w-full text-sm text-left text-gray-600 dark:text-gray-400 table-auto"> <table class="w-full text-sm text-left text-gray-600 dark:text-gray-400 table-auto">
<thead <thead
class="text-xs text-gray-700 uppercase bg-transparent dark:text-gray-200 border-b-2 dark:border-gray-800" class="text-xs text-gray-700 uppercase bg-transparent dark:text-gray-200 border-b-2 dark:border-gray-850"
> >
<tr> <tr>
<th scope="col" class="px-3 py-2"> {$i18n.t('Name')} </th> <th scope="col" class="px-3 py-2"> {$i18n.t('Name')} </th>
@ -78,7 +78,7 @@
</thead> </thead>
<tbody> <tbody>
{#each memories as memory} {#each memories as memory}
<tr class="border-b dark:border-gray-800 items-center"> <tr class="border-b dark:border-gray-850 items-center">
<td class="px-3 py-1"> <td class="px-3 py-1">
<div class="line-clamp-1"> <div class="line-clamp-1">
{memory.content} {memory.content}

2
src/lib/components/common/Banner.svelte
View File

@ -41,7 +41,7 @@
{#if !dismissed} {#if !dismissed}
{#if mounted} {#if mounted}
<div <div
class=" top-0 left-0 right-0 p-2 mx-4 px-3 flex justify-center items-center relative rounded-xl border border-gray-50 dark:border-gray-850 text-gray-800 dark:text-gary-100 bg-white dark:bg-gray-900 backdrop-blur-xl z-30" class=" top-0 left-0 right-0 p-2 mx-4 px-3 flex justify-center items-center relative rounded-xl border border-gray-100 dark:border-gray-850 text-gray-800 dark:text-gary-100 bg-white dark:bg-gray-900 backdrop-blur-xl z-30"
transition:fade={{ delay: 100, duration: 300 }} transition:fade={{ delay: 100, duration: 300 }}
> >
<div class=" flex flex-col md:flex-row md:items-center flex-1 text-sm w-fit gap-1.5"> <div class=" flex flex-col md:flex-row md:items-center flex-1 text-sm w-fit gap-1.5">

2
src/lib/components/common/Selector.svelte
View File

@ -64,7 +64,7 @@
/> />
</div> </div>
<hr class="border-gray-100 dark:border-gray-800" /> <hr class="border-gray-100 dark:border-gray-850" />
{/if} {/if}
<div class="px-3 my-2 max-h-80 overflow-y-auto"> <div class="px-3 my-2 max-h-80 overflow-y-auto">

4
src/lib/components/common/Valves.svelte
View File

@ -53,7 +53,7 @@
<div class=" flex-1"> <div class=" flex-1">
{#if valvesSpec.properties[property]?.enum ?? null} {#if valvesSpec.properties[property]?.enum ?? null}
<select <select
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-800" class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-850"
bind:value={valves[property]} bind:value={valves[property]}
on:change={() => { on:change={() => {
dispatch('change'); dispatch('change');
@ -82,7 +82,7 @@
</div> </div>
{:else} {:else}
<input <input
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-800" class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-850"
type="text" type="text"
placeholder={valvesSpec.properties[property].title} placeholder={valvesSpec.properties[property].title}
bind:value={valves[property]} bind:value={valves[property]}

2
src/lib/components/layout/Navbar/Menu.svelte
View File

@ -281,7 +281,7 @@
</DropdownMenu.Item> </DropdownMenu.Item>
{#if !$temporaryChatEnabled} {#if !$temporaryChatEnabled}
<hr class="border-gray-50 dark:border-gray-850 my-0.5" /> <hr class="border-gray-100 dark:border-gray-850 my-0.5" />
<div class="flex p-1"> <div class="flex p-1">
<Tags chatId={chat.id} /> <Tags chatId={chat.id} />

2
src/lib/components/layout/Sidebar/ArchivedChatsModal.svelte
View File

@ -134,7 +134,7 @@
<div class="relative overflow-x-auto"> <div class="relative overflow-x-auto">
<table class="w-full text-sm text-left text-gray-600 dark:text-gray-400 table-auto"> <table class="w-full text-sm text-left text-gray-600 dark:text-gray-400 table-auto">
<thead <thead
class="text-xs text-gray-700 uppercase bg-transparent dark:text-gray-200 border-b-2 dark:border-gray-800" class="text-xs text-gray-700 uppercase bg-transparent dark:text-gray-200 border-b-2 dark:border-gray-850"
> >
<tr> <tr>
<th scope="col" class="px-3 py-2"> {$i18n.t('Name')} </th> <th scope="col" class="px-3 py-2"> {$i18n.t('Name')} </th>

2
src/lib/components/layout/Sidebar/ChatMenu.svelte
View File

@ -245,7 +245,7 @@
<div class="flex items-center">{$i18n.t('Delete')}</div> <div class="flex items-center">{$i18n.t('Delete')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
<hr class="border-gray-50 dark:border-gray-850 my-0.5" /> <hr class="border-gray-100 dark:border-gray-850 my-0.5" />
<div class="flex p-1"> <div class="flex p-1">
<Tags <Tags

4
src/lib/components/layout/Sidebar/UserMenu.svelte
View File

@ -151,7 +151,7 @@
</a> </a>
{/if} {/if}
<hr class=" border-gray-50 dark:border-gray-850 my-1 p-0" /> <hr class=" border-gray-100 dark:border-gray-850 my-1 p-0" />
<button <button
class="flex rounded-md py-2 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition" class="flex rounded-md py-2 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
@ -185,7 +185,7 @@
</button> </button>
{#if $activeUserIds?.length > 0} {#if $activeUserIds?.length > 0}
<hr class=" border-gray-50 dark:border-gray-850 my-1 p-0" /> <hr class=" border-gray-100 dark:border-gray-850 my-1 p-0" />
<Tooltip <Tooltip
content={$USAGE_POOL && $USAGE_POOL.length > 0 content={$USAGE_POOL && $USAGE_POOL.length > 0

6
src/lib/components/playground/Chat.svelte
View File

@ -234,7 +234,7 @@
<div class="w-full"> <div class="w-full">
<select <select
class="w-full bg-transparent border border-gray-50 dark:border-gray-850 rounded-lg py-1 px-2 -mx-0.5 text-sm outline-hidden" class="w-full bg-transparent border border-gray-100 dark:border-gray-850 rounded-lg py-1 px-2 -mx-0.5 text-sm outline-hidden"
bind:value={selectedModelId} bind:value={selectedModelId}
> >
{#each $models as model} {#each $models as model}
@ -252,7 +252,7 @@
<Collapsible <Collapsible
className="w-full flex-1" className="w-full flex-1"
bind:open={showSystem} bind:open={showSystem}
buttonClassName="w-full rounded-lg text-sm border border-gray-50 dark:border-gray-850 w-full py-1 px-1.5" buttonClassName="w-full rounded-lg text-sm border border-gray-100 dark:border-gray-850 w-full py-1 px-1.5"
grow={true} grow={true}
> >
<div class="flex gap-2 justify-between items-center"> <div class="flex gap-2 justify-between items-center">
@ -321,7 +321,7 @@
<div class="text-xs font-medium text-gray-500 px-2 py-1"> <div class="text-xs font-medium text-gray-500 px-2 py-1">
{selectedModelId} {selectedModelId}
</div> </div>
<div class="border border-gray-50 dark:border-gray-850 w-full px-3 py-2.5 rounded-xl"> <div class="border border-gray-100 dark:border-gray-850 w-full px-3 py-2.5 rounded-xl">
<div class="py-0.5"> <div class="py-0.5">
<!-- $i18n.t('a user') --> <!-- $i18n.t('a user') -->
<!-- $i18n.t('an assistant') --> <!-- $i18n.t('an assistant') -->

2
src/lib/components/playground/Completions.svelte
View File

@ -152,7 +152,7 @@
<textarea <textarea
id="text-completion-textarea" id="text-completion-textarea"
bind:this={textCompletionAreaElement} bind:this={textCompletionAreaElement}
class="w-full h-full p-3 bg-transparent border border-gray-50 dark:border-gray-850 outline-hidden resize-none rounded-lg text-sm" class="w-full h-full p-3 bg-transparent border border-gray-100 dark:border-gray-850 outline-hidden resize-none rounded-lg text-sm"
bind:value={text} bind:value={text}
placeholder={$i18n.t("You're a helpful assistant.")} placeholder={$i18n.t("You're a helpful assistant.")}
/> />

8
src/lib/components/workspace/Models/ModelEditor.svelte
View File

@ -535,7 +535,7 @@
</div> </div>
</div> </div>
<hr class=" border-gray-50 dark:border-gray-850 my-1.5" /> <hr class=" border-gray-100 dark:border-gray-850 my-1.5" />
<div class="my-2"> <div class="my-2">
<div class="flex w-full justify-between"> <div class="flex w-full justify-between">
@ -589,7 +589,7 @@
</div> </div>
</div> </div>
<hr class=" border-gray-50 dark:border-gray-850 my-1" /> <hr class=" border-gray-100 dark:border-gray-850 my-1" />
<div class="my-2"> <div class="my-2">
<div class="flex w-full justify-between items-center"> <div class="flex w-full justify-between items-center">
@ -653,7 +653,7 @@
{#each info.meta.suggestion_prompts as prompt, promptIdx} {#each info.meta.suggestion_prompts as prompt, promptIdx}
<div class=" flex rounded-lg"> <div class=" flex rounded-lg">
<input <input
class=" text-sm w-full bg-transparent outline-hidden border-r border-gray-50 dark:border-gray-850" class=" text-sm w-full bg-transparent outline-hidden border-r border-gray-100 dark:border-gray-850"
placeholder={$i18n.t('Write a prompt suggestion (e.g. Who are you?)')} placeholder={$i18n.t('Write a prompt suggestion (e.g. Who are you?)')}
bind:value={prompt.content} bind:value={prompt.content}
/> />
@ -686,7 +686,7 @@
{/if} {/if}
</div> </div>
<hr class=" border-gray-50 dark:border-gray-850 my-1.5" /> <hr class=" border-gray-100 dark:border-gray-850 my-1.5" />
<div class="my-2"> <div class="my-2">
<Knowledge bind:selectedKnowledge={knowledge} collections={$knowledgeCollections} /> <Knowledge bind:selectedKnowledge={knowledge} collections={$knowledgeCollections} />

2
src/lib/components/workspace/Models/ModelMenu.svelte
View File

@ -86,7 +86,7 @@
<div class="flex items-center">{$i18n.t('Export')}</div> <div class="flex items-center">{$i18n.t('Export')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
<hr class="border-gray-100 dark:border-gray-800 my-1" /> <hr class="border-gray-100 dark:border-gray-850 my-1" />
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"

2
src/lib/components/workspace/Prompts/PromptMenu.svelte
View File

@ -76,7 +76,7 @@
<div class="flex items-center">{$i18n.t('Export')}</div> <div class="flex items-center">{$i18n.t('Export')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
<hr class="border-gray-100 dark:border-gray-800 my-1" /> <hr class="border-gray-100 dark:border-gray-850 my-1" />
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"

2
src/lib/components/workspace/Tools/ToolMenu.svelte
View File

@ -101,7 +101,7 @@
<div class="flex items-center">{$i18n.t('Export')}</div> <div class="flex items-center">{$i18n.t('Export')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
<hr class="border-gray-100 dark:border-gray-800 my-1" /> <hr class="border-gray-100 dark:border-gray-850 my-1" />
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"