showDialog body as HTML

JupyterLab extensions
1

I have this

showDialog(
          {
              title: 'Explanation of Error',
              body:  html,
              hasClose: true
          });

The html of the body does not render as HTML but instead shows all tags.

Can showDialog be used this way?

Version 4.1.8

2

Resolved.

In my case, I wanted to show an LLM response in a dialog. I used the following in a TSX file


import * as React from 'react';
import { ReactWidget } from '@jupyterlab/ui-components';

function LLMReactComponent({html}:{html:string}) : React.JSX.Element{
    // xss vulnerability!!!
    return <div dangerouslySetInnerHTML={{ __html: html }} />
}

export function getLLMReactComponent(html:string) : ReactWidget{
    return ReactWidget.create(<LLMReactComponent html={html} />);
}

and the following function to make the dialog

  showLLMReply(reply:string|undefined, title: string) : void {
    // default error message
    let html = "The LLM did not provide a response. Please try again or check the browser console for error messages";
    // try to format markdown from LLM to something pretty
    if(reply) html = markdown_it.render(reply);
    showDialog(
    {
        title: title,
        body:  getLLMReactComponent(html),
        hasClose: true
    });
  }
1 Like