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
});
}