File size: 2,581 Bytes
cfb0fa4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | <script lang="ts">
import { getContext, onMount } from 'svelte';
import type { Writable } from 'svelte/store';
const i18n: Writable<any> = getContext('i18n');
import { fade } from 'svelte/transition';
import ChatList from './ChatList.svelte';
import FolderKnowledge from './FolderKnowledge.svelte';
import Spinner from '$lib/components/common/Spinner.svelte';
import { getChatListByFolderId } from '$lib/apis/chats';
export let folder: any = null;
let selectedTab = 'chats';
let page = 1;
let chats: any[] | null = null;
let chatListLoading = false;
let allChatsLoaded = false;
const loadChats = async () => {
chatListLoading = true;
page += 1;
let newChatList: any[] = [];
newChatList = await getChatListByFolderId(localStorage.token, folder.id, page).catch(
(error) => {
console.error(error);
return [];
}
);
// once the bottom of the list has been reached (no results) there is no need to continue querying
allChatsLoaded = newChatList.length === 0;
chats = [...(chats || []), ...(newChatList || [])];
chatListLoading = false;
};
const setChatList = async () => {
chats = null;
page = 1;
allChatsLoaded = false;
chatListLoading = false;
if (folder && folder.id) {
const res = await getChatListByFolderId(localStorage.token, folder.id, page);
if (res) {
chats = res;
} else {
chats = [];
}
} else {
chats = [];
}
};
$: if (folder) {
setChatList();
}
</script>
<div>
<!-- <div class="mb-1">
<div
class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent py-1 touch-auto pointer-events-auto"
>
<button
class="min-w-fit p-1.5 {selectedTab === 'knowledge'
? ''
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
type="button"
on:click={() => {
selectedTab = 'knowledge';
}}>{$i18n.t('Knowledge')}</button
>
<button
class="min-w-fit p-1.5 {selectedTab === 'chats'
? ''
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
type="button"
on:click={() => {
selectedTab = 'chats';
}}
>
{$i18n.t('Chats')}
</button>
</div>
</div> -->
<div class="">
{#if selectedTab === 'knowledge'}
<FolderKnowledge />
{:else if selectedTab === 'chats'}
{#if chats !== null}
<ChatList {chats} {chatListLoading} {allChatsLoaded} loadHandler={loadChats} />
{:else}
<div class="py-10">
<Spinner />
</div>
{/if}
{/if}
</div>
</div>
|