@cntyclub/ui-react 0.10.1 → 0.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntyclub/ui-react",
-  "version": "0.10.1",
+  "version": "0.10.3",
   "description": "React component library for the Country Club UI Kit — Base UI primitives styled with the Country Club design system (Tailwind CSS v4)",
   "type": "module",
   "sideEffects": [

package/src/components/ui/markdown.tsx

@@ -6,6 +6,87 @@ import remarkGfm from "remark-gfm";
 
 import { cn } from "../../lib/utils/css";
 
+/** Common LaTeX command → readable-text replacements. */
+const LATEX_SYMBOLS: Record<string, string> = {
+  times: "×",
+  cdot: "·",
+  div: "÷",
+  approx: "≈",
+  neq: "≠",
+  ne: "≠",
+  leq: "≤",
+  le: "≤",
+  geq: "≥",
+  ge: "≥",
+  pm: "±",
+  to: "→",
+  rightarrow: "→",
+  Rightarrow: "⇒",
+  infty: "∞",
+  cdots: "⋯",
+  ldots: "…",
+  deg: "°",
+};
+
+/** Wrap a fraction side in parens only when it holds an operator, so
+ *  `\frac{116}{22}` → `116/22` but `\frac{a+b}{2}` → `(a+b)/2`. */
+const wrapFracSide = (x: string): string => {
+  const t = x.trim();
+  return /[+\-*/×÷·\s]/.test(t) ? `(${t})` : t;
+};
+
+/**
+ * LLMs sometimes emit LaTeX math (`\( \frac{116}{22} \times 100 \approx 527\% \)`),
+ * which react-markdown renders as raw gibberish. We don't ship a full math
+ * engine (KaTeX + fonts) — assistant chat rarely needs typeset math — so this
+ * downgrades the common LaTeX constructs to readable plain text instead. Plain
+ * text with no backslash / `$` is returned untouched (fast path), and lone `$`
+ * amounts like "$100" are left alone (only `$…$` containing a command unwraps).
+ */
+function normalizeLatex(src: string): string {
+  if (!src.includes("\\") && !src.includes("$")) return src;
+
+  let s = src;
+
+  // Unwrap math delimiters. `$$…$$` display + `\(…\)`/`\[…\]` inline always;
+  // single `$…$` only when the body looks like math (has a backslash).
+  s = s.replace(/\$\$([\s\S]*?)\$\$/g, " $1 ");
+  s = s.replace(/\$([^$\n]*\\[^$\n]*)\$/g, " $1 ");
+  s = s.replace(/\\[()[\]]/g, " ");
+
+  // \frac{a}{b} → a/b (a few passes for nesting), \sqrt{x} → √(x).
+  for (let i = 0; i < 3; i++) {
+    const next = s.replace(
+      /\\[dt]?frac\s*\{([^{}]*)\}\s*\{([^{}]*)\}/g,
+      (_m, a: string, b: string) => `${wrapFracSide(a)}/${wrapFracSide(b)}`,
+    );
+    if (next === s) break;
+    s = next;
+  }
+  s = s.replace(/\\sqrt\s*\{([^{}]*)\}/g, "√($1)");
+  s = s.replace(/\\(?:text|mathrm|mathbf|mathit|operatorname)\s*\{([^{}]*)\}/g, "$1");
+
+  // Known symbols → unicode; \left/\right dropped.
+  s = s.replace(/\\([a-zA-Z]+)/g, (m, name: string) => LATEX_SYMBOLS[name] ?? m);
+  s = s.replace(/\\(left|right)\b/g, "");
+
+  // Escaped chars (\% \$ \_ \{ …) and thin spaces (\, \; \!).
+  s = s.replace(/\\([%$&#_{}])/g, "$1");
+  s = s.replace(/\\[,;:!]/g, "");
+  s = s.replace(/\\ /g, " ");
+
+  // Any leftover unknown \command → keep the word, drop the backslash.
+  s = s.replace(/\\([a-zA-Z]+)/g, "$1");
+
+  // Collapse grouping braces ({x} → x) and runs of spaces.
+  for (let i = 0; i < 3; i++) {
+    const next = s.replace(/\{([^{}]*)\}/g, "$1");
+    if (next === s) break;
+    s = next;
+  }
+  return s.replace(/[ \t]{2,}/g, " ");
+}
+
 export interface MarkdownProps {
   /** The markdown source to render. */
   children: string;
@@ -98,7 +179,7 @@ function Markdown({ children, className }: MarkdownProps) {
         remarkPlugins={[remarkGfm]}
         skipHtml
       >
-        {children}
+        {normalizeLatex(children)}
       </ReactMarkdown>
     </div>
   );