🔨 Refactoring QuickReplies, using filter instead of box-shadow

n8n-io · May 3, 2024 · 2d2c899 · 2d2c899
1 parent b2bfe1b
commit 2d2c899
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 21 deletions.
diff --git a/packages/editor-ui/src/components/AIAssistantChat/AIAssistantChat.vue b/packages/editor-ui/src/components/AIAssistantChat/AIAssistantChat.vue
@@ -208,7 +208,7 @@ async function onBeforeClose() {
 .container {
 	height: 100%;
 	background-color: var(--color-background-light);
-	box-shadow: 0px 8px 24px 0px #41424412;
+	filter: drop-shadow(0px 8px 24px #41424412);
 	border-left: 1px solid var(--color-foreground-dark);
 	overflow: hidden;
 }

diff --git a/packages/editor-ui/src/components/AIAssistantChat/QuickReplies.vue b/packages/editor-ui/src/components/AIAssistantChat/QuickReplies.vue
@@ -1,28 +1,13 @@
-<template>
-	<div :class="$style.container">
-		<p :class="$style.hint">Quick reply 👇</p>
-		<div :class="$style.suggestions">
-			<Button
-				v-for="action in suggestions"
-				:key="action.key"
-				:class="$style.replyButton"
-				outline
-				type="secondary"
-				@click="onButtonClick(action)"
-			>
-				{{ action.label }}
-			</Button>
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
+import { useI18n } from '@/composables/useI18n';
 import Button from 'n8n-design-system/components/N8nButton/Button.vue';
 
-interface QuickReply {
+type QuickReply = {
 	label: string;
 	key: string;
-}
+};
+
+const locale = useI18n();
 
 const emit = defineEmits<{
 	(event: 'replySelected', value: QuickReply): void;
@@ -37,6 +22,24 @@ function onButtonClick(action: QuickReply) {
 }
 </script>
 
+<template>
+	<div :class="$style.container">
+		<p :class="$style.hint">{{ locale.baseText('aiAssistantChat.quickReply.title') }}</p>
+		<div :class="$style.suggestions">
+			<Button
+				v-for="action in suggestions"
+				:key="action.key"
+				:class="$style.replyButton"
+				outline
+				type="secondary"
+				@click="onButtonClick(action)"
+			>
+				{{ action.label }}
+			</Button>
+		</div>
+	</div>
+</template>
+
 <style module lang="scss">
 .container {
 	display: flex;

diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -103,6 +103,7 @@
 	"aiAssistantChat.closeChatConfirmation": "Are you sure you want to end this chat session?",
 	"aiAssistantChat.closeChatConfirmation.confirm": "Yes, close it",
 	"aiAssistantChat.closeChatConfirmation.cancel": "No, stay",
+	"aiAssistantChat.quickReply.title": "Quick reply 👇",
 	"auth.changePassword": "Change password",
 	"auth.changePassword.currentPassword": "Current password",
 	"auth.changePassword.error": "Problem changing the password",