feat: add ai hint for smart replies

Signed-off-by: greta <gretadoci@gmail.com>

Author: GretaD

src/components/Message.vue

@@ -51,6 +51,21 @@
 		<div id="reply-composer" />
 		<div class="reply-buttons">
 			<div v-if="smartReplies.length > 0" class="reply-buttons__suggested">
+				<NcPopover trigger="hover focus">
+					<template #trigger>
+						<NcButton
+							variant="tertiary-no-background"
+							:aria-label="t('mail', 'AI info')"
+							class="button">
+							<template #icon>
+								<IconInfo :size="20" />
+							</template>
+						</NcButton>
+					</template>
+					<p class="smart-replies-info">
+						{{ AiInfo }}
+					</p>
+				</NcPopover>
 				<NcAssistantButton
 					v-for="(reply, index) in smartReplies"
 					:key="index"
@@ -75,8 +90,9 @@
 
 <script>
 import { generateUrl } from '@nextcloud/router'
-import { NcAssistantButton, NcButton } from '@nextcloud/vue'
+import { NcAssistantButton, NcButton, NcPopover } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import IconInfo from 'vue-material-design-icons/InformationOutline.vue'
 import LockOffIcon from 'vue-material-design-icons/LockOffOutline.vue'
 import ReplyIcon from 'vue-material-design-icons/ReplyOutline.vue'
 import Imip from './Imip.vue'
@@ -93,6 +109,7 @@ import { html, plain } from '../util/text.js'
 export default {
 	name: 'Message',
 	components: {
+		IconInfo,
 		Itinerary,
 		MessageAttachments,
 		MessageEncryptedBody,
@@ -103,6 +120,7 @@ export default {
 		LockOffIcon,
 		ReplyIcon,
 		NcButton,
+		NcPopover,
 		NcAssistantButton,
 	},
 
@@ -135,6 +153,12 @@ export default {
 		},
 	},
 
+	data() {
+		return {
+			AiInfo: t('mail', 'Suggested replies are using AI'),
+		}
+	},
+
 	computed: {
 		...mapStores(useMainStore),
 		from() {
@@ -257,4 +281,7 @@ export default {
 		}
 	}
 }
+.smart-replies-info {
+	padding: 16px;
+}
 </style>