hmm i havent tried but the code is quite

[outer summit]

the example in the docs streams a bunch of nested <spans> which ReactMarkdown is not able to take in. but I dont understand the whole thing well enough to figure out, if its possible to stream a pure string and pass that to react markdown. the following results in an error

  <ReactMarkdown
        remarkPlugins={[remarkGfm, remarkMath]}
        rehypePlugins={[rehypeKatex, rehypePrism]}
      >
    {message}
   <Suspense>
     <Reader reader={reader} />
   </Suspense>
 </ReactMarkdown>

Type 'Element' is not assignable to type 'string'.ts(2322)

[latent grail]

about the span, you can change <span> to <> to get a nested fragments that will be rendered as strings in the frontend, but it won't work for ReactMarkdown

you have to compile markdown in the browser here, because logically, server components are "immutable" (i think) – whatever has been printed cannot be "backspaced" (so you cannot process tokens that has been streamed but only process tokens that has just been received from the LLM), but this "backspace" functionality is critical for the markdown parser to work

[outer summit]

ok <> indeed does not produces any element in the fronend. good to know. than a client side wrapper should do the trick no?

hmmm well ill try my luck. not sure yet 😄

[latent grail]

basically the markdown compilation step needs to take place on the browser

make a RenderMarkdown component that takes children and compiles it to markdown on the browser