Allow for structured message responses

[fozziethebeat]

Right now the message textarea just creates a flat response. When writing code or formatted responses, we want to preserve that structure.

This probably could switch the textarea to a Markdown editor that creates structured markdown (with code blocks).

[AbdBarho]

https://uiwjs.github.io/react-md-editor/

https://github.com/HarryChen0506/react-markdown-editor-lite

If using markdown, we have to be VERY CAREFUL because of XSS

[fozziethebeat]

Ah yes XSS opportunities. I see there's sanitizers that should be a good first layer of protection.

[jojopirker]

https://github.com/remarkjs/react-markdown

This one says its "safe by default"

[rjmacarthy]

Would second on react-markdown with appropriate plugins.

[fozziethebeat]

I've used react-markdown as well a few times. Worked smoothly.

[KarthikRaju391]

Hey, @fozziethebeat, I have previously worked with react-markdown and would like to build this feature. Before that, can you share a screenshot of where you want markdown rendering?

[fozziethebeat]

First step is to render text using Markdown rendering during the review and messages phase.

Second, make the text editor easier to use and support previewing the markdown before submitting.

Will post some images about where this should go soon.

[mashdragon]

I can take a look at this today. Feel free to assign me. The plan is to use react-markdown with plugins for syntax highlighting of coding languages and possibly even remark-math (also a plugin I think) for math figures. I'll follow @fozziethebeat's first step and work on getting a markdown rendering of messages and during the preview phase before submission for replies/prompts.

Something like https://uiwjs.github.io/react-markdown-editor/ might be useful once we wish to move to an interactive editor.

[fozziethebeat]

Assigning to @mashdragon to give it a whirl

[AbdBarho]

It would be great if you can make the component render lazily, react-markdown + syntax highlighting is ~200kb when gziped, which basically doubles our bundle size & loading times.

[mashdragon]

It would be great if you can make the component render lazily, react-markdown + syntax highlighting is ~200kb when gziped, which basically doubles our bundle size & loading times.

Ok, I have implemented lazy loading with dd119f7. The raw message is displayed before the content is rendered so the space taken up doesn't change as much when it loads.

I need some help with the lack of styling on many HTML elements, so if you can, please connect someone who knows how the website styling works.