From 2bd5f997a70d6efde6910af22139c9c3265c3c3d Mon Sep 17 00:00:00 2001
From: Vishal Pawar <vshalofficial@gmail.com>
Date: Tue, 28 May 2024 02:09:29 +0530
Subject: [PATCH 1/5] #62 : fixed response formatting using rehype and
 ReactMarkdown

---
 package.json                           | 4 +++-
 src/app/components/Copilot/Copilot.tsx | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 999ad91..122622e 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,9 @@
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
     "ts-node": "^10.9.1",
-    "jest-environment-jsdom": "^29.7.0"
+    "jest-environment-jsdom": "^29.7.0",
+    "rehype-sanitize": "6.0.0",
+    "react-markdown": "9.0.1"
   },
   "devDependencies": {
     "@types/node": "^20.8.7",
diff --git a/src/app/components/Copilot/Copilot.tsx b/src/app/components/Copilot/Copilot.tsx
index 5e700b0..4f3190e 100644
--- a/src/app/components/Copilot/Copilot.tsx
+++ b/src/app/components/Copilot/Copilot.tsx
@@ -7,6 +7,8 @@ import "./Copilot.css";
 
 import { applicationData } from "../../App";
 import CopilotStreamController from '../../controllers/copilotStreamController';
+import ReactMarkdown from 'react-markdown';
+import rehypeSanitize from 'rehype-sanitize';
 
 
 let GlobalConversationID: string;
@@ -180,7 +182,7 @@ export function CopilotChat(): React.JSX.Element {
         </div>
         <div className="messages">
           <div>
-            <p>{message}</p>
+          <ReactMarkdown rehypePlugins={[rehypeSanitize]}>{message}</ReactMarkdown>
           </div>
         </div>
       </div>

From 67c246841725b540b160ff41c28b2f50ee0f8ecd Mon Sep 17 00:00:00 2001
From: Vishal Pawar <vshalofficial@gmail.com>
Date: Sun, 2 Jun 2024 21:44:33 +0530
Subject: [PATCH 2/5] #62 : added type declarations

---
 src/app/components/Copilot/Copilot.tsx          |  7 +++----
 src/app/components/ResponseFormat/Markdown.tsx  | 17 +++++++++++++++++
 .../ResponseFormat/rehypeSanitize.tsx           |  6 ++++++
 3 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 src/app/components/ResponseFormat/Markdown.tsx
 create mode 100644 src/app/components/ResponseFormat/rehypeSanitize.tsx

diff --git a/src/app/components/Copilot/Copilot.tsx b/src/app/components/Copilot/Copilot.tsx
index 4f3190e..f5fe65d 100644
--- a/src/app/components/Copilot/Copilot.tsx
+++ b/src/app/components/Copilot/Copilot.tsx
@@ -7,8 +7,7 @@ import "./Copilot.css";
 
 import { applicationData } from "../../App";
 import CopilotStreamController from '../../controllers/copilotStreamController';
-import ReactMarkdown from 'react-markdown';
-import rehypeSanitize from 'rehype-sanitize';
+import Markdown from '../ResponseFormat/Markdown';
 
 
 let GlobalConversationID: string;
@@ -136,7 +135,7 @@ export function CopilotChat(): React.JSX.Element {
     setMessage("")
     setData("")
   };
-    
+
   // for setting the initial copilot chat that takes place on page load.
   useEffect(() => {
     const getInitialChat = async () => {
@@ -182,7 +181,7 @@ export function CopilotChat(): React.JSX.Element {
         </div>
         <div className="messages">
           <div>
-          <ReactMarkdown rehypePlugins={[rehypeSanitize]}>{message}</ReactMarkdown>
+          <Markdown message={message} />
           </div>
         </div>
       </div>
diff --git a/src/app/components/ResponseFormat/Markdown.tsx b/src/app/components/ResponseFormat/Markdown.tsx
new file mode 100644
index 0000000..270869a
--- /dev/null
+++ b/src/app/components/ResponseFormat/Markdown.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import ReactMarkdown from 'react-markdown';
+import rehypeSanitize from 'rehype-sanitize';
+
+interface MarkdownProps {
+  message: string;
+}
+
+const Markdown: React.FC<MarkdownProps> = ({ message }) => {
+  return (
+    <ReactMarkdown rehypePlugins={[rehypeSanitize]}>
+      {message}
+    </ReactMarkdown>
+  );
+};
+
+export default Markdown;
diff --git a/src/app/components/ResponseFormat/rehypeSanitize.tsx b/src/app/components/ResponseFormat/rehypeSanitize.tsx
new file mode 100644
index 0000000..867a94b
--- /dev/null
+++ b/src/app/components/ResponseFormat/rehypeSanitize.tsx
@@ -0,0 +1,6 @@
+declare module 'rehype-sanitize' {
+    import { Plugin } from 'unified';
+  
+    const rehypeSanitize: Plugin;
+    export default rehypeSanitize;
+  }
\ No newline at end of file

From 4821f0b6ef13f79ce862f12ff51b35b14b3aea91 Mon Sep 17 00:00:00 2001
From: Vishal Pawar <vshalofficial@gmail.com>
Date: Tue, 4 Jun 2024 01:46:33 +0530
Subject: [PATCH 3/5] #62 : fixed in-consistency in dark and light mode

---
 src/app/global.css | 45 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/src/app/global.css b/src/app/global.css
index 5191312..d696573 100644
--- a/src/app/global.css
+++ b/src/app/global.css
@@ -182,3 +182,48 @@ html {
   box-shadow: -4px 4px 5px rgba(0, 0, 0, 0.2);
   margin-top: 20px;
 }
+/* styles.css */
+
+/* Common styles for the body */
+body {
+  --bg-color: #000000; /* Pure black background */
+  --text-color: #e0e0e0; /* Light text color */
+  background-color: var(--bg-color);
+  color: var(--text-color);
+}
+
+code {
+  --code-bg-color: #000000; /* Pure black code block background */
+  --code-text-color: #ffffff; /* Pure white code text color */
+  background-color: var(--code-bg-color);
+  color: var(--code-text-color);
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  font-family: 'Courier New', Courier, monospace;
+}
+
+/* Ensuring the styles for both light and dark modes */
+@media (prefers-color-scheme: light) {
+  body {
+    --bg-color: #000000;
+    --text-color: #e0e0e0;
+  }
+
+  code {
+    --code-bg-color: #000000;
+    --code-text-color: #ffffff;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    --bg-color: #000000;
+    --text-color: #e0e0e0;
+  }
+
+  code {
+    --code-bg-color: #000000;
+    --code-text-color: #ffffff;
+  }
+}
+

From 0181ba7136094a30939401cc2a1a4992481989c4 Mon Sep 17 00:00:00 2001
From: Vishal Pawar <vshalofficial@gmail.com>
Date: Tue, 4 Jun 2024 01:49:00 +0530
Subject: [PATCH 4/5] #62 : updated css

---
 src/app/global.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/global.css b/src/app/global.css
index d696573..1c0d939 100644
--- a/src/app/global.css
+++ b/src/app/global.css
@@ -182,9 +182,9 @@ html {
   box-shadow: -4px 4px 5px rgba(0, 0, 0, 0.2);
   margin-top: 20px;
 }
-/* styles.css */
 
-/* Common styles for the body */
+
+/* Common styles for the response formatting body */
 body {
   --bg-color: #000000; /* Pure black background */
   --text-color: #e0e0e0; /* Light text color */

From 1bd63dd49a560c29860712dd470326a7c11dc6e6 Mon Sep 17 00:00:00 2001
From: Vishal Pawar <vshalofficial@gmail.com>
Date: Tue, 4 Jun 2024 02:32:27 +0530
Subject: [PATCH 5/5] #62 : resolved color conflicts

---
 src/app/global.css | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/app/global.css b/src/app/global.css
index 1c0d939..5927f06 100644
--- a/src/app/global.css
+++ b/src/app/global.css
@@ -96,13 +96,11 @@ html {
 }
 
 .snippets-heading {
-  color: white;
   font-weight: normal;
   margin: 5px;
 }
 
 .snippets-heading-2 {
-  color: white;
   font-weight: normal;
 }
 
@@ -138,7 +136,6 @@ html {
   cursor: pointer;
   font-size: 12px;
 }
-
 .snippets-grid {
   overflow-y: scroll;
   min-width: 700px;
@@ -148,6 +145,8 @@ html {
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
   gap: 5px;
+  background-color: #0e1111; /* Dark background color */
+  color: black; /* Text color */
 }
 
 .snippet-item {
@@ -160,7 +159,7 @@ html {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  /* background-color: white; */
+  background-color: white; /* Light background color */
   cursor: pointer; /* Add cursor style to indicate clickability */
 }
 
@@ -225,5 +224,4 @@ code {
     --code-bg-color: #000000;
     --code-text-color: #ffffff;
   }
-}
-
+}
\ No newline at end of file