I've been working on my first Saas App, similar to a ChatGPT, using NextJs with the OpenAI Api. Most of the development was based on a YouTube tutorial until I encountered two errors caused by an update in the OpenAI version. Despite trying various solutions, I have been unable to resolve the issues.
Below is the code snippet from the page.tsx file where the errors occur.
"use client";
// Code snippet goes here
The errors are highlighted within the following code snippet:
Type 'string | ChatCompletionContentPart[] | null' is not assignable to type 'Key | null | undefined'.
Type 'string | ChatCompletionContentPart[] | null' is not assignable to type 'ReactNode'.
<div
**key={message.content}**
className={cn(
"p-8 w-fiull flex items-start gap-x-8 rounded-lg",
message.role === "user"
? "bg-white border border-black/10"
: "bg-muted"
)}
>
{message.role === "user" ? <UserAvatar /> : <BotAvatar />}
<p className="text-sm">**{message.content**}</p>
</div>
Refer to the route file called route.ts for the code below:
// Code snippet from route.ts
Despite seeking help from platforms like Stack Overflow and GitHub, none of the suggested solutions fixed my problems.
If anyone has a solution that can help me resolve these errors, your assistance would be greatly appreciated. Thank you!