pmbanugo

import React from "react";
import "./App.css";
import "@progress/kendo-theme-default/dist/all.css";
import { Chat } from "@progress/kendo-react-conversational-ui";
import { StreamChat } from "stream-chat";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.user = undefined;

pmbanugo

import { Component } from "@angular/core";
import {
  Message,
  User,
  SendMessageEvent
} from "@progress/kendo-angular-conversational-ui";
import { StreamChat, Channel } from "stream-chat";

@Component({
  selector: "app-root",

pmbanugo

onNewMessage = event => {
  let message = {
    text: event.message.text,
    author: event.message.user,
    timestamp: event.message.created_at
  };

  this.messages = [...this.messages, message];
};

pmbanugo

  private conversation: Channel;

  async initialiseChatClient(): Promise<void> {
    const response = await fetch("http://localhost:8080/v1/token", {
      method: "POST",
      mode: "cors",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({

pmbanugo

<kendo-chat
  [messages]="messages"
  [user]="user"
  (sendMessage)="sendMessage($event)"
></kendo-chat>

pmbanugo

sendMessage(e: SendMessageEvent): void {
    const message = e.message;
    if (!this.user.name) {
        this.user.name = message.text;
        let newMessage = Object.assign({}, message);
        newMessage.text = `Welcome to the chat ${message.text}!`;
        newMessage.author = this.bot;

        this.messages = [...this.messages, newMessage];
    } else {

pmbanugo

export class AppComponent {
  readonly bot: User = {
    id: 0,
    name: "bot"
  };
  user: User = { id: Date.now().toString() };

  messages: Message[] = [
    {
      author: this.bot,

pmbanugo

<div style="text-align:center">
  <h1>Conversational UI</h1>
</div>
<kendo-chat [messages]="messages" [user]="user"></kendo-chat>

pmbanugo

  componentDidMount() {
    this.askNotificationPermission();
  }

  askNotificationPermission = async () => {
    // check if the browser supports notifications
    if ("Notification" in window) {
      if (this.checkNotificationPromise()) {
        const permission = await Notification.requestPermission();
        this.handlePermission(permission);

pmbanugo

  checkNotificationPromise() {
    try {
      Notification.requestPermission().then();
    } catch (e) {
      return false;
    }

    return true;
  }