Merge pull request #98 from DEEIX-AI/fix_blod_style

fix: enhance strong font weight in markdown rendering

Author: chenyme

frontend/app/globals.css

@@ -51,6 +51,7 @@
   --font-heiti: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
   --font-chat: var(--font-sans);
   --font-chat-weight: 400;
+  --font-chat-strong-weight: 700;
   --ui-font-scale: 1;
   --chat-font-scale: 1;
   --radius: 0.5rem;
@@ -115,6 +116,7 @@
   --font-heiti: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
   --font-chat: var(--font-sans);
   --font-chat-weight: 400;
+  --font-chat-strong-weight: 700;
   --radius: 0.5rem;
   --shadow-x: 0;
   --shadow-y: 1px;
@@ -1064,14 +1066,17 @@
 
 :root[data-chat-font-weight="medium"] {
   --font-chat-weight: 500;
+  --font-chat-strong-weight: 700;
 }
 
 :root[data-chat-font-weight="semibold"] {
   --font-chat-weight: 600;
+  --font-chat-strong-weight: 800;
 }
 
 :root[data-chat-font-weight="bold"] {
   --font-chat-weight: 700;
+  --font-chat-strong-weight: 900;
 }
 
 :root[data-font-size="small"] {
@@ -1205,6 +1210,10 @@
     font-weight: var(--font-chat-weight);
   }
 
+  .chat-font-content[data-chat-markdown-scope] :where(strong, strong *, b, b *):not(pre *):not(code):not(code *) {
+    font-weight: var(--font-chat-strong-weight);
+  }
+
   .chat-font-content .katex,
   .chat-font-content .katex
     :where(

frontend/features/chat/components/markdown/streamdown-components.tsx

@@ -73,6 +73,11 @@ type MarkdownParagraphProps = React.HTMLAttributes<HTMLParagraphElement> & {
   node?: unknown;
 };
 
+type MarkdownStrongProps = React.HTMLAttributes<HTMLElement> & {
+  children?: React.ReactNode;
+  node?: unknown;
+};
+
 type MarkdownHeadingProps = React.HTMLAttributes<HTMLHeadingElement> & {
   children?: React.ReactNode;
 };
@@ -945,6 +950,21 @@ export function MarkdownParagraph({ children, className, node: _node, style, ...
   );
 }
 
+export function MarkdownStrong({ children, className, node: _node, style, ...props }: MarkdownStrongProps) {
+  return (
+    <strong
+      {...props}
+      className={cn("font-bold text-foreground", className)}
+      style={{
+        ...sanitizeHTMLStyle(style),
+        fontWeight: "var(--font-chat-strong-weight)",
+      }}
+    >
+      {children}
+    </strong>
+  );
+}
+
 export function MarkdownHTMLDiv({ children, className, node: _node, style }: MarkdownHTMLBlockProps) {
   return (
     <div className={cn("min-w-0 max-w-full", className)} style={sanitizeHTMLStyle(style)}>

frontend/features/chat/components/markdown/streamdown-render.tsx

@@ -31,6 +31,7 @@ import {
   MarkdownHTMLSpan,
   MarkdownHTMLSummary,
   MarkdownArtifactActionsContext,
+  MarkdownStrong,
   ThinkingHeading,
   type MarkdownArtifactActions,
   type MarkdownImageActions,
@@ -188,6 +189,7 @@ const DEFAULT_STREAMDOWN_COMPONENTS = {
   a: MarkdownLink,
   article: MarkdownHTMLArticle,
   aside: MarkdownHTMLAside,
+  b: MarkdownStrong,
   details: MarkdownHTMLDetails,
   div: MarkdownHTMLDiv,
   img: MarkdownImage,
@@ -196,6 +198,7 @@ const DEFAULT_STREAMDOWN_COMPONENTS = {
   pre: CollapsibleCodePre,
   section: MarkdownHTMLSection,
   span: MarkdownHTMLSpan,
+  strong: MarkdownStrong,
   summary: MarkdownHTMLSummary,
 } as const;