Simple Chatbot in x-bees

This guide will walk you through creating and deploying a simple chatbot using x-bees conversation SDK and Node.js.

Introduction

Wildix is a unified communications solution that offers various tools, including x-bees, for efficient communication. By integrating a chatbot, you can automate responses, handle frequent queries, and improve overall user experience. This guide will help you create a basic chatbot that responds to messages with a simple "Pong: message".

Prerequisites

Before you start, make sure you have the following:

• Node.js and npm: Ensure you have Node.js (version 18.x or higher) and npm installed.
• Git: For cloning the repository.
• Wildix Management System Access: To configure the chatbot.
• Ngrok Account: For creating a public HTTPS tunnel.

Step 1: Configure the Chatbot in WMS

1. Login to WMS:

• Open the WMS login page and enter your credentials.

2. Navigate to Chatbot Integration:

• Go to PBX -> Integrations -> Cloud integrations tab.

3. Add a New Chatbot:

• Click on Chatbots -> Add new chatbot.
• Fill in the required fields:
  • Name: Choose a name for your chatbot.
  • Integration type: Select Webhook.
  • Webhook URL: Enter https://example.com/ (we will update this later).
• Select Allow users to find the bot using search.
• Click Add.

Step 2: Generate API Key for the Chatbot

1. Manage API Keys:

• After creating the bot, click on Manage API keys.

2. Create a New API Key:

• Click Create new API Key.
• Label the API key for identification.
• Click Create and copy the secret using the Click to reveal button.

Step 3: Clone the Examples Repository

Open your terminal and run:

git clone https://github.com/Wildix/sdk-examples.git
cd sdk-examples

Step 4: Install Required Packages

Navigate to the chatbot-simple example directory and install the necessary packages:

cd examples/chatbot-simple
npm install

Step 5: Run the Server

Start the server using the following command:

npm run start

The server will start, and Ngrok will provide a public URL. Use this URL to configure your webhook in WMS.

Step 6: Update Webhook URL

1. Get the Public URL from Ngrok:

• The URL will look something like http://<unique_id>.ngrok.io/bot/webhook.

2. Update Webhook URL in WMS:

• Login to WMS.
• Navigate to WMS -> PBX -> Integrations -> Cloud integrations tab.
• Select your created bot under Chatbots.
• Update the Webhook URL with the Ngrok URL (<your_ngrok_url>/bot/webhook).
• Save the changes.

Step 7: Communicate with the Bot

1. Open x-bees:

• Launch the x-bees application.

2. Find the Bot:

• Use Live Search to find the bot using the name you specified.

3. Send a Message:

• Type a message like "Hello Bot!" and send it.

4. Bot Response:

• The bot will reply with "Pong: Hello Bot!".

Example Interaction

• User: "Hello Bot!"
• Bot: "Pong: Hello Bot!"

This confirms that your chatbot is set up correctly and can interact with users through the x-bees application.

Code

Here’s a detailed explanation of the code used to create the chatbot:

import {
  ConversationsClient, SendMessageCommand,
  WebhookChatMessageNewEvent,
  WebhookEventType as ChatWebhookEventType,
} from '@wildix/xbees-conversations-client';

import express, {Request, Response} from 'express';
import ngrok from 'ngrok';

const app = express();
const port = 3110;

const botApiKey = 'BOT_API_TOKEN_HERE'; // Replace with your actual API key

const conversationsClientToken = {token: () => Promise.resolve(botApiKey)};
const conversationsClient = new ConversationsClient({token: conversationsClientToken});

function isEventProcessable(event: WebhookChatMessageNewEvent) {
  if (event.data.channel.memberCount > 2) return false; // Ignore group messages
  if (event.data.message.user.bot || event.botId === event.data.message.user.id) return false; // Ignore bot messages
  if (event.data.message.type !== 'regular') return false; // Only process regular messages
  if (!event.data.message.text) return false; // Ignore messages without text
  return true;
}

app.use(express.json());

app.post('/bot/webhook', async (request: Request, response: Response) => {
  const event = request.body as WebhookChatMessageNewEvent;

  console.log('Event', JSON.stringify(event, null, 2));

  try {
    if (event.type === ChatWebhookEventType.MESSAGE_NEW) {
      if (isEventProcessable(event)) {
        await conversationsClient.send(
          new SendMessageCommand({
            channelId: event.data.channel.channelId,
            text: `Pong: ${event.data.message.text}`,
          }),
        );
      }
    }

    console.log('Event processed successfully');
    response.json({message: 'Webhook processed successfully'});
  } catch (error) {
    console.error('Error processing webhook:', error);
    response.status(500).json({message: 'Internal server error'});
  }
});

app.listen(port, async () => {
  const url = await ngrok.connect(port);
  console.log(`Public URL: ${url}/bot/webhook`);
});

By following this guide, you will have a fully functional chatbot integrated with Wildix, capable of interacting with users through the x-bees application.