Added functionality to export chats to screenshot

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<boolean>;
 }
@@ -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) => {
                   >
                     <IconPdf size={18} />
                   </button>
+                  <button
+                    className="ml-2 cursor-pointer hover:opacity-50"
+                    onClick={onScreenshot}
+                  >
+                    <IconScreenshot size={18} />
+                  </button>
                 </div>
                 {showSettings && (
                   <div className="flex flex-col space-y-10 md:mx-auto md:max-w-xl md:gap-6 md:py-3 md:pt-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">

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",