Formatting Response in React and NodeJS

API
1

I’m streaming my response from by backend through an API call. The response works perfectly but is formatted improperly on the frontend. Paragraphs are not double spaced and just show as another sentence so the response comes back as a big chunk of text.

How do I format the frontend properly to show the streamed text?

Frontend code:

const [summary, setSummary] = useState(‘’);

useEffect(() => {
if (!open) return;

let evtSource;

async function fetchSummary() {
  try {
    
    const url = new URL('https://api.url');
    url.searchParams.set('router', router);

    evtSource = new EventSource(url);

    evtSource.onmessage = (event) => {
      setSummary((prevSummary) => prevSummary + event.data);
      setIsResponseComplete(true);
    };

    evtSource.onerror = (error) => {
      console.error("EventSource failed:", error);
      evtSource.close();
      setIsResponseComplete(false);
    };

  } catch (error) {
    console.error("Error fetching summary:", error);
    setIsResponseComplete(false);
  }
}

fetchSummary();

return () => {
  if (evtSource) evtSource.close();
};

}, [entity, category, data, open]);

useEffect(() => {
if (open) {
setReferenceImages(getRandomReferences());
}
}, [open]);

And then the text is simply added with the {summary} variable in the react component. Feel like it’s a simple solution but unsure how to properly format without using innerHTML.

2

Will need to see how you are rendering the jsx here. Might be a simple css fix like whiteSpace: 'pre-wrap'.

3

Attempted that in tailwind but wasn’t successful. Here is the code:

                <div className="relative mt-6 flex-1 px-4 sm:px-6 whitespace-pre-wrap">
                    {/* Main Content */}
                    {summary}
                </div>
4

Hmm, the plot thickens. I would check via browser inspector to see that the css rule is actually being applied and not being overridden by a parent.

Pulling back from the rendering, itself, I would inspect {summary} to see what sort of new line encodings you are working with.

If you are missing new lines in {summary} I would look closely at setSummary((prevSummary) => prevSummary + event.data); to see if you are somehow not receiving the new lines in event.data.

Basically I would just keep peeling back the onion here. :+1:

1 Like
5

I had the same issue, so I googled and found this article from Stack Overflow (yes I went back to it, the one that originally helped us when we were in a fix) : https://stackoverflow.com/questions/76142673/formatting-of-chat-gpt-responses
There, a library called react-markdown was suggested, I tried it and it worked like a charm!
Read the full docs here:
https://github.com/remarkjs/react-markdown

The answer may be a bit late, but OpenAI ain’t getting old, right?