Chat widget

Overview

The Chat widget is a complex input widget that allows you to send and receive messages.

It was made to be used in a chat application, but can be used in any application that requires a chat interface.

It allows users the ability to send, edit and delete messages and to send and delete images, locations, and attachments.

You can view the demo of the widget at the preprod instance

Attributes

messageLimit: Number - The number of messages to display initially and load per "Load More" action. Default: 10

displayAddCamera: Boolean - Show/hide the camera button for image capture. Default: true

displayAddLocation: Boolean - Show/hide the location button for sharing locations. Default: true

displayAddAttachment: Boolean - Show/hide the attachment button for file uploads. Default: true

displayAddMessage: Boolean - Show/hide the message input field and send button. Default: true

displayCloseComment: Boolean - Show/hide the close comment button. Default: true

language: Object - Localization strings for all UI text.

The language object supports the following keys (all optional, defaults provided):

linkEdit: String - Text for edit link (default: "Edit")
loadMore: String - Text for load more button (default: "Load More")
placeholderMessage: String - Placeholder text for message input (default: "Type a message...")
tooltipCamera: String - Tooltip for camera button (default: "Click here to access camera")
locationTitle: String - Title for location modal (default: "Location")
tooltipLocation: String - Tooltip for location button (default: "Click here to add a location")
btnSend: String - Text for send button (default: "Send")
statusEdited: String - Status text for edited messages (default: "Edited")
chatTitle: String - Title of the chat widget (default: "Chat")
linkDelete: String - Text for delete link (default: "Delete")
btnCancel: String - Text for cancel button (default: "Cancel")
btnSave: String - Text for save button (default: "Save")
tooltipAttachment: String - Tooltip for attachment button (default: "Click here to add an attachment")
confirmDeleteMessageTitle: String - Title for delete confirmation dialog (default: "Confirm Delete Message Title")
confirmDeleteMessage: String - Body text for delete confirmation dialog (default: "Confirm Delete Message")
statusDeleted: String - Status text for deleted messages (default: "Message Deleted")
unknownUser: String - Text shown when user name is not available (default: "Unknown User")
translate: String - Label for translation bar (default: "Translate")
baseLanguage: String - Base language code (default: "en")
languages: Object - Object mapping language codes to display names (e.g., { "af": "Afrikaans", "es": "Español" })
mentions: String - Tooltip text for mentions dropdown (default: "Mentions")

chatList:

avatarIcon: String (optional) - Icon name for the avatar (without 'mdi-' prefix). If not provided, initials are generated from createdBy.

createdAt: String - ISO date string or formatted date string (e.g., "2025-01-01 10:00")

createdBy: String - Name of the message creator

displayDelete: Boolean - Whether the delete option should be available for this message

id: String - Unique identifier for the message

displayEdit: Boolean - Whether the edit option should be available for this message

message: String - The message text content

direction: String - Message direction: "in" (incoming) or "out" (outgoing)

status: String (optional) - Message status: "edited" or "deleted"

translations: Object (optional) - Translation object with language codes as keys and translated text as values (e.g., { "af": "Hierdie is 'n boodskap", "es": "Este es un mensaje" })

mentionList: Array (optional) - Array of mentions in the message. Each mention should have:

name: String - Display name

value: String - Unique identifier

icon: String (optional) - Icon name

type: String (optional) - Type of mention

attachment: Object (optional) - Attachment object

Image/Video Attachment

{
  "mimeType": "image/jpeg" | "image/png" | "video/mp4" | etc.,
  "name": "filename.jpg",
  "blobData": "base64EncodedString",
  "width": 200 (optional),
  "height": 200 (optional)
}

Location Attachment

{
  "type": "location",
  "latitude": -27.489372304628393,
  "longitude": 28.39886250000001
}

File Attachment

{
  "mimeType": "text/plain" | "application/pdf" | etc.,
  "name": "document.txt",
  "blobData": "base64EncodedString"
}

mentionItems: Array - List of mentionable items for the mention dropdown. Each item should have:

value: String - Unique identifier for the mention

name: String - Display name

icon: String (optional) - Icon name (without 'mdi-' prefix)

type: String (optional) - Type of mention (e.g., "web_user")

Actions

addMessage: Add a new text message to the chat. Can include mentions.

{
  "action": "addMessage",
  "message": "Message text",
  "mentions": [
		{
			"value": "john",
			"name": "John Doe",
			"icon": "mdi-account",
			"type": "web_user"
		}
	]
}

editMessage: Edit an existing message in the chat.

{
    "action": "editMessage"
	"message": {
		"createdAt": "2025-01-01 10:02",
		"createdBy": "Louise Du Plessis",
		"translations": {
			"af": "Hierdie is 'n boodskap"
		},
		"displayDelete": true,
		"id": "2",
		"displayEdit": true,
		"message": "This is a message",
		"direction": "out"
	}
}

deleteMessage: Delete a message in the chat. Requires confirmation.

{
	"action": "deleteMessage",
	"comment": {
		"createdAt": "2025-01-01 10:10",
		"attachment": {
			"name": "",
			"mimeType": "",
			"blobData": ""
        },
		"createdBy": "Louise Du Plessis",
		"displayDelete": true,
		"id": "4",
		"displayEdit": false,
		"message": "This is a message about a video",
		"direction": "out"
	}
}

addAttachment: Add an attachment to the chat. Supports both file/image attachments and location attachments.

{
    "action": "addAttachment",
    "attachment": {
		"mimeType": "image/png",
		"name": "",
		"blobData": ""
    }
}

{
    "action": "addAttachment",
	"attachment": {
		"type": "location",
		"latitude": -27.489372304628393,
		"longitude": 28.39886250000001
	}
}

DSL code

// .xvml
  <raw type="ChatWidget" ...... >
    <content variable="rawChatWidgetContent" />
  </raw>

The JSON code for the rawContent

{
	"messageLimit": 20,
	"displayAddCamera": true,
	"displayAddLocation": true,
	"displayAddMessage": true,
	"displayCloseComment": true,
	"language": {
		"linkEdit": "Edit",
		"loadMore": "Load More",
		"placeholderMessage": "Type a message...",
		"tooltipCamera": "Click here to access camera",
		"locationTitle": "Location",
		"tooltipLocation": "Click here to add a location",
		"btnSend": "Send",
		"statusEdited": "edited",
		"chatTitle": "Chat",
		"linkDelete": "Delete",
		"btnCancel": "Cancel",
		"btnSave": "Save",
		"tooltipAttachment": "Click here to add an attachment",
		"confirmDeleteMessageTitle": "Confirm Delete Message Title",
		"confirmDeleteMessage": "Confirm Delete Message",
		"statusDeleted": "Message Deleted",
		"unknownUser": "Unknown User"
	},
	"displayAddAttachment": true,
	"chatList": [
		{
			"createdAt": "2025-01-01 10:05",
			"attachment": {
				"name": "image.jpg",
				"mimeType": "image/jpeg",
				"blobData": "iVBORw0K...",
},
			"createdBy": "Louise Du Plessis",
			"displayDelete": true,
			"id": "4",
			"displayEdit": false,
			"message": "This is a message about an image",
			"direction": "out"
		},
		{
			"avatarIcon": "account",
			"createdAt": "2025-01-01 10:00",
			"createdBy": "John Doe",
			"displayDelete": true,
			"id": "1",
			"displayEdit": true,
			"message": "This is a message",
			"direction": "in",
			"status": "edited"
		},
		{
			"createdAt": "2025-01-01 10:02",
			"createdBy": "Louise Du Plessis",
			"displayDelete": true,
			"id": "2",
			"displayEdit": true,
			"message": "This is a message",
			"direction": "out"
		},
		{
			"createdAt": "2025-01-01 10:04",
			"createdBy": "Louise Du Plessis",
			"displayDelete": true,
			"id": "3",
			"displayEdit": true,
			"message": "This is a message",
			"direction": "out",
			"status": "deleted"
		},
		{
			"createdAt": "2025-01-01 10:06",
			"attachment": {
				"type": "location",
				"latitude": -33.9249,
				"longitude": 18.4241
			},
			"createdBy": "Louise Du Plessis",
			"displayDelete": true,
			"id": "5",
			"displayEdit": false,
			"message": "This is a message about a location",
			"direction": "out"
		},
		{
			"createdAt": "2025-01-01 10:07",
			"attachment": {
				"name": "hello.txt",
				"mimeType": "text/plain",
				"blobData": "SGVsbG8gV29ybGQ="
			},
			"createdBy": "Louise Du Plessis",
			"displayDelete": true,
			"id": "6",
			"displayEdit": false,
			"message": "This is a message about an attachment",
			"direction": "out"
		}
	]
}