bhetherman/open-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-07-21 13:53:30 -04:00
parent 86efecd9ad
commit 409fb39717
9 changed files with 374 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/Chat.svelte
+1 -1
View File
@@ -1177,7 +1177,7 @@
}
const pageSubscribe = page.subscribe(async (p) => {
if (p.url.pathname === '/') {
if (p.url.pathname === '/' || p.url.pathname.startsWith('/folders/')) {
await tick();
initNewChat();
}
src/lib/components/chat/Placeholder/ChatList.svelte
+87 -42
View File
@@ -1,27 +1,35 @@
<script lang="ts">
import { getContext, onMount } from 'svelte';
const i18n = getContext('i18n');
import { getContext } from 'svelte';
import type { Writable } from 'svelte/store';
const i18n: Writable<any> = getContext('i18n');
import dayjs from 'dayjs';
import localizedFormat from 'dayjs/plugin/localizedFormat';
import { getTimeRange } from '$lib/utils';
import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
import Loader from '$lib/components/common/Loader.svelte';
import Spinner from '$lib/components/common/Spinner.svelte';
import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
dayjs.extend(localizedFormat);
export let chats = [];
export let chats: any[] = [];
export let chatListLoading = false;
export let allChatsLoaded = false;
export let loadHandler: Function = null;
export let showOwnerInfo = false;
export let page = 1;
export let total = 0;
export let perPage = 10;
export let orderBy: 'title' | 'updated_at' = 'updated_at';
export let direction: 'asc' | 'desc' = 'desc';
export let onPageChange: Function = () => {};
export let onSort: Function = () => {};
let chatList = null;
let chatList: any[] | null = null;
let totalPages = 1;
let pages: (number | 'ellipsis')[] = [];
const init = async () => {
if (chats.length === 0) {
@@ -31,34 +39,43 @@
...chat,
time_range: getTimeRange(chat.updated_at)
}));
chatList.sort((a, b) => {
if (direction === 'asc') {
return a[orderBy] > b[orderBy] ? 1 : -1;
} else {
return a[orderBy] < b[orderBy] ? 1 : -1;
}
});
}
};
const setSortKey = (key) => {
if (orderBy === key) {
direction = direction === 'asc' ? 'desc' : 'asc';
} else {
orderBy = key;
direction = 'asc';
}
init();
const setSortKey = (key: 'title' | 'updated_at') => {
onSort(key);
};
let orderBy = 'updated_at';
let direction = 'desc'; // 'asc' or 'desc'
const buildPages = (currentPage: number, pageCount: number): (number | 'ellipsis')[] => {
if (pageCount <= 7) {
return Array.from({ length: pageCount }, (_, i) => i + 1);
}
const items: (number | 'ellipsis')[] = [1];
if (currentPage > 3) {
items.push('ellipsis');
}
const start = Math.max(2, currentPage - 1);
const end = Math.min(pageCount - 1, currentPage + 1);
for (let i = start; i <= end; i++) {
items.push(i);
}
if (currentPage < pageCount - 2) {
items.push('ellipsis');
}
items.push(pageCount);
return items;
};
$: if (chats) {
init();
}
$: totalPages = Math.max(1, Math.ceil(total / perPage));
$: pages = buildPages(page, totalPages);
</script>
{#if chatList}
@@ -153,7 +170,6 @@
class=" w-full flex justify-between items-center rounded-lg text-sm py-2 px-3 hover:bg-gray-50 dark:hover:bg-gray-850"
draggable="false"
href={`/c/${chat.id}`}
on:click={() => (show = false)}
>
<div class="text-ellipsis line-clamp-1 w-full sm:basis-3/5">
{chat?.title}
@@ -177,19 +193,48 @@
</a>
{/each}
{#if !allChatsLoaded && loadHandler}
<Loader
on:visible={(e) => {
if (!chatListLoading) {
loadHandler();
}
}}
>
<div class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2">
<Spinner className=" size-4" />
<div class=" ">Loading...</div>
</div>
</Loader>
{#if totalPages > 1}
<div class="flex items-center justify-center gap-1.5 pt-2">
<button
class="inline-flex size-7 items-center justify-center rounded-lg text-xs font-medium text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 disabled:cursor-not-allowed disabled:opacity-25 dark:text-gray-500 dark:hover:bg-gray-850 dark:hover:text-gray-300"
disabled={chatListLoading || page <= 1}
aria-label={$i18n.t('Previous page')}
on:click={() => onPageChange(page - 1)}
>
<ChevronLeft className="size-3.5" strokeWidth="2" />
</button>
{#each pages as item, index (item === 'ellipsis' ? `ellipsis-${index}` : item)}
{#if item === 'ellipsis'}
<span
class="inline-flex size-7 items-center justify-center text-xs text-gray-400 select-none dark:text-gray-600"
>
...
</span>
{:else}
<button
class="inline-flex size-7 items-center justify-center rounded-lg text-xs font-medium transition hover:bg-gray-50 hover:text-gray-700 dark:hover:bg-gray-850 dark:hover:text-gray-300 {item ===
page
? 'bg-gray-50 text-gray-800 dark:bg-gray-850 dark:text-gray-100'
: 'text-gray-500 dark:text-gray-500'}"
aria-label={`Page ${item}`}
aria-current={item === page ? 'page' : undefined}
on:click={() => onPageChange(item)}
>
{item}
</button>
{/if}
{/each}
<button
class="inline-flex size-7 items-center justify-center rounded-lg text-xs font-medium text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 disabled:cursor-not-allowed disabled:opacity-25 dark:text-gray-500 dark:hover:bg-gray-850 dark:hover:text-gray-300"
disabled={chatListLoading || page >= totalPages}
aria-label={$i18n.t('Next page')}
on:click={() => onPageChange(page + 1)}
>
<ChevronRight className="size-3.5" strokeWidth="2" />
</button>
</div>
{/if}
</div>
{/if}
src/lib/components/chat/Placeholder/FolderPlaceholder.svelte
+53 -19
View File
@@ -11,18 +11,21 @@
import ChatList from './ChatList.svelte';
import FolderKnowledge from './FolderKnowledge.svelte';
import Spinner from '$lib/components/common/Spinner.svelte';
import { getChatListByFolderId } from '$lib/apis/chats';
import { getSharedFolderChats } from '$lib/apis/folders';
export let folder: any = null;
let selectedTab = 'chats';
const CHATS_PAGE_SIZE = 10;
let page = 1;
let totalChats = 0;
let orderBy: 'title' | 'updated_at' = 'updated_at';
let direction: 'asc' | 'desc' = 'desc';
let currentFolderId: string | null = null;
let chats: any[] | null = null;
let chatListLoading = false;
let allChatsLoaded = false;
$: showOwnerInfo = Boolean(
folder?.shared ||
@@ -30,42 +33,68 @@
(folder?.access_grants?.length ?? 0) > 0
);
const loadChats = async () => {
// getSharedFolderChats returns all users' chats in one shot; no pagination
allChatsLoaded = true;
const setSortKey = (key: 'title' | 'updated_at') => {
if (orderBy === key) {
direction = direction === 'asc' ? 'desc' : 'asc';
} else {
orderBy = key;
direction = key === 'title' ? 'asc' : 'desc';
}
page = 1;
setChatList();
};
const setPage = (nextPage: number) => {
if (nextPage === page || chatListLoading) {
return;
}
page = nextPage;
setChatList();
};
const setChatList = async () => {
const folderId = folder?.id;
chats = null;
page = 1;
allChatsLoaded = false;
chatListLoading = false;
if (folder && folder.id) {
if (folderId) {
// Always use the shared folder endpoint so owners also see
// chats created by users who have write access to this folder.
const res = await getSharedFolderChats(localStorage.token, folder.id).catch((error) => {
chatListLoading = true;
const res = await getSharedFolderChats(localStorage.token, folderId, {
page,
sortBy: orderBy,
sortDir: direction
}).catch((error) => {
console.error(error);
return null;
});
chatListLoading = false;
if (res && res.chats) {
chats = res.chats;
allChatsLoaded = true;
totalChats = res.total ?? res.chats.length;
} else {
// Fallback to regular API (e.g. if user has no shared access)
const fallback = await getChatListByFolderId(localStorage.token, folder.id, page).catch(
() => []
);
chats = fallback || [];
chats = [];
totalChats = 0;
}
} else {
chats = [];
totalChats = 0;
}
};
$: if (folder) {
$: if (folder?.id && folder.id !== currentFolderId) {
currentFolderId = folder.id;
page = 1;
setChatList();
}
$: if (!folder?.id && currentFolderId !== null) {
currentFolderId = null;
chats = [];
totalChats = 0;
}
</script>
<div>
@@ -105,9 +134,14 @@
<ChatList
{chats}
{chatListLoading}
{allChatsLoaded}
loadHandler={loadChats}
{showOwnerInfo}
{page}
total={totalChats}
perPage={CHATS_PAGE_SIZE}
{orderBy}
{direction}
onPageChange={setPage}
onSort={setSortKey}
/>
{:else}
<div class="py-10">