From dfc88e79d9049073157e7fcc74e0c331e0c09e1e Mon Sep 17 00:00:00 2001
From: sherifButt <90522472+sherifButt@users.noreply.github.com>
Date: Fri, 23 Feb 2024 08:29:27 +0000
Subject: [PATCH 1/5] enhanced chat style and remove list restriction

---
 .../ChatHistory/HistoricalMessage/index.jsx   |   2 +-
 .../ChatContainer/ChatHistory/index.jsx       |   2 +-
 frontend/src/index.css                        | 149 ++++++++++++++++++
 frontend/src/utils/chat/markdown.js           |   2 +-
 4 files changed, 152 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
index f4c5c86a712..1a3f1a0db5d 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
@@ -52,7 +52,7 @@ const HistoricalMessage = ({
             </div>
           ) : (
             <span
-              className={`whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
+              className={`flex flex-col gap-y-1 mt-2`}
               dangerouslySetInnerHTML={{
                 __html: DOMPurify.sanitize(renderMarkdown(message)),
               }}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx
index 5be8afc1324..6af66ea6533 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx
@@ -83,7 +83,7 @@ export default function ChatHistory({ history = [], workspace, sendCommand }) {
 
   return (
     <div
-      className="h-full md:h-[83%] pb-[100px] pt-6 md:pt-0 md:pb-20 md:mx-0 overflow-y-scroll flex flex-col justify-start no-scroll"
+      className="markdown text-white/80 font-light text-sm h-full md:h-[83%] pb-[100px] pt-6 md:pt-0 md:pb-20 md:mx-0 overflow-y-scroll flex flex-col justify-start no-scroll"
       id="chat-history"
       ref={chatHistoryRef}
     >
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 2c43798221b..876d8b90ece 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -443,3 +443,152 @@ dialog::backdrop {
 .input-label {
   @apply text-[14px] font-bold text-white;
 }
+
+
+/**
+ * ==============================================
+ * Markdown Styles
+ * ==============================================
+ */
+
+ .markdown h1 {
+  font-size: xx-large;
+  line-height: 1.7;
+  padding-left: 0.3rem;
+}
+.markdown h2 {
+  line-height: 1.5;
+  font-size: x-large;
+  padding-left: 0.3rem;
+}
+.markdown h3 {
+  line-height: 1.4;
+  font-size: large;
+  padding-left: 0.3rem;
+}
+
+/* Table Styles */
+
+.markdown table {
+  border-collapse: separate;
+}
+
+.markdown th {
+  border-top: none;
+}
+
+.markdown td:first-child,
+.markdown th:first-child {
+  border-left: none;
+}
+
+.markdown table {
+  width: 100%;
+  border-collapse: collapse;
+  color: #bdbdbe;
+  font-size: 13px;
+  margin: 30px 0px;
+  border-radius: 10px;
+  overflow: hidden;
+  font-weight: normal;
+}
+
+.markdown table thead {
+  color: #fff;
+  text-transform: uppercase;
+  font-weight: bolder;
+}
+.markdown hr {
+  border: 0;
+  border-top: 1px solid #cdcdcd40;
+  margin: 1rem 0;
+}
+.markdown table th,
+.markdown table td {
+  padding: 8px 15px;
+  border-bottom: 1px solid #cdcdcd2e;
+  text-align: left;
+}
+
+.markdown table th {
+  padding: 14px 15px;
+}
+
+@media (max-width: 600px) {
+  table th,
+  table td {
+    padding: 10px;
+  }
+}
+
+/* List Styles */
+ol {
+  list-style: decimal-leading-zero;
+  /* color: #dcdcdccf; */
+  padding-left: 0px;
+  padding-top: 10px;
+  margin: 10px;
+}
+
+ol li {
+  margin-left: 20px;
+  padding-left: 10px;
+  position: relative;
+  transition: all 0.3s ease;
+  line-height: 1.4rem;
+}
+
+ol li::marker {
+  color: #d2d2d2cf;
+  padding-top: 10px;
+  font-weight: lighter;
+}
+
+ol li p {
+  margin: 0.5rem;
+  padding-top: 10px;
+  color: #d9d9d9cf;
+}
+
+ul {
+  list-style: revert-layer;
+  /* color: #cfcfcfcf; */
+  padding-left: 0px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  margin: 10px;
+}
+
+ul li::marker {
+  color: #d0d0d0cf;
+  padding-top: 10px;
+  font-weight: lighter;
+}
+
+ul li {
+  margin-left: 20px;
+
+  padding-left: 10px;
+  transition: all 0.3s ease;
+  line-height: 1.4rem;
+}
+ul li > ul {
+  padding-left: 20px;
+  margin: 0px;
+}
+
+.markdown p {
+  margin: 0.35rem;
+}
+
+.markdown {
+  text-wrap: wrap;
+}
+pre {
+  margin: 20px 0;
+}
+
+strong {
+  font-weight: 600;
+  color: #fff;
+}
diff --git a/frontend/src/utils/chat/markdown.js b/frontend/src/utils/chat/markdown.js
index 47b47734591..7d7faadb032 100644
--- a/frontend/src/utils/chat/markdown.js
+++ b/frontend/src/utils/chat/markdown.js
@@ -45,7 +45,7 @@ const markdown = markdownIt({
   },
 })
   // Enable <ol> and <ul> items to not assume an HTML structure so we can keep numbering from responses.
-  .disable("list");
+  // .disable("list");
 
 export default function renderMarkdown(text = "") {
   return markdown.render(text);

From bb595d3cfa15988ad85953ece2931e4c9a6171d1 Mon Sep 17 00:00:00 2001
From: sherifButt <90522472+sherifButt@users.noreply.github.com>
Date: Fri, 23 Feb 2024 08:36:19 +0000
Subject: [PATCH 2/5] [FEAT]: Enhanced chat styling #765

---
 frontend/src/index.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 876d8b90ece..073389a6f4e 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -592,3 +592,4 @@ strong {
   font-weight: 600;
   color: #fff;
 }
+ 
\ No newline at end of file

From 16c4d696e71c5c48a682cab4981221a290e29555 Mon Sep 17 00:00:00 2001
From: timothycarambat <rambat1010@gmail.com>
Date: Fri, 23 Feb 2024 17:59:29 -0800
Subject: [PATCH 3/5] small changes in CSS to prevent collisions

---
 .../ChatHistory/PromptReply/index.jsx         |  2 +-
 frontend/src/index.css                        | 44 ++++++++++---------
 frontend/src/utils/chat/markdown.js           |  6 +--
 3 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx
index f7777841179..440883a7167 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/PromptReply/index.jsx
@@ -70,7 +70,7 @@ const PromptReply = ({
         <div className="flex gap-x-5">
           <Jazzicon size={36} user={{ uid: workspace.slug }} role="assistant" />
           <span
-            className={`reply whitespace-pre-line text-white font-normal text-sm md:text-sm flex flex-col gap-y-1 mt-2`}
+            className={`reply flex flex-col gap-y-1 mt-2`}
             dangerouslySetInnerHTML={{ __html: renderMarkdown(reply) }}
           />
         </div>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 073389a6f4e..e2141d8debc 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -444,23 +444,28 @@ dialog::backdrop {
   @apply text-[14px] font-bold text-white;
 }
 
-
 /**
  * ==============================================
  * Markdown Styles
  * ==============================================
  */
+.markdown,
+.markdown > * {
+  font-weight: 400;
+}
 
- .markdown h1 {
+.markdown h1 {
   font-size: xx-large;
   line-height: 1.7;
   padding-left: 0.3rem;
 }
+
 .markdown h2 {
   line-height: 1.5;
   font-size: x-large;
   padding-left: 0.3rem;
 }
+
 .markdown h3 {
   line-height: 1.4;
   font-size: large;
@@ -498,11 +503,13 @@ dialog::backdrop {
   text-transform: uppercase;
   font-weight: bolder;
 }
+
 .markdown hr {
   border: 0;
   border-top: 1px solid #cdcdcd40;
   margin: 1rem 0;
 }
+
 .markdown table th,
 .markdown table td {
   padding: 8px 15px;
@@ -515,22 +522,21 @@ dialog::backdrop {
 }
 
 @media (max-width: 600px) {
-  table th,
-  table td {
+  .markdown table th,
+  .markdown table td {
     padding: 10px;
   }
 }
 
 /* List Styles */
-ol {
+.markdown ol {
   list-style: decimal-leading-zero;
-  /* color: #dcdcdccf; */
   padding-left: 0px;
   padding-top: 10px;
   margin: 10px;
 }
 
-ol li {
+.markdown ol li {
   margin-left: 20px;
   padding-left: 10px;
   position: relative;
@@ -538,19 +544,16 @@ ol li {
   line-height: 1.4rem;
 }
 
-ol li::marker {
-  color: #d2d2d2cf;
+.markdown ol li::marker {
   padding-top: 10px;
-  font-weight: lighter;
 }
 
-ol li p {
+.markdown ol li p {
   margin: 0.5rem;
   padding-top: 10px;
-  color: #d9d9d9cf;
 }
 
-ul {
+.markdown ul {
   list-style: revert-layer;
   /* color: #cfcfcfcf; */
   padding-left: 0px;
@@ -559,37 +562,38 @@ ul {
   margin: 10px;
 }
 
-ul li::marker {
+.markdown ul li::marker {
   color: #d0d0d0cf;
   padding-top: 10px;
-  font-weight: lighter;
 }
 
-ul li {
+.markdownul li {
   margin-left: 20px;
 
   padding-left: 10px;
   transition: all 0.3s ease;
   line-height: 1.4rem;
 }
-ul li > ul {
+
+.markdown ul li > ul {
   padding-left: 20px;
   margin: 0px;
 }
 
 .markdown p {
+  font-weight: 400;
   margin: 0.35rem;
 }
 
 .markdown {
   text-wrap: wrap;
 }
-pre {
+
+.markdown pre {
   margin: 20px 0;
 }
 
-strong {
+.markdown strong {
   font-weight: 600;
   color: #fff;
 }
- 
\ No newline at end of file
diff --git a/frontend/src/utils/chat/markdown.js b/frontend/src/utils/chat/markdown.js
index 7d7faadb032..bf80bf976c0 100644
--- a/frontend/src/utils/chat/markdown.js
+++ b/frontend/src/utils/chat/markdown.js
@@ -43,9 +43,9 @@ const markdown = markdownIt({
       "</pre></div>"
     );
   },
-})
-  // Enable <ol> and <ul> items to not assume an HTML structure so we can keep numbering from responses.
-  // .disable("list");
+});
+// Enable <ol> and <ul> items to not assume an HTML structure so we can keep numbering from responses.
+// .disable("list");
 
 export default function renderMarkdown(text = "") {
   return markdown.render(text);

From 2853a180e083b73b3295a971dc06c1ad8065a8d5 Mon Sep 17 00:00:00 2001
From: timothycarambat <rambat1010@gmail.com>
Date: Fri, 23 Feb 2024 18:00:19 -0800
Subject: [PATCH 4/5] remove commented code

---
 frontend/src/utils/chat/markdown.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/utils/chat/markdown.js b/frontend/src/utils/chat/markdown.js
index bf80bf976c0..7c7470c06e5 100644
--- a/frontend/src/utils/chat/markdown.js
+++ b/frontend/src/utils/chat/markdown.js
@@ -26,7 +26,7 @@ const markdown = markdownIt({
           hljs.highlight(code, { language: lang, ignoreIllegals: true }).value +
           "</pre></div>"
         );
-      } catch (__) {}
+      } catch (__) { }
     }
 
     return (
@@ -44,8 +44,6 @@ const markdown = markdownIt({
     );
   },
 });
-// Enable <ol> and <ul> items to not assume an HTML structure so we can keep numbering from responses.
-// .disable("list");
 
 export default function renderMarkdown(text = "") {
   return markdown.render(text);

From f8a49f605069b9806d4070490822c10ed89ace30 Mon Sep 17 00:00:00 2001
From: timothycarambat <rambat1010@gmail.com>
Date: Fri, 23 Feb 2024 18:00:51 -0800
Subject: [PATCH 5/5] linting

---
 frontend/src/utils/chat/markdown.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/utils/chat/markdown.js b/frontend/src/utils/chat/markdown.js
index 7c7470c06e5..ff4af77bc46 100644
--- a/frontend/src/utils/chat/markdown.js
+++ b/frontend/src/utils/chat/markdown.js
@@ -26,7 +26,7 @@ const markdown = markdownIt({
           hljs.highlight(code, { language: lang, ignoreIllegals: true }).value +
           "</pre></div>"
         );
-      } catch (__) { }
+      } catch (__) {}
     }
 
     return (