Javascript – Format responses from open-ai ai in typescript

I’m using nextjs to hit the open ai api and using the ai npm package to tie it all together. Everything works out of the box so to speak and is amazing. However, I am not seeing line breaks and so the responses are just a single line that piles up on top of itself.

https://www.npmjs.com/package/ai

For instance This response:

This is a paragraph.

This is a new paragraph.

looks like this:
This is a paragraph. This is a new paragraph.

So what I am trying to figure out is how to make it so that I am able to either insert <br> tags around the areas that need them. Or <p> tags around the paragraphs themselves. i am probably missing something obvious here but felt it was worth asking as I could not get the answer from chatgpt itself, at least not with the questions I was asking.

Is there a default way to do this from open-ai that I missed?

Here is the sample code from the package for reference:

import OpenAI from 'openai';
import { OpenAIStream, StreamingTextResponse } from 'ai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

export const runtime = 'edge';

export async function POST(req) {
  const { messages } = await req.json();
  const response = await openai.chat.completions.create({
    model: 'gpt-4',
    stream: true,
    messages,
  });
  const stream = OpenAIStream(response);
  return new StreamingTextResponse(stream);
}

// ./app/page.js
'use client';

import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          {m.role}: {m.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input
          value={input}
          placeholder="Say something..."
          onChange={handleInputChange}
        />
      </form>
    </div>
  );
}

IN this exmple, i want to format the m.content to see line breaks where it currently does not. Although in the console if you log the m.content and then click into the the string on the value it will show you that the paragraph is there, it just isn’t formatted to work in html