feat: Add Ask assistant behind feature flag (#9995)

Co-authored-by: Ricardo Espinoza <ricardo@n8n.io>
Co-authored-by: Milorad Filipovic <milorad@n8n.io>

packages/design-system/src/components/BlinkingCursor/BlinkingCursor.stories.ts

@@ -0,0 +1,19 @@
+import BlinkingCursor from './BlinkingCursor.vue';
+import type { StoryFn } from '@storybook/vue3';
+
+export default {
+	title: 'Assistant/BlinkingCursor',
+	component: BlinkingCursor,
+	argTypes: {},
+};
+
+const Template: StoryFn = (args, { argTypes }) => ({
+	setup: () => ({ args }),
+	props: Object.keys(argTypes),
+	components: {
+		BlinkingCursor,
+	},
+	template: '<blinking-cursor v-bind="args" />',
+});
+
+export const Cursor = Template.bind({});

packages/design-system/src/components/BlinkingCursor/BlinkingCursor.vue

@@ -0,0 +1,25 @@
+<template>
+	<span class="blinking-cursor"></span>
+</template>
+
+<style lang="scss">
+.blinking-cursor {
+	display: inline-block;
+	height: var(--font-size-m);
+	width: var(--spacing-3xs);
+	border-radius: var(--border-radius-small);
+	margin-left: var(--spacing-4xs);
+
+	animation: 1s blink step-end infinite;
+}
+
+@keyframes blink {
+	from,
+	to {
+		background-color: transparent;
+	}
+	50% {
+		background-color: var(--color-foreground-xdark);
+	}
+}
+</style>