GPT-4 Conversation #1098089262244708422 | AI Programming And Chat | Page 1

I am inplementing a UI to render chatgpt response but when I ask somthing about mermaid, the browser gets error says:
208 react_devtools_backend.js:2655 Error: Unknown language: mer is not registered
at n (4370-2815bbef49df2bea.js:1:57882)
at Object.eE [as highlight] (4370-2815bbef49df2bea.js:1:58066)
at 4370-2815bbef49df2bea.js:1:165858
at 7321-f170db39dce686a9.js:19:102414
at node (element<code>) (7321-f170db39dce686a9.js:19:101934)
at node (element<pre>) (7321-f170db39dce686a9.js:19:102117)
at node (root) (7321-f170db39dce686a9.js:19:102117)
at i (7321-f170db39dce686a9.js:19:102188)
at l (7321-f170db39dce686a9.js:19:102368)
at 4370-2815bbef49df2bea.js:1:165281
o
Application error: a client-side exception has occurred (see the browser console for more information).
export const MessageBubble = ({ avatarUrl, message }: MessageBlockProps) => {
return (
<div
className={mb-8 flex w-full gap-4 ${
message.role === 'user' ? 'flex-row-reverse' : 'flex-row'
}}
>
<Image
src={avatarUrl}
alt="avatar"
width={50}
height={50}
className="rounded-md"
/>

  <div className="markdown-body grow rounded-xl bg-[#2E3033] p-4">
    <ReactMarkdown
      rehypePlugins={[[rehypeHighlight, { detect: true }]]}
      className={styles.response + ' text-white whitespace-pre-wrap'}
    >
      {message.content}
    </ReactMarkdown>
  </div>
  <div className="w-2 lg:w-12 xl:w-36"></div>
</div>

)
}

here is the message bubble component I used to render chatgpt response which caused the error I think? how to fix it?

#GPT-4 Conversation #1098089262244708422