Chat

Overview

The Avonni Chat component brings real-time messaging to your Lightning Pages. Use it to power internal collaboration, customer communications, or any workflow where threaded conversations add value to Salesforce.

New Features

• @Mentions: Users can now tag specific participants within a message using the @ symbol.

• Participant Control: Administrators can dynamically define who is "mentionable" by passing a list of IDs.

• Flow Integration: You can now leverage @mentions to drive real-time automation. The Chat component allows you to trigger an Execute Flow interaction automatically the moment a user is mentioned in a message. Learn More

---

Quick Start: Build a Case Chat in 2 Minutes

Want to see the component in action immediately? Follow these 7 steps to add a functional Case Comment history to a Case Record Page.

1

Create a New Component

• Open the Avonni Dynamic Components App.

• Click the New button to create a new component.

• Name: Enter a name (e.g., "Case Chat History").

• Target Page Object: Select Case.

  • Critical: The Target Page Object setting tells the component it is operating in the context of a Case record, allowing variables like {!RecordId} to function correctly.

2

Add the Component to the Canvas

• From the Component Library (left sidebar), search for Chat.

• Drag and drop the Chat component onto the main canvas

3

Configure the Data Source to Query

We need to fetch the Case Comment records from Salesforce.

• Select the Chat component on the canvas.

• In the Properties Panel (right), set Data Source to Query.

• Object: Select CaseComment.

• Filter:

  • Click Add Filter.

  • Field: ParentId.

  • Operator: Equal.

  • Value: {!$Component.RecordId}.

  • Why: This ensures we only load comments for the specific Case currently being viewed.

• Order By: CreatedDate ASC (Oldest to Newest).

4

Map the Query Fields

Connect the fields returned by your Query to the Chat component attributes.

• Scroll down to the Data Mappings section.

• Content: Select Body.

  • Note: This maps the actual text of the comment to the message bubble.

• Date: Select CreatedDate.

Check the Preview: The canvas should now display the conversation history for the context record. If the preview is empty, ensure the Preview Context is set to a case from the Debug Panel.

5

Configure the Publisher

Set up the input box for new messages.

• Scroll to the Publisher section.

• Mode: Set to Rich.

• Button Label: Change "Send" to Post Comment.

• Placeholder: Enter Type a reply....

6

Add the "Save" Logic (Interaction)

Make the "Post Comment" button functional.

• Click the Interactions tab in the Properties Panel.

• Click Add Interaction.

  • Trigger: Select On Message Publish.

  • Action: Select Enter Record Data Manually.

  • Object: Select CaseComment.

• Field Mappings:

  • ParentId: {$Component.RecordId} (Links the comment to this Case).

  • CommentBody: Message: Content (Captures your typed text).

7

Save and Activate

• Click Save.

• Use the Deploy button to add this dynamic component to your actual Salesforce Case Lightning Page

---

Configuration

Select the Chat component on the canvas to access the Properties Panel. Configuration involves defining your participants (Resources), populating the message history, and managing how the publisher interacts with your data.

Connecting to Message Data (Data Source)

You can populate the chat history using either the Manual or Query method.

Option A: Manual Data Source

The Manual data source is ideal for prototyping a conversation or displaying a fixed set of messages. Setting this up is a two-step process: you must define the people in the conversation before you can create the messages they sent.

Step 1: Define Your Resources

Resources represent the individuals or entities involved in the chat.

• Name: The display name of the person (e.g., "Customer Support" or "John Doe").

• Avatar Source: A URL for the user's profile image.

• Avatar Fallback Icon: An icon (e.g., standard:user) to show if no image is available.

• Avatar Initials: Text (e.g., "JD") used as a placeholder.

Step 2: Create the Messages

Once your Resources are saved, you can begin building the message history.

Technical Requirement

You must create at least one Resource first. The system uses these resources to populate the Participant Name picklist

• Participant Name: Select the sender from the picklist (this list is automatically generated from your defined Resources).

• Type: Define the direction of the bubble.

  • Inbound: Messages received from others.

  • Outbound: Messages sent by the current user.

• Date: The timestamp indicating when the message was sent.

• Body: The actual text or content of the message

Option B: Query Data Source

Use this to dynamically fetch records from Salesforce (e.g., pulling all comments related to a Case).

1. Select Data Source: Choose Query.

2. Define Query: Select the Object (e.g., CaseComment) and set filters (e.g., ParentId equals recordId) to fetch the correct records.

3. Data Mappings: Map the fields from your query to the chat display.

   • Content: Select the field containing the message body (e.g., CommentBody).

   • Date: Select the field containing the timestamp (e.g., CreatedDate).

---

General Settings

These settings control the overall behavior of the chat component, including how messages are attributed and displayed.

Setting	Description	Example
Current Resource ID	ID of the message author; determines sent vs. received positioning. Defaults to current user if empty.	{!$User.Id}
Read Only	Hides publisher; users can view but not send	falase
Disabled	Grays out component; prevents all interaction	false
Message Date Format	How timestamps display on messages	"MMM d, yyyy h:mm a" → "Jan 15, 2025 2:30 PM"

---

Publisher Settings

Customize the input area where users type new messages.

Setting	Description	Example
Mode	ID of the message author; determines sent vs. received positioning. Defaults to current user if empty.	{!$User.Id}
Allow Mentions	(New) Toggle to enable the @ mention functionality. When active, users can trigger a participant list by typing @.	When a user types @, a searchable dropdown menu of participants appears.
Placeholder	Hides publisher; users can view but not send	false
Publish Button Label	Grays out component; prevents all interaction	false
Maximum Length	How timestamps display on messages	"MMM d, yyyy h:mm a" → "Jan 15, 2025 2:30 PM"
Minimum Length	Required characters before sending	10
Show Character Count	Display character counter	True
Toolbar Position	Where formatting tools appear	Top

Customizing the Rich Text Toolbar

When the publisher Mode is set to Rich, you can choose exactly which formatting tools are available to your users. These are organized into Categories to keep the interface clean

Category	Tools Included	Best For
Font	Font Family, Font Size	Standardizing brand typography.
Text	B, I, <u>U</u>, ~~S~~	Basic emphasis and strike-throughs.
Body	Lists (Bulleted/Numbered), Alignment, Indents	Organizing long-form updates or technical notes.
Header	H1, H2, H3	Creating structured, easy-to-read sections.
Color	Text Color Picker	Highlighting specific words with custom colors.
Highlight	Background Color Picker	Highlighting specific words with custom colors.
Clean Up	Remove Formatting	Quickly stripping copied text of messy external styling.

Blocked Words

Define words that cannot be included in published messages. When users attempt to send messages containing blocked words, the publish action is prevented.

---

Real-Time Updates (Platform Events)

By default, the Chat component only refreshes when you post a message or manually reload the page. To create a true "instant messaging" experience—where replies from colleagues or customers appear the moment they are sent—you can enable Platform Events.

How to Enable Live Updates

This configuration allows the component to "listen" for database changes and refresh its query automatically.

1. Set Data Source: Ensure your Data Source is set to Query.

2. Locate EMP Settings: Expand Advanced Options and find the Query Refresh EMP section.

3. Channel Name: Enter the API name of your Platform Event (e.g., Chat_Notification__e).

4. Key Field Name: Enter the API name of the field within that event that stores the Record ID (e.g., RecordId__c).

Note

Enabling this feature requires a pre-configured Platform Event and a Trigger Flow in Salesforce to publish the notification whenever a new message record is created.

Tutorial: How to Set Up Platform Events

---

Interaction Configuration

Interactions are the "logic bridges" that make the Chat component functional. While the most common interaction is saving a message, you can also trigger automation based on mentions.

1. On Message Publish (Standard)

This is the primary interaction used to save data to Salesforce.

• Trigger: "Publish a new message"

• Action: Select Enter Record Data Manually.

• Mapping: Link your Case ID and the Message Content to your Salesforce fields based on the object you setup inititally on the chat component

2. User Mentioned (Automation)

This trigger fires specifically when a participant is tagged in the publisher.

• The Action: Select Execute Flow.

• The Logic: Map this trigger to a Salesforce Autolaunched Flow that handles notifications.

• The Result: You can instantly send a Slack alert, create a Task for the mentioned user, or send a push notification to their mobile device.

Pro-Tip: Context-Aware Notifications

To make your alerts truly actionable, configure your Execute Flow interaction to pass the Last publication mentions attribute. This attribute contains a string of the User IDs tagged in the message. For complete context, you can also pass the Last publication value, which carries the actual text content of the post.

By sending both values to your Flow, you can create highly detailed notifications that don't just say "you were mentioned," but show exactly what was said:

• Who: The Flow identifies the tagged users from the Last publication mentions string.

• What: The Flow includes the message snippet from the Last publication value.

• Where: By also passing the RecordId, the notification can provide a direct link to the specific record.

This ensures the recipient gets the full picture immediately—whether they are checking Slack, email, or mobile notifications—without needing to hunt for the message in Salesforce

---

Example

Project Discussion Log

Goal: Create a chat interface on a custom "Project" object. This allows the project team to discuss updates and have those messages saved to a custom "Project Update" object.

1

Create the Component

• Open the Avonni Dynamic Components App.

• Click New.

• Name: Enter "Project Team Chat".

• Target Page Name: Select your custom object (e.g., Project or Project__c).

  • Why: This is critical. It tells the component it is operating in the context of a Project record, enabling the use of the {!RecordId} variable.

2

Add Component to Canvas

• From the Component Library (left sidebar), search for Chat.

• Drag and drop the Chat component onto the canvas.

3

Connect to the Data Source

We need to query the custom object where messages will be stored.

• Data Source: Query.

• Object: Project_Update__c (Custom Object).

• Filter: Project__c equals {!RecordId}.

  • Why: Filters the list only to show updates related to the current Project record.

• Order By: CreatedDate ASC.

4

Map Data

Unlike standard objects, custom objects require explicit mapping to ensure the user's name and picture appear correctly.

• Content: Message_Body__c (Rich Text Area field)

• Date: CreatedDate

• Author Name: CreatedBy.Name

• Author Avatar: CreatedBy.SmallPhotoUrl

  • Why: This dynamically pulls the user who posted the update's Salesforce profile picture

5

Configure the Publisher

Set up the input to allow for rich formatting, helpful for project status reports.

• Mode: Rich

• Placeholder: "Share a project update..."

• Button Label: "Post Update"

• Blocked Words: (Optional) Add sensitive internal project codenames if necessary.

6

Add the "Save" Logic (Interaction)

Configure the component to create a new Project_Update__c record when the button is clicked.

• Interaction Trigger: Publish a new message

• Action: Create Record

• Select: Create Enter Record Data Manually.

• Target Object: Project_Update__c

• Field Mappings:

  1. Project__c: Map to {$Component.RecordId}

     • Context: Links the update to the specific Project.

  2. Message_Body__c: Map to Message: Content

     • Context: Saves the typed content.

  3. Created Date: Message: Date

7

Real-Time Updates (Optional)

To make messages appear instantly for all team members:

1. Channel Name: Chat_Notification__e (Assuming you created a Platform Event).

2. Key Field Name: RecordId__c.

---

Key Considerations

• Data Model Planning: For Query mode, ensure your Salesforce objects have the necessary fields to store message content, timestamps, and author information, along with lookup relationships to parent records.

• Resource Identification: The Current Resource ID determines message positioning. For customer-facing implementations, consider how you'll identify external participants versus internal users.

• Character Limits: Set appropriate maximum lengths based on your target object's field limits to prevent data truncation.

• Blocked Words: Review and update your blocked words list regularly to maintain communication standards without being overly restrictive.

• Performance: For conversations with extensive history, use query filters to limit the number of messages loaded initially, or consider pagination strategies for very active threads.

---

In Summary

The Avonni Chat component transforms your Lightning Pages into collaborative communication hubs. Whether you're building internal team tools or customer-facing interfaces, the combination of flexible data sources, rich publishing options, and actionable interactions lets you create sophisticated messaging experiences that integrate directly with your Salesforce data model—all without writing code