feat: add vue-renderer-markdown for markdown rendering

Author: atinux

package.json

@@ -12,18 +12,22 @@
     "db:migrate": "drizzle-kit migrate"
   },
   "dependencies": {
+    "@iconify/vue": "^5.0.0",
     "@nuxt/ui": "^4.0.0",
-    "@nuxtjs/mdc": "^0.17.4",
     "ai": "^5.0.59",
     "date-fns": "^4.1.0",
     "drizzle-orm": "^0.44.5",
     "h3": "beta",
+    "katex": "^0.16.23",
+    "mermaid": "^11.12.0",
     "nitro": "npm:nitro-nightly",
     "ofetch": "^1.4.1",
     "pg": "^8.16.3",
     "shiki-stream": "^0.1.2",
     "vue": "^3.5.22",
+    "vue-renderer-markdown": "0.0.55-beta.2",
     "vue-router": "^4.5.1",
+    "vue-use-monaco": "^0.0.33",
     "zod": "^4.1.11"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -1,6 +1,6 @@
 import { defineEventHandler, getValidatedRouterParams } from 'h3'
 import { useUserSession } from '../../../utils/session'
-import { useDrizzle, tables, eq, and } from '../../../utils/drizzle'
+import { useDrizzle, and } from '../../../utils/drizzle'
 import { z } from 'zod'
 
 

routes/api/chats/[id].get.ts

@@ -6,6 +6,9 @@
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path d="M146.496 211.2H234.822C237.627 211.2 240.383 210.468 242.813 209.078C245.242 207.688 247.259 205.688 248.662 203.279C250.064 200.871 250.801 198.139 250.8 195.359C250.799 192.579 250.059 189.847 248.655 187.44L189.337 85.612C187.935 83.2043 185.918 81.2049 183.489 79.8147C181.06 78.4246 178.305 77.6927 175.5 77.6927C172.695 77.6927 169.94 78.4246 167.511 79.8147C165.082 81.2049 163.065 83.2043 161.663 85.612L146.496 111.666L116.841 60.7179C115.438 58.3104 113.42 56.3113 110.991 54.9214C108.561 53.5315 105.805 52.7998 103 52.7998C100.195 52.7998 97.4386 53.5315 95.0089 54.9214C92.5793 56.3113 90.5615 58.3104 89.1583 60.7179L15.3453 187.44C13.9411 189.847 13.2012 192.579 13.2 195.359C13.1987 198.139 13.9363 200.871 15.3384 203.279C16.7405 205.688 18.7578 207.688 21.1873 209.078C23.6168 210.468 26.3728 211.2 29.1783 211.2H84.6219C106.589 211.2 122.789 201.636 133.937 182.979L161 136.526L175.496 111.666L219 186.34H161L146.496 211.2ZM83.7181 186.314L45.0255 186.306L103.026 86.7466L131.966 136.526L112.589 169.798C105.186 181.904 96.7763 186.314 83.7181 186.314Z" fill="var(--ui-primary)" />
+    <path
+      d="M146.496 211.2H234.822C237.627 211.2 240.383 210.468 242.813 209.078C245.242 207.688 247.259 205.688 248.662 203.279C250.064 200.871 250.801 198.139 250.8 195.359C250.799 192.579 250.059 189.847 248.655 187.44L189.337 85.612C187.935 83.2043 185.918 81.2049 183.489 79.8147C181.06 78.4246 178.305 77.6927 175.5 77.6927C172.695 77.6927 169.94 78.4246 167.511 79.8147C165.082 81.2049 163.065 83.2043 161.663 85.612L146.496 111.666L116.841 60.7179C115.438 58.3104 113.42 56.3113 110.991 54.9214C108.561 53.5315 105.805 52.7998 103 52.7998C100.195 52.7998 97.4386 53.5315 95.0089 54.9214C92.5793 56.3113 90.5615 58.3104 89.1583 60.7179L15.3453 187.44C13.9411 189.847 13.2012 192.579 13.2 195.359C13.1987 198.139 13.9363 200.871 15.3384 203.279C16.7405 205.688 18.7578 207.688 21.1873 209.078C23.6168 210.468 26.3728 211.2 29.1783 211.2H84.6219C106.589 211.2 122.789 201.636 133.937 182.979L161 136.526L175.496 111.666L219 186.34H161L146.496 211.2ZM83.7181 186.314L45.0255 186.306L103.026 86.7466L131.966 136.526L112.589 169.798C105.186 181.904 96.7763 186.314 83.7181 186.314Z"
+      fill="var(--ui-primary)"
+    />
   </svg>
 </template>

src/components/Logo.vue

@@ -14,7 +14,7 @@ export const useChats = createSharedComposable(() => {
   const chats = ref<Chat[]>([])
 
   const fetchChats = async () => {
-    chats.value = await $fetch('/api/chats').then(data => data.map((chat: any) => ({
+    chats.value = await $fetch('/api/chats').then(data => data.map((chat: never) => ({
       id: chat.id,
       label: chat.title || 'Untitled',
       to: `/chat/${chat.id}`,

src/composables/useChats.ts

@@ -1,22 +1,15 @@
 <script setup lang="ts">
-import type { DefineComponent } from 'vue'
 import { ref, onMounted } from 'vue'
 import { $fetch } from 'ofetch'
 import { Chat } from '@ai-sdk/vue'
 import { DefaultChatTransport } from 'ai'
 import type { UIMessage } from 'ai'
 import { useClipboard } from '@vueuse/core'
 import { getTextFromMessage } from '@nuxt/ui/utils/ai'
-import ProseStreamPre from '../../components/prose/PreStream.vue'
 import { useModels } from '../../composables/useModels'
 import { useChats } from '../../composables/useChats'
-import MDCRenderer from '@nuxtjs/mdc/runtime/components/MDCRenderer.vue'
 import { useRoute } from 'vue-router'
-import { parseMarkdown } from '@nuxtjs/mdc/runtime'
-
-const components = {
-  pre: ProseStreamPre as unknown as DefineComponent
-}
+import MarkdownRender from 'vue-renderer-markdown'
 
 const route = useRoute()
 const toast = useToast()
@@ -44,8 +37,6 @@ const chat = new Chat({
   onData: (dataPart) => {
     if (dataPart.type === 'data-chat-title') {
       fetchChats()
-    } else {
-      console.log(dataPart)
     }
   },
   onError(error) {
@@ -123,11 +114,8 @@ onMounted(() => {
                   loading
                 />
               </template>
-              <MDCRenderer
-                :body="getTextFromMessage(message)"
-                unwrap="p"
-                :components="components"
-                :parser-options="{ highlight: false }"
+              <MarkdownRender
+                :content="getTextFromMessage(message)"
               />
             </div>
           </template>

src/pages/chat/[id].vue

@@ -1,5 +1,4 @@
 import { defineConfig } from 'vite'
-import path from 'path'
 import { nitro } from 'nitro/vite'
 import vue from '@vitejs/plugin-vue'
 import vueRouter from 'unplugin-vue-router/vite'
@@ -28,12 +27,5 @@ export default defineConfig({
       }
     }),
     vueDevtools()
-  ],
-  // https://github.com/nuxt-content/mdc#stub-nuxt-module-imports
-  resolve: {
-    alias: {
-      '#mdc-imports': path.resolve(__dirname, './stub-mdc-imports.js'),
-      '#mdc-configs': path.resolve(__dirname, './stub-mdc-imports.js'),
-    }
-  }
+  ]
 })