Emil_Shanaty/open-webui-ai4me
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-01-29 18:05:07 +04:00
parent 5749f78262
commit 26a5d8f75d
1 changed files with 99 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/Settings/DataControls.svelte
+99 -247
View File
@@ -24,6 +24,7 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import ArchivedChatsModal from '$lib/components/layout/ArchivedChatsModal.svelte'; import ArchivedChatsModal from '$lib/components/layout/ArchivedChatsModal.svelte';
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@@ -32,8 +33,8 @@
// Chats // Chats
let importFiles; let importFiles;
let showArchiveConfirm = false; let showArchiveConfirmDialog = false;
let showDeleteConfirm = false; let showDeleteConfirmDialog = false;
let showArchivedChatsModal = false; let showArchivedChatsModal = false;
let chatImportInputElement: HTMLInputElement; let chatImportInputElement: HTMLInputElement;
@@ -136,265 +137,116 @@
<ArchivedChatsModal bind:show={showArchivedChatsModal} onUpdate={handleArchivedChatsChange} /> <ArchivedChatsModal bind:show={showArchivedChatsModal} onUpdate={handleArchivedChatsChange} />
<div id="tab-chats" class="flex flex-col h-full justify-between space-y-3 text-sm"> <ConfirmDialog
<div class=" space-y-2 overflow-y-scroll max-h-[28rem] md:max-h-full"> title={$i18n.t('Archive All Chats')}
<div class="flex flex-col"> message={$i18n.t('Are you sure you want to archive all chats? This action cannot be undone.')}
<input bind:show={showArchiveConfirmDialog}
id="chat-import-input" on:confirm={archiveAllChatsHandler}
bind:this={chatImportInputElement} on:cancel={() => {
bind:files={importFiles} showArchiveConfirmDialog = false;
type="file" }}
accept=".json" />
hidden
/> <ConfirmDialog
<button title={$i18n.t('Delete All Chats')}
class=" flex rounded-md py-2 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition" message={$i18n.t('Are you sure you want to delete all chats? This action cannot be undone.')}
on:click={() => { bind:show={showDeleteConfirmDialog}
chatImportInputElement.click(); on:confirm={deleteAllChatsHandler}
}} on:cancel={() => {
> showDeleteConfirmDialog = false;
<div class=" self-center mr-3"> }}
<svg />
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" <div id="tab-chats" class="flex flex-col h-full justify-between text-sm">
fill="currentColor" <div class="space-y-3 overflow-y-scroll max-h-[28rem] md:max-h-full">
class="w-4 h-4" <input
id="chat-import-input"
bind:this={chatImportInputElement}
bind:files={importFiles}
type="file"
accept=".json"
hidden
/>
<div>
<div class="mb-1 text-sm font-medium">{$i18n.t('Chat Management')}</div>
<div>
<div class="py-0.5 flex w-full justify-between">
<div class="self-center text-xs">{$i18n.t('Import Chats')}</div>
<button
class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => {
chatImportInputElement.click();
}}
type="button"
> >
<path <span class="self-center">{$i18n.t('Import')}</span>
fill-rule="evenodd" </button>
d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm4 9.5a.75.75 0 0 1-.75-.75V8.06l-.72.72a.75.75 0 0 1-1.06-1.06l2-2a.75.75 0 0 1 1.06 0l2 2a.75.75 0 1 1-1.06 1.06l-.72-.72v2.69a.75.75 0 0 1-.75.75Z"
clip-rule="evenodd"
/>
</svg>
</div> </div>
<div class=" self-center text-sm font-medium">{$i18n.t('Import Chats')}</div> </div>
</button>
{#if $user?.role === 'admin' || ($user.permissions?.chat?.export ?? true)} {#if $user?.role === 'admin' || ($user.permissions?.chat?.export ?? true)}
<button <div>
class=" flex rounded-md py-2 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition" <div class="py-0.5 flex w-full justify-between">
on:click={() => { <div class="self-center text-xs">{$i18n.t('Export Chats')}</div>
exportChats(); <button
}} class="p-1 px-3 text-xs flex rounded-sm transition"
> on:click={() => {
<div class=" self-center mr-3"> exportChats();
<svg }}
xmlns="http://www.w3.org/2000/svg" type="button"
viewBox="0 0 16 16"
fill="currentColor"
class="w-4 h-4"
> >
<path <span class="self-center">{$i18n.t('Export')}</span>
fill-rule="evenodd" </button>
d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm4 3.5a.75.75 0 0 1 .75.75v2.69l.72-.72a.75.75 0 1 1 1.06 1.06l-2 2a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 0 1 1.06-1.06l.72.72V6.25A.75.75 0 0 1 8 5.5Z"
clip-rule="evenodd"
/>
</svg>
</div> </div>
<div class=" self-center text-sm font-medium">{$i18n.t('Export Chats')}</div> </div>
</button>
{/if} {/if}
</div>
<hr class=" border-gray-100/30 dark:border-gray-850/30" /> <div>
<div class="py-0.5 flex w-full justify-between">
<div class="flex flex-col"> <div class="self-center text-xs">{$i18n.t('Archived Chats')}</div>
<button <button
class=" flex rounded-md py-2 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition" class="p-1 px-3 text-xs flex rounded-sm transition"
on:click={() => { on:click={() => {
showArchivedChatsModal = true; showArchivedChatsModal = true;
}} }}
> type="button"
<div class=" self-center mr-3">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="size-4"
> >
<path <span class="self-center">{$i18n.t('Manage')}</span>
d="M3.375 3C2.339 3 1.5 3.84 1.5 4.875v.75c0 1.036.84 1.875 1.875 1.875h17.25c1.035 0 1.875-.84 1.875-1.875v-.75C22.5 3.839 21.66 3 20.625 3H3.375Z" </button>
/>
<path
fill-rule="evenodd"
d="m3.087 9 .54 9.176A3 3 0 0 0 6.62 21h10.757a3 3 0 0 0 2.995-2.824L20.913 9H3.087ZM12 10.5a.75.75 0 0 1 .75.75v4.94l1.72-1.72a.75.75 0 1 1 1.06 1.06l-3 3a.75.75 0 0 1-1.06 0l-3-3a.75.75 0 1 1 1.06-1.06l1.72 1.72v-4.94a.75.75 0 0 1 .75-.75Z"
clip-rule="evenodd"
/>
</svg>
</div> </div>
<div class=" self-center text-sm font-medium">{$i18n.t('Archived Chats')}</div> </div>
</button>
{#if showArchiveConfirm} <div>
<div class="flex justify-between rounded-md items-center py-2 px-3.5 w-full transition"> <div class="py-0.5 flex w-full justify-between">
<div class="flex items-center space-x-3"> <div class="self-center text-xs">{$i18n.t('Archive All Chats')}</div>
<svg <button
xmlns="http://www.w3.org/2000/svg" class="p-1 px-3 text-xs flex rounded-sm transition"
viewBox="0 0 16 16" on:click={() => {
fill="currentColor" showArchiveConfirmDialog = true;
class="w-4 h-4" }}
> type="button"
<path d="M2 3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3Z" /> >
<path <span class="self-center">{$i18n.t('Archive All')}</span>
fill-rule="evenodd" </button>
d="M13 6H3v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V6ZM5.72 7.47a.75.75 0 0 1 1.06 0L8 8.69l1.22-1.22a.75.75 0 1 1 1.06 1.06L9.06 9.75l1.22 1.22a.75.75 0 1 1-1.06 1.06L8 10.81l-1.22 1.22a.75.75 0 0 1-1.06-1.06l1.22-1.22-1.22-1.22a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd"
/>
</svg>
<span>{$i18n.t('Are you sure?')}</span>
</div>
<div class="flex space-x-1.5 items-center">
<button
class="hover:text-white transition"
on:click={() => {
archiveAllChatsHandler();
showArchiveConfirm = false;
}}
>
<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="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
clip-rule="evenodd"
/>
</svg>
</button>
<button
class="hover:text-white transition"
on:click={() => {
showArchiveConfirm = false;
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
/>
</svg>
</button>
</div>
</div> </div>
{:else} </div>
<button
class=" flex rounded-md py-2 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
on:click={() => {
showArchiveConfirm = true;
}}
>
<div class=" self-center mr-3">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="size-4"
>
<path
d="M3.375 3C2.339 3 1.5 3.84 1.5 4.875v.75c0 1.036.84 1.875 1.875 1.875h17.25c1.035 0 1.875-.84 1.875-1.875v-.75C22.5 3.839 21.66 3 20.625 3H3.375Z"
/>
<path
fill-rule="evenodd"
d="m3.087 9 .54 9.176A3 3 0 0 0 6.62 21h10.757a3 3 0 0 0 2.995-2.824L20.913 9H3.087Zm6.163 3.75A.75.75 0 0 1 10 12h4a.75.75 0 0 1 0 1.5h-4a.75.75 0 0 1-.75-.75Z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class=" self-center text-sm font-medium">{$i18n.t('Archive All Chats')}</div>
</button>
{/if}
{#if showDeleteConfirm} <div>
<div class="flex justify-between rounded-md items-center py-2 px-3.5 w-full transition"> <div class="py-0.5 flex w-full justify-between">
<div class="flex items-center space-x-3"> <div class="self-center text-xs">{$i18n.t('Delete All Chats')}</div>
<svg <button
xmlns="http://www.w3.org/2000/svg" class="p-1 px-3 text-xs flex rounded-sm transition"
viewBox="0 0 16 16" on:click={() => {
fill="currentColor" showDeleteConfirmDialog = true;
class="w-4 h-4" }}
> type="button"
<path d="M2 3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3Z" /> >
<path <span class="self-center">{$i18n.t('Delete All')}</span>
fill-rule="evenodd" </button>
d="M13 6H3v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V6ZM5.72 7.47a.75.75 0 0 1 1.06 0L8 8.69l1.22-1.22a.75.75 0 1 1 1.06 1.06L9.06 9.75l1.22 1.22a.75.75 0 1 1-1.06 1.06L8 10.81l-1.22 1.22a.75.75 0 0 1-1.06-1.06l1.22-1.22-1.22-1.22a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd"
/>
</svg>
<span>{$i18n.t('Are you sure?')}</span>
</div>
<div class="flex space-x-1.5 items-center">
<button
class="hover:text-white transition"
on:click={() => {
deleteAllChatsHandler();
showDeleteConfirm = false;
}}
>
<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="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
clip-rule="evenodd"
/>
</svg>
</button>
<button
class="hover:text-white transition"
on:click={() => {
showDeleteConfirm = false;
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
/>
</svg>
</button>
</div>
</div> </div>
{:else} </div>
<button
class=" flex rounded-md py-2 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
on:click={() => {
showDeleteConfirm = true;
}}
>
<div class=" self-center mr-3">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="w-4 h-4"
>
<path
fill-rule="evenodd"
d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm7 7a.75.75 0 0 1-.75.75h-4.5a.75.75 0 0 1 0-1.5h4.5A.75.75 0 0 1 11 9Z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class=" self-center text-sm font-medium">{$i18n.t('Delete All Chats')}</div>
</button>
{/if}
</div> </div>
</div> </div>
</div> </div>