refactor(tarko-web-ui): centralize markdown theme architecture (#1325)

Author: ulivz

multimodal/tarko/agent-web-ui/src/sdk/markdown-renderer/MarkdownRenderer.tsx

@@ -8,7 +8,7 @@ import { useMarkdownComponents } from './hooks/useMarkdownComponents';
 import { ImageModal } from './components/ImageModal';
 import { resetFirstH1Flag } from './components/Headings';
 import { scrollToElement } from './utils';
-import { useDarkMode } from '@/common/hooks/useDarkMode';
+import { MarkdownThemeProvider, useMarkdownStyles } from './context/MarkdownThemeContext';
 import 'remark-github-blockquote-alert/alert.css';
 import './syntax-highlight.css';
 import './markdown.css';
@@ -25,7 +25,19 @@ interface MarkdownRendererProps {
  * MarkdownRenderer component
  * Renders markdown content with custom styling and enhanced functionality
  */
-export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
+export const MarkdownRenderer: React.FC<MarkdownRendererProps> = (props) => {
+  return (
+    <MarkdownThemeProvider>
+      <MarkdownRendererContent {...props} />
+    </MarkdownThemeProvider>
+  );
+};
+
+/**
+ * Internal component that uses the theme context
+ * Separated to ensure theme provider is available
+ */
+const MarkdownRendererContent: React.FC<MarkdownRendererProps> = ({
   content,
   publishDate,
   author,
@@ -34,7 +46,7 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
 }) => {
   const [openImage, setOpenImage] = useState<string | null>(null);
   const [renderError, setRenderError] = useState<Error | null>(null);
-  const isDarkMode = useDarkMode();
+  const { themeClass, colors } = useMarkdownStyles();
 
   /**
    * Handle image click for modal preview
@@ -93,8 +105,8 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
   /**
    * Determine theme class and merge with markdown content styles
    */
-  const themeClass = forceDarkTheme || isDarkMode ? 'dark' : 'light';
-  const markdownContentClass = `${themeClass} markdown-content font-inter leading-relaxed text-gray-800 dark:text-gray-200 ${className}`;
+  const finalThemeClass = forceDarkTheme ? 'dark' : themeClass;
+  const markdownContentClass = `${finalThemeClass} markdown-content font-inter leading-relaxed ${colors.text.primary} ${className}`;
 
   try {
     return (

multimodal/tarko/agent-web-ui/src/sdk/markdown-renderer/components/Headings.tsx

@@ -1,5 +1,6 @@
 import React, { useRef } from 'react';
 import { generateId } from '../utils';
+import { useHeadingStyles } from '../context/MarkdownThemeContext';
 
 interface HeadingProps {
   children: React.ReactNode;
@@ -23,29 +24,27 @@ export const resetFirstH1Flag = (): void => {
  */
 export const Heading: React.FC<HeadingProps> = ({ children, level }) => {
   const id = generateId(children?.toString());
-
-  const getHeadingStyles = () => {
-    const baseStyles =
-      'group scroll-mt-20 flex items-center font-semibold leading-tight text-gray-900 dark:text-gray-100';
-
+  const headingStyles = useHeadingStyles();
+  
+  const getHeadingClassName = () => {
     switch (level) {
       case 1:
-        return `${baseStyles} text-3xl font-bold mt-6 mb-2 pb-2 border-b border-gray-200 dark:border-gray-700`;
+        return headingStyles.h1;
       case 2:
-        return `${baseStyles} text-2xl font-bold mt-6 mb-2 pb-2`;
+        return headingStyles.h2;
       case 3:
-        return `${baseStyles} text-xl font-semibold mt-8 mb-3 text-gray-800 dark:text-gray-200`;
+        return headingStyles.h3;
       case 4:
-        return `${baseStyles} text-md font-semibold mt-6 mb-2 text-gray-800 dark:text-gray-200`;
+        return headingStyles.h4;
       default:
-        return `${baseStyles} text-sm font-medium mt-4 mb-2 text-gray-700 dark:text-gray-300`;
+        return headingStyles.h5h6;
     }
   };
 
   const HeadingTag = `h${level}` as keyof JSX.IntrinsicElements;
 
   return (
-    <HeadingTag id={id} className={getHeadingStyles()}>
+    <HeadingTag id={id} className={getHeadingClassName()}>
       {children}
     </HeadingTag>
   );

multimodal/tarko/agent-web-ui/src/sdk/markdown-renderer/components/TextElements.tsx

@@ -1,54 +1,37 @@
 import React from 'react';
+import { useTextStyles } from '../context/MarkdownThemeContext';
 
 /**
- * Text element styles - Updated with merged tailwind classes
+ * Optimized text components using shared theme context
+ * All components access the same pre-computed styles for better performance
  */
-const TEXT_STYLES = {
-  paragraph: 'my-2 text-gray-800 dark:text-gray-200 leading-relaxed text-base',
-  unorderedList: 'my-2 list-disc pl-6 text-gray-800 dark:text-gray-200 text-base',
-  orderedList: 'my-2 list-decimal pl-6 text-gray-800 dark:text-gray-200 text-base',
-  listItem: 'my-1 text-base',
-  blockquote:
-    'border-l-4 border-gray-200 dark:border-slate-600 pl-4 my-5 italic text-slate-600 dark:text-slate-400',
-  horizontalRule: 'my-8 border-t border-gray-200 dark:border-gray-700',
-};
 
-/**
- * Paragraph component
- */
-export const Paragraph: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <p className={TEXT_STYLES.paragraph}>{children}</p>
-);
+export const Paragraph: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const styles = useTextStyles();
+  return <p className={styles.paragraph}>{children}</p>;
+};
 
-/**
- * Unordered list component
- */
-export const UnorderedList: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <ul className={TEXT_STYLES.unorderedList}>{children}</ul>
-);
+export const UnorderedList: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const styles = useTextStyles();
+  return <ul className={styles.unorderedList}>{children}</ul>;
+};
 
-/**
- * Ordered list component
- */
-export const OrderedList: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <ol className={TEXT_STYLES.orderedList}>{children}</ol>
-);
+export const OrderedList: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const styles = useTextStyles();
+  return <ol className={styles.orderedList}>{children}</ol>;
+};
 
-/**
- * List item component
- */
-export const ListItem: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <li className={TEXT_STYLES.listItem}>{children}</li>
-);
+export const ListItem: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const styles = useTextStyles();
+  return <li className={styles.listItem}>{children}</li>;
+};
 
-/**
- * Blockquote component
- */
-export const Blockquote: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <blockquote className={TEXT_STYLES.blockquote}>{children}</blockquote>
-);
+export const Blockquote: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const styles = useTextStyles();
+  return <blockquote className={styles.blockquote}>{children}</blockquote>;
+};
 
-/**
- * Horizontal rule component
- */
-export const HorizontalRule: React.FC = () => <hr className={TEXT_STYLES.horizontalRule} />;
+export const HorizontalRule: React.FC = () => {
+  const styles = useTextStyles();
+  return <hr className={styles.horizontalRule} />;
+};

multimodal/tarko/agent-web-ui/src/sdk/markdown-renderer/context/MarkdownThemeContext.tsx

@@ -0,0 +1,100 @@
+import React, { createContext, useContext, useMemo, type ReactNode } from 'react';
+import { useMarkdownTheme, type ThemeColors } from '../hooks/useMarkdownTheme';
+
+/**
+ * Computed styles for all markdown elements
+ * Centralized to avoid duplicate calculations across components
+ */
+interface MarkdownStyles {
+  text: {
+    paragraph: string;
+    unorderedList: string;
+    orderedList: string;
+    listItem: string;
+    blockquote: string;
+    horizontalRule: string;
+  };
+  headings: {
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5h6: string;
+  };
+  colors: ThemeColors;
+  themeClass: string;
+}
+
+/**
+ * Generate all markdown styles in one place
+ * Prevents style recalculation across multiple components
+ */
+const createMarkdownStyles = (colors: ThemeColors, themeClass: string): MarkdownStyles => {
+  const baseHeadingStyles = 'group scroll-mt-20 flex items-center font-semibold leading-tight';
+  
+  return {
+    text: {
+      paragraph: `my-2 ${colors.text.primary} leading-relaxed text-base`,
+      unorderedList: `my-2 list-disc pl-6 ${colors.text.primary} text-base`,
+      orderedList: `my-2 list-decimal pl-6 ${colors.text.primary} text-base`,
+      listItem: 'my-1 text-base',
+      blockquote: `border-l-4 ${colors.border.quote} pl-4 my-5 italic ${colors.text.muted}`,
+      horizontalRule: `my-8 border-t ${colors.border.default}`,
+    },
+    headings: {
+      h1: `${baseHeadingStyles} ${colors.text.heading} text-3xl font-bold mt-6 mb-2 pb-2 border-b ${colors.border.default}`,
+      h2: `${baseHeadingStyles} ${colors.text.heading} text-2xl font-bold mt-6 mb-2 pb-2`,
+      h3: `${baseHeadingStyles} ${colors.text.primary} text-xl font-semibold mt-8 mb-3`,
+      h4: `${baseHeadingStyles} ${colors.text.primary} text-md font-semibold mt-6 mb-2`,
+      h5h6: `${baseHeadingStyles} ${colors.text.secondary} text-sm font-medium mt-4 mb-2`,
+    },
+    colors,
+    themeClass,
+  };
+};
+
+/**
+ * Context for sharing markdown theme styles across components
+ * Prevents duplicate hook calls and style calculations
+ */
+const MarkdownThemeContext = createContext<MarkdownStyles | null>(null);
+
+/**
+ * Provider component that calculates styles once and shares them
+ * Optimized for performance with memoization
+ */
+export const MarkdownThemeProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const { colors, themeClass } = useMarkdownTheme();
+  
+  // Memoize the entire style object to prevent recalculation
+  const styles = useMemo(() => {
+    return createMarkdownStyles(colors, themeClass);
+  }, [colors, themeClass]);
+  
+  return (
+    <MarkdownThemeContext.Provider value={styles}>
+      {children}
+    </MarkdownThemeContext.Provider>
+  );
+};
+
+/**
+ * Optimized hook to access markdown theme styles
+ * No additional calculations, just context access
+ */
+export const useMarkdownStyles = (): MarkdownStyles => {
+  const context = useContext(MarkdownThemeContext);
+  
+  if (!context) {
+    throw new Error('useMarkdownStyles must be used within MarkdownThemeProvider');
+  }
+  
+  return context;
+};
+
+/**
+ * Convenience hooks for specific style categories
+ */
+export const useTextStyles = () => useMarkdownStyles().text;
+export const useHeadingStyles = () => useMarkdownStyles().headings;
+export const useThemeColors = () => useMarkdownStyles().colors;

multimodal/tarko/agent-web-ui/src/sdk/markdown-renderer/hooks/useMarkdownTheme.ts

@@ -0,0 +1,75 @@
+import { useMemo } from 'react';
+import { useDarkMode } from '@/common/hooks/useDarkMode';
+
+/**
+ * Theme color definitions - cached and optimized
+ * Separated from hook for better performance and reusability
+ */
+const THEME_COLORS = {
+  light: {
+    text: {
+      primary: 'text-gray-800',
+      secondary: 'text-gray-700',
+      heading: 'text-gray-900',
+      muted: 'text-gray-600',
+    },
+    background: {
+      code: 'bg-gray-50',
+      quote: 'bg-gray-50',
+    },
+    border: {
+      default: 'border-gray-200',
+      quote: 'border-gray-200',
+    }
+  },
+  dark: {
+    text: {
+      primary: 'text-gray-200',
+      secondary: 'text-gray-300',
+      heading: 'text-gray-100',
+      muted: 'text-gray-400',
+    },
+    background: {
+      code: 'bg-gray-800/50',
+      quote: 'bg-gray-800/30',
+    },
+    border: {
+      default: 'border-gray-700',
+      quote: 'border-slate-600',
+    }
+  }
+} as const;
+
+/**
+ * Optimized theme management hook with memoization
+ * Provides consistent color schemes and theme detection across all markdown elements
+ * 
+ * Performance optimizations:
+ * - Memoized color object to prevent unnecessary re-renders
+ * - Static theme definitions for better bundling
+ * - Minimal object creation on theme changes
+ */
+export const useMarkdownTheme = () => {
+  const isDarkMode = useDarkMode();
+  
+  // Memoize the color object to prevent unnecessary re-renders
+  const colors = useMemo(() => {
+    return THEME_COLORS[isDarkMode ? 'dark' : 'light'];
+  }, [isDarkMode]);
+  
+  const themeClass = isDarkMode ? 'dark' : 'light';
+
+  return {
+    isDarkMode,
+    themeClass,
+    colors,
+  };
+};
+
+/**
+ * Type definitions for better TypeScript support
+ */
+export type ThemeColors = typeof THEME_COLORS.light;
+export type TextColors = ThemeColors['text'];
+export type BackgroundColors = ThemeColors['background'];
+export type BorderColors = ThemeColors['border'];