feat: export to screenshot

client/package.json

@@ -40,8 +40,10 @@
     "clsx": "^1.2.1",
     "copy-to-clipboard": "^3.3.3",
     "crypto-browserify": "^3.12.0",
+    "downloadjs": "^1.4.7",
     "esbuild": "0.17.15",
     "export-from-json": "^1.7.2",
+    "html2canvas": "^1.4.1",
     "lodash": "^4.17.21",
     "lucide-react": "^0.113.0",
     "rc-input-number": "^7.4.2",
@@ -65,6 +67,7 @@
     "tailwindcss-animate": "^1.0.5",
     "tailwindcss-radix": "^2.8.0",
     "url": "^0.11.0",
+    "use-react-screenshot": "^3.0.0",
     "uuidv4": "^6.2.13"
   },
   "devDependencies": {

client/src/App.jsx

@@ -7,6 +7,8 @@ import store from './store';
 import userAuth from './utils/userAuth';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 
+import { ScreenshotProvider } from './utils/screenshotContext.jsx';
+
 import axios from 'axios';
 
 const router = createBrowserRouter([
@@ -97,4 +99,8 @@ const App = () => {
   else return <div className="flex h-screen"></div>;
 };
 
-export default App;
+export default () => (
+  <ScreenshotProvider>
+    <App />
+  </ScreenshotProvider>
+);

client/src/components/Messages/index.jsx

@@ -6,6 +6,7 @@ import { CSSTransition } from 'react-transition-group';
 import ScrollToBottom from './ScrollToBottom';
 import MultiMessage from './MultiMessage';
 import MessageHeader from './MessageHeader';
+import { useScreenshot } from '~/utils/screenshotContext.jsx';
 
 import store from '~/store';
 
@@ -23,6 +24,8 @@ export default function Messages({ isSearchView = false }) {
   const conversation = useRecoilValue(store.conversation) || {};
   const { conversationId } = conversation;
 
+  const { screenshotTargetRef } = useScreenshot();
+
   // const models = useRecoilValue(store.models) || [];
   // const modelName = models.find(element => element.model == model)?.name;
 
@@ -84,8 +87,11 @@ export default function Messages({ isSearchView = false }) {
       ref={scrollableRef}
       onScroll={debouncedHandleScroll}
     >
-      <div className="dark:gpt-dark-gray h-full">
-        <div className="dark:gpt-dark-gray flex h-full flex-col items-center text-sm">
+      <div
+        className="dark:gpt-dark-gray h-auto"
+        ref={screenshotTargetRef}
+      >
+        <div className="dark:gpt-dark-gray flex h-auto flex-col items-center text-sm">
           <MessageHeader isSearchView={isSearchView} />
           {_messagesTree === null ? (
             <Spinner />

client/src/components/Nav/ExportConversation/ExportModel.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useRecoilValue, useRecoilCallback } from 'recoil';
 import exportFromJSON from 'export-from-json';
+import download from 'downloadjs';
 import DialogTemplate from '~/components/ui/DialogTemplate.jsx';
 import { Dialog, DialogClose, DialogButton } from '~/components/ui/Dialog.tsx';
 import { Input } from '~/components/ui/Input.tsx';
@@ -8,11 +9,14 @@ import { Label } from '~/components/ui/Label.tsx';
 import { Checkbox } from '~/components/ui/Checkbox.tsx';
 import Dropdown from '~/components/ui/Dropdown';
 import { cn } from '~/utils/';
+import { useScreenshot } from '~/utils/screenshotContext';
 
 import store from '~/store';
 import cleanupPreset from '~/utils/cleanupPreset.js';
 
 export default function ExportModel({ open, onOpenChange }) {
+  const { captureScreenshot } = useScreenshot();
+
   const [filename, setFileName] = useState('');
   const [type, setType] = useState('');
 
@@ -32,7 +36,7 @@ export default function ExportModel({ open, onOpenChange }) {
     []
   );
 
-  const typeOptions = ['text', 'markdown', 'csv', 'json']; //, 'screenshot', 'webpage'];
+  const typeOptions = ['text', 'markdown', 'csv', 'json', 'screenshot']; //,, 'webpage'];
 
   useEffect(() => {
     setFileName(
@@ -105,6 +109,11 @@ export default function ExportModel({ open, onOpenChange }) {
     }
   };
 
+  const exportScreenshot = async () => {
+    const data = await captureScreenshot();
+    download(data, `${filename}.png`, 'image/png');
+  };
+
   const exportCSV = async () => {
     let data = [];
 
@@ -256,6 +265,7 @@ export default function ExportModel({ open, onOpenChange }) {
     else if (type == 'text') exportText();
     else if (type == 'markdown') exportMarkdown();
     else if (type == 'csv') exportCSV();
+    else if (type == 'screenshot') exportScreenshot();
   };
 
   const defaultTextProps =
@@ -311,7 +321,7 @@ export default function ExportModel({ open, onOpenChange }) {
               </div>
             </div>
             <div className="grid w-full gap-6 sm:grid-cols-2">
-              {type !== 'csv' ? (
+              {type !== 'csv' && type !== 'screenshot' ? (
                 <div className="col-span-1 flex flex-col items-start justify-start gap-2">
                   <div className="grid w-full items-center gap-2">
                     <Label
@@ -337,6 +347,7 @@ export default function ExportModel({ open, onOpenChange }) {
                   </div>
                 </div>
               ) : null}
+              {type !== 'screenshot' ? (
                 <div className="grid w-full items-center gap-2">
                   <Label
                     htmlFor="exportBranches"
@@ -360,6 +371,7 @@ export default function ExportModel({ open, onOpenChange }) {
                     </label>
                   </div>
                 </div>
+              ) : null}
               {type === 'json' ? (
                 <div className="grid w-full items-center gap-2">
                   <Label

client/src/utils/screenshotContext.jsx

@@ -0,0 +1,21 @@
+import React, { createContext, useRef, useContext, useCallback } from 'react';
+import { useScreenshot as useScreenshot_ } from 'use-react-screenshot';
+
+const ScreenshotContext = createContext({});
+
+export const useScreenshot = () => {
+  const { ref } = useContext(ScreenshotContext);
+  const [image, takeScreenshot] = useScreenshot_();
+
+  const captureScreenshot = () => {
+    return takeScreenshot(ref.current);
+  };
+
+  return { screenshotTargetRef: ref, captureScreenshot };
+};
+
+export const ScreenshotProvider = ({ children }) => {
+  const ref = useRef(null);
+
+  return <ScreenshotContext.Provider value={{ ref }}>{children}</ScreenshotContext.Provider>;
+};