Background messages

Silently update chat history with background messages

Overview

Background messages let you add information to the chat history without interrupting or notifying the user. This is useful for logging actions, tracking background events, or updating conversation context silently.

For example, you might want to log when a user presses a button or when a background process updates the conversation. These messages help you keep a complete record of the conversation and system events, all without disrupting the user experience.

Add a Button to Trigger the Message

Add a button to your interface with an onClick event handler that will call a function to send the system message:

1 <button id="log-action" onClick="logUserAction()">Log Action</button>

Log the Action as a System Message

When the button is clicked, the logUserAction function will silently insert a system message into the chat history:

1 function logUserAction() {
2   // Function to log the user action
3   vapi.send({
4     type: "add-message",
5     message: {
6       role: "system",
7       content: "The user has pressed the button, say peanuts",
8     },
9   });
10 }

vapi.send: The primary function to interact with your assistant, handling various requests or commands.
type: "add-message": Specifies the command to add a new message.
message: This is the actual message that you want to add to the message history.
- role: “system” Designates the message origin as ‘system’, ensuring the addition is unobtrusive. Other possible values of role are ‘user’ | ‘assistant’ | ‘tool’ | ‘function’
- content: The actual message text to be added.

Practical Use Cases

Silent logging of user activities.
Contextual updates in conversations triggered by background processes.
Non-intrusive user experience enhancements through additional information provision.

1	function logUserAction() {
2	// Function to log the user action
3	vapi.send({
4	type: "add-message",
5	message: {
6	role: "system",
7	content: "The user has pressed the button, say peanuts",
8	},
9	});
10	}