fix: fix markdown style missing bug

enMedD · Sep 17, 2024 · 95283dd · 95283dd
1 parent 353314b
commit 95283dd
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 7 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -73,7 +73,7 @@
     "yup": "^1.1.1"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.10",
+    "@tailwindcss/typography": "^0.5.15",
     "eslint": "^8.48.0",
     "eslint-config-next": "^14.1.0",
     "prettier": "^3.3.3",

diff --git a/web/src/app/chat/message/Messages.tsx b/web/src/app/chat/message/Messages.tsx
@@ -263,7 +263,7 @@ export const AIMessage = ({
                 {typeof content === "string" ? (
                   <ReactMarkdown
                     key={messageId}
-                    className="max-w-full prose"
+                    className="max-w-full prose markdown"
                     components={{
                       a: (props) => {
                         const { node, ...rest } = props;

diff --git a/web/src/app/chat/message/custom-code-styles.css b/web/src/app/chat/message/custom-code-styles.css
@@ -1,3 +1,28 @@
+.markdown > * {
+  all: revert;
+}
+
+.markdown {
+  table {
+    border-collapse: collapse;
+  }
+
+  tr {
+    border-top: 1px solid #c6cbd1;
+    background: #fff;
+  }
+
+  th,
+  td {
+    padding: 6px 13px;
+    border: 1px solid #dfe2e5;
+  }
+
+  table tr:nth-child(2n) {
+    background: #f6f8fa;
+  }
+}
+
 pre[class*="language-"] {
   padding: 0px; /* Override padding */
   margin: 0px;
@@ -31,6 +56,25 @@ pre[class*="language-"] {
     box-shadow: 0 0 10px #6b7280; /* Light up effect on hover */
   }
 
+  table {
+    margin: 16px 0px;
+  }
+
+  tr {
+    border-top: 1px solid #c6cbd1;
+    background: #fff;
+  }
+
+  th,
+  td {
+    padding: 6px 13px;
+    border: 1px solid #dfe2e5;
+  }
+
+  table tr:nth-child(2n) {
+    background: #f6f8fa;
+  }
+
   scrollbar-width: thin;
   scrollbar-color: #4b5563 #1f2937; /* thumb and track colors */
 }