Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-22 03:10:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: export to screenshot

Browse source
This commit is contained in:
Wentao Lyu 2023-04-06 02:48:32 +08:00
parent 6f0b559927
commit 96914387a6
5 changed files with 73 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

10
client/src/components/Messages/index.jsx
View file

@ -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 />

56
client/src/components/Nav/ExportConversation/ExportModel.jsx
View file

@ -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,29 +347,31 @@ export default function ExportModel({ open, onOpenChange }) {
</div>
</div>
) : null}
<div className="grid w-full items-center gap-2">
<Label
htmlFor="exportBranches"
className="text-left text-sm font-medium"
>
Export all message branches
</Label>
<div className="flex h-[40px] w-full items-center space-x-3">
<Checkbox
id="exportBranches"
disabled={!exportBranchesSupport}
checked={exportBranches}
className="focus:ring-opacity-20 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-50 dark:focus:ring-gray-600 dark:focus:ring-opacity-50 dark:focus:ring-offset-0"
onCheckedChange={setExportBranches}
/>
<label
{type !== 'screenshot' ? (
<div className="grid w-full items-center gap-2">
<Label
htmlFor="exportBranches"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
className="text-left text-sm font-medium"
>
{exportBranchesSupport ? 'Enabled' : 'Not Supported'}
</label>
Export all message branches
</Label>
<div className="flex h-[40px] w-full items-center space-x-3">
<Checkbox
id="exportBranches"
disabled={!exportBranchesSupport}
checked={exportBranches}
className="focus:ring-opacity-20 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-50 dark:focus:ring-gray-600 dark:focus:ring-opacity-50 dark:focus:ring-offset-0"
onCheckedChange={setExportBranches}
/>
<label
htmlFor="exportBranches"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
>
{exportBranchesSupport ? 'Enabled' : 'Not Supported'}
</label>
</div>
</div>
</div>
) : null}
{type === 'json' ? (
<div className="grid w-full items-center gap-2">
<Label