Remove React Markdown for human messages

This pull implements a simple fix the formatting of human messages

Formatting (via React Markdown and Tailwind's utility classes) occurs in a couple places, but namely in the message responses. 1) AI messages 2) Human messages

We don't want human messages to be formatted; we would like- for example- code blocks to be rendered as text with backticks.

In order to remove the default formatting of messages, you can take 3 distinct approaches. (spoiler: went ahead with 3)

Reconfigure tailwind.config.js to not apply prose to specific class / types

You could then combine this with all sorts of class hierarchies for custom markdown rendering management.

typography: {
    DEFAULT: {
        css: {
            pre: false,
            code: false,
            'pre code': false,
            'code::before': false,
            'code::after': false
        }

    },
},

Modify React Markdown to render code differently

Tailwind's prose classes format specific HTML elements using default mechanisms, which conspire with React Markdown's automatic HTML element creation to create all kinds of formatting errors! But we can modify React Markdown to only generate the elements we actually want.

As an example for code blocks:

<ReactMarkdown
    className="prose prose-no-code-prose max-w-full"
    components={
        {
        a: ({ node, ...props }) => (
            <a
            {...props}
            className="text-blue-500 hover:text-blue-700"
            target="_blank"
            rel="noopener noreferrer"
            />
        ),

        code: ({ node, className, children, ...props }) => {

            return <p className="block-code">{children}</p>;
        }
        }
    }
    remarkPlugins={[remarkGfm]}
>
    {`${content}`}
</ReactMarkdown>

Remove React Markdown entirely and preserve the white space

This is the simplest option of the 3, but the most useful in this scenario. Simply remove React Markdown entirely, keep the prose, and preserve the whitespace.

<div
     className="flex flex-col preserve-lines prose max-w-full"
>
    {content}
</div>

And, in globals.css

.preserve-lines {
  white-space: pre-wrap; /* Preserves whitespace and wraps text */
}

danswer-ai / danswer

Remove React Markdown for human messages #1562