refactor(editor): Move editor-ui and design-system to frontend dir (no-changelog) (#13564)

packages/frontend/@n8n/design-system/src/components/AskAssistantButton/AskAssistantButton.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { useI18n } from '../../composables/useI18n';
+import AssistantIcon from '../AskAssistantIcon/AssistantIcon.vue';
+import AssistantText from '../AskAssistantText/AssistantText.vue';
+import BetaTag from '../BetaTag/BetaTag.vue';
+
+const { t } = useI18n();
+
+const hovering = ref(false);
+
+const props = defineProps<{ unreadCount?: number }>();
+
+const emit = defineEmits<{
+	click: [e: MouseEvent];
+}>();
+
+const onClick = (e: MouseEvent) => emit('click', e);
+
+function onMouseEnter() {
+	hovering.value = true;
+}
+
+function onMouseLeave() {
+	hovering.value = false;
+}
+</script>
+
+<template>
+	<button
+		:class="$style.button"
+		@mouseenter="onMouseEnter"
+		@mouseleave="onMouseLeave"
+		@click="onClick"
+	>
+		<div v-if="props.unreadCount" :class="$style.num">
+			{{ props.unreadCount }}
+		</div>
+		<AssistantIcon v-else size="large" :theme="hovering ? 'blank' : 'default'" />
+		<div v-show="hovering" :class="$style.text">
+			<div>
+				<AssistantText :text="t('askAssistantButton.askAssistant')" />
+			</div>
+			<div>
+				<BetaTag />
+			</div>
+		</div>
+	</button>
+</template>
+
+<style lang="scss" module>
+.button {
+	border: var(--border-base);
+	background: var(--color-foreground-xlight);
+	border-radius: var(--border-radius-base);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 42px;
+	width: 42px;
+	position: relative;
+
+	&:hover {
+		border: 0;
+		cursor: pointer;
+		background: var(--color-assistant-highlight-reverse);
+
+		> div {
+			background: transparent;
+		}
+	}
+}
+
+.num {
+	color: var(--prim-color-white);
+	background: var(--color-assistant-highlight-reverse);
+	border-radius: 50%;
+	width: var(--spacing-s);
+	height: var(--spacing-s);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: var(--font-size-3xs);
+}
+
+.text {
+	position: absolute;
+	top: -1px;
+	display: flex;
+	flex-direction: column;
+	align-items: end;
+	width: 100px;
+	right: 48px;
+}
+</style>