Extra functions for RASA TypeScript

PHOTO

Fri Jun 23 2023 10:05:58 GMT+0000 (Coordinated Universal Time)

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

COPY

In this modified code, I've added the type parameter to the pushMessage function, which allows specifying the type of message being pushed (e.g., 'text', 'image'). This way, you can easily manipulate the data types returned by RASA and add more conditions for different types like buttons, cards, etc. Remember to update the pushMessage function implementation to handle different types of messages appropriately (e.g., rendering images, buttons, etc.), based on the type parameter.

Save snippets that work from anywhere online with our extensions

Comments

RASA

@cameron_v_r

RASA TypeScript RASA Angular Frontend RASA API Service Extra functions for RASA TypeScript Even more functions for RASA TypeScript Upload a file to RASA TypeScript RASA HTML for file upload

#microsoft #typescript #editor #opensource

Open source code for Visual Studio Code Editor

https://github.com/Microsoft/vscode

#typescript

sort array by date typescript - Google Search

array.sort((x, y) => +new Date(x.createdAt) - +new Date(y.createdAt));

#typescript

Get URI of external CSS & JS files for VSCode Webview

// Get path to resource on disk
 const onDiskPath = vscode.Uri.file( 
   path.join(context.extensionPath, 'css', 'style.css')
);
// And get the special URI to use with the webview
const cssURI = panel.webview.asWebviewUri(onDiskPath);

#typescript #express #socketio

Socket IO with Express session

const sessionMiddleware = expressSession({
    secret: 'Tecky Academy teaches typescript',
    resave:true,
    saveUninitialized:true,
    cookie:{secure:false}
});

app.use(sessionMiddleware);

io.use((socket,next)=>{
    let req = socket.request as express.Request
    let res = req.res as express.Response
    sessionMiddleware(req, res, next as express.NextFunction
});
//...
io.on('connection', function (socket) {
    // You can set any values you want to session here.
    const req = socket.request as express.Request;
    req.session['key'] = 'XXX';
    // There is no auto save for session.
    socket.request.session.save();

    // You can also send data using socket.emit() although it is not very useful
    socket.emit('any-key','values');
    socket.on("disconnect",()=>{
        //... rest of the code
    })
});

#javascript #typescript

javascript - How to generate range of numbers from 0 to n in ES2015 only? - Stack Overflow

const range = (from, to, step) =>
  [...Array(Math.floor((to - from) / step) + 1)].map((_, i) => from + i * step);

range(0, 9, 2);
//=> [0, 2, 4, 6, 8]

// can also assign range function as static method in Array class (but not recommended )
Array.range = (from, to, step) =>
  [...Array(Math.floor((to - from) / step) + 1)].map((_, i) => from + i * step);

Array.range(2, 10, 2);
//=> [2, 4, 6, 8, 10]

Array.range(0, 10, 1);
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Array.range(2, 10, -1);
//=> []

Array.range(3, 0, -1);
//=> [3, 2, 1, 0]

#bash #ionic #angular #capacitor #qrcode #reader #typescript #javascript #html

html-qrcode reader

...

<ion-content class="scanner-hide" *ngIf="scanStatus == false">
  <div class="padding-container center">
    <ion-button color="primary" (click)="scanCode()"><ion-icon slot="start" name="qr-code-outline"></ion-icon> Scanear Código</ion-button> <!-- Botão que chama a função do scanner-->
  </div>
  <ion-card>
    <ion-card-content><h1>{{ result }}</h1></ion-card-content> <!-- mostra o resultado do scan -->
  </ion-card>
  
  <div class="scanner-ui"> <!-- Quando estamos a scanear, chama esta classe-->
    ...Scanner Interface
    </div>
    <div class="ad-spot"></div>
</ion-content>

#typescript #rasa

RASA TypeScript

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

#rasa #angular

RASA Angular Frontend

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

#rasa #typescript

RASA API Service

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

#rasa #typescript

Extra functions for RASA TypeScript

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

#rasa #typescript

Even more functions for RASA TypeScript

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

#rasa #typescript

Upload a file to RASA TypeScript

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

#rasa #html

RASA HTML for file upload

<!-- 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>

#typescript

Test

function Test(): void {
 console.log('test')
 }

#javascript #sort #typescript

Sort by boolean flags

const a = [
    {
        k: 1, me: false, prim: false
    }, {
        k: 2, me: false, prim: false
    }, {
        k: 3, me: false, prim: false
    }, {
        k: 4, me: false, prim: false
    }, {
        k: 5, me: true, prim: true
    }, {
        k: 6, me: false, prim: false
    }
]

a
    .sort((x, y) => (x.prim === y.prim) ? 0 : x.prim ? -1 : 1)
    .sort((x, y) => (x.me === y.me) ? 0 : x.me ? -1 : 1)

console.log(a)

Extra functions for RASA TypeScript

Save snippets that work from anywhere online with our extensions

Comments

More like this

RASA

Browse more snippets >>

Extra functions for RASA TypeScript

Save snippets that work from anywhere online with our extensions

Comments

More like this

RASA

Browse more snippets >>

Embed code snippet