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;