Issue: Encounter of "Uncaught (in promise) TypeError" while implementing RiveScript chatbot in Angular

Question

Issue: Encounter of "Uncaught (in promise) TypeError" while implementing RiveScript chatbot in Angular

I've been working on integrating a chatbot based on RiveScript into Angular. The chatbot is functioning well - I always see the correct response in the console. Displaying the user's input is also working seamlessly. However, I'm encountering an issue when trying to display the chatbot's response in the chat UI due to the following error:

ERROR Error: Uncaught (in promise): TypeError: this is undefined

I've experimented with various solutions but haven't been able to pinpoint the problem. It's slightly perplexing because I can retrieve the correct chatbot message in the console. Any assistance in resolving this issue would be greatly appreciated!

Below is my source code along with comments and a console log for reference. This should demonstrate that the code is functional.

converse(msg: string) {

    const userMessage = new Message(msg, 'user'); // capturing user message
    this.update(userMessage); 
   
    var bot = new RiveScript({utf8: true}); // initializing bot
     
    bot.loadFile('/assets/brain/test.rive').then(loading_done); // loading bot brain

    function loading_done() {
      console.log("Chatbot initialized!"); 
      bot.sortReplies();  // sorting replies 
    
      let username = "user";
      
      return bot.reply(username, msg).then(answer => { // fetching chatbot answer
        console.log("User: " + msg);
        console.log("Chatbot: " + answer);
        const result = answer; 
        const botMessage = new Message(result, 'bot');  
        this.update(botMessage);
      }); 
    }
  }

javascript angular typescript chatbot rivescript

Answer 1

Answer №1

attempt

converse(msg: string) {

    const userMessage = new Message(msg, 'user'); //retrieving user message
    this.update(userMessage); 
   
    var bot = new RiveScript({utf8: true}); // initializing the bot
     
    const loading_finished = (bot) => ()=> {
      console.log("Chatbot is ready!"); 
      bot.sortReplies();  //arranging replies 
    
      let username = "user";
      
      return bot.reply(username, msg).then(answer => { //obtaining chatbot response
        console.log("User: " + msg);
        console.log("Chatbot: " + answer);
        const result = answer; 
        const botMessage = new Message(result, 'bot');  
        this.update(botMessage);
      }); 
    } 

  bot.loadFile('/assets/brain/test.rive').then(loading_done(bot)); // loading the bot's brain

  }

or

   loading_executed(bot){ 
return  ()=> {
const that = this;
      console.log("Chatbot initialized!"); 
      bot.sortReplies();  //arranging replies 
    
      let username = "user";
      
      return bot.reply(username, msg).then(answer => { //obtaining chatbot response
        console.log("User: " + msg);
        console.log("Chatbot: " + answer);
        const result = answer; 
        const botMessage = new Message(result, 'bot');  
        that.update(botMessage);
      }); 
    } 
}

converse(msg: string) {

    const userMessage = new Message(msg, 'user'); //retrieving user message
    this.update(userMessage); 
   
    var bot = new RiveScript({utf8: true}); // initializing the bot
     


  bot.loadFile('/assets/brain/test.rive').then(this.loading_done(bot).bind(this)); // loading the bot's brain

  }

however, I feel the initial solution is more straightforward

Answer 2

attempt

converse(msg: string) {

    const userMessage = new Message(msg, 'user'); //retrieving user message
    this.update(userMessage); 
   
    var bot = new RiveScript({utf8: true}); // initializing the bot
     
    const loading_finished = (bot) => ()=> {
      console.log("Chatbot is ready!"); 
      bot.sortReplies();  //arranging replies 
    
      let username = "user";
      
      return bot.reply(username, msg).then(answer => { //obtaining chatbot response
        console.log("User: " + msg);
        console.log("Chatbot: " + answer);
        const result = answer; 
        const botMessage = new Message(result, 'bot');  
        this.update(botMessage);
      }); 
    } 

  bot.loadFile('/assets/brain/test.rive').then(loading_done(bot)); // loading the bot's brain

  }

or

   loading_executed(bot){ 
return  ()=> {
const that = this;
      console.log("Chatbot initialized!"); 
      bot.sortReplies();  //arranging replies 
    
      let username = "user";
      
      return bot.reply(username, msg).then(answer => { //obtaining chatbot response
        console.log("User: " + msg);
        console.log("Chatbot: " + answer);
        const result = answer; 
        const botMessage = new Message(result, 'bot');  
        that.update(botMessage);
      }); 
    } 
}

converse(msg: string) {

    const userMessage = new Message(msg, 'user'); //retrieving user message
    this.update(userMessage); 
   
    var bot = new RiveScript({utf8: true}); // initializing the bot
     


  bot.loadFile('/assets/brain/test.rive').then(this.loading_done(bot).bind(this)); // loading the bot's brain

  }

however, I feel the initial solution is more straightforward

Answer 3

Answer №2

Choose to utilize an arrow function instead of a function that defines its own this context:

const loading_done = () => {
      console.log("Chatbot initialized!"); 
      bot.sortReplies();  //sorting replies 
    
      let username = "user";
      
      return bot.reply(username, msg).then(answer => { //getting chatbot answer
        console.log("User: " + msg);
        console.log("Chatbot: " + answer);
        const result = answer; 
        const botMessage = new Message(result, 'bot');  
        this.update(botMessage);
      }); 
    }

Incorporate the concept of making loading_done a private function since you are using TypeScript:

converse(msg: string) {

    const userMessage = new Message(msg, 'user'); //gettng user message
    this.update(userMessage); 
   
    var bot = new RiveScript({utf8: true}); // initializing bot
     
    bot.loadFile('/assets/brain/test.rive').then(this.loadingDone); // loading bot brai
  }

// Employ camel case over snake case in TypeScript.
private loadingDone = () => {
      console.log("Chatbot initialized!"); 
      bot.sortReplies();  //sorting replies 
    
      let username = "user";
      
      return bot.reply(username, msg).then(answer => { //getting chatbot answer
        console.log("User: " + msg);
        console.log("Chatbot: " + answer);
        const result = answer; 
        const botMessage = new Message(result, 'bot');  
        this.update(botMessage);
      }); 
}

Answer 4

Choose to utilize an arrow function instead of a function that defines its own this context:

const loading_done = () => {
      console.log("Chatbot initialized!"); 
      bot.sortReplies();  //sorting replies 
    
      let username = "user";
      
      return bot.reply(username, msg).then(answer => { //getting chatbot answer
        console.log("User: " + msg);
        console.log("Chatbot: " + answer);
        const result = answer; 
        const botMessage = new Message(result, 'bot');  
        this.update(botMessage);
      }); 
    }

Incorporate the concept of making loading_done a private function since you are using TypeScript:

converse(msg: string) {

    const userMessage = new Message(msg, 'user'); //gettng user message
    this.update(userMessage); 
   
    var bot = new RiveScript({utf8: true}); // initializing bot
     
    bot.loadFile('/assets/brain/test.rive').then(this.loadingDone); // loading bot brai
  }

// Employ camel case over snake case in TypeScript.
private loadingDone = () => {
      console.log("Chatbot initialized!"); 
      bot.sortReplies();  //sorting replies 
    
      let username = "user";
      
      return bot.reply(username, msg).then(answer => { //getting chatbot answer
        console.log("User: " + msg);
        console.log("Chatbot: " + answer);
        const result = answer; 
        const botMessage = new Message(result, 'bot');  
        this.update(botMessage);
      }); 
}

Issue: Encounter of "Uncaught (in promise) TypeError" while implementing RiveScript chatbot in Angular

Answer №1

Answer №2

Similar questions

Incorporate distinct items into an array using reactjs

The operation of 'val' is not supported by HTMLInputElement

Parsing error encountered while trying to handle an unexpected token at line 214, character 33. It appears that an appropriate loader is missing to process this particular file type

Navigate to the top of the page using jQuery

Is dynamic data supported by Next.js SSG?

The footer seems to be losing its stickiness and not staying at the bottom when I

Tips for retrieving modified data from a smart table in Angular 4

The element is not defined in the Document Object Model

Determine if an option is chosen in multiple select elements using Vanilla JavaScript

What is the best way to interact with my component in React?

Navigating Mixins in Ember CLI Typescript

MUI options - The specified type 'string' cannot be matched with type '"icon" | "iconOnly" | "text" | "outlined" | "contained" | undefined'

How to modify a value in a document within a MongoDB collection

Importing a JavaScript file into another JavaScript file as text in React Native can be a convenient way

Angular JS does not acknowledge null values

The error message TS2339 in Angular service.component indicates that the property 'subscribe' is not recognized on the type 'Promise<Object>'

Unfortunately, we encountered an AJAX error while trying to access data from the website datatables.net. You can find

"Enable a smooth transition and switch the visibility of a div element when clicked

Submitting a POST request using a Chrome Extension

Organizing a set of div elements based on their ID attributes