From 14795f5dd02f654f1389dbf2cc7eeb7d2eae4775 Mon Sep 17 00:00:00 2001
From: Jing Hua <tohjinghua123@gmail.com>
Date: Fri, 21 Apr 2023 17:54:08 +0800
Subject: [PATCH] feat: toggle markdown or plaintext view

fixes #242
---
 src/assets/icons/FileTextIcon.tsx             | 17 ++++++
 .../View/Button/MarkdownModeButton.tsx        | 24 ++++++++
 .../ChatContent/Message/View/ContentView.tsx  | 58 +++++++++++--------
 src/store/config-slice.ts                     |  9 +++
 src/store/store.ts                            |  1 +
 5 files changed, 85 insertions(+), 24 deletions(-)
 create mode 100644 src/assets/icons/FileTextIcon.tsx
 create mode 100644 src/components/Chat/ChatContent/Message/View/Button/MarkdownModeButton.tsx

diff --git a/src/assets/icons/FileTextIcon.tsx b/src/assets/icons/FileTextIcon.tsx
new file mode 100644
index 0000000..7f291b6
--- /dev/null
+++ b/src/assets/icons/FileTextIcon.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+const FileTextIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      viewBox='0 0 1024 1024'
+      fill='currentColor'
+      height='1em'
+      width='1em'
+      {...props}
+    >
+      <path d='M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494zM504 618H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM312 490v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8z' />
+    </svg>
+  );
+};
+
+export default FileTextIcon;
diff --git a/src/components/Chat/ChatContent/Message/View/Button/MarkdownModeButton.tsx b/src/components/Chat/ChatContent/Message/View/Button/MarkdownModeButton.tsx
new file mode 100644
index 0000000..402116b
--- /dev/null
+++ b/src/components/Chat/ChatContent/Message/View/Button/MarkdownModeButton.tsx
@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+
+import useStore from '@store/store';
+
+import BaseButton from './BaseButton';
+
+import MarkdownIcon from '@icon/MarkdownIcon';
+import FileTextIcon from '@icon/FileTextIcon';
+
+const MarkdownModeButton = () => {
+  const markdownMode = useStore((state) => state.markdownMode);
+  const setMarkdownMode = useStore((state) => state.setMarkdownMode);
+
+  return (
+    <BaseButton
+      icon={markdownMode ? <MarkdownIcon /> : <FileTextIcon />}
+      onClick={() => {
+        setMarkdownMode(!markdownMode);
+      }}
+    />
+  );
+};
+
+export default MarkdownModeButton;
diff --git a/src/components/Chat/ChatContent/Message/View/ContentView.tsx b/src/components/Chat/ChatContent/Message/View/ContentView.tsx
index 997fb1c..d0d4724 100644
--- a/src/components/Chat/ChatContent/Message/View/ContentView.tsx
+++ b/src/components/Chat/ChatContent/Message/View/ContentView.tsx
@@ -29,6 +29,8 @@ import DownButton from './Button/DownButton';
 import CopyButton from './Button/CopyButton';
 import EditButton from './Button/EditButton';
 import DeleteButton from './Button/DeleteButton';
+import MarkdownModeButton from './Button/MarkdownModeButton';
+
 import CodeBlock from '../CodeBlock';
 
 const ContentView = memo(
@@ -44,13 +46,16 @@ const ContentView = memo(
     messageIndex: number;
   }) => {
     const { handleSubmit } = useSubmit();
+
     const [isDelete, setIsDelete] = useState<boolean>(false);
+
     const currentChatIndex = useStore((state) => state.currentChatIndex);
     const setChats = useStore((state) => state.setChats);
     const lastMessageIndex = useStore((state) =>
       state.chats ? state.chats[state.currentChatIndex].messages.length - 1 : 0
     );
     const inlineLatex = useStore((state) => state.inlineLatex);
+    const markdownMode = useStore((state) => state.markdownMode);
 
     const handleDelete = () => {
       const updatedChats: ChatInterface[] = JSON.parse(
@@ -101,30 +106,34 @@ const ContentView = memo(
     return (
       <>
         <div className='markdown prose w-full md:max-w-full break-words dark:prose-invert dark share-gpt-message'>
-          <ReactMarkdown
-            remarkPlugins={[
-              remarkGfm,
-              [remarkMath, { singleDollarTextMath: inlineLatex }],
-            ]}
-            rehypePlugins={[
-              rehypeKatex,
-              [
-                rehypeHighlight,
-                {
-                  detect: true,
-                  ignoreMissing: true,
-                  subset: codeLanguageSubset,
-                },
-              ],
-            ]}
-            linkTarget='_new'
-            components={{
-              code,
-              p,
-            }}
-          >
-            {content}
-          </ReactMarkdown>
+          {markdownMode ? (
+            <ReactMarkdown
+              remarkPlugins={[
+                remarkGfm,
+                [remarkMath, { singleDollarTextMath: inlineLatex }],
+              ]}
+              rehypePlugins={[
+                rehypeKatex,
+                [
+                  rehypeHighlight,
+                  {
+                    detect: true,
+                    ignoreMissing: true,
+                    subset: codeLanguageSubset,
+                  },
+                ],
+              ]}
+              linkTarget='_new'
+              components={{
+                code,
+                p,
+              }}
+            >
+              {content}
+            </ReactMarkdown>
+          ) : (
+            <span className='whitespace-pre-wrap'>{content}</span>
+          )}
         </div>
         <div className='flex justify-end gap-2 w-full mt-2'>
           {isDelete || (
@@ -139,6 +148,7 @@ const ContentView = memo(
                 <DownButton onClick={handleMoveDown} />
               )}
 
+              <MarkdownModeButton />
               <CopyButton onClick={handleCopy} />
               <EditButton setIsEdit={setIsEdit} />
               <DeleteButton setIsDelete={setIsDelete} />
diff --git a/src/store/config-slice.ts b/src/store/config-slice.ts
index eab7c8b..b21a02b 100644
--- a/src/store/config-slice.ts
+++ b/src/store/config-slice.ts
@@ -14,6 +14,7 @@ export interface ConfigSlice {
   hideSideMenu: boolean;
   enterToSubmit: boolean;
   inlineLatex: boolean;
+  markdownMode: boolean;
   setOpenConfig: (openConfig: boolean) => void;
   setTheme: (theme: Theme) => void;
   setAutoTitle: (autoTitle: boolean) => void;
@@ -24,6 +25,7 @@ export interface ConfigSlice {
   setHideSideMenu: (hideSideMenu: boolean) => void;
   setEnterToSubmit: (enterToSubmit: boolean) => void;
   setInlineLatex: (inlineLatex: boolean) => void;
+  setMarkdownMode: (markdownMode: boolean) => void;
 }
 
 export const createConfigSlice: StoreSlice<ConfigSlice> = (set, get) => ({
@@ -37,6 +39,7 @@ export const createConfigSlice: StoreSlice<ConfigSlice> = (set, get) => ({
   defaultChatConfig: _defaultChatConfig,
   defaultSystemMessage: _defaultSystemMessage,
   inlineLatex: false,
+  markdownMode: true,
   setOpenConfig: (openConfig: boolean) => {
     set((prev: ConfigSlice) => ({
       ...prev,
@@ -97,4 +100,10 @@ export const createConfigSlice: StoreSlice<ConfigSlice> = (set, get) => ({
       inlineLatex: inlineLatex,
     }));
   },
+  setMarkdownMode: (markdownMode: boolean) => {
+    set((prev: ConfigSlice) => ({
+      ...prev,
+      markdownMode: markdownMode,
+    }));
+  },
 });
diff --git a/src/store/store.ts b/src/store/store.ts
index 4ab44ad..1acf4bf 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -56,6 +56,7 @@ export const createPartializedState = (state: StoreState) => ({
   folders: state.folders,
   enterToSubmit: state.enterToSubmit,
   inlineLatex: state.inlineLatex,
+  markdownMode: state.markdownMode,
 });
 
 const useStore = create<StoreState>()(