mirror of
https://github.com/open-webui/open-webui.git
synced 2026-08-28 05:27:35 +00:00
refac
This commit is contained in:
Timothy Jaeryang Baek
parent
343eb1d659
commit
bd406851ea
1 changed files with 97 additions and 45 deletions
|
|
@ -2,7 +2,6 @@
|
|||
import DOMPurify from 'dompurify';
|
||||
|
||||
import { onMount, getContext } from 'svelte';
|
||||
import { Confetti } from 'svelte-confetti';
|
||||
|
||||
import { WEBUI_NAME, config, settings } from '$lib/stores';
|
||||
|
||||
|
|
@ -18,9 +17,17 @@
|
|||
export let show = false;
|
||||
|
||||
let changelog = null;
|
||||
let error = false;
|
||||
|
||||
const init = async () => {
|
||||
changelog = await getChangelog();
|
||||
if (changelog || error) {
|
||||
return;
|
||||
}
|
||||
|
||||
changelog = await getChangelog().catch(() => {
|
||||
error = true;
|
||||
return null;
|
||||
});
|
||||
};
|
||||
|
||||
const closeModal = async () => {
|
||||
|
|
@ -33,81 +40,126 @@
|
|||
$: if (show) {
|
||||
init();
|
||||
}
|
||||
|
||||
const formatDate = (date) => {
|
||||
if (!date) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const [year, month, day] = date.split('-');
|
||||
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
const monthIndex = Number(month) - 1;
|
||||
|
||||
return year && monthIndex >= 0 && monthIndex < months.length && day
|
||||
? `${months[monthIndex]} ${Number(day)}, ${year}`
|
||||
: date;
|
||||
};
|
||||
</script>
|
||||
|
||||
<Modal bind:show size="xl">
|
||||
<div class="px-6 pt-5 dark:text-white text-black">
|
||||
<div class="flex justify-between items-start">
|
||||
<h2 class="text-xl font-normal m-0">
|
||||
{$i18n.t("What's New in")}
|
||||
{$WEBUI_NAME}
|
||||
<Confetti x={[-1, -0.25]} y={[0, 0.5]} />
|
||||
</h2>
|
||||
<Modal
|
||||
bind:show
|
||||
size="lg"
|
||||
className="bg-white dark:bg-gray-900 rounded-3xl overflow-hidden"
|
||||
containerClassName="p-3"
|
||||
>
|
||||
<div class="flex max-h-[78vh] flex-col">
|
||||
<div class="flex shrink-0 items-start justify-between gap-4 px-4 pb-3 pt-4 dark:text-white text-black">
|
||||
<div class="min-w-0">
|
||||
<h2 class="m-0 truncate text-base font-medium">
|
||||
{$i18n.t("What's New in")} {$WEBUI_NAME}
|
||||
</h2>
|
||||
<div class="mt-1 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span>{$i18n.t('Release Notes')}</span>
|
||||
<span class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700" />
|
||||
<span>v{WEBUI_VERSION}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
|
||||
class="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl text-gray-400 transition hover:bg-gray-100 hover:text-gray-700 dark:text-gray-500 dark:hover:bg-white/10 dark:hover:text-gray-200"
|
||||
on:click={closeModal}
|
||||
aria-label={$i18n.t('Close')}
|
||||
>
|
||||
<XMark className={'size-4'} />
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center mt-1">
|
||||
<div class="text-sm dark:text-gray-200">{$i18n.t('Release Notes')}</div>
|
||||
<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50/50 dark:bg-gray-850/50" />
|
||||
<div class="text-sm dark:text-gray-200">
|
||||
v{WEBUI_VERSION}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=" w-full p-4 px-5 text-gray-700 dark:text-gray-100">
|
||||
<div class=" overflow-y-scroll max-h-[30rem] scrollbar-hidden">
|
||||
<div class="mb-3">
|
||||
{#if changelog}
|
||||
<div class="min-h-0 flex-1 overflow-y-auto px-4 py-3 text-gray-700 scrollbar-hidden dark:text-gray-100">
|
||||
{#if changelog}
|
||||
<div class="space-y-6">
|
||||
{#each Object.keys(changelog) as version}
|
||||
<div class=" mb-3 pr-2">
|
||||
<h3 class="font-normal text-xl mb-1 dark:text-white m-0">
|
||||
v{version} - {changelog[version].date}
|
||||
</h3>
|
||||
|
||||
<hr class="border-gray-50/50 dark:border-gray-850/50 my-2" />
|
||||
<section class="pr-1">
|
||||
<div class="mb-3">
|
||||
<h3 class="m-0 text-sm font-semibold text-gray-950 dark:text-white">v{version}</h3>
|
||||
<div class="mt-0.5 text-[0.6875rem] text-gray-400 dark:text-gray-500">
|
||||
{formatDate(changelog[version].date)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#each Object.keys(changelog[version]).filter((section) => section !== 'date') as section}
|
||||
<div class="w-full">
|
||||
<div class="mb-4 w-full">
|
||||
<div
|
||||
class="font-normal uppercase text-xs {section === 'added'
|
||||
? 'bg-blue-500/20 text-blue-700 dark:text-blue-200'
|
||||
class="mb-2 text-[0.6875rem] font-semibold uppercase tracking-wide {section ===
|
||||
'added'
|
||||
? 'text-blue-600 dark:text-blue-300'
|
||||
: section === 'fixed'
|
||||
? 'bg-green-500/20 text-green-700 dark:text-green-200'
|
||||
? 'text-green-600 dark:text-green-300'
|
||||
: section === 'changed'
|
||||
? 'bg-yellow-500/20 text-yellow-700 dark:text-yellow-200'
|
||||
? 'text-yellow-700 dark:text-yellow-300'
|
||||
: section === 'removed'
|
||||
? 'bg-red-500/20 text-red-700 dark:text-red-200'
|
||||
: ''} w-fit rounded-xl px-2 my-2.5"
|
||||
? 'text-red-600 dark:text-red-300'
|
||||
: 'text-gray-500 dark:text-gray-400'}"
|
||||
>
|
||||
{section}
|
||||
</div>
|
||||
|
||||
<div class="my-2.5 px-1.5 markdown-prose-sm !list-none !w-full !max-w-none">
|
||||
<div class="space-y-2 text-[0.8125rem] leading-relaxed">
|
||||
{#each changelog[version][section] as entry}
|
||||
<div class="my-2">
|
||||
{@html DOMPurify.sanitize(entry?.raw)}
|
||||
<div class="flex gap-2.5">
|
||||
<span
|
||||
class="mt-[0.6em] h-1 w-1 shrink-0 rounded-full bg-gray-300 dark:bg-gray-700"
|
||||
/>
|
||||
<div
|
||||
class="min-w-0 markdown-prose-sm !max-w-none !text-[0.8125rem] text-gray-600 dark:text-gray-300 [&_*]:!my-0"
|
||||
>
|
||||
{@html DOMPurify.sanitize(entry?.raw)}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="flex flex-col items-center justify-center gap-3 py-16 text-center">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
{$i18n.t('Could not load release notes.')}
|
||||
</p>
|
||||
<button
|
||||
on:click={() => {
|
||||
error = false;
|
||||
init();
|
||||
}}
|
||||
class="text-sm font-medium text-gray-700 transition hover:text-black dark:text-gray-300 dark:hover:text-white"
|
||||
>
|
||||
{$i18n.t('Retry')}
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex items-center justify-center py-16 text-sm text-gray-400 dark:text-gray-500">
|
||||
{$i18n.t('Loading release notes...')}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex justify-end pt-3 text-sm font-normal">
|
||||
|
||||
<div class="flex shrink-0 justify-end px-4 pb-4 pt-2 text-sm">
|
||||
<button
|
||||
on:click={closeModal}
|
||||
class="px-3.5 py-1.5 text-sm font-normal bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
|
||||
class="font-medium text-gray-600 transition hover:text-gray-950 dark:text-gray-400 dark:hover:text-white"
|
||||
>
|
||||
<span class="relative">{$i18n.t("Okay, Let's Go!")}</span>
|
||||
<span class="relative">{$i18n.t('Done')}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue