implements own markdown-component; replace links with custom component

Author: rainu

frontend/src/components/ChatMessage.vue

@@ -2,7 +2,7 @@
 	<template v-if="isUserMessage">
 		<v-row class="justify-end pa-2 mb-0 mt-1 mx-1 ml-15">
 			<v-sheet color="green-accent-2" class="pa-2" rounded>
-				<vue-markdown :source="textMessage" :options="options" />
+				<Markdown :content="textMessage" />
 
 				<!-- at the moment, only user messages can have attachments -->
 				<template v-for="attachmentMeta of attachmentsMeta" :key="attachmentMeta.Path">
@@ -73,7 +73,7 @@
 		<v-row class="pa-2 mb-0 mt-1 mx-1" v-if="textMessage">
 			<v-col>
 				<v-sheet class="pa-2" rounded>
-					<vue-markdown :source="textMessage" :options="options" />
+					<Markdown :content="textMessage" />
 					<ChatMessageActions @toggleVisibility="onToggleVisibility" :hide-edit="hideEdit" @onEdit="onEdit" />
 				</v-sheet>
 			</v-col>
@@ -82,7 +82,7 @@
 	<template v-else>
 		<v-row class="pa-2 mb-0 mt-1 mx-1 mr-15">
 			<v-sheet color="grey-lighten-2" class="pa-2" rounded>
-				<vue-markdown :source="textMessage" :options="options" />
+				<Markdown :content="textMessage" />
 				<small class="d-flex justify-space-between align-center">
 					<ChatMessageActions @toggleVisibility="onToggleVisibility" :hide-edit="hideEdit" @on-edit="onEdit" />
 					<template v-if="consumption">
@@ -102,18 +102,13 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
-import VueMarkdown from 'vue-markdown-render'
 
 import { GetAssetMeta } from '../../wailsjs/go/controller/Controller'
 import { controller } from '../../wailsjs/go/models.ts'
 import { PathSeparator } from '../common/platform.ts'
 import AssetMeta = controller.AssetMeta
 import LLMMessageContentPart = controller.LLMMessageContentPart
 import LLMMessageCall = controller.LLMMessageCall
-import hljs from 'highlight.js'
-import { type Options as MarkdownItOptions } from 'markdown-it'
-import { UseCodeStyle } from './code-style.ts'
-import { ClipboardSetText } from '../../wailsjs/runtime'
 import GeneralToolCall from './toolcall/GeneralToolCall.vue'
 import BuiltinToolCallFileCreation from './toolcall/BuiltinToolCallFileCreation.vue'
 import BuiltinToolCallCommandExecution from './toolcall/BuiltinToolCallCommandExecution.vue'
@@ -136,6 +131,7 @@ import { useConfigStore } from '../store/config.ts'
 import McpToolCall from './toolcall/McpToolCall.vue'
 import { HistoryEntryConsumption } from '../store/history.ts'
 import Consumption from './Consumption.vue'
+import Markdown from './Markdown.vue'
 
 export enum Role {
 	System = 'system',
@@ -153,6 +149,7 @@ export enum ContentType {
 export default defineComponent({
 	name: 'ChatMessage',
 	components: {
+		Markdown,
 		Consumption,
 		McpToolCall,
 		ChatMessageActions,
@@ -172,7 +169,6 @@ export default defineComponent({
 		GeneralToolCall,
 		BuiltinToolCallCommandExecution,
 		BuiltinToolCallFileCreation,
-		VueMarkdown,
 	},
 	emits: ['toggleVisibility', 'onEdit'],
 	props: {
@@ -200,17 +196,6 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			options: {
-				highlight: (code: string, language: string) => {
-					if (language && hljs.getLanguage(language)) {
-						try {
-							const result = hljs.highlight(code, { language })
-							return result.value
-						} catch (__) {}
-					}
-					return '' // use external default escaping
-				},
-			} as MarkdownItOptions,
 			attachmentsMeta: [] as AssetMeta[],
 			showConsumption: false,
 		}
@@ -249,39 +234,6 @@ export default defineComponent({
 		},
 	},
 	methods: {
-		enrichCopyButtons() {
-			const codeBlocks = document.querySelectorAll('pre:not(.code-container pre)').values()
-			for (const pre of codeBlocks) {
-				const div = document.createElement('div')
-				div.className = 'code-container'
-
-				const button = document.createElement('button')
-				button.className = 'copy-button mdi-clipboard-text-outline mdi v-icon notranslate v-icon--size-small'
-				button.addEventListener('click', this.onCopyButtonClicked)
-
-				div.appendChild(button)
-				div.appendChild(pre.cloneNode(true))
-				pre.replaceWith(div)
-			}
-		},
-		onCopyButtonClicked(event: MouseEvent) {
-			const preElement = (event.target as HTMLButtonElement)?.nextElementSibling as HTMLElement
-			if (preElement && preElement.tagName === 'PRE') {
-				let code = preElement.innerText
-				const newlineCount = (code.match(/\n/g) || []).length
-				if (newlineCount === 1) {
-					//prevent that shell-code-statements will be executed directly
-					code = code.trim()
-				}
-
-				ClipboardSetText(code).then(() => {
-					preElement.classList.add('copied')
-					setTimeout(() => {
-						preElement.classList.remove('copied')
-					}, 1000)
-				})
-			}
-		},
 		fileName(asset: AssetMeta) {
 			return asset.Path.split(PathSeparator).pop() || ''
 		},
@@ -296,9 +248,6 @@ export default defineComponent({
 		},
 	},
 	watch: {
-		textMessage() {
-			this.$nextTick(() => this.enrichCopyButtons())
-		},
 		attachments: {
 			async handler() {
 				const promises = this.attachments.map((path) => GetAssetMeta(path))
@@ -311,99 +260,8 @@ export default defineComponent({
 			immediate: true,
 		},
 	},
-	mounted() {
-		UseCodeStyle(this.profile.UI.CodeStyle)
-
-		this.$nextTick(() => this.enrichCopyButtons())
-	},
 })
 </script>
 
-<style>
-pre code {
-	background-color: #f5f5f5;
-	border: 1px solid #ccc;
-	margin: 0.5em 0;
-	padding: 0.5em 2em 0.5em 1em;
-	border-radius: 5px;
-	display: block;
-	overflow-x: auto;
-	position: relative;
-}
-
-/* blue block when hover over code-blocks */
-pre code::before {
-	content: '';
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 0;
-	height: 100%;
-	background-color: #007bff;
-	transition: width 0.3s;
-}
-
-pre code:hover::before {
-	width: 5px;
-}
-
-/* Add styles for the copy button */
-
-div.code-container {
-	position: relative;
-}
-
-.copy-button {
-	position: absolute;
-	right: 1px;
-	padding-top: 1em;
-	padding-right: 0.5em;
-	z-index: 1;
-	float: right;
-}
-
-pre.copied code {
-	border: 2px solid #4db6ac;
-	border-radius: 5px;
-	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add elevation effect */
-}
-
-/* Inline code blocks inside text (not in headers) */
-code:not(pre code):not(h1 code):not(h2 code):not(h3 code):not(h4 code):not(h5 code):not(h6 code) {
-	background-color: #f5f5f5;
-	border: 1px solid #ccc;
-	padding: 2px 4px;
-	border-radius: 3px;
-}
-
-/* Quote-Blocks */
-
-blockquote {
-	border-left: 5px solid #ccc;
-	margin: 0.5em 0;
-	padding: 0.5em 1em;
-	color: #555;
-	background: none;
-	border-radius: 0;
-}
-
-blockquote:hover {
-	border-color: #007bff;
-}
-
-/* Header Padding increase */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-	padding-top: 1em;
-}
-
-/* make list items visible */
-ol,
-ul li {
-	margin-left: 2em;
-}
+<style scoped>
 </style>