From 47dff7d38769cbd9977431b0d2ebede9ce5f4307 Mon Sep 17 00:00:00 2001
From: Ruben Talstra <RubenTalstra1211@outlook.com>
Date: Wed, 12 Mar 2025 10:42:08 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Add=20Markdown=20heading=20?=
 =?UTF-8?q?and=20list=20components=20for=20enhanced=20formatting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Artifacts/Thinking.tsx  | 21 ++++++---
 .../Chat/Messages/Content/Markdown.tsx        | 45 +++++++++++++++++++
 2 files changed, 59 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Artifacts/Thinking.tsx b/client/src/components/Artifacts/Thinking.tsx
index 08e241c6e8..17ed3a0d37 100644
--- a/client/src/components/Artifacts/Thinking.tsx
+++ b/client/src/components/Artifacts/Thinking.tsx
@@ -1,7 +1,8 @@
-import { useState, useMemo, memo, useCallback } from 'react';
+import React, { useState, useMemo, memo, useCallback } from 'react';
 import { useRecoilValue } from 'recoil';
 import { Atom, ChevronDown } from 'lucide-react';
 import type { MouseEvent, FC } from 'react';
+import Markdown from '~/components/Chat/Messages/Content/Markdown';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 import store from '~/store';
@@ -21,12 +22,18 @@ const CONTENT_STYLES = {
 } as const;
 
 export const ThinkingContent: FC<{ children: React.ReactNode; isPart?: boolean }> = memo(
-  ({ isPart, children }) => (
-    <div className={CONTENT_STYLES.wrapper}>
-      <div className={isPart === true ? CONTENT_STYLES.partBorder : CONTENT_STYLES.border} />
-      <p className={CONTENT_STYLES.text}>{children}</p>
-    </div>
-  ),
+  ({ isPart, children }) => {
+    return (
+      <div className={CONTENT_STYLES.wrapper}>
+        <div className={isPart === true ? CONTENT_STYLES.partBorder : CONTENT_STYLES.border} />
+        {typeof children === 'string' ? (
+          <Markdown content={children} isLatestMessage={false} />
+        ) : (
+          <p className={CONTENT_STYLES.text}>{children}</p>
+        )}
+      </div>
+    );
+  },
 );
 
 export const ThinkingButton = memo(
diff --git a/client/src/components/Chat/Messages/Content/Markdown.tsx b/client/src/components/Chat/Messages/Content/Markdown.tsx
index e01de091c7..45bd0e2aea 100644
--- a/client/src/components/Chat/Messages/Content/Markdown.tsx
+++ b/client/src/components/Chat/Messages/Content/Markdown.tsx
@@ -166,6 +166,46 @@ export const p: React.ElementType = memo(({ children }: TParagraphProps) => {
   return <p className="mb-2 whitespace-pre-wrap">{children}</p>;
 });
 
+export const h1: React.ElementType = memo(({ children, ...props }: TParagraphProps) => {
+  return (
+    <h1 className="mb-2 mt-4 text-3xl font-bold" {...props}>
+      {children}
+    </h1>
+  );
+});
+
+export const h2: React.ElementType = memo(({ children, ...props }: TParagraphProps) => {
+  return (
+    <h2 className="mb-2 mt-4 text-2xl font-bold" {...props}>
+      {children}
+    </h2>
+  );
+});
+
+export const h3: React.ElementType = memo(({ children, ...props }: TParagraphProps) => {
+  return (
+    <h3 className="mb-1 mt-3 text-xl font-bold" {...props}>
+      {children}
+    </h3>
+  );
+});
+
+export const ol: React.ElementType = memo(({ children, ...props }: TParagraphProps) => {
+  return (
+    <ol className="ml-6 list-decimal" {...props}>
+      {children}
+    </ol>
+  );
+});
+
+export const ul: React.ElementType = memo(({ children, ...props }: TParagraphProps) => {
+  return (
+    <ul className="ml-6 list-disc" {...props}>
+      {children}
+    </ul>
+  );
+});
+
 const cursor = ' ';
 
 type TContentProps = {
@@ -234,6 +274,11 @@ const Markdown = memo(({ content = '', showCursor, isLatestMessage }: TContentPr
               code,
               a,
               p,
+              h1,
+              h2,
+              h3,
+              ol,
+              ul,
               artifact: Artifact,
             } as {
               [nodeType: string]: React.ElementType;