diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx index a3ce33a..b7d782e 100644 --- a/components/Chat/Chat.tsx +++ b/components/Chat/Chat.tsx @@ -2,7 +2,8 @@ import { IconClearAll, IconSettings, IconMarkdown, - IconPdf + IconPdf, + IconScreenshot, } from '@tabler/icons-react'; import { MutableRefObject, @@ -42,6 +43,8 @@ import { MemoizedChatMessage } from './MemoizedChatMessage'; import {jsPDF} from "jspdf"; import html2canvas from "html2canvas"; +import { toPng } from 'html-to-image'; + interface Props { stopConversationRef: MutableRefObject; } @@ -360,6 +363,27 @@ export const Chat = memo(({ stopConversationRef }: Props) => { } }; + const onScreenshot = () => { + if (chatContainerRef.current === null) { + return; + } + + chatContainerRef.current.classList.remove('max-h-full'); + toPng(chatContainerRef.current, { cacheBust: true }) + .then((dataUrl) => { + const link = document.createElement('a'); + link.download = `${selectedConversation?.name || 'conversation'}.png`; + link.href = dataUrl; + link.click(); + if (chatContainerRef.current) { + chatContainerRef.current.classList.add('max-h-full'); + } + }) + .catch((err) => { + console.log(err); + }); + }; + const scrollDown = () => { if (autoScrollEnabled) { messagesEndRef.current?.scrollIntoView(true); @@ -526,6 +550,12 @@ export const Chat = memo(({ stopConversationRef }: Props) => { > + {showSettings && (
diff --git a/package.json b/package.json index ce622e4..23a6179 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@tabler/icons-react": "^2.9.0", "eventsource-parser": "^0.1.0", "html2canvas": "^1.4.1", + "html-to-image": "^1.11.11", "i18next": "^22.4.13", "jspdf": "^2.5.1", "next": "13.2.4",