From 106a87d8af5182e70bc83da18b998199ac351984 Mon Sep 17 00:00:00 2001
From: shogun444 <sayandiproy17@gmail.com>
Date: Tue, 7 Jul 2026 16:50:58 +0530
Subject: [PATCH 1/2] Render markdown in Vue chat TextContent

TextContent's prompt/description claims markdown support, but the
component rendered text with plain interpolation, showing literal
markdown syntax (e.g. **NVDA**) instead of formatted output. Parse
text with marked and sanitize with DOMPurify before binding via
v-html.

Scoped to examples/vue-chat only; @openuidev/vue-lang runtime is
unchanged.

Fixes #728
---
 examples/vue-chat/components/openui/TextContent.vue | 13 +++++++++++--
 examples/vue-chat/package.json                      |  2 ++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/examples/vue-chat/components/openui/TextContent.vue b/examples/vue-chat/components/openui/TextContent.vue
index 59a6f7a57..2ec6d8e6d 100644
--- a/examples/vue-chat/components/openui/TextContent.vue
+++ b/examples/vue-chat/components/openui/TextContent.vue
@@ -1,7 +1,16 @@
 <script setup lang="ts">
-defineProps<{ props: { text?: string } }>();
+import DOMPurify from "dompurify";
+import { marked } from "marked";
+import { computed } from "vue";
+
+const { props } = defineProps<{ props: { text?: string } }>();
+
+const html = computed(() => {
+  const raw = marked.parse(props.text ?? "", { async: false });
+  return DOMPurify.sanitize(raw);
+});
 </script>
 
 <template>
-  <p class="text-sm leading-relaxed text-zinc-700 dark:text-zinc-300">{{ props.text ?? "" }}</p>
+  <p class="text-sm leading-relaxed text-zinc-700 dark:text-zinc-300" v-html="html"></p>
 </template>
diff --git a/examples/vue-chat/package.json b/examples/vue-chat/package.json
index c23e14f65..cde39b473 100644
--- a/examples/vue-chat/package.json
+++ b/examples/vue-chat/package.json
@@ -15,6 +15,8 @@
     "@openuidev/vue-lang": "workspace:*",
     "ai": "^6.0.116",
     "chart.js": "^4.5.1",
+    "dompurify": "^3.4.5",
+    "marked": "^17.0.5",
     "zod": "^4.3.6"
   },
   "devDependencies": {

From 05a2b7c3ffa145568cb8d6b7dc4d85010daec310 Mon Sep 17 00:00:00 2001
From: shogun444 <sayandiproy17@gmail.com>
Date: Tue, 7 Jul 2026 17:17:40 +0530
Subject: [PATCH 2/2] Update pnpm-lock.yaml for marked/dompurify in vue-chat

Adds the lockfile entries for the marked/dompurify dependencies
added to examples/vue-chat/package.json in the previous commit, so
pnpm install --frozen-lockfile (CI) matches the package.json specs.
Both packages were already fully resolved elsewhere in the lockfile
as transitive deps, so this only adds the importer specifiers for
examples/vue-chat.
---
 pnpm-lock.yaml | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0c457f5e4..c4ed19042 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1513,6 +1513,12 @@ importers:
       chart.js:
         specifier: ^4.5.1
         version: 4.5.1
+      dompurify:
+        specifier: ^3.4.5
+        version: 3.4.5
+      marked:
+        specifier: ^17.0.5
+        version: 17.0.5
       zod:
         specifier: ^4.3.6
         version: 4.3.6