fix: fix basic markdown usage (#75)

Author: kantord

src/components/Chat.tsx

@@ -31,7 +31,7 @@ export function Chat() {
             <ChatBubble variant="sent">
               <ChatBubbleAvatar fallback="User" className="w-14" />
               <ChatBubbleMessage variant="sent" className="bg-zinc-700">
-                <Markdown className="text-gray-300">
+                <Markdown isInverted>
                   {sanitizeQuestionPrompt({
                     question: question?.message ?? "",
                     answer: answer?.message ?? "",

src/components/Dashboard.tsx

@@ -28,9 +28,9 @@ const wrapObjectOutput = (input: AlertConversation["trigger_string"]) => {
   if (data === null) return "N/A";
   if (typeof data === "string") {
     return (
-      <Markdown className="bg-secondary rounded-lg overflow-auto w-fit p-1">
-        {data}
-      </Markdown>
+      <div className="bg-secondary rounded-lg overflow-auto w-fit p-1">
+        <Markdown>{data}</Markdown>
+      </div>
     );
   }
   if (!data.type || !data.name) return "N/A";

src/components/Help.tsx

@@ -30,7 +30,7 @@ export function Help() {
       } catch (error) {
         console.error("Error loading help content:", error);
         setContent(
-          "# Error\nFailed to load help content. Please try again later."
+          "# Error\nFailed to load help content. Please try again later.",
         );
       }
     };
@@ -40,20 +40,7 @@ export function Help() {
 
   return (
     <div className="max-w-5xl bg-white rounded-lg px-6 mx-auto">
-      <Markdown
-        className="prose prose-lg max-w-none
-            prose-headings:text-gray-900 
-            prose-h1:text-3xl prose-h1:font-bold prose-h1:mb-8
-            prose-h2:text-2xl prose-h2:font-semibold prose-h2:mt-8 prose-h2:mb-4
-            prose-h3:text-xl prose-h3:font-medium prose-h3:mt-6 prose-h3:mb-3
-            prose-p:text-gray-600 prose-p:leading-relaxed
-            prose-code:text-blue-600
-            prose-pre:bg-gray-900 prose-pre:rounded-lg prose-pre:p-4
-            prose-pre:shadow-md
-          "
-      >
-        {content}
-      </Markdown>
+      <Markdown>{content}</Markdown>
     </div>
   );
 }

src/components/Markdown.tsx

@@ -2,7 +2,6 @@ import remarkGfm from "remark-gfm";
 import ReactMarkdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
-import { cn } from "@/lib/utils";
 import { CopyToClipboard } from "./CopyToClipboard";
 import hljs from "highlight.js";
 
@@ -33,7 +32,7 @@ const LANGUAGES_SUBSET_DETECTION = [
 
 interface Props {
   children: string;
-  className?: string;
+  isInverted?: boolean;
 }
 
 const customStyle = {
@@ -52,9 +51,11 @@ const customStyle = {
     boxSizing: "border-box",
   },
 };
-export function Markdown({ children, className = "" }: Props) {
+
+export function Markdown({ children, isInverted = false }: Props) {
   return (
     <ReactMarkdown
+      className={`max-w-none prose prose-pre:shadow-md prose-pre:rounded-lg prose-pre:p-4 prose-p:leading-relaxed prose-h1:text-3xl prose-h1:font-bold prose-h1:mb-8 prose-h2:text-2xl prose-h2:font-semibold prose-h2:mt-8 prose-h2:mb-4 prose-h3:text-xl prose-h3:font-medium prose-h3:mt-6 prose-h3:mb-3 ${isInverted ? "prose-invert" : ""}`}
       components={{
         code({ className, children, ...props }) {
           if (!children) return null;
@@ -71,7 +72,7 @@ export function Markdown({ children, className = "" }: Props) {
               <SyntaxHighlighter
                 style={customStyle}
                 language={language}
-                PreTag="div"
+                PreTag="pre"
                 className="rounded-lg overflow-hidden shadow-lg text-sm my-6 whitespace-normal"
                 wrapLines
                 {...props}
@@ -84,22 +85,9 @@ export function Markdown({ children, className = "" }: Props) {
             </div>
           );
         },
-        p({ children }) {
-          return (
-            <p
-              className={cn(
-                "text-gray-600 leading-relaxed mt-6 mb-3",
-                className,
-              )}
-            >
-              {children}
-            </p>
-          );
-        },
         pre({ children }) {
-          return <div className="not-prose">{children}</div>;
+          return children;
         },
-
         a({ children, ...props }) {
           return (
             <a
@@ -116,7 +104,6 @@ export function Markdown({ children, className = "" }: Props) {
         },
       }}
       remarkPlugins={[remarkGfm]}
-      className={className}
     >
       {children}
     </ReactMarkdown>