feat: Enhance markdown rendering for lists, bold text, and code blocks, and add developer warnings for unhandled tags.

Author: arnaudpfu

apps/mobile/components/ai-chat/markdown-text.tsx

@@ -112,14 +112,23 @@ const defaultComponents = {
       {children}
     </Link>
   ),
+  strong: ({ children }) => (
+      <Text className={cn("font-bold")}>{children}</Text>
+  ),
   blockquote: ({ children }) => (
     <Text className={cn("border-l-2 pl-6 italic")}>{children}</Text>
   ),
   ul: ({ children }) => (
-    <Text className={cn("my-5 ml-6 list-disc [&>li]:mt-2")}>{children}</Text>
+    <View className={cn("my-5 flex gap-4 flex-col")}>{children}</View>
+  ),
+  li: ({ children }) => (
+    <View className="flex flex-row items-start gap-4">
+      <View className="bg-foreground mt-2.5 h-2 w-2 rounded-full" />
+      <Text className="leading-7">{children}</Text>
+    </View>
   ),
   ol: ({ children }) => (
-    <Text className={cn("my-5 ml-6 list-decimal [&>li]:mt-2")}>{children}</Text>
+    <Text className={cn("my-5 flex gap-4 flex-col")}>{children}</Text>
   ),
   hr: () => <View className={cn("my-5 border-b")} />,
   table: ({ children }) => (
@@ -160,11 +169,13 @@ const defaultComponents = {
   code: ({ children, node }) => {
     const isCodeBlock = (node as any)?.__parent?.tagName === "pre";
     return (
-      <Text
-        className={cn(!isCodeBlock && "rounded border bg-muted font-semibold")}
-      >
-        {children}
-      </Text>
+      <View className="translate-y-[15px]">
+        <Text
+          className={cn(!isCodeBlock && "rounded-lg border px-1 border-input leading-6 bg-muted font-semibold")}
+        >
+          {children}
+        </Text>
+      </View>
     );
   },
   CodeHeader: ({ language, code }: CodeHeaderProps) => {

packages-test-3/ai-react-native/src/markdown/renderer/Markdown.tsx

@@ -1,27 +1,61 @@
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import { View } from "react-native";
 import { parseMarkdown } from "./parser";
 import { renderNode } from "./renderNode";
 import { createRenderers, type RendererColors } from "./renderers";
 import type { HastNode, RenderersMap } from "./types";
 import { useRuntime } from "@creatorem/ai-chat/runtime";
+import type { RootContent, Element } from "hast";
 
 type Props = {
   content: string;
   colors: RendererColors;
   renderers?: Partial<RenderersMap>;
 };
 
+function collectElementTags(nodes: RootContent[], tags: Set<string>): void {
+  for (const node of nodes) {
+    if (node.type !== "element") continue;
+    const element = node as Element;
+    tags.add(element.tagName);
+    if (element.children?.length) {
+      collectElementTags(element.children as RootContent[], tags);
+    }
+  }
+}
+
 export function Markdown({ content, colors, renderers: customRenderers }: Props) {
   const components = useRuntime().components
 
-  const renderers = useMemo(() => {
+  const renderers = useMemo<RenderersMap>(() => {
     const defaults = createRenderers(colors, components);
     if (!customRenderers) return defaults;
-    return { ...defaults, ...customRenderers };
-  }, [colors, customRenderers]);
+    return { ...defaults, ...customRenderers } as RenderersMap;
+  }, [colors, customRenderers, components]);
 
   const tree = useMemo(() => parseMarkdown(content), [content]);
+  const customRendererKeys = useMemo(
+    () => new Set(Object.keys(customRenderers ?? {})),
+    [customRenderers],
+  );
+
+  useEffect(() => {
+    if (!__DEV__) return;
+
+    const usedTags = new Set<string>();
+    collectElementTags(tree.children as RootContent[], usedTags);
+
+    const nonCustomizedTags = Array.from(usedTags)
+      .filter((tag) => !customRendererKeys.has(tag))
+      .sort();
+
+    if (nonCustomizedTags.length > 0) {
+      console.log(
+        "[MarkdownRenderer] Tags using default renderer:",
+        nonCustomizedTags,
+      );
+    }
+  }, [tree, customRendererKeys]);
 
   return (
     <View>

packages-test-3/ai-react-native/src/markdown/renderer/renderNode.tsx

@@ -6,6 +6,7 @@ import type { Element, Text as HastText } from "hast";
 const BLOCK_TAGS = new Set([
   "div",
   "ul",
+  "strong",
   "ol",
   "li",
   "blockquote",
@@ -131,6 +132,12 @@ export function renderNode(
       );
     }
 
+    if (__DEV__) {
+      console.warn(
+        `[MarkdownRenderer] Missing renderer for tag <${node.tagName}>. Falling back to Text wrapper.`,
+      );
+    }
+
     // Fallback for unknown tags: wrap in <Text>
     return <Text key={key}>{children}</Text>;
   }