Merge pull request #2 from Jacksonmills/refactor-globalcss-to-tailwin…

…d-typography

Add typography plugin and refactor styles

app/package.json

@@ -48,6 +48,7 @@
   },
   "devDependencies": {
     "@capacitor/cli": "^5.6.0",
+    "@tailwindcss/typography": "^0.5.10",
     "@types/markdown-it": "^13.0.7",
     "@types/node": "^20",
     "@types/react": "^18",

app/src/components/Chat.tsx

@@ -217,7 +217,7 @@ export default function Chat({
         </NavMenu>
       </div>
 
-      <div className="mb-32 mt-12 p-8">
+      <div className="mb-32 mt-12 p-4 md:p-8">
         <ChatLog messages={messages} waitingForResponse={waitingForResponse} />
       </div>
 

app/src/components/ChatLog.tsx

@@ -1,10 +1,12 @@
+import { cn } from '@/utils/cnHelper';
 import { AnimatePresence, motion } from 'framer-motion';
-import ChatDots from './ChatDots';
-import MarkdownIt from 'markdown-it';
 import hljs from 'highlight.js';
 import 'highlight.js/styles/atom-one-dark.css';
-import 'katex/dist/katex.min.css';
 import renderMathInElement from 'katex/contrib/auto-render';
+import 'katex/dist/katex.min.css';
+import MarkdownIt from 'markdown-it';
+import ChatDots from './ChatDots';
+import Prose from './Prose';
 
 export interface Message {
   role: string;
@@ -15,9 +17,15 @@ const md = new MarkdownIt({
   highlight: function (str, lang, attrs) {
     if (lang && hljs.getLanguage(lang)) {
       try {
-        const highlightedCode = hljs.highlight(str, { language: lang, ignoreIllegals: true }).value;
-        const modifiedCode = highlightedCode.replace(/<span class="hljs-strong">/g, '<span class="hljs-strong-custom">');
-        return '<pre class="code-block"><code>' + modifiedCode + '</code></pre>';
+        const highlightedCode = hljs.highlight(str, {
+          language: lang,
+          ignoreIllegals: true,
+        }).value;
+        const modifiedCode = highlightedCode.replace(
+          /<span class="hljs-strong">/g,
+          '<span class="hljs-strong-custom">'
+        );
+        return modifiedCode;
       } catch (__) {}
     }
     return '';
@@ -60,12 +68,11 @@ export default function ChatLog({
             ],
           })
         }
-        className="chat-log prose"
         dangerouslySetInnerHTML={{ __html: html }}
       />
     );
   };
-  
+
   return (
     <AnimatePresence initial={false}>
       {messages ? (
@@ -80,16 +87,17 @@ export default function ChatLog({
               }
             >
               <motion.div
-                className={
+                className={cn(
+                  'mb-2 rounded-xl px-4 py-1 shadow-sm md:w-fit',
                   chat['role'] === 'user'
-                    ? 'bg-primary mb-2 w-fit rounded-xl rounded-br-none px-4 py-3 shadow-sm'
-                    : 'bg-muted/20 mb-2 w-fit rounded-xl rounded-bl-none px-4 py-3 shadow-sm'
-                }
+                    ? 'bg-primary rounded-br-none'
+                    : 'bg-muted/20 rounded-bl-none'
+                )}
                 initial={{ opacity: 0, y: 20 }}
                 animate={{ opacity: 1, y: 0 }}
                 exit={{ opacity: 0, transition: { duration: 1 } }}
               >
-                {renderMessageContent(chat['content'])}
+                <Prose>{renderMessageContent(chat['content'])}</Prose>
               </motion.div>
             </div>
           ))}
@@ -107,4 +115,4 @@ export default function ChatLog({
       ) : null}
     </AnimatePresence>
   );
-}
+}

app/src/components/Prose.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+export default function Prose({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      className={`
+        prose dark:prose-invert
+
+        prose-headings:mt-4 prose-headings:mb-2 prose-headings:font-bold prose-headings:text-foreground
+
+        prose-h1:text-3xl prose-h2:text-2xl prose-h3:text-xl
+
+        prose-p:my-2
+
+        prose-ol:mb-6 prose-ol:pl-5 prose-ol:list-decimal
+
+        prose-ul:mb-6 prose-ul:pl-5 prose-ul:list-disc
+
+        prose-li:mb-4 prose-li:marker:text-foreground
+
+        prose-pre:bg-black prose-pre:rounded prose-pre:px-4 prose-pre:py-3 prose-pre:line-numbers prose-pre:line-numbers-override prose-pre:line-numbers-override-2 prose-pre:font-mono prose-pre:text-sm prose-pre:my-2
+
+        prose-table:my-4 prose-table:border-separate prose-table:border-spacing-0 prose-table:rounded prose-table:overflow-hidden
+
+        prose-th:border prose-th:border-muted prose-th:dark:border-border prose-th:p-2 prose-th:dark:bg-border prose-th:bg-muted prose-th:text-card-foreground prose-th:font-bold first:prose-th:rounded-tl last:prose-th:rounded-tr prose-th:first:prose-tr:border-t-2
+
+        first:prose-th:border-l-2 last:prose-th:border-r-2
+
+        prose-td:border prose-td:border-muted prose-td:dark:border-border prose-td:p-2 first:prose-td:border-l-2 last:prose-td:border-r-2 first:prose-td:last:prose-tr:rounded-bl
+
+        last:prose-td:last:prose-tr:rounded-br prose-td:last:prose-tr:border-b-2
+
+        prose-a:text-foreground
+
+        prose-blockquote:text-foreground prose-blockquote:border-l-foreground
+
+        text-foreground overflow-x-auto
+      `}
+    >
+      {children}
+    </div>
+  );
+}

app/src/styles/globals.css

@@ -59,39 +59,6 @@
   }
 }
 
-/* Chat log styling */
-.chat-log h1 {
-  @apply mt-4 mb-2 font-bold text-3xl;
-}
-
-.chat-log h2 {
-  @apply mt-4 mb-2 font-bold text-2xl;
-}
-
-.chat-log h3 {
-  @apply mt-4 mb-2 font-bold text-xl;
-}
-
-.chat-log h4, .chat-log h5, .chat-log h6 {
-  @apply mt-4 mb-2 font-bold;
-}
-
-.chat-log p {
-  @apply mt-2 mb-2;
-}
-
-.chat-log ol {
-  @apply mb-6 pl-5 list-decimal;
-}
-
-.chat-log ul {
-  @apply mb-6 pl-5 list-disc;
-}
-
-.chat-log li {
-  @apply mb-4;
-}
-
 /* General styling for KaTeX-rendered LaTeX */
 .katex {
   font-size: 1.1em;
@@ -105,62 +72,4 @@
 
 .katex .mfrac {
   margin: 0 2px;
-}
-
-/* Styling for code blocks */
-.code-block {
-  background-color: #000; /* Solid black background */
-  color: #f8f8f2; /* Lighter text color for better contrast */
-  border-radius: 6px; /* Slightly larger border radius for a softer look */
-  padding: 12px; /* Slightly more padding for better spacing */
-  overflow-x: auto; /* Ensures horizontal scrolling for long lines of code */
-  font-family: 'Fira Code', 'Consolas', 'Monaco', monospace; /* Modern monospace font */
-  font-size: 0.95em; /* Slightly smaller font size for a more compact look */
-  line-height: 1.4; /* Improved line spacing for readability */
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
-
-/* Styling for tables */
-table {
-  border-collapse: separate;
-  border-spacing: 0;
-  width: 100%;
-  margin-top: 1em;
-  margin-bottom: 1em;
-  border-radius: 6px;
-  overflow: hidden; /* Ensures the rounded corners are applied to the table */
-}
-
-th, td {
-  border: 1px solid #ddd;
-  padding: 8px;
-  text-align: left;
-}
-
-th {
-  background-color: #f2f2f2;
-  color: #000; /* White bold header/label text */
-  font-weight: bold;
-  border-bottom: 2px solid #ddd; /* Adds a slightly darker border under the header */
-}
-
-/* Apply rounded corners to the first and last header cells */
-th:first-child {
-  border-top-left-radius: 6px;
-}
-
-th:last-child {
-  border-top-right-radius: 6px;
-}
-
-/* Apply rounded corners to the first and last cells in the last row */
-tr:last-child td:first-child {
-  border-bottom-left-radius: 6px;
-}
-
-tr:last-child td:last-child {
-  border-bottom-right-radius: 6px;
-}
+}

app/tailwind.config.ts

@@ -74,7 +74,7 @@ const config = {
       },
     },
   },
-  plugins: [require('tailwindcss-animate')],
+  plugins: [require('@tailwindcss/typography'), require('tailwindcss-animate')],
 } satisfies Config;
 
 export default config;