enh: chat copy button

This commit is contained in:
Timothy J. Baek 2024-09-17 21:32:39 +02:00
parent a0d24105fc
commit bb087a5989
1 changed files with 38 additions and 11 deletions

View File

@ -5,13 +5,17 @@
import fileSaver from 'file-saver'; import fileSaver from 'file-saver';
const { saveAs } = fileSaver; const { saveAs } = fileSaver;
import { downloadChatAsPDF } from '$lib/apis/utils';
import { copyToClipboard } from '$lib/utils';
import { showSettings } from '$lib/stores'; import { showSettings } from '$lib/stores';
import { flyAndScale } from '$lib/utils/transitions'; import { flyAndScale } from '$lib/utils/transitions';
import Dropdown from '$lib/components/common/Dropdown.svelte'; import Dropdown from '$lib/components/common/Dropdown.svelte';
import Tags from '$lib/components/chat/Tags.svelte'; import Tags from '$lib/components/chat/Tags.svelte';
import Map from '$lib/components/icons/Map.svelte';
import { downloadChatAsPDF } from '$lib/apis/utils'; import { get } from 'svelte/store';
import Clipboard from '$lib/components/icons/Clipboard.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@ -24,14 +28,18 @@
export let chat; export let chat;
export let onClose: Function = () => {}; export let onClose: Function = () => {};
const downloadTxt = async () => { const getChatAsText = async () => {
const _chat = chat.chat; const _chat = chat.chat;
console.log('download', chat);
const chatText = _chat.messages.reduce((a, message, i, arr) => { const chatText = _chat.messages.reduce((a, message, i, arr) => {
return `${a}### ${message.role.toUpperCase()}\n${message.content}\n\n`; return `${a}### ${message.role.toUpperCase()}\n${message.content}\n\n`;
}, ''); }, '');
return chatText.trim();
};
const downloadTxt = async () => {
const chatText = await getChatAsText();
let blob = new Blob([chatText], { let blob = new Blob([chatText], {
type: 'text/plain' type: 'text/plain'
}); });
@ -117,6 +125,30 @@
<div class="flex items-center">{$i18n.t('Settings')}</div> <div class="flex items-center">{$i18n.t('Settings')}</div>
</DropdownMenu.Item> --> </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"
id="chat-overview-button"
on:click={() => {
shareHandler();
}}
>
<Map className=" size-4" strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Overview')}</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"
id="chat-copy-button"
on:click={async () => {
await copyToClipboard(await getChatAsText()).catch((e) => {
console.error(e);
});
}}
>
<Clipboard className=" size-4" strokeWidth="1.5" />
<div class="flex items-center">{$i18n.t('Copy')}</div>
</DropdownMenu.Item>
<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" 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"
id="chat-share-button" id="chat-share-button"
@ -138,12 +170,7 @@
</svg> </svg>
<div class="flex items-center">{$i18n.t('Share')}</div> <div class="flex items-center">{$i18n.t('Share')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
<!-- <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer"
on:click={() => {
downloadHandler();
}}
/> -->
<DropdownMenu.Sub> <DropdownMenu.Sub>
<DropdownMenu.SubTrigger <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" 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"