Merge pull request #35 from RonasIT/PRD-2152-incorrect-chat-block-color-fix

PRD-2152: CodeBlock background color fix

Author: veliseev93

libs/mobile/shared/features/markdown-view/src/lib/component.tsx

@@ -3,6 +3,7 @@ import markdownItMath from 'markdown-it-math/no-default-renderer';
 import { colorScheme } from 'nativewind';
 import React, { PropsWithChildren, ReactElement, ReactNode, useCallback, useMemo } from 'react';
 import { Linking } from 'react-native';
+import FitImage from 'react-native-fit-image';
 import Markdown, { ASTNode, MarkdownProps, RenderRules } from 'react-native-markdown-display';
 import { CitationPrefix } from '@open-webui-react-native/mobile/chat/features/use-citations';
 import { CodeBlock } from '@open-webui-react-native/mobile/shared/ui/code-block';
@@ -39,7 +40,7 @@ export function AppMarkdownView({
   onCitationPress,
   isContentReady,
   textColor: elementTextColor,
-  ...restProps
+  children,
 }: AppMarkdownViewProps): ReactElement {
   const { isDarkColorScheme } = useColorScheme();
   const textColor = elementTextColor || (isDarkColorScheme ? colors.darkTextPrimary : colors.textPrimary);
@@ -53,7 +54,7 @@ export function AppMarkdownView({
     ) => {
       return (
         <CodeBlock
-          fenceStyle={[inheritedStyles, styles.fence]}
+          fenceStyle={[inheritedStyles, markdownStyles.fence]}
           key={`code-block-${node.key}`}
           sourceInfo={node.sourceInfo}
           content={node.content}
@@ -209,6 +210,18 @@ export function AppMarkdownView({
         </AppText>
       ),
       table: renderTable,
+      //NOTE: A props object containing a "key" prop is being spread into JSX error fix
+      image: (node: ASTNode, children, parent, styles) => {
+        const uri = node.attributes?.src;
+
+        if (!uri) return null;
+
+        return <FitImage
+          key={`image-${node.key}`}
+          source={{ uri }}
+          style={styles.image}
+          resizeMode='contain' />;
+      },
     };
   }, [fence, onCitationPress, isContentReady, renderTable]);
 
@@ -220,9 +233,9 @@ export function AppMarkdownView({
         code_inline: { backgroundColor: isDarkColorScheme ? colors.gray700 : colors.gray75 },
       }}
       rules={markdownRules}
-      {...restProps}
-      markdownit={markdownItInstance}
-    />
+      markdownit={markdownItInstance}>
+      {children}
+    </Markdown>
   );
 }
 
@@ -289,4 +302,9 @@ const markdownStyles = createStyles({
     backgroundColor: colorScheme.get() === 'dark' ? colors.gray700 : colors.gray75,
     textDecorationLine: 'none',
   },
+  fence: {
+    backgroundColor: colorScheme.get() === 'dark' ? colors.gray700 : colors.gray75,
+    borderRadius: 8,
+    padding: 12,
+  },
 });