feat(ui): style Markdown better (#1468)

Author: PetrBulanek

apps/agentstack-ui/src/components/MarkdownContent/MarkdownContent.module.scss

@@ -5,27 +5,31 @@
 
 .root {
   @include type-style(body-01);
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
 
   > * + * {
     margin-block-start: rem(20px);
   }
 
-  p {
+  p,
+  ol,
+  ul,
+  blockquote {
     font-size: inherit;
     line-height: inherit;
     letter-spacing: inherit;
   }
 
+  ul,
+  ol {
+    padding-inline-start: $spacing-06;
+  }
+
   ul {
     list-style: disc;
-    padding-inline-start: $spacing-06;
   }
 
   ol {
     list-style: decimal;
-    padding-inline-start: $spacing-06;
   }
 
   ol ul {
@@ -47,13 +51,24 @@
     }
   }
 
+  h1 {
+    @include type-style(heading-04);
+    margin-block-end: 0;
+  }
+
   h2 {
     @include type-style(heading-03);
+    font-weight: 600;
+  }
+
+  h3 {
+    font-size: rem(18px);
+    line-height: math.div(24, 18);
+    font-weight: 600;
   }
 
-  h3,
   h4 {
-    @include type-style(heading-01);
+    @include type-style(heading-02);
   }
 
   h5,
@@ -73,4 +88,15 @@
   pre {
     white-space: pre-wrap;
   }
+
+  blockquote {
+    padding-block: $spacing-03;
+    padding-inline-start: $spacing-05;
+    border-inline-start: $spacing-01 solid $border-subtle-00;
+    color: $text-secondary;
+  }
+
+  a {
+    overflow-wrap: anywhere;
+  }
 }

apps/agentstack-ui/src/components/MarkdownContent/components/Table.module.scss

@@ -11,6 +11,8 @@
 
 .table {
   @include type-style(body-01);
+  table-layout: fixed;
+  inline-size: 100%;
   &,
   th,
   td {
@@ -23,4 +25,7 @@
   th {
     font-weight: bold;
   }
+  thead th {
+    vertical-align: middle;
+  }
 }

apps/agentstack-ui/src/modules/runs/chat/ChatAgentMessage.tsx

@@ -4,6 +4,7 @@
  */
 
 import { rem } from '@carbon/layout';
+import type { RefObject } from 'react';
 import { useCallback, useEffect, useRef } from 'react';
 
 import { Spinner } from '#components/Spinner/Spinner.tsx';
@@ -26,7 +27,7 @@ import classes from './ChatAgentMessage.module.scss';
 interface Props {
   message: UIAgentMessage;
   isLast?: boolean;
-  containerScrollableRef?: React.RefObject<HTMLDivElement>;
+  containerScrollableRef?: RefObject<HTMLDivElement | null>;
   onShow?: () => void;
 }
 

apps/agentstack-ui/src/modules/runs/chat/ChatMessagesView.tsx

@@ -6,7 +6,6 @@
 import { ArrowDown } from '@carbon/icons-react';
 import { IconButton, InlineLoading } from '@carbon/react';
 import { useRouter } from 'next/navigation';
-import type { RefObject } from 'react';
 
 import { Container } from '#components/layouts/Container.tsx';
 import { useIsScrolled } from '#hooks/useIsScrolled.ts';
@@ -64,7 +63,7 @@ export function ChatMessagesView() {
                         message={message}
                         onShow={isLast ? scrollToBottom : undefined}
                         isLast={isLast}
-                        containerScrollableRef={scrollElementRef as RefObject<HTMLDivElement>}
+                        containerScrollableRef={scrollElementRef}
                       />
                     )}