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

next zephyrBOT Apr 19, 2023, 3:32 AM

#

keen wigeon Apr 19, 2023, 3:32 AM

#

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).

next zephyrBOT Apr 19, 2023, 3:33 AM

#

keen wigeon I am inplementing a UI to render chatgpt response but when I ask somthing about ...

It seems like the issue is related to syntax highlighting in your app. The error is stating that the language 'mer' (which might be referring to the Mermaid diagram syntax) is not registered in the syntax highlighting library.

To fix this issue, you can try the following steps:

Check the syntax highlighting library you are using (e.g., Prism, Highlight.js, etc.) and make sure it supports Mermaid language. If it does not support it, you might need to find a plugin or extension that adds Mermaid support.
If the library supports the Mermaid language or you have installed a plugin for it, ensure that the language is registered and properly imported in your app.

If you are using 'highlight.js', for example, you can do the following:

import hljs from 'highlight.js';
import 'highlight.js/styles/default.css'; // or any other theme
import mermaid from 'highlightjs-mermaid'; // This assumes you have installed the 'highlightjs-mermaid' package

// Register the Mermaid language
hljs.registerLanguage('mermaid', mermaid);

Finally, apply syntax highlighting in your app according to the library's documentation.

Please note that these steps are just one example, and you may need to adapt them depending on the syntax highlighting library you're using.

keen wigeon Apr 19, 2023, 3:33 AM

#

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?

next zephyrBOT Apr 19, 2023, 3:33 AM

#

keen wigeon export const MessageBubble = ({ avatarUrl, message }: MessageBlockProps) => { ...

You don't have enough credits to chat. Use /balance to see how many credits you have left. Buy a subscription tier to get more credits. Join our server here: https://discord.gg/JCnxEaE3Mx

keen wigeon Apr 19, 2023, 3:34 AM

#

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 #1098088582830362785