);
@@ -1599,7 +1603,10 @@ const UserMessageBody = memo(function UserMessageBody(props: {
}
return (
-
+
{inlineNodes}
);
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 3ae42a3e61c..196877acdcf 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -472,12 +472,12 @@ label:has(> select#reasoning-effort) select {
}
.chat-markdown ul {
- padding-left: 1.25rem;
+ padding-inline-start: 1.25rem;
list-style-type: disc;
}
.chat-markdown ol {
- padding-left: 1.25rem;
+ padding-inline-start: 1.25rem;
list-style-type: decimal;
}
@@ -507,7 +507,8 @@ label:has(> select#reasoning-effort) select {
}
.chat-markdown li.task-list-item input[type="checkbox"] {
- margin: 0 0.35em 0.15em -1.25rem;
+ margin-block: 0 0.15em;
+ margin-inline: -1.25rem 0.35em;
vertical-align: middle;
}
@@ -537,11 +538,39 @@ label:has(> select#reasoning-effort) select {
}
.chat-markdown blockquote {
- border-left: 2px solid var(--border);
- padding-left: 0.8rem;
+ border-inline-start: 2px solid var(--border);
+ padding-inline-start: 0.8rem;
color: var(--muted-foreground);
}
+/* Bidi: each line resolves its own base direction (UAX#9 plaintext). */
+.bidi-plaintext {
+ unicode-bidi: plaintext;
+}
+
+/* Per-line direction inside markdown text blocks. */
+.chat-markdown p,
+.chat-markdown li,
+.chat-markdown h1,
+.chat-markdown h2,
+.chat-markdown h3,
+.chat-markdown h4,
+.chat-markdown h5,
+.chat-markdown h6,
+.chat-markdown blockquote {
+ unicode-bidi: plaintext;
+}
+
+/* Source code stays LTR even inside RTL messages. */
+.chat-markdown pre,
+.chat-markdown code,
+.chat-markdown .chat-markdown-codeblock,
+.chat-markdown .chat-markdown-shiki,
+.chat-markdown .chat-markdown-table-container {
+ direction: ltr;
+ unicode-bidi: isolate;
+}
+
.chat-markdown section[data-footnotes] {
margin-top: 1.25rem;
border-top: 1px solid var(--border);
diff --git a/apps/web/src/lib/rtl.test.ts b/apps/web/src/lib/rtl.test.ts
new file mode 100644
index 00000000000..faeffec37be
--- /dev/null
+++ b/apps/web/src/lib/rtl.test.ts
@@ -0,0 +1,62 @@
+import { describe, expect, it } from "vite-plus/test";
+import { containsRtl, dirFor, dirForMarkdown, isRtlText } from "./rtl";
+
+describe("isRtlText", () => {
+ const cases: Array<[string, boolean, string]> = [
+ ["שלום עולם", true, "Hebrew"],
+ ["مرحبا بالعالم", true, "Arabic"],
+ ["سلام دنیا", true, "Persian"],
+ ["שלום 123 עולם", true, "digits are neutral"],
+ ["שלום hello עולם", true, "mixed, RTL majority"],
+ ["Note: بقية الجملة عربية طويلة جدا", true, "LTR-lead, RTL majority (dir=auto failure case)"],
+ ["Hello world", false, "English"],
+ ["Hello world שלום", false, "mixed, LTR majority"],
+ ["", false, "empty"],
+ [" \n\t ", false, "whitespace only"],
+ ["12345", false, "digits only"],
+ ["!@#$%", false, "punctuation only"],
+ ["ﭐﭑﭒ", true, "Arabic presentation forms A"],
+ ["ﬠﬡ", true, "Hebrew presentation forms"],
+ ];
+
+ for (const [input, expected, why] of cases) {
+ it(`${JSON.stringify(input)} → ${expected} (${why})`, () => {
+ expect(isRtlText(input)).toBe(expected);
+ });
+ }
+});
+
+describe("containsRtl", () => {
+ it("returns true for mixed text with any RTL char", () => {
+ expect(containsRtl("hello שלום")).toBe(true);
+ });
+
+ it("returns false for pure English", () => {
+ expect(containsRtl("hello world")).toBe(false);
+ });
+
+ it("returns false for empty text", () => {
+ expect(containsRtl("")).toBe(false);
+ });
+
+ it("returns false for CJK text", () => {
+ expect(containsRtl("中文")).toBe(false);
+ expect(containsRtl("あいう")).toBe(false);
+ });
+});
+
+describe("dirFor", () => {
+ it("returns rtl for RTL-majority text", () => {
+ expect(dirFor("שלום")).toBe("rtl");
+ });
+
+ it("returns ltr for LTR text", () => {
+ expect(dirFor("hi")).toBe("ltr");
+ });
+});
+
+describe("dirForMarkdown", () => {
+ it("ignores inline code labels when deciding direction", () => {
+ expect(dirForMarkdown("- **`apps/web`**: אפליקציית React שמציגה צ'אט")).toBe("rtl");
+ });
+});
diff --git a/apps/web/src/lib/rtl.ts b/apps/web/src/lib/rtl.ts
new file mode 100644
index 00000000000..eca155f4409
--- /dev/null
+++ b/apps/web/src/lib/rtl.ts
@@ -0,0 +1,60 @@
+// Base-direction detection by character majority. Ported from the `bidi`
+// Chrome extension (MIT). React components know their text at render time, so
+// only the pure classifiers are ported — not the DOM tree walker.
+
+function isRtlChar(c: number): boolean {
+ return (
+ (c >= 0x0590 && c <= 0x05ff) || // Hebrew
+ (c >= 0x0600 && c <= 0x06ff) || // Arabic
+ (c >= 0x0750 && c <= 0x077f) || // Arabic Supplement
+ (c >= 0x08a0 && c <= 0x08ff) || // Arabic Extended-A
+ (c >= 0xfb1d && c <= 0xfb4f) || // Hebrew presentation forms
+ (c >= 0xfb50 && c <= 0xfdff) || // Arabic presentation forms A
+ (c >= 0xfe70 && c <= 0xfeff) // Arabic presentation forms B
+ );
+}
+
+function isLtrChar(c: number): boolean {
+ return (
+ (c >= 0x41 && c <= 0x5a) || // A-Z
+ (c >= 0x61 && c <= 0x7a) || // a-z
+ (c >= 0xc0 && c <= 0x024f) // Latin-1 Supplement + Latin Extended-A/B
+ );
+}
+
+/**
+ * Whether text should render right-to-left, decided by strong-character
+ * majority. Neutral characters (digits, punctuation, whitespace) do not vote;
+ * text with no strong characters is treated as LTR.
+ */
+export function isRtlText(text: string): boolean {
+ let rtl = 0;
+ let ltr = 0;
+ for (let i = 0; i < text.length; i++) {
+ const c = text.charCodeAt(i);
+ if (isRtlChar(c)) rtl++;
+ else if (isLtrChar(c)) ltr++;
+ }
+ if (rtl === 0 && ltr === 0) return false;
+ return rtl > ltr;
+}
+
+/** Whether text contains any RTL character (regardless of majority). */
+export function containsRtl(text: string): boolean {
+ return Array.from(text).some((char) => isRtlChar(char.charCodeAt(0)));
+}
+
+/** The `dir` attribute value for text, by majority vote. Neutral → "ltr". */
+export function dirFor(text: string): "rtl" | "ltr" {
+ return isRtlText(text) ? "rtl" : "ltr";
+}
+
+// Code spans, fenced blocks, and URLs are direction-neutral: they render LTR
+// regardless of base direction, so letting them vote skews code-heavy RTL
+// text toward LTR.
+const MARKDOWN_DIRECTION_NEUTRAL_RE = /```[\s\S]*?(?:```|$)|`[^`\n]*`|https?:\/\/\S+/g;
+
+/** `dirFor` over markdown source, ignoring code spans/fences and URLs. */
+export function dirForMarkdown(text: string): "rtl" | "ltr" {
+ return dirFor(text.replace(MARKDOWN_DIRECTION_NEUTRAL_RE, ""));
+}