Rasa webchat : Using kubernetes to connect rasa x and rasa open source to a website

Thanks very much to rasa Community for all information and course that I made accessible, those helped me a lot. Nevertheless, there is something that I can’t find anywhere. It is a way to deploy rasa open source to a custom website and link it to rasa x but with kubernetes, using helm installation and the values.yml file.

I have tried creating a simple index.html-website that integrates the rasa webchat widget and is linked to rasa x like this:

    <html>
        <body> <script>!(function () {   let e = document.createElement("script"),
        t = document.head || document.getElementsByTagName("head")[0];   (e.src =
        "https://cdn.jsdelivr.net/npm/rasa-webchat@1.x.x/lib/index.js"),
        // Replace 1.x.x with the version that you want
        (e.async = !0),
        (e.onload = () => {
          window.WebChat.default(
            {
              initPayload:'/intent_trigger_conversation',
              customData: { language: "fr" },
              socketUrl: "rasax url",
              socketPath: "/socket.io/", 
              // add other props here
              params: { "storage": "session"}
            },
            null
          );
        }),
        t.insertBefore(e, t.firstChild); })(); </script>
        </body> 
    </html>

And then added this in my values.yml file:

debugMode: true
app:
    # from microk8s build-in registry
    name: "localhost:32000/civa-augmented-bot-action-server"
    tag: "0.0.1"
nginx:
  service:
    # connect LoadBalancer directly to VMs' internal IP
    # You get this value with: $ hostname -I
    externalIPs: [******]
rasax:
    # initialUser is the user which is created upon the initial start of Rasa X
    initialUser:
        # password for the Rasa X user
        password: "*********"
    # passwordSalt Rasa X uses to salt the user passwords
    passwordSalt: "*********"
    # token Rasa X accepts as authentication token from other Rasa services
    token: "*********"
    # jwtSecret which is used to sign the jwtTokens of the users
    jwtSecret: "*********"
    # tag refers to the Rasa X image tag
    tag: "0.42.2"
rasa:
    # token Rasa accepts as authentication token from other Rasa services
    token: "*********"
    # tag refers to the Rasa image tag
    tag: "2.8.5-full"
    additionalChannelCredentials:
        socketio:
            user_message_evt: user_uttered
            bot_message_evt: bot_uttered
            session_persistence: true

rabbitmq:
    # rabbitmq settings of the subchart
    rabbitmq:
        # password which is used for the authentication
        password: "*********"
global:
    # postgresql: global settings of the postgresql subchart
    postgresql:
        # postgresqlPassword is the password which is used when the postgresqlUsername equals "postgres"
        postgresqlPassword: "*********"
    # redis: global settings of the postgresql subchart
    redis:
        # password to use in case there no external secret was provided
        password: "*********"

But after deploying rasa x with

helm --namespace my-namespace install --values values.yml my-release rasa-x/rasa-x

command, there was no widget on my website.

But when I replace the rasax url by my website url in the index.html file and execute

rasa run -m models --enable-api --cors "*" 

localy, it works, meaning I can see the rasa webchat widget on my hosted website and talk to my bot.

How can I make the rasa webchat widget accessible on my website and connect the website with rasax with Helm chart deployment (helm --namespace my-namespace install --values values.yml my-release rasa-x/rasa-x)

Can anybody help me please ?

@lao-dja-songdou Can you please tell me what is your current rasa version you are working? rasa --version

Hello @nik202

Those are information about my rasa.

Rasa Version      :         2.8.1
Minimum Compatible Version: 2.8.0
Rasa SDK Version  :         2.8.1
Rasa X Version    :         None
Python Version    :         3.7.6
Operating System  :         Windows-10-10.0.19041-SP0

I am not sure that the issue comes from the version of rasa I am using… Actually, when adding the port to my rasax url (meaning socketUrl: http://MY-VM-IP-ADDRESS:8000 ) in the index html file, I can link, rasa, rasa X and my local website so that every conversation in my local website, is in real time showed in my rasa x and the bot is using the nlu model that is loaded in Rasa X.

I think there is some progress ^^.

Now what I need is my hosted website to work just like my local index.html website… I think maybe I need to make my rasax accessible via https? Not sure… I am working on it.

@lao-dja-songdou change this "https://cdn.jsdelivr.net/npm/rasa-webchat@1.0.1/lib/index.js"), and if you know about the concept of ngrok then you can expose the port using ngrok http 5005 or 8000 and mentioned that in socketUrl: “rasax url”, . Did you got my suggestion?

@lao-dja-songdou in endpoints.yml you need to mention.

socketio:
  user_message_evt: user_uttered
  bot_message_evt: bot_uttered
  session_persistence: true

@lao-dja-songdou I guess you can only render socketURL: "http://localhost:5005" for rasa open source as rasa webchat using it own widget code, I not personally mention rasa x url in socketURL:.

Hello,

Thanks for your answer. I changed 1.x.x (latest version) by 1.0.1 as you suggested but not changed from my previous result. Actually I get this

meaning that all my messages in local website appear in Rasax’s (deployed using helm chart) conversations

And I obtained that without putting

socketio:
  user_message_evt: user_uttered
  bot_message_evt: bot_uttered
  session_persistence: true

in credentials.yml (I guess that’s what you mean by endpoints.yml). Instead, I put it in the values.yml file (see my first message) that I used to deploy both rasa and rasa X, right after the rasa tag key.

All that was required to obtain the above sync was the deployed rasa x url in socketUrl.

I hosted that index.html file on Azure but don’t get the widget appearing like it’s local version…

About Ngrok, isn’t if for local development ? I am not an expert, but if I am not mistaken, it produces an url that allows a secure connection between my local pc and external network services right? I am not sure how to use it in my context (deployment with helm chart that uses Kubernetes some how)

What snippet code did you use for the Azure instance?

Ngrok allows you the secure tunnel between your local machine to the outside world whilst using mentioned port only.

ngrok is a cross-platform application that enables developers to expose a local development server to the Internet with minimal effort . The software makes your locally-hosted web server appear to be hosted on a subdomain of ngrok.com, meaning that no public IP or domain name on the local machine is needed.

As I can see you were able to run bot rasa webchat and rasa x. Now, your issue is only with Azure not being able to see the widget rasawebchat right?

I think it is not working because my website uses https and so doesn’t allow http connection. So I think that,what I really need is to allow https connection to my deployed rasax

Yes exactly !

Thanks, As the end goal is to have both Rasa, rasax and the web site running on a web server, I don’t know if ngrok would help me.

@lao-dja-songdou If you site not allowing you https then you can expose the ngrok port using ngrok copy the secure generated link https and replace with socketUrl: this can solve your issue.

Please check how ngrok is used in this video and even integrating in website DEPLOY RASA CHATBOT TO WORDPRESS WEBSITE | WORDPRESS | INNOVATE YOURSELF - YouTube

If your rasa and rasa x is working fine means Rasa (using website you want : botfront GUI ) and Rasa x in web browser. You can archived this end goal for sure.

using Ngrok: Download and create ngrok account and please authentic the ngrok token whilst going inside the ngrok folder.

I hope this will solve your issue.

Thans you very much.

The only problem is that the generated https link provided by Ngrok is ephemeral. I actually need something permanent ^^.

Hello @lao-dja-songdou, did making Rasa X url as https workout for you? and eventually were you able to get response in your website from Rasa X deployed bot?

@koaning can you please take a look here and give a solution for this? Also, does rasa-x container run ‘–enable-api’ switch by its own or do we have to specify it in the values.yml somewhere for socket.io connections to work?

To run the socket.io channel, you need to make sure it is properly configured in credentials.yml. Ngrok should be seen as a local development tool that helps you demo your project to folks on the world wide web. It’s not meant as an active deployment strategy.

I think --enable-api is the default. Rasa X is using Rasa Open Source internally, but I couldn’t find the setting on our Helm Charts.

Hi @koaning thank you for your reply. I actually checked my rasa-x pod logs and found that it does show ‘websocket connected’, so I’m 90% sure that --enable-api switch is being enabled by rasa x internally. However, any sort of bot response is still not being seen at the frontend. Neither does it respond in the RasaX UI which I’ve deployed using helm.

This is my frontend code and you can see that my rasa-x loadbalanced URL is clearly defined in socketURL part. I’ve also mentioned - socketio: user_message_evt: user_uttered bot_message_evt: bot_uttered session_persistence: true under rasa section in my values.yml.

What seems to be the problem here?

@webdev-rohit It will never be till you mention the @ 1.0.1 in https, update this change and you should see the bot websocket connected.

Change: @ 1.x.x to 1.0.1

Good luck!

1 Like

Thank you @nik202 I am able to talk to my bot now using the Rasa X Url.

@webdev-rohit No worries and good luck.