Fix issue #4769: '[Bug]: Markdown numbering is rendered weird'

frontend/src/components/chat-message.tsx

@@ -75,7 +75,7 @@ export function ChatMessage({
           ul,
           ol,
         }}
-        remarkPlugins={[remarkGfm]}
+        remarkPlugins={[[remarkGfm, { listNumbering: true }]]}
       >
         {message}
       </Markdown>

frontend/src/components/markdown/list.tsx

@@ -13,10 +13,28 @@ export function ul({
 // Custom component to render <ol> in markdown
 export function ol({
   children,
+  ordered,
+  start,
 }: React.ClassAttributes<HTMLElement> &
   React.HTMLAttributes<HTMLElement> &
-  ExtraProps) {
+  ExtraProps & {
+    ordered?: boolean;
+    start?: number;
+  }) {
   return (
-    <ol className="list-decimal ml-5 pl-2 whitespace-normal">{children}</ol>
+    <ol className="ml-5 pl-2 whitespace-normal" style={{ listStyle: 'none' }}>
+      {React.Children.map(children, (child, index) => {
+        if (React.isValidElement(child)) {
+          const originalNumber = child.props?.value || (start || 1) + index;
+          return React.cloneElement(child, {
+            ...child.props,
+            style: { counterReset: `list-item ${originalNumber}` },
+            className: 'custom-list-item',
+            'data-number': originalNumber,
+          });
+        }
+        return child;
+      })}
+    </ol>
   );
 }

frontend/src/index.css

@@ -52,3 +52,16 @@ code {
 .markdown-body th, .markdown-body td {
   padding: 0.1rem 1rem;
 }
+
+.custom-list-item {
+  position: relative;
+  padding-left: 1rem;
+}
+
+.custom-list-item::before {
+  content: attr(data-number) ".";
+  position: absolute;
+  left: -1.5rem;
+  width: 1.5rem;
+  text-align: right;
+}