|
<script lang="ts"> |
|
import { DropdownMenu } from 'bits-ui'; |
|
import { flyAndScale } from '$lib/utils/transitions'; |
|
import { getContext, createEventDispatcher } from 'svelte'; |
|
|
|
import fileSaver from 'file-saver'; |
|
const { saveAs } = fileSaver; |
|
|
|
const dispatch = createEventDispatcher(); |
|
|
|
import Dropdown from '$lib/components/common/Dropdown.svelte'; |
|
import GarbageBin from '$lib/components/icons/GarbageBin.svelte'; |
|
import Pencil from '$lib/components/icons/Pencil.svelte'; |
|
import Tooltip from '$lib/components/common/Tooltip.svelte'; |
|
import Tags from '$lib/components/chat/Tags.svelte'; |
|
import Share from '$lib/components/icons/Share.svelte'; |
|
import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte'; |
|
import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte'; |
|
import Bookmark from '$lib/components/icons/Bookmark.svelte'; |
|
import BookmarkSlash from '$lib/components/icons/BookmarkSlash.svelte'; |
|
import { |
|
getChatById, |
|
getChatPinnedStatusById, |
|
toggleChatPinnedStatusById |
|
} from '$lib/apis/chats'; |
|
import { chats } from '$lib/stores'; |
|
import { createMessagesList } from '$lib/utils'; |
|
import { downloadChatAsPDF } from '$lib/apis/utils'; |
|
import Download from '$lib/components/icons/Download.svelte'; |
|
|
|
const i18n = getContext('i18n'); |
|
|
|
export let shareHandler: Function; |
|
export let cloneChatHandler: Function; |
|
export let archiveChatHandler: Function; |
|
export let renameHandler: Function; |
|
export let deleteHandler: Function; |
|
export let onClose: Function; |
|
|
|
export let chatId = ''; |
|
|
|
let show = false; |
|
let pinned = false; |
|
|
|
const pinHandler = async () => { |
|
await toggleChatPinnedStatusById(localStorage.token, chatId); |
|
dispatch('change'); |
|
}; |
|
|
|
const checkPinned = async () => { |
|
pinned = await getChatPinnedStatusById(localStorage.token, chatId); |
|
}; |
|
|
|
const getChatAsText = async (chat) => { |
|
const history = chat.chat.history; |
|
const messages = createMessagesList(history, history.currentId); |
|
const chatText = messages.reduce((a, message, i, arr) => { |
|
return `${a}### ${message.role.toUpperCase()}\n${message.content}\n\n`; |
|
}, ''); |
|
|
|
return chatText.trim(); |
|
}; |
|
|
|
const downloadTxt = async () => { |
|
const chat = await getChatById(localStorage.token, chatId); |
|
if (!chat) { |
|
return; |
|
} |
|
|
|
const chatText = await getChatAsText(chat); |
|
let blob = new Blob([chatText], { |
|
type: 'text/plain' |
|
}); |
|
|
|
saveAs(blob, `chat-${chat.chat.title}.txt`); |
|
}; |
|
|
|
const downloadPdf = async () => { |
|
const chat = await getChatById(localStorage.token, chatId); |
|
if (!chat) { |
|
return; |
|
} |
|
|
|
const history = chat.chat.history; |
|
const messages = createMessagesList(history, history.currentId); |
|
const blob = await downloadChatAsPDF(chat.chat.title, messages); |
|
|
|
|
|
const url = window.URL.createObjectURL(blob); |
|
|
|
|
|
const a = document.createElement('a'); |
|
a.href = url; |
|
a.download = `chat-${chat.chat.title}.pdf`; |
|
|
|
// Append the link to the body and click it programmatically |
|
document.body.appendChild(a); |
|
a.click(); |
|
|
|
// Remove the link from the body |
|
document.body.removeChild(a); |
|
|
|
// Revoke the URL to release memory |
|
window.URL.revokeObjectURL(url); |
|
}; |
|
|
|
const downloadJSONExport = async () => { |
|
const chat = await getChatById(localStorage.token, chatId); |
|
|
|
if (chat) { |
|
let blob = new Blob([JSON.stringify([chat])], { |
|
type: 'application/json' |
|
}); |
|
saveAs(blob, `chat-export-${Date.now()}.json`); |
|
} |
|
}; |
|
|
|
$: if (show) { |
|
checkPinned(); |
|
} |
|
</script> |
|
|
|
<Dropdown |
|
bind:show |
|
on:change={(e) => { |
|
if (e.detail === false) { |
|
onClose(); |
|
} |
|
}} |
|
> |
|
<Tooltip content={$i18n.t('More')}> |
|
<slot /> |
|
</Tooltip> |
|
|
|
<div slot="content"> |
|
<DropdownMenu.Content |
|
class="w-full max-w-[200px] rounded-xl px-1 py-1.5 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg" |
|
sideOffset={-2} |
|
side="bottom" |
|
align="start" |
|
transition={flyAndScale} |
|
> |
|
<DropdownMenu.Item |
|
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" |
|
on:click={() => { |
|
pinHandler(); |
|
}} |
|
> |
|
{#if pinned} |
|
<BookmarkSlash strokeWidth="2" /> |
|
<div class="flex items-center">{$i18n.t('Unpin')}</div> |
|
{:else} |
|
<Bookmark strokeWidth="2" /> |
|
<div class="flex items-center">{$i18n.t('Pin')}</div> |
|
{/if} |
|
</DropdownMenu.Item> |
|
|
|
<DropdownMenu.Item |
|
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" |
|
on:click={() => { |
|
renameHandler(); |
|
}} |
|
> |
|
<Pencil strokeWidth="2" /> |
|
<div class="flex items-center">{$i18n.t('Rename')}</div> |
|
</DropdownMenu.Item> |
|
|
|
<DropdownMenu.Item |
|
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" |
|
on:click={() => { |
|
cloneChatHandler(); |
|
}} |
|
> |
|
<DocumentDuplicate strokeWidth="2" /> |
|
<div class="flex items-center">{$i18n.t('Clone')}</div> |
|
</DropdownMenu.Item> |
|
|
|
<DropdownMenu.Item |
|
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" |
|
on:click={() => { |
|
archiveChatHandler(); |
|
}} |
|
> |
|
<ArchiveBox strokeWidth="2" /> |
|
<div class="flex items-center">{$i18n.t('Archive')}</div> |
|
</DropdownMenu.Item> |
|
|
|
<DropdownMenu.Item |
|
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" |
|
on:click={() => { |
|
shareHandler(); |
|
}} |
|
> |
|
<Share /> |
|
<div class="flex items-center">{$i18n.t('Share')}</div> |
|
</DropdownMenu.Item> |
|
|
|
<DropdownMenu.Sub> |
|
<DropdownMenu.SubTrigger |
|
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" |
|
> |
|
<Download strokeWidth="2" /> |
|
|
|
<div class="flex items-center">{$i18n.t('Download')}</div> |
|
</DropdownMenu.SubTrigger> |
|
<DropdownMenu.SubContent |
|
class="w-full rounded-xl px-1 py-1.5 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg" |
|
transition={flyAndScale} |
|
sideOffset={8} |
|
> |
|
<DropdownMenu.Item |
|
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" |
|
on:click={() => { |
|
downloadJSONExport(); |
|
}} |
|
> |
|
<div class="flex items-center line-clamp-1">{$i18n.t('Export chat (.json)')}</div> |
|
</DropdownMenu.Item> |
|
<DropdownMenu.Item |
|
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" |
|
on:click={() => { |
|
downloadTxt(); |
|
}} |
|
> |
|
<div class="flex items-center line-clamp-1">{$i18n.t('Plain text (.txt)')}</div> |
|
</DropdownMenu.Item> |
|
|
|
<DropdownMenu.Item |
|
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" |
|
on:click={() => { |
|
downloadPdf(); |
|
}} |
|
> |
|
<div class="flex items-center line-clamp-1">{$i18n.t('PDF document (.pdf)')}</div> |
|
</DropdownMenu.Item> |
|
</DropdownMenu.SubContent> |
|
</DropdownMenu.Sub> |
|
<DropdownMenu.Item |
|
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" |
|
on:click={() => { |
|
deleteHandler(); |
|
}} |
|
> |
|
<GarbageBin strokeWidth="2" /> |
|
<div class="flex items-center">{$i18n.t('Delete')}</div> |
|
</DropdownMenu.Item> |
|
|
|
<hr class="border-gray-50 dark:border-gray-850 my-0.5" /> |
|
|
|
<div class="flex p-1"> |
|
<Tags |
|
{chatId} |
|
on:add={(e) => { |
|
dispatch('tag', { |
|
type: 'add', |
|
name: e.detail.name |
|
}); |
|
|
|
show = false; |
|
}} |
|
on:delete={(e) => { |
|
dispatch('tag', { |
|
type: 'delete', |
|
name: e.detail.name |
|
}); |
|
|
|
show = false; |
|
}} |
|
on:close={() => { |
|
show = false; |
|
onClose(); |
|
}} |
|
/> |
|
</div> |
|
</DropdownMenu.Content> |
|
</div> |
|
</Dropdown> |
|
|
