chat.js

import Talk from 'talkjs'

const uneeqPackage = require('uneeq-js');

import { evt, u, store } from '@/app/index.js'

const { qs } = u
const { dom } = store

const GET_TOKEN_URL = 'tokenurl'
const GET_CHATSESSION_URL = 'chatsessionurl'
const UNEEQ_URL = 'uneequrl'
const UNEEQ_CONVERSATION_ID = 'id'

export default class {
  ui = {}
  popup = null
  msg = {}

  constructor() {
    this.el = qs('.js-human')
    this.ui.container = qs('.js-human-vid')
    this.ui.local = qs('.js-human-local')
    this.ui.close = qs('.js-human-end')
    this.ui.msg = qs('.js-human-msg')

    this.msg.recording = 'Speaking...'
    this.msg.press = 'Press and hold space bar to speak'

    this.instance = null

    this.addEvents()
  }

  addEvents() {
    const { close } = this.ui
    
    evt.delegate('click', '.js-human-start', this.start)
    evt.on('click', close, this.end)    

    evt.on('keydown', document, this.startRecording)
    evt.on('keyup', document, this.stopRecording)
  }

  create() {
    this.instance = new uneeqPackage.Uneeq({
      url: UNEEQ_URL,
      conversationId: UNEEQ_CONVERSATION_ID,
      avatarVideoContainerElement: this.ui.container,
      localVideoContainerElement: this.ui.local,
      messageHandler: (msg) => this.handleMessage(msg),
      sendLocalVideo: false
    })

    fetch(GET_TOKEN_URL)
      .then((data) => data.json())
      .then((result) => {
          this.instance.initWithToken(result.token)
      })
      .catch( (err) => {
          console.error('Could not get a token. Is your token service running?', err)
      })

    fetch(GET_CHATSESSION_URL)
      .then((data) => data.json())
      .then((result) => {
        window.chatSession = result
      })
      .catch((err) => {
        console.error('Could not get chat session. Is your chat session service running?', err)
      })
  }

  start = () => {
    this.create()
    
    dom.body.classList.add('is-live')
  }

  end = () => {
    this.instance.endSession()
    this.instance = null

    this.popup.destroy()
    this.popup = null

    dom.body.classList.remove('is-live')
  }

  startRecording = ({ code, repeat, target }) => {
    if (this.instance && code === 'Space' && !repeat && target.type !== 'text') {
      console.log('Start recording')
      this.ui.msg.textContent = this.msg.recording
      this.instance.startRecording()
    }
  }

  stopRecording = ({ code, repeat, target }) => {
    if (this.instance && code === 'Space' && !repeat && target.type !== 'text') {
      console.log('Stop recording')
      this.ui.msg.textContent = this.msg.press
      this.instance.stopRecording()
    }
  }

  handleMessage(msg) {
    switch (msg.uneeqMessageType) {
      case 'SessionLive':
        this.ui.msg.textContent = this.msg.press
        this.el.classList.add('is-active')
        this.setupTalk()
        break;
      case 'AvatarQuestionText':
        break;
      case 'AvatarAnswer':
        break;
      default:
        console.log('uneeq-js: Unhandled message \'' + msg.uneeqMessageType + '\'', msg);
        break;
      }
  }

  setupTalk() {
    Talk.ready.then(() => {
      const users = window.chatSession.users
   
      // This is the customer end-user which we are viewing the chat as
      const me = new Talk.User({
        id: this.instance.sessionId,
        name: users[2].name,
        email: users[2].email,
        photoUrl: users[2].photoUrl,
        welcomeMessage: users[2].welcomeMessage
      })
      
      // Here we are 'logging' the 'me' user in to TalkJS
      window.talkSession = new Talk.Session({
        appId: window.chatSession.appId, me,
      })
      
      // Next we'll define the bot user 'Lydia'
      const botUser = new Talk.User({
        id: users[0].id,
        name: users[0].name,
        email: users[0].email,
        photoUrl: users[0].photoUrl,
        welcomeMessage: users[0].welcomeMessage
      })
      
      // And lastly we'll define the 'admin' user - "Veritas Funding"
      const adminUser = new Talk.User({
        id: users[1].id,
        name: users[1].name,
        email: users[1].email,
        photoUrl: users[1].photoUrl,
        welcomeMessage: users[1].welcomeMessage
      })

      const conversation = window.talkSession.getOrCreateConversation(this.instance.sessionId);

      conversation.setParticipant(me)
      conversation.setParticipant(botUser)
      conversation.setParticipant(adminUser)

      this.popup = window.talkSession.createPopup(conversation)
      this.popup.mount()
    })
  }
}