|
<script lang="ts"> |
|
import fileSaver from 'file-saver'; |
|
const { saveAs } = fileSaver; |
|
|
|
import { chats, user, settings, scrollPaginationEnabled, currentChatPage } from '$lib/stores'; |
|
|
|
import { |
|
archiveAllChats, |
|
createNewChat, |
|
deleteAllChats, |
|
getAllChats, |
|
getAllUserChats, |
|
getChatList |
|
} from '$lib/apis/chats'; |
|
import { getImportOrigin, convertOpenAIChats } from '$lib/utils'; |
|
import { onMount, getContext } from 'svelte'; |
|
import { goto } from '$app/navigation'; |
|
import { toast } from 'svelte-sonner'; |
|
|
|
const i18n = getContext('i18n'); |
|
|
|
export let saveSettings: Function; |
|
|
|
|
|
let importFiles; |
|
|
|
let showArchiveConfirm = false; |
|
let showDeleteConfirm = false; |
|
|
|
let chatImportInputElement: HTMLInputElement; |
|
|
|
$: if (importFiles) { |
|
console.log(importFiles); |
|
|
|
let reader = new FileReader(); |
|
reader.onload = (event) => { |
|
let chats = JSON.parse(event.target.result); |
|
console.log(chats); |
|
if (getImportOrigin(chats) == 'openai') { |
|
try { |
|
chats = convertOpenAIChats(chats); |
|
} catch (error) { |
|
console.log('Unable to import chats:', error); |
|
} |
|
} |
|
importChats(chats); |
|
}; |
|
|
|
if (importFiles.length > 0) { |
|
reader.readAsText(importFiles[0]); |
|
} |
|
} |
|
|
|
const importChats = async (_chats) => { |
|
for (const chat of _chats) { |
|
console.log(chat); |
|
|
|
if (chat.chat) { |
|
await createNewChat(localStorage.token, chat.chat); |
|
} else { |
|
await createNewChat(localStorage.token, chat); |
|
} |
|
} |
|
|
|
currentChatPage.set(1); |
|
await chats.set(await getChatList(localStorage.token, $currentChatPage)); |
|
scrollPaginationEnabled.set(true); |
|
}; |
|
|
|
const exportChats = async () => { |
|
let blob = new Blob([JSON.stringify(await getAllChats(localStorage.token))], { |
|
type: 'application/json' |
|
}); |
|
saveAs(blob, `chat-export-${Date.now()}.json`); |
|
}; |
|
|
|
const archiveAllChatsHandler = async () => { |
|
await goto('/'); |
|
await archiveAllChats(localStorage.token).catch((error) => { |
|
toast.error(error); |
|
}); |
|
|
|
currentChatPage.set(1); |
|
await chats.set(await getChatList(localStorage.token, $currentChatPage)); |
|
scrollPaginationEnabled.set(true); |
|
}; |
|
|
|
const deleteAllChatsHandler = async () => { |
|
await goto('/'); |
|
await deleteAllChats(localStorage.token).catch((error) => { |
|
toast.error(error); |
|
}); |
|
|
|
currentChatPage.set(1); |
|
await chats.set(await getChatList(localStorage.token, $currentChatPage)); |
|
scrollPaginationEnabled.set(true); |
|
}; |
|
</script> |
|
|
|
<div class="flex flex-col h-full justify-between space-y-3 text-sm max-h-[22rem]"> |
|
<div class=" space-y-2"> |
|
<div class="flex flex-col"> |
|
<input |
|
id="chat-import-input" |
|
bind:this={chatImportInputElement} |
|
bind:files={importFiles} |
|
type="file" |
|
accept=".json" |
|
hidden |
|
/> |
|
<button |
|
class=" flex rounded-md py-2 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition" |
|
on:click={() => { |
|
chatImportInputElement.click(); |
|
}} |
|
> |
|
<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 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 class=" self-center text-sm font-medium">{$i18n.t('Import 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" |
|
on:click={() => { |
|
exportChats(); |
|
}} |
|
> |
|
<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 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 class=" self-center text-sm font-medium">{$i18n.t('Export Chats')}</div> |
|
</button> |
|
</div> |
|
|
|
<hr class=" dark:border-gray-850" /> |
|
|
|
<div class="flex flex-col"> |
|
{#if showArchiveConfirm} |
|
<div class="flex justify-between rounded-md items-center py-2 px-3.5 w-full transition"> |
|
<div class="flex items-center space-x-3"> |
|
<svg |
|
xmlns="http://www.w3.org/2000/svg" |
|
viewBox="0 0 16 16" |
|
fill="currentColor" |
|
class="w-4 h-4" |
|
> |
|
<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 |
|
fill-rule="evenodd" |
|
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> |
|
{:else} |
|
<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 class="flex justify-between rounded-md items-center py-2 px-3.5 w-full transition"> |
|
<div class="flex items-center space-x-3"> |
|
<svg |
|
xmlns="http://www.w3.org/2000/svg" |
|
viewBox="0 0 16 16" |
|
fill="currentColor" |
|
class="w-4 h-4" |
|
> |
|
<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 |
|
fill-rule="evenodd" |
|
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> |
|
{:else} |
|
<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> |
|
|
