How to integrate Botman in Symfony 3 (controller and view )?

I would like to integrate a chatbot into my symfony website. So I saw that there was Botman which is a PHP framework and it meets my needs, but I find no documentation concerning its integration with Symfony.So as it is in PHP and symfony too, so I started to install it with composer and then the drivers too.

Here are the steps I followed

composer require botman/botman
composer require botman/driver-web
make a controller in my forehead

My Controller

 public function chatAction()
{
    $config = [
    // Your driver-specific configuration
    // "telegram" => [
    //    "token" => "TOKEN"
    // ]
];

   DriverManager::loadDriver(\BotMan\Drivers\Web\WebDriver::class);

   $botman = BotManFactory::create($config);

  // Give the bot something to listen for.
$botman->hears('Hello', function (BotMan $bot) {
    $bot->reply('Hello too');
});

// $botman->fallback(function($bot) {
//     $bot->reply('Sorry, I did not understand these commands. Here is a list of commands I understand: ...');
// });

// Start listening
$botman->listen();

return $this->render('DoctixFrontBundle:Chat:index.html.twig');
 }

My view For my view I have no starting point and I don't know what to do clearly, that's why i just put the css and the js of botman in it

 <!doctype html>
<html>

<head>
    <title>BotMan Widget</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/botman-web-widget@0/build/assets/css/chat.min.css">
</head>

<body>
    <script id="botmanWidget" src='https://cdn.jsdelivr.net/npm/botman-web-widget@0/build/js/chat.js'></script>
</body>
   
</html>
<script>
        var botmanWidget = {
            frameEndpoint: '/chat.html',
            introMessage: 'Hello, I am a Chatbot',
            chatServer : 'chat.php', 
            title: 'My Chatbot', 
            mainColor: '#456765',
            bubbleBackground: '#ff76f4',
            aboutText: '',
            bubbleAvatarUrl: '',
        }; 
    </script>
        <script src='https://cdn.jsdelivr.net/npm/botman-web-widget@0/build/js/widget.js'></script>

But nothing to do, I only have a display of a piece of css and js code in my rendering. Can help me Thanks.

Solution

I assume that you use the Botman web widget to render the chat box.

You need three routes and three controller functions:

One that will send back the page that contains the chatbot widget ("homepage" in the following example),
One that will deal with the Botman logic and return the serialized answers of the bot("message" in the following example),
One that will send back the chat frame ("chatframe" in the following example).

here is a basic example:

<?php

namespace AppBundle\Controller;

use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;

use BotMan\BotMan\BotMan;
use BotMan\BotMan\BotManFactory;
use BotMan\BotMan\Drivers\DriverManager;


class BobotController extends Controller{

    /**
     * @Route("/message", name="message")
     */
    function messageAction(Request $request)
    {
        DriverManager::loadDriver(\BotMan\Drivers\Web\WebDriver::class);

        // Configuration for the BotMan WebDriver
        $config = [];

        // Create BotMan instance
        $botman = BotManFactory::create($config);

        // Give the bot some things to listen for.
        $botman->hears('(hello|hi|hey)', function (BotMan $bot) {
            $bot->reply('Hello!');
        });

        // Set a fallback
        $botman->fallback(function (BotMan $bot) {
            $bot->reply('Sorry, I did not understand.');
        });

        // Start listening
        $botman->listen();

        return new Response();
    }
    
    /**
     * @Route("/", name="homepage")
     */
    public function indexAction(Request $request)
    {
        return $this->render('DoctixFrontBundle:Chat:homepage.html.twig');
    }
    
    /**
     * @Route("/chatframe", name="chatframe")
     */
    public function chatframeAction(Request $request)
    {
        return $this->render('DoctixFrontBundle:Chat:chat_frame.html.twig');
    }
}

And you need two views, first the chat frame chat_frame.html.twig (a simple copy-paste of the one provided in Botman web widget's documentation):

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>BotMan Widget</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/botman-web-widget@0/build/assets/css/chat.min.css">
    </head>
    <body>
        <script id="botmanWidget" src='https://cdn.jsdelivr.net/npm/botman-web-widget@0/build/js/chat.js'></script>
    </body>
</html>

And the page that will contain the chat widget in its bottom right corner homepage.html.twig:

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Hello World!</title>
    </head>
    <body>
        <h1>Hello!</h1>
        <p>Click on the chat button.</p>
        <script>
            var botmanWidget = {
            frameEndpoint: '{{ path("chatframe") }}',
            chatServer: '{{ path("message") }}',
            introMessage: 'Hello, I am a Chatbot',
            title: 'My Chatbot', 
            mainColor: '#456765',
            bubbleBackground: '#ff76f4',
            aboutText: ''
        };
</script>
<script src='https://cdn.jsdelivr.net/npm/botman-web-widget@0/build/js/widget.js'></script>
    </body>
</html>