{
})
/**
- * Validate email addresses in the CC and BCC fields
- * @param {string} field - 'cc' or 'bcc'
+ * Validate email addresses in the To, CC, and BCC fields
+ * @param {string} field - 'to', 'cc', or 'bcc'
*/
const validateEmails = (field) => {
- const emails = field === 'cc' ? cc.value : bcc.value
+ const emails = field === 'to' ? to.value : field === 'cc' ? cc.value : bcc.value
const emailList = emails
.split(',')
.map((e) => e.trim())
.filter((e) => e !== '')
- const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
- const invalidEmails = emailList.filter((email) => !emailRegex.test(email))
- // Remove any existing errors for this field
- emailErrors.value = emailErrors.value.filter(
- (error) => !error.startsWith(`${t('replyBox.invalidEmailsIn')} ${field.toUpperCase()}`)
- )
+ const invalidEmails = emailList.filter((email) => !validateEmail(email))
+
+ // Clear existing errors
+ emailErrors.value = []
// Add new error if there are invalid emails
if (invalidEmails.length > 0) {
- emailErrors.value.push(
- `${t('replyBox.invalidEmailsIn')} ${field.toUpperCase()}: ${invalidEmails.join(', ')}`
- )
+ emailErrors.value = [
+ ...emailErrors.value,
+ `${t('replyBox.invalidEmailsIn')} '${field}': ${invalidEmails.join(', ')}`
+ ]
}
}
@@ -272,6 +283,7 @@ const validateEmails = (field) => {
* Send the reply or private note
*/
const handleSend = async () => {
+ validateEmails('to')
validateEmails('cc')
validateEmails('bcc')
if (emailErrors.value.length > 0) {
diff --git a/frontend/src/features/conversation/message/AgentMessageBubble.vue b/frontend/src/features/conversation/message/AgentMessageBubble.vue
index 162f078e..5191fe22 100644
--- a/frontend/src/features/conversation/message/AgentMessageBubble.vue
+++ b/frontend/src/features/conversation/message/AgentMessageBubble.vue
@@ -9,38 +9,46 @@
-
-
+
+
+ class="flex flex-col justify-end message-bubble relative"
+ :class="{
+ '!bg-[#FEF1E1]': message.private,
+ 'bg-white border border-border': !message.private,
+ 'opacity-50 animate-pulse': message.status === 'pending',
+ 'bg-red-50 border-red-200': message.status === 'failed'
+ }"
+ >
+
+
-
-
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -53,7 +61,7 @@
-
+
@@ -79,6 +87,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip
import { Spinner } from '@/components/ui/spinner'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import MessageAttachmentPreview from '@/features/conversation/message/attachment/MessageAttachmentPreview.vue'
+import MessageEnvelope from './MessageEnvelope.vue'
import api from '@/api'
const props = defineProps({
@@ -128,6 +137,16 @@ const avatarFallback = computed(() => {
const retryMessage = (msg) => {
api.retryMessage(convStore.current.uuid, msg.uuid)
}
+
+const showEnvelope = computed(() => {
+ return (
+ props.message.meta?.from?.length ||
+ props.message.meta?.to?.length ||
+ props.message.meta?.cc?.length ||
+ props.message.meta?.bcc?.length ||
+ props.message.meta?.subject
+ )
+})