vibefast-cli 0.7.0 → 0.7.1

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

@@ -1,576 +0,0 @@
-// vibefast license: c1e9fcd2-muhammad
-/**
- * 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>
-  );
-});