2

I'm trying to use Markdown to render the output of a Json API, in the chat conversation of this GitHub project: https://github.com/doingthisalright/chatgpt-langchain-qna-on-your-docs

But I can't make it fully work: e.g. the bullet and numbered lists render correctly.

I added these import in the Conversation.tsx:

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

And I changed the div for the AI answers this way:

               <div className={styles.messageAvatarContainer}>
                  {message.role === "AI" && "🤖"}
                </div>
                <div style={{ textAlign: message.role === "AI" ? 'start' : 'end' }}>
                    <ReactMarkdown remarkPlugins={[remarkGfm]} children={unskipNewlines(message.content)} />
                </div>

It seems to be partially fine: bold is correctly rendered. But the lists (bullet or number) just do not display correctly. It seems to be due to the fact that JSON skip the newlines, so I added a function:

function unskipNewlines(text: string): string {
    return text.replace(/\\n/g, '\n');
}

Still that doesn't render correctly... any suggestion?

Thanks!

1
  • Can you add console.log(message.content) and post the output? Maybe you have JSON string and not your actual markdown file. Commented Jun 29, 2023 at 8:05

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.