run-llama/chat-ui
1
0
Fork 0
mirror of https://github.com/run-llama/chat-ui.git synced 2026-07-21 11:25:22 -04:00
Code Issues 13 Packages Projects Releases 10 Wiki Activity

[PR #70] [MERGED] fix: properly convert LaTeX delimiters and prevent $ parsing issues #97

New Issue
Closed
opened 2026-02-16 03:15:07 -05:00 by yindo · 0 comments
yindo commented 2026-02-16 03:15:07 -05:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/run-llama/chat-ui/pull/70
Author: @loharvikas
Created: 4/12/2025
Status: ✅ Merged
Merged: 4/18/2025
Merged by: @thucpn

Base: main ← Head: main

📝 Commits (3)

  • 81e59d8 fix: properly convert LaTeX delimiters and prevent $ parsing issues
  • 95de05a fix: properly convert LaTeX delimiters and prevent $ parsing issues
  • f9a1808 Mino change

📊 Changes

2 files changed (+9 additions, -3 deletions)

View changed files

📝 apps/web/app/simple-demo.tsx (+1 -1)
📝 packages/chat-ui/src/widgets/markdown.tsx (+8 -2)

📄 Description

🛠️ Fix: Improve LaTeX Preprocessing Logic

Problem 1: Incorrect Regex for Inline Math

The existing logic incorrectly attempts to replace inline LaTeX delimiters using the wrong pattern:

// Old regex for inline math:
content.replace(/\\\[([\s\S]*?)\\\]/g, ...)

This matches \[...\], which is block-level syntax, not inline.
Inline math in LaTeX is denoted with \\(...\\), so this pattern was failing to process inline math correctly.

Problem 2: Risky Use of $ as a Math Delimiter

The current implementation converts LaTeX delimiters to $...$ and $$...$$, which can conflict with regular content that includes dollar signs:

Example:

"The product costs $10 and the discount is $5"

This could incorrectly treat 10 and the discount is as a LaTeX expression.

✅ Solution

  • Escapes all raw $ signs in the content by replacing them with \$
  • Correctly maps:
    • \\[...\\] ➜ $$...$$ (block-level)
    • \\(...\\) ➜ $...$ (inline)

Updated logic:

const preprocessLaTeX = (content: string) => {
  const escapedDollarSigns = content.replace(/\$/g, '\\$');

  const blockProcessedContent = escapedDollarSigns.replace(
    /\\\[([\s\S]*?)\\\]/g,
    (_, equation) => `$$${equation}$$`
  );

  const inlineProcessedContent = blockProcessedContent.replace(
    /\\\(([\s\S]*?)\\\)/g,
    (_, equation) => `$${equation}$`
  );

  return inlineProcessedContent;
}

🧪 Demo Update simple-demo.tsx

Updated the demo content to use standard LaTeX delimiters (\\[...\\] and \\(...\\)), instead of embedding raw $ signs:

Before:

The quadratic formula is: $$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$

After:

The quadratic formula is: \[x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}\]

This ensures the input content matches how most LLMs output LaTeX—using \(...\) for inline and \[...\] for block-level math.

📚 Why Avoid $...$ for Math?

Why Avoid $...$ for Inline Math?
While $$...$$ works fine for block-level math, using $...$ for inline math is not recommended.

Dollar signs frequently appear in regular text—especially in financial or casual contexts—so $...$ can lead to incorrect parsing. For example, a sentence like:

"We raised $20 million and $10 million..."

might render incorrectly as:

"We raised 20millionand10 million..."

To avoid issues like this, it's better to use \(...\) for inline math and \[...\] for block math. This approach allows us to safely convert to dollar-based delimiters later, if needed, while avoiding ambiguity and parsing errors.

Ref: https://docs.mathjax.org/en/latest/input/tex/delimiters.html

Problem 1: Improper regex for handling inline math ( )

E.g: \( x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \)

Before

Screenshot 2025-04-12 at 10 48 06 PM

After fix

Screenshot 2025-04-12 at 10 49 45 PM

Problem 2: Rendering issue when $ is used in non math content.

E.g $20 million and $10 million

Before

Screenshot 2025-04-12 at 10 50 36 PM

After fix

Screenshot 2025-04-12 at 10 51 13 PM

Verified math content renders properly with new changes

Screenshot 2025-04-12 at 10 52 11 PM

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/run-llama/chat-ui/pull/70 **Author:** [@loharvikas](https://github.com/loharvikas) **Created:** 4/12/2025 **Status:** ✅ Merged **Merged:** 4/18/2025 **Merged by:** [@thucpn](https://github.com/thucpn) **Base:** `main` ← **Head:** `main` --- ### 📝 Commits (3) - [`81e59d8`](https://github.com/run-llama/chat-ui/commit/81e59d8fc5f181538b12f257eb16a67cb4468548) fix: properly convert LaTeX delimiters and prevent $ parsing issues - [`95de05a`](https://github.com/run-llama/chat-ui/commit/95de05aedbe76ab0b0c568e5fccbf766fdc37b61) fix: properly convert LaTeX delimiters and prevent $ parsing issues - [`f9a1808`](https://github.com/run-llama/chat-ui/commit/f9a1808d1167c174e5290d8188d7a4e5323dac62) Mino change ### 📊 Changes **2 files changed** (+9 additions, -3 deletions) <details> <summary>View changed files</summary> 📝 `apps/web/app/simple-demo.tsx` (+1 -1) 📝 `packages/chat-ui/src/widgets/markdown.tsx` (+8 -2) </details> ### 📄 Description ### 🛠️ Fix: Improve LaTeX Preprocessing Logic #### Problem 1: Incorrect Regex for Inline Math The existing logic incorrectly attempts to replace **inline** LaTeX delimiters using the wrong pattern: ```ts // Old regex for inline math: content.replace(/\\\[([\s\S]*?)\\\]/g, ...) ``` This matches `\[...\]`, which is **block-level** syntax, not inline. Inline math in LaTeX is denoted with `\\(...\\)`, so this pattern was failing to process inline math correctly. --- #### Problem 2: Risky Use of `$` as a Math Delimiter The current implementation converts LaTeX delimiters to `$...$` and `$$...$$`, which can conflict with regular content that includes dollar signs: Example: ```text "The product costs $10 and the discount is $5" ``` This could incorrectly treat `10 and the discount is` as a LaTeX expression. --- ### ✅ Solution - Escapes all raw `$` signs in the content by replacing them with `\$` - Correctly maps: - `\\[...\\]` ➜ `$$...$$` (block-level) - `\\(...\\)` ➜ `$...$` (inline) Updated logic: ```ts const preprocessLaTeX = (content: string) => { const escapedDollarSigns = content.replace(/\$/g, '\\$'); const blockProcessedContent = escapedDollarSigns.replace( /\\\[([\s\S]*?)\\\]/g, (_, equation) => `$$${equation}$$` ); const inlineProcessedContent = blockProcessedContent.replace( /\\\(([\s\S]*?)\\\)/g, (_, equation) => `$${equation}$` ); return inlineProcessedContent; } ``` --- ### 🧪 Demo Update `simple-demo.tsx` Updated the demo content to use standard LaTeX delimiters (`\\[...\\]` and `\\(...\\)`), instead of embedding raw `$` signs: #### Before: ```text The quadratic formula is: $$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$ ``` #### After: ```text The quadratic formula is: \[x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}\] ``` This ensures the input content matches how most LLMs output LaTeX—using `\(...\)` for inline and `\[...\]` for block-level math. --- ### 📚 Why Avoid `$...$` for Math? Why Avoid `$...$` for Inline Math? While `$$...$$` works fine for block-level math, using `$...$` for inline math is not recommended. Dollar signs frequently appear in regular text—especially in financial or casual contexts—so `$...$` can lead to incorrect parsing. For example, a sentence like: "We raised $20 million and $10 million..." might render incorrectly as: "We raised 20*millionand*10 million..." To avoid issues like this, it's better to use `\(...\)` for inline math and `\[...\]` for block math. This approach allows us to safely convert to dollar-based delimiters later, if needed, while avoiding ambiguity and parsing errors. Ref: https://docs.mathjax.org/en/latest/input/tex/delimiters.html --- ## Problem 1: Improper regex for handling inline math \( \) E.g: `\( x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \)` ### Before ![Screenshot 2025-04-12 at 10 48 06 PM](https://github.com/user-attachments/assets/d86a0883-1156-4108-a11d-4fdcb1a42908) ### After fix ![Screenshot 2025-04-12 at 10 49 45 PM](https://github.com/user-attachments/assets/e6cd175e-f0de-4c41-9a6b-811b5de76f1d) ## Problem 2: Rendering issue when $ is used in non math content. E.g `$20 million and $10 million` ### Before ![Screenshot 2025-04-12 at 10 50 36 PM](https://github.com/user-attachments/assets/73e229ff-4837-4bea-8cb9-440984088ed4) ### After fix ![Screenshot 2025-04-12 at 10 51 13 PM](https://github.com/user-attachments/assets/2abd118b-8ad0-4b63-a633-652247129e9a) ### Verified math content renders properly with new changes ![Screenshot 2025-04-12 at 10 52 11 PM](https://github.com/user-attachments/assets/630c085d-4099-4f2b-adf3-b85ab6434ca6) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
yindo added the pull-request label 2026-02-16 03:15:07 -05:00
yindo closed this issue 2026-02-16 03:15:07 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
pull-request
Mirrored from GitHub Pull Request
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: run-llama/chat-ui#97
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?