Preview:
// Add a new FormControl to handle file uploads
chatForm = new FormGroup({
  message: new FormControl('', [Validators.required]),
  file: new FormControl(null),
});

// Add a new method to handle file uploads
onFileChange(event: any) {
  if (event.target.files.length > 0) {
    const file = event.target.files[0];
    this.chatForm.patchValue({
      file: file,
    });
  }
}

// Modify the sendMessage method to handle file uploads
sendMessage() {
  const sentMessage = this.chatForm.value.message!;
  const sentFile = this.chatForm.value.file;
  this.loading = true;
  this.messages.push({
    type: 'user',
    message: sentMessage,
  });
  this.chatForm.reset();
  this.scrollToBottom();
  
  // Handle file uploads
  if (sentFile) {
    // Add logic to handle file uploads here
    // For example, you could send the file to your server and then send the URL to RASA
  } else {
    this.messageService.sendMessage(sentMessage).subscribe((response: any) => {
      for (const obj of response) {
        let value;
        console.log(obj);
        if (obj.hasOwnProperty('text')) {
          value = obj['text'];
          this.pushMessage(value);
        }
        if (obj.hasOwnProperty('image')) {
          value = obj['image'];
          this.pushMessage(value);
        }
      }
      // MANIPULATION OF DATA TYPES OF RASA SUCH AS IMAGE, TEXT, BUTTONS, ETC
    }, (error) => { console.log(error); });
  }
}
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter