<!-- Add a file input to your template -->
<input type="file" (change)="onFileChange($event)" />

<!-- Add a button to trigger the file input -->
<button (click)="fileInput.click()">Upload File</button>

// 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); });
  }
}

sendMessage() {
  const sentMessage = this.chatForm.value.message!;
  this.loading = true;
  this.messages.push({
    type: 'user',
    message: sentMessage,
  });
  this.chatForm.reset();
  this.scrollToBottom();
  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);
      }
      // Handle buttons
      if (obj.hasOwnProperty('buttons')) {
        value = obj['buttons'];
        // Add logic to handle buttons here
      }
      // Handle custom payloads
      if (obj.hasOwnProperty('custom')) {
        value = obj['custom'];
        // Add logic to handle custom payloads here
      }
    }
    // MANIPULATION OF DATA TYPES OF RASA SUCH AS IMAGE, TEXT, BUTTONS, ETC
  }, (error) => { console.log(error); });
}

import { Component, ViewChild } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { MessageService } from '../service/api.service';

export interface Message {
  type: string;
  message: string;
}

@Component({
  selector: 'app-chat-support',
  templateUrl: './chat-support.component.html',
  styleUrls: ['./chat-support.component.scss'],
})
export class ChatSupportComponent {
  isOpen = false;
  loading = false;
  messages: Message[] = [];
  chatForm = new FormGroup({
    message: new FormControl('', [Validators.required]),
  });
  @ViewChild('scrollMe') private myScrollContainer: any;

  constructor(private messageService: MessageService) {
  }

  openSupportPopup() {
    this.isOpen = !this.isOpen;
  }

  sendMessage() {
    const sentMessage = this.chatForm.value.message!;
    this.loading = true;
    this.messages.push({
      type: 'user',
      message: sentMessage,
    });
    this.chatForm.reset();
    this.scrollToBottom();
    this.messageService.sendMessage(sentMessage).subscribe((response: any) => {
      for (const obj of response) {
        if (obj.hasOwnProperty('text')) {
          const value = obj['text'];
          this.pushMessage('text', value); // Specify the type as 'text'
        }
        if (obj.hasOwnProperty('image')) {
          const value = obj['image'];
          this.pushMessage('image', value); // Specify the type as 'image'
        }
        // Add more conditions for other types like buttons, cards, etc.
      }
    }, (error) => {
      console.log(error);
    });
  }

  pushMessage(type: string, message: string) {
    console.log(message);
    setTimeout(() => {
      this.messages.push({
        type: 'client',
        message: message,
      });
      this.loading = false;
      this.scrollToBottom();
    }, 150);
  }

  scrollToBottom() {
    setTimeout(() => {
      try {
        this.myScrollContainer.nativeElement.scrollTop =
          this.myScrollContainer.nativeElement.scrollHeight + 500;
      } catch (err) {
      }
    }, 150);
  }
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})
export class MessageService {
  constructor(private http: HttpClient) {}

  sendMessage(message: string) {
    return this.http.post('http://localhost:5005/webhooks/rest/webhook', { message: message });
  }
}

<div id="assistant">
  <button id="assistant-popup-button" (click)="openSupportPopup()">
    Chat Support?
  </button>
  <div id="assistant-popup" [style.display]="isOpen ? 'block' : 'none'">
    <div id="assistant-popup-header">
      Your friendly Assistant
      <button id="assistant-popup-close-button" (click)="openSupportPopup()">
       X
      </button>
    </div>
    <div id="assistant-popup-body">
      <div class="messages" #scrollMe>
        <div *ngFor="let message of messages" class="message">
          <div [class]="message.type">
            {{ message.message }}
          </div>
        </div>
        <div
          *ngIf="loading"
          class="message"
          style="width: 100%; display: block"
        >
          <div [class]="'client'">Typing...</div>
        </div>
      </div>
    </div>
    <form id="assistant-popup-footer" [formGroup]="chatForm">
      <input
        formControlName="message"
        type="text"
        id="assistant-popup-input"
        placeholder="Type your message here..."
      />
      <button
        id="assistant-popup-submit-button"
        [disabled]="!chatForm.valid"
        (click)="sendMessage()"
      >
        Submit
      </button>
    </form>
  </div>
</div>
import { Component, ViewChild } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { MessageService } from '../service/api.service';

export interface Message {
  type: string;
  message: string;
}

@Component({
  selector: 'app-chat-support',
  templateUrl: './chat-support.component.html',
  styleUrls: ['./chat-support.component.scss'],
})
export class ChatSupportComponent {
  isOpen = false;
  loading = false;
  messages: Message[] = [];
  chatForm = new FormGroup({
    message: new FormControl('', [Validators.required]),
  });
  @ViewChild('scrollMe') private myScrollContainer: any;

  constructor(private messageService: MessageService) {
  }

  openSupportPopup() {
    this.isOpen = !this.isOpen;
  }

  sendMessage() {
    const sentMessage = this.chatForm.value.message!;
    this.loading = true;
    this.messages.push({
      type: 'user',
      message: sentMessage,
    });
    this.chatForm.reset();
    this.scrollToBottom();
    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 A IMAGE, TEXT, BUTTONS, ETC
    }
    , (error) => { console.log(error)});
  }

  pushMessage(message:string){

    console.log(message);
     setTimeout(() =>{this.messages.push({
      type: 'client',
      message: message,
    });
    this.loading = false;
    this.scrollToBottom();
  }, 150)
  }

  scrollToBottom() {
    setTimeout(() => {
      try {
        this.myScrollContainer.nativeElement.scrollTop =
          this.myScrollContainer.nativeElement.scrollHeight + 500;
      } catch (err) {}
    }, 150);
  }
}

import { Component, ViewChild } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { MessageService } from '../service/api.service';

export interface Message {
  type: string;
  message: string;
}

@Component({
  selector: 'app-chat-support',
  templateUrl: './chat-support.component.html',
  styleUrls: ['./chat-support.component.scss'],
})
export class ChatSupportComponent {
  isOpen = false;
  loading = false;
  messages: Message[] = [];
  chatForm = new FormGroup({
    message: new FormControl('', [Validators.required]),
  });
  @ViewChild('scrollMe') private myScrollContainer: any;

  constructor(private messageService: MessageService) {
  }

  openSupportPopup() {
    this.isOpen = !this.isOpen;
  }

  sendMessage() {
    const sentMessage = this.chatForm.value.message!;
    this.loading = true;
    this.messages.push({
      type: 'user',
      message: sentMessage,
    });
    this.chatForm.reset();
    this.scrollToBottom();
    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 A IMAGE, TEXT, BUTTONS, ETC
    }
    , (error) => { console.log(error)});
  }

  pushMessage(message:string){

    console.log(message);
     setTimeout(() =>{this.messages.push({
      type: 'client',
      message: message,
    });
    this.loading = false;
    this.scrollToBottom();
  }, 150)
  }

  scrollToBottom() {
    setTimeout(() => {
      try {
        this.myScrollContainer.nativeElement.scrollTop =
          this.myScrollContainer.nativeElement.scrollHeight + 500;
      } catch (err) {}
    }, 150);
  }
}