feat: add markdown code block copy button

src/components/CodeBlockHeader/CodeBlockHeader.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {View, Text, TouchableOpacity} from 'react-native';
+
+import Clipboard from '@react-native-clipboard/clipboard';
+import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
+
+import {CopyIcon} from '../../assets/icons';
+
+import {useTheme} from '../../hooks';
+
+import {createStyles} from './styles';
+
+interface CodeBlockHeaderProps {
+  language: string;
+  content: string;
+}
+
+const hapticOptions = {
+  enableVibrateFallback: true,
+  ignoreAndroidSystemSettings: false,
+};
+
+export const CodeBlockHeader: React.FC<CodeBlockHeaderProps> = ({
+  language,
+  content,
+}) => {
+  const theme = useTheme();
+  const styles = createStyles(theme);
+
+  const handleCopy = () => {
+    ReactNativeHapticFeedback.trigger('impactLight', hapticOptions);
+    Clipboard.setString(content.trim());
+  };
+
+  return (
+    <View style={styles.codeHeader}>
+      <Text style={styles.codeLanguage} numberOfLines={1} ellipsizeMode="tail">
+        {language}
+      </Text>
+      <TouchableOpacity onPress={handleCopy} style={styles.iconTouchable}>
+        <CopyIcon
+          width={16}
+          height={16}
+          stroke={theme.colors.onSurfaceVariant}
+        />
+      </TouchableOpacity>
+    </View>
+  );
+};

src/components/CodeBlockHeader/index.ts

@@ -0,0 +1 @@
+export * from './CodeBlockHeader';

src/components/CodeBlockHeader/styles.ts

@@ -0,0 +1,21 @@
+import {StyleSheet} from 'react-native';
+
+import {Theme} from '../../utils/types';
+
+export const createStyles = (theme: Theme) =>
+  StyleSheet.create({
+    codeHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    },
+    codeLanguage: {
+      color: theme.colors.onSurfaceVariant,
+      fontSize: 12,
+    },
+    iconTouchable: {
+      padding: 12, // 16 (icon) + 10*2 = 40 for accessibility
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+  });

src/components/MarkdownView/MarkdownView.tsx

@@ -10,6 +10,7 @@ import RenderHtml, {
 
 import {useTheme} from '../../hooks';
 import {ThinkingBubble} from '../ThinkingBubble';
+import {CodeBlockHeader} from '../CodeBlockHeader';
 
 import {createTagsStyles} from './styles';
 
@@ -46,6 +47,26 @@ const ThinkingRenderer = ({TDefaultRenderer, ...props}: any) => {
   );
 };
 
+const CodeRenderer = ({TDefaultRenderer, ...props}: any) => {
+  const isCodeBlock = props?.tnode?.parent?.tagName === 'pre';
+
+  // if not code block, use the default renderer
+  if (!isCodeBlock) {
+    return <TDefaultRenderer {...props} />;
+  }
+
+  const language =
+    props.tnode?.domNode?.attribs?.class?.replace('language-', '') || 'code';
+  const content = props.tnode?.domNode?.children?.[0]?.data || '';
+
+  return (
+    <View>
+      <CodeBlockHeader language={language} content={content} />
+      <TDefaultRenderer {...props} />
+    </View>
+  );
+};
+
 export const MarkdownView: React.FC<MarkdownViewProps> = React.memo(
   ({markdownText, maxMessageWidth, selectable = false}) => {
     const _maxWidth = maxMessageWidth;
@@ -76,6 +97,7 @@ export const MarkdownView: React.FC<MarkdownViewProps> = React.memo(
         think: (props: any) => ThinkingRenderer(props),
         thought: (props: any) => ThinkingRenderer(props),
         thinking: (props: any) => ThinkingRenderer(props),
+        code: (props: any) => CodeRenderer(props),
       }),
       [],
     );