AI/open-webui
1
0
Fork 1
mirror of https://git.mirrors.martin98.com/https://github.com/open-webui/open-webui synced 2025-08-19 22:39:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: tailwind v4 migration

Browse Source
This commit is contained in:
Timothy Jaeryang Baek 2025-02-15 19:27:25 -08:00
parent 30182d77cc
commit e3fa48b6ce
132 changed files with 1056 additions and 1034 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
backend/open_webui/static/swagger-ui/swagger-ui.css
View File

@ -9308,5 +9308,3 @@
.json-schema-2020-12__title:first-of-type { .json-schema-2020-12__title:first-of-type {
font-size: 16px; font-size: 16px;
} }
/*# sourceMappingURL=swagger-ui.css.map*/

1055
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -26,10 +26,10 @@
"@sveltejs/kit": "^2.5.20", "@sveltejs/kit": "^2.5.20",
"@sveltejs/vite-plugin-svelte": "^3.1.1", "@sveltejs/vite-plugin-svelte": "^3.1.1",
"@tailwindcss/container-queries": "^0.1.1", "@tailwindcss/container-queries": "^0.1.1",
"@tailwindcss/postcss": "^4.0.0",
"@tailwindcss/typography": "^0.5.13", "@tailwindcss/typography": "^0.5.13",
"@typescript-eslint/eslint-plugin": "^6.17.0", "@typescript-eslint/eslint-plugin": "^6.17.0",
"@typescript-eslint/parser": "^6.17.0", "@typescript-eslint/parser": "^6.17.0",
"autoprefixer": "^10.4.16",
"cypress": "^13.15.0", "cypress": "^13.15.0",
"eslint": "^8.56.0", "eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
@ -43,7 +43,7 @@
"svelte": "^4.2.18", "svelte": "^4.2.18",
"svelte-check": "^3.8.5", "svelte-check": "^3.8.5",
"svelte-confetti": "^1.3.2", "svelte-confetti": "^1.3.2",
"tailwindcss": "^3.3.3", "tailwindcss": "^4.0.0",
"tslib": "^2.4.1", "tslib": "^2.4.1",
"typescript": "^5.5.4", "typescript": "^5.5.4",
"vite": "^5.4.14", "vite": "^5.4.14",

3
postcss.config.js
View File

@ -1,6 +1,5 @@
export default { export default {
plugins: { plugins: {
tailwindcss: {}, '@tailwindcss/postcss': {},
autoprefixer: {}
} }
}; };

16
src/app.css
View File

@ -1,3 +1,5 @@
@reference "./tailwind.css";
@font-face { @font-face {
font-family: 'Inter'; font-family: 'Inter';
src: url('/assets/fonts/Inter-Variable.ttf'); src: url('/assets/fonts/Inter-Variable.ttf');
@ -217,8 +219,18 @@ input[type='number'] {
width: 100%; width: 100%;
} }
.cm-scroller { .cm-scroller:active::-webkit-scrollbar-thumb,
@apply scrollbar-hidden; .cm-scroller:focus::-webkit-scrollbar-thumb,
.cm-scroller:hover::-webkit-scrollbar-thumb {
visibility: visible;
}
.cm-scroller::-webkit-scrollbar-thumb {
visibility: hidden;
}
.cm-scroller::-webkit-scrollbar-corner {
display: none;
} }
.cm-editor.cm-focused { .cm-editor.cm-focused {

12
src/lib/components/AddConnectionModal.svelte
View File

@ -169,7 +169,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none" class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
type="text" type="text"
bind:value={url} bind:value={url}
placeholder={$i18n.t('API Base URL')} placeholder={$i18n.t('API Base URL')}
@ -202,7 +202,7 @@
</button> </button>
</Tooltip> </Tooltip>
<div class="flex flex-col flex-shrink-0 self-end"> <div class="flex flex-col shrink-0 self-end">
<Tooltip content={enable ? $i18n.t('Enabled') : $i18n.t('Disabled')}> <Tooltip content={enable ? $i18n.t('Enabled') : $i18n.t('Disabled')}>
<Switch bind:state={enable} /> <Switch bind:state={enable} />
</Tooltip> </Tooltip>
@ -215,7 +215,7 @@
<div class="flex-1"> <div class="flex-1">
<SensitiveInput <SensitiveInput
className="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none" className="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
bind:value={key} bind:value={key}
placeholder={$i18n.t('API Key')} placeholder={$i18n.t('API Key')}
required={!ollama} required={!ollama}
@ -233,7 +233,7 @@
)} )}
> >
<input <input
class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none" class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
type="text" type="text"
bind:value={prefixId} bind:value={prefixId}
placeholder={$i18n.t('Prefix ID')} placeholder={$i18n.t('Prefix ID')}
@ -258,7 +258,7 @@
<div class=" text-sm flex-1 py-1 rounded-lg"> <div class=" text-sm flex-1 py-1 rounded-lg">
{modelId} {modelId}
</div> </div>
<div class="flex-shrink-0"> <div class="shrink-0">
<button <button
type="button" type="button"
on:click={() => { on:click={() => {
@ -292,7 +292,7 @@
<input <input
class="w-full py-1 text-sm rounded-lg bg-transparent {modelId class="w-full py-1 text-sm rounded-lg bg-transparent {modelId
? '' ? ''
: 'text-gray-500'} placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none" : 'text-gray-500'} placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
bind:value={modelId} bind:value={modelId}
placeholder={$i18n.t('Add a model ID')} placeholder={$i18n.t('Add a model ID')}
/> />

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

@ -37,7 +37,7 @@
dispatch('closeToast'); dispatch('closeToast');
}} }}
> >
<div class="flex-shrink-0 self-top -translate-y-0.5"> <div class="shrink-0 self-top -translate-y-0.5">
<img src={'/static/favicon.png'} alt="favicon" class="size-7 rounded-full" /> <img src={'/static/favicon.png'} alt="favicon" class="size-7 rounded-full" />
</div> </div>

4
src/lib/components/OnBoarding.svelte
View File

@ -30,10 +30,10 @@
<SlideShow duration={5000} /> <SlideShow duration={5000} />
<div <div
class="w-full h-full absolute top-0 left-0 bg-gradient-to-t from-20% from-black to-transparent" class="w-full h-full absolute top-0 left-0 bg-linear-to-t from-20% from-black to-transparent"
></div> ></div>
<div class="w-full h-full absolute top-0 left-0 backdrop-blur-sm bg-black/50"></div> <div class="w-full h-full absolute top-0 left-0 backdrop-blur-xs bg-black/50"></div>
<div class="relative bg-transparent w-full min-h-screen flex z-10"> <div class="relative bg-transparent w-full min-h-screen flex z-10">
<div class="flex flex-col justify-end w-full items-center pb-10 text-center"> <div class="flex flex-col justify-end w-full items-center pb-10 text-center">

6
src/lib/components/admin/Evaluations/Feedbacks.svelte
View File

@ -131,14 +131,14 @@
</div> </div>
</div> </div>
<div class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full rounded pt-0.5"> <div class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full rounded-sm pt-0.5">
{#if (feedbacks ?? []).length === 0} {#if (feedbacks ?? []).length === 0}
<div class="text-center text-xs text-gray-500 dark:text-gray-400 py-1"> <div class="text-center text-xs text-gray-500 dark:text-gray-400 py-1">
{$i18n.t('No feedbacks found')} {$i18n.t('No feedbacks found')}
</div> </div>
{:else} {:else}
<table <table
class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full rounded" class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full rounded-sm"
> >
<thead <thead
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400 -translate-y-0.5" class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400 -translate-y-0.5"
@ -169,7 +169,7 @@
<td class=" py-0.5 text-right font-semibold"> <td class=" py-0.5 text-right font-semibold">
<div class="flex justify-center"> <div class="flex justify-center">
<Tooltip content={feedback?.user?.name}> <Tooltip content={feedback?.user?.name}>
<div class="flex-shrink-0"> <div class="shrink-0">
<img <img
src={feedback?.user?.profile_image_url ?? '/user.png'} src={feedback?.user?.profile_image_url ?? '/user.png'}
alt={feedback?.user?.name} alt={feedback?.user?.name}

6
src/lib/components/admin/Evaluations/Leaderboard.svelte
View File

@ -288,7 +288,7 @@
<MagnifyingGlass className="size-3" /> <MagnifyingGlass className="size-3" />
</div> </div>
<input <input
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent" class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
bind:value={query} bind:value={query}
placeholder={$i18n.t('Search')} placeholder={$i18n.t('Search')}
on:focus={() => { on:focus={() => {
@ -300,7 +300,7 @@
</div> </div>
</div> </div>
<div class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full rounded pt-0.5"> <div class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full rounded-sm pt-0.5">
{#if loadingLeaderboard} {#if loadingLeaderboard}
<div class=" absolute top-0 bottom-0 left-0 right-0 flex"> <div class=" absolute top-0 bottom-0 left-0 right-0 flex">
<div class="m-auto"> <div class="m-auto">
@ -349,7 +349,7 @@
</td> </td>
<td class="px-3 py-1.5 flex flex-col justify-center"> <td class="px-3 py-1.5 flex flex-col justify-center">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<div class="flex-shrink-0"> <div class="shrink-0">
<img <img
src={model?.info?.meta?.profile_image_url ?? '/favicon.png'} src={model?.info?.meta?.profile_image_url ?? '/favicon.png'}
alt={model.name} alt={model.name}

12
src/lib/components/admin/Functions.svelte
View File

@ -180,12 +180,12 @@
window.addEventListener('keydown', onKeyDown); window.addEventListener('keydown', onKeyDown);
window.addEventListener('keyup', onKeyUp); window.addEventListener('keyup', onKeyUp);
window.addEventListener('blur', onBlur); window.addEventListener('blur-sm', onBlur);
return () => { return () => {
window.removeEventListener('keydown', onKeyDown); window.removeEventListener('keydown', onKeyDown);
window.removeEventListener('keyup', onKeyUp); window.removeEventListener('keyup', onKeyUp);
window.removeEventListener('blur', onBlur); window.removeEventListener('blur-sm', onBlur);
}; };
}); });
</script> </script>
@ -211,7 +211,7 @@
<Search className="size-3.5" /> <Search className="size-3.5" />
</div> </div>
<input <input
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent" class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
bind:value={query} bind:value={query}
placeholder={$i18n.t('Search Functions')} placeholder={$i18n.t('Search Functions')}
/> />
@ -241,14 +241,14 @@
<div class=" flex-1 self-center pl-1"> <div class=" flex-1 self-center pl-1">
<div class=" font-semibold flex items-center gap-1.5"> <div class=" font-semibold flex items-center gap-1.5">
<div <div
class=" text-xs font-bold px-1 rounded uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200" class=" text-xs font-bold px-1 rounded-sm uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200"
> >
{func.type} {func.type}
</div> </div>
{#if func?.meta?.manifest?.version} {#if func?.meta?.manifest?.version}
<div <div
class="text-xs font-bold px-1 rounded line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200" class="text-xs font-bold px-1 rounded-sm line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200"
> >
v{func?.meta?.manifest?.version ?? ''} v{func?.meta?.manifest?.version ?? ''}
</div> </div>
@ -260,7 +260,7 @@
</div> </div>
<div class="flex gap-1.5 px-1"> <div class="flex gap-1.5 px-1">
<div class=" text-gray-500 text-xs font-medium flex-shrink-0">{func.id}</div> <div class=" text-gray-500 text-xs font-medium shrink-0">{func.id}</div>
<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1"> <div class=" text-xs overflow-hidden text-ellipsis line-clamp-1">
{func.meta.description} {func.meta.description}

10
src/lib/components/admin/Functions/FunctionEditor.svelte
View File

@ -300,7 +300,7 @@ class Pipe:
<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-0.5"> <div class="w-full mb-2 flex flex-col gap-0.5">
<div class="flex w-full items-center"> <div class="flex w-full items-center">
<div class=" flex-shrink-0 mr-2"> <div class=" shrink-0 mr-2">
<Tooltip content={$i18n.t('Back')}> <Tooltip content={$i18n.t('Back')}>
<button <button
class="w-full text-left text-sm py-1.5 px-1 rounded-lg dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-gray-850" class="w-full text-left text-sm py-1.5 px-1 rounded-lg dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-gray-850"
@ -317,7 +317,7 @@ class Pipe:
<div class="flex-1"> <div class="flex-1">
<Tooltip content={$i18n.t('e.g. My Filter')} placement="top-start"> <Tooltip content={$i18n.t('e.g. My Filter')} placement="top-start">
<input <input
class="w-full text-2xl font-medium bg-transparent outline-none font-primary" class="w-full text-2xl font-medium bg-transparent outline-hidden font-primary"
type="text" type="text"
placeholder={$i18n.t('Function Name')} placeholder={$i18n.t('Function Name')}
bind:value={name} bind:value={name}
@ -333,13 +333,13 @@ class Pipe:
<div class=" flex gap-2 px-1 items-center"> <div class=" flex gap-2 px-1 items-center">
{#if edit} {#if edit}
<div class="text-sm text-gray-500 flex-shrink-0"> <div class="text-sm text-gray-500 shrink-0">
{id} {id}
</div> </div>
{:else} {:else}
<Tooltip className="w-full" content={$i18n.t('e.g. my_filter')} placement="top-start"> <Tooltip className="w-full" content={$i18n.t('e.g. my_filter')} placement="top-start">
<input <input
class="w-full text-sm disabled:text-gray-500 bg-transparent outline-none" class="w-full text-sm disabled:text-gray-500 bg-transparent outline-hidden"
type="text" type="text"
placeholder={$i18n.t('Function ID')} placeholder={$i18n.t('Function ID')}
bind:value={id} bind:value={id}
@ -355,7 +355,7 @@ class Pipe:
placement="top-start" placement="top-start"
> >
<input <input
class="w-full text-sm bg-transparent outline-none" class="w-full text-sm bg-transparent outline-hidden"
type="text" type="text"
placeholder={$i18n.t('Function Description')} placeholder={$i18n.t('Function Description')}
bind:value={meta.description} bind:value={meta.description}

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

@ -42,7 +42,7 @@
<div slot="content"> <div slot="content">
<DropdownMenu.Content <DropdownMenu.Content
class="w-full max-w-[180px] rounded-xl px-1 py-1.5 border border-gray-300/30 dark:border-gray-700/50 z-50 bg-white dark:bg-gray-850 dark:text-white shadow" class="w-full max-w-[180px] rounded-xl px-1 py-1.5 border border-gray-300/30 dark:border-gray-700/50 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm"
sideOffset={-2} sideOffset={-2}
side="bottom" side="bottom"
align="start" align="start"

48
src/lib/components/admin/Settings/Audio.svelte
View File

@ -172,7 +172,7 @@
<div class=" self-center text-xs font-medium">{$i18n.t('Speech-to-Text Engine')}</div> <div class=" self-center text-xs font-medium">{$i18n.t('Speech-to-Text Engine')}</div>
<div class="flex items-center relative"> <div class="flex items-center relative">
<select <select
class="dark:bg-gray-900 cursor-pointer w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right" class="dark:bg-gray-900 cursor-pointer w-fit pr-8 rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-right"
bind:value={STT_ENGINE} bind:value={STT_ENGINE}
placeholder="Select an engine" placeholder="Select an engine"
> >
@ -188,7 +188,7 @@
<div> <div>
<div class="mt-1 flex gap-2 mb-1"> <div class="mt-1 flex gap-2 mb-1">
<input <input
class="flex-1 w-full bg-transparent outline-none" class="flex-1 w-full bg-transparent outline-hidden"
placeholder={$i18n.t('API Base URL')} placeholder={$i18n.t('API Base URL')}
bind:value={STT_OPENAI_API_BASE_URL} bind:value={STT_OPENAI_API_BASE_URL}
required required
@ -198,7 +198,7 @@
</div> </div>
</div> </div>
<hr class=" dark:border-gray-850 my-2" /> <hr class="border-gray-100 dark:border-gray-850 my-2" />
<div> <div>
<div class=" mb-1.5 text-sm font-medium">{$i18n.t('STT Model')}</div> <div class=" mb-1.5 text-sm font-medium">{$i18n.t('STT Model')}</div>
@ -206,7 +206,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
list="model-list" list="model-list"
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
bind:value={STT_MODEL} bind:value={STT_MODEL}
placeholder="Select a model" placeholder="Select a model"
/> />
@ -224,14 +224,14 @@
</div> </div>
</div> </div>
<hr class=" dark:border-gray-850 my-2" /> <hr class="border-gray-100 dark:border-gray-850 my-2" />
<div> <div>
<div class=" mb-1.5 text-sm font-medium">{$i18n.t('STT Model')}</div> <div class=" mb-1.5 text-sm font-medium">{$i18n.t('STT Model')}</div>
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1"> <div class="flex-1">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
bind:value={STT_MODEL} bind:value={STT_MODEL}
placeholder="Select a model (optional)" placeholder="Select a model (optional)"
/> />
@ -255,7 +255,7 @@
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1 mr-2"> <div class="flex-1 mr-2">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
placeholder={$i18n.t('Set whisper model')} placeholder={$i18n.t('Set whisper model')}
bind:value={STT_WHISPER_MODEL} bind:value={STT_WHISPER_MODEL}
/> />
@ -333,7 +333,7 @@
{/if} {/if}
</div> </div>
<hr class=" dark:border-gray-800" /> <hr class="border-gray-100 dark:border-gray-850" />
<div> <div>
<div class=" mb-1 text-sm font-medium">{$i18n.t('TTS Settings')}</div> <div class=" mb-1 text-sm font-medium">{$i18n.t('TTS Settings')}</div>
@ -342,7 +342,7 @@
<div class=" self-center text-xs font-medium">{$i18n.t('Text-to-Speech Engine')}</div> <div class=" self-center text-xs font-medium">{$i18n.t('Text-to-Speech Engine')}</div>
<div class="flex items-center relative"> <div class="flex items-center relative">
<select <select
class=" dark:bg-gray-900 w-fit pr-8 cursor-pointer rounded px-2 p-1 text-xs bg-transparent outline-none text-right" class=" dark:bg-gray-900 w-fit pr-8 cursor-pointer rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-right"
bind:value={TTS_ENGINE} bind:value={TTS_ENGINE}
placeholder="Select a mode" placeholder="Select a mode"
on:change={async (e) => { on:change={async (e) => {
@ -372,7 +372,7 @@
<div> <div>
<div class="mt-1 flex gap-2 mb-1"> <div class="mt-1 flex gap-2 mb-1">
<input <input
class="flex-1 w-full bg-transparent outline-none" class="flex-1 w-full bg-transparent outline-hidden"
placeholder={$i18n.t('API Base URL')} placeholder={$i18n.t('API Base URL')}
bind:value={TTS_OPENAI_API_BASE_URL} bind:value={TTS_OPENAI_API_BASE_URL}
required required
@ -385,7 +385,7 @@
<div> <div>
<div class="mt-1 flex gap-2 mb-1"> <div class="mt-1 flex gap-2 mb-1">
<input <input
class="flex-1 w-full rounded-lg py-2 pl-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="flex-1 w-full rounded-lg py-2 pl-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
placeholder={$i18n.t('API Key')} placeholder={$i18n.t('API Key')}
bind:value={TTS_API_KEY} bind:value={TTS_API_KEY}
required required
@ -396,13 +396,13 @@
<div> <div>
<div class="mt-1 flex gap-2 mb-1"> <div class="mt-1 flex gap-2 mb-1">
<input <input
class="flex-1 w-full rounded-lg py-2 pl-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="flex-1 w-full rounded-lg py-2 pl-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
placeholder={$i18n.t('API Key')} placeholder={$i18n.t('API Key')}
bind:value={TTS_API_KEY} bind:value={TTS_API_KEY}
required required
/> />
<input <input
class="flex-1 w-full rounded-lg py-2 pl-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="flex-1 w-full rounded-lg py-2 pl-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
placeholder={$i18n.t('Azure Region')} placeholder={$i18n.t('Azure Region')}
bind:value={TTS_AZURE_SPEECH_REGION} bind:value={TTS_AZURE_SPEECH_REGION}
required required
@ -411,7 +411,7 @@
</div> </div>
{/if} {/if}
<hr class=" dark:border-gray-850 my-2" /> <hr class="border-gray-100 dark:border-gray-850 my-2" />
{#if TTS_ENGINE === ''} {#if TTS_ENGINE === ''}
<div> <div>
@ -419,7 +419,7 @@
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1"> <div class="flex-1">
<select <select
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
bind:value={TTS_VOICE} bind:value={TTS_VOICE}
> >
<option value="" selected={TTS_VOICE !== ''}>{$i18n.t('Default')}</option> <option value="" selected={TTS_VOICE !== ''}>{$i18n.t('Default')}</option>
@ -442,7 +442,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
list="model-list" list="model-list"
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
bind:value={TTS_MODEL} bind:value={TTS_MODEL}
placeholder="CMU ARCTIC speaker embedding name" placeholder="CMU ARCTIC speaker embedding name"
/> />
@ -484,7 +484,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
list="voice-list" list="voice-list"
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
bind:value={TTS_VOICE} bind:value={TTS_VOICE}
placeholder="Select a voice" placeholder="Select a voice"
/> />
@ -503,7 +503,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
list="tts-model-list" list="tts-model-list"
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
bind:value={TTS_MODEL} bind:value={TTS_MODEL}
placeholder="Select a model" placeholder="Select a model"
/> />
@ -525,7 +525,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
list="voice-list" list="voice-list"
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
bind:value={TTS_VOICE} bind:value={TTS_VOICE}
placeholder="Select a voice" placeholder="Select a voice"
/> />
@ -544,7 +544,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
list="tts-model-list" list="tts-model-list"
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
bind:value={TTS_MODEL} bind:value={TTS_MODEL}
placeholder="Select a model" placeholder="Select a model"
/> />
@ -566,7 +566,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
list="voice-list" list="voice-list"
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
bind:value={TTS_VOICE} bind:value={TTS_VOICE}
placeholder="Select a voice" placeholder="Select a voice"
/> />
@ -593,7 +593,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
list="tts-model-list" list="tts-model-list"
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
bind:value={TTS_AZURE_SPEECH_OUTPUT_FORMAT} bind:value={TTS_AZURE_SPEECH_OUTPUT_FORMAT}
placeholder="Select a output format" placeholder="Select a output format"
/> />
@ -603,13 +603,13 @@
</div> </div>
{/if} {/if}
<hr class="dark:border-gray-850 my-2" /> <hr class="border-gray-100 dark:border-gray-850 my-2" />
<div class="pt-0.5 flex w-full justify-between"> <div class="pt-0.5 flex w-full justify-between">
<div class="self-center text-xs font-medium">{$i18n.t('Response splitting')}</div> <div class="self-center text-xs font-medium">{$i18n.t('Response splitting')}</div>
<div class="flex items-center relative"> <div class="flex items-center relative">
<select <select
class="dark:bg-gray-900 w-fit pr-8 cursor-pointer rounded px-2 p-1 text-xs bg-transparent outline-none text-right" class="dark:bg-gray-900 w-fit pr-8 cursor-pointer rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-right"
aria-label="Select how to split message text for TTS requests" aria-label="Select how to split message text for TTS requests"
bind:value={TTS_SPLIT_ON} bind:value={TTS_SPLIT_ON}
> >

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

@ -58,7 +58,7 @@
<div class=" self-center text-xs font-medium">{$i18n.t('Code Interpreter Engine')}</div> <div class=" self-center text-xs font-medium">{$i18n.t('Code Interpreter Engine')}</div>
<div class="flex items-center relative"> <div class="flex items-center relative">
<select <select
class="dark:bg-gray-900 w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right" class="dark:bg-gray-900 w-fit pr-8 rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-right"
bind:value={config.CODE_INTERPRETER_ENGINE} bind:value={config.CODE_INTERPRETER_ENGINE}
placeholder={$i18n.t('Select a engine')} placeholder={$i18n.t('Select a engine')}
required required
@ -80,7 +80,7 @@
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1"> <div class="flex-1">
<input <input
class="w-full text-sm py-0.5 placeholder:text-gray-300 dark:placeholder:text-gray-700 bg-transparent outline-none" class="w-full text-sm py-0.5 placeholder:text-gray-300 dark:placeholder:text-gray-700 bg-transparent outline-hidden"
type="text" type="text"
placeholder={$i18n.t('Enter Jupyter URL')} placeholder={$i18n.t('Enter Jupyter URL')}
bind:value={config.CODE_INTERPRETER_JUPYTER_URL} bind:value={config.CODE_INTERPRETER_JUPYTER_URL}
@ -97,7 +97,7 @@
<div> <div>
<select <select
class="dark:bg-gray-900 w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-left" class="dark:bg-gray-900 w-fit pr-8 rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-left"
bind:value={config.CODE_INTERPRETER_JUPYTER_AUTH} bind:value={config.CODE_INTERPRETER_JUPYTER_AUTH}
placeholder={$i18n.t('Select an auth method')} placeholder={$i18n.t('Select an auth method')}
> >
@ -132,7 +132,7 @@
{/if} {/if}
</div> </div>
<hr class=" dark:border-gray-850 my-2" /> <hr class="border-gray-100 dark:border-gray-850 my-2" />
<div> <div>
<div class="py-0.5 w-full"> <div class="py-0.5 w-full">

2
src/lib/components/admin/Settings/Connections/ManageOllamaModal.svelte
View File

@ -16,7 +16,7 @@
<div <div
class="flex w-full justify-between items-center text-lg font-medium self-center font-primary" class="flex w-full justify-between items-center text-lg font-medium self-center font-primary"
> >
<div class=" flex-shrink-0"> <div class=" shrink-0">
{$i18n.t('Manage Ollama')} {$i18n.t('Manage Ollama')}
</div> </div>
</div> </div>

2
src/lib/components/admin/Settings/Connections/OllamaConnection.svelte
View File

@ -56,7 +56,7 @@
{/if} {/if}
<input <input
class="w-full text-sm bg-transparent outline-none" class="w-full text-sm bg-transparent outline-hidden"
placeholder={$i18n.t('Enter URL (e.g. http://localhost:11434)')} placeholder={$i18n.t('Enter URL (e.g. http://localhost:11434)')}
bind:value={url} bind:value={url}
/> />

4
src/lib/components/admin/Settings/Connections/OpenAIConnection.svelte
View File

@ -54,7 +54,7 @@
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1 relative"> <div class="flex-1 relative">
<input <input
class=" outline-none w-full bg-transparent {pipeline ? 'pr-8' : ''}" class=" outline-hidden w-full bg-transparent {pipeline ? 'pr-8' : ''}"
placeholder={$i18n.t('API Base URL')} placeholder={$i18n.t('API Base URL')}
bind:value={url} bind:value={url}
autocomplete="off" autocomplete="off"
@ -85,7 +85,7 @@
</div> </div>
<SensitiveInput <SensitiveInput
inputClassName=" outline-none bg-transparent w-full" inputClassName=" outline-hidden bg-transparent w-full"
placeholder={$i18n.t('API Key')} placeholder={$i18n.t('API Key')}
bind:value={key} bind:value={key}
/> />

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

@ -119,7 +119,7 @@
</div> </div>
</button> </button>
<hr class=" dark:border-gray-850 my-1" /> <hr class="border-gray-100 dark:border-gray-850 my-1" />
{#if $config?.features.enable_admin_export ?? true} {#if $config?.features.enable_admin_export ?? true}
<div class=" flex w-full justify-between"> <div class=" flex w-full justify-between">

46
src/lib/components/admin/Settings/Documents.svelte
View File

@ -296,7 +296,7 @@
<div class=" self-center text-xs font-medium">{$i18n.t('Embedding Model Engine')}</div> <div class=" self-center text-xs font-medium">{$i18n.t('Embedding Model Engine')}</div>
<div class="flex items-center relative"> <div class="flex items-center relative">
<select <select
class="dark:bg-gray-900 w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right" class="dark:bg-gray-900 w-fit pr-8 rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-right"
bind:value={embeddingEngine} bind:value={embeddingEngine}
placeholder="Select an embedding model engine" placeholder="Select an embedding model engine"
on:change={(e) => { on:change={(e) => {
@ -319,7 +319,7 @@
{#if embeddingEngine === 'openai'} {#if embeddingEngine === 'openai'}
<div class="my-0.5 flex gap-2 pr-2"> <div class="my-0.5 flex gap-2 pr-2">
<input <input
class="flex-1 w-full rounded-lg text-sm bg-transparent outline-none" class="flex-1 w-full rounded-lg text-sm bg-transparent outline-hidden"
placeholder={$i18n.t('API Base URL')} placeholder={$i18n.t('API Base URL')}
bind:value={OpenAIUrl} bind:value={OpenAIUrl}
required required
@ -330,7 +330,7 @@
{:else if embeddingEngine === 'ollama'} {:else if embeddingEngine === 'ollama'}
<div class="my-0.5 flex gap-2 pr-2"> <div class="my-0.5 flex gap-2 pr-2">
<input <input
class="flex-1 w-full rounded-lg text-sm bg-transparent outline-none" class="flex-1 w-full rounded-lg text-sm bg-transparent outline-hidden"
placeholder={$i18n.t('API Base URL')} placeholder={$i18n.t('API Base URL')}
bind:value={OllamaUrl} bind:value={OllamaUrl}
required required
@ -375,7 +375,7 @@
<div class=" self-center text-xs font-medium">{$i18n.t('Hybrid Search')}</div> <div class=" self-center text-xs font-medium">{$i18n.t('Hybrid Search')}</div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
toggleHybridSearch(); toggleHybridSearch();
}} }}
@ -390,7 +390,7 @@
</div> </div>
</div> </div>
<hr class="dark:border-gray-850" /> <hr class="border-gray-100 dark:border-gray-850" />
<div class="space-y-2" /> <div class="space-y-2" />
<div> <div>
@ -400,7 +400,7 @@
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1 mr-2"> <div class="flex-1 mr-2">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
bind:value={embeddingModel} bind:value={embeddingModel}
placeholder={$i18n.t('Set embedding model')} placeholder={$i18n.t('Set embedding model')}
required required
@ -411,7 +411,7 @@
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1 mr-2"> <div class="flex-1 mr-2">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
placeholder={$i18n.t('Set embedding model (e.g. {{model}})', { placeholder={$i18n.t('Set embedding model (e.g. {{model}})', {
model: embeddingModel.slice(-40) model: embeddingModel.slice(-40)
})} })}
@ -490,7 +490,7 @@
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1 mr-2"> <div class="flex-1 mr-2">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
placeholder={$i18n.t('Set reranking model (e.g. {{model}})', { placeholder={$i18n.t('Set reranking model (e.g. {{model}})', {
model: 'BAAI/bge-reranker-v2-m3' model: 'BAAI/bge-reranker-v2-m3'
})} })}
@ -555,7 +555,7 @@
{/if} {/if}
</div> </div>
<hr class=" dark:border-gray-850" /> <hr class=" border-gray-100 dark:border-gray-850" />
<div class=""> <div class="">
<div class="text-sm font-medium mb-1">{$i18n.t('Content Extraction')}</div> <div class="text-sm font-medium mb-1">{$i18n.t('Content Extraction')}</div>
@ -564,7 +564,7 @@
<div class="self-center text-xs font-medium">{$i18n.t('Engine')}</div> <div class="self-center text-xs font-medium">{$i18n.t('Engine')}</div>
<div class="flex items-center relative"> <div class="flex items-center relative">
<select <select
class="dark:bg-gray-900 w-fit pr-8 rounded px-2 text-xs bg-transparent outline-none text-right" class="dark:bg-gray-900 w-fit pr-8 rounded-sm px-2 text-xs bg-transparent outline-hidden text-right"
bind:value={contentExtractionEngine} bind:value={contentExtractionEngine}
on:change={(e) => { on:change={(e) => {
showTikaServerUrl = e.target.value === 'tika'; showTikaServerUrl = e.target.value === 'tika';
@ -580,7 +580,7 @@
<div class="flex w-full mt-1"> <div class="flex w-full mt-1">
<div class="flex-1 mr-2"> <div class="flex-1 mr-2">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
placeholder={$i18n.t('Enter Tika Server URL')} placeholder={$i18n.t('Enter Tika Server URL')}
bind:value={tikaServerUrl} bind:value={tikaServerUrl}
/> />
@ -589,7 +589,7 @@
{/if} {/if}
</div> </div>
<hr class=" dark:border-gray-850" /> <hr class=" border-gray-100 dark:border-gray-850" />
<div class="text-sm font-medium mb-1">{$i18n.t('Google Drive')}</div> <div class="text-sm font-medium mb-1">{$i18n.t('Google Drive')}</div>
@ -602,7 +602,7 @@
</div> </div>
</div> </div>
<hr class=" dark:border-gray-850" /> <hr class=" border-gray-100 dark:border-gray-850" />
<div class=" "> <div class=" ">
<div class=" text-sm font-medium mb-1">{$i18n.t('Query Params')}</div> <div class=" text-sm font-medium mb-1">{$i18n.t('Query Params')}</div>
@ -613,7 +613,7 @@
<div class="w-full"> <div class="w-full">
<input <input
class=" w-full rounded-lg py-1.5 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class=" w-full rounded-lg py-1.5 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
type="number" type="number"
placeholder={$i18n.t('Enter Top K')} placeholder={$i18n.t('Enter Top K')}
bind:value={querySettings.k} bind:value={querySettings.k}
@ -631,7 +631,7 @@
<div class="w-full"> <div class="w-full">
<input <input
class=" w-full rounded-lg py-1.5 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class=" w-full rounded-lg py-1.5 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
type="number" type="number"
step="0.01" step="0.01"
placeholder={$i18n.t('Enter Score')} placeholder={$i18n.t('Enter Score')}
@ -667,7 +667,7 @@
</div> </div>
</div> </div>
<hr class=" dark:border-gray-850" /> <hr class=" border-gray-100 dark:border-gray-850" />
<div class=" "> <div class=" ">
<div class="mb-1 text-sm font-medium">{$i18n.t('Chunk Params')}</div> <div class="mb-1 text-sm font-medium">{$i18n.t('Chunk Params')}</div>
@ -676,7 +676,7 @@
<div class="self-center text-xs font-medium">{$i18n.t('Text Splitter')}</div> <div class="self-center text-xs font-medium">{$i18n.t('Text Splitter')}</div>
<div class="flex items-center relative"> <div class="flex items-center relative">
<select <select
class="dark:bg-gray-900 w-fit pr-8 rounded px-2 text-xs bg-transparent outline-none text-right" class="dark:bg-gray-900 w-fit pr-8 rounded-sm px-2 text-xs bg-transparent outline-hidden text-right"
bind:value={textSplitter} bind:value={textSplitter}
> >
<option value="">{$i18n.t('Default')} ({$i18n.t('Character')})</option> <option value="">{$i18n.t('Default')} ({$i18n.t('Character')})</option>
@ -692,7 +692,7 @@
</div> </div>
<div class="self-center"> <div class="self-center">
<input <input
class=" w-full rounded-lg py-1.5 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class=" w-full rounded-lg py-1.5 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
type="number" type="number"
placeholder={$i18n.t('Enter Chunk Size')} placeholder={$i18n.t('Enter Chunk Size')}
bind:value={chunkSize} bind:value={chunkSize}
@ -709,7 +709,7 @@
<div class="self-center"> <div class="self-center">
<input <input
class="w-full rounded-lg py-1.5 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-1.5 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
type="number" type="number"
placeholder={$i18n.t('Enter Chunk Overlap')} placeholder={$i18n.t('Enter Chunk Overlap')}
bind:value={chunkOverlap} bind:value={chunkOverlap}
@ -731,7 +731,7 @@
</div> </div>
</div> </div>
<hr class=" dark:border-gray-850" /> <hr class=" border-gray-100 dark:border-gray-850" />
<div class=""> <div class="">
<div class="text-sm font-medium mb-1">{$i18n.t('Files')}</div> <div class="text-sm font-medium mb-1">{$i18n.t('Files')}</div>
@ -750,7 +750,7 @@
placement="top-start" placement="top-start"
> >
<input <input
class="w-full rounded-lg py-1.5 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-1.5 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
type="number" type="number"
placeholder={$i18n.t('Leave empty for unlimited')} placeholder={$i18n.t('Leave empty for unlimited')}
bind:value={fileMaxSize} bind:value={fileMaxSize}
@ -773,7 +773,7 @@
placement="top-start" placement="top-start"
> >
<input <input
class=" w-full rounded-lg py-1.5 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class=" w-full rounded-lg py-1.5 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
type="number" type="number"
placeholder={$i18n.t('Leave empty for unlimited')} placeholder={$i18n.t('Leave empty for unlimited')}
bind:value={fileMaxCount} bind:value={fileMaxCount}
@ -786,7 +786,7 @@
</div> </div>
</div> </div>
<hr class=" dark:border-gray-850" /> <hr class=" border-gray-100 dark:border-gray-850" />
<div> <div>
<button <button

10
src/lib/components/admin/Settings/Evaluations/ArenaModelModal.svelte
View File

@ -245,7 +245,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none" class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
type="text" type="text"
bind:value={name} bind:value={name}
placeholder={$i18n.t('Model Name')} placeholder={$i18n.t('Model Name')}
@ -260,7 +260,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none" class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
type="text" type="text"
bind:value={id} bind:value={id}
placeholder={$i18n.t('Model ID')} placeholder={$i18n.t('Model ID')}
@ -277,7 +277,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none" class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
type="text" type="text"
bind:value={description} bind:value={description}
placeholder={$i18n.t('Enter description')} placeholder={$i18n.t('Enter description')}
@ -324,7 +324,7 @@
<div class=" text-sm flex-1 py-1 rounded-lg"> <div class=" text-sm flex-1 py-1 rounded-lg">
{$models.find((model) => model.id === modelId)?.name} {$models.find((model) => model.id === modelId)?.name}
</div> </div>
<div class="flex-shrink-0"> <div class="shrink-0">
<button <button
type="button" type="button"
on:click={() => { on:click={() => {
@ -350,7 +350,7 @@
<select <select
class="w-full py-1 text-sm rounded-lg bg-transparent {selectedModelId class="w-full py-1 text-sm rounded-lg bg-transparent {selectedModelId
? '' ? ''
: 'text-gray-500'} placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none" : 'text-gray-500'} placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
bind:value={selectedModelId} bind:value={selectedModelId}
> >
<option value="">{$i18n.t('Select a model')}</option> <option value="">{$i18n.t('Select a model')}</option>

2
src/lib/components/admin/Settings/Evaluations/Model.svelte
View File

@ -34,7 +34,7 @@
<div class="w-full flex flex-col"> <div class="w-full flex flex-col">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<div class="flex-shrink-0 line-clamp-1"> <div class="shrink-0 line-clamp-1">
{model.name} {model.name}
</div> </div>
</div> </div>

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

@ -246,7 +246,7 @@
<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>
<div class="flex items-center relative"> <div class="flex items-center relative">
<select <select
class="dark:bg-gray-900 w-fit pr-8 rounded px-2 text-xs bg-transparent outline-none text-right" class="dark:bg-gray-900 w-fit pr-8 rounded-sm px-2 text-xs bg-transparent outline-hidden text-right"
bind:value={adminConfig.DEFAULT_USER_ROLE} bind:value={adminConfig.DEFAULT_USER_ROLE}
placeholder="Select a role" placeholder="Select a role"
> >
@ -293,7 +293,7 @@
</div> </div>
<input <input
class="w-full mt-1 rounded-lg text-sm dark:text-gray-300 bg-transparent outline-none" class="w-full mt-1 rounded-lg text-sm dark:text-gray-300 bg-transparent outline-hidden"
type="text" type="text"
placeholder={`e.g.) /api/v1/messages, /api/v1/channels`} placeholder={`e.g.) /api/v1/messages, /api/v1/channels`}
bind:value={adminConfig.API_KEY_ALLOWED_ENDPOINTS} bind:value={adminConfig.API_KEY_ALLOWED_ENDPOINTS}
@ -320,7 +320,7 @@
<div class="flex mt-2 space-x-2"> <div class="flex mt-2 space-x-2">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
type="text" type="text"
placeholder={`e.g.) "30m","1h", "10d". `} placeholder={`e.g.) "30m","1h", "10d". `}
bind:value={adminConfig.JWT_EXPIRES_IN} bind:value={adminConfig.JWT_EXPIRES_IN}
@ -358,7 +358,7 @@
{$i18n.t('Label')} {$i18n.t('Label')}
</div> </div>
<input <input
class="w-full bg-transparent outline-none py-0.5" class="w-full bg-transparent outline-hidden py-0.5"
required required
placeholder={$i18n.t('Enter server label')} placeholder={$i18n.t('Enter server label')}
bind:value={LDAP_SERVER.label} bind:value={LDAP_SERVER.label}
@ -372,7 +372,7 @@
{$i18n.t('Host')} {$i18n.t('Host')}
</div> </div>
<input <input
class="w-full bg-transparent outline-none py-0.5" class="w-full bg-transparent outline-hidden py-0.5"
required required
placeholder={$i18n.t('Enter server host')} placeholder={$i18n.t('Enter server host')}
bind:value={LDAP_SERVER.host} bind:value={LDAP_SERVER.host}
@ -388,7 +388,7 @@
className="w-full" className="w-full"
> >
<input <input
class="w-full bg-transparent outline-none py-0.5" class="w-full bg-transparent outline-hidden py-0.5"
type="number" type="number"
placeholder={$i18n.t('Enter server port')} placeholder={$i18n.t('Enter server port')}
bind:value={LDAP_SERVER.port} bind:value={LDAP_SERVER.port}
@ -406,7 +406,7 @@
placement="top-start" placement="top-start"
> >
<input <input
class="w-full bg-transparent outline-none py-0.5" class="w-full bg-transparent outline-hidden py-0.5"
required required
placeholder={$i18n.t('Enter Application DN')} placeholder={$i18n.t('Enter Application DN')}
bind:value={LDAP_SERVER.app_dn} bind:value={LDAP_SERVER.app_dn}
@ -435,7 +435,7 @@
placement="top-start" placement="top-start"
> >
<input <input
class="w-full bg-transparent outline-none py-0.5" class="w-full bg-transparent outline-hidden py-0.5"
required required
placeholder={$i18n.t('Example: mail')} placeholder={$i18n.t('Example: mail')}
bind:value={LDAP_SERVER.attribute_for_mail} bind:value={LDAP_SERVER.attribute_for_mail}
@ -455,7 +455,7 @@
placement="top-start" placement="top-start"
> >
<input <input
class="w-full bg-transparent outline-none py-0.5" class="w-full bg-transparent outline-hidden py-0.5"
required required
placeholder={$i18n.t( placeholder={$i18n.t(
'Example: sAMAccountName or uid or userPrincipalName' 'Example: sAMAccountName or uid or userPrincipalName'
@ -475,7 +475,7 @@
placement="top-start" placement="top-start"
> >
<input <input
class="w-full bg-transparent outline-none py-0.5" class="w-full bg-transparent outline-hidden py-0.5"
required required
placeholder={$i18n.t('Example: ou=users,dc=foo,dc=example')} placeholder={$i18n.t('Example: ou=users,dc=foo,dc=example')}
bind:value={LDAP_SERVER.search_base} bind:value={LDAP_SERVER.search_base}
@ -489,7 +489,7 @@
{$i18n.t('Search Filters')} {$i18n.t('Search Filters')}
</div> </div>
<input <input
class="w-full bg-transparent outline-none py-0.5" class="w-full bg-transparent outline-hidden py-0.5"
placeholder={$i18n.t('Example: (&(objectClass=inetOrgPerson)(uid=%s))')} placeholder={$i18n.t('Example: (&(objectClass=inetOrgPerson)(uid=%s))')}
bind:value={LDAP_SERVER.search_filters} bind:value={LDAP_SERVER.search_filters}
/> />
@ -519,7 +519,7 @@
{$i18n.t('Certificate Path')} {$i18n.t('Certificate Path')}
</div> </div>
<input <input
class="w-full bg-transparent outline-none py-0.5" class="w-full bg-transparent outline-hidden py-0.5"
required required
placeholder={$i18n.t('Enter certificate path')} placeholder={$i18n.t('Enter certificate path')}
bind:value={LDAP_SERVER.certificate_path} bind:value={LDAP_SERVER.certificate_path}
@ -533,7 +533,7 @@
</div> </div>
<Tooltip content={$i18n.t('Default to ALL')} placement="top-start"> <Tooltip content={$i18n.t('Default to ALL')} placement="top-start">
<input <input
class="w-full bg-transparent outline-none py-0.5" class="w-full bg-transparent outline-hidden py-0.5"
placeholder={$i18n.t('Example: ALL')} placeholder={$i18n.t('Example: ALL')}
bind:value={LDAP_SERVER.ciphers} bind:value={LDAP_SERVER.ciphers}
/> />
@ -583,7 +583,7 @@
<div class="flex mt-2 space-x-2"> <div class="flex mt-2 space-x-2">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
type="text" type="text"
placeholder={`e.g.) "http://localhost:3000"`} placeholder={`e.g.) "http://localhost:3000"`}
bind:value={adminConfig.WEBUI_URL} bind:value={adminConfig.WEBUI_URL}
@ -604,7 +604,7 @@
<div class="flex mt-2 space-x-2"> <div class="flex mt-2 space-x-2">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
type="text" type="text"
placeholder={`https://example.com/webhook`} placeholder={`https://example.com/webhook`}
bind:value={webhookUrl} bind:value={webhookUrl}

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

@ -284,7 +284,7 @@
<div class=" self-center text-xs font-medium">{$i18n.t('Image Generation Engine')}</div> <div class=" self-center text-xs font-medium">{$i18n.t('Image Generation Engine')}</div>
<div class="flex items-center relative"> <div class="flex items-center relative">
<select <select
class=" dark:bg-gray-900 w-fit pr-8 cursor-pointer rounded px-2 p-1 text-xs bg-transparent outline-none text-right" class=" dark:bg-gray-900 w-fit pr-8 cursor-pointer rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-right"
bind:value={config.engine} bind:value={config.engine}
placeholder={$i18n.t('Select Engine')} placeholder={$i18n.t('Select Engine')}
on:change={async () => { on:change={async () => {
@ -298,7 +298,7 @@
</div> </div>
</div> </div>
</div> </div>
<hr class=" dark:border-gray-850" /> <hr class=" border-gray-100 dark:border-gray-850" />
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
{#if (config?.engine ?? 'automatic1111') === 'automatic1111'} {#if (config?.engine ?? 'automatic1111') === 'automatic1111'}
@ -307,7 +307,7 @@
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1 mr-2"> <div class="flex-1 mr-2">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
placeholder={$i18n.t('Enter URL (e.g. http://127.0.0.1:7860/)')} placeholder={$i18n.t('Enter URL (e.g. http://127.0.0.1:7860/)')}
bind:value={config.automatic1111.AUTOMATIC1111_BASE_URL} bind:value={config.automatic1111.AUTOMATIC1111_BASE_URL}
/> />
@ -386,7 +386,7 @@
<Tooltip content={$i18n.t('Enter Sampler (e.g. Euler a)')} placement="top-start"> <Tooltip content={$i18n.t('Enter Sampler (e.g. Euler a)')} placement="top-start">
<input <input
list="sampler-list" list="sampler-list"
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
placeholder={$i18n.t('Enter Sampler (e.g. Euler a)')} placeholder={$i18n.t('Enter Sampler (e.g. Euler a)')}
bind:value={config.automatic1111.AUTOMATIC1111_SAMPLER} bind:value={config.automatic1111.AUTOMATIC1111_SAMPLER}
/> />
@ -408,7 +408,7 @@
<Tooltip content={$i18n.t('Enter Scheduler (e.g. Karras)')} placement="top-start"> <Tooltip content={$i18n.t('Enter Scheduler (e.g. Karras)')} placement="top-start">
<input <input
list="scheduler-list" list="scheduler-list"
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
placeholder={$i18n.t('Enter Scheduler (e.g. Karras)')} placeholder={$i18n.t('Enter Scheduler (e.g. Karras)')}
bind:value={config.automatic1111.AUTOMATIC1111_SCHEDULER} bind:value={config.automatic1111.AUTOMATIC1111_SCHEDULER}
/> />
@ -429,7 +429,7 @@
<div class="flex-1 mr-2"> <div class="flex-1 mr-2">
<Tooltip content={$i18n.t('Enter CFG Scale (e.g. 7.0)')} placement="top-start"> <Tooltip content={$i18n.t('Enter CFG Scale (e.g. 7.0)')} placement="top-start">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
placeholder={$i18n.t('Enter CFG Scale (e.g. 7.0)')} placeholder={$i18n.t('Enter CFG Scale (e.g. 7.0)')}
bind:value={config.automatic1111.AUTOMATIC1111_CFG_SCALE} bind:value={config.automatic1111.AUTOMATIC1111_CFG_SCALE}
/> />
@ -443,7 +443,7 @@
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1 mr-2"> <div class="flex-1 mr-2">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
placeholder={$i18n.t('Enter URL (e.g. http://127.0.0.1:7860/)')} placeholder={$i18n.t('Enter URL (e.g. http://127.0.0.1:7860/)')}
bind:value={config.comfyui.COMFYUI_BASE_URL} bind:value={config.comfyui.COMFYUI_BASE_URL}
/> />
@ -497,7 +497,7 @@
{#if config.comfyui.COMFYUI_WORKFLOW} {#if config.comfyui.COMFYUI_WORKFLOW}
<textarea <textarea
class="w-full rounded-lg mb-1 py-2 px-4 text-xs bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none disabled:text-gray-600 resize-none" class="w-full rounded-lg mb-1 py-2 px-4 text-xs bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden disabled:text-gray-600 resize-none"
rows="10" rows="10"
bind:value={config.comfyui.COMFYUI_WORKFLOW} bind:value={config.comfyui.COMFYUI_WORKFLOW}
required required
@ -548,7 +548,7 @@
<div class="text-xs flex flex-col gap-1.5"> <div class="text-xs flex flex-col gap-1.5">
{#each requiredWorkflowNodes as node} {#each requiredWorkflowNodes as node}
<div class="flex w-full items-center border dark:border-gray-850 rounded-lg"> <div class="flex w-full items-center border dark:border-gray-850 rounded-lg">
<div class="flex-shrink-0"> <div class="shrink-0">
<div <div
class=" capitalize line-clamp-1 font-medium px-3 py-1 w-20 text-center rounded-l-lg bg-green-500/10 text-green-700 dark:text-green-200" class=" capitalize line-clamp-1 font-medium px-3 py-1 w-20 text-center rounded-l-lg bg-green-500/10 text-green-700 dark:text-green-200"
> >
@ -558,7 +558,7 @@
<div class=""> <div class="">
<Tooltip content="Input Key (e.g. text, unet_name, steps)"> <Tooltip content="Input Key (e.g. text, unet_name, steps)">
<input <input
class="py-1 px-3 w-24 text-xs text-center bg-transparent outline-none border-r dark:border-gray-850" class="py-1 px-3 w-24 text-xs text-center bg-transparent outline-hidden border-r dark:border-gray-850"
placeholder="Key" placeholder="Key"
bind:value={node.key} bind:value={node.key}
required required
@ -572,7 +572,7 @@
placement="top-start" placement="top-start"
> >
<input <input
class="w-full py-1 px-4 rounded-r-lg text-xs bg-transparent outline-none" class="w-full py-1 px-4 rounded-r-lg text-xs bg-transparent outline-hidden"
placeholder="Node Ids" placeholder="Node Ids"
bind:value={node.node_ids} bind:value={node.node_ids}
/> />
@ -593,7 +593,7 @@
<div class="flex gap-2 mb-1"> <div class="flex gap-2 mb-1">
<input <input
class="flex-1 w-full text-sm bg-transparent outline-none" class="flex-1 w-full text-sm bg-transparent outline-hidden"
placeholder={$i18n.t('API Base URL')} placeholder={$i18n.t('API Base URL')}
bind:value={config.openai.OPENAI_API_BASE_URL} bind:value={config.openai.OPENAI_API_BASE_URL}
required required
@ -609,7 +609,7 @@
</div> </div>
{#if config?.enabled} {#if config?.enabled}
<hr class=" dark:border-gray-850" /> <hr class=" border-gray-100 dark:border-gray-850" />
<div> <div>
<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set Default Model')}</div> <div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set Default Model')}</div>
@ -620,7 +620,7 @@
<Tooltip content={$i18n.t('Enter Model ID')} placement="top-start"> <Tooltip content={$i18n.t('Enter Model ID')} placement="top-start">
<input <input
list="model-list" list="model-list"
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
bind:value={imageGenerationConfig.MODEL} bind:value={imageGenerationConfig.MODEL}
placeholder="Select a model" placeholder="Select a model"
required required
@ -644,7 +644,7 @@
<div class="flex-1 mr-2"> <div class="flex-1 mr-2">
<Tooltip content={$i18n.t('Enter Image Size (e.g. 512x512)')} placement="top-start"> <Tooltip content={$i18n.t('Enter Image Size (e.g. 512x512)')} placement="top-start">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
placeholder={$i18n.t('Enter Image Size (e.g. 512x512)')} placeholder={$i18n.t('Enter Image Size (e.g. 512x512)')}
bind:value={imageGenerationConfig.IMAGE_SIZE} bind:value={imageGenerationConfig.IMAGE_SIZE}
required required
@ -660,7 +660,7 @@
<div class="flex-1 mr-2"> <div class="flex-1 mr-2">
<Tooltip content={$i18n.t('Enter Number of Steps (e.g. 50)')} placement="top-start"> <Tooltip content={$i18n.t('Enter Number of Steps (e.g. 50)')} placement="top-start">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
placeholder={$i18n.t('Enter Number of Steps (e.g. 50)')} placeholder={$i18n.t('Enter Number of Steps (e.g. 50)')}
bind:value={imageGenerationConfig.IMAGE_STEPS} bind:value={imageGenerationConfig.IMAGE_STEPS}
required required

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

@ -97,7 +97,7 @@
<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
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
bind:value={taskConfig.TASK_MODEL} bind:value={taskConfig.TASK_MODEL}
placeholder={$i18n.t('Select a model')} placeholder={$i18n.t('Select a model')}
> >
@ -113,7 +113,7 @@
<div class="flex-1"> <div class="flex-1">
<div class=" text-xs mb-1">{$i18n.t('External Models')}</div> <div class=" text-xs mb-1">{$i18n.t('External Models')}</div>
<select <select
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
bind:value={taskConfig.TASK_MODEL_EXTERNAL} bind:value={taskConfig.TASK_MODEL_EXTERNAL}
placeholder={$i18n.t('Select a model')} placeholder={$i18n.t('Select a model')}
> >
@ -194,7 +194,7 @@
placement="top-start" placement="top-start"
> >
<input <input
class="w-full outline-none bg-transparent" class="w-full outline-hidden bg-transparent"
bind:value={taskConfig.AUTOCOMPLETE_GENERATION_INPUT_MAX_LENGTH} bind:value={taskConfig.AUTOCOMPLETE_GENERATION_INPUT_MAX_LENGTH}
placeholder={$i18n.t('-1 for no limit, or a positive integer for a specific limit')} placeholder={$i18n.t('-1 for no limit, or a positive integer for a specific limit')}
/> />
@ -288,7 +288,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
type="button" type="button"
on:click={() => { on:click={() => {
if (banners.length === 0 || banners.at(-1).content !== '') { if (banners.length === 0 || banners.at(-1).content !== '') {
@ -323,7 +323,7 @@
<div class=" flex justify-between"> <div class=" flex justify-between">
<div class="flex flex-row flex-1 border rounded-xl dark:border-gray-800"> <div class="flex flex-row flex-1 border rounded-xl dark:border-gray-800">
<select <select
class="w-fit capitalize rounded-xl py-2 px-4 text-xs bg-transparent outline-none" class="w-fit capitalize rounded-xl py-2 px-4 text-xs bg-transparent outline-hidden"
bind:value={banner.type} bind:value={banner.type}
required required
> >
@ -339,7 +339,7 @@
</select> </select>
<input <input
class="pr-5 py-1.5 text-xs w-full bg-transparent outline-none" class="pr-5 py-1.5 text-xs w-full bg-transparent outline-hidden"
placeholder={$i18n.t('Content')} placeholder={$i18n.t('Content')}
bind:value={banner.content} bind:value={banner.content}
/> />
@ -383,7 +383,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded 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 (promptSuggestions.length === 0 || promptSuggestions.at(-1).content !== '') {
@ -411,20 +411,20 @@
<div class="flex flex-col flex-1 pl-1"> <div class="flex flex-col flex-1 pl-1">
<div class="flex border-b border-gray-100 dark:border-gray-800 w-full"> <div class="flex border-b border-gray-100 dark:border-gray-800 w-full">
<input <input
class="px-3 py-1.5 text-xs w-full bg-transparent outline-none border-r border-gray-100 dark:border-gray-800" 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)')} placeholder={$i18n.t('Title (e.g. Tell me a fun fact)')}
bind:value={prompt.title[0]} bind:value={prompt.title[0]}
/> />
<input <input
class="px-3 py-1.5 text-xs w-full bg-transparent outline-none border-r border-gray-100 dark:border-gray-800" 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('Subtitle (e.g. about the Roman Empire)')} placeholder={$i18n.t('Subtitle (e.g. about the Roman Empire)')}
bind:value={prompt.title[1]} bind:value={prompt.title[1]}
/> />
</div> </div>
<textarea <textarea
class="px-3 py-1.5 text-xs w-full bg-transparent outline-none border-r border-gray-100 dark:border-gray-800 resize-none" 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"
placeholder={$i18n.t('Prompt (e.g. Tell me a fun fact about the Roman Empire)')} placeholder={$i18n.t('Prompt (e.g. Tell me a fun fact about the Roman Empire)')}
rows="3" rows="3"
bind:value={prompt.content} bind:value={prompt.content}

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

@ -199,7 +199,7 @@
<Search className="size-3.5" /> <Search className="size-3.5" />
</div> </div>
<input <input
class=" w-full text-sm py-1 rounded-r-xl outline-none bg-transparent" class=" w-full text-sm py-1 rounded-r-xl outline-hidden bg-transparent"
bind:value={searchValue} bind:value={searchValue}
placeholder={$i18n.t('Search Models')} placeholder={$i18n.t('Search Models')}
/> />

4
src/lib/components/admin/Settings/Models/ConfigureModelsModal.svelte
View File

@ -165,7 +165,7 @@
<select <select
class="w-full py-1 text-sm rounded-lg bg-transparent {selectedModelId class="w-full py-1 text-sm rounded-lg bg-transparent {selectedModelId
? '' ? ''
: 'text-gray-500'} placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none" : 'text-gray-500'} placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
bind:value={selectedModelId} bind:value={selectedModelId}
> >
<option value="">{$i18n.t('Select a model')}</option> <option value="">{$i18n.t('Select a model')}</option>
@ -186,7 +186,7 @@
<div class=" text-sm flex-1 py-1 rounded-lg"> <div class=" text-sm flex-1 py-1 rounded-lg">
{$models.find((model) => model.id === modelId)?.name} {$models.find((model) => model.id === modelId)?.name}
</div> </div>
<div class="flex-shrink-0"> <div class="shrink-0">
<button <button
type="button" type="button"
on:click={() => { on:click={() => {

2
src/lib/components/admin/Settings/Models/Manage/ManageMultipleOllama.svelte
View File

@ -12,7 +12,7 @@
{#if ollamaConfig} {#if ollamaConfig}
<div class="flex-1 mb-2.5 pr-1.5 rounded-lg bg-gray-50 dark:text-gray-300 dark:bg-gray-850"> <div class="flex-1 mb-2.5 pr-1.5 rounded-lg bg-gray-50 dark:text-gray-300 dark:bg-gray-850">
<select <select
class="w-full py-2 px-4 text-sm outline-none bg-transparent" class="w-full py-2 px-4 text-sm outline-hidden bg-transparent"
bind:value={selectedUrlIdx} bind:value={selectedUrlIdx}
placeholder={$i18n.t('Select an Ollama instance')} placeholder={$i18n.t('Select an Ollama instance')}
> >

14
src/lib/components/admin/Settings/Models/Manage/ManageOllama.svelte
View File

@ -598,7 +598,7 @@
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1 mr-2"> <div class="flex-1 mr-2">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
placeholder={$i18n.t('Enter model tag (e.g. {{modelTag}})', { placeholder={$i18n.t('Enter model tag (e.g. {{modelTag}})', {
modelTag: 'mistral:7b' modelTag: 'mistral:7b'
})} })}
@ -740,7 +740,7 @@
class="flex-1 mr-2 pr-1.5 rounded-lg bg-gray-50 dark:text-gray-300 dark:bg-gray-850" class="flex-1 mr-2 pr-1.5 rounded-lg bg-gray-50 dark:text-gray-300 dark:bg-gray-850"
> >
<select <select
class="w-full py-2 px-4 text-sm outline-none bg-transparent" class="w-full py-2 px-4 text-sm outline-hidden bg-transparent"
bind:value={deleteModelTag} bind:value={deleteModelTag}
placeholder={$i18n.t('Select a model')} placeholder={$i18n.t('Select a model')}
> >
@ -781,7 +781,7 @@
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1 mr-2 flex flex-col gap-2"> <div class="flex-1 mr-2 flex flex-col gap-2">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
placeholder={$i18n.t('Enter model tag (e.g. {{modelTag}})', { placeholder={$i18n.t('Enter model tag (e.g. {{modelTag}})', {
modelTag: 'my-modelfile' modelTag: 'my-modelfile'
})} })}
@ -791,7 +791,7 @@
<textarea <textarea
bind:value={createModelObject} bind:value={createModelObject}
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-100 dark:bg-gray-850 outline-none resize-none scrollbar-hidden" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-100 dark:bg-gray-850 outline-hidden resize-none scrollbar-hidden"
rows="6" rows="6"
placeholder={`e.g. {"model": "my-modelfile", "from": "ollama:7b"})`} placeholder={`e.g. {"model": "my-modelfile", "from": "ollama:7b"})`}
disabled={createModelLoading} disabled={createModelLoading}
@ -870,7 +870,7 @@
<div class=" text-sm font-medium">{$i18n.t('Upload a GGUF model')}</div> <div class=" text-sm font-medium">{$i18n.t('Upload a GGUF model')}</div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
if (modelUploadMode === 'file') { if (modelUploadMode === 'file') {
modelUploadMode = 'url'; modelUploadMode = 'url';
@ -922,7 +922,7 @@
{:else} {:else}
<div class="flex-1 {modelFileUrl !== '' ? 'mr-2' : ''}"> <div class="flex-1 {modelFileUrl !== '' ? 'mr-2' : ''}">
<input <input
class="w-full rounded-lg text-left py-2 px-4 bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none {modelFileUrl !== class="w-full rounded-lg text-left py-2 px-4 bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden {modelFileUrl !==
'' ''
? 'mr-2' ? 'mr-2'
: ''}" : ''}"
@ -998,7 +998,7 @@
</div> </div>
<textarea <textarea
bind:value={modelFileContent} bind:value={modelFileContent}
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-100 dark:bg-gray-850 outline-none resize-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-100 dark:bg-gray-850 outline-hidden resize-none"
rows="6" rows="6"
/> />
</div> </div>

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

@ -234,7 +234,7 @@
<div class="flex gap-2"> <div class="flex gap-2">
<div class="flex-1"> <div class="flex-1">
<select <select
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
bind:value={selectedPipelinesUrlIdx} bind:value={selectedPipelinesUrlIdx}
placeholder={$i18n.t('Select a pipeline url')} placeholder={$i18n.t('Select a pipeline url')}
on:change={async () => { on:change={async () => {
@ -348,7 +348,7 @@
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1 mr-2"> <div class="flex-1 mr-2">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
placeholder={$i18n.t('Enter Github Raw URL')} placeholder={$i18n.t('Enter Github Raw URL')}
bind:value={pipelineDownloadUrl} bind:value={pipelineDownloadUrl}
/> />
@ -432,7 +432,7 @@
<div class="flex gap-2"> <div class="flex gap-2">
<div class="flex-1"> <div class="flex-1">
<select <select
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
bind:value={selectedPipelineIdx} bind:value={selectedPipelineIdx}
placeholder={$i18n.t('Select a pipeline')} placeholder={$i18n.t('Select a pipeline')}
on:change={async () => { on:change={async () => {
@ -482,7 +482,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
type="button" type="button"
on:click={() => { on:click={() => {
valves[property] = (valves[property] ?? null) === null ? '' : null; valves[property] = (valves[property] ?? null) === null ? '' : null;
@ -502,7 +502,7 @@
<div class=" flex-1"> <div class=" flex-1">
{#if valves_spec.properties[property]?.enum ?? null} {#if valves_spec.properties[property]?.enum ?? null}
<select <select
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
bind:value={valves[property]} bind:value={valves[property]}
> >
{#each valves_spec.properties[property].enum as option} {#each valves_spec.properties[property].enum as option}
@ -523,7 +523,7 @@
</div> </div>
{:else} {:else}
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
type="text" type="text"
placeholder={valves_spec.properties[property].title} placeholder={valves_spec.properties[property].title}
bind:value={valves[property]} bind:value={valves[property]}

26
src/lib/components/admin/Settings/WebSearch.svelte
View File

@ -103,7 +103,7 @@
<div class=" self-center text-xs font-medium">{$i18n.t('Web Search Engine')}</div> <div class=" self-center text-xs font-medium">{$i18n.t('Web Search Engine')}</div>
<div class="flex items-center relative"> <div class="flex items-center relative">
<select <select
class="dark:bg-gray-900 w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right" class="dark:bg-gray-900 w-fit pr-8 rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-right"
bind:value={webConfig.search.engine} bind:value={webConfig.search.engine}
placeholder={$i18n.t('Select a engine')} placeholder={$i18n.t('Select a engine')}
required required
@ -127,7 +127,7 @@
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1"> <div class="flex-1">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
type="text" type="text"
placeholder={$i18n.t('Enter Searxng Query URL')} placeholder={$i18n.t('Enter Searxng Query URL')}
bind:value={webConfig.search.searxng_query_url} bind:value={webConfig.search.searxng_query_url}
@ -155,7 +155,7 @@
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1"> <div class="flex-1">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
type="text" type="text"
placeholder={$i18n.t('Enter Google PSE Engine Id')} placeholder={$i18n.t('Enter Google PSE Engine Id')}
bind:value={webConfig.search.google_pse_engine_id} bind:value={webConfig.search.google_pse_engine_id}
@ -260,7 +260,7 @@
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1"> <div class="flex-1">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
type="text" type="text"
placeholder={$i18n.t('Enter SearchApi Engine')} placeholder={$i18n.t('Enter SearchApi Engine')}
bind:value={webConfig.search.searchapi_engine} bind:value={webConfig.search.searchapi_engine}
@ -288,7 +288,7 @@
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1"> <div class="flex-1">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
type="text" type="text"
placeholder={$i18n.t('Enter SerpApi Engine')} placeholder={$i18n.t('Enter SerpApi Engine')}
bind:value={webConfig.search.serpapi_engine} bind:value={webConfig.search.serpapi_engine}
@ -339,7 +339,7 @@
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1"> <div class="flex-1">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
type="text" type="text"
placeholder={$i18n.t('Enter Bing Search V7 Endpoint')} placeholder={$i18n.t('Enter Bing Search V7 Endpoint')}
bind:value={webConfig.search.bing_search_v7_endpoint} bind:value={webConfig.search.bing_search_v7_endpoint}
@ -371,7 +371,7 @@
</div> </div>
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
placeholder={$i18n.t('Search Result Count')} placeholder={$i18n.t('Search Result Count')}
bind:value={webConfig.search.result_count} bind:value={webConfig.search.result_count}
required required
@ -384,7 +384,7 @@
</div> </div>
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
placeholder={$i18n.t('Concurrent Requests')} placeholder={$i18n.t('Concurrent Requests')}
bind:value={webConfig.search.concurrent_requests} bind:value={webConfig.search.concurrent_requests}
required required
@ -398,7 +398,7 @@
</div> </div>
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
placeholder={$i18n.t( placeholder={$i18n.t(
'Enter domains separated by commas (e.g., example.com,site.org)' 'Enter domains separated by commas (e.g., example.com,site.org)'
)} )}
@ -408,7 +408,7 @@
{/if} {/if}
</div> </div>
<hr class=" dark:border-gray-850 my-2" /> <hr class="border-gray-100 dark:border-gray-850 my-2" />
<div> <div>
<div class=" mb-1 text-sm font-medium"> <div class=" mb-1 text-sm font-medium">
@ -422,7 +422,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
webConfig.web_loader_ssl_verification = !webConfig.web_loader_ssl_verification; webConfig.web_loader_ssl_verification = !webConfig.web_loader_ssl_verification;
submitHandler(); submitHandler();
@ -447,7 +447,7 @@
<div class=" w-20 text-xs font-medium self-center">{$i18n.t('Language')}</div> <div class=" w-20 text-xs font-medium self-center">{$i18n.t('Language')}</div>
<div class=" flex-1 self-center"> <div class=" flex-1 self-center">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
type="text" type="text"
placeholder={$i18n.t('Enter language codes')} placeholder={$i18n.t('Enter language codes')}
bind:value={youtubeLanguage} bind:value={youtubeLanguage}
@ -462,7 +462,7 @@
<div class=" w-20 text-xs font-medium self-center">{$i18n.t('Proxy URL')}</div> <div class=" w-20 text-xs font-medium self-center">{$i18n.t('Proxy URL')}</div>
<div class=" flex-1 self-center"> <div class=" flex-1 self-center">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
type="text" type="text"
placeholder={$i18n.t('Enter proxy URL (e.g. https://user:password@host:port)')} placeholder={$i18n.t('Enter proxy URL (e.g. https://user:password@host:port)')}
bind:value={youtubeProxyUrl} bind:value={youtubeProxyUrl}

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

@ -140,7 +140,7 @@
</svg> </svg>
</div> </div>
<input <input
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent" class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
bind:value={search} bind:value={search}
placeholder={$i18n.t('Search')} placeholder={$i18n.t('Search')}
/> />

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

@ -78,7 +78,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none" class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
type="text" type="text"
bind:value={name} bind:value={name}
placeholder={$i18n.t('Group Name')} placeholder={$i18n.t('Group Name')}
@ -94,7 +94,7 @@
<div class="flex-1"> <div class="flex-1">
<Textarea <Textarea
className="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none resize-none" className="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden resize-none"
rows={2} rows={2}
bind:value={description} bind:value={description}
placeholder={$i18n.t('Group Description')} placeholder={$i18n.t('Group Description')}

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

@ -16,7 +16,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none" class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
type="text" type="text"
bind:value={name} bind:value={name}
placeholder={$i18n.t('Group Name')} placeholder={$i18n.t('Group Name')}
@ -36,7 +36,7 @@
<div class="text-gray-500">#</div> <div class="text-gray-500">#</div>
<input <input
class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none" class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
type="text" type="text"
bind:value={color} bind:value={color}
placeholder={$i18n.t('Hex Color')} placeholder={$i18n.t('Hex Color')}
@ -52,7 +52,7 @@
<div class="flex-1"> <div class="flex-1">
<Textarea <Textarea
className="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none resize-none" className="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden resize-none"
rows={4} rows={4}
bind:value={description} bind:value={description}
placeholder={$i18n.t('Group Description')} placeholder={$i18n.t('Group Description')}

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

@ -76,7 +76,7 @@
<div class=" text-sm flex-1 rounded-lg"> <div class=" text-sm flex-1 rounded-lg">
{modelId} {modelId}
</div> </div>
<div class="flex-shrink-0"> <div class="shrink-0">
<button <button
type="button" type="button"
on:click={() => { on:click={() => {
@ -102,7 +102,7 @@
<select <select
class="w-full py-1 text-sm rounded-lg bg-transparent {selectedModelId class="w-full py-1 text-sm rounded-lg bg-transparent {selectedModelId
? '' ? ''
: 'text-gray-500'} placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none" : 'text-gray-500'} placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
bind:value={selectedModelId} bind:value={selectedModelId}
> >
<option value="">{$i18n.t('Select a model')}</option> <option value="">{$i18n.t('Select a model')}</option>
@ -137,7 +137,7 @@
<div class="flex-1 mr-2"> <div class="flex-1 mr-2">
<select <select
class="w-full bg-transparent outline-none py-0.5 text-sm" class="w-full bg-transparent outline-hidden py-0.5 text-sm"
bind:value={permissions.model.default_id} bind:value={permissions.model.default_id}
placeholder="Select a model" placeholder="Select a model"
> >

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

@ -64,7 +64,7 @@
</svg> </svg>
</div> </div>
<input <input
class=" w-full text-sm pr-4 rounded-r-xl outline-none bg-transparent" class=" w-full text-sm pr-4 rounded-r-xl outline-hidden bg-transparent"
bind:value={query} bind:value={query}
placeholder={$i18n.t('Search')} placeholder={$i18n.t('Search')}
/> />

6
src/lib/components/admin/Users/UserList.svelte
View File

@ -149,7 +149,7 @@
</svg> </svg>
</div> </div>
<input <input
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent" class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
bind:value={search} bind:value={search}
placeholder={$i18n.t('Search')} placeholder={$i18n.t('Search')}
/> />
@ -171,9 +171,9 @@
</div> </div>
</div> </div>
<div class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full rounded pt-0.5"> <div class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full rounded-sm pt-0.5">
<table <table
class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full rounded" class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full rounded-sm"
> >
<thead <thead
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400 -translate-y-0.5" class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400 -translate-y-0.5"

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

@ -181,7 +181,7 @@
<div class="flex-1"> <div class="flex-1">
<select <select
class="w-full capitalize rounded-lg text-sm bg-transparent dark:disabled:text-gray-500 outline-none" class="w-full capitalize rounded-lg text-sm bg-transparent dark:disabled:text-gray-500 outline-hidden"
bind:value={_user.role} bind:value={_user.role}
placeholder={$i18n.t('Enter Your Role')} placeholder={$i18n.t('Enter Your Role')}
required required
@ -198,7 +198,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
class="w-full text-sm bg-transparent disabled:text-gray-500 dark:disabled:text-gray-500 outline-none" class="w-full text-sm bg-transparent disabled:text-gray-500 dark:disabled:text-gray-500 outline-hidden"
type="text" type="text"
bind:value={_user.name} bind:value={_user.name}
placeholder={$i18n.t('Enter Your Full Name')} placeholder={$i18n.t('Enter Your Full Name')}
@ -215,7 +215,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
class="w-full text-sm bg-transparent disabled:text-gray-500 dark:disabled:text-gray-500 outline-none" class="w-full text-sm bg-transparent disabled:text-gray-500 dark:disabled:text-gray-500 outline-hidden"
type="email" type="email"
bind:value={_user.email} bind:value={_user.email}
placeholder={$i18n.t('Enter Your Email')} placeholder={$i18n.t('Enter Your Email')}
@ -229,7 +229,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
class="w-full text-sm bg-transparent disabled:text-gray-500 dark:disabled:text-gray-500 outline-none" class="w-full text-sm bg-transparent disabled:text-gray-500 dark:disabled:text-gray-500 outline-hidden"
type="password" type="password"
bind:value={_user.password} bind:value={_user.password}
placeholder={$i18n.t('Enter Your Password')} placeholder={$i18n.t('Enter Your Password')}

8
src/lib/components/admin/Users/UserList/EditUserModal.svelte
View File

@ -65,7 +65,7 @@
</svg> </svg>
</button> </button>
</div> </div>
<hr class=" dark:border-gray-800" /> <hr class="border-gray-100 dark:border-gray-850" />
<div class="flex flex-col md:flex-row w-full p-5 md:space-x-4 dark:text-gray-200"> <div class="flex flex-col md:flex-row w-full p-5 md:space-x-4 dark:text-gray-200">
<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6"> <div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
@ -102,7 +102,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 disabled:text-gray-500 dark:disabled:text-gray-500 outline-none" class="w-full rounded-sm py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 disabled:text-gray-500 dark:disabled:text-gray-500 outline-hidden"
type="email" type="email"
bind:value={_user.email} bind:value={_user.email}
autocomplete="off" autocomplete="off"
@ -117,7 +117,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none" class="w-full rounded-sm py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-hidden"
type="text" type="text"
bind:value={_user.name} bind:value={_user.name}
autocomplete="off" autocomplete="off"
@ -131,7 +131,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none" class="w-full rounded-sm py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-hidden"
type="password" type="password"
bind:value={_user.password} bind:value={_user.password}
autocomplete="new-password" autocomplete="new-password"

2
src/lib/components/channel/Channel.svelte
View File

@ -281,7 +281,7 @@
<PaneResizer <PaneResizer
class="relative flex w-[3px] items-center justify-center bg-background group bg-gray-50 dark:bg-gray-850" class="relative flex w-[3px] items-center justify-center bg-background group bg-gray-50 dark:bg-gray-850"
> >
<div class="z-10 flex h-7 w-5 items-center justify-center rounded-sm"> <div class="z-10 flex h-7 w-5 items-center justify-center rounded-xs">
<EllipsisVertical className="size-4 invisible group-hover:visible" /> <EllipsisVertical className="size-4 invisible group-hover:visible" />
</div> </div>
</PaneResizer> </PaneResizer>

4
src/lib/components/channel/MessageInput.svelte
View File

@ -455,7 +455,7 @@
<div class="px-2.5"> <div class="px-2.5">
<div <div
class="scrollbar-hidden font-primary text-left bg-transparent dark:text-gray-100 outline-none w-full pt-3 px-1 rounded-xl resize-none h-fit max-h-80 overflow-auto" class="scrollbar-hidden font-primary text-left bg-transparent dark:text-gray-100 outline-hidden w-full pt-3 px-1 rounded-xl resize-none h-fit max-h-80 overflow-auto"
> >
<RichTextInput <RichTextInput
bind:value={content} bind:value={content}
@ -513,7 +513,7 @@
}} }}
> >
<button <button
class="bg-transparent hover:bg-white/80 text-gray-800 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-1.5 outline-none focus:outline-none" class="bg-transparent hover:bg-white/80 text-gray-800 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-1.5 outline-hidden focus:outline-hidden"
type="button" type="button"
aria-label="More" aria-label="More"
> >

2
src/lib/components/channel/MessageInput/InputMenu.svelte
View File

@ -44,7 +44,7 @@
<div slot="content"> <div slot="content">
<DropdownMenu.Content <DropdownMenu.Content
class="w-full max-w-[200px] rounded-xl px-1 py-1 border-gray-300/30 dark:border-gray-700/50 z-50 bg-white dark:bg-gray-850 dark:text-white shadow" class="w-full max-w-[200px] rounded-xl px-1 py-1 border-gray-300/30 dark:border-gray-700/50 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm"
sideOffset={15} sideOffset={15}
alignOffset={-8} alignOffset={-8}
side="top" side="top"

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

@ -138,7 +138,7 @@
dir={$settings.chatDirection} dir={$settings.chatDirection}
> >
<div <div
class={`flex-shrink-0 ${($settings?.chatDirection ?? 'LTR') === 'LTR' ? 'mr-3' : 'ml-3'} w-9`} class={`shrink-0 ${($settings?.chatDirection ?? 'LTR') === 'LTR' ? 'mr-3' : 'ml-3'} w-9`}
> >
{#if showUserProfile} {#if showUserProfile}
<ProfilePreview user={message.user}> <ProfilePreview user={message.user}>
@ -153,7 +153,7 @@
{#if message.created_at} {#if message.created_at}
<div <div
class="mt-1.5 flex flex-shrink-0 items-center text-xs self-center invisible group-hover:visible text-gray-500 font-medium first-letter:capitalize" class="mt-1.5 flex shrink-0 items-center text-xs self-center invisible group-hover:visible text-gray-500 font-medium first-letter:capitalize"
> >
<Tooltip content={dayjs(message.created_at / 1000000).format('LLLL')}> <Tooltip content={dayjs(message.created_at / 1000000).format('LLLL')}>
{dayjs(message.created_at / 1000000).format('HH:mm')} {dayjs(message.created_at / 1000000).format('HH:mm')}
@ -206,7 +206,7 @@
{#if edit} {#if edit}
<div class="py-2"> <div class="py-2">
<Textarea <Textarea
className=" bg-transparent outline-none w-full resize-none" className=" bg-transparent outline-hidden w-full resize-none"
bind:value={editedContent} bind:value={editedContent}
onKeydown={(e) => { onKeydown={(e) => {
if (e.key === 'Escape') { if (e.key === 'Escape') {

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

@ -29,7 +29,7 @@
<slot name="content"> <slot name="content">
<DropdownMenu.Content <DropdownMenu.Content
class="max-w-full w-[240px] rounded-lg z-[9999] bg-white dark:bg-black dark:text-white shadow-lg" class="max-w-full w-[240px] rounded-lg z-9999 bg-white dark:bg-black dark:text-white shadow-lg"
sideOffset={8} sideOffset={8}
{side} {side}
{align} {align}

4
src/lib/components/channel/Messages/Message/ReactionPicker.svelte
View File

@ -107,7 +107,7 @@
<slot /> <slot />
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content <DropdownMenu.Content
class="max-w-full w-80 bg-gray-50 dark:bg-gray-850 rounded-lg z-[9999] shadow-lg dark:text-white" class="max-w-full w-80 bg-gray-50 dark:bg-gray-850 rounded-lg z-9999 shadow-lg dark:text-white"
sideOffset={8} sideOffset={8}
{side} {side}
{align} {align}
@ -116,7 +116,7 @@
<div class="mb-1 px-3 pt-2 pb-2"> <div class="mb-1 px-3 pt-2 pb-2">
<input <input
type="text" type="text"
class="w-full text-sm bg-transparent outline-none" class="w-full text-sm bg-transparent outline-hidden"
placeholder="Search all emojis" placeholder="Search all emojis"
bind:value={search} bind:value={search}
/> />

2
src/lib/components/channel/Navbar.svelte
View File

@ -18,7 +18,7 @@
<nav class="sticky top-0 z-30 w-full px-1.5 py-1.5 -mb-8 flex items-center drag-region"> <nav class="sticky top-0 z-30 w-full px-1.5 py-1.5 -mb-8 flex items-center drag-region">
<div <div
class=" bg-gradient-to-b via-50% from-white via-white to-transparent dark:from-gray-900 dark:via-gray-900 dark:to-transparent pointer-events-none absolute inset-0 -bottom-7 z-[-1] blur" class=" bg-linear-to-b via-50% from-white via-white to-transparent dark:from-gray-900 dark:via-gray-900 dark:to-transparent pointer-events-none absolute inset-0 -bottom-7 z-[-1] blur-sm"
></div> ></div>
<div class=" flex max-w-full w-full mx-auto px-1 pt-0.5 bg-transparent"> <div class=" flex max-w-full w-full mx-auto px-1 pt-0.5 bg-transparent">

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

@ -1896,7 +1896,7 @@
/> />
<div <div
class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-white to-white/85 dark:from-gray-900 dark:to-[#171717]/90 z-0" class="absolute top-0 left-0 w-full h-full bg-linear-to-t from-white to-white/85 dark:from-gray-900 dark:to-[#171717]/90 z-0"
/> />
{/if} {/if}

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

@ -195,7 +195,7 @@
{#if $showControls} {#if $showControls}
<PaneResizer class="relative flex w-2 items-center justify-center bg-background group"> <PaneResizer class="relative flex w-2 items-center justify-center bg-background group">
<div class="z-10 flex h-7 w-5 items-center justify-center rounded-sm"> <div class="z-10 flex h-7 w-5 items-center justify-center rounded-xs">
<EllipsisVertical className="size-4 invisible group-hover:visible" /> <EllipsisVertical className="size-4 invisible group-hover:visible" />
</div> </div>
</PaneResizer> </PaneResizer>

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

@ -221,7 +221,7 @@
<div <div
id={`floating-buttons-${id}`} id={`floating-buttons-${id}`}
class="absolute rounded-lg mt-1 text-xs z-[9999]" class="absolute rounded-lg mt-1 text-xs z-9999"
style="display: none" style="display: none"
> >
{#if responseContent === null} {#if responseContent === null}
@ -230,7 +230,7 @@
class="flex flex-row gap-0.5 shrink-0 p-1 bg-white dark:bg-gray-850 dark:text-gray-100 text-medium rounded-lg shadow-xl" class="flex flex-row gap-0.5 shrink-0 p-1 bg-white dark:bg-gray-850 dark:text-gray-100 text-medium rounded-lg shadow-xl"
> >
<button <button
class="px-1 hover:bg-gray-50 dark:hover:bg-gray-800 rounded flex items-center gap-1 min-w-fit" class="px-1 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-sm flex items-center gap-1 min-w-fit"
on:click={async () => { on:click={async () => {
selectedText = window.getSelection().toString(); selectedText = window.getSelection().toString();
floatingInput = true; floatingInput = true;
@ -249,7 +249,7 @@
<div class="shrink-0">Ask</div> <div class="shrink-0">Ask</div>
</button> </button>
<button <button
class="px-1 hover:bg-gray-50 dark:hover:bg-gray-800 rounded flex items-center gap-1 min-w-fit" class="px-1 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-sm flex items-center gap-1 min-w-fit"
on:click={() => { on:click={() => {
selectedText = window.getSelection().toString(); selectedText = window.getSelection().toString();
explainHandler(); explainHandler();
@ -267,7 +267,7 @@
<input <input
type="text" type="text"
id="floating-message-input" id="floating-message-input"
class="ml-5 bg-transparent outline-none w-full flex-1 text-sm" class="ml-5 bg-transparent outline-hidden w-full flex-1 text-sm"
placeholder={$i18n.t('Ask a question')} placeholder={$i18n.t('Ask a question')}
bind:value={floatingInputValue} bind:value={floatingInputValue}
on:keydown={(e) => { on:keydown={(e) => {

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

@ -74,7 +74,7 @@
<div class="" slot="content"> <div class="" slot="content">
<textarea <textarea
bind:value={params.system} bind:value={params.system}
class="w-full text-xs py-1.5 bg-transparent outline-none resize-none" class="w-full text-xs py-1.5 bg-transparent outline-hidden resize-none"
rows="4" rows="4"
placeholder={$i18n.t('Enter system prompt')} placeholder={$i18n.t('Enter system prompt')}
/> />

4
src/lib/components/chat/Controls/Valves.svelte
View File

@ -148,7 +148,7 @@
<div class="flex gap-2"> <div class="flex gap-2">
<div class="flex-1"> <div class="flex-1">
<select <select
class=" w-full rounded text-xs py-2 px-1 bg-transparent outline-none" class=" w-full rounded-sm text-xs py-2 px-1 bg-transparent outline-hidden"
bind:value={tab} bind:value={tab}
placeholder="Select" placeholder="Select"
> >
@ -161,7 +161,7 @@
<div class="flex-1"> <div class="flex-1">
<select <select
class="w-full rounded py-2 px-1 text-xs bg-transparent outline-none" class="w-full rounded-sm py-2 px-1 text-xs bg-transparent outline-hidden"
bind:value={selectedId} bind:value={selectedId}
on:change={async () => { on:change={async () => {
await tick(); await tick();

18
src/lib/components/chat/MessageInput.svelte
View File

@ -394,7 +394,7 @@
<div class="w-full relative"> <div class="w-full relative">
{#if atSelectedModel !== undefined || selectedToolIds.length > 0 || webSearchEnabled || ($settings?.webSearch ?? false) === 'always' || imageGenerationEnabled || codeInterpreterEnabled} {#if atSelectedModel !== undefined || selectedToolIds.length > 0 || webSearchEnabled || ($settings?.webSearch ?? false) === 'always' || imageGenerationEnabled || codeInterpreterEnabled}
<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-gradient-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} {#if selectedToolIds.length > 0}
<div class="flex items-center justify-between w-full"> <div class="flex items-center justify-between w-full">
@ -413,7 +413,7 @@
}) as tool, toolIdx (toolIdx)} }) as tool, toolIdx (toolIdx)}
<Tooltip <Tooltip
content={tool?.meta?.description ?? ''} content={tool?.meta?.description ?? ''}
className=" {toolIdx !== 0 ? 'pl-0.5' : ''} flex-shrink-0" className=" {toolIdx !== 0 ? 'pl-0.5' : ''} shrink-0"
placement="top" placement="top"
> >
{tool.name} {tool.name}
@ -682,7 +682,7 @@
<div class="px-2.5"> <div class="px-2.5">
{#if $settings?.richTextInput ?? true} {#if $settings?.richTextInput ?? true}
<div <div
class="scrollbar-hidden text-left bg-transparent dark:text-gray-100 outline-none w-full pt-3 px-1 resize-none h-fit max-h-80 overflow-auto" class="scrollbar-hidden text-left bg-transparent dark:text-gray-100 outline-hidden w-full pt-3 px-1 resize-none h-fit max-h-80 overflow-auto"
> >
<RichTextInput <RichTextInput
bind:this={chatInputElement} bind:this={chatInputElement}
@ -886,7 +886,7 @@
<textarea <textarea
id="chat-input" id="chat-input"
bind:this={chatInputElement} bind:this={chatInputElement}
class="scrollbar-hidden bg-transparent dark:text-gray-100 outline-none w-full pt-3 px-1 resize-none" class="scrollbar-hidden bg-transparent dark:text-gray-100 outline-hidden w-full pt-3 px-1 resize-none"
placeholder={placeholder ? placeholder : $i18n.t('Send a Message')} placeholder={placeholder ? placeholder : $i18n.t('Send a Message')}
bind:value={prompt} bind:value={prompt}
on:keypress={(e) => { on:keypress={(e) => {
@ -1114,7 +1114,7 @@
}} }}
> >
<button <button
class="bg-transparent hover:bg-gray-100 text-gray-800 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-1.5 outline-none focus:outline-none" class="bg-transparent hover:bg-gray-100 text-gray-800 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-1.5 outline-hidden focus:outline-hidden"
type="button" type="button"
aria-label="More" aria-label="More"
> >
@ -1138,7 +1138,7 @@
<button <button
on:click|preventDefault={() => (webSearchEnabled = !webSearchEnabled)} on:click|preventDefault={() => (webSearchEnabled = !webSearchEnabled)}
type="button" type="button"
class="px-1.5 @sm:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-none max-w-full overflow-hidden {webSearchEnabled || class="px-1.5 @sm:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden {webSearchEnabled ||
($settings?.webSearch ?? false) === 'always' ($settings?.webSearch ?? false) === 'always'
? 'bg-blue-100 dark:bg-blue-500/20 text-blue-500 dark:text-blue-400' ? 'bg-blue-100 dark:bg-blue-500/20 text-blue-500 dark:text-blue-400'
: 'bg-transparent text-gray-600 dark:text-gray-400 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800'}" : 'bg-transparent text-gray-600 dark:text-gray-400 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800'}"
@ -1158,7 +1158,7 @@
on:click|preventDefault={() => on:click|preventDefault={() =>
(imageGenerationEnabled = !imageGenerationEnabled)} (imageGenerationEnabled = !imageGenerationEnabled)}
type="button" type="button"
class="px-1.5 @sm:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-none max-w-full overflow-hidden {imageGenerationEnabled class="px-1.5 @sm:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden {imageGenerationEnabled
? 'bg-gray-100 dark:bg-gray-500/20 text-gray-600 dark:text-gray-400' ? 'bg-gray-100 dark:bg-gray-500/20 text-gray-600 dark:text-gray-400'
: 'bg-transparent text-gray-600 dark:text-gray-300 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 '}" : 'bg-transparent text-gray-600 dark:text-gray-300 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 '}"
> >
@ -1177,7 +1177,7 @@
on:click|preventDefault={() => on:click|preventDefault={() =>
(codeInterpreterEnabled = !codeInterpreterEnabled)} (codeInterpreterEnabled = !codeInterpreterEnabled)}
type="button" type="button"
class="px-1.5 @sm:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-none max-w-full overflow-hidden {codeInterpreterEnabled class="px-1.5 @sm:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden {codeInterpreterEnabled
? 'bg-gray-100 dark:bg-gray-500/20 text-gray-600 dark:text-gray-400' ? 'bg-gray-100 dark:bg-gray-500/20 text-gray-600 dark:text-gray-400'
: 'bg-transparent text-gray-600 dark:text-gray-300 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 '}" : 'bg-transparent text-gray-600 dark:text-gray-300 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 '}"
> >
@ -1193,7 +1193,7 @@
</div> </div>
</div> </div>
<div class="self-end flex space-x-1 mr-1 flex-shrink-0"> <div class="self-end flex space-x-1 mr-1 shrink-0">
{#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

2
src/lib/components/chat/MessageInput/CallOverlay/VideoInputMenu.svelte
View File

@ -26,7 +26,7 @@
<div slot="content"> <div slot="content">
<DropdownMenu.Content <DropdownMenu.Content
class="w-full max-w-[180px] rounded-lg px-1 py-1.5 border border-gray-300/30 dark:border-gray-700/50 z-[9999] bg-white dark:bg-gray-900 dark:text-white shadow-sm" class="w-full max-w-[180px] rounded-lg px-1 py-1.5 border border-gray-300/30 dark:border-gray-700/50 z-9999 bg-white dark:bg-gray-900 dark:text-white shadow-xs"
sideOffset={6} sideOffset={6}
side="top" side="top"
align="start" align="start"

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

@ -185,25 +185,25 @@
<div class=" font-medium text-black dark:text-gray-100 flex items-center gap-1"> <div class=" font-medium text-black dark:text-gray-100 flex items-center gap-1">
{#if item.legacy} {#if item.legacy}
<div <div
class="bg-gray-500/20 text-gray-700 dark:text-gray-200 rounded uppercase text-xs font-bold px-1 flex-shrink-0" class="bg-gray-500/20 text-gray-700 dark:text-gray-200 rounded-sm uppercase text-xs font-bold px-1 shrink-0"
> >
Legacy Legacy
</div> </div>
{:else if item?.meta?.document} {:else if item?.meta?.document}
<div <div
class="bg-gray-500/20 text-gray-700 dark:text-gray-200 rounded uppercase text-xs font-bold px-1 flex-shrink-0" class="bg-gray-500/20 text-gray-700 dark:text-gray-200 rounded-sm uppercase text-xs font-bold px-1 shrink-0"
> >
Document Document
</div> </div>
{:else if item?.type === 'file'} {:else if item?.type === 'file'}
<div <div
class="bg-gray-500/20 text-gray-700 dark:text-gray-200 rounded uppercase text-xs font-bold px-1 flex-shrink-0" class="bg-gray-500/20 text-gray-700 dark:text-gray-200 rounded-sm uppercase text-xs font-bold px-1 shrink-0"
> >
File File
</div> </div>
{:else} {:else}
<div <div
class="bg-green-500/20 text-green-700 dark:text-green-200 rounded uppercase text-xs font-bold px-1 flex-shrink-0" class="bg-green-500/20 text-green-700 dark:text-green-200 rounded-sm uppercase text-xs font-bold px-1 shrink-0"
> >
Collection Collection
</div> </div>
@ -238,7 +238,7 @@
class=" font-medium text-black dark:text-gray-100 flex items-center gap-1" class=" font-medium text-black dark:text-gray-100 flex items-center gap-1"
> >
<div <div
class="bg-gray-500/20 text-gray-700 dark:text-gray-200 rounded uppercase text-xs font-bold px-1 flex-shrink-0" class="bg-gray-500/20 text-gray-700 dark:text-gray-200 rounded-sm uppercase text-xs font-bold px-1 shrink-0"
> >
File File
</div> </div>

4
src/lib/components/chat/MessageInput/FilesOverlay.svelte
View File

@ -19,12 +19,12 @@
bind:this={overlayElement} bind:this={overlayElement}
class="fixed {$showSidebar class="fixed {$showSidebar
? 'left-0 md:left-[260px] md:w-[calc(100%-260px)]' ? 'left-0 md:left-[260px] md:w-[calc(100%-260px)]'
: 'left-0'} fixed top-0 right-0 bottom-0 w-full h-full flex z-[9999] touch-none pointer-events-none" : 'left-0'} fixed top-0 right-0 bottom-0 w-full h-full flex z-9999 touch-none pointer-events-none"
id="dropzone" id="dropzone"
role="region" role="region"
aria-label="Drag and Drop Container" aria-label="Drag and Drop Container"
> >
<div class="absolute w-full h-full backdrop-blur bg-gray-800/40 flex justify-center"> <div class="absolute w-full h-full backdrop-blur-sm bg-gray-800/40 flex justify-center">
<div class="m-auto pt-64 flex flex-col justify-center"> <div class="m-auto pt-64 flex flex-col justify-center">
<div class="max-w-md"> <div class="max-w-md">
<AddFilesPlaceholder /> <AddFilesPlaceholder />

6
src/lib/components/chat/MessageInput/InputMenu.svelte
View File

@ -92,7 +92,7 @@
<div slot="content"> <div slot="content">
<DropdownMenu.Content <DropdownMenu.Content
class="w-full max-w-[220px] rounded-xl px-1 py-1 border-gray-300/30 dark:border-gray-700/50 z-50 bg-white dark:bg-gray-850 dark:text-white shadow" class="w-full max-w-[220px] rounded-xl px-1 py-1 border-gray-300/30 dark:border-gray-700/50 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm"
sideOffset={15} sideOffset={15}
alignOffset={-8} alignOffset={-8}
side="top" side="top"
@ -114,7 +114,7 @@
placement="top-start" placement="top-start"
className="flex flex-1 gap-2 items-center" className="flex flex-1 gap-2 items-center"
> >
<div class="flex-shrink-0"> <div class="shrink-0">
<WrenchSolid /> <WrenchSolid />
</div> </div>
@ -122,7 +122,7 @@
</Tooltip> </Tooltip>
</div> </div>
<div class=" flex-shrink-0"> <div class=" shrink-0">
<Switch <Switch
state={tools[toolId].enabled} state={tools[toolId].enabled}
on:change={async (e) => { on:change={async (e) => {

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

@ -362,7 +362,7 @@
{#each visualizerData.slice().reverse() as rms} {#each visualizerData.slice().reverse() as rms}
<div class="flex items-center h-full"> <div class="flex items-center h-full">
<div <div
class="w-[2px] flex-shrink-0 class="w-[2px] shrink-0
{loading {loading
? ' bg-gray-500 dark:bg-gray-400 ' ? ' bg-gray-500 dark:bg-gray-400 '

12
src/lib/components/chat/Messages/Citations.svelte
View File

@ -101,7 +101,7 @@
{#each citations as citation, idx} {#each citations as citation, idx}
<button <button
id={`source-${idx}`} id={`source-${idx}`}
class="no-toggle outline-none flex dark:text-gray-300 p-1 bg-white dark:bg-gray-900 rounded-xl max-w-96" class="no-toggle outline-hidden flex dark:text-gray-300 p-1 bg-white dark:bg-gray-900 rounded-xl max-w-96"
on:click={() => { on:click={() => {
showCitationModal = true; showCitationModal = true;
selectedCitation = citation; selectedCitation = citation;
@ -133,14 +133,14 @@
<div <div
class="flex-1 flex items-center gap-1 overflow-auto scrollbar-none w-full max-w-full" class="flex-1 flex items-center gap-1 overflow-auto scrollbar-none w-full max-w-full"
> >
<span class="whitespace-nowrap hidden sm:inline flex-shrink-0" <span class="whitespace-nowrap hidden sm:inline shrink-0"
>{$i18n.t('References from')}</span >{$i18n.t('References from')}</span
> >
<div class="flex items-center overflow-auto scrollbar-none w-full max-w-full flex-1"> <div class="flex items-center overflow-auto scrollbar-none w-full max-w-full flex-1">
<div class="flex text-xs font-medium items-center"> <div class="flex text-xs font-medium items-center">
{#each citations.slice(0, 2) as citation, idx} {#each citations.slice(0, 2) as citation, idx}
<button <button
class="no-toggle outline-none flex dark:text-gray-300 p-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition rounded-xl max-w-96" class="no-toggle outline-hidden flex dark:text-gray-300 p-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition rounded-xl max-w-96"
on:click={() => { on:click={() => {
showCitationModal = true; showCitationModal = true;
selectedCitation = citation; selectedCitation = citation;
@ -161,13 +161,13 @@
{/each} {/each}
</div> </div>
</div> </div>
<div class="flex items-center gap-1 whitespace-nowrap flex-shrink-0"> <div class="flex items-center gap-1 whitespace-nowrap shrink-0">
<span class="hidden sm:inline">{$i18n.t('and')}</span> <span class="hidden sm:inline">{$i18n.t('and')}</span>
{citations.length - 2} {citations.length - 2}
<span>{$i18n.t('more')}</span> <span>{$i18n.t('more')}</span>
</div> </div>
</div> </div>
<div class="flex-shrink-0"> <div class="shrink-0">
{#if isCollapsibleOpen} {#if isCollapsibleOpen}
<ChevronUp strokeWidth="3.5" className="size-3.5" /> <ChevronUp strokeWidth="3.5" className="size-3.5" />
{:else} {:else}
@ -180,7 +180,7 @@
{#each citations as citation, idx} {#each citations as citation, idx}
<button <button
id={`source-${idx}`} id={`source-${idx}`}
class="no-toggle outline-none flex dark:text-gray-300 p-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition rounded-xl max-w-96" class="no-toggle outline-hidden flex dark:text-gray-300 p-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition rounded-xl max-w-96"
on:click={() => { on:click={() => {
showCitationModal = true; showCitationModal = true;
selectedCitation = citation; selectedCitation = citation;

8
src/lib/components/chat/Messages/CitationsModal.svelte
View File

@ -90,7 +90,7 @@
> >
<div class="text-sm dark:text-gray-400 flex items-center gap-2 w-fit"> <div class="text-sm dark:text-gray-400 flex items-center gap-2 w-fit">
<a <a
class="hover:text-gray-500 hover:dark:text-gray-100 underline flex-grow" class="hover:text-gray-500 dark:hover:text-gray-100 underline grow"
href={document?.metadata?.file_id href={document?.metadata?.file_id
? `${WEBUI_API_BASE_URL}/files/${document?.metadata?.file_id}/content${document?.metadata?.page !== undefined ? `#page=${document.metadata.page + 1}` : ''}` ? `${WEBUI_API_BASE_URL}/files/${document?.metadata?.file_id}/content${document?.metadata?.page !== undefined ? `#page=${document.metadata.page + 1}` : ''}`
: document.source?.url?.includes('http') : document.source?.url?.includes('http')
@ -122,7 +122,9 @@
<div class="text-sm my-1 dark:text-gray-400 flex items-center gap-2 w-fit"> <div class="text-sm my-1 dark:text-gray-400 flex items-center gap-2 w-fit">
{#if showPercentage} {#if showPercentage}
{@const percentage = calculatePercentage(document.distance)} {@const percentage = calculatePercentage(document.distance)}
<span class={`px-1 rounded font-medium ${getRelevanceColor(percentage)}`}> <span
class={`px-1 rounded-sm font-medium ${getRelevanceColor(percentage)}`}
>
{percentage.toFixed(2)}% {percentage.toFixed(2)}%
</span> </span>
<span class="text-gray-500 dark:text-gray-500"> <span class="text-gray-500 dark:text-gray-500">
@ -166,7 +168,7 @@
</div> </div>
{#if documentIdx !== mergedDocuments.length - 1} {#if documentIdx !== mergedDocuments.length - 1}
<hr class=" dark:border-gray-850 my-3" /> <hr class="border-gray-100 dark:border-gray-850 my-3" />
{/if} {/if}
{/each} {/each}
</div> </div>

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

@ -377,7 +377,7 @@
{#if executing || stdout || stderr || result} {#if executing || stdout || stderr || result}
<div <div
class="bg-gray-50 dark:bg-[#202123] dark:text-white !rounded-b-lg py-4 px-4 flex flex-col gap-2" class="bg-gray-50 dark:bg-[#202123] dark:text-white rounded-b-lg! py-4 px-4 flex flex-col gap-2"
> >
{#if executing} {#if executing}
<div class=" "> <div class=" ">

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

@ -99,7 +99,7 @@
{/if} {/if}
{#if codeExecution?.result?.files && codeExecution?.result?.files.length > 0} {#if codeExecution?.result?.files && codeExecution?.result?.files.length > 0}
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<hr class=" dark:border-gray-850 my-2" /> <hr class="border-gray-100 dark:border-gray-850 my-2" />
<div class=" text-sm font-medium dark:text-gray-300"> <div class=" text-sm font-medium dark:text-gray-300">
{$i18n.t('Files')} {$i18n.t('Files')}
</div> </div>

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

@ -115,11 +115,11 @@
{#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-50 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">
<div class="flex-shrink-0 break-normal"> <div class="shrink-0 break-normal">
<MarkdownInlineTokens <MarkdownInlineTokens
id={`${id}-${tokenIdx}-header-${headerIdx}`} id={`${id}-${tokenIdx}-header-${headerIdx}`}
tokens={header.tokens} tokens={header.tokens}
@ -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-50 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">

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

@ -286,7 +286,7 @@
</div> </div>
{#if isLastMessage} {#if isLastMessage}
<div class=" flex-shrink-0 text-gray-600 dark:text-gray-500 mt-1"> <div class=" shrink-0 text-gray-600 dark:text-gray-500 mt-1">
<Tooltip content={$i18n.t('Merge Responses')} placement="bottom"> <Tooltip content={$i18n.t('Merge Responses')} placement="bottom">
<button <button
type="button" type="button"

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

@ -145,7 +145,7 @@
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-50 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 disabled:dark:bg-gray-900" : ''} transition rounded-full disabled:cursor-not-allowed disabled:text-gray-500 disabled:bg-white dark:disabled:bg-gray-900"
on:click={() => { on:click={() => {
detailedRating = rating; detailedRating = rating;
}} }}
@ -223,7 +223,7 @@
<div class="mt-2"> <div class="mt-2">
<textarea <textarea
bind:value={comment} bind:value={comment}
class="w-full text-sm px-1 py-2 bg-transparent outline-none resize-none rounded-xl" class="w-full text-sm px-1 py-2 bg-transparent outline-hidden resize-none rounded-xl"
placeholder={$i18n.t('Feel free to add specific details')} placeholder={$i18n.t('Feel free to add specific details')}
rows="3" rows="3"
/> />

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

@ -522,7 +522,7 @@
id="message-{message.id}" id="message-{message.id}"
dir={$settings.chatDirection} dir={$settings.chatDirection}
> >
<div class={`flex-shrink-0 ${($settings?.chatDirection ?? 'LTR') === 'LTR' ? 'mr-3' : 'ml-3'}`}> <div class={`shrink-0 ${($settings?.chatDirection ?? 'LTR') === 'LTR' ? 'mr-3' : 'ml-3'}`}>
<ProfileImage <ProfileImage
src={model?.info?.meta?.profile_image_url ?? src={model?.info?.meta?.profile_image_url ??
($i18n.language === 'dg-DG' ? `/doge.png` : `${WEBUI_BASE_URL}/static/favicon.png`)} ($i18n.language === 'dg-DG' ? `/doge.png` : `${WEBUI_BASE_URL}/static/favicon.png`)}
@ -645,7 +645,7 @@
<textarea <textarea
id="message-edit-{message.id}" id="message-edit-{message.id}"
bind:this={editTextAreaElement} bind:this={editTextAreaElement}
class=" bg-transparent outline-none w-full resize-none" class=" bg-transparent outline-hidden w-full resize-none"
bind:value={editedContent} bind:value={editedContent}
on:input={(e) => { on:input={(e) => {
e.target.style.height = ''; e.target.style.height = '';

14
src/lib/components/chat/Messages/Skeleton.svelte
View File

@ -5,31 +5,31 @@
<div class="w-full mt-2 mb-2"> <div class="w-full mt-2 mb-2">
<div class="animate-pulse flex w-full"> <div class="animate-pulse flex w-full">
<div class="{size === 'md' ? 'space-y-2' : 'space-y-1.5'} w-full"> <div class="{size === 'md' ? 'space-y-2' : 'space-y-1.5'} w-full">
<div class="{size === 'md' ? 'h-2' : 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded mr-14" /> <div class="{size === 'md' ? 'h-2' : 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded-sm mr-14" />
<div class="grid grid-cols-3 gap-4"> <div class="grid grid-cols-3 gap-4">
<div <div
class="{size === 'md' ? 'h-2' : 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded col-span-2" class="{size === 'md' ? 'h-2' : 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded-sm col-span-2"
/> />
<div <div
class="{size === 'md' ? 'h-2' : 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded col-span-1" class="{size === 'md' ? 'h-2' : 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded-sm col-span-1"
/> />
</div> </div>
<div class="grid grid-cols-4 gap-4"> <div class="grid grid-cols-4 gap-4">
<div <div
class="{size === 'md' ? 'h-2' : 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded col-span-1" class="{size === 'md' ? 'h-2' : 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded-sm col-span-1"
/> />
<div <div
class="{size === 'md' ? 'h-2' : 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded col-span-2" class="{size === 'md' ? 'h-2' : 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded-sm col-span-2"
/> />
<div <div
class="{size === 'md' class="{size === 'md'
? 'h-2' ? 'h-2'
: 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded col-span-1 mr-4" : 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded-sm col-span-1 mr-4"
/> />
</div> </div>
<div class="{size === 'md' ? 'h-2' : 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded" /> <div class="{size === 'md' ? 'h-2' : 'h-1.5'} bg-gray-200 dark:bg-gray-600 rounded-sm" />
</div> </div>
</div> </div>
</div> </div>

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

@ -87,7 +87,7 @@
<div class=" flex w-full user-message" dir={$settings.chatDirection} id="message-{message.id}"> <div class=" flex w-full user-message" dir={$settings.chatDirection} id="message-{message.id}">
{#if !($settings?.chatBubble ?? true)} {#if !($settings?.chatBubble ?? true)}
<div class={`flex-shrink-0 ${($settings?.chatDirection ?? 'LTR') === 'LTR' ? 'mr-3' : 'ml-3'}`}> <div class={`shrink-0 ${($settings?.chatDirection ?? 'LTR') === 'LTR' ? 'mr-3' : 'ml-3'}`}>
<ProfileImage <ProfileImage
src={message.user src={message.user
? ($models.find((m) => m.id === message.user)?.info?.meta?.profile_image_url ?? ? ($models.find((m) => m.id === message.user)?.info?.meta?.profile_image_url ??
@ -152,7 +152,7 @@
<textarea <textarea
id="message-edit-{message.id}" id="message-edit-{message.id}"
bind:this={messageEditTextAreaElement} bind:this={messageEditTextAreaElement}
class=" bg-transparent outline-none w-full resize-none" class=" bg-transparent outline-hidden w-full resize-none"
bind:value={editedContent} bind:value={editedContent}
on:input={(e) => { on:input={(e) => {
e.target.style.height = ''; e.target.style.height = '';
@ -338,7 +338,7 @@
{#if !isFirstMessage && !readOnly} {#if !isFirstMessage && !readOnly}
<Tooltip content={$i18n.t('Delete')} placement="bottom"> <Tooltip content={$i18n.t('Delete')} placement="bottom">
<button <button
class="invisible group-hover:visible p-1 rounded dark:hover:text-white hover:text-black transition" class="invisible group-hover:visible p-1 rounded-sm dark:hover:text-white hover:text-black transition"
on:click={() => { on:click={() => {
deleteMessageHandler(); deleteMessageHandler();
}} }}

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

@ -248,7 +248,7 @@
id="model-selector-{id}-button" id="model-selector-{id}-button"
> >
<div <div
class="flex w-full text-left px-0.5 outline-none bg-transparent truncate {triggerClassName} justify-between font-medium placeholder-gray-400 focus:outline-none" class="flex w-full text-left px-0.5 outline-hidden bg-transparent truncate {triggerClassName} justify-between font-medium placeholder-gray-400 focus:outline-hidden"
> >
{#if selectedModel} {#if selectedModel}
{selectedModel.label} {selectedModel.label}
@ -262,7 +262,7 @@
<DropdownMenu.Content <DropdownMenu.Content
class=" z-40 {$mobile class=" z-40 {$mobile
? `w-full` ? `w-full`
: `${className}`} max-w-[calc(100vw-1rem)] justify-start rounded-xl bg-white dark:bg-gray-850 dark:text-white shadow-lg outline-none" : `${className}`} max-w-[calc(100vw-1rem)] justify-start rounded-xl bg-white dark:bg-gray-850 dark:text-white shadow-lg outline-hidden"
transition={flyAndScale} transition={flyAndScale}
side={$mobile ? 'bottom' : 'bottom-start'} side={$mobile ? 'bottom' : 'bottom-start'}
sideOffset={3} sideOffset={3}
@ -275,7 +275,7 @@
<input <input
id="model-search-input" id="model-search-input"
bind:value={searchValue} bind:value={searchValue}
class="w-full text-sm bg-transparent outline-none" class="w-full text-sm bg-transparent outline-hidden"
placeholder={searchPlaceholder} placeholder={searchPlaceholder}
autocomplete="off" autocomplete="off"
on:keydown={(e) => { on:keydown={(e) => {
@ -305,7 +305,7 @@
{#each filteredItems as item, index} {#each filteredItems as item, index}
<button <button
aria-label="model-item" aria-label="model-item"
class="flex w-full text-left font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-none transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg cursor-pointer data-[highlighted]:bg-muted {index === class="flex w-full text-left font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg cursor-pointer data-highlighted:bg-muted {index ===
selectedModelIdx selectedModelIdx
? 'bg-gray-100 dark:bg-gray-800 group-hover:bg-transparent' ? 'bg-gray-100 dark:bg-gray-800 group-hover:bg-transparent'
: ''}" : ''}"
@ -322,7 +322,7 @@
<div class="flex gap-0.5 self-start h-full mb-1.5 -translate-x-1"> <div class="flex gap-0.5 self-start h-full mb-1.5 -translate-x-1">
{#each item.model?.info?.meta.tags as tag} {#each item.model?.info?.meta.tags as tag}
<div <div
class=" text-xs font-bold px-1 rounded uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200" class=" text-xs font-bold px-1 rounded-sm uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200"
> >
{tag.name} {tag.name}
</div> </div>
@ -445,7 +445,7 @@
{#each item.model?.info?.meta.tags as tag} {#each item.model?.info?.meta.tags as tag}
<Tooltip content={tag.name}> <Tooltip content={tag.name}>
<div <div
class=" text-xs font-bold px-1 rounded uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200" class=" text-xs font-bold px-1 rounded-sm uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200"
> >
{tag.name} {tag.name}
</div> </div>
@ -478,7 +478,7 @@
placement="top-start" placement="top-start"
> >
<button <button
class="flex w-full font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-none transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg cursor-pointer data-[highlighted]:bg-muted" class="flex w-full font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg cursor-pointer data-highlighted:bg-muted"
on:click={() => { on:click={() => {
pullModelHandler(); pullModelHandler();
}} }}
@ -492,7 +492,7 @@
{#each Object.keys($MODEL_DOWNLOAD_POOL) as model} {#each Object.keys($MODEL_DOWNLOAD_POOL) as model}
<div <div
class="flex w-full justify-between font-medium select-none rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-none transition-all duration-75 rounded-lg cursor-pointer data-[highlighted]:bg-muted" class="flex w-full justify-between font-medium select-none rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 rounded-lg cursor-pointer data-highlighted:bg-muted"
> >
<div class="flex"> <div class="flex">
<div class="-ml-2 mr-2.5 translate-y-0.5"> <div class="-ml-2 mr-2.5 translate-y-0.5">
@ -527,7 +527,7 @@
Downloading "{model}" Downloading "{model}"
</div> </div>
<div class="flex-shrink-0"> <div class="shrink-0">
{'pullProgress' in $MODEL_DOWNLOAD_POOL[model] {'pullProgress' in $MODEL_DOWNLOAD_POOL[model]
? `(${$MODEL_DOWNLOAD_POOL[model].pullProgress}%)` ? `(${$MODEL_DOWNLOAD_POOL[model].pullProgress}%)`
: ''} : ''}
@ -579,7 +579,7 @@
<div class="flex items-center mx-2 my-2"> <div class="flex items-center mx-2 my-2">
<button <button
class="flex justify-between w-full font-medium line-clamp-1 select-none items-center rounded-button py-2 px-3 text-sm text-gray-700 dark:text-gray-100 outline-none transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg cursor-pointer data-[highlighted]:bg-muted" class="flex justify-between w-full font-medium line-clamp-1 select-none items-center rounded-button py-2 px-3 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg cursor-pointer data-highlighted:bg-muted"
on:click={async () => { on:click={async () => {
temporaryChatEnabled.set(!$temporaryChatEnabled); temporaryChatEnabled.set(!$temporaryChatEnabled);
await goto('/'); await goto('/');

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

@ -45,7 +45,7 @@
<nav class="sticky top-0 z-30 w-full px-1.5 py-1.5 -mb-8 flex items-center drag-region"> <nav class="sticky top-0 z-30 w-full px-1.5 py-1.5 -mb-8 flex items-center drag-region">
<div <div
class=" bg-gradient-to-b via-50% from-white via-white to-transparent dark:from-gray-900 dark:via-gray-900 dark:to-transparent pointer-events-none absolute inset-0 -bottom-7 z-[-1] blur" class=" bg-linear-to-b via-50% from-white via-white to-transparent dark:from-gray-900 dark:via-gray-900 dark:to-transparent pointer-events-none absolute inset-0 -bottom-7 z-[-1] blur-sm"
></div> ></div>
<div class=" flex max-w-full w-full mx-auto px-1 pt-0.5 bg-transparent"> <div class=" flex max-w-full w-full mx-auto px-1 pt-0.5 bg-transparent">

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

@ -106,7 +106,7 @@
> >
<div class="w-full flex flex-col justify-center items-center"> <div class="w-full flex flex-col justify-center items-center">
<div class="flex flex-row justify-center gap-3 @sm:gap-3.5 w-fit px-5"> <div class="flex flex-row justify-center gap-3 @sm:gap-3.5 w-fit px-5">
<div class="flex flex-shrink-0 justify-center"> <div class="flex shrink-0 justify-center">
<div class="flex -space-x-4 mb-0.5" in:fade={{ duration: 100 }}> <div class="flex -space-x-4 mb-0.5" in:fade={{ duration: 100 }}>
{#each models as model, modelIdx} {#each models as model, modelIdx}
<Tooltip <Tooltip

4
src/lib/components/chat/Settings/About.svelte
View File

@ -92,7 +92,7 @@
</div> </div>
{#if ollamaVersion} {#if ollamaVersion}
<hr class=" dark:border-gray-850" /> <hr class=" border-gray-100 dark:border-gray-850" />
<div> <div>
<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Ollama Version')}</div> <div class=" mb-2.5 text-sm font-medium">{$i18n.t('Ollama Version')}</div>
@ -104,7 +104,7 @@
</div> </div>
{/if} {/if}
<hr class=" dark:border-gray-850" /> <hr class=" border-gray-100 dark:border-gray-850" />
<div class="mt-2 text-xs text-gray-400 dark:text-gray-500"> <div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
Emoji graphics provided by Emoji graphics provided by

6
src/lib/components/chat/Settings/Account.svelte
View File

@ -236,7 +236,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden"
type="text" type="text"
bind:value={name} bind:value={name}
required required
@ -251,7 +251,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden"
type="url" type="url"
placeholder={$i18n.t('Enter your webhook URL')} placeholder={$i18n.t('Enter your webhook URL')}
bind:value={webhookUrl} bind:value={webhookUrl}
@ -266,7 +266,7 @@
<UpdatePassword /> <UpdatePassword />
</div> </div>
<hr class=" dark:border-gray-850 my-4" /> <hr class="border-gray-100 dark:border-gray-850 my-4" />
<div class="flex justify-between items-center text-sm"> <div class="flex justify-between items-center text-sm">
<div class=" font-medium">{$i18n.t('API keys')}</div> <div class=" font-medium">{$i18n.t('API keys')}</div>

6
src/lib/components/chat/Settings/Account/UpdatePassword.svelte
View File

@ -60,7 +60,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
class="w-full bg-transparent dark:text-gray-300 outline-none placeholder:opacity-30" class="w-full bg-transparent dark:text-gray-300 outline-hidden placeholder:opacity-30"
type="password" type="password"
bind:value={currentPassword} bind:value={currentPassword}
placeholder={$i18n.t('Enter your current password')} placeholder={$i18n.t('Enter your current password')}
@ -75,7 +75,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
class="w-full bg-transparent text-sm dark:text-gray-300 outline-none placeholder:opacity-30" class="w-full bg-transparent text-sm dark:text-gray-300 outline-hidden placeholder:opacity-30"
type="password" type="password"
bind:value={newPassword} bind:value={newPassword}
placeholder={$i18n.t('Enter your new password')} placeholder={$i18n.t('Enter your new password')}
@ -90,7 +90,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
class="w-full bg-transparent text-sm dark:text-gray-300 outline-none placeholder:opacity-30" class="w-full bg-transparent text-sm dark:text-gray-300 outline-hidden placeholder:opacity-30"
type="password" type="password"
bind:value={newPasswordConfirm} bind:value={newPasswordConfirm}
placeholder={$i18n.t('Confirm your new password')} placeholder={$i18n.t('Confirm your new password')}

56
src/lib/components/chat/Settings/Advanced/AdvancedParams.svelte
View File

@ -59,7 +59,7 @@
{$i18n.t('Stream Chat Response')} {$i18n.t('Stream Chat Response')}
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
params.stream_response = params.stream_response =
(params?.stream_response ?? null) === null (params?.stream_response ?? null) === null
@ -95,7 +95,7 @@
{$i18n.t('Function Calling')} {$i18n.t('Function Calling')}
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
params.function_calling = (params?.function_calling ?? null) === null ? 'native' : null; params.function_calling = (params?.function_calling ?? null) === null ? 'native' : null;
}} }}
@ -125,7 +125,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none" class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
type="button" type="button"
on:click={() => { on:click={() => {
params.seed = (params?.seed ?? null) === null ? 0 : null; params.seed = (params?.seed ?? null) === null ? 0 : null;
@ -144,7 +144,7 @@
<div class="flex mt-0.5 space-x-2"> <div class="flex mt-0.5 space-x-2">
<div class=" flex-1"> <div class=" flex-1">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden"
type="number" type="number"
placeholder={$i18n.t('Enter Seed')} placeholder={$i18n.t('Enter Seed')}
bind:value={params.seed} bind:value={params.seed}
@ -170,7 +170,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none" class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
type="button" type="button"
on:click={() => { on:click={() => {
params.stop = (params?.stop ?? null) === null ? '' : null; params.stop = (params?.stop ?? null) === null ? '' : null;
@ -189,7 +189,7 @@
<div class="flex mt-0.5 space-x-2"> <div class="flex mt-0.5 space-x-2">
<div class=" flex-1"> <div class=" flex-1">
<input <input
class="w-full rounded-lg py-2 px-1 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-1 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden"
type="text" type="text"
placeholder={$i18n.t('Enter stop sequence')} placeholder={$i18n.t('Enter stop sequence')}
bind:value={params.stop} bind:value={params.stop}
@ -213,7 +213,7 @@
{$i18n.t('Temperature')} {$i18n.t('Temperature')}
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none" class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
type="button" type="button"
on:click={() => { on:click={() => {
params.temperature = (params?.temperature ?? null) === null ? 0.8 : null; params.temperature = (params?.temperature ?? null) === null ? 0.8 : null;
@ -268,7 +268,7 @@
{$i18n.t('Reasoning Effort')} {$i18n.t('Reasoning Effort')}
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none" class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
type="button" type="button"
on:click={() => { on:click={() => {
params.reasoning_effort = (params?.reasoning_effort ?? null) === null ? 'medium' : null; params.reasoning_effort = (params?.reasoning_effort ?? null) === null ? 'medium' : null;
@ -287,7 +287,7 @@
<div class="flex mt-0.5 space-x-2"> <div class="flex mt-0.5 space-x-2">
<div class=" flex-1"> <div class=" flex-1">
<input <input
class="w-full rounded-lg py-2 px-1 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-1 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden"
type="text" type="text"
placeholder={$i18n.t('Enter reasoning effort')} placeholder={$i18n.t('Enter reasoning effort')}
bind:value={params.reasoning_effort} bind:value={params.reasoning_effort}
@ -311,7 +311,7 @@
{$i18n.t('Mirostat')} {$i18n.t('Mirostat')}
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none" class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
type="button" type="button"
on:click={() => { on:click={() => {
params.mirostat = (params?.mirostat ?? null) === null ? 0 : null; params.mirostat = (params?.mirostat ?? null) === null ? 0 : null;
@ -366,7 +366,7 @@
{$i18n.t('Mirostat Eta')} {$i18n.t('Mirostat Eta')}
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none" class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
type="button" type="button"
on:click={() => { on:click={() => {
params.mirostat_eta = (params?.mirostat_eta ?? null) === null ? 0.1 : null; params.mirostat_eta = (params?.mirostat_eta ?? null) === null ? 0.1 : null;
@ -422,7 +422,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none" class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
type="button" type="button"
on:click={() => { on:click={() => {
params.mirostat_tau = (params?.mirostat_tau ?? null) === null ? 5.0 : null; params.mirostat_tau = (params?.mirostat_tau ?? null) === null ? 5.0 : null;
@ -477,7 +477,7 @@
{$i18n.t('Top K')} {$i18n.t('Top K')}
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none" class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
type="button" type="button"
on:click={() => { on:click={() => {
params.top_k = (params?.top_k ?? null) === null ? 40 : null; params.top_k = (params?.top_k ?? null) === null ? 40 : null;
@ -533,7 +533,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none" class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
type="button" type="button"
on:click={() => { on:click={() => {
params.top_p = (params?.top_p ?? null) === null ? 0.9 : null; params.top_p = (params?.top_p ?? null) === null ? 0.9 : null;
@ -588,7 +588,7 @@
{$i18n.t('Min P')} {$i18n.t('Min P')}
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none" class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
type="button" type="button"
on:click={() => { on:click={() => {
params.min_p = (params?.min_p ?? null) === null ? 0.0 : null; params.min_p = (params?.min_p ?? null) === null ? 0.0 : null;
@ -644,7 +644,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none" class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
type="button" type="button"
on:click={() => { on:click={() => {
params.frequency_penalty = (params?.frequency_penalty ?? null) === null ? 1.1 : null; params.frequency_penalty = (params?.frequency_penalty ?? null) === null ? 1.1 : null;
@ -700,7 +700,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none" class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
type="button" type="button"
on:click={() => { on:click={() => {
params.repeat_last_n = (params?.repeat_last_n ?? null) === null ? 64 : null; params.repeat_last_n = (params?.repeat_last_n ?? null) === null ? 64 : null;
@ -756,7 +756,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none" class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
type="button" type="button"
on:click={() => { on:click={() => {
params.tfs_z = (params?.tfs_z ?? null) === null ? 1 : null; params.tfs_z = (params?.tfs_z ?? null) === null ? 1 : null;
@ -812,7 +812,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none" class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
type="button" type="button"
on:click={() => { on:click={() => {
params.num_ctx = (params?.num_ctx ?? null) === null ? 2048 : null; params.num_ctx = (params?.num_ctx ?? null) === null ? 2048 : null;
@ -867,7 +867,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none" class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
type="button" type="button"
on:click={() => { on:click={() => {
params.num_batch = (params?.num_batch ?? null) === null ? 512 : null; params.num_batch = (params?.num_batch ?? null) === null ? 512 : null;
@ -922,7 +922,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none" class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
type="button" type="button"
on:click={() => { on:click={() => {
params.num_keep = (params?.num_keep ?? null) === null ? 24 : null; params.num_keep = (params?.num_keep ?? null) === null ? 24 : null;
@ -977,7 +977,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none" class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
type="button" type="button"
on:click={() => { on:click={() => {
params.max_tokens = (params?.max_tokens ?? null) === null ? 128 : null; params.max_tokens = (params?.max_tokens ?? null) === null ? 128 : null;
@ -1032,7 +1032,7 @@
{$i18n.t('use_mmap (Ollama)')} {$i18n.t('use_mmap (Ollama)')}
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none" class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
type="button" type="button"
on:click={() => { on:click={() => {
params.use_mmap = (params?.use_mmap ?? null) === null ? true : null; params.use_mmap = (params?.use_mmap ?? null) === null ? true : null;
@ -1073,7 +1073,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none" class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
type="button" type="button"
on:click={() => { on:click={() => {
params.use_mlock = (params?.use_mlock ?? null) === null ? true : null; params.use_mlock = (params?.use_mlock ?? null) === null ? true : null;
@ -1115,7 +1115,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none" class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
type="button" type="button"
on:click={() => { on:click={() => {
params.num_thread = (params?.num_thread ?? null) === null ? 2 : null; params.num_thread = (params?.num_thread ?? null) === null ? 2 : null;
@ -1171,7 +1171,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none" class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
type="button" type="button"
on:click={() => { on:click={() => {
params.num_gpu = (params?.num_gpu ?? null) === null ? 0 : null; params.num_gpu = (params?.num_gpu ?? null) === null ? 0 : null;
@ -1218,7 +1218,7 @@
<div class=" self-center text-xs font-medium">{$i18n.t('Template')}</div> <div class=" self-center text-xs font-medium">{$i18n.t('Template')}</div>
<button <button
class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none" class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden"
type="button" type="button"
on:click={() => { on:click={() => {
params.template = (params?.template ?? null) === null ? '' : null; params.template = (params?.template ?? null) === null ? '' : null;
@ -1236,7 +1236,7 @@
<div class="flex mt-0.5 space-x-2"> <div class="flex mt-0.5 space-x-2">
<div class=" flex-1"> <div class=" flex-1">
<textarea <textarea
class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg -mb-1" class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-hidden rounded-lg -mb-1"
placeholder={$i18n.t('Write your model template content here')} placeholder={$i18n.t('Write your model template content here')}
rows="4" rows="4"
bind:value={params.template} bind:value={params.template}

20
src/lib/components/chat/Settings/Audio.svelte
View File

@ -181,7 +181,7 @@
<div class=" self-center text-xs font-medium">{$i18n.t('Speech-to-Text Engine')}</div> <div class=" self-center text-xs font-medium">{$i18n.t('Speech-to-Text Engine')}</div>
<div class="flex items-center relative"> <div class="flex items-center relative">
<select <select
class="dark:bg-gray-900 w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right" class="dark:bg-gray-900 w-fit pr-8 rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-right"
bind:value={STTEngine} bind:value={STTEngine}
placeholder="Select an engine" placeholder="Select an engine"
> >
@ -198,7 +198,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
toggleSpeechAutoSend(); toggleSpeechAutoSend();
}} }}
@ -220,7 +220,7 @@
<div class=" self-center text-xs font-medium">{$i18n.t('Text-to-Speech Engine')}</div> <div class=" self-center text-xs font-medium">{$i18n.t('Text-to-Speech Engine')}</div>
<div class="flex items-center relative"> <div class="flex items-center relative">
<select <select
class="dark:bg-gray-900 w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right" class="dark:bg-gray-900 w-fit pr-8 rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-right"
bind:value={TTSEngine} bind:value={TTSEngine}
placeholder="Select an engine" placeholder="Select an engine"
> >
@ -235,7 +235,7 @@
<div class=" self-center text-xs font-medium">{$i18n.t('Kokoro.js Dtype')}</div> <div class=" self-center text-xs font-medium">{$i18n.t('Kokoro.js Dtype')}</div>
<div class="flex items-center relative"> <div class="flex items-center relative">
<select <select
class="dark:bg-gray-900 w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right" class="dark:bg-gray-900 w-fit pr-8 rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-right"
bind:value={TTSEngineConfig.dtype} bind:value={TTSEngineConfig.dtype}
placeholder="Select dtype" placeholder="Select dtype"
> >
@ -253,7 +253,7 @@
<div class=" self-center text-xs font-medium">{$i18n.t('Auto-playback response')}</div> <div class=" self-center text-xs font-medium">{$i18n.t('Auto-playback response')}</div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
toggleResponseAutoPlayback(); toggleResponseAutoPlayback();
}} }}
@ -272,7 +272,7 @@
<div class="flex items-center relative"> <div class="flex items-center relative">
<select <select
class="dark:bg-gray-900 w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right" class="dark:bg-gray-900 w-fit pr-8 rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-right"
bind:value={playbackRate} bind:value={playbackRate}
> >
{#each speedOptions as option} {#each speedOptions as option}
@ -283,7 +283,7 @@
</div> </div>
</div> </div>
<hr class=" dark:border-gray-850" /> <hr class=" border-gray-100 dark:border-gray-850" />
{#if TTSEngine === 'browser-kokoro'} {#if TTSEngine === 'browser-kokoro'}
{#if TTSModel} {#if TTSModel}
@ -293,7 +293,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
list="voice-list" list="voice-list"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-white dark:text-gray-300 dark:bg-gray-850 outline-hidden"
bind:value={voice} bind:value={voice}
placeholder="Select a voice" placeholder="Select a voice"
/> />
@ -330,7 +330,7 @@
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1"> <div class="flex-1">
<select <select
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-white dark:text-gray-300 dark:bg-gray-850 outline-hidden"
bind:value={voice} bind:value={voice}
> >
<option value="" selected={voice !== ''}>{$i18n.t('Default')}</option> <option value="" selected={voice !== ''}>{$i18n.t('Default')}</option>
@ -361,7 +361,7 @@
<div class="flex-1"> <div class="flex-1">
<input <input
list="voice-list" list="voice-list"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm bg-white dark:text-gray-300 dark:bg-gray-850 outline-hidden"
bind:value={voice} bind:value={voice}
placeholder="Select a voice" placeholder="Select a voice"
/> />

2
src/lib/components/chat/Settings/Chats.svelte
View File

@ -154,7 +154,7 @@
</button> </button>
</div> </div>
<hr class=" dark:border-gray-850" /> <hr class=" border-gray-100 dark:border-gray-850" />
<div class="flex flex-col"> <div class="flex flex-col">
{#if showArchiveConfirm} {#if showArchiveConfirm}

4
src/lib/components/chat/Settings/Connections/Connection.svelte
View File

@ -53,7 +53,7 @@
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1 relative"> <div class="flex-1 relative">
<input <input
class=" outline-none w-full bg-transparent {pipeline ? 'pr-8' : ''}" class=" outline-hidden w-full bg-transparent {pipeline ? 'pr-8' : ''}"
placeholder={$i18n.t('API Base URL')} placeholder={$i18n.t('API Base URL')}
bind:value={url} bind:value={url}
autocomplete="off" autocomplete="off"
@ -61,7 +61,7 @@
</div> </div>
<SensitiveInput <SensitiveInput
inputClassName=" outline-none bg-transparent w-full" inputClassName=" outline-hidden bg-transparent w-full"
placeholder={$i18n.t('API Key')} placeholder={$i18n.t('API Key')}
bind:value={key} bind:value={key}
/> />

18
src/lib/components/chat/Settings/General.svelte
View File

@ -167,7 +167,7 @@
<div class=" self-center text-xs font-medium">{$i18n.t('Theme')}</div> <div class=" self-center text-xs font-medium">{$i18n.t('Theme')}</div>
<div class="flex items-center relative"> <div class="flex items-center relative">
<select <select
class=" dark:bg-gray-900 w-fit pr-8 rounded py-2 px-2 text-xs bg-transparent outline-none text-right" class=" dark:bg-gray-900 w-fit pr-8 rounded-sm py-2 px-2 text-xs bg-transparent outline-hidden text-right"
bind:value={selectedTheme} bind:value={selectedTheme}
placeholder="Select a theme" placeholder="Select a theme"
on:change={() => themeChangeHandler(selectedTheme)} on:change={() => themeChangeHandler(selectedTheme)}
@ -187,7 +187,7 @@
<div class=" self-center text-xs font-medium">{$i18n.t('Language')}</div> <div class=" self-center text-xs font-medium">{$i18n.t('Language')}</div>
<div class="flex items-center relative"> <div class="flex items-center relative">
<select <select
class=" dark:bg-gray-900 w-fit pr-8 rounded py-2 px-2 text-xs bg-transparent outline-none text-right" class=" dark:bg-gray-900 w-fit pr-8 rounded-sm py-2 px-2 text-xs bg-transparent outline-hidden text-right"
bind:value={lang} bind:value={lang}
placeholder="Select a language" placeholder="Select a language"
on:change={(e) => { on:change={(e) => {
@ -218,7 +218,7 @@
<div class=" self-center text-xs font-medium">{$i18n.t('Notifications')}</div> <div class=" self-center text-xs font-medium">{$i18n.t('Notifications')}</div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
toggleNotification(); toggleNotification();
}} }}
@ -235,13 +235,13 @@
</div> </div>
{#if $user.role === 'admin' || $user?.permissions.chat?.controls} {#if $user.role === 'admin' || $user?.permissions.chat?.controls}
<hr class=" dark:border-gray-850 my-3" /> <hr class="border-gray-100 dark:border-gray-850 my-3" />
<div> <div>
<div class=" my-2.5 text-sm font-medium">{$i18n.t('System Prompt')}</div> <div class=" my-2.5 text-sm font-medium">{$i18n.t('System Prompt')}</div>
<textarea <textarea
bind:value={system} bind:value={system}
class="w-full rounded-lg p-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none resize-none" class="w-full rounded-lg p-4 text-sm bg-white dark:text-gray-300 dark:bg-gray-850 outline-hidden resize-none"
rows="4" rows="4"
/> />
</div> </div>
@ -260,14 +260,14 @@
{#if showAdvanced} {#if showAdvanced}
<AdvancedParams admin={$user?.role === 'admin'} bind:params /> <AdvancedParams admin={$user?.role === 'admin'} bind:params />
<hr class=" dark:border-gray-850" /> <hr class=" border-gray-100 dark:border-gray-850" />
<div class=" py-1 w-full justify-between"> <div class=" py-1 w-full justify-between">
<div class="flex w-full justify-between"> <div class="flex w-full justify-between">
<div class=" self-center text-xs font-medium">{$i18n.t('Keep Alive')}</div> <div class=" self-center text-xs font-medium">{$i18n.t('Keep Alive')}</div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
type="button" type="button"
on:click={() => { on:click={() => {
keepAlive = keepAlive === null ? '5m' : null; keepAlive = keepAlive === null ? '5m' : null;
@ -284,7 +284,7 @@
{#if keepAlive !== null} {#if keepAlive !== null}
<div class="flex mt-1 space-x-2"> <div class="flex mt-1 space-x-2">
<input <input
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none" class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden"
type="text" type="text"
placeholder={$i18n.t("e.g. '30s','10m'. Valid time units are 's', 'm', 'h'.")} placeholder={$i18n.t("e.g. '30s','10m'. Valid time units are 's', 'm', 'h'.")}
bind:value={keepAlive} bind:value={keepAlive}
@ -298,7 +298,7 @@
<div class=" self-center text-sm font-medium">{$i18n.t('Request Mode')}</div> <div class=" self-center text-sm font-medium">{$i18n.t('Request Mode')}</div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
toggleRequestFormat(); toggleRequestFormat();
}} }}

48
src/lib/components/chat/Settings/Interface.svelte
View File

@ -290,7 +290,7 @@
<div class=" self-center text-xs">{$i18n.t('Landing Page Mode')}</div> <div class=" self-center text-xs">{$i18n.t('Landing Page Mode')}</div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
toggleLandingPageMode(); toggleLandingPageMode();
}} }}
@ -310,7 +310,7 @@
<div class=" self-center text-xs">{$i18n.t('Chat Bubble UI')}</div> <div class=" self-center text-xs">{$i18n.t('Chat Bubble UI')}</div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
toggleChatBubble(); toggleChatBubble();
}} }}
@ -333,7 +333,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
toggleShowUsername(); toggleShowUsername();
}} }}
@ -354,7 +354,7 @@
<div class=" self-center text-xs">{$i18n.t('Widescreen Mode')}</div> <div class=" self-center text-xs">{$i18n.t('Widescreen Mode')}</div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
toggleWidescreenMode(); toggleWidescreenMode();
}} }}
@ -374,7 +374,7 @@
<div class=" self-center text-xs">{$i18n.t('Chat direction')}</div> <div class=" self-center text-xs">{$i18n.t('Chat direction')}</div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={toggleChangeChatDirection} on:click={toggleChangeChatDirection}
type="button" type="button"
> >
@ -394,7 +394,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
toggleNotificationSound(); toggleNotificationSound();
}} }}
@ -417,7 +417,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
toggleShowUpdateToast(); toggleShowUpdateToast();
}} }}
@ -439,7 +439,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
toggleShowChangelog(); toggleShowChangelog();
}} }}
@ -462,7 +462,7 @@
<div class=" self-center text-xs">{$i18n.t('Title Auto-Generation')}</div> <div class=" self-center text-xs">{$i18n.t('Title Auto-Generation')}</div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
toggleTitleAutoGenerate(); toggleTitleAutoGenerate();
}} }}
@ -482,7 +482,7 @@
<div class=" self-center text-xs">{$i18n.t('Chat Tags Auto-Generation')}</div> <div class=" self-center text-xs">{$i18n.t('Chat Tags Auto-Generation')}</div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
toggleAutoTags(); toggleAutoTags();
}} }}
@ -504,7 +504,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
toggleResponseAutoCopy(); toggleResponseAutoCopy();
}} }}
@ -526,7 +526,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
toggleRichTextInput(); toggleRichTextInput();
}} }}
@ -548,7 +548,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
toggleLargeTextAsFile(); toggleLargeTextAsFile();
}} }}
@ -570,7 +570,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
if (backgroundImageUrl !== null) { if (backgroundImageUrl !== null) {
backgroundImageUrl = null; backgroundImageUrl = null;
@ -595,7 +595,7 @@
<div class=" self-center text-xs">{$i18n.t('Allow User Location')}</div> <div class=" self-center text-xs">{$i18n.t('Allow User Location')}</div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
toggleUserLocation(); toggleUserLocation();
}} }}
@ -615,7 +615,7 @@
<div class=" self-center text-xs">{$i18n.t('Haptic Feedback')}</div> <div class=" self-center text-xs">{$i18n.t('Haptic Feedback')}</div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
toggleHapticFeedback(); toggleHapticFeedback();
}} }}
@ -637,7 +637,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
toggleSplitLargeChunks(); toggleSplitLargeChunks();
}} }}
@ -659,7 +659,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
togglesScrollOnBranchChange(); togglesScrollOnBranchChange();
}} }}
@ -679,7 +679,7 @@
<div class=" self-center text-xs">{$i18n.t('Web Search in Chat')}</div> <div class=" self-center text-xs">{$i18n.t('Web Search in Chat')}</div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
toggleWebSearch(); toggleWebSearch();
}} }}
@ -701,7 +701,7 @@
<div class=" self-center text-xs">{$i18n.t('Allow Voice Interruption in Call')}</div> <div class=" self-center text-xs">{$i18n.t('Allow Voice Interruption in Call')}</div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
toggleVoiceInterruption(); toggleVoiceInterruption();
}} }}
@ -721,7 +721,7 @@
<div class=" self-center text-xs">{$i18n.t('Display Emoji in Call')}</div> <div class=" self-center text-xs">{$i18n.t('Display Emoji in Call')}</div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
toggleEmojiInCall(); toggleEmojiInCall();
}} }}
@ -743,7 +743,7 @@
<div class=" self-center text-xs">{$i18n.t('Image Compression')}</div> <div class=" self-center text-xs">{$i18n.t('Image Compression')}</div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
toggleImageCompression(); toggleImageCompression();
}} }}
@ -767,14 +767,14 @@
<input <input
bind:value={imageCompressionSize.width} bind:value={imageCompressionSize.width}
type="number" type="number"
class="w-20 bg-transparent outline-none text-center" class="w-20 bg-transparent outline-hidden text-center"
min="0" min="0"
placeholder="Width" placeholder="Width"
/>x />x
<input <input
bind:value={imageCompressionSize.height} bind:value={imageCompressionSize.height}
type="number" type="number"
class="w-20 bg-transparent outline-none text-center" class="w-20 bg-transparent outline-hidden text-center"
min="0" min="0"
placeholder="Height" placeholder="Height"
/> />

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

@ -395,7 +395,7 @@
<Search className="size-3.5" /> <Search className="size-3.5" />
</div> </div>
<input <input
class="w-full py-1.5 text-sm bg-transparent dark:text-gray-300 outline-none" class="w-full py-1.5 text-sm bg-transparent dark:text-gray-300 outline-hidden"
bind:value={search} bind:value={search}
on:input={searchDebounceHandler} on:input={searchDebounceHandler}
placeholder={$i18n.t('Search')} placeholder={$i18n.t('Search')}

48
src/lib/components/chat/ShortcutsModal.svelte
View File

@ -38,19 +38,19 @@
<div class="flex space-x-1 text-xs"> <div class="flex space-x-1 text-xs">
<div <div
class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300" class=" h-fit py-1 px-2 flex items-center justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
> >
Ctrl/⌘ Ctrl/⌘
</div> </div>
<div <div
class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300" class=" h-fit py-1 px-2 flex items-center justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
> >
Shift Shift
</div> </div>
<div <div
class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300" class=" h-fit py-1 px-2 flex items-center justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
> >
O O
</div> </div>
@ -62,13 +62,13 @@
<div class="flex space-x-1 text-xs"> <div class="flex space-x-1 text-xs">
<div <div
class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300" class=" h-fit py-1 px-2 flex items-center justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
> >
Shift Shift
</div> </div>
<div <div
class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300" class=" h-fit py-1 px-2 flex items-center justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
> >
Esc Esc
</div> </div>
@ -80,19 +80,19 @@
<div class="flex space-x-1 text-xs"> <div class="flex space-x-1 text-xs">
<div <div
class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300" class=" h-fit py-1 px-2 flex items-center justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
> >
Ctrl/⌘ Ctrl/⌘
</div> </div>
<div <div
class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300" class=" h-fit py-1 px-2 flex items-center justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
> >
Shift Shift
</div> </div>
<div <div
class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300" class=" h-fit py-1 px-2 flex items-center justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
> >
; ;
</div> </div>
@ -104,19 +104,19 @@
<div class="flex space-x-1 text-xs"> <div class="flex space-x-1 text-xs">
<div <div
class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300" class=" h-fit py-1 px-2 flex items-center justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
> >
Ctrl/⌘ Ctrl/⌘
</div> </div>
<div <div
class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300" class=" h-fit py-1 px-2 flex items-center justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
> >
Shift Shift
</div> </div>
<div <div
class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300" class=" h-fit py-1 px-2 flex items-center justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
> >
C C
</div> </div>
@ -130,12 +130,12 @@
<div class="flex space-x-1 text-xs"> <div class="flex space-x-1 text-xs">
<div <div
class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300" class=" h-fit py-1 px-2 flex items-center justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
> >
Ctrl/⌘ Ctrl/⌘
</div> </div>
<div <div
class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300" class=" h-fit py-1 px-2 flex items-center justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
> >
. .
</div> </div>
@ -147,19 +147,19 @@
<div class="flex space-x-1 text-xs"> <div class="flex space-x-1 text-xs">
<div <div
class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300" class=" h-fit py-1 px-2 flex items-center justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
> >
Ctrl/⌘ Ctrl/⌘
</div> </div>
<div <div
class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300" class=" h-fit py-1 px-2 flex items-center justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
> >
Shift Shift
</div> </div>
<div <div
class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300" class=" h-fit py-1 px-2 flex items-center justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
> >
S S
</div> </div>
@ -171,18 +171,18 @@
<div class="flex space-x-1 text-xs"> <div class="flex space-x-1 text-xs">
<div <div
class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300" class=" h-fit py-1 px-2 flex items-center justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
> >
Ctrl/⌘ Ctrl/⌘
</div> </div>
<div <div
class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300" class=" h-fit py-1 px-2 flex items-center justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
> >
Shift Shift
</div> </div>
<div <div
class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300" class=" h-fit py-1 px-2 flex items-center justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
> >
⌫/Delete ⌫/Delete
</div> </div>
@ -194,13 +194,13 @@
<div class="flex space-x-1 text-xs"> <div class="flex space-x-1 text-xs">
<div <div
class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300" class=" h-fit py-1 px-2 flex items-center justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
> >
Ctrl/⌘ Ctrl/⌘
</div> </div>
<div <div
class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300" class=" h-fit py-1 px-2 flex items-center justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
> >
/ /
</div> </div>
@ -224,7 +224,7 @@
<div class="flex space-x-1 text-xs"> <div class="flex space-x-1 text-xs">
<div <div
class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300" class=" h-fit py-1 px-2 flex items-center justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
> >
# #
</div> </div>
@ -238,7 +238,7 @@
<div class="flex space-x-1 text-xs"> <div class="flex space-x-1 text-xs">
<div <div
class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300" class=" h-fit py-1 px-2 flex items-center justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
> >
/ /
</div> </div>
@ -252,7 +252,7 @@
<div class="flex space-x-1 text-xs"> <div class="flex space-x-1 text-xs">
<div <div
class=" h-fit py-1 px-2 flex items-center justify-center rounded border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300" class=" h-fit py-1 px-2 flex items-center justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
> >
@ @
</div> </div>

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

@ -13,7 +13,7 @@
<div <div
class=" text-xs font-bold {classNames[type] ?? class=" text-xs font-bold {classNames[type] ??
classNames['info']} w-fit px-2 rounded uppercase line-clamp-1 mr-0.5" classNames['info']} w-fit px-2 rounded-sm uppercase line-clamp-1 mr-0.5"
> >
{content} {content}
</div> </div>

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

@ -48,7 +48,7 @@
<div class="flex justify-between self-start"> <div class="flex justify-between self-start">
<div <div
class=" text-xs font-bold {classNames[banner.type] ?? class=" text-xs font-bold {classNames[banner.type] ??
classNames['info']} w-fit px-2 rounded uppercase line-clamp-1 mr-0.5" classNames['info']} w-fit px-2 rounded-sm uppercase line-clamp-1 mr-0.5"
> >
{banner.type} {banner.type}
</div> </div>

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

@ -14,7 +14,7 @@
class=" outline -outline-offset-1 outline-[1.5px] outline-gray-200 dark:outline-gray-600 {state !== class=" outline -outline-offset-1 outline-[1.5px] outline-gray-200 dark:outline-gray-600 {state !==
'unchecked' 'unchecked'
? 'bg-black outline-black ' ? 'bg-black outline-black '
: 'hover:outline-gray-500 hover:bg-gray-50 dark:hover:bg-gray-800'} text-white transition-all rounded inline-block w-3.5 h-3.5 relative" : 'hover:outline-gray-500 hover:bg-gray-50 dark:hover:bg-gray-800'} text-white transition-all rounded-sm inline-block w-3.5 h-3.5 relative"
on:click={() => { on:click={() => {
if (_state === 'unchecked') { if (_state === 'unchecked') {
_state = 'checked'; _state = 'checked';

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

@ -65,7 +65,7 @@
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
bind:this={modalElement} bind:this={modalElement}
class=" fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] flex justify-center z-[99999999] overflow-hidden overscroll-contain" class=" fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] flex justify-center z-99999999 overflow-hidden overscroll-contain"
in:fade={{ duration: 10 }} in:fade={{ duration: 10 }}
on:mousedown={() => { on:mousedown={() => {
show = false; show = false;
@ -99,7 +99,7 @@
<textarea <textarea
bind:value={inputValue} bind:value={inputValue}
placeholder={inputPlaceholder ? inputPlaceholder : $i18n.t('Enter your message')} placeholder={inputPlaceholder ? inputPlaceholder : $i18n.t('Enter your message')}
class="w-full mt-2 rounded-lg px-4 py-2 text-sm dark:text-gray-300 dark:bg-gray-900 outline-none resize-none" class="w-full mt-2 rounded-lg px-4 py-2 text-sm dark:text-gray-300 dark:bg-gray-900 outline-hidden resize-none"
rows="3" rows="3"
required required
/> />

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

@ -24,7 +24,7 @@
bind:this={popupElement} bind:this={popupElement}
class="fixed top-0 left-0 w-screen h-[100dvh] z-50 touch-none pointer-events-none" class="fixed top-0 left-0 w-screen h-[100dvh] z-50 touch-none pointer-events-none"
> >
<div class=" absolute text-white z-[99999]" style="top: {y + 10}px; left: {x + 10}px;"> <div class=" absolute text-white z-99999" style="top: {y + 10}px; left: {x + 10}px;">
<slot></slot> <slot></slot>
</div> </div>
</div> </div>

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

@ -60,7 +60,7 @@
bind:this={modalElement} bind:this={modalElement}
class="modal fixed right-0 {$isApp class="modal fixed right-0 {$isApp
? ' ml-[4.5rem] max-w-[calc(100%-4.5rem)]' ? ' ml-[4.5rem] max-w-[calc(100%-4.5rem)]'
: ''} left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] flex justify-center z-[999] overflow-hidden overscroll-contain" : ''} left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] flex justify-center z-999 overflow-hidden overscroll-contain"
in:fly={{ y: 100, duration: 100 }} in:fly={{ y: 100, duration: 100 }}
on:mousedown={() => { on:mousedown={() => {
show = false; show = false;

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

@ -112,7 +112,7 @@
<div bind:this={folderElement} class="relative {className}"> <div bind:this={folderElement} class="relative {className}">
{#if draggedOver} {#if draggedOver}
<div <div
class="absolute top-0 left-0 w-full h-full rounded-sm bg-gray-100/50 dark:bg-gray-700/20 bg-opacity-50 dark:bg-opacity-10 z-50 pointer-events-none touch-none" class="absolute top-0 left-0 w-full h-full rounded-xs bg-gray-100/50 dark:bg-gray-700/20 bg-opacity-50 dark:bg-opacity-10 z-50 pointer-events-none touch-none"
></div> ></div>
{/if} {/if}

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

@ -5,7 +5,7 @@
export let src = ''; export let src = '';
export let alt = ''; export let alt = '';
export let className = ' w-full outline-none focus:outline-none'; export let className = ' w-full outline-hidden focus:outline-hidden';
export let imageClassName = 'rounded-lg'; export let imageClassName = 'rounded-lg';
let _src = ''; let _src = '';

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

@ -60,7 +60,7 @@
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
bind:this={previewElement} bind:this={previewElement}
class="modal fixed top-0 right-0 left-0 bottom-0 bg-black text-white w-full min-h-screen h-screen flex justify-center z-[9999] overflow-hidden overscroll-contain" class="modal fixed top-0 right-0 left-0 bottom-0 bg-black text-white w-full min-h-screen h-screen flex justify-center z-9999 overflow-hidden overscroll-contain"
> >
<div class=" absolute left-0 w-full flex justify-between select-none"> <div class=" absolute left-0 w-full flex justify-between select-none">
<div> <div>

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

@ -67,7 +67,7 @@
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
bind:this={modalElement} bind:this={modalElement}
class="modal fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] {containerClassName} flex justify-center z-[9999] overflow-y-auto overscroll-contain" class="modal fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] {containerClassName} flex justify-center z-9999 overflow-y-auto overscroll-contain"
in:fade={{ duration: 10 }} in:fade={{ duration: 10 }}
on:mousedown={() => { on:mousedown={() => {
show = false; show = false;

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

@ -11,7 +11,7 @@
{#if show} {#if show}
<div class="absolute w-full h-full flex"> <div class="absolute w-full h-full flex">
<div <div
class="absolute rounded" class="absolute rounded-sm"
style="inset: -10px; opacity: {opacity}; backdrop-filter: blur(5px);" style="inset: -10px; opacity: {opacity}; backdrop-filter: blur(5px);"
/> />

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

@ -25,7 +25,7 @@
{:else} {:else}
<Pagination.Page <Pagination.Page
{page} {page}
class="inline-flex size-8 items-center justify-center rounded-[9px] bg-transparent hover:bg-gray-50 dark:hover:bg-gray-850 text-sm font-medium hover:bg-dark-10 active:scale-98 disabled:cursor-not-allowed disabled:opacity-50 hover:disabled:bg-transparent data-[selected]:bg-gray-50 data-[selected]:text-gray-700 data-[selected]:hover:bg-gray-100 dark:data-[selected]:bg-gray-850 dark:data-[selected]:text-gray-50 dark:data-[selected]:hover:bg-gray-800 transition" class="inline-flex size-8 items-center justify-center rounded-[9px] bg-transparent hover:bg-gray-50 dark:hover:bg-gray-850 text-sm font-medium hover:bg-dark-10 active:scale-98 disabled:cursor-not-allowed disabled:opacity-50 hover:disabled:bg-transparent data-selected:bg-gray-50 data-selected:text-gray-700 data-selected:hover:bg-gray-100 dark:data-selected:bg-gray-850 dark:data-selected:text-gray-50 dark:data-selected:hover:bg-gray-800 transition"
> >
{page.value} {page.value}
</Pagination.Page> </Pagination.Page>

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

@ -42,13 +42,13 @@
> >
<Select.Trigger class="relative w-full" aria-label={placeholder}> <Select.Trigger class="relative w-full" aria-label={placeholder}>
<Select.Value <Select.Value
class="inline-flex h-input px-0.5 w-full outline-none bg-transparent truncate text-lg font-semibold placeholder-gray-400 focus:outline-none" class="inline-flex h-input px-0.5 w-full outline-hidden bg-transparent truncate text-lg font-semibold placeholder-gray-400 focus:outline-hidden"
{placeholder} {placeholder}
/> />
<ChevronDown className="absolute end-2 top-1/2 -translate-y-[45%] size-3.5" strokeWidth="2.5" /> <ChevronDown className="absolute end-2 top-1/2 -translate-y-[45%] size-3.5" strokeWidth="2.5" />
</Select.Trigger> </Select.Trigger>
<Select.Content <Select.Content
class="w-full rounded-lg bg-white dark:bg-gray-900 dark:text-white shadow-lg border border-gray-300/30 dark:border-gray-700/40 outline-none" class="w-full rounded-lg bg-white dark:bg-gray-900 dark:text-white shadow-lg border border-gray-300/30 dark:border-gray-700/40 outline-hidden"
transition={flyAndScale} transition={flyAndScale}
sideOffset={4} sideOffset={4}
> >
@ -59,7 +59,7 @@
<input <input
bind:value={searchValue} bind:value={searchValue}
class="w-full text-sm bg-transparent outline-none" class="w-full text-sm bg-transparent outline-hidden"
placeholder={searchPlaceholder} placeholder={searchPlaceholder}
/> />
</div> </div>
@ -70,7 +70,7 @@
<div class="px-3 my-2 max-h-80 overflow-y-auto"> <div class="px-3 my-2 max-h-80 overflow-y-auto">
{#each filteredItems as item} {#each filteredItems as item}
<Select.Item <Select.Item
class="flex w-full font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-none transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg cursor-pointer data-[highlighted]:bg-muted" class="flex w-full font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg cursor-pointer data-highlighted:bg-muted"
value={item.value} value={item.value}
label={item.label} label={item.label}
> >

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

@ -5,7 +5,7 @@
export let readOnly = false; export let readOnly = false;
export let outerClassName = 'flex flex-1 bg-transparent'; export let outerClassName = 'flex flex-1 bg-transparent';
export let inputClassName = export let inputClassName =
'w-full text-sm py-0.5 placeholder:text-gray-300 dark:placeholder:text-gray-700 bg-transparent outline-none'; 'w-full text-sm py-0.5 placeholder:text-gray-300 dark:placeholder:text-gray-700 bg-transparent outline-hidden';
export let showButtonClassName = 'pl-1.5 transition bg-transparent'; export let showButtonClassName = 'pl-1.5 transition bg-transparent';
let show = false; let show = false;

2
src/lib/components/common/Tags/TagInput.svelte
View File

@ -27,7 +27,7 @@
<div class="flex items-center"> <div class="flex items-center">
<input <input
bind:value={tagName} bind:value={tagName}
class=" px-2 cursor-pointer self-center text-xs h-fit bg-transparent outline-none line-clamp-1 w-[6.5rem]" class=" px-2 cursor-pointer self-center text-xs h-fit bg-transparent outline-hidden line-clamp-1 w-[6.5rem]"
placeholder={$i18n.t('Add a tag')} placeholder={$i18n.t('Add a tag')}
list="tagOptions" list="tagOptions"
on:keydown={(event) => { on:keydown={(event) => {

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

@ -6,7 +6,7 @@
export let rows = 1; export let rows = 1;
export let required = false; export let required = false;
export let className = export let className =
'w-full rounded-lg px-3 py-2 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none h-full'; 'w-full rounded-lg px-3 py-2 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden h-full';
let textareaElement; let textareaElement;

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

@ -22,7 +22,7 @@
</div> </div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded-sm transition"
type="button" type="button"
on:click={() => { on:click={() => {
valves[property] = valves[property] =
@ -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-none 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-800"
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-none 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-800"
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.svelte
View File

@ -46,7 +46,7 @@
<div class="sticky top-0 z-30 w-full px-1.5 py-1.5 -mb-8 flex items-center"> <div class="sticky top-0 z-30 w-full px-1.5 py-1.5 -mb-8 flex items-center">
<div <div
class=" bg-gradient-to-b via-50% from-white via-white to-transparent dark:from-gray-900 dark:via-gray-900 dark:to-transparent pointer-events-none absolute inset-0 -bottom-7 z-[-1] blur" class=" bg-linear-to-b via-50% from-white via-white to-transparent dark:from-gray-900 dark:via-gray-900 dark:to-transparent pointer-events-none absolute inset-0 -bottom-7 z-[-1] blur-sm"
></div> ></div>
<div class=" flex max-w-full w-full mx-auto px-1 pt-0.5 bg-transparent"> <div class=" flex max-w-full w-full mx-auto px-1 pt-0.5 bg-transparent">

2
src/lib/components/layout/Overlay/AccountPending.svelte
View File

@ -14,7 +14,7 @@
}); });
</script> </script>
<div class="fixed w-full h-full flex z-[999]"> <div class="fixed w-full h-full flex z-999">
<div <div
class="absolute w-full h-full backdrop-blur-lg bg-white/10 dark:bg-gray-900/50 flex justify-center" class="absolute w-full h-full backdrop-blur-lg bg-white/10 dark:bg-gray-900/50 flex justify-center"
> >

Some files were not shown because too many files have changed in this diff Show More