Could Nuxt Content be used to render Markdown chat messages in real time?

[dosstx]

Hi all, i am building a chat bot app using the Open AI API. I have the API returning the chat messages in markdown format, so I was wondering if the Nuxt Content module could be used to render the chat messages in real time? Otherwise, currenty I am using the vue3-markdown-it package. Here's the logic:

<div v-for="m in messages" :key="m.id">
                <Markdown v-show="m.role === 'assistant'" class="prose dark:prose-invert" :source="m.content" />
 </div>

[pedraal]

Hi,
I wanted to do the same thing and by looking at the @nuxt/content code I found that what you might want to use for this is the @nuxtjs/mdc module which is the (not only) markdown parser and renderer used in @nuxt/content

[dosstx]

@pedraal I tried to use the nuxt/content module, but there was a slight flash of markdown code during generation on UI, which was bad UX for me. I didn't know how to fix that issue, so I went with the Vue-showdown and that seemed to work better for my use case....but I am no expert. Any advice or tips you have on how to optimally use the Nuxt/Content with rendering markdown content from the OpenAI API would be very helpful. Thank you.

[pedraal]

Well, I have the exact same use case, and after a few tries, I didn't manage to get rid of a weird behaviour where adding a new <MDC> component after another one led to updating the content of the previous one... It's kind of hard to explain. I even tried to run the playground of nuxtjs/mdc to look for a fix for my bug but I couldn't get it running on my machine.
But to conclude, neither nuxtjs/mdc and nuxt/content seems to fit this use case sadly. Sorry for the misleading comment !

[pedraal]

@dosstx Rest makes things clearer 😄 Finally got it working using nuxtjs/mdc (in a nuxt app obviously, not a plain Vue 3 SPA). If you want to give it a look, you can go to my repo. Everything I use to do this should be found in the nuxt.config.ts and components/chat/Message.vue files.

Also, I didn't observe the "slight flash" you mentioned within my app.

Edit : Please note that by default, the @nuxtjs/mdc package performs syntax highlighting through an api endpoint, to perform it on the clientside (cf nuxt-modules/mdc#135), there is a sessionStorage item that you can set. It is set in the pages/[chatId].vue page.

[dosstx]

Thank you very much. I'll check it out when I get back to that issue.