tester-ai v0.0.25

ng-conversational-ui

NgConversationalUi is Cool !!

Install

$ npm install ng-conversational-ui

Usage

app.component.ts

import { Component } from '@angular/core';
import { Message } from 'dist/ng-conversational-ui/lib/api/message.interface';
import { SendMessageEvent } from 'dist/ng-conversational-ui/lib/api/send-message-event';
import { User } from 'dist/ng-conversational-ui/lib/api/user.interface';
import { from, merge, Observable, Subject } from 'rxjs';
import { map, scan } from 'rxjs/operators';
import { ChatService } from './chat.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ChatService],
})
export class AppComponent {

  feed: Observable<Message[]>;
  title = 'ngx-conversational-ui';
  user: User = { id: 1, name: 'Alexa' };
  operatorAvatarUrl:string = "assets/images/chat-bot.svg";
  visitorAvatarUrl:string = "assets/images/user.png";

  messages: Message[] = [
    {
      author: { id: 0,avatarUrl:this.operatorAvatarUrl },
      text: 'Hello',
      suggestedActions: [
        { type: 'reply', value: 'How are you?' },
        { type: 'reply', value: 'How is all going?' }
      ],
    },
    {
      author: { id: 1,avatarUrl:this.visitorAvatarUrl },
      text: 'Hi',
    },
  ];

  private local: Subject<Message> = new Subject<Message>();

  constructor(private svc: ChatService) {
    // Merge local and remote messages into a single stream
    this.feed = merge(
      from(this.messages),
      this.local,
      this.svc.response.pipe(
        map(
          (response): Message => ({
            author: { id: 0 ,avatarUrl:this.operatorAvatarUrl},
            text: response,
          })
        )
      )
    ).pipe(
      // ... and emit an array of all messages
      scan((acc: Message[], x: Message) => [...acc, x], [])
    );
  }

  sendMessage(e: SendMessageEvent) {
    const msg: Message = {
      author: { id: 0,avatarUrl:this.operatorAvatarUrl},
      typing: true,
      
    };
    this.local.next(e.message);
    setTimeout(() => {      
      this.local.next(msg);
    }, 1000);
    this.svc.submit(e.message.text ?? '');
  }
}

app.component.html

     <lib-ng-conversational-ui [user]="user" [messages]="feed | async" (sendMessage)="sendMessage($event)">
        </lib-ng-conversational-ui>