OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-26 18:26:48 +00:00
Code Issues Actions 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
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/workspace/Knowledge.svelte
View File

@@ -101,7 +101,7 @@
<Search className="size-3.5" />
</div>
<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={query}
placeholder={$i18n.t('Search Knowledge')}
/>

4
src/lib/components/workspace/Knowledge/CreateKnowledgeBase.svelte
View File

@@ -85,7 +85,7 @@
<div class="w-full mt-1">
<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"
bind:value={name}
placeholder={$i18n.t('Name your knowledge base')}
@@ -99,7 +99,7 @@
<div class=" w-full mt-1">
<textarea
class="w-full resize-none rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
class="w-full resize-none rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
rows="4"
bind:value={description}
placeholder={$i18n.t('Describe your knowledge base and objectives')}

2
src/lib/components/workspace/Knowledge/ItemMenu.svelte
View File

@@ -49,7 +49,7 @@
<div slot="content">
<DropdownMenu.Content
class="w-full max-w-[160px] 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-[160px] 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}
side="bottom"
align="end"

22
src/lib/components/workspace/Knowledge/KnowledgeBase.svelte
View File

@@ -556,7 +556,7 @@
role="region"
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="max-w-md">
<AddFilesPlaceholder>
@@ -629,7 +629,7 @@
<div class="w-full">
<input
type="text"
class="text-left w-full font-semibold text-2xl font-primary bg-transparent outline-none"
class="text-left w-full font-semibold text-2xl font-primary bg-transparent outline-hidden"
bind:value={knowledge.name}
placeholder="Knowledge Name"
on:input={() => {
@@ -638,7 +638,7 @@
/>
</div>
<div class="self-center flex-shrink-0">
<div class="self-center shrink-0">
<button
class="bg-gray-50 hover:bg-gray-100 text-black dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-white transition px-2 py-1 rounded-full flex gap-1 items-center"
type="button"
@@ -648,7 +648,7 @@
>
<LockClosed strokeWidth="2.5" className="size-3.5" />
<div class="text-sm font-medium flex-shrink-0">
<div class="text-sm font-medium shrink-0">
{$i18n.t('Access')}
</div>
</button>
@@ -658,7 +658,7 @@
<div class="flex w-full px-1">
<input
type="text"
class="text-left text-xs w-full text-gray-500 bg-transparent outline-none"
class="text-left text-xs w-full text-gray-500 bg-transparent outline-hidden"
bind:value={knowledge.description}
placeholder="Knowledge Description"
on:input={() => {
@@ -675,7 +675,7 @@
<div class="flex-1 flex justify-start w-full h-full max-h-full">
{#if selectedFile}
<div class=" flex flex-col w-full h-full max-h-full">
<div class="flex-shrink-0 mb-2 flex items-center">
<div class="shrink-0 mb-2 flex items-center">
{#if !showSidepanel}
<div class="-translate-x-2">
<button
@@ -691,7 +691,7 @@
<div class=" flex-1 text-xl font-medium">
<a
class="hover:text-gray-500 hover:dark:text-gray-100 hover:underline flex-grow line-clamp-1"
class="hover:text-gray-500 dark:hover:text-gray-100 hover:underline grow line-clamp-1"
href={selectedFile.id ? `/api/v1/files/${selectedFile.id}/content` : '#'}
target="_blank"
>
@@ -712,7 +712,7 @@
</div>
<div
class=" flex-1 w-full h-full max-h-full text-sm bg-transparent outline-none overflow-y-auto scrollbar-hidden"
class=" flex-1 w-full h-full max-h-full text-sm bg-transparent outline-hidden overflow-y-auto scrollbar-hidden"
>
{#key selectedFile.id}
<RichTextInput
@@ -742,7 +742,7 @@
>
<div class="flex flex-col justify-start h-full max-h-full p-2">
<div class=" flex flex-col w-full h-full max-h-full">
<div class="flex-shrink-0 mt-1 mb-2 flex items-center">
<div class="shrink-0 mt-1 mb-2 flex items-center">
<div class="mr-2">
<button
class="w-full text-left text-sm p-1.5 rounded-lg dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-gray-850"
@@ -787,7 +787,7 @@
{/if}
<div
class="{largeScreen ? 'flex-shrink-0 w-72 max-w-72' : 'flex-1'}
class="{largeScreen ? 'shrink-0 w-72 max-w-72' : 'flex-1'}
flex
py-2
rounded-2xl
@@ -815,7 +815,7 @@
</svg>
</div>
<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}
placeholder={$i18n.t('Search Collection')}
on:focus={() => {

2
src/lib/components/workspace/Knowledge/KnowledgeBase/AddContentMenu.svelte
View File

@@ -50,7 +50,7 @@
<div slot="content">
<DropdownMenu.Content
class="w-full max-w-44 rounded-xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow"
class="w-full max-w-44 rounded-xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm"
sideOffset={4}
side="bottom"
align="end"

8
src/lib/components/workspace/Knowledge/KnowledgeBase/AddTextContentModal.svelte
View File

@@ -54,10 +54,10 @@
>
<div class=" flex-1 w-full h-full flex justify-center overflow-auto px-5 py-4">
<div class=" max-w-3xl py-2 md:py-10 w-full flex flex-col gap-2">
<div class="flex-shrink-0 w-full flex justify-between items-center">
<div class="shrink-0 w-full flex justify-between items-center">
<div class="w-full">
<input
class="w-full text-3xl font-semibold bg-transparent outline-none"
class="w-full text-3xl font-semibold bg-transparent outline-hidden"
type="text"
bind:value={name}
placeholder={$i18n.t('Title')}
@@ -77,7 +77,7 @@
</div>
<div
class="flex flex-row items-center justify-end text-sm font-medium flex-shrink-0 mt-1 p-4 gap-1.5"
class="flex flex-row items-center justify-end text-sm font-medium shrink-0 mt-1 p-4 gap-1.5"
>
<div class="">
{#if voiceInput}
@@ -131,7 +131,7 @@
{/if}
</div>
<div class=" flex-shrink-0">
<div class=" shrink-0">
<Tooltip content={$i18n.t('Save')}>
<button
class=" px-3.5 py-2 bg-black text-white dark:bg-white dark:text-black transition rounded-full"

6
src/lib/components/workspace/Models.svelte
View File

@@ -187,12 +187,12 @@
window.addEventListener('keydown', onKeyDown);
window.addEventListener('keyup', onKeyUp);
window.addEventListener('blur', onBlur);
window.addEventListener('blur-sm', onBlur);
return () => {
window.removeEventListener('keydown', onKeyDown);
window.removeEventListener('keyup', onKeyUp);
window.removeEventListener('blur', onBlur);
window.removeEventListener('blur-sm', onBlur);
};
});
</script>
@@ -228,7 +228,7 @@
<Search className="size-3.5" />
</div>
<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}
placeholder={$i18n.t('Search Models')}
/>

8
src/lib/components/workspace/Models/Knowledge/Selector.svelte
View File

@@ -107,7 +107,7 @@
</svg>
</div>
<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}
placeholder={$i18n.t('Search Knowledge')}
/>
@@ -134,19 +134,19 @@
<div class=" w-fit mb-0.5">
{#if item.legacy}
<div
class="bg-gray-500/20 text-gray-700 dark:text-gray-200 rounded uppercase text-xs font-bold px-1"
class="bg-gray-500/20 text-gray-700 dark:text-gray-200 rounded-sm uppercase text-xs font-bold px-1"
>
Legacy
</div>
{:else if item?.meta?.document}
<div
class="bg-gray-500/20 text-gray-700 dark:text-gray-200 rounded uppercase text-xs font-bold px-1"
class="bg-gray-500/20 text-gray-700 dark:text-gray-200 rounded-sm uppercase text-xs font-bold px-1"
>
Document
</div>
{:else}
<div
class="bg-green-500/20 text-green-700 dark:text-green-200 rounded uppercase text-xs font-bold px-1"
class="bg-green-500/20 text-green-700 dark:text-green-200 rounded-sm uppercase text-xs font-bold px-1"
>
Collection
</div>

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

@@ -364,10 +364,10 @@
submitHandler();
}}
>
<div class="self-center md:self-start flex justify-center my-2 flex-shrink-0">
<div class="self-center md:self-start flex justify-center my-2 shrink-0">
<div class="self-center">
<button
class="rounded-xl flex flex-shrink-0 items-center {info.meta.profile_image_url !==
class="rounded-xl flex shrink-0 items-center {info.meta.profile_image_url !==
'/static/favicon.png'
? 'bg-transparent'
: 'bg-white'} shadow-xl group relative"
@@ -435,7 +435,7 @@
<div class="flex-1">
<div>
<input
class="text-3xl font-semibold w-full bg-transparent outline-none"
class="text-3xl font-semibold w-full bg-transparent outline-hidden"
placeholder={$i18n.t('Model Name')}
bind:value={name}
required
@@ -446,7 +446,7 @@
<div class="flex-1">
<div>
<input
class="text-xs w-full bg-transparent text-gray-500 outline-none"
class="text-xs w-full bg-transparent text-gray-500 outline-hidden"
placeholder={$i18n.t('Model ID')}
bind:value={id}
disabled={edit}
@@ -462,7 +462,7 @@
<div>
<select
class="text-sm w-full bg-transparent outline-none"
class="text-sm w-full bg-transparent outline-hidden"
placeholder="Select a base model (e.g. llama3, gpt-4o)"
bind:value={info.base_model_id}
on:change={(e) => {
@@ -486,7 +486,7 @@
<div class=" self-center text-sm font-semibold">{$i18n.t('Description')}</div>
<button
class="p-1 text-xs flex rounded transition"
class="p-1 text-xs flex rounded-sm transition"
type="button"
on:click={() => {
enableDescription = !enableDescription;
@@ -502,7 +502,7 @@
{#if enableDescription}
<Textarea
className=" text-sm w-full bg-transparent outline-none resize-none overflow-y-hidden "
className=" text-sm w-full bg-transparent outline-hidden resize-none overflow-y-hidden "
placeholder={$i18n.t('Add a short description about what this model does')}
bind:value={info.meta.description}
/>
@@ -547,7 +547,7 @@
<div class=" text-xs font-semibold mb-2">{$i18n.t('System Prompt')}</div>
<div>
<Textarea
className=" text-sm w-full bg-transparent outline-none resize-none overflow-y-hidden "
className=" text-sm w-full bg-transparent outline-hidden resize-none overflow-y-hidden "
placeholder={`Write your model system prompt content here\ne.g.) You are Mario from Super Mario Bros, acting as an assistant.`}
rows={4}
bind:value={info.params.system}
@@ -561,7 +561,7 @@
</div>
<button
class="p-1 px-3 text-xs flex rounded transition"
class="p-1 px-3 text-xs flex rounded-sm transition"
type="button"
on:click={() => {
showAdvanced = !showAdvanced;
@@ -599,7 +599,7 @@
</div>
<button
class="p-1 text-xs flex rounded transition"
class="p-1 text-xs flex rounded-sm transition"
type="button"
on:click={() => {
if ((info?.meta?.suggestion_prompts ?? null) === null) {
@@ -619,7 +619,7 @@
{#if (info?.meta?.suggestion_prompts ?? null) !== null}
<button
class="p-1 px-2 text-xs flex rounded transition"
class="p-1 px-2 text-xs flex rounded-sm transition"
type="button"
on:click={() => {
if (
@@ -653,7 +653,7 @@
{#each info.meta.suggestion_prompts as prompt, promptIdx}
<div class=" flex rounded-lg">
<input
class=" text-sm w-full bg-transparent outline-none border-r border-gray-50 dark:border-gray-850"
class=" text-sm w-full bg-transparent outline-hidden border-r border-gray-50 dark:border-gray-850"
placeholder={$i18n.t('Write a prompt suggestion (e.g. Who are you?)')}
bind:value={prompt.content}
/>
@@ -719,7 +719,7 @@
<div class=" self-center text-sm font-semibold">{$i18n.t('JSON Preview')}</div>
<button
class="p-1 px-3 text-xs flex rounded transition"
class="p-1 px-3 text-xs flex rounded-sm transition"
type="button"
on:click={() => {
showPreview = !showPreview;
@@ -736,7 +736,7 @@
{#if showPreview}
<div>
<textarea
class="text-sm w-full bg-transparent outline-none resize-none"
class="text-sm w-full bg-transparent outline-hidden resize-none"
rows="10"
value={JSON.stringify(info, null, 2)}
disabled

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

@@ -46,7 +46,7 @@
<div slot="content">
<DropdownMenu.Content
class="w-full max-w-[160px] 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-[160px] 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}
side="bottom"
align="start"

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

@@ -122,7 +122,7 @@
<Search className="size-3.5" />
</div>
<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}
placeholder={$i18n.t('Search Prompts')}
/>

10
src/lib/components/workspace/Prompts/PromptEditor.svelte
View File

@@ -94,13 +94,13 @@
<div class="flex flex-col w-full">
<div class="flex items-center">
<input
class="text-2xl font-semibold w-full bg-transparent outline-none"
class="text-2xl font-semibold w-full bg-transparent outline-hidden"
placeholder={$i18n.t('Title')}
bind:value={title}
required
/>
<div class="self-center flex-shrink-0">
<div class="self-center shrink-0">
<button
class="bg-gray-50 hover:bg-gray-100 text-black dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-white transition px-2 py-1 rounded-full flex gap-1 items-center"
type="button"
@@ -110,7 +110,7 @@
>
<LockClosed strokeWidth="2.5" className="size-3.5" />
<div class="text-sm font-medium flex-shrink-0">
<div class="text-sm font-medium shrink-0">
{$i18n.t('Access')}
</div>
</button>
@@ -120,7 +120,7 @@
<div class="flex gap-0.5 items-center text-xs text-gray-500">
<div class="">/</div>
<input
class=" w-full bg-transparent outline-none"
class=" w-full bg-transparent outline-hidden"
placeholder={$i18n.t('Command')}
bind:value={command}
required
@@ -139,7 +139,7 @@
<div class="mt-2">
<div>
<Textarea
className="text-sm w-full bg-transparent outline-none overflow-y-hidden resize-none"
className="text-sm w-full bg-transparent outline-hidden overflow-y-hidden resize-none"
placeholder={$i18n.t('Write a summary in 50 words that summarizes [topic or keyword].')}
bind:value={content}
rows={6}

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

@@ -38,7 +38,7 @@
<div slot="content">
<DropdownMenu.Content
class="w-full max-w-[160px] 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-[160px] 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}
side="bottom"
align="start"

12
src/lib/components/workspace/Tools.svelte
View File

@@ -156,12 +156,12 @@
window.addEventListener('keydown', onKeyDown);
window.addEventListener('keyup', onKeyUp);
window.addEventListener('blur', onBlur);
window.addEventListener('blur-sm', onBlur);
return () => {
window.removeEventListener('keydown', onKeyDown);
window.removeEventListener('keyup', onKeyUp);
window.removeEventListener('blur', onBlur);
window.removeEventListener('blur-sm', onBlur);
};
});
</script>
@@ -190,7 +190,7 @@
<Search className="size-3.5" />
</div>
<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}
placeholder={$i18n.t('Search Tools')}
/>
@@ -221,14 +221,14 @@
<Tooltip content={tool?.meta?.description ?? ''} placement="top-start">
<div class=" font-semibold flex items-center gap-1.5">
<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"
>
TOOL
</div>
{#if tool?.meta?.manifest?.version}
<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{tool?.meta?.manifest?.version ?? ''}
</div>
@@ -237,7 +237,7 @@
<div class="line-clamp-1">
{tool.name}
<span class=" text-gray-500 text-xs font-medium flex-shrink-0">{tool.id}</span>
<span class=" text-gray-500 text-xs font-medium shrink-0">{tool.id}</span>
</div>
</div>
</Tooltip>

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

@@ -39,7 +39,7 @@
<div slot="content">
<DropdownMenu.Content
class="w-full max-w-[160px] 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-[160px] 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}
side="bottom"
align="start"

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

@@ -201,7 +201,7 @@ class Tools:
<div class="flex flex-col flex-1 overflow-auto h-0">
<div class="w-full mb-2 flex flex-col gap-0.5">
<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')}>
<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"
@@ -218,7 +218,7 @@ class Tools:
<div class="flex-1">
<Tooltip content={$i18n.t('e.g. My Tools')} placement="top-start">
<input
class="w-full text-2xl font-semibold bg-transparent outline-none"
class="w-full text-2xl font-semibold bg-transparent outline-hidden"
type="text"
placeholder={$i18n.t('Tool Name')}
bind:value={name}
@@ -227,7 +227,7 @@ class Tools:
</Tooltip>
</div>
<div class="self-center flex-shrink-0">
<div class="self-center shrink-0">
<button
class="bg-gray-50 hover:bg-gray-100 text-black dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-white transition px-2 py-1 rounded-full flex gap-1 items-center"
type="button"
@@ -237,7 +237,7 @@ class Tools:
>
<LockClosed strokeWidth="2.5" className="size-3.5" />
<div class="text-sm font-medium flex-shrink-0">
<div class="text-sm font-medium shrink-0">
{$i18n.t('Access')}
</div>
</button>
@@ -246,13 +246,13 @@ class Tools:
<div class=" flex gap-2 px-1 items-center">
{#if edit}
<div class="text-sm text-gray-500 flex-shrink-0">
<div class="text-sm text-gray-500 shrink-0">
{id}
</div>
{:else}
<Tooltip className="w-full" content={$i18n.t('e.g. my_tools')} placement="top-start">
<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"
placeholder={$i18n.t('Tool ID')}
bind:value={id}
@@ -268,7 +268,7 @@ class Tools:
placement="top-start"
>
<input
class="w-full text-sm bg-transparent outline-none"
class="w-full text-sm bg-transparent outline-hidden"
type="text"
placeholder={$i18n.t('Tool Description')}
bind:value={meta.description}

4
src/lib/components/workspace/common/AccessControl.svelte
View File

@@ -96,7 +96,7 @@
<div>
<select
id="models"
class="outline-none bg-transparent text-sm font-medium rounded-lg block w-fit pr-10 max-w-full placeholder-gray-400"
class="outline-hidden bg-transparent text-sm font-medium rounded-lg block w-fit pr-10 max-w-full placeholder-gray-400"
value={accessControl !== null ? 'private' : 'public'}
on:change={(e) => {
if (e.target.value === 'public') {
@@ -144,7 +144,7 @@
<div class="flex flex-1 items-center">
<div class="w-full px-0.5">
<select
class="outline-none bg-transparent text-sm rounded-lg block w-full pr-10 max-w-full
class="outline-hidden bg-transparent text-sm rounded-lg block w-full pr-10 max-w-full
{selectedGroupId ? '' : 'text-gray-500'}
dark:placeholder-gray-500"
bind:value={selectedGroupId}