diff --git a/src/components/message-handlers/TextResponse.vue b/src/components/message-handlers/TextResponse.vue
index b3cf902..e081d30 100644
--- a/src/components/message-handlers/TextResponse.vue
+++ b/src/components/message-handlers/TextResponse.vue
@@ -20,13 +20,13 @@
"
class="vdb-c-flex vdb-c-flex-col"
>
-
+ v-html="getMarkedMsg(processedText)"
+ >
props.content?.text || "");
+const stripHeadingsToBold = (msg) => {
+ if (!msg) return "";
+ const atxConverted = msg.replace(/^#{1,4}\s+(.+?)\s*#*\s*$/gm, "**$1**");
+
+ const setextConverted = atxConverted.replace(
+ /(^|\n)([^\n]+)\n\s*(=+|-+)\s*(?=\n|$)/g,
+ (match, prefix, title, underline) => `${prefix}**${title.trim()}**`,
+ );
+ return setextConverted;
+};
+const processedText = computed(() =>
+ props.isUser ? stripHeadingsToBold(text.value) : text.value,
+);
const { conversations } = useVideoDBChat();
marked.setOptions({
@@ -119,6 +132,20 @@ const message = computed(() => {
);
}
+.markdown-body pre,
+.markdown-body code,
+.markdown-body pre code {
+ max-width: 100%;
+ overflow-x: auto;
+ white-space: pre;
+ word-wrap: normal;
+}
+
+.markdown-body pre {
+ padding: 1rem;
+ border-radius: 0.5rem;
+}
+
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.1s ease;