markdown view

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gui-chat-plugin/text-response",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Text Response plugin for GUI Chat - Markdown rendering with role-based styling",
   "type": "module",
   "main": "./dist/index.cjs",

src/vue/Preview.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="text-sm leading-snug" :class="textColorClass">
-    <p class="line-clamp-5 whitespace-pre-wrap">{{ previewText }}</p>
+    <div class="preview-markdown" v-html="renderedMarkdown" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
+import { marked } from "marked";
 import type { ToolResultComplete } from "gui-chat-protocol/vue";
 import type { TextResponseData } from "../core/types";
 
@@ -26,4 +27,67 @@ const textColorClass = computed(() => {
       return "text-gray-700";
   }
 });
+
+const renderedMarkdown = computed(() =>
+  marked(previewText.value, { breaks: true, gfm: true }),
+);
 </script>
+
+<style scoped>
+.preview-markdown {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+}
+
+.preview-markdown :deep(p) {
+  margin: 0;
+  display: inline;
+}
+
+.preview-markdown :deep(h1),
+.preview-markdown :deep(h2),
+.preview-markdown :deep(h3),
+.preview-markdown :deep(h4),
+.preview-markdown :deep(h5),
+.preview-markdown :deep(h6) {
+  font-size: inherit;
+  font-weight: bold;
+  display: inline;
+}
+
+.preview-markdown :deep(ul),
+.preview-markdown :deep(ol) {
+  display: inline;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.preview-markdown :deep(li) {
+  display: inline;
+}
+
+.preview-markdown :deep(li)::before {
+  content: "• ";
+}
+
+.preview-markdown :deep(strong) {
+  font-weight: bold;
+}
+
+.preview-markdown :deep(em) {
+  font-style: italic;
+}
+
+.preview-markdown :deep(code) {
+  font-family: monospace;
+  font-size: 0.9em;
+}
+
+.preview-markdown :deep(pre) {
+  display: inline;
+  white-space: pre-wrap;
+}
+</style>