+
+
{_messagesTree === null ? (
@@ -97,6 +103,7 @@ export default function Messages({ isSearchView = false }) {
<>
)}
diff --git a/client/src/components/Nav/ExportConversation/ExportModel.jsx b/client/src/components/Nav/ExportConversation/ExportModel.jsx
new file mode 100644
index 0000000000..7a02dc96db
--- /dev/null
+++ b/client/src/components/Nav/ExportConversation/ExportModel.jsx
@@ -0,0 +1,415 @@
+import React, { useEffect, useState } from 'react';
+import { useRecoilValue, useRecoilCallback } from 'recoil';
+import filenamify from 'filenamify';
+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';
+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('');
+
+ const [includeOptions, setIncludeOptions] = useState(true);
+ const [exportBranches, setExportBranches] = useState(false);
+ const [exportBranchesSupport, setExportBranchesSupport] = useState(false);
+ const [recursive, setRecursive] = useState(true);
+
+ const conversation = useRecoilValue(store.conversation) || {};
+ const messagesTree = useRecoilValue(store.messagesTree) || [];
+ const endpointsFilter = useRecoilValue(store.endpointsFilter);
+
+ const getSiblingIdx = useRecoilCallback(
+ ({ snapshot }) =>
+ async messageId =>
+ await snapshot.getPromise(store.messagesSiblingIdxFamily(messageId)),
+ []
+ );
+
+ const typeOptions = ['text', 'markdown', 'csv', 'json', 'screenshot']; //,, 'webpage'];
+
+ useEffect(() => {
+ setFileName(
+ filenamify(String(conversation?.title || 'file'))
+ );
+ setType('text');
+ setIncludeOptions(true);
+ setExportBranches(false);
+ setExportBranchesSupport(false);
+ setRecursive(true);
+ }, [open]);
+
+ const _setType = newType => {
+ if (newType === 'json' || newType === 'csv' || newType === 'webpage') {
+ setExportBranches(true);
+ setExportBranchesSupport(true);
+ } else {
+ setExportBranches(false);
+ setExportBranchesSupport(false);
+ }
+ setType(newType);
+ };
+
+ // return an object or an array based on branches and recursive option
+ // messageId is used to get siblindIdx from recoil snapshot
+ const buildMessageTree = async ({ messageId, message, messages, branches = false, recursive = false }) => {
+ let children = [];
+ if (messages?.length)
+ if (branches)
+ for (const message of messages)
+ children.push(
+ await buildMessageTree({
+ messageId: message?.messageId,
+ message: message,
+ messages: message?.children,
+ branches,
+ recursive
+ })
+ );
+ else {
+ let message = messages[0];
+ if (messages?.length > 1) {
+ const siblingIdx = await getSiblingIdx(messageId);
+ message = messages[messages.length - siblingIdx - 1];
+ }
+
+ children = [
+ await buildMessageTree({
+ messageId: message?.messageId,
+ message: message,
+ messages: message?.children,
+ branches,
+ recursive
+ })
+ ];
+ }
+
+ if (recursive) return { ...message, children: children };
+ else {
+ let ret = [];
+ if (message) {
+ let _message = { ...message };
+ delete _message.children;
+ ret = [_message];
+ }
+ for (const child of children) ret = ret.concat(child);
+ return ret;
+ }
+ };
+
+ const exportScreenshot = async () => {
+ const data = await captureScreenshot();
+ download(data, `${filename}.png`, 'image/png');
+ };
+
+ const exportCSV = async () => {
+ let data = [];
+
+ const messages = await buildMessageTree({
+ messageId: conversation?.conversationId,
+ message: null,
+ messages: messagesTree,
+ branches: exportBranches,
+ recursive: false
+ });
+
+ for (const message of messages) {
+ data.push(message);
+ }
+
+ exportFromJSON({
+ data: data,
+ fileName: filename,
+ extension: 'csv',
+ exportType: exportFromJSON.types.csv,
+ beforeTableEncode: entries => [
+ { fieldName: 'sender', fieldValues: entries.find(e => e.fieldName == 'sender').fieldValues },
+ { fieldName: 'text', fieldValues: entries.find(e => e.fieldName == 'text').fieldValues },
+ {
+ fieldName: 'isCreatedByUser',
+ fieldValues: entries.find(e => e.fieldName == 'isCreatedByUser').fieldValues
+ },
+ { fieldName: 'error', fieldValues: entries.find(e => e.fieldName == 'error').fieldValues },
+ { fieldName: 'messageId', fieldValues: entries.find(e => e.fieldName == 'messageId').fieldValues },
+ {
+ fieldName: 'parentMessageId',
+ fieldValues: entries.find(e => e.fieldName == 'parentMessageId').fieldValues
+ },
+ { fieldName: 'createdAt', fieldValues: entries.find(e => e.fieldName == 'createdAt').fieldValues }
+ ]
+ });
+ };
+
+ const exportMarkdown = async () => {
+ let data =
+ `# Conversation\n` +
+ `- conversationId: ${conversation?.conversationId}\n` +
+ `- endpoint: ${conversation?.endpoint}\n` +
+ `- title: ${conversation?.title}\n` +
+ `- exportAt: ${new Date().toTimeString()}\n`;
+
+ if (includeOptions) {
+ data += `\n## Options\n`;
+ const options = cleanupPreset({ preset: conversation, endpointsFilter });
+
+ for (const key of Object.keys(options)) {
+ data += `- ${key}: ${options[key]}\n`;
+ }
+ }
+
+ const messages = await buildMessageTree({
+ messageId: conversation?.conversationId,
+ message: null,
+ messages: messagesTree,
+ branches: false,
+ recursive: false
+ });
+
+ data += `\n## History\n`;
+ for (const message of messages) {
+ data += `**${message?.sender}:**\n${message?.text}\n\n`;
+ }
+
+ exportFromJSON({
+ data: data,
+ fileName: filename,
+ extension: 'md',
+ exportType: exportFromJSON.types.text
+ });
+ };
+
+ const exportText = async () => {
+ let data =
+ `Conversation\n` +
+ `########################\n` +
+ `conversationId: ${conversation?.conversationId}\n` +
+ `endpoint: ${conversation?.endpoint}\n` +
+ `title: ${conversation?.title}\n` +
+ `exportAt: ${new Date().toTimeString()}\n`;
+
+ if (includeOptions) {
+ data += `\nOptions\n########################\n`;
+ const options = cleanupPreset({ preset: conversation, endpointsFilter });
+
+ for (const key of Object.keys(options)) {
+ data += `${key}: ${options[key]}\n`;
+ }
+ }
+
+ const messages = await buildMessageTree({
+ messageId: conversation?.conversationId,
+ message: null,
+ messages: messagesTree,
+ branches: false,
+ recursive: false
+ });
+
+ data += `\nHistory\n########################\n`;
+ for (const message of messages) {
+ data += `${message?.sender}:\n${message?.text}\n\n`;
+ }
+
+ exportFromJSON({
+ data: data,
+ fileName: filename,
+ extension: 'txt',
+ exportType: exportFromJSON.types.text
+ });
+ };
+
+ const exportJSON = async () => {
+ let data = {
+ conversationId: conversation?.conversationId,
+ endpoint: conversation?.endpoint,
+ title: conversation?.title,
+ exportAt: new Date().toTimeString(),
+ branches: exportBranches,
+ recursive: recursive
+ };
+
+ if (includeOptions) data.options = cleanupPreset({ preset: conversation, endpointsFilter });
+
+ const messages = await buildMessageTree({
+ messageId: conversation?.conversationId,
+ message: null,
+ messages: messagesTree,
+ branches: exportBranches,
+ recursive: recursive
+ });
+
+ if (recursive) data.messagesTree = messages.children;
+ else data.messages = messages;
+
+ exportFromJSON({
+ data: data,
+ fileName: filename,
+ extension: 'json',
+ exportType: exportFromJSON.types.json
+ });
+ };
+
+ const exportConversation = () => {
+ if (type === 'json') exportJSON();
+ else if (type == 'text') exportText();
+ else if (type == 'markdown') exportMarkdown();
+ else if (type == 'csv') exportCSV();
+ else if (type == 'screenshot') exportScreenshot();
+ };
+
+ const defaultTextProps =
+ 'rounded-md border border-gray-200 focus:border-slate-400 focus:bg-gray-50 bg-transparent text-sm shadow-[0_0_10px_rgba(0,0,0,0.05)] outline-none placeholder:text-gray-400 focus:outline-none focus:ring-gray-400 focus:ring-opacity-20 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:bg-gray-700 focus:dark:bg-gray-600 dark:text-gray-50 dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] dark:focus:border-gray-400 dark:focus:outline-none dark:focus:ring-0 dark:focus:ring-gray-400 dark:focus:ring-offset-0';
+
+ return (
+
+ }
+ buttons={
+ <>
+
+ Export
+
+
+ }
+ selection={null}
+ />
+
+ );
+}
diff --git a/client/src/components/Nav/ExportConversation/index.jsx b/client/src/components/Nav/ExportConversation/index.jsx
new file mode 100644
index 0000000000..7548c48374
--- /dev/null
+++ b/client/src/components/Nav/ExportConversation/index.jsx
@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { useRecoilValue } from 'recoil';
+import { Download } from 'lucide-react';
+import { cn } from '~/utils/';
+
+import ExportModel from './ExportModel';
+
+import store from '~/store';
+
+export default function ExportConversation() {
+ const [open, setOpen] = useState(false);
+
+ const conversation = useRecoilValue(store.conversation) || {};
+
+ const exportable =
+ conversation?.conversationId &&
+ conversation?.conversationId !== 'new' &&
+ conversation?.conversationId !== 'search';
+
+ const clickHandler = () => {
+ if (exportable) setOpen(true);
+ };
+
+ return (
+ <>
+
+
+ Export conversation
+
+
+
+
+ );
+}
diff --git a/client/src/components/Nav/NavLinks.jsx b/client/src/components/Nav/NavLinks.jsx
index 9626845d46..33f0e453c7 100644
--- a/client/src/components/Nav/NavLinks.jsx
+++ b/client/src/components/Nav/NavLinks.jsx
@@ -3,6 +3,7 @@ import SearchBar from './SearchBar';
import ClearConvos from './ClearConvos';
import DarkMode from './DarkMode';
import Logout from './Logout';
+import ExportConversation from './ExportConversation';
export default function NavLinks({ fetch, onSearchSuccess, clearSearch, isSearchEnabled }) {
return (
@@ -14,6 +15,7 @@ export default function NavLinks({ fetch, onSearchSuccess, clearSearch, isSearch
clearSearch={clearSearch}
/>
)}
+
diff --git a/client/src/store/conversation.js b/client/src/store/conversation.js
index 06520b2751..c13cbc48ec 100644
--- a/client/src/store/conversation.js
+++ b/client/src/store/conversation.js
@@ -1,7 +1,15 @@
import endpoints from './endpoints';
-import { atom, selector, useSetRecoilState, useResetRecoilState, useRecoilCallback } from 'recoil';
+import {
+ atom,
+ selector,
+ atomFamily,
+ useSetRecoilState,
+ useResetRecoilState,
+ useRecoilCallback
+} from 'recoil';
import buildTree from '~/utils/buildTree';
import getDefaultConversation from '~/utils/getDefaultConversation';
+import submission from './submission.js';
// current conversation, can be null (need to be fetched from server)
// sample structure
@@ -56,9 +64,15 @@ const latestMessage = atom({
default: null
});
+const messagesSiblingIdxFamily = atomFamily({
+ key: 'messagesSiblingIdx',
+ default: 0
+});
+
const useConversation = () => {
const setConversation = useSetRecoilState(conversation);
const setMessages = useSetRecoilState(messages);
+ const setSubmission = useSetRecoilState(submission.submission);
const resetLatestMessage = useResetRecoilState(latestMessage);
const switchToConversation = useRecoilCallback(
@@ -93,6 +107,7 @@ const useConversation = () => {
setConversation(conversation);
setMessages(messages);
+ setSubmission({});
resetLatestMessage();
};
@@ -126,5 +141,6 @@ export default {
messages,
messagesTree,
latestMessage,
+ messagesSiblingIdxFamily,
useConversation
};
diff --git a/client/src/utils/screenshotContext.jsx b/client/src/utils/screenshotContext.jsx
new file mode 100644
index 0000000000..cc0ecfc640
--- /dev/null
+++ b/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
{children};
+};
diff --git a/docker-compose.yml b/docker-compose.yml
index 6f7980de42..c6c5372678 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -29,6 +29,7 @@ services:
- HOST=0.0.0.0
- NODE_ENV=production
- MONGO_URI=mongodb://mongodb:27017/chatgpt-clone
+ # - CHATGPT_REVERSE_PROXY=http://host.docker.internal:8080/api/conversation # if you are hosting your own chatgpt reverse proxy
- MEILI_HOST=http://meilisearch:7700
- MEILI_HTTP_ADDR=meilisearch:7700
volumes: