feat: Add AI tool building capabilities (#7336)

Github issue / Community forum post (link here to close automatically):
https://community.n8n.io/t/langchain-memory-chat/23733

---------

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
Co-authored-by: Oleg Ivaniv <me@olegivaniv.com>
Co-authored-by: Val <68596159+valya@users.noreply.github.com>
Co-authored-by: Alex Grozav <alex@grozav.com>
Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>
Co-authored-by: Deborah <deborah@starfallprojects.co.uk>
Co-authored-by: Jesper Bylund <mail@jesperbylund.com>
Co-authored-by: Jon <jonathan.bennetts@gmail.com>
Co-authored-by: Michael Kret <88898367+michael-radency@users.noreply.github.com>
Co-authored-by: Giulio Andreini <andreini@netseven.it>
Co-authored-by: Mason Geloso <Mason.geloso@gmail.com>
Co-authored-by: Mason Geloso <hone@Masons-Mac-mini.local>
Co-authored-by: Mutasem Aldmour <mutasem@n8n.io>

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

@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { ChatMessage } from '@/types';
+import type { PropType } from 'vue';
+import { computed, toRefs } from 'vue';
+import VueMarkdown from 'vue-markdown-render';
+import hljs from 'highlight.js/lib/core';
+
+const props = defineProps({
+	message: {
+		type: Object as PropType<ChatMessage>,
+		required: true,
+	},
+});
+
+const { message } = toRefs(props);
+
+const classes = computed(() => {
+	return {
+		'chat-message-from-user': message.value.sender === 'user',
+		'chat-message-from-bot': message.value.sender === 'bot',
+	};
+});
+
+const markdownOptions = {
+	highlight(str: string, lang: string) {
+		if (lang && hljs.getLanguage(lang)) {
+			try {
+				return hljs.highlight(str, { language: lang }).value;
+			} catch {}
+		}
+
+		return ''; // use external default escaping
+	},
+};
+</script>
+<template>
+	<div class="chat-message" :class="classes">
+		<slot>
+			<vue-markdown
+				class="chat-message-markdown"
+				:source="message.text"
+				:options="markdownOptions"
+			/>
+		</slot>
+	</div>
+</template>
+
+<style lang="scss">
+.chat-message {
+	display: block;
+	max-width: 80%;
+	padding: var(--chat--message--padding, var(--chat--spacing));
+	border-radius: var(--chat--message--border-radius, var(--chat--border-radius));
+
+	+ .chat-message {
+		margin-top: var(--chat--message--margin-bottom, calc(var(--chat--spacing) * 0.5));
+	}
+
+	&.chat-message-from-bot {
+		background-color: var(--chat--message--bot--background);
+		color: var(--chat--message--bot--color);
+		border-bottom-left-radius: 0;
+	}
+
+	&.chat-message-from-user {
+		background-color: var(--chat--message--user--background);
+		color: var(--chat--message--user--color);
+		margin-left: auto;
+		border-bottom-right-radius: 0;
+	}
+
+	> .chat-message-markdown {
+		display: block;
+		box-sizing: border-box;
+
+		> *:first-child {
+			margin-top: 0;
+		}
+
+		> *:last-child {
+			margin-bottom: 0;
+		}
+
+		pre {
+			font-family: inherit;
+			font-size: inherit;
+			margin: 0;
+			white-space: pre-wrap;
+			box-sizing: border-box;
+			padding: var(--chat--spacing);
+			background: var(--chat--message--pre--background);
+			border-radius: var(--chat--border-radius);
+		}
+	}
+}
+</style>