fix(chat): align messages with their text direction

apps/mobile/src/features/threads/ThreadFeed.tsx

@@ -63,6 +63,7 @@ import {
 } from "react";
 import {
   Markdown,
+  parseMarkdown,
   type CustomRenderers,
   type NodeStyleOverrides,
   type PartialMarkdownTheme,
@@ -97,6 +98,7 @@ import { copyTextWithHaptic } from "../../lib/copyTextWithHaptic";
 import { tryOpenExternalUrl } from "../../lib/openExternalUrl";
 import { downloadAndShareAttachment } from "../../lib/attachmentDownload";
 import { hasWideMarkdownBlock } from "../../lib/wideMarkdownBlocks";
+import { resolveMarkdownNodeTextDirection, type TextDirection } from "../../lib/textDirection";
 import { faviconUrlForOrigin } from "@t3tools/shared/favicon";
 import {
   hasNativeSelectableMarkdownText,
@@ -615,7 +617,7 @@ interface MarkdownStyleSets {
 interface MarkdownStyleSet {
   readonly theme: PartialMarkdownTheme;
   readonly styles: NodeStyleOverrides;
-  readonly renderers: CustomRenderers;
+  readonly renderers: Readonly<Record<TextDirection, CustomRenderers>>;
   readonly nativeTextStyle: NativeMarkdownTextStyle;
 }
 
@@ -699,6 +701,8 @@ function MarkdownInlineCode(props: {
         color: presentation ? props.textColor : props.codeColor,
         fontSize: props.fontSize,
         lineHeight: props.lineHeight,
+        textAlign: "left",
+        writingDirection: "ltr",
       }}
     >
       {presentation ? (
@@ -772,6 +776,65 @@ function ArtifactTemplateCard(props: {
   );
 }
 
+const NitroMarkdownMessage = memo(function NitroMarkdownMessage(props: {
+  readonly text: string;
+  readonly markdownStyles: MarkdownStyleSet;
+}) {
+  const sourceAst = useMemo(() => parseMarkdown(props.text, { gfm: true }), [props.text]);
+  const direction = resolveMarkdownNodeTextDirection(sourceAst);
+  const styles = useMemo<NodeStyleOverrides>(
+    () => ({
+      ...props.markdownStyles.styles,
+      document: {
+        ...props.markdownStyles.styles.document,
+        direction,
+      },
+      paragraph: {
+        ...props.markdownStyles.styles.paragraph,
+        direction,
+      },
+      list: {
+        ...props.markdownStyles.styles.list,
+        direction,
+      },
+      list_item: {
+        ...props.markdownStyles.styles.list_item,
+        direction,
+      },
+      task_list_item: {
+        ...props.markdownStyles.styles.task_list_item,
+        direction,
+      },
+      blockquote: {
+        ...props.markdownStyles.styles.blockquote,
+        direction,
+        ...(direction === "rtl"
+          ? {
+              borderLeftWidth: 0,
+              borderRightWidth: props.markdownStyles.styles.blockquote?.borderLeftWidth,
+              borderRightColor: props.markdownStyles.styles.blockquote?.borderLeftColor,
+              paddingLeft: 0,
+              paddingRight: props.markdownStyles.styles.blockquote?.paddingLeft,
+            }
+          : null),
+      },
+    }),
+    [direction, props.markdownStyles.styles],
+  );
+
+  return (
+    <Markdown
+      options={{ gfm: true }}
+      renderers={props.markdownStyles.renderers[direction]}
+      sourceAst={sourceAst}
+      styles={styles}
+      theme={props.markdownStyles.theme}
+    >
+      {props.text}
+    </Markdown>
+  );
+});
+
 /** Tap opens a link; long-press on a native file chip shows its menu. Built once per feed. */
 interface MarkdownLinkHandlers {
   readonly onLinkPress: (href: string) => void;
@@ -815,15 +878,11 @@ const AssistantMarkdownContent = memo(function AssistantMarkdownContent(props: {
         renderImage={props.renderImage}
       />
     ) : (
-      <Markdown
+      <NitroMarkdownMessage
         key={`markdown:${segment.sourceOffset}`}
-        options={{ gfm: true }}
-        renderers={props.markdownStyles.renderers}
-        styles={props.markdownStyles.styles}
-        theme={props.markdownStyles.theme}
-      >
-        {markdown}
-      </Markdown>
+        text={markdown}
+        markdownStyles={props.markdownStyles}
+      />
     );
   });
 });
@@ -894,6 +953,8 @@ function MarkdownCodeBlock(props: {
             color: props.textColor,
             fontSize: props.fontSize,
             lineHeight: props.lineHeight,
+            textAlign: "left",
+            writingDirection: "ltr",
             ...(Platform.OS === "android" ? { includeFontPadding: false } : null),
           }}
         >
@@ -1081,6 +1142,7 @@ function useMarkdownStyles(
       copyTintColor: ColorValue,
       preserveSoftBreaks: boolean,
       highlightCode: boolean,
+      direction: TextDirection,
     ): CustomRenderers => ({
       link: ({ children, href = "" }) => {
         const presentation = resolveMarkdownLinkPresentation(href);
@@ -1133,7 +1195,7 @@ function useMarkdownStyles(
         );
       },
       list: ({ node, Renderer, ordered = false, start = 1 }) => (
-        <View className="mt-0.5 mb-2">
+        <View className="mt-0.5 mb-2" style={{ direction }}>
           {node.children?.map((child, index) => {
             const childKey = `${child.type}:${child.beg ?? "unknown"}:${child.end ?? "unknown"}`;
             if (child.type === "task_list_item") {
@@ -1147,11 +1209,12 @@ function useMarkdownStyles(
                   className="font-sans"
                   style={{
                     width: ordered ? 22 : 12,
-                    marginRight: 5,
+                    marginLeft: direction === "rtl" ? 5 : 0,
+                    marginRight: direction === "rtl" ? 0 : 5,
                     color: inlineTextColor,
                     fontSize: markdownFontSizes.m,
                     lineHeight: markdownFontSizes.bodyLineHeight,
-                    textAlign: ordered ? "right" : "center",
+                    textAlign: ordered ? (direction === "rtl" ? "left" : "right") : "center",
                   }}
                 >
                   {ordered ? `${start + index}.` : "•"}
@@ -1204,6 +1267,37 @@ function useMarkdownStyles(
       ),
     });
 
+    const createDirectionalMarkdownRenderers = (
+      inlineTextColor: string,
+      inlineCodeTextColor: string,
+      blockBackgroundColor: string,
+      blockTextColor: string,
+      copyTintColor: ColorValue,
+      preserveSoftBreaks: boolean,
+      highlightCode: boolean,
+    ): Readonly<Record<TextDirection, CustomRenderers>> => ({
+      ltr: createMarkdownRenderers(
+        inlineTextColor,
+        inlineCodeTextColor,
+        blockBackgroundColor,
+        blockTextColor,
+        copyTintColor,
+        preserveSoftBreaks,
+        highlightCode,
+        "ltr",
+      ),
+      rtl: createMarkdownRenderers(
+        inlineTextColor,
+        inlineCodeTextColor,
+        blockBackgroundColor,
+        blockTextColor,
+        copyTintColor,
+        preserveSoftBreaks,
+        highlightCode,
+        "rtl",
+      ),
+    });
+
     const userTheme: PartialMarkdownTheme = {
       ...baseTheme,
       colors: {
@@ -1253,7 +1347,7 @@ function useMarkdownStyles(
       user: {
         theme: userTheme,
         styles: userStyles,
-        renderers: createMarkdownRenderers(
+        renderers: createDirectionalMarkdownRenderers(
           markdownUserCodeText,
           markdownUserInlineCodeText,
           markdownUserFenceBg,
@@ -1287,7 +1381,7 @@ function useMarkdownStyles(
       assistant: {
         theme: assistantTheme,
         styles: assistantStyles,
-        renderers: createMarkdownRenderers(
+        renderers: createDirectionalMarkdownRenderers(
           markdownCodeText,
           markdownInlineCodeText,
           markdownCodeBg,
@@ -1861,16 +1955,7 @@ function LegacyUserMessageContent(props: UserMessageContentProps) {
         />
       );
     }
-    return (
-      <Markdown
-        options={{ gfm: true }}
-        renderers={props.markdownStyles.renderers}
-        styles={props.markdownStyles.styles}
-        theme={props.markdownStyles.theme}
-      >
-        {text}
-      </Markdown>
-    );
+    return <NitroMarkdownMessage text={props.text} markdownStyles={props.markdownStyles} />;
   }
 
   return (
@@ -1903,15 +1988,11 @@ function LegacyUserMessageContent(props: UserMessageContentProps) {
             renderImage={props.renderImage}
           />
         ) : (
-          <Markdown
+          <NitroMarkdownMessage
             key={segment.id}
-            options={{ gfm: true }}
-            renderers={props.markdownStyles.renderers}
-            styles={props.markdownStyles.styles}
-            theme={props.markdownStyles.theme}
-          >
-            {text}
-          </Markdown>
+            text={text}
+            markdownStyles={props.markdownStyles}
+          />
         );
       })}
     </View>

apps/mobile/src/lib/textDirection.test.ts

@@ -0,0 +1,78 @@
+import type { MarkdownNode } from "react-native-nitro-markdown";
+import { describe, expect, it } from "vite-plus/test";
+
+import { resolveMarkdownNodeTextDirection, resolveTextDirection } from "./textDirection";
+
+const documentWith = (...children: MarkdownNode[]): MarkdownNode => ({
+  type: "document",
+  children,
+});
+
+describe("resolveTextDirection", () => {
+  it("resolves Hebrew and Arabic text as right-to-left", () => {
+    expect(resolveTextDirection("הודעה בעברית")).toBe("rtl");
+    expect(resolveTextDirection("رسالة بالعربية")).toBe("rtl");
+    expect(resolveTextDirection("React Server Components האם להשתמש בהם בפרויקט החדש שלנו?")).toBe(
+      "rtl",
+    );
+  });
+
+  it("resolves English and other left-to-right scripts as left-to-right", () => {
+    expect(resolveTextDirection("English message")).toBe("ltr");
+    expect(resolveTextDirection("日本語のメッセージ")).toBe("ltr");
+  });
+
+  it("ignores neutral prefixes before the first letter", () => {
+    expect(resolveTextDirection("👋 123... שלום")).toBe("rtl");
+    expect(resolveTextDirection("(123) Hello")).toBe("ltr");
+  });
+
+  it("defaults neutral-only content to left-to-right", () => {
+    expect(resolveTextDirection("👋 123...")).toBe("ltr");
+  });
+
+  it("uses parsed prose instead of code content", () => {
+    expect(
+      resolveMarkdownNodeTextDirection(
+        documentWith(
+          { type: "code_block", content: "npm test" },
+          {
+            type: "paragraph",
+            children: [
+              { type: "code_inline", content: "English inline code" },
+              { type: "text", content: " שלום" },
+            ],
+          },
+        ),
+      ),
+    ).toBe("rtl");
+
+    expect(
+      resolveMarkdownNodeTextDirection(
+        documentWith({
+          type: "paragraph",
+          children: [
+            { type: "code_inline", content: "שלום" },
+            { type: "text", content: " English prose" },
+          ],
+        }),
+      ),
+    ).toBe("ltr");
+  });
+
+  it("ignores synthesized GitHub alert markers", () => {
+    expect(
+      resolveMarkdownNodeTextDirection(
+        documentWith({
+          type: "blockquote",
+          children: [
+            {
+              type: "paragraph",
+              children: [{ type: "text", content: "[!NOTE] הודעת התראה בעברית." }],
+            },
+          ],
+        }),
+      ),
+    ).toBe("rtl");
+  });
+});

apps/mobile/src/lib/textDirection.ts

@@ -0,0 +1,41 @@
+import { resolveTextDirection, type TextDirection } from "@t3tools/shared/textDirection";
+import type { MarkdownNode } from "react-native-nitro-markdown";
+
+const GITHUB_ALERT_MARKER = /\[!(?:NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]/giu;
+const MAX_MARKDOWN_PROSE_CODE_UNITS = 17_408;
+
+function collectMarkdownProse(
+  node: MarkdownNode,
+  chunks: string[],
+  remainingCodeUnits: number,
+): number {
+  if (remainingCodeUnits === 0) return 0;
+  if (node.type === "code_inline" || node.type === "code_block" || node.type === "image") {
+    return remainingCodeUnits;
+  }
+
+  if (node.type === "text") {
+    const text = (node.content ?? "").slice(0, remainingCodeUnits).replace(GITHUB_ALERT_MARKER, "");
+    chunks.push(text);
+    return remainingCodeUnits - text.length;
+  }
+
+  for (const child of node.children ?? []) {
+    remainingCodeUnits = collectMarkdownProse(child, chunks, remainingCodeUnits);
+    if (remainingCodeUnits === 0) break;
+  }
+  return remainingCodeUnits;
+}
+
+function markdownProse(node: MarkdownNode): string {
+  const chunks: string[] = [];
+  collectMarkdownProse(node, chunks, MAX_MARKDOWN_PROSE_CODE_UNITS);
+  return chunks.join("");
+}
+
+export function resolveMarkdownNodeTextDirection(node: MarkdownNode): TextDirection {
+  return resolveTextDirection(markdownProse(node));
+}
+
+export { resolveTextDirection };
+export type { TextDirection };

apps/web/src/components/ChatMarkdown.test.tsx

@@ -515,7 +515,10 @@ describe("ChatMarkdown skill chips", () => {
       });
       const mounted = renderer!;
       const labels = (label: string) =>
-        mounted.root.findAllByType("span").filter((node) => node.children.includes(label));
+        mounted.root
+          // The label element is a <bdi> so an RTL message cannot flip the chip's text.
+          .findAll((node) => node.type === "span" || node.type === "bdi")
+          .filter((node) => node.children.includes(label));
       expect(labels("2Spec")).toHaveLength(0);
 
       await act(async () => {