From 2d2c899c5441299337877e87e1ff5dd325ad1a51 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Fri, 3 May 2024 13:42:28 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20Refactoring=20QuickReplies,=20us?=
 =?UTF-8?q?ing=20`filter`=20instead=20of=20`box-shadow`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AIAssistantChat/AIAssistantChat.vue       |  2 +-
 .../AIAssistantChat/QuickReplies.vue          | 43 ++++++++++---------
 .../src/plugins/i18n/locales/en.json          |  1 +
 3 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/packages/editor-ui/src/components/AIAssistantChat/AIAssistantChat.vue b/packages/editor-ui/src/components/AIAssistantChat/AIAssistantChat.vue
index 795cce9c5e538..e4b99b429211a 100644
--- 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
index f7b7ba0ad3c6e..1a43f625d7bfc 100644
--- 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
index 74a308fcdba1e..14c984cf44c0a 100644
--- 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",