feat: add markdown parsing fixes, optimistic code capture and various improvements

Author: isekovanic

package/src/components/Message/MessageSimple/utils/generateMarkdownText.ts

@@ -33,14 +33,21 @@ export const generateMarkdownText = (text?: string) => {
     resultText = resultText.replace(mentionsRegex, `@${displayLink}`);
   }
 
-  // FIXME: Should not happen within codeblocks.
-  resultText = resultText.replace(/[<"'>]/g, '\\$&');
+  // Escape the " and ' characters, except in code blocks where we deem this allowed.
+  resultText = resultText.replace(/(```[\s\S]*?```|`.*?`)|[<"'>]/g, (match, code) => {
+    if (code) return code;
+    return `\\${match}`;
+  });
 
   // Remove whitespaces that come directly after newlines except in code blocks where we deem this allowed.
   resultText = resultText.replace(/(```[\s\S]*?```|`.*?`)|\n[ ]{2,}/g, (_, code) => {
     if (code) return code;
     return '\n';
   });
 
+  // Always replace \n``` with \n\n``` to force the markdown state machine to treat it as a separate block. Otherwise, code blocks inside of list
+  // items for example were broken. We clean up the code block closing state within the rendering itself.
+  resultText = resultText.replace(/\n```/g, '\n\n```');
+
   return resultText;
 };

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -91,6 +91,7 @@ const defaultMarkdownStyles: MarkdownStyle = {
     backgroundColor: '#DDDDDD',
     fontFamily: Platform.OS === 'ios' ? 'Courier' : 'Monospace',
     fontWeight: '500',
+    marginVertical: 8,
   },
   inlineCode: {
     fontSize: 13,
@@ -129,28 +130,25 @@ const defaultMarkdownStyles: MarkdownStyle = {
     borderColor: '#222222',
     borderRadius: 3,
     borderWidth: 1,
+    flex: 1,
+    flexDirection: 'row',
   },
   tableHeader: {
     backgroundColor: '#222222',
-    flex: 1,
+    flexDirection: 'row',
     justifyContent: 'space-around',
   },
   tableHeaderCell: {
     color: '#ffffff',
-    fontWeight: 'bold',
-    padding: 5,
+    fontWeight: '500',
   },
   tableRow: {
-    //borderBottomWidth: 1,
+    alignItems: 'center',
     borderColor: '#222222',
-    flexDirection: 'row',
     justifyContent: 'space-around',
   },
   tableRowCell: {
-    padding: 5,
-  },
-  tableRowLast: {
-    borderColor: 'transparent',
+    flex: 1,
   },
 };
 
@@ -223,33 +221,30 @@ export const renderText = <
       ...markdownStyles?.mentions,
     },
     table: {
-      borderColor: '#222222',
-      borderRadius: 3,
-      borderWidth: 1,
-      flex: 1,
-      flexDirection: 'row',
+      ...defaultMarkdownStyles.table,
+      marginVertical: 8,
+      ...markdownStyles?.table,
     },
     tableHeader: {
-      backgroundColor: '#222222',
-      flexDirection: 'row',
-      justifyContent: 'space-around',
+      ...defaultMarkdownStyles.tableHeader,
+      ...markdownStyles?.tableHeader,
     },
     tableHeaderCell: {
-      color: '#ffffff',
-      fontWeight: 'bold',
+      ...defaultMarkdownStyles.tableHeaderCell,
       padding: 5,
+      ...markdownStyles?.tableHeaderCell,
     },
     tableRow: {
-      alignItems: 'center',
-      borderColor: '#222222',
-      justifyContent: 'space-around',
+      ...defaultMarkdownStyles.tableRow,
+      ...markdownStyles?.tableRow,
     },
     tableRowCell: {
-      flex: 1,
+      ...defaultMarkdownStyles.tableRowCell,
       padding: 5,
+      ...markdownStyles?.tableRowCell,
     },
     tableRowLast: {
-      borderColor: 'transparent',
+      ...markdownStyles?.tableRowLast,
     },
     text: {
       ...defaultMarkdownStyles.text,
@@ -391,7 +386,7 @@ export const renderText = <
 
   const codeBlockReact: ReactNodeOutput = (node, _, state) => (
     <ReactiveScrollView key={state.key}>
-      <Text style={styles.codeBlock}>{node.content}</Text>
+      <Text style={styles.codeBlock}>{node?.content?.trim()}</Text>
     </ReactiveScrollView>
   );
 
@@ -558,7 +553,6 @@ const MarkdownTableColumn = ({ items, output, state, styles }: MarkdownTableRowP
 
   const ColumnCell = useCallback(
     ({ content }: { content: SingleASTNode }) =>
-      // console.log('CONTENT: ', content);
       content ? (
         <View style={styles.tableRow}>
           <View style={styles.tableRowCell}>{output(content, state)}</View>

package/src/components/Message/hooks/useStreamingMessage.ts

@@ -32,7 +32,9 @@ export const useStreamingMessage = <
       const newCursorValue = textCursor.current + renderingLetterCount;
       const newText = text.substring(0, newCursorValue);
       textCursor.current += newText.length - textCursor.current;
-      setStreamedMessageText(newText);
+      const codeBlockCounts = (newText.match(/```/g) || []).length;
+      const shouldOptimisticallyCloseCodeBlock = codeBlockCounts > 0 && codeBlockCounts % 2 > 0;
+      setStreamedMessageText(shouldOptimisticallyCloseCodeBlock ? newText + '```' : newText);
     }, letterInterval);
 
     return () => {