Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

V2 chat shows TeX, Mermaid diagrams and chart payloads as raw text

オープン
  • 何か問題がありますか？
#1,376 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
25/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
停滞
技術スタック
chart.js, python, react, typescript
領域
frontend, security, testing

調査の方向性

application/v2_ui から始め、特に AssistantMarkdown.tsx に移された Markdown のレンダリングを確認し、functional_tests/test_v2_rich_rendering.py をレビューしてください。fenced content の処理、サニタイズ、テーマの動作、ストリーミング、コピー、vendored libraries、変更されていない CSP を含め、実装を記載された受け入れ基準と比較してください。

索引モデルが issue の本文から書いたものです。

説明

enhancement

Problem

Three kinds of block that SimpleChat already produces are rendered as raw text in the V2 React chat (application/v2_ui).

1. Mermaid diagrams

This is the least obvious and arguably the most impactful. Azure Content Understanding already extracts document figures as Mermaid and writes them into page content as fenced blocks:

# application/single_app/functions_content_understanding.py:330
if figure_kind == 'mermaid' and isinstance(figure_content, str) and figure_content.strip():
    diagram_block = f"```mermaid\n{figure_content.strip()}\n```"

So a user who uploads a document containing a flowchart and asks about it gets diagram source pasted into the middle of the answer. Nothing renders it in either interface.

2. TeX

Models emit \( ... \), \[ ... \] and $$ ... $$. None of it renders, so any answer involving mathematics arrives as unreadable markup.

3. SimpleChart

The built-in chart action emits ```simplechart fences (functions_chart_operations.py:191). The classic interface renders these via static/js/chat/chat-inline-charts.js; V2 shows the raw JSON payload — often several kilobytes of it — in the middle of the reply.

Scope

V2 React UI only. The classic interface is unchanged.

Constraints

  • No new remote browser code. Third-party browser libraries must be downloaded and committed to the repository so the bytes the browser executes are pinned and any change to them is a reviewable commit rather than a silent substitution. This rules out resolving them from npm at build time as well as loading them from a CDN at run time.
  • The Content-Security-Policy in config.py (default-src 'self', script-src 'self', font-src 'self') must not be relaxed.
  • Diagram and equation source is untrusted model output, so anything rendered from it needs an explicit sanitizer boundary — V2 currently uses dangerouslySetInnerHTML nowhere.
  • A single $...$ must not be treated as inline maths, or ordinary prose about money ("costs $5 to $10 per user") renders as an equation.

Acceptance criteria

  • $$...$$, \[...\] and \(...\) render as maths; a lone $ does not
  • ```mermaid fences render as diagrams
  • ```simplechart fences render as charts, with the underlying data reachable and an image download
  • Fenced and inline code containing these delimiters is left untouched
  • A reply that is still streaming does not repeatedly hand the renderer a half-written fence
  • Diagrams and charts follow the light/dark theme
  • Copying a message does not paste a raw chart payload
  • All third-party browser code is committed under version control, with licences and pinned versions
  • The CSP is unchanged

Resolution

Implemented in v0.261.019.

  • Libraries vendored under application/v2_ui/public/vendor/<library>-<version>/: KaTeX 0.18.4, Mermaid 11.17.2, Chart.js 4.5.1, DOMPurify 3.4.14. All files verified against the registry's published SHA-256, licences preserved, and loaded on demand so a conversation with no maths, diagram or chart downloads none of them. No npm dependencies were added.
  • remark-math was deliberately not used: CommonMark treats a backslash before ASCII punctuation as an escape, so \(x\) is already the literal text (x) by the time an mdast node exists and a post-parse plugin cannot see the delimiters. Maths instead reuses the placeholder mechanism the renderer already has for citations and masks.
  • KaTeX runs with trust: false; Mermaid with securityLevel: 'strict', htmlLabels: false, no autostart and no icon packs. Both pass through DOMPurify before injection — the only two dangerouslySetInnerHTML sites in the SPA, enforced by test.
  • The markdown renderer moved from MessageList.tsx into its own AssistantMarkdown.tsx.

Verified in a real browser across light and dark themes. Covered by functional_tests/test_v2_rich_rendering.py; the full V2 suite (18 files) passes.

Documentation: docs/explanation/features/REACT_V2_UI.md, docs/explanation/release_notes.md.

主要言語
Python
スター
155
フォーク
116
平均マージ
5時間 5分
マージ済み PR（30日）
204

環境構築

Codespaces で開く

このプロジェクトの開発コンテナを、あなたの GitHub アカウントでブラウザ上に起動します。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

microsoft/simplechat のほかの issue

microsoft/simplechat の issue をすべて見る

似ている issue

Python の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。