fix(editor): Open links from embedded chat in new tab (#9121)

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>

packages/@n8n/chat/package.json

@@ -40,13 +40,15 @@
   },
   "dependencies": {
     "highlight.js": "^11.8.0",
+    "markdown-it-link-attributes": "^4.0.1",
     "uuid": "^8.3.2",
     "vue": "^3.3.4",
-    "vue-markdown-render": "^2.0.1"
+    "vue-markdown-render": "^2.1.1"
   },
   "devDependencies": {
-    "@n8n/storybook": "workspace:*",
     "@iconify-json/mdi": "^1.1.54",
+    "@n8n/storybook": "workspace:*",
+    "@types/markdown-it": "^12.2.3",
     "shelljs": "^0.8.5",
     "unbuild": "^2.0.0",
     "unplugin-icons": "^0.17.0",

packages/@n8n/chat/src/components/Message.vue

@@ -4,6 +4,8 @@ import type { PropType } from 'vue';
 import { computed, toRefs } from 'vue';
 import VueMarkdown from 'vue-markdown-render';
 import hljs from 'highlight.js/lib/core';
+import markdownLink from 'markdown-it-link-attributes';
+import type MarkdownIt from 'markdown-it';
 import type { ChatMessage } from '@n8n/chat/types';
 
 const props = defineProps({
@@ -26,6 +28,15 @@ const classes = computed(() => {
 	};
 });
 
+const linksNewTabPlugin = (vueMarkdownItInstance: MarkdownIt) => {
+	vueMarkdownItInstance.use(markdownLink, {
+		attrs: {
+			target: '_blank',
+			rel: 'noopener',
+		},
+	});
+};
+
 const markdownOptions = {
 	highlight(str: string, lang: string) {
 		if (lang && hljs.getLanguage(lang)) {
@@ -41,7 +52,12 @@ const markdownOptions = {
 <template>
 	<div class="chat-message" :class="classes">
 		<slot>
-			<VueMarkdown class="chat-message-markdown" :source="messageText" :options="markdownOptions" />
+			<VueMarkdown
+				class="chat-message-markdown"
+				:source="messageText"
+				:options="markdownOptions"
+				:plugins="[linksNewTabPlugin]"
+			/>
 		</slot>
 	</div>
 </template>