@meistrari/chat-nuxt 3.16.0-rc.0 → 3.16.0-rc.2

package/README.md

@@ -65,7 +65,7 @@ Declared in `src/runtime/embed/types.ts`; prop, feature-flag, and event payload
 | `features` | `Partial<ChatFeatureConfig>` | `{}` | Toggle `showUsageTab`, `showDebugOption`, `showCancelButton`, `showTtft`, and `chatOutboundQueue`; all released features default to `true` |
 | `loadingMessages` | `readonly string[] \| null` | Default chat messages | Override pending-response messages |
 | `loadingMessagesMode` | `'ordered' \| 'random' \| null` | `'ordered'` | Rotate custom messages in order or at random; only applies when `loadingMessages` has a non-empty message |
-| `customComponents` | `Record<string, Component>` | `undefined` | Custom markdown renderers keyed by markdown node or tag name |
+| `customComponents` | `Record<string, Component>` | `undefined` | Custom markdown renderers keyed by markdown node or tag name. Components receive `node` plus the parser lifecycle props `loading` and `autoClosed` |
 | `customHtmlTags` | `readonly string[]` | `undefined` | Extra HTML tags allowed by the markdown renderer |
 | `citations` | `ChatCitationsConfig \| null` | `undefined` | Enables `cite://` citations in assistant messages (see [Citations](docs/guides/citations.md)) |
 | `feedbackConfig` | `MessageFeedbackConfig \| null` | `undefined` | Enables 👍/👎 feedback on assistant messages; providing the prop (even `{}`) shows the controls |
@@ -111,14 +111,14 @@ Installing `@meistrari/chat-nuxt` installs the runtime packages used by the laye
 | `@iconify/vue` + `@iconify-json/ph` | `^5.0.0` / `^1.2.2` | Icon rendering support (Phosphor set) |
 | `@vueuse/core` | `^12.8.0` | Runtime composables used by chat UI |
 | `@vueuse/components` | `^12.8.0` | VueUse component peer expected by the shared runtime |
-| `beautiful-mermaid` + `mermaid` | `^1.1.3` / `^11.13.0` | Mermaid diagram rendering in markdown |
-| `dompurify` | `^3.3.2` | HTML sanitization for rendered markdown |
+| `mermaid` | `^11.13.0` | Native markstream Mermaid diagram rendering |
 | `h3` | `^1.15.0` | Server route utilities provided by Nuxt/Nitro |
-| `markstream-vue` | `0.0.3-beta.6` | Markdown streaming renderer |
+| `markstream-vue` | `2.0.7` | Markdown streaming renderer |
 | `motion` | `^11.13.0` | Animation component runtime |
 | `nitropack` | `^2.10.0` | Runtime config and task utilities provided by Nuxt/Nitro |
 | `pdfjs-dist` | `^5.4.530` | PDF file previews |
 | `posthog-js` | `^1.364.2` | Optional PostHog feature-flag helper |
+| `stream-diffs` | `0.0.2` | Native markstream rich code and diff rendering |
 | `virtua` | `^0.42.0` | Virtualized list runtime expected by shared UI |
 | `vue-i18n` | `^11.0.0` | Internationalization runtime expected by shared UI |
 | `xlsx` | `^0.18.5` | Spreadsheet file previews |

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@meistrari/chat-nuxt",
   "configKey": "chatNuxt",
-  "version": "3.16.0-rc.0",
+  "version": "3.16.0-rc.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -145,8 +145,12 @@ function patchStreamMarkdownParserSource(source) {
 }
 function resolvePatchedStreamMarkdownParser(from) {
   try {
-    const markstreamEntry = createRequire(from).resolve("markstream-vue");
-    const entry = createRequire(markstreamEntry).resolve("stream-markdown-parser");
+    const markstreamStyles = createRequire(from).resolve("markstream-vue/index.css");
+    const markstreamRoot = dirname(dirname(markstreamStyles));
+    const parserRequireEntry = createRequire(join(markstreamRoot, "package.json")).resolve("stream-markdown-parser");
+    const parserRoot = dirname(dirname(parserRequireEntry));
+    const parserPackage = JSON.parse(readFileSync(join(parserRoot, "package.json"), "utf8"));
+    const entry = parserPackage.module ? join(parserRoot, parserPackage.module) : parserRequireEntry;
     const { source, applied } = patchStreamMarkdownParserSource(readFileSync(entry, "utf8"));
     return { entry, source, applied };
   } catch {
@@ -508,7 +512,6 @@ const module$1 = defineNuxtModule({
       if (isServer) {
         return;
       }
-      config.plugins = config.plugins || [];
       if (Array.isArray(config.resolve.alias)) {
         config.resolve.alias.push(...Object.entries(runtimeAliases).map(([find, replacement]) => ({ find, replacement })));
       } else {
@@ -521,25 +524,6 @@ const module$1 = defineNuxtModule({
         ...config.resolve.dedupe || [],
         ...runtimeAliasDedupe
       ]));
-      config.plugins.push({
-        name: "@meistrari/chat-nuxt:elkjs-umd-interop",
-        enforce: "pre",
-        apply: "serve",
-        load(id) {
-          const cleanId = id.split("?")[0] ?? id;
-          if (!cleanId.endsWith("/elkjs/lib/elk.bundled.js")) {
-            return null;
-          }
-          try {
-            const source = readFileSync(cleanId, "utf8");
-            return `${source}
-export default globalThis.ELK;
-`;
-          } catch {
-            return null;
-          }
-        }
-      });
     });
     const serverDir = join(runtimeDir, "server");
     const publicAssetsDir = join(runtimeDir, "public/assets");

package/dist/runtime/conversations/components/chat-conversation-item.vue

@@ -4,7 +4,7 @@ const props = defineProps({
   conversation: { type: null, required: true },
   active: { type: Boolean, required: true },
   draggable: { type: Boolean, required: false },
-  itemClass: { type: null, required: false },
+  itemClass: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
   userImage: { type: String, required: false },
   selectConversation: { type: Function, required: false }
 });

package/dist/runtime/messages/components/chat-message-bubble.vue

@@ -56,16 +56,6 @@ function formatTime(date) {
   const d = date instanceof Date ? date : new Date(date);
   return d.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" });
 }
-const wasEverPending = ref(false);
-const shouldAnimate = ref(false);
-watch(() => props.message.status, (status, oldStatus) => {
-  if (status === "pending") {
-    wasEverPending.value = true;
-  }
-  if (oldStatus === "pending" && status === "completed" && wasEverPending.value) {
-    shouldAnimate.value = true;
-  }
-}, { immediate: true });
 const displayContent = computed(() => props.message.content ?? "");
 const userContentHtml = computed(() => {
   if (props.message.role !== "user")
@@ -180,13 +170,12 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
 
         <template v-else>
             <!--
-                A live stream normally owns the pending state, so this block stays
-                out of its way. Stand-in steps are the exception: until the run
-                emits anything the stream has nothing to show, and that silence is
-                exactly what they cover.
+                Mounted for the whole pending turn so activity remains visible
+                while the current streamed chunk is empty between assistant
+                messages or tool phases.
             -->
             <ChatReasoningThought
-                v-if="hasReasoning || preparingSteps?.length && !message.content || isPending && !streamActive"
+                v-if="hasReasoning || isPending"
                 :reasoning-data="message.reasoningData ?? []"
                 :completed="!isPending"
                 :preparing-steps="preparingSteps"
@@ -198,7 +187,7 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
                 v-if="message.content && (!isPending || streamActive)"
                 max-w-prose
                 :class="[
-  isFailed ? 'flex gap-12px items-start bg-subtle border border-solid rounded-12px w-full' : 'rounded-12px code-theme'
+  isFailed ? 'flex gap-12px items-start bg-subtle border border-solid rounded-12px w-full' : 'rounded-12px'
 ]"
             >
                 <template v-if="isFailed">
@@ -246,8 +235,11 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
                                     :content="segment.content"
                                     :custom-components="mergedCustomComponents"
                                     :custom-html-tags="mergedCustomHtmlTags"
-                                    :render-code-blocks-as-pre="true"
-                                    :typewriter="isPending || shouldAnimate"
+                                    :fade="true"
+                                    :final="!isPending"
+                                    :smooth-streaming="isPending ? 'auto' : false"
+                                    :typewriter="isPending"
+                                    mode="chat"
                                 />
                             </ClientOnly>
                             <ChatFilePreview
@@ -269,8 +261,11 @@ const hasDetectedFiles = computed(() => contentSegments.value.some((s) => s.type
                             :content="displayContent"
                             :custom-components="mergedCustomComponents"
                             :custom-html-tags="mergedCustomHtmlTags"
-                            :render-code-blocks-as-pre="true"
-                            :typewriter="isPending || shouldAnimate"
+                            :fade="true"
+                            :final="!isPending"
+                            :smooth-streaming="isPending ? 'auto' : false"
+                            :typewriter="isPending"
+                            mode="chat"
                             text-black-900
                         />
                     </ClientOnly>

package/dist/runtime/messages/components/chat-message-list.d.vue.ts

@@ -13,8 +13,8 @@ type __VLS_Props = {
     showTtft?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
-    isPinned: import("vue").Ref<boolean, boolean>;
-    scrollToBottom: () => void;
+    isPinned: any;
+    scrollToBottom: any;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     retry: (messageId: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{

package/dist/runtime/messages/components/chat-message-list.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useChatScrollStickiness } from "../composables/chat-scroll-stickiness";
+import { useStickToBottom } from "markstream-vue/utils";
 const props = defineProps({
   messages: { type: Array, required: true },
   loading: { type: Boolean, required: false },
@@ -10,22 +10,42 @@ const props = defineProps({
 });
 const emit = defineEmits(["retry"]);
 const conversationRef = ref(null);
-const { isPinned, scrollToBottom } = useChatScrollStickiness(conversationRef);
+const conversationElements = computed(() => {
+  const root = conversationRef.value?.$el;
+  if (!(root instanceof HTMLElement))
+    return null;
+  const content = root.matches("[data-chat-conversation]") ? root : root.querySelector("[data-chat-conversation]");
+  if (!content)
+    return null;
+  const scroll = root.matches("[data-reka-scroll-area-viewport]") ? root : root.querySelector("[data-reka-scroll-area-viewport]") ?? content;
+  return {
+    content: content.firstElementChild ?? content,
+    scroll
+  };
+});
+const scrollRoot = computed(() => conversationElements.value?.scroll ?? null);
+const contentRoot = computed(() => conversationElements.value?.content ?? null);
+const {
+  bottomPinned: isPinned,
+  scheduleScrollToBottom,
+  scrollToBottom
+} = useStickToBottom(scrollRoot, contentRoot);
 const skeletonMessages = [
   { id: "user-1", align: "end", width: "58%", height: "44px" },
   { id: "assistant-1", align: "start", width: "92%", height: "116px" },
   { id: "user-2", align: "end", width: "46%", height: "44px" },
   { id: "assistant-2", align: "start", width: "84%", height: "92px" }
 ];
-let knownMessageIds = new Set(props.messages.map((message) => message.id));
-watch(() => props.messages.map((message) => `${message.id}:${message.role}`).join("|"), () => {
-  const hasNewUserMessage = props.messages.some(
-    (message) => message.role === "user" && !knownMessageIds.has(message.id)
-  );
-  knownMessageIds = new Set(props.messages.map((message) => message.id));
-  if (hasNewUserMessage)
-    scrollToBottom();
+const latestOutputSignal = computed(() => {
+  const latestMessage = props.messages.at(-1);
+  if (!latestMessage)
+    return "empty";
+  return `${props.messages.length}:${latestMessage.id}:${latestMessage.status}:${latestMessage.content?.length ?? 0}`;
 });
+watch(latestOutputSignal, async () => {
+  await nextTick();
+  scheduleScrollToBottom();
+}, { flush: "post" });
 defineExpose({
   isPinned,
   scrollToBottom
@@ -43,6 +63,7 @@ defineExpose({
     >
         <TelaChatConversation
             ref="conversationRef"
+            :scroll-area="variant === 'widget'"
             :class="{
   'pt-72px!': (variant ?? 'page') === 'page',
   'pt-72px pb-24px px-16px': variant === 'mobile'

package/dist/runtime/messages/components/chat-message-list.vue.d.ts

@@ -13,8 +13,8 @@ type __VLS_Props = {
     showTtft?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
-    isPinned: import("vue").Ref<boolean, boolean>;
-    scrollToBottom: () => void;
+    isPinned: any;
+    scrollToBottom: any;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     retry: (messageId: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{

package/dist/runtime/messages/composables/chat.js

@@ -207,12 +207,10 @@ export function useChat(options = {}) {
   );
   const reasoningCache = createReasoningCache();
   const processedMessages = computed(() => {
-    const resolved = resolveReasoningDisplayMessages(messages.value, reasoningCache);
     const messageId = streamingMessageId.value;
     const content = directStream.streamingText.value;
-    if (!messageId || !content)
-      return resolved;
-    return resolved.map((message) => message.id === messageId && (message.status === "pending" || pendingStreamReconciliationIds.value.has(message.id)) ? { ...message, content: resolveStreamingContent(message.content, content) } : message);
+    const overlaid = !messageId || content === null ? messages.value : messages.value.map((message) => message.id === messageId && (message.status === "pending" || pendingStreamReconciliationIds.value.has(message.id)) ? { ...message, content } : message);
+    return resolveReasoningDisplayMessages(overlaid, reasoningCache);
   });
   const stopCondition = computed(
     () => !hasPendingMessage.value && pendingStreamReconciliationIds.value.size === 0
@@ -529,9 +527,9 @@ export function useChat(options = {}) {
           agentSessionExecutable.value = false;
           agentSessionRewakeable.value = false;
         }
+        startPolling();
       };
       let response;
-      let acceptedByStream = false;
       try {
         response = await directStream.connectMessage(
           chatApi.path(`/conversations/${currentConversation.value.id}/messages/stream`),
@@ -542,7 +540,6 @@ export function useChat(options = {}) {
           }),
           acceptMessagePair
         );
-        acceptedByStream = true;
       } catch (streamError) {
         const statusCode = getChatApiErrorStatus(streamError);
         if (statusCode !== null && statusCode >= 400 && statusCode < 500)
@@ -565,8 +562,6 @@ export function useChat(options = {}) {
           "user"
         );
       }
-      if (!acceptedByStream)
-        startPolling();
       return response.userMessage;
     } catch (err) {
       const code = getChatApiErrorCode(err);

package/dist/runtime/messages/composables/use-direct-stream.js

@@ -115,7 +115,7 @@ function reviveMessagePair(input) {
 }
 export function useDirectStream(options = {}) {
   const activity = ref("idle");
-  const streamingText = ref("");
+  const streamingText = ref(null);
   const streamingThinking = ref("");
   const activeRunId = ref(null);
   let accumulator = createMessagePartsAccumulator();
@@ -123,7 +123,7 @@ export function useDirectStream(options = {}) {
   function resetAccumulator(runId = null) {
     accumulator = createMessagePartsAccumulator(runId);
     activeRunId.value = runId;
-    streamingText.value = "";
+    streamingText.value = null;
     streamingThinking.value = "";
   }
   function beginMessage() {
@@ -199,7 +199,7 @@ export function useDirectStream(options = {}) {
       if (status === "completed" || status === "waiting_messages") {
         const result = {
           status,
-          text: streamingText.value
+          text: streamingText.value ?? ""
         };
         if (!optimisticResultReported) {
           optimisticResultReported = true;
@@ -287,11 +287,11 @@ export function useDirectStream(options = {}) {
             if (event.kind !== "message-parts" || typeof event.runId !== "string" || typeof event.deltaSeq !== "number" || !Number.isInteger(event.deltaSeq) || event.deltaSeq < 0 || !isRecord(event.event)) {
               continue;
             }
-            const accumulated = applyMessagePartsEvent(accumulator, event);
+            const current = applyMessagePartsEvent(accumulator, event);
             activeRunId.value = accumulator.runId;
-            if (accumulated.changed) {
-              streamingText.value = accumulated.text;
-              streamingThinking.value = accumulated.thinking;
+            if (current.changed) {
+              streamingText.value = current.text;
+              streamingThinking.value = current.thinking;
             }
           }
         }

package/dist/runtime/messages/message-reasoning.d.ts

@@ -1,11 +1,18 @@
 import type { Message } from '../types/schemas/chat/conversations.js';
 import type { ReasoningStep } from './reasoning.js';
+type ParsedReasoning = {
+    steps: ReasoningStep[];
+    thinkingTexts: Set<string>;
+    currentAnswerParts: string[];
+    currentAnswerStepTexts: Set<string>;
+};
 export type ReasoningCache = {
-    bySignature: Map<string, ReasoningStep[]>;
+    bySignature: Map<string, ParsedReasoning>;
     byReference: WeakMap<unknown[], {
         messageId: string;
-        parsedSteps: ReasoningStep[];
+        parsed: ParsedReasoning;
     }>;
 };
 export declare function createReasoningCache(): ReasoningCache;
 export declare function resolveReasoningDisplayMessages(messages: Message[], cache?: ReasoningCache): Message[];
+export {};

package/dist/runtime/messages/message-reasoning.js

@@ -46,27 +46,30 @@ function groupReasoningSteps(parsedSteps) {
 function getReasoningCacheKey(messageId, reasoningData) {
   return `${messageId}:${JSON.stringify(reasoningData)}`;
 }
-function getParsedReasoningSteps(cache, messageId, reasoningData) {
+function getParsedReasoning(cache, messageId, reasoningData) {
   const referenceHit = cache.byReference.get(reasoningData);
   if (referenceHit?.messageId === messageId)
-    return referenceHit.parsedSteps;
+    return referenceHit.parsed;
   const cacheKey = getReasoningCacheKey(messageId, reasoningData);
-  let parsedSteps = cache.bySignature.get(cacheKey);
-  if (!parsedSteps) {
-    parsedSteps = parseReasoningFromPolling(reasoningData);
+  let parsed = cache.bySignature.get(cacheKey);
+  if (!parsed) {
+    parsed = parseReasoningFromPolling(reasoningData);
     for (const staleKey of cache.bySignature.keys()) {
       if (staleKey.startsWith(`${messageId}:`))
         cache.bySignature.delete(staleKey);
     }
-    cache.bySignature.set(cacheKey, parsedSteps);
+    cache.bySignature.set(cacheKey, parsed);
   }
-  cache.byReference.set(reasoningData, { messageId, parsedSteps });
-  return parsedSteps;
+  cache.byReference.set(reasoningData, { messageId, parsed });
+  return parsed;
 }
 function parseReasoningFromPolling(reasoning) {
   const allSteps = [];
   const seenContentIds = /* @__PURE__ */ new Set();
   const seenTexts = /* @__PURE__ */ new Set();
+  const thinkingTexts = /* @__PURE__ */ new Set();
+  let currentAnswerParts = [];
+  let currentAnswerStepTexts = /* @__PURE__ */ new Set();
   for (const item of reasoning) {
     if (!item || typeof item !== "object")
       continue;
@@ -98,15 +101,23 @@ function parseReasoningFromPolling(reasoning) {
       const message = itemObj.message;
       if (!Array.isArray(message.content))
         continue;
+      const answerParts = [];
+      const answerStepTexts = /* @__PURE__ */ new Set();
       for (const contentPart of message.content) {
         if (!contentPart || typeof contentPart !== "object")
           continue;
         const part = contentPart;
-        if (part.type === "text" && typeof part.text === "string") {
+        if ((part.type === "text" || part.type === "thinking") && typeof part.text === "string") {
+          if (part.type === "text")
+            answerParts.push(part.text);
+          if (part.type === "thinking")
+            thinkingTexts.add(part.text);
           if (seenTexts.has(part.text))
             continue;
           seenTexts.add(part.text);
           allSteps.push(part.text);
+          if (part.type === "text")
+            answerStepTexts.add(part.text);
         } else if (part.type === "tool_use" && part.id && part.name) {
           const toolId = part.id;
           if (seenContentIds.has(`tool_use:${toolId}`))
@@ -130,6 +141,10 @@ function parseReasoningFromPolling(reasoning) {
           });
         }
       }
+      if (!itemObj.parent_tool_use_id && answerParts.length > 0) {
+        currentAnswerParts = answerParts;
+        currentAnswerStepTexts = answerStepTexts;
+      }
     } else if (itemObj.type === "text" && typeof itemObj.text === "string") {
       if (seenTexts.has(itemObj.text))
         continue;
@@ -158,21 +173,23 @@ function parseReasoningFromPolling(reasoning) {
       });
     }
   }
-  return groupReasoningSteps(allSteps);
+  return { steps: groupReasoningSteps(allSteps), thinkingTexts, currentAnswerParts, currentAnswerStepTexts };
 }
 export function resolveReasoningDisplayMessages(messages, cache = createReasoningCache()) {
   const renderedSteps = /* @__PURE__ */ new Set();
   return messages.map((message) => {
     if (message.role !== "assistant" || !message.reasoningData || !Array.isArray(message.reasoningData))
       return message;
-    const parsedSteps = getParsedReasoningSteps(cache, message.id, message.reasoningData);
+    const parsed = getParsedReasoning(cache, message.id, message.reasoningData);
     const displaySteps = [];
-    for (const step of parsedSteps) {
+    const currentAnswerMatches = message.content === parsed.currentAnswerParts.join("");
+    for (const step of parsed.steps) {
       const key = getReasoningStepKey(step);
       if (renderedSteps.has(key))
         continue;
-      if (typeof step === "string" && message.content && step === message.content)
+      if (typeof step === "string" && currentAnswerMatches && parsed.currentAnswerStepTexts.has(step) && !parsed.thinkingTexts.has(step)) {
         continue;
+      }
       renderedSteps.add(key);
       displaySteps.push(step);
     }

package/dist/runtime/rendering/components/app-markdown-render.d.vue.ts

@@ -1,6 +1,7 @@
 import type { Component } from 'vue';
 type __VLS_Props = {
     content?: string | null;
+    final?: boolean;
     renderCodeBlocksAsPre?: boolean;
     typewriter?: boolean;
     customComponents?: Record<string, Component>;
@@ -10,6 +11,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     content: string | null;
     customComponents: Record<string, Component>;
     customHtmlTags: readonly string[];
+    final: boolean;
     renderCodeBlocksAsPre: boolean;
     typewriter: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/rendering/components/app-markdown-render.vue

@@ -1,10 +1,9 @@
 <script setup>
-import MarkdownRender, { getMarkdown, parseMarkdownToStructure, removeCustomComponents, setCustomComponents } from "markstream-vue";
-import MermaidDiagram from "./renderers/mermaid-diagram.vue";
-import { transformMarkdownNodes } from "../markdown/nodes";
+import MarkdownRender, { removeCustomComponents, setCustomComponents } from "markstream-vue";
 import { wrapCustomMarkdownComponents } from "../markdown/custom-components";
 const props = defineProps({
   content: { type: [String, null], required: false, default: "" },
+  final: { type: Boolean, required: false, default: true },
   renderCodeBlocksAsPre: { type: Boolean, required: false, default: false },
   typewriter: { type: Boolean, required: false, default: true },
   customComponents: { type: Object, required: false, default: () => ({}) },
@@ -13,7 +12,6 @@ const props = defineProps({
 const attrs = useAttrs();
 const instance = getCurrentInstance();
 const scopeId = `app-markdown-render-${instance?.uid ?? Math.random().toString(36).slice(2)}`;
-const markdown = computed(() => getMarkdown(scopeId, { customHtmlTags: props.customHtmlTags }));
 function escapeSingleDollarSigns(text) {
   return text.replace(/(```[\s\S]*?```|``+[^`]*``+|`[^`]*`|!?\[(?:[^\[\]]|\[[^\[\]]*\])*\]\([^)]*\))|(?<![$\\])\$(?!\$)/g, (_match, codeSpan) => {
     if (codeSpan)
@@ -21,24 +19,10 @@ function escapeSingleDollarSigns(text) {
     return "\\$";
   });
 }
-const parseOptions = computed(() => {
-  const tags = props.customHtmlTags;
-  return tags && tags.length > 0 ? { customHtmlTags: [...tags] } : void 0;
-});
-const nodes = computed(() => {
-  const parsedNodes = parseMarkdownToStructure(
-    escapeSingleDollarSigns(props.content ?? ""),
-    markdown.value,
-    parseOptions.value
-  );
-  return transformMarkdownNodes(parsedNodes);
-});
+const escapedContent = computed(() => escapeSingleDollarSigns(props.content ?? ""));
 const customMarkdownComponents = computed(() => wrapCustomMarkdownComponents(props.customComponents));
 watchEffect(() => {
-  setCustomComponents(scopeId, {
-    mermaid: MermaidDiagram,
-    ...customMarkdownComponents.value
-  });
+  setCustomComponents(scopeId, customMarkdownComponents.value);
 });
 onBeforeUnmount(() => {
   removeCustomComponents(scopeId);
@@ -48,8 +32,10 @@ onBeforeUnmount(() => {
 <template>
     <MarkdownRender
         v-bind="attrs"
-        :nodes="nodes"
+        :content="escapedContent"
         :custom-id="scopeId"
+        :custom-html-tags="customHtmlTags"
+        :final="final"
         :render-code-blocks-as-pre="renderCodeBlocksAsPre"
         :typewriter="typewriter"
     />

package/dist/runtime/rendering/components/app-markdown-render.vue.d.ts

@@ -1,6 +1,7 @@
 import type { Component } from 'vue';
 type __VLS_Props = {
     content?: string | null;
+    final?: boolean;
     renderCodeBlocksAsPre?: boolean;
     typewriter?: boolean;
     customComponents?: Record<string, Component>;
@@ -10,6 +11,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     content: string | null;
     customComponents: Record<string, Component>;
     customHtmlTags: readonly string[];
+    final: boolean;
     renderCodeBlocksAsPre: boolean;
     typewriter: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/rendering/markdown/custom-components.d.ts

@@ -2,7 +2,9 @@ import { type Component } from 'vue';
 import type { BaseNode } from 'markstream-vue';
 export type CustomMarkdownNode = BaseNode & {
     attrs?: [string, unknown][];
+    autoClosed?: boolean;
     content?: string;
+    loading?: boolean;
 };
 export declare function customMarkdownNodeProps(node: CustomMarkdownNode): Record<string, unknown>;
 export declare function wrapCustomMarkdownComponent(component: Component, tagName?: string): Component;

package/dist/runtime/rendering/markdown/custom-components.js

@@ -1,4 +1,5 @@
 import { defineComponent, h } from "vue";
+const RESERVED_CUSTOM_MARKDOWN_PROPS = /* @__PURE__ */ new Set(["node", "loading", "autoClosed"]);
 function camelizeAttributeName(name) {
   return name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
 }
@@ -9,11 +10,16 @@ export function customMarkdownNodeProps(node) {
     if (!name)
       continue;
     const propName = camelizeAttributeName(name);
-    if (propName === "node")
+    if (RESERVED_CUSTOM_MARKDOWN_PROPS.has(propName))
       continue;
     attrProps[propName] = value;
   }
-  return { node, ...attrProps };
+  return {
+    node,
+    ...typeof node.loading === "boolean" ? { loading: node.loading } : {},
+    ...typeof node.autoClosed === "boolean" ? { autoClosed: node.autoClosed } : {},
+    ...attrProps
+  };
 }
 function customMarkdownComponentAdapterName(tagName, component) {
   if (typeof component === "function" && component.name)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/chat-nuxt",
-  "version": "3.16.0-rc.0",
+  "version": "3.16.0-rc.2",
   "type": "module",
   "exports": {
     ".": {
@@ -50,15 +50,14 @@
     "@sentry/nuxt": "^10.0.0",
     "@vueuse/components": "^12.8.0",
     "@vueuse/core": "^12.8.0",
-    "beautiful-mermaid": "^1.1.3",
-    "dompurify": "^3.3.2",
     "h3": "^1.15.0",
-    "markstream-vue": "0.0.3-beta.6",
+    "markstream-vue": "2.0.7",
     "mermaid": "^11.13.0",
     "motion": "^11.13.0",
     "nitropack": "^2.10.0",
     "pdfjs-dist": "^5.4.530",
     "posthog-js": "^1.364.2",
+    "stream-diffs": "0.0.2",
     "virtua": "^0.42.0",
     "vue-i18n": "^11.0.0",
     "xlsx": "^0.18.5",