ewilliams28/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-08-13 01:02:25 -06:00
Code Issues Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-07-15 04:12:11 -04:00
parent 05e3f71317
commit f8350360df
13 changed files with 492 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/admin/Analytics.svelte
+1 -1
View File
@@ -18,7 +18,7 @@
</script>
{#if loaded}
<div class="w-full h-full pb-2 px-[16px]">
<div class="w-full h-full pb-2 px-3">
<Dashboard />
</div>
{/if}
src/lib/components/admin/Users.svelte
+37 -36
View File
@@ -1,6 +1,5 @@
<script>
import { getContext, tick, onMount } from 'svelte';
import { toast } from 'svelte-sonner';
import { getContext, onMount } from 'svelte';
import { goto } from '$app/navigation';
import { user } from '$lib/stores';
@@ -55,41 +54,43 @@
});
</script>
<div class="flex flex-col w-full h-full pb-2">
<div
id="users-tabs-container"
class="mx-2 sm:mx-[16px] flex flex-row overflow-x-auto gap-2.5 max-w-full dark:text-gray-200 text-sm font-normal text-left scrollbar-none"
>
<a
id="overview"
href="/admin/users/overview"
draggable="false"
class="px-0.5 py-1 min-w-fit rounded-lg lg:flex-none flex text-right transition select-none {selectedTab ===
'overview'
? ''
: ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
{#if loaded}
<div class="flex flex-col lg:flex-row w-full h-full pb-2 lg:space-x-4">
<div
id="users-tabs-container"
class="tabs mx-2 sm:mx-[16px] lg:mx-0 lg:px-[16px] flex flex-row overflow-x-auto gap-2.5 max-w-full lg:gap-1 lg:flex-col lg:flex-none lg:w-50 dark:text-gray-200 text-sm font-normal text-left scrollbar-none"
>
<div class=" self-center">{$i18n.t('Overview')}</div>
</a>
<a
id="overview"
href="/admin/users/overview"
draggable="false"
class="px-0.5 py-1 min-w-fit rounded-lg lg:flex-none flex text-right transition select-none {selectedTab ===
'overview'
? ''
: ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
>
<div class=" self-center">{$i18n.t('Overview')}</div>
</a>
<a
id="groups"
href="/admin/users/groups"
draggable="false"
class="px-0.5 py-1 min-w-fit rounded-lg lg:flex-none flex text-right transition select-none {selectedTab ===
'groups'
? ''
: ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
>
<div class=" self-center">{$i18n.t('Groups')}</div>
</a>
</div>
<a
id="groups"
href="/admin/users/groups"
draggable="false"
class="px-0.5 py-1 min-w-fit rounded-lg lg:flex-none flex text-right transition select-none {selectedTab ===
'groups'
? ''
: ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
>
<div class=" self-center">{$i18n.t('Groups')}</div>
</a>
</div>
<div class="flex-1 mt-1 px-[16px] overflow-y-scroll">
{#if selectedTab === 'overview'}
<UserList />
{:else if selectedTab === 'groups'}
<Groups />
{/if}
<div class="flex-1 mt-1 lg:mt-0 px-[16px] lg:pr-[16px] lg:pl-0 overflow-y-scroll">
{#if selectedTab === 'overview'}
<UserList />
{:else if selectedTab === 'groups'}
<Groups />
{/if}
</div>
</div>
</div>
{/if}
src/lib/components/admin/Users/Groups.svelte
+6 -4
View File
@@ -106,7 +106,7 @@
onSubmit={addGroupHandler}
/>
<div class="flex flex-col gap-1 px-1 mt-1.5 mb-3">
<div class="flex flex-col gap-1 mt-0.5 mb-3">
<div class="flex justify-between items-center">
<div class="flex items-center md:self-center text-xl font-normal px-0.5 gap-2 shrink-0">
<div>
@@ -145,8 +145,10 @@
</div>
</div>
<div class="space-y-1">
<div class="flex h-8 flex-1 items-center w-full gap-2">
<div
class="py-2 bg-white dark:bg-gray-900 rounded-3xl border border-gray-100/30 dark:border-gray-850/30"
>
<div class="px-2.5 flex h-8 flex-1 items-center w-full gap-2">
<div class="flex min-w-0 flex-1">
<div class="self-center ml-1 mr-3">
<Search className="size-3.5" />
@@ -199,7 +201,7 @@
</div>
{#if filteredGroups.length !== 0}
<div class="my-1 grid grid-cols-1 gap-y-0.5">
<div class="mt-1 grid grid-cols-1 px-2">
{#each filteredGroups as group}
<GroupItem {group} {setGroups} {defaultPermissions} />
{/each}
src/lib/components/admin/Users/Groups/GroupItem.svelte
+1 -1
View File
@@ -67,7 +67,7 @@
/>
<button
class="group flex cursor-pointer text-left w-full px-2.5 py-2 rounded-2xl border-b border-gray-100/60 last:border-b-0 hover:bg-gray-50/70 dark:border-gray-850/60 dark:hover:bg-gray-850/50 transition"
class="group flex cursor-pointer text-left w-full px-2.5 py-2 rounded-xl border-b border-gray-100/60 last:border-b-0 hover:bg-gray-50/70 dark:border-gray-850/60 dark:hover:bg-gray-850/50 transition"
on:click={() => {
showEdit = true;
}}
src/lib/components/admin/Users/UserList.svelte
+8 -11
View File
@@ -1,8 +1,7 @@
<script lang="ts">
import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
import { WEBUI_NAME, config, user, showSidebar } from '$lib/stores';
import { goto } from '$app/navigation';
import { onMount, getContext, onDestroy } from 'svelte';
import { WEBUI_API_BASE_URL } from '$lib/constants';
import { config, user } from '$lib/stores';
import { getContext, onDestroy } from 'svelte';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
@@ -12,7 +11,7 @@
import { toast } from 'svelte-sonner';
import { updateUserRole, getUsers, deleteUserById } from '$lib/apis/users';
import { getUsers, deleteUserById } from '$lib/apis/users';
import Pagination from '$lib/components/common/Pagination.svelte';
import ChatBubbles from '$lib/components/icons/ChatBubbles.svelte';
@@ -23,13 +22,11 @@
import AddUserModal from '$lib/components/admin/Users/UserList/AddUserModal.svelte';
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import RoleUpdateConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import Badge from '$lib/components/common/Badge.svelte';
import Plus from '$lib/components/icons/Plus.svelte';
import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
import About from '$lib/components/chat/Settings/About.svelte';
import Banner from '$lib/components/common/Banner.svelte';
import Markdown from '$lib/components/chat/Messages/Markdown.svelte';
import Spinner from '$lib/components/common/Spinner.svelte';
@@ -169,7 +166,7 @@
<div
class="pt-0.5 pb-1 gap-1 flex flex-col md:flex-row justify-between sticky top-0 z-10 bg-white dark:bg-gray-900"
>
<div class="flex md:self-center text-lg font-normal px-0.5 gap-2">
<div class="flex items-center md:self-center text-xl font-normal px-0.5 gap-2 shrink-0">
<div class="flex-shrink-0">
{$i18n.t('Users')}
</div>
@@ -194,7 +191,7 @@
</div>
<div class="flex gap-1">
<div class=" flex w-full space-x-2">
<div class="flex w-full space-x-2">
<div class="flex flex-1">
<div class=" self-center ml-1 mr-3">
<svg
@@ -356,11 +353,11 @@
</div>
</th>
<th scope="col" class="px-2.5 py-2 text-right" />
<th scope="col" class="px-2.5 py-2 text-right"></th>
</tr>
</thead>
<tbody class="">
{#each users as user, userIdx (user.id)}
{#each users as user (user.id)}
<tr class="bg-white dark:bg-gray-900 dark:border-gray-850 text-xs">
<td class="px-3 py-1 min-w-[7rem] w-28">
<button
src/lib/components/common/SplitCreateButton.svelte
+102
View File
@@ -0,0 +1,102 @@
<script lang="ts">
import { getContext } from 'svelte';
import { goto } from '$app/navigation';
import type { Writable } from 'svelte/store';
import type { i18n as i18nType } from 'i18next';
import Dropdown from '$lib/components/common/Dropdown.svelte';
import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
import DocumentArrowDown from '$lib/components/icons/DocumentArrowDown.svelte';
import DocumentArrowUp from '$lib/components/icons/DocumentArrowUp.svelte';
import Link from '$lib/components/icons/Link.svelte';
import Pencil from '$lib/components/icons/Pencil.svelte';
type SplitCreateAction = {
id: string;
label: string;
href?: string;
onClick?: () => void | Promise<void>;
visible?: boolean;
};
export let actions: SplitCreateAction[] = [];
export let label = 'Create';
const i18n = getContext<Writable<i18nType>>('i18n');
let showMenu = false;
$: visibleActions = actions.filter((action) => action.visible ?? true);
$: primaryAction =
visibleActions.find((action) => action.id.endsWith('-new')) ?? visibleActions[0] ?? null;
const runAction = async (action: SplitCreateAction | null) => {
if (!action) return;
if (action.href) {
await goto(action.href);
} else {
await action.onClick?.();
}
};
const getActionIcon = (id: string) => {
if (id.endsWith('-new')) return Pencil;
if (id.includes('-import-link')) return Link;
if (id.includes('-import')) return DocumentArrowUp;
if (id.includes('-export')) return DocumentArrowDown;
return Pencil;
};
</script>
{#if visibleActions.length}
<div
class="ml-1 flex overflow-hidden rounded-lg bg-gray-50 text-xs text-gray-900 transition ring-1 ring-gray-200 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800"
>
<button
class="px-2.5 py-1 transition hover:bg-gray-100 dark:hover:bg-gray-800"
on:click={() => {
runAction(primaryAction);
}}
>
{$i18n.t(label)}
</button>
<Dropdown bind:show={showMenu} align="end" sideOffset={6}>
<button
class="flex items-center border-l border-gray-200 px-1.5 py-1 transition hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-gray-800"
aria-label={$i18n.t('Open create menu')}
>
<ChevronDown className="size-2.5" strokeWidth="2.5" />
</button>
<div slot="content">
<DropdownMenu className="min-w-[170px]">
{#each visibleActions as action (action.id)}
{@const Icon = getActionIcon(action.id)}
{#if action.href}
<a
href={action.href}
on:click={() => {
showMenu = false;
}}
>
<Icon className="size-3.5" />
<span class="self-center truncate">{action.label}</span>
</a>
{:else}
<button
on:click={async () => {
await action.onClick?.();
showMenu = false;
}}
>
<Icon className="size-3.5" />
<span class="self-center truncate">{action.label}</span>
</button>
{/if}
{/each}
</DropdownMenu>
</div>
</Dropdown>
</div>
{/if}
src/lib/components/notes/Notes.svelte
+129 -51
View File
@@ -34,6 +34,7 @@
import {
createNewNote,
deleteNoteById,
getNotes,
getNoteById,
getNoteList,
searchNotes,
@@ -46,7 +47,6 @@
import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte';
import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import Search from '../icons/Search.svelte';
import Plus from '../icons/Plus.svelte';
import Spinner from '../common/Spinner.svelte';
import Tooltip from '../common/Tooltip.svelte';
import NoteMenu from './Notes/NoteMenu.svelte';
@@ -55,10 +55,13 @@
import DropdownOptions from '../common/DropdownOptions.svelte';
import Loader from '../common/Loader.svelte';
import SidebarIcon from '../icons/Sidebar.svelte';
import SplitCreateButton from '../common/SplitCreateButton.svelte';
let loaded = false;
let importFiles = '';
let importDocumentFiles: FileList | null = null;
let notesImportInputElement: HTMLInputElement;
let selectedNote = null;
let showDeleteConfirm = false;
@@ -80,6 +83,15 @@
let itemsLoading = false;
let allItemsLoaded = false;
type NoteExportItem = {
title?: string;
data?: {
content?: {
md?: string;
};
};
};
const downloadHandler = async (type) => {
// Fetch the full note since the list response may not contain full content
const note = await getNoteById(localStorage.token, selectedNote.id).catch((error) => {
@@ -116,49 +128,76 @@
}
};
const inputFilesHandler = async (inputFiles) => {
// Check if all the file is a markdown file and extract name and content
const inputFilesHandler = async (inputFiles: File[]) => {
let imported = false;
for (const file of inputFiles) {
if (file.type !== 'text/markdown') {
toast.error($i18n.t('Only markdown files are allowed'));
const isSupportedFile =
file.type === 'text/markdown' ||
file.type === 'text/plain' ||
/\.(md|txt)$/i.test(file.name);
if (!isSupportedFile) {
toast.error($i18n.t('Only TXT and Markdown files are allowed'));
return;
}
const reader = new FileReader();
reader.onload = async (event) => {
const content = event.target.result;
let name = file.name.replace(/\.md$/, '');
const content = await file.text();
const name = file.name.replace(/\.(md|txt)$/i, '');
if (typeof content !== 'string') {
toast.error($i18n.t('Invalid file content'));
return;
}
const res = await createNewNote(localStorage.token, {
title: name,
data: {
content: {
json: null,
html: marked.parse(content ?? ''),
md: content
}
},
meta: null,
access_grants: []
}).catch((error) => {
toast.error(`${error}`);
return null;
});
// Create a new note with the content
const res = await createNewNote(localStorage.token, {
title: name,
data: {
content: {
json: null,
html: marked.parse(content ?? ''),
md: content
}
},
meta: null,
access_grants: []
}).catch((error) => {
toast.error(`${error}`);
return null;
});
if (res) {
init();
}
};
reader.readAsText(file);
if (res) {
imported = true;
}
}
if (imported) {
init();
}
};
const getNoteExportContent = (notes: NoteExportItem[], type: 'md' | 'txt') => {
return notes
.map((note) => {
const title = note.title ?? $i18n.t('Untitled');
const content = note.data?.content?.md ?? '';
if (type === 'md') {
return `# ${title}\n\n${content}`;
}
return `${title}\n\n${content}`;
})
.join(type === 'md' ? '\n\n---\n\n' : '\n\n-----\n\n');
};
const exportNotes = async (type: 'md' | 'txt') => {
const allNotes = await getNotes(localStorage.token, true).catch((error) => {
toast.error(`${error}`);
return null;
});
if (!allNotes) return;
const blob = new Blob([getNoteExportContent(allNotes, type)], {
type: type === 'md' ? 'text/markdown' : 'text/plain'
});
saveAs(blob, `notes-export-${Date.now()}.${type}`);
};
const reset = () => {
@@ -326,6 +365,29 @@
<div id="notes-container" class="w-full min-h-full h-full">
{#if loaded}
<input
id="notes-import-input"
bind:this={notesImportInputElement}
bind:files={importDocumentFiles}
type="file"
accept=".txt,.md,text/plain,text/markdown"
multiple
hidden
on:change={async () => {
if (!importDocumentFiles || importDocumentFiles.length === 0) return;
try {
await inputFilesHandler(Array.from(importDocumentFiles));
toast.success($i18n.t('Imported notes successfully'));
} catch (error) {
toast.error(`${error}`);
} finally {
importDocumentFiles = null;
notesImportInputElement.value = '';
}
}}
/>
<DeleteConfirmDialog
bind:show={showDeleteConfirm}
title={$i18n.t('Delete note?')}
@@ -370,20 +432,36 @@
</div>
<div class="ml-auto flex items-center gap-1">
<button
class="ml-1 px-2 py-1.5 text-xs gap-1 rounded-xl bg-black text-white dark:bg-white dark:text-black transition flex items-center"
on:click={async () => {
const res = await createNoteHandler(dayjs().format('YYYY-MM-DD'));
<SplitCreateButton
actions={[
{
id: 'notes-new',
label: $i18n.t('Create'),
onClick: async () => {
const res = await createNoteHandler(dayjs().format('YYYY-MM-DD'));
if (res) {
goto(`/notes/${res.id}`);
if (res) {
goto(`/notes/${res.id}`);
}
}
},
{
id: 'notes-import',
label: $i18n.t('Import TXT/MD'),
onClick: () => notesImportInputElement?.click()
},
{
id: 'notes-export-md',
label: $i18n.t('Export MD'),
onClick: () => exportNotes('md')
},
{
id: 'notes-export-txt',
label: $i18n.t('Export TXT'),
onClick: () => exportNotes('txt')
}
}}
>
<Plus className="size-3" strokeWidth="2.5" />
<div class="hidden md:block md:ml-1 text-xs">{$i18n.t('New Note')}</div>
</button>
]}
/>
</div>
</div>
</div>
@@ -699,14 +777,14 @@
</div>
</div>
{:else}
<div class="w-full h-full flex flex-col items-center justify-center">
<div class="py-20 text-center">
<div class="flex min-h-[calc(100dvh-13rem)] w-full flex-col items-center justify-center">
<div class="text-center">
<div class=" text-sm text-gray-400 dark:text-gray-600">
{$i18n.t('No Notes')}
</div>
<div class="mt-1 text-xs text-gray-300 dark:text-gray-700">
{$i18n.t('Create your first note by clicking on the plus button below.')}
{$i18n.t('Create your first note from the Create menu.')}
</div>
</div>
</div>
src/lib/components/workspace/Knowledge.svelte
+15 -1
View File
@@ -22,7 +22,9 @@
import DeleteConfirmDialog from '../common/ConfirmDialog.svelte';
import ItemMenu from './Knowledge/ItemMenu.svelte';
import CreateKnowledgeBase from './Knowledge/CreateKnowledgeBase.svelte';
import Badge from '../common/Badge.svelte';
import Modal from '../common/Modal.svelte';
import Search from '../icons/Search.svelte';
import Spinner from '../common/Spinner.svelte';
import Tooltip from '../common/Tooltip.svelte';
@@ -46,6 +48,7 @@
let loaded = false;
let showDeleteConfirm = false;
let showCreateModal = false;
let tagsContainerElement: HTMLDivElement;
let selectedItem: KnowledgeListItem | null = null;
@@ -67,7 +70,9 @@
{
id: 'knowledge-new',
label: $i18n.t('Create'),
href: '/workspace/knowledge/create'
onClick: () => {
showCreateModal = true;
}
}
]);
}
@@ -197,6 +202,15 @@
}}
/>
<Modal bind:show={showCreateModal} size="sm">
<CreateKnowledgeBase
modal={true}
onBack={() => {
showCreateModal = false;
}}
/>
</Modal>
<div class="space-y-1">
<div class="flex h-8 w-full items-center gap-2">
<div class="flex min-w-0 flex-1">
src/lib/components/workspace/Knowledge/CreateKnowledgeBase.svelte
+68 -30
View File
@@ -10,11 +10,19 @@
import AccessControl from '../common/AccessControl.svelte';
import Spinner from '$lib/components/common/Spinner.svelte';
import XMark from '$lib/components/icons/XMark.svelte';
export let modal = false;
/** @type {() => void | Promise<void>} */
export let onBack = () => goto('/workspace/knowledge');
/** @type {(knowledge: { id: string }) => void | Promise<void>} */
export let onCreated = (knowledge) => goto(`/workspace/knowledge/${knowledge.id}`);
let loading = false;
let name = '';
let description = '';
/** @type {{ id?: string; principal_type: 'user' | 'group'; principal_id: string; permission: 'read' | 'write' }[]} */
let accessGrants = [];
const submitHandler = async () => {
@@ -36,7 +44,7 @@
if (res) {
toast.success($i18n.t('Knowledge created successfully.'));
goto(`/workspace/knowledge/${res.id}`);
await onCreated(res);
}
loading = false;
@@ -44,39 +52,57 @@
</script>
<div class="w-full max-h-full">
<button
class="flex space-x-1"
on:click={() => {
goto('/workspace/knowledge');
}}
>
<div class=" self-center">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
{#if modal}
<div class="flex justify-between items-center dark:text-gray-100 px-5 pt-4 pb-2">
<h3 class="text-base font-normal">{$i18n.t('Create a knowledge base')}</h3>
<button
class="self-center shrink-0 ml-2"
aria-label={$i18n.t('Close')}
type="button"
on:click={() => {
onBack();
}}
>
<path
fill-rule="evenodd"
d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
clip-rule="evenodd"
/>
</svg>
<XMark className="size-5" />
</button>
</div>
<div class=" self-center font-normal text-sm">{$i18n.t('Back')}</div>
</button>
{:else}
<button
class="flex space-x-1"
on:click={() => {
onBack();
}}
>
<div class=" self-center">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
fill-rule="evenodd"
d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class=" self-center font-normal text-sm">{$i18n.t('Back')}</div>
</button>
{/if}
<form
class="flex flex-col max-w-lg mx-auto mt-10 mb-10"
class="flex flex-col {modal ? 'px-5 pb-3' : 'max-w-lg mx-auto mt-10 mb-10'}"
on:submit|preventDefault={() => {
submitHandler();
}}
>
<div class=" w-full flex flex-col justify-center">
<div class=" text-2xl font-normal mb-2.5">
{$i18n.t('Create a knowledge base')}
</div>
{#if !modal}
<div class=" text-2xl font-normal mb-2.5">
{$i18n.t('Create a knowledge base')}
</div>
{/if}
<div class="w-full flex flex-col gap-2.5">
<div class="w-full">
@@ -103,7 +129,7 @@
bind:value={description}
placeholder={$i18n.t('Describe your knowledge base and objectives')}
required
/>
></textarea>
</div>
</div>
</div>
@@ -120,12 +146,24 @@
/>
</div>
<div class="flex justify-end mt-2">
<div class="flex justify-end {modal ? 'pt-3 gap-2' : 'mt-2'}">
{#if modal}
<button
class="px-3 py-1 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 transition"
type="button"
on:click={() => {
onBack();
}}
>
{$i18n.t('Cancel')}
</button>
{/if}
<div>
<button
class=" text-sm px-4 py-2 transition rounded-lg {loading
? ' cursor-not-allowed bg-gray-100 dark:bg-gray-800'
: ' bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800'} flex"
class="{modal
? `px-3.5 py-1.5 text-sm bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full ${loading ? 'cursor-not-allowed' : ''}`
: `text-sm px-4 py-2 transition rounded-lg ${loading ? 'cursor-not-allowed bg-gray-100 dark:bg-gray-800' : 'bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800'}`} flex"
type="submit"
disabled={loading}
>
src/routes/(app)/admin/+layout.svelte
+1 -1
View File
@@ -63,7 +63,7 @@
<div class="">
<div
class="flex gap-0.5 md:gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-normal rounded-full bg-transparent py-1 touch-auto pointer-events-auto"
class="flex gap-0.5 md:gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-normal rounded-full bg-transparent pt-1 touch-auto pointer-events-auto"
>
<a
draggable="false"
src/routes/(app)/automations/+page.svelte
+119 -15
View File
@@ -6,12 +6,15 @@
import { WEBUI_NAME, mobile, showSidebar, user, config } from '$lib/stores';
import {
createAutomation,
getAutomationItems,
toggleAutomationById,
runAutomationById,
deleteAutomationById,
type AutomationForm,
type AutomationResponse
} from '$lib/apis/automations';
import fileSaver from 'file-saver';
import AutomationModal from '$lib/components/AutomationModal.svelte';
import AutomationMenu from '$lib/components/automations/AutomationMenu.svelte';
@@ -19,7 +22,7 @@
import Spinner from '$lib/components/common/Spinner.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import Pagination from '$lib/components/common/Pagination.svelte';
import Plus from '$lib/components/icons/Plus.svelte';
import SplitCreateButton from '$lib/components/common/SplitCreateButton.svelte';
import Switch from '$lib/components/common/Switch.svelte';
import SidebarIcon from '$lib/components/icons/Sidebar.svelte';
import Search from '$lib/components/icons/Search.svelte';
@@ -33,6 +36,8 @@
import CheckCircle from '$lib/components/icons/CheckCircle.svelte';
import Minus from '$lib/components/icons/Minus.svelte';
const { saveAs } = fileSaver;
const i18n = getContext('i18n');
let loaded = false;
@@ -51,6 +56,8 @@
let searchDebounceTimer: ReturnType<typeof setTimeout>;
let page = 1;
let importFiles: FileList | null = null;
let automationsImportInputElement: HTMLInputElement;
const handleSearchInput = () => {
if (!loaded) return;
@@ -157,6 +164,69 @@
showCreateModal = true;
};
const getAllAutomations = async () => {
let currentPage = 1;
let allAutomations: AutomationResponse[] = [];
let totalAutomations = 0;
do {
const res = await getAutomationItems(localStorage.token, null, 'all', currentPage);
const pageItems = res?.items ?? [];
totalAutomations = res?.total ?? pageItems.length;
allAutomations = [...allAutomations, ...pageItems];
currentPage += 1;
if (pageItems.length === 0) break;
} while (allAutomations.length < totalAutomations);
return allAutomations;
};
const toAutomationForm = (automation: AutomationResponse): AutomationForm => ({
name: automation.name,
data: automation.data,
meta: automation.meta ?? undefined,
is_active: automation.is_active
});
const exportAutomations = async () => {
const allAutomations = await getAllAutomations().catch((err) => {
toast.error(`${err}`);
return null;
});
if (!allAutomations) return;
const blob = new Blob([JSON.stringify(allAutomations.map(toAutomationForm), null, 2)], {
type: 'application/json'
});
saveAs(blob, `automations-export-${Date.now()}.json`);
};
const importAutomations = async (file: File) => {
const text = await file.text();
const savedAutomations = JSON.parse(text);
const automationItems = Array.isArray(savedAutomations)
? savedAutomations
: (savedAutomations?.automations ?? []);
if (!Array.isArray(automationItems)) {
throw new Error($i18n.t('Invalid JSON format'));
}
for (const automation of automationItems) {
await createAutomation(localStorage.token, {
name: automation.name,
data: automation.data,
meta: automation.meta ?? undefined,
is_active: automation.is_active ?? true
});
}
page = 1;
await getAutomationList();
};
const formatRRule = (rrule: string): string => {
// Detect one-time schedule (ONCE)
if (rrule.includes('COUNT=1')) {
@@ -240,6 +310,28 @@
</div>
</DeleteConfirmDialog>
<input
id="automations-import-input"
bind:this={automationsImportInputElement}
bind:files={importFiles}
type="file"
accept=".json"
hidden
on:change={async () => {
if (!importFiles || importFiles.length === 0) return;
try {
await importAutomations(importFiles[0]);
toast.success($i18n.t('Imported automations successfully'));
} catch (error) {
toast.error(`${error}`);
} finally {
importFiles = null;
automationsImportInputElement.value = '';
}
}}
/>
<AutomationModal
bind:show={showCreateModal}
automation={null}
@@ -291,18 +383,28 @@
</div>
<div class="ml-auto flex items-center gap-1">
<button
class="ml-1 px-2 py-1.5 text-xs gap-1 rounded-xl bg-black text-white dark:bg-white dark:text-black transition flex items-center"
on:click={() => {
cloneFrom = null;
showCreateModal = true;
}}
>
<Plus className="size-3" strokeWidth="2.5" />
<div class="hidden md:block md:ml-1 text-xs">
{$i18n.t('New Automation')}
</div>
</button>
<SplitCreateButton
actions={[
{
id: 'automations-new',
label: $i18n.t('Create'),
onClick: () => {
cloneFrom = null;
showCreateModal = true;
}
},
{
id: 'automations-import',
label: $i18n.t('Import JSON'),
onClick: () => automationsImportInputElement?.click()
},
{
id: 'automations-export',
label: $i18n.t('Export JSON'),
onClick: exportAutomations
}
]}
/>
</div>
</div>
</div>
@@ -417,11 +519,13 @@
</div>
{#if automations === null || loading}
<div class="w-full h-full flex justify-center items-center my-16 mb-24">
<div class="flex min-h-[calc(100dvh-13rem)] w-full items-center justify-center">
<Spinner className="size-5" />
</div>
{:else if (automations ?? []).length === 0}
<div class="w-full h-full flex flex-col justify-center items-center my-16 mb-24">
<div
class="flex min-h-[calc(100dvh-13rem)] w-full flex-col items-center justify-center"
>
<div class="max-w-md text-center">
<div class="text-3xl mb-3">⚡</div>
<div class="text-lg font-normal mb-1">
src/routes/(app)/calendar/+page.svelte
+2 -17
View File
@@ -15,7 +15,6 @@
import CalendarEventModal from '$lib/components/calendar/CalendarEventModal.svelte';
import CreateCalendarModal from '$lib/components/calendar/CreateCalendarModal.svelte';
import Spinner from '$lib/components/common/Spinner.svelte';
import Plus from '$lib/components/icons/Plus.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import SidebarIcon from '$lib/components/icons/Sidebar.svelte';
import Select from '$lib/components/common/Select.svelte';
@@ -331,24 +330,10 @@
</Select>
<button
class="ml-1 px-2 py-1.5 text-xs gap-1 rounded-xl bg-black text-white dark:bg-white dark:text-black transition text-sm flex items-center"
class="ml-1 rounded-lg bg-gray-50 px-2.5 py-1 text-xs text-gray-900 transition ring-1 ring-gray-200 hover:bg-gray-100 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800 dark:hover:bg-gray-800"
on:click={handleNewEvent}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2.5"
stroke="currentColor"
class="size-3"
><path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 4.5v15m7.5-7.5h-15"
/></svg
>
<span class="hidden sm:inline">{$i18n.t('New Event')}</span>
{$i18n.t('Create')}
</button>
</div>
</div>
src/routes/(app)/workspace/+layout.svelte
+3 -81
View File
@@ -19,23 +19,15 @@
import { getSkillItems } from '$lib/apis/skills';
import { getToolList } from '$lib/apis/tools';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import Dropdown from '$lib/components/common/Dropdown.svelte';
import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
import Sidebar from '$lib/components/icons/Sidebar.svelte';
import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
import DocumentArrowDown from '$lib/components/icons/DocumentArrowDown.svelte';
import DocumentArrowUp from '$lib/components/icons/DocumentArrowUp.svelte';
import Link from '$lib/components/icons/Link.svelte';
import Pencil from '$lib/components/icons/Pencil.svelte';
import SplitCreateButton from '$lib/components/common/SplitCreateButton.svelte';
const i18n = getContext<Writable<i18nType>>('i18n');
let loaded = false;
let lastPath = '';
let activeWorkspaceSection = '';
let showCreateMenu = false;
let visibleActions = [];
let primaryCreateAction = null;
$: if ($page.url.pathname !== lastPath) {
lastPath = $page.url.pathname;
@@ -48,28 +40,9 @@
$: activeWorkspaceSection = $page.url.pathname.split('/')[2] ?? '';
$: visibleActions = $workspaceActions.filter((action) => action.visible ?? true);
$: primaryCreateAction =
visibleActions.find((action) => action.id.endsWith('-new')) ?? visibleActions[0] ?? null;
const getCount = (res: any) => res?.total ?? (Array.isArray(res) ? res.length : null);
const runWorkspaceAction = async (action) => {
if (!action) return;
if (action.href) {
await goto(action.href);
} else {
await action.onClick?.();
}
};
const getActionIcon = (id: string) => {
if (id.endsWith('-new')) return Pencil;
if (id.endsWith('-import-link')) return Link;
if (id.endsWith('-import')) return DocumentArrowUp;
if (id.endsWith('-export')) return DocumentArrowDown;
return Pencil;
};
const loadWorkspaceCounts = async () => {
const canViewModels = $user?.role === 'admin' || $user?.permissions?.workspace?.models;
const canViewKnowledge = $user?.role === 'admin' || $user?.permissions?.workspace?.knowledge;
@@ -168,7 +141,7 @@
<div class="flex w-full items-center">
<div
class="flex min-w-0 items-center gap-0.5 md:gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-normal rounded-full bg-transparent py-1 touch-auto pointer-events-auto"
class="flex min-w-0 mr-1.5 items-center gap-0.5 md:gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-normal rounded-full bg-transparent py-1 touch-auto pointer-events-auto"
>
{#if $user?.role === 'admin' || $user?.permissions?.workspace?.models}
<a
@@ -257,58 +230,7 @@
</div>
<div class="ml-auto flex shrink-0 items-center gap-1">
{#if visibleActions.length}
<div
class="ml-1 flex overflow-hidden rounded-lg bg-gray-50 text-xs text-gray-900 transition ring-1 ring-gray-200 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800"
>
<button
class="px-2.5 py-1 transition hover:bg-gray-100 dark:hover:bg-gray-800"
on:click={() => {
runWorkspaceAction(primaryCreateAction);
}}
>
{$i18n.t('Create')}
</button>
<Dropdown bind:show={showCreateMenu} align="end" sideOffset={6}>
<button
class="flex items-center border-l border-gray-200 px-1.5 py-1 transition hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-gray-800"
aria-label={$i18n.t('Open create menu')}
>
<ChevronDown className="size-2.5" strokeWidth="2.5" />
</button>
<div slot="content">
<DropdownMenu className="min-w-[170px]">
{#each visibleActions as action (action.id)}
{@const Icon = getActionIcon(action.id)}
{#if action.href}
<a
href={action.href}
on:click={() => {
showCreateMenu = false;
}}
>
<Icon className="size-3.5" />
<span class="self-center truncate">{action.label}</span>
</a>
{:else}
<button
on:click={async () => {
await action.onClick?.();
showCreateMenu = false;
}}
>
<Icon className="size-3.5" />
<span class="self-center truncate">{action.label}</span>
</button>
{/if}
{/each}
</DropdownMenu>
</div>
</Dropdown>
</div>
{/if}
<SplitCreateButton actions={visibleActions} />
</div>
</div>