From 0113d4499b310b1e507ffb9738dd85585bd88336 Mon Sep 17 00:00:00 2001
From: B0zal <me@btz.pm>
Date: Wed, 23 Aug 2023 21:14:43 +0700
Subject: [PATCH] [Feature] Better JSON Exporter #2692

[+] A view looks better
[+] auto minify json when click a copy in markdown and download

Co-Authored-By: wangwentong-lunaon <39506652+wangwentong-lunaon@users.noreply.github.com>
Co-Authored-By: Yifei Zhang <yidadaa@qq.com>
Co-Authored-By: B0zal <48602426+kfear1337@users.noreply.github.com>
---
 app/components/exporter.tsx | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/app/components/exporter.tsx b/app/components/exporter.tsx
index 604b8823d..2e3cd84aa 100644
--- a/app/components/exporter.tsx
+++ b/app/components/exporter.tsx
@@ -565,21 +565,32 @@ export function MarkdownPreviewer(props: {
   );
 }
 
+// modified by BackTrackZ now it's looks better
+
 export function JsonPreviewer(props: {
   messages: ChatMessage[];
   topic: string;
 }) {
-  const msgs = props.messages.map((m) => ({
-    role: m.role,
-    content: m.content,
-  }));
-  const mdText = "\n" + JSON.stringify(msgs, null, 2) + "\n";
+  const msgs = {
+    messages: [
+      {
+        role: "system",
+        content: "You are an assistant that " + props.topic,
+      },
+      ...props.messages.map((m) => ({
+        role: m.role,
+        content: m.content,
+      })),
+    ],
+  };
+  const mdText = "```json\n" + JSON.stringify(msgs, null, 2) + "\n```";
+  const minifiedJson = JSON.stringify(msgs);
 
   const copy = () => {
-    copyToClipboard(JSON.stringify(msgs, null, 2));
+    copyToClipboard(minifiedJson);
   };
   const download = () => {
-    downloadAs(JSON.stringify(msgs, null, 2), `${props.topic}.json`);
+    downloadAs(JSON.stringify(msgs), `${props.topic}.json`);
   };
 
   return (
@@ -587,12 +598,12 @@ export function JsonPreviewer(props: {
       <PreviewActions
         copy={copy}
         download={download}
-        showCopy={true}
+        showCopy={false}
         messages={props.messages}
       />
-      <div className="markdown-body">
-        <pre className={styles["export-content"]}>{mdText}</pre>
+      <div className="markdown-body" onClick={copy}>
+      <Markdown content={mdText} />
       </div>
     </>
   );
-}
+}
\ No newline at end of file