DEV Community

Cover image for RASA - Session persistence
Petr Janik
Petr Janik

Posted on

4

RASA - Session persistence

In this article, we will add session persistence to the web chat application created in the previous post. This will allow a user to continue in the conversation with the chatbot even after a browser tab / window is closed.

First, we need to enable session persistence in the Rasa chatbot project. Set session_persistence to true.



# credentials.yml
socketio:
  user_message_evt: user_uttered
  bot_message_evt: bot_uttered
  session_persistence: true


Enter fullscreen mode Exit fullscreen mode

Now the frontend will be responsible for generating a session ID and sending it to the Rasa server. It needs to emit a session_request event with session_id immediately after the connect event.

We'll manage the session ID by storing it in the localStorage.



function getSessionId() {
    const storage = localStorage;
    const storageKey = 'RASA_SESSION_ID';
    const savedId = storage.getItem(storageKey);
    if (savedId) {
        return savedId;
    }
    const newId = socket.id;
    storage.setItem(storageKey, newId);
    return newId;
}


Enter fullscreen mode Exit fullscreen mode

The function getSessionId returns a session ID stored in the localStorage. If there is no such ID, it creates a new one, stores it in the localStorage and returns it. The session ID can be any string (number does not work) unique to every user (website visitor). socket.id is a good candidate.

Now when we have the getSessionId function, we can use it to get a session ID and send it immediately after the connect event. Change the connect event handler in index.html to the following:



socket.on('connect', function () {
    console.log('Connected to Socket.io server.');
    socket.emit('session_request', {
        'session_id': getSessionId(),
    });
    console.log(`Session ID: ${getSessionId()}`);
});


Enter fullscreen mode Exit fullscreen mode

The same session ID must be sent with every user_uttered event. The event is emitted in two places:

  1. in the appendQuickReplies function when the quick reply button is clicked and
  2. when the form is submitted, i.e. when a user clicks Send.

We'll create a function utter(msg) that will send a message passed as a parameter and the session ID.



function utter(msg) {
    socket.emit('user_uttered', {
        'message': msg,
        'session_id': getSessionId(),
    });
}


Enter fullscreen mode Exit fullscreen mode

Lastly, we will replace the two mentioned occurrences of the user_uttered event with calls to the utter function.



function appendQuickReplies(quickReplies) {
    const quickRepliesNode = document.createElement('div');
    quickRepliesNode.classList.add('quick-replies');
    quickReplies.forEach(quickReply => {
        const quickReplyDiv = document.createElement('button');
        quickReplyDiv.innerHTML = quickReply.title;
        quickReplyDiv.classList.add('button');
        quickReplyDiv.addEventListener('click', () => {
            messages.removeChild(quickRepliesNode);
            appendMessage(quickReply.title, 'sent');
            /** NEW CODE **/
            utter(quickReply.payload);
            /** ******** **/
        });
        quickRepliesNode.appendChild(quickReplyDiv);
    });
    messages.appendChild(quickRepliesNode);
    scrollToBottom();
}


Enter fullscreen mode Exit fullscreen mode


form.addEventListener('submit', function (e) {
    e.preventDefault();
    const msg = messageInput.value;
    if (msg) {
        /** NEW CODE **/
        utter(msg);
        /** ******** **/
        messageInput.value = '';

        appendMessage(msg, 'sent');
    }
});


Enter fullscreen mode Exit fullscreen mode

Run the application

  1. Serve the application on http://localhost:8080 by running npx http-server webchat.
  2. In a new terminal window, run the rasa server with enabled cors for all origins: rasa run --cors "*".
  3. In another terminal window, run the actions server: rasa run actions.
  4. Open http://127.0.0.1:8080 and chat with the chatbot!

Conversation with a chatbot on two tabs

You can see that the chatbot continues the conversation (it remembers the previous answers) even when we open a new tab.

What we implemented in this article is briefly described in the Rasa documentation here.

Repository for this tutorial:

You can checkout the state of the repository at the end of this tutorial by running:



git clone --branch 24-session-persistence git@github.com:petr7555/rasa-dev-tutorial.git


Enter fullscreen mode Exit fullscreen mode

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (2)

Collapse
 
prajinprakash profile image
PRAJIN PRAKASH •

how we can add JWT authentication?

Collapse
 
petr7555 profile image
Petr Janik • • Edited

Hi,
I have not tried that.
Maybe this would help rasa.com/docs/rasa/connectors/your...?

Retry later
Retry later