A React Native app for the ultimate thinking partner.
cameron.stream
1import React from 'react';
2import { StyleSheet, Platform } from 'react-native';
3import Markdown from '@ronradtke/react-native-markdown-display';
4import { darkTheme } from '../theme';
5import createMarkdownStyles from './markdownStyles';
6
7interface MessageContentProps {
8 content: string;
9 isUser: boolean;
10 isDark?: boolean;
11}
12
13const MessageContent: React.FC<MessageContentProps> = ({ content, isUser, isDark = true }) => {
14 const markdownStyles = React.useMemo(() => createMarkdownStyles({ isUser, isDark }), [isUser, isDark]);
15
16 // Normalize common escaped sequences that sometimes arrive double-escaped
17 const normalized = React.useMemo(() => {
18 if (!content) return '';
19 let s = content
20 .replace(/\r\n/g, '\n') // windows newlines
21 .replace(/\\r\\n/g, '\n') // escaped CRLF
22 .replace(/\\n/g, '\n') // escaped LF
23 .replace(/\\t/g, '\t'); // escaped tab
24 // Normalize common non-Markdown bullets to hyphen-space
25 s = s
26 .replace(/^\s*[–•]\s+/gm, '- ') // en dash or dot bullet
27 .replace(/^\s*—\s+/gm, '- '); // em dash bullet
28 // Unescape common markdown punctuation that sometimes arrives escaped
29 s = s.replace(/\\([*_`#>\-])/g, '$1');
30 // Remove a stray trailing backslash from incomplete escapes
31 s = s.replace(/\\$/, '');
32 // Collapse excessive blank lines to reasonable spacing
33 s = s.replace(/\n{3,}/g, '\n\n');
34 return s;
35 }, [content]);
36
37 return <Markdown style={markdownStyles}>{normalized}</Markdown>;
38};
39
40export default React.memo(MessageContent);