Implementing Agents

can be client side or server side

can be defined through handler property in agents structure or handled through add-message event

Single Agent Chat

Load Chat History

To load the initial chat history, use the fetch function to retrieve messages from your backend. Here is an example:

let messages = [];
// Load initial data
fetch("/messages")
    .then(response => response.json())
    .then(data => messages = data);

const chat = new ChatBot(node, { messages });

Data Format for Agents

Agents in the chat are defined using the following structure:

type ResponseHandler = (data: Message[]) => Message | Promise<Message>;

type Agent = {
    id: TID;
    name: string;
    avatar?: string;
    response?: ResponseHandler;
}

• id: A unique identifier for the agent.
• name: The name of the agent.
• avatar (optional): The URL or path to the agent's avatar image.
• response (optional): A ResponseHandler function that gets triggered when the agent sees a new message in the chat. The handler can return either a response message or a promise that resolves to a response message.

A ResponseHandler function is defined as follows:

type ResponseHandler = (data: Message[]) => Message | Promise<Message>;

It takes an array of messages as input and returns a message or a promise that resolves to a message. The only mandatory field in the response message is msg.content, which represents the text of the response.

Data Format for Messages

Messages in the chat adhere to the following format:

type Message = {
    id: TID;
    role: "agent" | "user";
    content: string;
    typing?: number;
}

• id: A unique identifier for the message.
• role: Specifies the role of the message sender, either "agent" or "user".
• content: The text content of the message.
• typing (optional): An integer representing typing animation states:
  • 0: No typing animation (default)
  • 1: Typing animation in streaming mode
  • -1: Typing animation finishing

Reacting to User's Messages

To respond to user messages with server-side logic, define an agent with a response handler that fetches a response from your backend:

let messages = [];
// Load initial data
fetch("/messages")
    .then(response => response.json())
    .then(data => messages = data);

const agent = {
    id: 1,
    name: "Dummy Agent",
    response: (messages) => {
        const lastMessage = messages[messages.length-1];
        // Get response from backend
        return fetch(`/response?ask=${lastMessage.content}`)
            .then(response => response.json())
            .then(data => data);
    }
};

const chat = new ChatBot(node, { messages, agent });

In this example:

• The agent's response handler fetches a response from the backend when the agent sees a new message.
• The last message content is sent to the backend as a query parameter.
• The backend returns the response message as JSON, which is then used as the agent's reply.

Multiple Agent Chat

Load History

To fetch and load chat history from multiple agents, follow the steps below:

1. Initialize an empty messages array.
2. Make a fetch request to your backend to retrieve the initial messages.
3. Initialize the ChatBot widget with the fetched messages.

let messages = [];

// Load initial data
fetch("/messages")
    .then(response => response.json())
    .then(data => messages = data);

const chat = new ChatBot(node, { messages });

Data Format for Agents

Define the data structure for agents:

type ResponseHandler = (data: Message[]) => Message | Promise<Message>;

type Agent = {
    id: TID;
    name: string;
    avatar?: string;
    response?: ResponseHandler;
};

• id: Unique identifier for the agent.
• name: Name of the agent.
• avatar (optional): URL to the agent's avatar image.
• response (optional): A function that is triggered when the agent sees a new message. This handler can return a response message or a promise for a response message.

Data Format for Messages

Define the data structure for messages in the chat:

type Message = {
    id: TID;
    role: "agent" | "user";
    content: string;
    typing?: number;
};

• id: Unique identifier for the message.
• role: Can be either "agent" or "user".
• content: Text content of the message.
• typing (optional): Typing animation state:
  • 0: Without typing animation (default).
  • 1: With typing animation, streaming mode.
  • -1: With typing animation, finishing.

React to User's Messages

To handle user's messages and respond to them through events:

1. Initialize an empty messages array.
2. Initialize the ChatBot widget with the messages.
3. Set an event listener for the "add-message" event to detect new user messages.
4. Respond to the user's message by calling the add-message command.

const messages = [];
const chat = new ChatBot(node, { messages });

chat.on("add-message", ({ id, message }) => {
    if (message.role === "user") {
        chat.exec("add-message", {
            id,
            message: {
                role: "agent",
                content: `length ${message.content.length}`
            }
        });
    }
});

Data Format for Agents

Define the data structure for agents:

type ResponseHandler = (data: Message[]) => Message | Promise<Message>;

type Agent = {
    id: TID;
    name: string;
    avatar?: string;
    response?: ResponseHandler;
};

• id: Unique identifier for the agent.
• name: Name of the agent.
• avatar (optional): URL to the agent's avatar image.
• response (optional): A function that is triggered when the agent sees a new message. This handler can return a response message or a promise for a response message.

Data Format for Messages

Define the data structure for messages in the chat:

type Message = {
    id: TID;
    role: "agent" | "user";
    content: string;
    typing?: number;
};

• id: Unique identifier for the message.
• role: Can be either "agent" or "user".
• content: Text content of the message.
• typing (optional): Typing animation state:
  • 0: Without typing animation (default).
  • 1: With typing animation, streaming mode.
  • -1: With typing animation, finishing.