refac
This commit is contained in:
Timothy Jaeryang Baek
@@ -2,7 +2,7 @@
|
||||
import { getContext } from 'svelte';
|
||||
import { toast } from 'svelte-sonner';
|
||||
|
||||
import { mobile, showArchivedChats, showSidebar, user } from '$lib/stores';
|
||||
import { mobile, showSettings, showSidebar, user } from '$lib/stores';
|
||||
|
||||
import { slide } from 'svelte/transition';
|
||||
import { page } from '$app/stores';
|
||||
@@ -202,7 +202,7 @@
|
||||
help={true}
|
||||
on:show={(e) => {
|
||||
if (e.detail === 'archived-chat') {
|
||||
showArchivedChats.set(true);
|
||||
showSettings.set('archived_chats');
|
||||
}
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -0,0 +1,383 @@
|
||||
<script lang="ts">
|
||||
// @ts-ignore
|
||||
import fileSaver from 'file-saver';
|
||||
const { saveAs } = fileSaver;
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
import calendar from 'dayjs/plugin/calendar';
|
||||
import localizedFormat from 'dayjs/plugin/localizedFormat';
|
||||
import { getContext, onMount } from 'svelte';
|
||||
import type { Writable } from 'svelte/store';
|
||||
import { goto } from '$app/navigation';
|
||||
import { toast } from 'svelte-sonner';
|
||||
|
||||
import {
|
||||
archiveChatById,
|
||||
deleteChatById,
|
||||
getAllArchivedChats,
|
||||
getArchivedChatCount,
|
||||
getArchivedChatList,
|
||||
unarchiveAllChats
|
||||
} from '$lib/apis/chats';
|
||||
import { chatId, showSettings } from '$lib/stores';
|
||||
import { refreshChatList } from '$lib/stores/chat-list';
|
||||
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
|
||||
import Loader from '$lib/components/common/Loader.svelte';
|
||||
import Spinner from '$lib/components/common/Spinner.svelte';
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
|
||||
import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
|
||||
import XMark from '$lib/components/icons/XMark.svelte';
|
||||
|
||||
dayjs.extend(localizedFormat);
|
||||
dayjs.extend(calendar);
|
||||
|
||||
const i18n: Writable<any> = getContext('i18n');
|
||||
|
||||
let loading = false;
|
||||
let chatList: any[] | null = null;
|
||||
let chatCount: number | null = null;
|
||||
let page = 1;
|
||||
|
||||
let query = '';
|
||||
let orderBy = 'updated_at';
|
||||
let direction = 'desc';
|
||||
|
||||
let allChatsLoaded = false;
|
||||
let chatListLoading = false;
|
||||
let searchDebounceTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
let selectedChatId: string | null = null;
|
||||
let showDeleteConfirmDialog = false;
|
||||
let showUnarchiveAllConfirmDialog = false;
|
||||
|
||||
const getFilter = () => ({
|
||||
...(query ? { query } : {}),
|
||||
...(orderBy ? { order_by: orderBy } : {}),
|
||||
...(direction ? { direction } : {})
|
||||
});
|
||||
|
||||
const loadChats = async () => {
|
||||
page = 1;
|
||||
chatList = null;
|
||||
chatList = await getArchivedChatList(localStorage.token, page, getFilter());
|
||||
allChatsLoaded = (chatList ?? []).length === 0;
|
||||
chatCount = await getArchivedChatCount(localStorage.token);
|
||||
};
|
||||
|
||||
const searchHandler = () => {
|
||||
if (searchDebounceTimeout) {
|
||||
clearTimeout(searchDebounceTimeout);
|
||||
}
|
||||
|
||||
if (query === '') {
|
||||
loadChats();
|
||||
} else {
|
||||
searchDebounceTimeout = setTimeout(loadChats, 300);
|
||||
}
|
||||
};
|
||||
|
||||
const loadMoreChats = async () => {
|
||||
chatListLoading = true;
|
||||
page += 1;
|
||||
|
||||
const newChatList = await getArchivedChatList(localStorage.token, page, getFilter());
|
||||
allChatsLoaded = newChatList.length === 0;
|
||||
|
||||
if (newChatList.length > 0) {
|
||||
chatList = [...(chatList || []), ...newChatList];
|
||||
}
|
||||
|
||||
chatListLoading = false;
|
||||
};
|
||||
|
||||
const setSortKey = async (key: string) => {
|
||||
if (orderBy === key) {
|
||||
direction = direction === 'asc' ? 'desc' : 'asc';
|
||||
} else {
|
||||
orderBy = key;
|
||||
direction = 'asc';
|
||||
}
|
||||
|
||||
await loadChats();
|
||||
};
|
||||
|
||||
const exportChatsHandler = async () => {
|
||||
const chats = await getAllArchivedChats(localStorage.token);
|
||||
const blob = new Blob([JSON.stringify(chats)], {
|
||||
type: 'application/json'
|
||||
});
|
||||
saveAs(blob, `${$i18n.t('archived-chat-export')}-${Date.now()}.json`);
|
||||
};
|
||||
|
||||
const unarchiveHandler = async (id: string) => {
|
||||
await archiveChatById(localStorage.token, id).catch((error) => {
|
||||
toast.error(`${error}`);
|
||||
});
|
||||
|
||||
chatList = chatList?.filter((chat) => chat.id !== id) ?? null;
|
||||
if (chatCount !== null) chatCount -= 1;
|
||||
await refreshChatList(localStorage.token);
|
||||
};
|
||||
|
||||
const deleteHandler = async () => {
|
||||
if (!selectedChatId) return;
|
||||
|
||||
const id = selectedChatId;
|
||||
await deleteChatById(localStorage.token, id).catch((error) => {
|
||||
toast.error(`${error}`);
|
||||
});
|
||||
|
||||
chatList = chatList?.filter((chat) => chat.id !== id) ?? null;
|
||||
if (chatCount !== null) chatCount -= 1;
|
||||
selectedChatId = null;
|
||||
|
||||
if ($chatId === id) {
|
||||
await goto('/');
|
||||
chatId.set('');
|
||||
}
|
||||
|
||||
await refreshChatList(localStorage.token);
|
||||
};
|
||||
|
||||
const unarchiveAllHandler = async () => {
|
||||
loading = true;
|
||||
try {
|
||||
await unarchiveAllChats(localStorage.token);
|
||||
toast.success($i18n.t('All chats have been unarchived.'));
|
||||
await loadChats();
|
||||
await refreshChatList(localStorage.token);
|
||||
} catch (error) {
|
||||
toast.error(`${error}`);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMount(loadChats);
|
||||
</script>
|
||||
|
||||
<ConfirmDialog
|
||||
bind:show={showDeleteConfirmDialog}
|
||||
on:confirm={() => {
|
||||
deleteHandler();
|
||||
}}
|
||||
/>
|
||||
|
||||
<ConfirmDialog
|
||||
bind:show={showUnarchiveAllConfirmDialog}
|
||||
message={$i18n.t('Are you sure you want to unarchive all archived chats?')}
|
||||
confirmLabel={$i18n.t('Unarchive All')}
|
||||
on:confirm={() => {
|
||||
unarchiveAllHandler();
|
||||
}}
|
||||
/>
|
||||
|
||||
<div id="tab-archived-chats" class="flex flex-col h-full justify-between text-sm">
|
||||
<div class="space-y-3 overflow-y-scroll max-h-[28rem] md:max-h-full">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 text-base font-normal">
|
||||
{$i18n.t('Archived Chats')}
|
||||
<span class="text-base font-normal text-gray-500 dark:text-gray-500">
|
||||
{chatCount ?? ''}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-gray-500 mt-0.5">
|
||||
{$i18n.t('Manage conversations you have archived.')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 rounded-xl bg-gray-100 dark:bg-gray-850 px-2">
|
||||
<input
|
||||
class="w-full bg-transparent py-1.5 text-xs outline-hidden placeholder:text-gray-400 dark:placeholder:text-gray-600"
|
||||
bind:value={query}
|
||||
on:input={searchHandler}
|
||||
placeholder={$i18n.t('Search Chats')}
|
||||
maxlength="500"
|
||||
/>
|
||||
{#if query}
|
||||
<button
|
||||
class="rounded-full p-1 text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-800"
|
||||
type="button"
|
||||
aria-label={$i18n.t('Clear search')}
|
||||
on:click={() => {
|
||||
query = '';
|
||||
searchHandler();
|
||||
}}
|
||||
>
|
||||
<XMark className="size-3" strokeWidth="2" />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if chatList === null}
|
||||
<div class="flex min-h-20 items-center justify-center">
|
||||
<Spinner className="size-5" />
|
||||
</div>
|
||||
{:else if chatList.length === 0}
|
||||
<div
|
||||
class="flex min-h-20 items-center justify-center px-4 text-center text-xs text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
{$i18n.t('You have no archived conversations.')}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex items-center px-1 text-xs text-gray-500 dark:text-gray-500">
|
||||
<button
|
||||
class="flex flex-1 items-center gap-1 py-1 text-left"
|
||||
type="button"
|
||||
on:click={() => setSortKey('title')}
|
||||
>
|
||||
{$i18n.t('Title')}
|
||||
{#if orderBy === 'title'}
|
||||
{#if direction === 'asc'}
|
||||
<ChevronUp className="size-2" />
|
||||
{:else}
|
||||
<ChevronDown className="size-2" />
|
||||
{/if}
|
||||
{/if}
|
||||
</button>
|
||||
<button
|
||||
class="hidden w-24 items-center justify-end gap-1 py-1 text-right sm:flex"
|
||||
type="button"
|
||||
on:click={() => setSortKey('updated_at')}
|
||||
>
|
||||
{$i18n.t('Updated at')}
|
||||
{#if orderBy === 'updated_at'}
|
||||
{#if direction === 'asc'}
|
||||
<ChevronUp className="size-2" />
|
||||
{:else}
|
||||
<ChevronDown className="size-2" />
|
||||
{/if}
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="divide-y divide-gray-50 dark:divide-gray-850/80">
|
||||
{#each chatList as chat (chat.id)}
|
||||
<div class="flex items-center gap-2 py-2 text-xs">
|
||||
<a
|
||||
class="min-w-0 flex-1 truncate text-gray-800 hover:text-black dark:text-gray-200 dark:hover:text-white"
|
||||
href={`/c/${chat.id}`}
|
||||
on:click={(event) => {
|
||||
event.preventDefault();
|
||||
showSettings.set(false);
|
||||
goto(`/c/${chat.id}`);
|
||||
}}
|
||||
>
|
||||
{chat?.title}
|
||||
</a>
|
||||
<div class="hidden w-24 shrink-0 justify-end text-gray-500 dark:text-gray-500 sm:flex">
|
||||
{$i18n.t(
|
||||
dayjs(chat?.updated_at * 1000).calendar(null, {
|
||||
sameDay: '[Today]',
|
||||
nextDay: '[Tomorrow]',
|
||||
nextWeek: 'dddd',
|
||||
lastDay: '[Yesterday]',
|
||||
lastWeek: '[Last] dddd',
|
||||
sameElse: 'L'
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
<div class="flex shrink-0 items-center text-gray-600 dark:text-gray-300">
|
||||
<Tooltip content={$i18n.t('Unarchive Chat')}>
|
||||
<button
|
||||
class="rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-gray-850"
|
||||
type="button"
|
||||
aria-label={$i18n.t('Unarchive Chat')}
|
||||
on:click={() => {
|
||||
unarchiveHandler(chat.id);
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-4"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15m0-3-3-3m0 0-3 3m3-3V15"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</Tooltip>
|
||||
<Tooltip content={$i18n.t('Delete Chat')}>
|
||||
<button
|
||||
class="rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-gray-850"
|
||||
type="button"
|
||||
aria-label={$i18n.t('Delete Chat')}
|
||||
on:click={() => {
|
||||
selectedChatId = chat.id;
|
||||
showDeleteConfirmDialog = true;
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-4"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if !allChatsLoaded}
|
||||
<Loader
|
||||
on:visible={() => {
|
||||
if (!chatListLoading) {
|
||||
loadMoreChats();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class="flex w-full items-center justify-center gap-2 py-1 text-xs animate-pulse">
|
||||
<Spinner className="size-4" />
|
||||
<div>{$i18n.t('Loading...')}</div>
|
||||
</div>
|
||||
</Loader>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-1.5 pt-3 text-sm font-normal">
|
||||
{#if query === ''}
|
||||
<button
|
||||
class="px-3.5 py-1.5 text-sm font-normal hover:bg-black/5 dark:hover:bg-white/5 outline outline-1 outline-gray-300 dark:outline-gray-800 rounded-full disabled:opacity-50"
|
||||
disabled={loading || chatCount === 0}
|
||||
type="button"
|
||||
on:click={() => {
|
||||
showUnarchiveAllConfirmDialog = true;
|
||||
}}
|
||||
>
|
||||
{#if loading}
|
||||
<Spinner className="size-4" />
|
||||
{:else}
|
||||
{$i18n.t('Unarchive All')}
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<button
|
||||
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 disabled:opacity-50"
|
||||
disabled={loading || chatCount === 0}
|
||||
type="button"
|
||||
on:click={exportChatsHandler}
|
||||
>
|
||||
{$i18n.t('Export')}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@@ -2,24 +2,14 @@
|
||||
import fileSaver from 'file-saver';
|
||||
const { saveAs } = fileSaver;
|
||||
|
||||
import {
|
||||
chatId,
|
||||
user,
|
||||
settings
|
||||
} from '$lib/stores';
|
||||
import { user } from '$lib/stores';
|
||||
import { refreshChatList } from '$lib/stores/chat-list';
|
||||
|
||||
import {
|
||||
archiveAllChats,
|
||||
deleteAllChats,
|
||||
getAllChats,
|
||||
importChats
|
||||
} from '$lib/apis/chats';
|
||||
import { archiveAllChats, deleteAllChats, getAllChats, importChats } from '$lib/apis/chats';
|
||||
import { getImportOrigin, convertOpenAIChats } from '$lib/utils';
|
||||
import { onMount, getContext } from 'svelte';
|
||||
import { getContext } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import ArchivedChatsModal from '$lib/components/layout/ArchivedChatsModal.svelte';
|
||||
import SharedChatsModal from '$lib/components/layout/SharedChatsModal.svelte';
|
||||
import FilesModal from '$lib/components/layout/FilesModal.svelte';
|
||||
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
|
||||
@@ -33,7 +23,6 @@
|
||||
|
||||
let showArchiveConfirmDialog = false;
|
||||
let showDeleteConfirmDialog = false;
|
||||
let showArchivedChatsModal = false;
|
||||
let showSharedChatsModal = false;
|
||||
let showFilesModal = false;
|
||||
|
||||
@@ -118,22 +107,8 @@
|
||||
|
||||
await refreshChatList(localStorage.token);
|
||||
};
|
||||
|
||||
const handleArchivedChatsChange = async () => {
|
||||
await refreshChatList(localStorage.token);
|
||||
};
|
||||
</script>
|
||||
|
||||
<ArchivedChatsModal
|
||||
bind:show={showArchivedChatsModal}
|
||||
onUpdate={handleArchivedChatsChange}
|
||||
onDelete={(id) => {
|
||||
if ($chatId === id) {
|
||||
goto('/');
|
||||
chatId.set('');
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<SharedChatsModal bind:show={showSharedChatsModal} />
|
||||
<FilesModal bind:show={showFilesModal} />
|
||||
|
||||
@@ -205,21 +180,6 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div>
|
||||
<div class="py-0.5 flex w-full justify-between">
|
||||
<div class="self-center text-xs">{$i18n.t('Archived Chats')}</div>
|
||||
<button
|
||||
class="p-1 px-3 text-xs flex rounded-sm transition"
|
||||
on:click={() => {
|
||||
showArchivedChatsModal = true;
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
<span class="self-center">{$i18n.t('Manage')}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="py-0.5 flex w-full justify-between">
|
||||
<div class="self-center text-xs">{$i18n.t('Shared Chats')}</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { getContext, onMount, tick } from 'svelte';
|
||||
import { getContext, onMount } from 'svelte';
|
||||
import type { Writable } from 'svelte/store';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { config, models, settings, user } from '$lib/stores';
|
||||
import { updateUserSettings } from '$lib/apis/users';
|
||||
@@ -13,9 +14,9 @@
|
||||
import Interface from './Settings/Interface.svelte';
|
||||
import Audio from './Settings/Audio.svelte';
|
||||
import DataControls from './Settings/DataControls.svelte';
|
||||
import ArchivedChats from './Settings/ArchivedChats.svelte';
|
||||
import Personalization from './Settings/Personalization.svelte';
|
||||
import Search from '../icons/Search.svelte';
|
||||
import XMark from '../icons/XMark.svelte';
|
||||
import Connections from './Settings/Connections.svelte';
|
||||
import Integrations from './Settings/Integrations.svelte';
|
||||
import DatabaseSettings from '../icons/DatabaseSettings.svelte';
|
||||
@@ -28,8 +29,10 @@
|
||||
import Face from '../icons/Face.svelte';
|
||||
import AppNotification from '../icons/AppNotification.svelte';
|
||||
import UserBadgeCheck from '../icons/UserBadgeCheck.svelte';
|
||||
import ArchiveBox from '../icons/ArchiveBox.svelte';
|
||||
import ChevronLeft from '../icons/ChevronLeft.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
const i18n: Writable<any> = getContext('i18n');
|
||||
|
||||
export let show: boolean | string = false;
|
||||
|
||||
@@ -38,10 +41,8 @@
|
||||
selectedTab = show;
|
||||
show = true;
|
||||
}
|
||||
addScrollListener();
|
||||
} else {
|
||||
selectedTab = 'general';
|
||||
removeScrollListener();
|
||||
}
|
||||
|
||||
interface SettingsTab {
|
||||
@@ -347,8 +348,6 @@
|
||||
'archive chats',
|
||||
'archiveallchats',
|
||||
'archivechats',
|
||||
'archived chats',
|
||||
'archivedchats',
|
||||
'chat activity',
|
||||
'chat history',
|
||||
'chat settings',
|
||||
@@ -376,6 +375,25 @@
|
||||
'messagehistory'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'archived_chats',
|
||||
title: 'Archived Chats',
|
||||
keywords: [
|
||||
'archive',
|
||||
'archive chat',
|
||||
'archive chats',
|
||||
'archived',
|
||||
'archived chat',
|
||||
'archived chats',
|
||||
'archivedchat',
|
||||
'archivedchats',
|
||||
'conversation archive',
|
||||
'message archive',
|
||||
'unarchive',
|
||||
'unarchive chat',
|
||||
'unarchive chats'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'account',
|
||||
title: 'Account',
|
||||
@@ -476,11 +494,11 @@
|
||||
}
|
||||
];
|
||||
|
||||
let availableSettings = [];
|
||||
let filteredSettings = [];
|
||||
let availableSettings: SettingsTab[] = [];
|
||||
let filteredSettings: string[] = [];
|
||||
|
||||
let search = '';
|
||||
let searchDebounceTimeout;
|
||||
let searchDebounceTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
const getAvailableSettings = () => {
|
||||
return allSettings.filter((tab) => {
|
||||
@@ -513,10 +531,11 @@
|
||||
const setFilteredSettings = () => {
|
||||
filteredSettings = availableSettings
|
||||
.filter((tab) => {
|
||||
const query = search.toLowerCase().trim();
|
||||
return (
|
||||
search === '' ||
|
||||
tab.title.toLowerCase().includes(search.toLowerCase().trim()) ||
|
||||
tab.keywords.some((keyword) => keyword.includes(search.toLowerCase().trim()))
|
||||
query === '' ||
|
||||
tab.title.toLowerCase().includes(query) ||
|
||||
tab.keywords.some((keyword) => keyword.includes(query))
|
||||
);
|
||||
})
|
||||
.map((tab) => tab.id);
|
||||
@@ -526,6 +545,20 @@
|
||||
}
|
||||
};
|
||||
|
||||
const saveSettings = async (updated: Record<string, any>) => {
|
||||
console.log(updated);
|
||||
await settings.set({ ...$settings, ...updated });
|
||||
await models.set(await getModels());
|
||||
await updateUserSettings(localStorage.token, { ui: $settings });
|
||||
};
|
||||
|
||||
const getModels = async () => {
|
||||
return await _getModels(
|
||||
localStorage.token,
|
||||
$config?.features?.enable_direct_connections ? ($settings?.directConnections ?? null) : null
|
||||
);
|
||||
};
|
||||
|
||||
const searchDebounceHandler = () => {
|
||||
if (searchDebounceTimeout) {
|
||||
clearTimeout(searchDebounceTimeout);
|
||||
@@ -536,47 +569,15 @@
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const saveSettings = async (updated) => {
|
||||
console.log(updated);
|
||||
await settings.set({ ...$settings, ...updated });
|
||||
await models.set(await getModels());
|
||||
await updateUserSettings(localStorage.token, { ui: $settings });
|
||||
};
|
||||
|
||||
const getModels = async () => {
|
||||
return await _getModels(
|
||||
localStorage.token,
|
||||
$config?.features?.enable_direct_connections && ($settings?.directConnections ?? null)
|
||||
);
|
||||
};
|
||||
const tabButtonClass = (active: boolean) =>
|
||||
`flex items-center gap-1.5 h-7 px-2 md:w-full shrink-0 rounded-lg text-xs text-left transition-colors duration-75 ${
|
||||
active
|
||||
? 'font-medium text-gray-900 dark:text-white bg-gray-100 dark:bg-white/6'
|
||||
: 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'
|
||||
}`;
|
||||
|
||||
let selectedTab = 'general';
|
||||
|
||||
// Function to handle sideways scrolling
|
||||
const scrollHandler = (event) => {
|
||||
const settingsTabsContainer = document.getElementById('settings-tabs-container');
|
||||
if (settingsTabsContainer) {
|
||||
event.preventDefault(); // Prevent default vertical scrolling
|
||||
settingsTabsContainer.scrollLeft += event.deltaY; // Scroll sideways
|
||||
}
|
||||
};
|
||||
|
||||
const addScrollListener = async () => {
|
||||
await tick();
|
||||
const settingsTabsContainer = document.getElementById('settings-tabs-container');
|
||||
if (settingsTabsContainer) {
|
||||
settingsTabsContainer.addEventListener('wheel', scrollHandler);
|
||||
}
|
||||
};
|
||||
|
||||
const removeScrollListener = async () => {
|
||||
await tick();
|
||||
const settingsTabsContainer = document.getElementById('settings-tabs-container');
|
||||
if (settingsTabsContainer) {
|
||||
settingsTabsContainer.removeEventListener('wheel', scrollHandler);
|
||||
}
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
availableSettings = getAvailableSettings();
|
||||
setFilteredSettings();
|
||||
@@ -588,356 +589,279 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<Modal size="2xl" bind:show>
|
||||
<div class="text-gray-700 dark:text-gray-100 mx-1">
|
||||
<div class=" flex justify-between dark:text-gray-300 px-4 pt-4 pb-1 md:pb-2">
|
||||
<div class=" text-lg font-normal self-center">{$i18n.t('Settings')}</div>
|
||||
<button
|
||||
aria-label={$i18n.t('Close settings modal')}
|
||||
class="self-center"
|
||||
on:click={() => {
|
||||
show = false;
|
||||
}}
|
||||
>
|
||||
<XMark className="w-5 h-5"></XMark>
|
||||
</button>
|
||||
</div>
|
||||
<Modal
|
||||
size="full"
|
||||
className="w-full max-w-3xl lg:max-w-4xl xl:max-w-5xl mx-4 md:mx-0 flex flex-col md:flex-row max-h-[85vh] lg:max-h-[90vh] md:h-[35rem] lg:h-[42rem] xl:h-[46rem] bg-white dark:bg-gray-900 rounded-4xl"
|
||||
bind:show
|
||||
>
|
||||
<nav
|
||||
id="settings-tabs-container"
|
||||
class="shrink-0 min-w-0 md:min-h-0 flex md:block border-b md:border-b-0 md:border-r border-gray-200 dark:border-white/6 md:w-[15rem]"
|
||||
>
|
||||
<button
|
||||
class="flex items-center gap-1.5 h-7 px-2 m-1 md:mb-0 md:w-[calc(100%-0.5rem)] shrink-0 rounded-lg text-xs text-gray-400 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-75"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
show = false;
|
||||
}}
|
||||
>
|
||||
<ChevronLeft className="size-3" strokeWidth="2" />
|
||||
<span>{$i18n.t('Back')}</span>
|
||||
</button>
|
||||
|
||||
<div class="flex flex-col md:flex-row w-full pt-1 pb-4">
|
||||
<div
|
||||
class="tabs flex min-w-0 flex-1 overflow-x-auto md:overflow-x-hidden md:overflow-y-auto md:flex-col p-1 pl-0 md:pl-1 gap-px"
|
||||
>
|
||||
<div
|
||||
role="tablist"
|
||||
id="settings-tabs-container"
|
||||
class="tabs flex flex-row overflow-x-auto gap-2 mx-2.5 md:pr-3.5 md:gap-1 md:flex-col flex-1 md:flex-none md:w-47 md:min-h-[min(42rem,calc(100dvh-10rem))] md:max-h-[min(42rem,calc(100dvh-10rem))] dark:text-gray-200 text-sm text-left mb-1 md:mb-0 -translate-y-1"
|
||||
class="hidden md:flex items-center gap-1.5 h-7 px-2 md:w-full shrink-0 rounded-lg text-xs bg-gray-50/70 dark:bg-white/[0.03] mb-2"
|
||||
>
|
||||
<div
|
||||
class="hidden md:flex w-full rounded-xl px-2.5 gap-1.5 bg-gray-100/80 dark:bg-gray-850/80 backdrop-blur-2xl my-0.75 mb-1.25"
|
||||
id="settings-search"
|
||||
>
|
||||
<div class="self-center rounded-l-xl bg-transparent">
|
||||
<Search
|
||||
className="size-3.5"
|
||||
strokeWidth={($settings?.highContrastMode ?? false) ? '3' : '1.5'}
|
||||
/>
|
||||
</div>
|
||||
<label class="sr-only" for="search-input-settings-modal">{$i18n.t('Search')}</label>
|
||||
<input
|
||||
class={`w-full py-1 text-sm bg-transparent dark:text-gray-300 outline-hidden
|
||||
${($settings?.highContrastMode ?? false) ? 'placeholder-gray-800' : ''}`}
|
||||
bind:value={search}
|
||||
id="search-input-settings-modal"
|
||||
on:input={searchDebounceHandler}
|
||||
placeholder={$i18n.t('Search')}
|
||||
<div class="self-center rounded-l-xl bg-transparent">
|
||||
<Search
|
||||
className="size-3.5"
|
||||
strokeWidth={($settings?.highContrastMode ?? false) ? '3' : '1.5'}
|
||||
/>
|
||||
</div>
|
||||
{#if filteredSettings.length > 0}
|
||||
{#each filteredSettings as tabId (tabId)}
|
||||
{#if tabId === 'general'}
|
||||
<label class="sr-only" for="search-input-settings-modal">{$i18n.t('Search')}</label>
|
||||
<input
|
||||
class={`w-full py-1 text-xs bg-transparent dark:text-gray-300 outline-hidden
|
||||
${($settings?.highContrastMode ?? false) ? 'placeholder-gray-800' : ''}`}
|
||||
bind:value={search}
|
||||
id="search-input-settings-modal"
|
||||
on:input={searchDebounceHandler}
|
||||
placeholder={$i18n.t('Search')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="hidden md:block text-[0.625rem] text-gray-400 dark:text-gray-600 px-2 mt-1.5 mb-0.5"
|
||||
>
|
||||
{$i18n.t('Personal')}
|
||||
</span>
|
||||
|
||||
{#if filteredSettings.length > 0}
|
||||
{#each filteredSettings as tabId (tabId)}
|
||||
{#if tabId === 'general'}
|
||||
<button
|
||||
role="tab"
|
||||
aria-controls="tab-general"
|
||||
aria-selected={selectedTab === 'general'}
|
||||
class={tabButtonClass(selectedTab === 'general')}
|
||||
on:click={() => {
|
||||
selectedTab = 'general';
|
||||
}}
|
||||
>
|
||||
<SettingsAlt className="size-3.5" strokeWidth="2" />
|
||||
<span>{$i18n.t('General')}</span>
|
||||
</button>
|
||||
{:else if tabId === 'interface'}
|
||||
<button
|
||||
role="tab"
|
||||
aria-controls="tab-interface"
|
||||
aria-selected={selectedTab === 'interface'}
|
||||
class={tabButtonClass(selectedTab === 'interface')}
|
||||
on:click={() => {
|
||||
selectedTab = 'interface';
|
||||
}}
|
||||
>
|
||||
<AppNotification className="size-3.5" strokeWidth="2" />
|
||||
<span>{$i18n.t('Interface')}</span>
|
||||
</button>
|
||||
{:else if tabId === 'connections'}
|
||||
{#if $user?.role === 'admin' || ($user?.role === 'user' && $config?.features?.enable_direct_connections)}
|
||||
<button
|
||||
role="tab"
|
||||
aria-controls="tab-general"
|
||||
aria-selected={selectedTab === 'general'}
|
||||
class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
|
||||
${
|
||||
selectedTab === 'general'
|
||||
? ($settings?.highContrastMode ?? false)
|
||||
? 'dark:bg-gray-800 bg-gray-200'
|
||||
: ''
|
||||
: ($settings?.highContrastMode ?? false)
|
||||
? 'hover:bg-gray-200 dark:hover:bg-gray-800'
|
||||
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
|
||||
}`}
|
||||
aria-controls="tab-connections"
|
||||
aria-selected={selectedTab === 'connections'}
|
||||
class={tabButtonClass(selectedTab === 'connections')}
|
||||
on:click={() => {
|
||||
selectedTab = 'general';
|
||||
selectedTab = 'connections';
|
||||
}}
|
||||
>
|
||||
<div class=" self-center mr-2">
|
||||
<SettingsAlt strokeWidth="2" />
|
||||
</div>
|
||||
<div class=" self-center">{$i18n.t('General')}</div>
|
||||
</button>
|
||||
{:else if tabId === 'interface'}
|
||||
<button
|
||||
role="tab"
|
||||
aria-controls="tab-interface"
|
||||
aria-selected={selectedTab === 'interface'}
|
||||
class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
|
||||
${
|
||||
selectedTab === 'interface'
|
||||
? ($settings?.highContrastMode ?? false)
|
||||
? 'dark:bg-gray-800 bg-gray-200'
|
||||
: ''
|
||||
: ($settings?.highContrastMode ?? false)
|
||||
? 'hover:bg-gray-200 dark:hover:bg-gray-800'
|
||||
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
|
||||
}`}
|
||||
on:click={() => {
|
||||
selectedTab = 'interface';
|
||||
}}
|
||||
>
|
||||
<div class=" self-center mr-2">
|
||||
<AppNotification strokeWidth="2" />
|
||||
</div>
|
||||
<div class=" self-center">{$i18n.t('Interface')}</div>
|
||||
</button>
|
||||
{:else if tabId === 'connections'}
|
||||
{#if $user?.role === 'admin' || ($user?.role === 'user' && $config?.features?.enable_direct_connections)}
|
||||
<button
|
||||
role="tab"
|
||||
aria-controls="tab-connections"
|
||||
aria-selected={selectedTab === 'connections'}
|
||||
class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
|
||||
${
|
||||
selectedTab === 'connections'
|
||||
? ($settings?.highContrastMode ?? false)
|
||||
? 'dark:bg-gray-800 bg-gray-200'
|
||||
: ''
|
||||
: ($settings?.highContrastMode ?? false)
|
||||
? 'hover:bg-gray-200 dark:hover:bg-gray-800'
|
||||
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
|
||||
}`}
|
||||
on:click={() => {
|
||||
selectedTab = 'connections';
|
||||
}}
|
||||
>
|
||||
<div class=" self-center mr-2">
|
||||
<Link strokeWidth="2" />
|
||||
</div>
|
||||
<div class=" self-center">{$i18n.t('Connections')}</div>
|
||||
</button>
|
||||
{/if}
|
||||
{:else if tabId === 'tools'}
|
||||
{#if $user?.role === 'admin' || ($user?.role === 'user' && $user?.permissions?.features?.direct_tool_servers)}
|
||||
<button
|
||||
role="tab"
|
||||
aria-controls="tab-tools"
|
||||
aria-selected={selectedTab === 'tools'}
|
||||
class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
|
||||
${
|
||||
selectedTab === 'tools'
|
||||
? ($settings?.highContrastMode ?? false)
|
||||
? 'dark:bg-gray-800 bg-gray-200'
|
||||
: ''
|
||||
: ($settings?.highContrastMode ?? false)
|
||||
? 'hover:bg-gray-200 dark:hover:bg-gray-800'
|
||||
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
|
||||
}`}
|
||||
on:click={() => {
|
||||
selectedTab = 'tools';
|
||||
}}
|
||||
>
|
||||
<div class=" self-center mr-2">
|
||||
<WrenchAlt strokeWidth="2" />
|
||||
</div>
|
||||
<div class=" self-center">{$i18n.t('Integrations')}</div>
|
||||
</button>
|
||||
{/if}
|
||||
{:else if tabId === 'personalization'}
|
||||
<button
|
||||
role="tab"
|
||||
aria-controls="tab-personalization"
|
||||
aria-selected={selectedTab === 'personalization'}
|
||||
class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
|
||||
${
|
||||
selectedTab === 'personalization'
|
||||
? ($settings?.highContrastMode ?? false)
|
||||
? 'dark:bg-gray-800 bg-gray-200'
|
||||
: ''
|
||||
: ($settings?.highContrastMode ?? false)
|
||||
? 'hover:bg-gray-200 dark:hover:bg-gray-800'
|
||||
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
|
||||
}`}
|
||||
on:click={() => {
|
||||
selectedTab = 'personalization';
|
||||
}}
|
||||
>
|
||||
<div class=" self-center mr-2">
|
||||
<Face strokeWidth="2" />
|
||||
</div>
|
||||
<div class=" self-center">{$i18n.t('Personalization')}</div>
|
||||
</button>
|
||||
{:else if tabId === 'audio'}
|
||||
<button
|
||||
role="tab"
|
||||
aria-controls="tab-audio"
|
||||
aria-selected={selectedTab === 'audio'}
|
||||
class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
|
||||
${
|
||||
selectedTab === 'audio'
|
||||
? ($settings?.highContrastMode ?? false)
|
||||
? 'dark:bg-gray-800 bg-gray-200'
|
||||
: ''
|
||||
: ($settings?.highContrastMode ?? false)
|
||||
? 'hover:bg-gray-200 dark:hover:bg-gray-800'
|
||||
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
|
||||
}`}
|
||||
on:click={() => {
|
||||
selectedTab = 'audio';
|
||||
}}
|
||||
>
|
||||
<div class=" self-center mr-2">
|
||||
<SoundHigh strokeWidth="2" />
|
||||
</div>
|
||||
<div class=" self-center">{$i18n.t('Audio')}</div>
|
||||
</button>
|
||||
{:else if tabId === 'data_controls'}
|
||||
<button
|
||||
role="tab"
|
||||
aria-controls="tab-data-controls"
|
||||
aria-selected={selectedTab === 'data_controls'}
|
||||
class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
|
||||
${
|
||||
selectedTab === 'data_controls'
|
||||
? ($settings?.highContrastMode ?? false)
|
||||
? 'dark:bg-gray-800 bg-gray-200'
|
||||
: ''
|
||||
: ($settings?.highContrastMode ?? false)
|
||||
? 'hover:bg-gray-200 dark:hover:bg-gray-800'
|
||||
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
|
||||
}`}
|
||||
on:click={() => {
|
||||
selectedTab = 'data_controls';
|
||||
}}
|
||||
>
|
||||
<div class=" self-center mr-2">
|
||||
<DatabaseSettings strokeWidth="2" />
|
||||
</div>
|
||||
<div class=" self-center">{$i18n.t('Data Controls')}</div>
|
||||
</button>
|
||||
{:else if tabId === 'account'}
|
||||
<button
|
||||
role="tab"
|
||||
aria-controls="tab-account"
|
||||
aria-selected={selectedTab === 'account'}
|
||||
class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
|
||||
${
|
||||
selectedTab === 'account'
|
||||
? ($settings?.highContrastMode ?? false)
|
||||
? 'dark:bg-gray-800 bg-gray-200'
|
||||
: ''
|
||||
: ($settings?.highContrastMode ?? false)
|
||||
? 'hover:bg-gray-200 dark:hover:bg-gray-800'
|
||||
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
|
||||
}`}
|
||||
on:click={() => {
|
||||
selectedTab = 'account';
|
||||
}}
|
||||
>
|
||||
<div class=" self-center mr-2">
|
||||
<UserCircle strokeWidth="2" />
|
||||
</div>
|
||||
<div class=" self-center">{$i18n.t('Account')}</div>
|
||||
</button>
|
||||
{:else if tabId === 'about'}
|
||||
<button
|
||||
role="tab"
|
||||
aria-controls="tab-about"
|
||||
aria-selected={selectedTab === 'about'}
|
||||
class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
|
||||
${
|
||||
selectedTab === 'about'
|
||||
? ($settings?.highContrastMode ?? false)
|
||||
? 'dark:bg-gray-800 bg-gray-200'
|
||||
: ''
|
||||
: ($settings?.highContrastMode ?? false)
|
||||
? 'hover:bg-gray-200 dark:hover:bg-gray-800'
|
||||
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
|
||||
}`}
|
||||
on:click={() => {
|
||||
selectedTab = 'about';
|
||||
}}
|
||||
>
|
||||
<div class=" self-center mr-2">
|
||||
<InfoCircle strokeWidth="2" />
|
||||
</div>
|
||||
<div class=" self-center">{$i18n.t('About')}</div>
|
||||
<Link className="size-3.5" strokeWidth="2" />
|
||||
<span>{$i18n.t('Connections')}</span>
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="text-center text-gray-500 mt-4">
|
||||
{$i18n.t('No results found')}
|
||||
</div>
|
||||
{/if}
|
||||
{#if $user?.role === 'admin'}
|
||||
<a
|
||||
href="/admin/settings"
|
||||
draggable="false"
|
||||
class="px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none md:mt-auto flex select-none text-left transition {$settings?.highContrastMode
|
||||
? 'hover:bg-gray-200 dark:hover:bg-gray-800'
|
||||
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
|
||||
on:click={async (e) => {
|
||||
e.preventDefault();
|
||||
await goto('/admin/settings');
|
||||
show = false;
|
||||
}}
|
||||
>
|
||||
<div class=" self-center mr-2">
|
||||
<UserBadgeCheck strokeWidth="2" />
|
||||
</div>
|
||||
<div class=" self-center">{$i18n.t('Admin Settings')}</div>
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
<div
|
||||
class="flex-1 px-3.5 md:pl-0 md:pr-4.5 md:min-h-[min(42rem,calc(100dvh-10rem))] max-h-[min(42rem,calc(100dvh-10rem))] overflow-y-auto"
|
||||
>
|
||||
{#if selectedTab === 'general'}
|
||||
<General
|
||||
{getModels}
|
||||
{saveSettings}
|
||||
on:save={() => {
|
||||
toast.success($i18n.t('Settings saved successfully!'));
|
||||
}}
|
||||
/>
|
||||
{:else if selectedTab === 'interface'}
|
||||
<Interface
|
||||
{saveSettings}
|
||||
on:save={() => {
|
||||
toast.success($i18n.t('Settings saved successfully!'));
|
||||
}}
|
||||
/>
|
||||
{:else if selectedTab === 'connections'}
|
||||
<Connections
|
||||
saveSettings={async (updated) => {
|
||||
await saveSettings(updated);
|
||||
toast.success($i18n.t('Settings saved successfully!'));
|
||||
}}
|
||||
/>
|
||||
{:else if selectedTab === 'tools'}
|
||||
<Integrations
|
||||
saveSettings={async (updated) => {
|
||||
await saveSettings(updated);
|
||||
toast.success($i18n.t('Settings saved successfully!'));
|
||||
}}
|
||||
/>
|
||||
{:else if selectedTab === 'personalization'}
|
||||
<Personalization
|
||||
{saveSettings}
|
||||
on:save={() => {
|
||||
toast.success($i18n.t('Settings saved successfully!'));
|
||||
}}
|
||||
/>
|
||||
{:else if selectedTab === 'audio'}
|
||||
<Audio
|
||||
{saveSettings}
|
||||
on:save={() => {
|
||||
toast.success($i18n.t('Settings saved successfully!'));
|
||||
}}
|
||||
/>
|
||||
{:else if selectedTab === 'data_controls'}
|
||||
<DataControls {saveSettings} />
|
||||
{:else if selectedTab === 'account'}
|
||||
<Account
|
||||
{saveSettings}
|
||||
saveHandler={() => {
|
||||
toast.success($i18n.t('Settings saved successfully!'));
|
||||
}}
|
||||
/>
|
||||
{:else if selectedTab === 'about'}
|
||||
<About />
|
||||
{/if}
|
||||
</div>
|
||||
{:else if tabId === 'tools'}
|
||||
{#if $user?.role === 'admin' || ($user?.role === 'user' && $user?.permissions?.features?.direct_tool_servers)}
|
||||
<button
|
||||
role="tab"
|
||||
aria-controls="tab-tools"
|
||||
aria-selected={selectedTab === 'tools'}
|
||||
class={tabButtonClass(selectedTab === 'tools')}
|
||||
on:click={() => {
|
||||
selectedTab = 'tools';
|
||||
}}
|
||||
>
|
||||
<WrenchAlt className="size-3.5" strokeWidth="2" />
|
||||
<span>{$i18n.t('Integrations')}</span>
|
||||
</button>
|
||||
{/if}
|
||||
{:else if tabId === 'personalization'}
|
||||
<button
|
||||
role="tab"
|
||||
aria-controls="tab-personalization"
|
||||
aria-selected={selectedTab === 'personalization'}
|
||||
class={tabButtonClass(selectedTab === 'personalization')}
|
||||
on:click={() => {
|
||||
selectedTab = 'personalization';
|
||||
}}
|
||||
>
|
||||
<Face className="size-3.5" strokeWidth="2" />
|
||||
<span>{$i18n.t('Personalization')}</span>
|
||||
</button>
|
||||
{:else if tabId === 'audio'}
|
||||
<button
|
||||
role="tab"
|
||||
aria-controls="tab-audio"
|
||||
aria-selected={selectedTab === 'audio'}
|
||||
class={tabButtonClass(selectedTab === 'audio')}
|
||||
on:click={() => {
|
||||
selectedTab = 'audio';
|
||||
}}
|
||||
>
|
||||
<SoundHigh className="size-3.5" strokeWidth="2" />
|
||||
<span>{$i18n.t('Audio')}</span>
|
||||
</button>
|
||||
{:else if tabId === 'data_controls'}
|
||||
<button
|
||||
role="tab"
|
||||
aria-controls="tab-data-controls"
|
||||
aria-selected={selectedTab === 'data_controls'}
|
||||
class={tabButtonClass(selectedTab === 'data_controls')}
|
||||
on:click={() => {
|
||||
selectedTab = 'data_controls';
|
||||
}}
|
||||
>
|
||||
<DatabaseSettings className="size-3.5" strokeWidth="2" />
|
||||
<span>{$i18n.t('Data Controls')}</span>
|
||||
</button>
|
||||
{:else if tabId === 'archived_chats'}
|
||||
<button
|
||||
role="tab"
|
||||
aria-controls="tab-archived-chats"
|
||||
aria-selected={selectedTab === 'archived_chats'}
|
||||
class={tabButtonClass(selectedTab === 'archived_chats')}
|
||||
on:click={() => {
|
||||
selectedTab = 'archived_chats';
|
||||
}}
|
||||
>
|
||||
<ArchiveBox className="size-3.5" strokeWidth="2" />
|
||||
<span>{$i18n.t('Archived Chats')}</span>
|
||||
</button>
|
||||
{:else if tabId === 'account'}
|
||||
<button
|
||||
role="tab"
|
||||
aria-controls="tab-account"
|
||||
aria-selected={selectedTab === 'account'}
|
||||
class={tabButtonClass(selectedTab === 'account')}
|
||||
on:click={() => {
|
||||
selectedTab = 'account';
|
||||
}}
|
||||
>
|
||||
<UserCircle className="size-3.5" strokeWidth="2" />
|
||||
<span>{$i18n.t('Account')}</span>
|
||||
</button>
|
||||
{:else if tabId === 'about'}
|
||||
<button
|
||||
role="tab"
|
||||
aria-controls="tab-about"
|
||||
aria-selected={selectedTab === 'about'}
|
||||
class={tabButtonClass(selectedTab === 'about')}
|
||||
on:click={() => {
|
||||
selectedTab = 'about';
|
||||
}}
|
||||
>
|
||||
<InfoCircle className="size-3.5" strokeWidth="2" />
|
||||
<span>{$i18n.t('About')}</span>
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="text-center text-gray-500 mt-4">
|
||||
{$i18n.t('No results found')}
|
||||
</div>
|
||||
{/if}
|
||||
{#if $user?.role === 'admin'}
|
||||
<span
|
||||
class="hidden md:block text-[0.625rem] text-gray-400 dark:text-gray-600 px-2 mt-2 mb-0.5"
|
||||
>
|
||||
{$i18n.t('Admin')}
|
||||
</span>
|
||||
<a
|
||||
href="/admin/settings"
|
||||
draggable="false"
|
||||
class="flex items-center gap-1.5 h-7 px-2 md:w-full shrink-0 rounded-lg text-xs text-left transition-colors duration-75 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 select-none"
|
||||
on:click={async (e) => {
|
||||
e.preventDefault();
|
||||
await goto('/admin/settings');
|
||||
show = false;
|
||||
}}
|
||||
>
|
||||
<UserBadgeCheck className="size-3.5" strokeWidth="2" />
|
||||
<span>{$i18n.t('Admin Settings')}</span>
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="flex-1 overflow-y-auto scrollbar-none min-h-0 p-4 md:px-5">
|
||||
{#if selectedTab === 'general'}
|
||||
<General
|
||||
{getModels}
|
||||
{saveSettings}
|
||||
on:save={() => {
|
||||
toast.success($i18n.t('Settings saved successfully!'));
|
||||
}}
|
||||
/>
|
||||
{:else if selectedTab === 'interface'}
|
||||
<Interface
|
||||
{saveSettings}
|
||||
on:save={() => {
|
||||
toast.success($i18n.t('Settings saved successfully!'));
|
||||
}}
|
||||
/>
|
||||
{:else if selectedTab === 'connections'}
|
||||
<Connections
|
||||
saveSettings={async (updated: Record<string, any>) => {
|
||||
await saveSettings(updated);
|
||||
toast.success($i18n.t('Settings saved successfully!'));
|
||||
}}
|
||||
/>
|
||||
{:else if selectedTab === 'tools'}
|
||||
<Integrations
|
||||
saveSettings={async (updated: Record<string, any>) => {
|
||||
await saveSettings(updated);
|
||||
toast.success($i18n.t('Settings saved successfully!'));
|
||||
}}
|
||||
/>
|
||||
{:else if selectedTab === 'personalization'}
|
||||
<Personalization
|
||||
{saveSettings}
|
||||
on:save={() => {
|
||||
toast.success($i18n.t('Settings saved successfully!'));
|
||||
}}
|
||||
/>
|
||||
{:else if selectedTab === 'audio'}
|
||||
<Audio
|
||||
{saveSettings}
|
||||
on:save={() => {
|
||||
toast.success($i18n.t('Settings saved successfully!'));
|
||||
}}
|
||||
/>
|
||||
{:else if selectedTab === 'data_controls'}
|
||||
<DataControls {saveSettings} />
|
||||
{:else if selectedTab === 'archived_chats'}
|
||||
<ArchivedChats />
|
||||
{:else if selectedTab === 'account'}
|
||||
<Account
|
||||
{saveSettings}
|
||||
saveHandler={() => {
|
||||
toast.success($i18n.t('Settings saved successfully!'));
|
||||
}}
|
||||
/>
|
||||
{:else if selectedTab === 'about'}
|
||||
<About />
|
||||
{/if}
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
|
||||
@@ -15,7 +15,6 @@
|
||||
showSidebar,
|
||||
showSearch,
|
||||
mobile,
|
||||
showArchivedChats,
|
||||
pinnedChats,
|
||||
pinnedNotes,
|
||||
temporaryChatEnabled,
|
||||
@@ -57,7 +56,6 @@
|
||||
import { createNoteHandler } from '$lib/components/notes/utils';
|
||||
import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
|
||||
|
||||
import ArchivedChatsModal from './ArchivedChatsModal.svelte';
|
||||
import UserMenu from './Sidebar/UserMenu.svelte';
|
||||
import ChatItem from './Sidebar/ChatItem.svelte';
|
||||
import Spinner from '../common/Spinner.svelte';
|
||||
@@ -704,19 +702,6 @@
|
||||
const isWindows = /Windows/i.test(navigator.userAgent);
|
||||
</script>
|
||||
|
||||
<ArchivedChatsModal
|
||||
bind:show={$showArchivedChats}
|
||||
onUpdate={async () => {
|
||||
await initChatList();
|
||||
}}
|
||||
onDelete={(id) => {
|
||||
if ($chatId === id) {
|
||||
goto('/');
|
||||
chatId.set('');
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<ChannelModal
|
||||
bind:show={showCreateChannel}
|
||||
onSubmit={async (payload: any) => {
|
||||
@@ -971,7 +956,7 @@
|
||||
showActiveUsers={false}
|
||||
on:show={(e) => {
|
||||
if (e.detail === 'archived-chat') {
|
||||
showArchivedChats.set(true);
|
||||
showSettings.set('archived_chats');
|
||||
}
|
||||
}}
|
||||
>
|
||||
@@ -1050,7 +1035,7 @@
|
||||
<a href="/" class="flex flex-1 px-0.5" on:click={newChatHandler}>
|
||||
<div
|
||||
id="sidebar-webui-name"
|
||||
class=" self-center font-normal text-gray-850 dark:text-white "
|
||||
class=" self-center font-normal text-gray-850 dark:text-white"
|
||||
>
|
||||
{$WEBUI_NAME}
|
||||
</div>
|
||||
@@ -1106,7 +1091,7 @@
|
||||
</div>
|
||||
|
||||
<div class="flex flex-1 self-center translate-y-[0.5px]">
|
||||
<div class=" self-center text-sm ">{$i18n.t('New Chat')}</div>
|
||||
<div class=" self-center text-sm">{$i18n.t('New Chat')}</div>
|
||||
</div>
|
||||
|
||||
<HotkeyHint name="newChat" className=" group-hover:visible invisible" />
|
||||
@@ -1128,7 +1113,7 @@
|
||||
</div>
|
||||
|
||||
<div class="flex flex-1 self-center translate-y-[0.5px]">
|
||||
<div class=" self-center text-sm ">{$i18n.t('Search')}</div>
|
||||
<div class=" self-center text-sm">{$i18n.t('Search')}</div>
|
||||
</div>
|
||||
<HotkeyHint name="search" className=" group-hover:visible invisible" />
|
||||
</button>
|
||||
@@ -1204,7 +1189,7 @@
|
||||
</div>
|
||||
|
||||
<div class="flex self-center translate-y-[0.5px]">
|
||||
<div class=" self-center text-sm ">{$i18n.t(meta.label)}</div>
|
||||
<div class=" self-center text-sm">{$i18n.t(meta.label)}</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@@ -1585,7 +1570,7 @@
|
||||
<div
|
||||
class=" sidebar-bg-gradient-to-t bg-linear-to-t from-gray-50 dark:from-gray-950 to-transparent from-50% pointer-events-none absolute inset-0 -z-10 -mt-6"
|
||||
></div>
|
||||
<div class="flex flex-col ">
|
||||
<div class="flex flex-col">
|
||||
{#if $user !== undefined && $user !== null}
|
||||
<UserMenu
|
||||
role={$user?.role}
|
||||
@@ -1594,7 +1579,7 @@
|
||||
className="w-[calc(var(--sidebar-width)-1rem)]"
|
||||
on:show={(e) => {
|
||||
if (e.detail === 'archived-chat') {
|
||||
showArchivedChats.set(true);
|
||||
showSettings.set('archived_chats');
|
||||
}
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -91,9 +91,8 @@ export const sidebarWidth = writable(245);
|
||||
|
||||
export const showSidebar = writable(false);
|
||||
export const showSearch = writable(false);
|
||||
export const showSettings = writable(false);
|
||||
export const showSettings: Writable<boolean | string> = writable(false);
|
||||
export const showShortcuts = writable(false);
|
||||
export const showArchivedChats = writable(false);
|
||||
export const showChangelog = writable(false);
|
||||
|
||||
export const showControls = writable(false);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { onMount, getContext } from 'svelte';
|
||||
import { WEBUI_NAME, showSidebar, functions, config, user, showArchivedChats } from '$lib/stores';
|
||||
import { WEBUI_NAME, config, user } from '$lib/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
|
||||
Reference in New Issue
Block a user