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

Error with Bootstrap 4 tabs and JavaScript AJAX implementation

Hold off until the operation finishes executing and then deliver Angular 6

Using JavaScript to Retrieve, Manipulate, and Merge JSON Data from Various Files

Is it possible to utilize terms such as 'calc' within the [style.width] directive?

Show off a font-awesome icon overlapping another image

Vue.js event handlers

Tips for retrieving nested objects in a get request

Utilizing YouTube API information with AngularJS

Check and validate the adjacent field whenever a change is detected in this field in Angular

How can you access the index of an object in Vue.js when one of its properties has been modified

Extract the value from JSON data

Could you please explain the significance of /** @docs-private */ in Angular's TypeScript codebase?

I'm currently attempting to establish a connection between my server.js express API and MongoDB, but I keep encountering an unfamiliar error message that I'm having trouble decipher

Tips on incorporating a hyperlink into an object imported through GLTF loader

Determining the pageY value of a div element with overflow-y styling

Populate DataTables with data from JSON or JavaScript arrays and objects

Developing an Angular project may result in an overflow of memory

Utilizing Express REST API with Postgres through the HTTP method

What is the process of extracting data from a variable and inserting it into a JSON object in JavaScript?

What is the best way to trigger a re-render of a component in React?