I'm using a Next.js framework to connect to the OpenAI API, and I've integrated it seamlessly with an AI npm package. The functionality is incredible, but I've encountered an issue regarding line breaks in the responses.
You can find the AI npm package here: https://www.npmjs.com/package/ai
For example, when I receive this response:
This is a paragraph.
This is a new paragraph.
it appears as a single line without any breaks:
This is a paragraph. This is a new paragraph.
Therefore, my goal is to figure out how to insert appropriate line break <br> tags or surround each paragraph with <p> tags. It's possible that I'm overlooking something obvious, so I thought it'd be worth asking for help since I couldn't find an answer within the chat from GPT itself.
Is there a default method provided by OpenAI to handle this issue?
Here is a reference to some sample code taken directly from the mentioned package:
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 example, I'd like to format the "m.content" in a way that includes line breaks where they are currently absent. If you log the "m.content" and inspect its string value in the console, you'll see that the paragraph structure is present; it's just not properly formatted for HTML.