react-markdown for OpenAI chat stream?

[ariveramedentem]

Hello - I can't seem to get react-markdown to intermittently parse and render the markdown that is coming back in a stream from OpenAI. Has anyone else tried this and gotten it to work?

[wooorm]

From a react-markdown perspective, it’s possible to help you if you provide more info about what does and doesn’t work.

Generally, things should just work. There’s nothing about OpenAI or react-markdown that would not work. This probably has more to do with “how to do things in react”

[ariveramedentem]

Sure. The <Markdown /> component is wrapping a prop that contains the OpenAI response which is progressively updated via a stream. The text continues to appear on screen, but the markdown itself doesn't render into HTML until the text finishes streaming. It's almost as if the parsing of the markdown is being delayed until the inner contents of the element remains unchanged for like 300ms.

I attempted to force a re-render, but it didn't work. Here is the relevant code:

export default function Chat() {
    const { response } = useOpenAI();

    return (
        <Markdown>{response}</Markdown>
    );
}

The response continues to print on screen, but as unparsed markdown. I am hoping that as the response populates, it can be rendered into HTML from markdown.

[wooorm]

it’s unclear what useOpenAI.
But this has to do with that.
And React.
Not with react-markdown.

How do you show unparsed markdown?
What is an example of unparsed markdown and how should it show.
What is the type of response? That sounds like a Response object. Not a string. react-markdown only accepts string.

[ariveramedentem]

response is just a string. I'll keep digging.

[ChristianMurphy]

@ariveramedentem most likely the issue is a dependency or react usage one.
However if you believe it is an issue with react-markdown I'd recommend sharing a sandbox like the one in https://github.com/orgs/remarkjs/discussions/1262
https://codesandbox.io/p/devbox/numbered-list-broken-in-safari-s32mv7?file=%2Findex.html simulates an LLM returning text by using a timeout, though the issue in https://github.com/orgs/remarkjs/discussions/1262 was a quirk of the safari styles rather than react-markdown

[ariveramedentem]

I'm an idiot. This was definitely not a react-markdown issue. Thank you for the assistance.