vibefast-cli 0.1.1

package/recipes/chatbot/apps/native/src/features/chatbot/components/chat-markdown.tsx

@@ -0,0 +1,575 @@
+/**
+ * ChatMarkdown component for rendering markdown content in chat messages.
+ *
+ * This component has been refactored to improve modularity:
+ * - CodeBlock component extracted to ./markdown/code-block.tsx
+ * - TableRenderer component extracted to ./markdown/table-renderer.tsx
+ *
+ * The remaining code consists primarily of:
+ * - Style definitions (markdownStyles object)
+ * - Render rules configuration
+ * - Theme integration
+ *
+ * Requirements addressed:
+ * - 5.1: Extract CodeBlock component into separate file
+ * - 5.2: Extract table rendering logic into dedicated file
+ * - 5.3: Add JSDoc comments to exported functions
+ *
+ * Note: This file still exceeds 300 lines due to extensive style definitions
+ * and render rules, but the complex logic has been extracted into separate modules.
+ */
+
+import * as Clipboard from 'expo-clipboard';
+import MarkdownIt from 'markdown-it';
+import React, { useCallback, useEffect, useMemo } from 'react';
+import {
+  Image,
+  type ImageStyle,
+  Linking,
+  Platform,
+  StyleSheet,
+  Text,
+  type TextStyle,
+  UIManager,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import Markdown, { type RenderRules } from 'react-native-markdown-display';
+import { atomOneDark, github } from 'react-syntax-highlighter/styles/hljs';
+
+import { useToast } from '@/components/ui/utils';
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import { CodeBlock, TableRenderer } from './markdown';
+
+const md = new MarkdownIt({
+  linkify: true,
+  breaks: true,
+});
+
+type ChatMarkdownProps = {
+  content: string;
+};
+
+/**
+ * Renders markdown content with syntax highlighting, tables, and rich formatting.
+ *
+ * @param content - Markdown string to render
+ * @param onPrepareLayoutAnimation - Optional callback to prepare FlashList for layout changes
+ * @returns Rendered markdown content
+ */
+export const ChatMarkdown = React.memo(function ChatMarkdown({
+  content,
+}: ChatMarkdownProps) {
+  const theme = useThemeConfig();
+  const toast = useToast();
+
+  useEffect(() => {
+    if (
+      Platform.OS === 'android' &&
+      typeof UIManager.setLayoutAnimationEnabledExperimental === 'function'
+    ) {
+      UIManager.setLayoutAnimationEnabledExperimental(true);
+    }
+  }, []);
+
+  const textColor = theme.colors.text as string;
+  const linkColor = theme.colors.primary as string;
+  const codeBg = theme.colors.muted as string;
+  const codeFg = theme.colors.foreground as string;
+  const subtleText = theme.colors.mutedForeground as string;
+  const borderColor = theme.colors.border as string;
+  const isDarkMode = theme.dark ?? false;
+
+  const monospaceFontFamily = useMemo(
+    () =>
+      Platform.select({
+        ios: 'Menlo-Regular',
+        android: 'monospace',
+        default: 'Menlo',
+      }) ?? 'Menlo',
+    [],
+  );
+
+  const columnDividerWidth = StyleSheet.hairlineWidth || 0.5;
+
+  const markdownStyles = useMemo(() => {
+    const codeBlockStyle = {
+      backgroundColor: codeBg,
+      borderBlockColor: borderColor,
+      paddingTop: 24,
+      paddingHorizontal: 14,
+      paddingBottom: 20,
+      borderRadius: 10,
+      marginVertical: 12,
+    } satisfies ViewStyle;
+
+    const styles = {
+      body: { fontSize: 17, lineHeight: 24, color: textColor },
+      text: { fontSize: 17, lineHeight: 24, color: textColor },
+      paragraph: { marginBottom: 10, color: textColor },
+      link: {
+        color: linkColor,
+        textDecorationLine: 'underline' as TextStyle['textDecorationLine'],
+        fontWeight: '500' as TextStyle['fontWeight'],
+      },
+      strong: {
+        fontWeight: '600' as TextStyle['fontWeight'],
+        color: textColor,
+      },
+      em: {
+        fontStyle: 'italic' as TextStyle['fontStyle'],
+        color: textColor,
+      },
+      code_inline: {
+        fontFamily: monospaceFontFamily,
+        fontSize: 15,
+        backgroundColor: codeBg,
+        borderColor: borderColor,
+        color: codeFg,
+        paddingHorizontal: 6,
+        paddingVertical: 3,
+        borderRadius: 6,
+      },
+      code_block: codeBlockStyle,
+      fence: codeBlockStyle,
+      blockquote: {
+        color: textColor,
+        backgroundColor: codeBg,
+        borderLeftColor: linkColor,
+        borderLeftWidth: 3,
+        paddingLeft: 12,
+        marginVertical: 12,
+      },
+      bullet_list: {
+        marginVertical: 8,
+        paddingLeft: 0,
+      },
+      ordered_list: {
+        marginVertical: 8,
+        paddingLeft: 0,
+      },
+      list_item: { marginBottom: 6, color: textColor },
+      table: {
+        minWidth: '100%',
+        backgroundColor: theme.colors.background,
+      },
+      thead: {
+        backgroundColor: codeBg,
+      },
+      tbody: {},
+      tr: {
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderColor,
+        flexDirection: 'row',
+      },
+      th: {
+        flexGrow: 0,
+        flexShrink: 0,
+        minWidth: 140,
+        paddingVertical: 10,
+        paddingHorizontal: 16,
+        backgroundColor: codeBg,
+        borderLeftWidth: columnDividerWidth,
+        borderColor,
+      },
+      td: {
+        flexGrow: 0,
+        flexShrink: 0,
+        minWidth: 140,
+        paddingVertical: 10,
+        paddingHorizontal: 16,
+        borderLeftWidth: columnDividerWidth,
+        borderColor,
+      },
+      heading1: {
+        fontSize: 28,
+        fontWeight: '700',
+        color: textColor,
+        marginTop: 18,
+        marginBottom: 12,
+      },
+      heading2: {
+        fontSize: 22,
+        fontWeight: '700',
+        color: textColor,
+        marginTop: 16,
+        marginBottom: 10,
+      },
+      heading3: {
+        fontSize: 19,
+        fontWeight: '600',
+        color: textColor,
+        marginTop: 14,
+        marginBottom: 8,
+      },
+      heading4: {
+        fontSize: 17,
+        fontWeight: '600',
+        color: textColor,
+        marginTop: 12,
+        marginBottom: 8,
+      },
+      heading5: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: textColor,
+        marginTop: 10,
+        marginBottom: 6,
+      },
+      heading6: {
+        fontSize: 15,
+        fontWeight: '600' as TextStyle['fontWeight'],
+        color: textColor,
+        marginTop: 8,
+        marginBottom: 6,
+      },
+      hr: {
+        backgroundColor: codeBg,
+        height: 1,
+        marginVertical: 14,
+      },
+      imageWrapper: {
+        marginVertical: 8,
+        borderRadius: 14,
+        overflow: 'hidden',
+      },
+      image: {
+        width: '100%',
+        aspectRatio: 16 / 9,
+        backgroundColor: codeBg,
+      },
+      image_caption: {
+        marginTop: 6,
+        fontSize: 13,
+        color: subtleText,
+        textAlign: 'center',
+      },
+    };
+
+    return styles as Record<string, TextStyle | ViewStyle | ImageStyle>;
+  }, [
+    borderColor,
+    codeBg,
+    codeFg,
+    linkColor,
+    subtleText,
+    textColor,
+    monospaceFontFamily,
+    theme.colors.background,
+    columnDividerWidth,
+  ]);
+
+  const codeSyntaxTheme = useMemo(() => {
+    const baseTheme = isDarkMode ? atomOneDark : github;
+    return {
+      ...baseTheme,
+      hljs: {
+        ...baseTheme.hljs,
+        background: 'transparent',
+        color: codeFg,
+      },
+    };
+  }, [codeFg, isDarkMode]);
+
+  const codeContentStyle = useMemo(
+    () =>
+      ({
+        backgroundColor: 'transparent',
+        padding: 0,
+        margin: 0,
+      }) satisfies ViewStyle,
+    [],
+  );
+
+  const tableScrollViewStyle = useMemo(
+    () =>
+      ({
+        marginVertical: 0,
+      }) satisfies ViewStyle,
+    [],
+  );
+
+  const tableScrollContentStyle = useMemo(
+    () =>
+      ({
+        flexGrow: 1,
+      }) satisfies ViewStyle,
+    [],
+  );
+
+  const tableOuterStyle = useMemo(
+    () =>
+      ({
+        borderWidth: 1,
+        borderColor,
+        borderRadius: 10,
+        overflow: 'hidden',
+        marginVertical: 12,
+        backgroundColor: theme.colors.background,
+      }) satisfies ViewStyle,
+    [borderColor, theme.colors.background],
+  );
+
+  const codeActionsContainerStyle = useMemo(
+    () =>
+      ({
+        position: 'absolute',
+        top: 12,
+        right: 12,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+      }) satisfies ViewStyle,
+    [],
+  );
+
+  const codeActionButtonBaseStyle = useMemo(
+    () =>
+      ({
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 999,
+        borderWidth: 1,
+        borderColor,
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        backgroundColor: isDarkMode
+          ? 'rgba(15, 15, 15, 0.9)'
+          : 'rgba(255, 255, 255, 0.92)',
+      }) satisfies ViewStyle,
+    [borderColor, isDarkMode],
+  );
+
+  const codeToggleButtonSpacingStyle = useMemo(
+    () =>
+      ({
+        marginLeft: 16,
+      }) satisfies ViewStyle,
+    [],
+  );
+
+  const codeContentContainerStyle = useMemo(
+    () =>
+      ({
+        overflow: 'hidden',
+        marginTop: 24,
+      }) satisfies ViewStyle,
+    [],
+  );
+
+  const copyCodeToClipboard = useCallback(
+    async (code: string) => {
+      try {
+        if (!code.trim()) {
+          toast.warning(translate('chatbot.empty_message'), {
+            duration: 2000,
+          });
+          return;
+        }
+
+        await Clipboard.setStringAsync(code);
+        toast.success(translate('chatbot.copy_code_success'), {
+          duration: 2000,
+        });
+      } catch (error) {
+        console.error('[CHATBOT_FRONTEND] Copy code failed:', {
+          error: error instanceof Error ? error.message : 'Unknown error',
+        });
+        toast.error(translate('chatbot.copy_code_failed'), {
+          duration: 3000,
+        });
+      }
+    },
+    [toast],
+  );
+
+  // Memoize CodeBlock wrapper to pass all required props
+  const renderCodeBlockComponent = useCallback(
+    (
+      containerStyle: ViewStyle | TextStyle | ImageStyle,
+      content: string,
+      language: string,
+    ) => {
+      return (
+        <CodeBlock
+          containerStyle={containerStyle}
+          content={content}
+          language={language}
+          codeSyntaxTheme={codeSyntaxTheme}
+          monospaceFontFamily={monospaceFontFamily}
+          subtleText={subtleText}
+          codeContentStyle={codeContentStyle}
+          codeActionsContainerStyle={codeActionsContainerStyle}
+          codeActionButtonBaseStyle={codeActionButtonBaseStyle}
+          codeToggleButtonSpacingStyle={codeToggleButtonSpacingStyle}
+          codeContentContainerStyle={codeContentContainerStyle}
+          onCopyCode={copyCodeToClipboard}
+        />
+      );
+    },
+    [
+      codeSyntaxTheme,
+      monospaceFontFamily,
+      subtleText,
+      codeContentStyle,
+      codeActionsContainerStyle,
+      codeActionButtonBaseStyle,
+      codeToggleButtonSpacingStyle,
+      codeContentContainerStyle,
+      copyCodeToClipboard,
+    ],
+  );
+
+  const handleLinkPress = useCallback((url: string) => {
+    if (!url) {
+      return false;
+    }
+
+    Linking.openURL(url).catch(() => {
+      // Swallow errors so the renderer keeps flowing even if the link fails.
+    });
+
+    return true;
+  }, []);
+
+  const rules = useMemo<RenderRules>(() => {
+    const renderCodeBlock = (
+      node: any,
+      _children: React.ReactNode[],
+      _parent: any[],
+      styles: Record<string, any>,
+      _inheritedStyles: Record<string, any> = {},
+    ) => {
+      const rawContent = typeof node.content === 'string' ? node.content : '';
+      const trimmed = rawContent.replace(/\n+$/u, '');
+      const content = trimmed.length > 0 ? trimmed : rawContent;
+
+      const info = node.attributes?.info;
+      const className = node.attributes?.class;
+      const languageFromInfo =
+        typeof info === 'string' && info.trim().length > 0
+          ? info.trim().split(/\s+/u)[0]
+          : undefined;
+      const languageFromClass =
+        typeof className === 'string'
+          ? (className.match(/language-([\w-]+)/u)?.[1] ??
+            className.match(/lang-([\w-]+)/u)?.[1])
+          : undefined;
+      const language = (languageFromInfo ?? languageFromClass ?? '')
+        .replace(/^language-/u, '')
+        .toLowerCase();
+
+      const containerStyle =
+        styles.code_block ?? styles.fence ?? styles.code_inline;
+
+      return (
+        <React.Fragment key={node.key}>
+          {renderCodeBlockComponent(containerStyle, content, language)}
+        </React.Fragment>
+      );
+    };
+
+    return {
+      code: (node, _children, _parent, styles) => {
+        const content = node.content || '';
+        return (
+          <Text key={node.key} style={styles.code_inline}>
+            {content}
+          </Text>
+        );
+      },
+      code_block: renderCodeBlock,
+      fence: renderCodeBlock,
+      table: (node, children, _parent, styles) => {
+        return (
+          <TableRenderer
+            node={node}
+            styles={styles}
+            tableOuterStyle={tableOuterStyle}
+            tableScrollContentStyle={tableScrollContentStyle}
+            tableScrollViewStyle={tableScrollViewStyle}
+            columnDividerWidth={columnDividerWidth}
+          >
+            {children}
+          </TableRenderer>
+        );
+      },
+      link: (node, children, _parent, styles) => {
+        const href =
+          typeof node.attributes?.href === 'string' ? node.attributes.href : '';
+        const titleAttr =
+          typeof node.attributes?.title === 'string'
+            ? node.attributes.title.trim()
+            : '';
+        const fallbackLabel =
+          typeof node.content === 'string' && node.content.trim().length > 0
+            ? node.content.trim()
+            : href;
+        const linkLabel =
+          titleAttr.length > 0
+            ? titleAttr
+            : children && children.length > 0
+              ? children
+              : fallbackLabel;
+
+        return (
+          <Text
+            key={node.key}
+            style={styles.link}
+            onPress={() => {
+              if (href) {
+                handleLinkPress(href);
+              }
+            }}
+          >
+            {linkLabel}
+          </Text>
+        );
+      },
+      image: (node, _children, _parent, styles) => {
+        const sourceUri = node.attributes?.src;
+        if (!sourceUri) {
+          return null;
+        }
+
+        const alt = node.attributes?.alt ?? '';
+        const caption = alt.trim().length > 0 ? alt : undefined;
+
+        return (
+          <View key={node.key} style={styles.imageWrapper}>
+            <Image
+              source={{ uri: sourceUri }}
+              style={styles.image}
+              resizeMode="cover"
+              accessible
+              accessibilityLabel={caption ?? 'Markdown image'}
+            />
+            {caption ? (
+              <Text style={styles.image_caption}>{caption}</Text>
+            ) : null}
+          </View>
+        );
+      },
+    };
+  }, [
+    renderCodeBlockComponent,
+    tableOuterStyle,
+    tableScrollContentStyle,
+    tableScrollViewStyle,
+    columnDividerWidth,
+    handleLinkPress,
+  ]);
+
+  return (
+    <Markdown
+      markdownit={md}
+      style={markdownStyles}
+      onLinkPress={handleLinkPress}
+      rules={rules}
+    >
+      {content}
+    </Markdown>
+  );
+});