For the second week of my final open source course assignment, I decided to contribute once again to Hugging Face's chat-ui!

The issue I created was to add Markdown rendering to user messages that are sent and stored. At the time, user messages were being displayed as unrendered markdown text.

To tackle this, I created an issue detailing my planned approach. I intended to use Marked to conditionally render certain markdown elements into HTML. After diving deep into Marked's documentation, I discovered this was indeed possible - you can simply disable the elements you don't want to render into HTML!

As I started working on the implementation, I noticed something interesting: there was already a MarkdownRenderer component in place. This component was being used to render the LLM's replies from Markdown into HTML. However, it wasn't working properly for my use case.

Strangely, while the Markdown was being converted to HTML, the elements weren't displaying on-screen - they were showing up as strings instead. This behavior was puzzling, as the code appeared correct after multiple reviews. I even started doubting my understanding and created a new empty project with TailwindCSS, copying chunks of HTML and CSS from the chat-ui project to test pieces individually. Everything worked fine in isolation.

After several hours of code review, I finally spotted something unfamiliar in the Markdown Renderer component: a function called escapeHTML was being used to escape HTML, even though DOMPurify was already being used for sanitization right after!

The solution? I deleted this function, and suddenly everything worked perfectly! The markdown was now rendering properly on screen, and I could even edit the response.

The entire process took over 30 hours collectively, and the result was deleting a single line of code! Sometimes the simplest solutions are the hardest to find.

What remains is for me to implement Markdown Rendering to the user messages, and allow the user to modify their previously sent messages as well!