pmbanugo

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

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

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

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

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

  this.setState({
    messages: [...this.state.messages, message]
  });

pmbanugo

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

pmbanugo

addMessage = ({ message }) => {
  if (!this.user) {
    this.user = { name: message.text, id: Date.now().toString() };

    let newMessage = Object.assign({}, message);
    newMessage.text = `Welcome to the chat ${message.text}!`;
    newMessage.author = this.bot;

    this.setState({
      messages: [...this.state.messages, newMessage]

pmbanugo

<Chat
  user={this.user}
  messages={this.state.messages}
  onMessageSend={this.addMessage}
  placeholder={"Type here..."}
  width={400}
></Chat>

pmbanugo

constructor(props) {
  super(props);
  this.user = undefined;
  this.bot = { id: "0", name: "bot" };

  this.state = {
    messages: [
      {
          author: this.bot,
          timestamp: new Date(),

pmbanugo

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <h1>Conversational UI</h1>
        <Chat placeholder={"Type here..."} width={400}></Chat>
      </div>
    );
  }
}

pmbanugo

```
export const findShipments = (location, locationIsGeoLocation) => async (dispatch) => {
  dispatch(asyncRequest({reducerName}))
  const store = getStore()
  const promises = [
    store.shipment.find({location, locationIsGeoLocation})
  ]
  // If the location is a geo location we need to filter the shipments to only
  // include those that are valid locations for the users geo location. This way
  // we exclude shipments for locations that the user does not have the funder.