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/MessageTyping.vue

@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import type { ChatMessage } from '@/types';
+import { Message } from './index';
+import type { PropType } from 'vue';
+import { computed } from 'vue';
+
+const props = defineProps({
+	animation: {
+		type: String as PropType<'bouncing' | 'scaling'>,
+		default: 'bouncing',
+	},
+});
+
+const message: ChatMessage = {
+	id: 'typing',
+	text: '',
+	sender: 'bot',
+	createdAt: '',
+};
+
+const classes = computed(() => {
+	return {
+		// eslint-disable-next-line @typescript-eslint/naming-convention
+		'chat-message-typing': true,
+		[`chat-message-typing-animation-${props.animation}`]: true,
+	};
+});
+</script>
+<template>
+	<Message :class="classes" :message="message">
+		<div class="chat-message-typing-body">
+			<span class="chat-message-typing-circle"></span>
+			<span class="chat-message-typing-circle"></span>
+			<span class="chat-message-typing-circle"></span>
+		</div>
+	</Message>
+</template>
+<style lang="scss">
+.chat-message-typing {
+	max-width: 80px;
+
+	&.chat-message-typing-animation-scaling .chat-message-typing-circle {
+		animation: chat-message-typing-animation-scaling 800ms ease-in-out infinite;
+		animation-delay: 3600ms;
+	}
+
+	&.chat-message-typing-animation-bouncing .chat-message-typing-circle {
+		animation: chat-message-typing-animation-bouncing 800ms ease-in-out infinite;
+		animation-delay: 3600ms;
+	}
+
+	.chat-message-typing-body {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.chat-message-typing-circle {
+		display: block;
+		height: 10px;
+		width: 10px;
+		border-radius: 50%;
+		background-color: var(--chat--color-typing);
+		margin: 3px;
+
+		&:nth-child(1) {
+			animation-delay: 0ms;
+		}
+
+		&:nth-child(2) {
+			animation-delay: 333ms;
+		}
+
+		&:nth-child(3) {
+			animation-delay: 666ms;
+		}
+	}
+}
+
+@keyframes chat-message-typing-animation-scaling {
+	0% {
+		transform: scale(1);
+	}
+	33% {
+		transform: scale(1);
+	}
+	50% {
+		transform: scale(1.4);
+	}
+	100% {
+		transform: scale(1);
+	}
+}
+
+@keyframes chat-message-typing-animation-bouncing {
+	0% {
+		transform: translateY(0);
+	}
+	33% {
+		transform: translateY(0);
+	}
+	50% {
+		transform: translateY(-10px);
+	}
+	100% {
+		transform: translateY(0);
+	}
+}
+</style>