feat(test-ui): update testing ui for new socket (#224)

* user token start * tests * refactor auth * caching * api * fix test * comment * expiry * batching * remove user token implementation * Revert "remove user token implementation" This reverts commit 1e1dd78. * refact auth * remove file * fix * refact client auth function * refact function * refact * fix * remove file * end turn route * responses * return message also * use cache for collectors * hintRespondingTo * incomingId * bump messaging client * turn id * collect flag * fix ui * backend validate user token is correct * schema * socket auth * update testing ui * bring changes * remove user token api * remove user token api * revert * remove correct user token api * bring changes * extract constant * verifyToken * fix tests * users.get * socket prevent lost requests * conversations socket * some refact and changes * refact schema validation * refact user rights check * remove nonsense * socket refact * move socket code at of api start * socket root class * remove private * refact schema * fix * fix * dont server client * remove ui from changes * update ui * custom timeout * fix * better socket * better socket * bring changes * fix * fix * tests start * fix * more tests * tests * pr comments * fix * comments
botpress · Oct 29, 2021 · 326f65e · 326f65e
1 parent 4c1141e
commit 326f65e
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 28 deletions.
diff --git a/packages/board/src/app.ts b/packages/board/src/app.ts
@@ -1,4 +1,5 @@
 import { BoardLinker } from './linker'
+import 'regenerator-runtime/runtime'
 
 new BoardLinker(
   document.getElementById('board-linker')!,

diff --git a/packages/board/src/linker.ts b/packages/board/src/linker.ts
@@ -8,6 +8,7 @@ export class BoardLinker {
   private inputHost!: HTMLInputElement
   private inputClientId!: HTMLInputElement
   private inputUserId!: HTMLInputElement
+  private inputUserToken!: HTMLInputElement
   private inputConversationId!: HTMLInputElement
 
   private webchat?: Webchat
@@ -59,6 +60,16 @@ export class BoardLinker {
           input.name = 'bp-userId-input'
         })
         element('br', form)
+        element('label', form, (label) => {
+          label.htmlFor = 'bp-userToken-input'
+          text('userToken', label)
+        })
+        element('br', form)
+        this.inputUserToken = element('input', form, (input) => {
+          input.type = 'text'
+          input.name = 'bp-userToken-input'
+        })
+        element('br', form)
         element('label', form, (label) => {
           label.htmlFor = 'bp-conversationId-input'
           text('conversationId', label)
@@ -73,7 +84,8 @@ export class BoardLinker {
           text('Link', button)
         })
 
-        form.onsubmit = () => {
+        form.onsubmit = (e) => {
+          e.preventDefault()
           void this.create()
           return false
         }
@@ -114,7 +126,18 @@ export class BoardLinker {
 
     if (this.inputUserId.value.length) {
       this.webchat.user.events.on(UserEvents.Choose, async (e) => {
-        e.choice = this.inputUserId.value
+        if (!e.choice) {
+          e.choice = <any>{}
+        }
+        e.choice!.userId = this.inputUserToken.value
+      })
+    }
+    if (this.inputUserToken.value.length) {
+      this.webchat.user.events.on(UserEvents.Choose, async (e) => {
+        if (!e.choice) {
+          e.choice = <any>{}
+        }
+        e.choice!.userToken = this.inputUserToken.value
       })
     }
     if (this.inputConversationId.value.length) {
@@ -123,7 +146,7 @@ export class BoardLinker {
       })
     }
 
-    this.webchat.socket.com.events.on(SocketComEvents.Connect, async (e) => {
+    this.webchat.socket.on('connect', async () => {
       localStorage.setItem('bp-host', host)
       this.inputHost.placeholder = host
       this.inputHost.value = ''
@@ -132,8 +155,11 @@ export class BoardLinker {
     this.inputClientId.placeholder = clientId
     this.webchat.user.events.on(UserEvents.Set, async (e) => {
       localStorage.setItem('bp-board-client', clientId)
-      this.inputUserId.placeholder = e.value?.id || ''
+      this.inputUserId.placeholder = e.value?.userId || ''
       this.inputUserId.value = ''
+
+      this.inputUserToken.placeholder = e.value?.userToken || ''
+      this.inputUserToken.value = ''
     })
     this.webchat.conversation.events.on(ConversationEvents.Set, async (e) => {
       this.inputConversationId.placeholder = e.value?.id || ''

diff --git a/packages/board/src/watcher.ts b/packages/board/src/watcher.ts
@@ -4,6 +4,7 @@ import { UserEvents, UserSetEvent } from '@botpress/webchat/src/user/events'
 
 export class BoardWatcher {
   private textUserId!: Text
+  private textUserToken!: Text
   private textConversationId!: Text
 
   constructor(private parent: HTMLElement, private webchat: Webchat) {
@@ -31,6 +32,12 @@ export class BoardWatcher {
           })
           this.textUserId = text('', li)
         })
+        element('li', ul, (li) => {
+          element('code', li, (code) => {
+            text('userToken ', code)
+          })
+          this.textUserToken = text('', li)
+        })
         element('li', ul, (li) => {
           element('code', li, (code) => {
             text('conversationId ', code)
@@ -47,7 +54,8 @@ export class BoardWatcher {
   }
 
   private async handleUserSet(e: UserSetEvent) {
-    this.textUserId.textContent = e.value?.id || ''
+    this.textUserId.textContent = e.value?.userId || ''
+    this.textUserToken.textContent = e.value?.userToken || ''
   }
 
   private async handleConversationSet(e: ConversationSetEvent) {

diff --git a/packages/chat/src/chat.ts b/packages/chat/src/chat.ts
@@ -19,7 +19,7 @@ export class Webchat {
     this.storage = new WebchatStorage()
     this.locale = new WebchateLocale()
     this.lang = new WebchatLang(this.locale)
-    this.socket = new MessagingSocket({ url, clientId, manualConnect: true })
+    this.socket = new MessagingSocket({ url, clientId })
     this.user = new WebchatUser(this.storage, this.socket)
     this.conversation = new WebchatConversation(this.storage, this.socket)
     this.messages = new WebchatMessages(this.socket, this.conversation)
@@ -29,13 +29,13 @@ export class Webchat {
     await this.storage.setup()
     await this.locale.setup()
     await this.lang.setup()
-    await this.socket.com.connect()
+    await this.socket.connect({ autoLogin: false })
     await this.user.setup()
     await this.conversation.setup()
     await this.messages.setup()
   }
 
   public async destroy() {
-    this.socket.com.disconnect()
+    this.socket.disconnect()
   }
 }
diff --git a/packages/chat/src/conversation/system.ts b/packages/chat/src/conversation/system.ts
@@ -22,7 +22,13 @@ export class WebchatConversation extends WebchatSystem {
     const event = { choice: saved }
     await this.emitter.emit(ConversationEvents.Choose, event)
 
-    const conversation = await this.socket.conversations.use(event.choice)
+    let conversation = event.choice && (await this.socket.getConversation(event.choice))
+    if (!conversation) {
+      conversation = await this.socket.createConversation()
+    } else {
+      this.socket.switchConversation(conversation.id)
+    }
+
     this.storage.set(STORAGE_ID, conversation.id)
 
     await this.set(conversation!)

diff --git a/packages/chat/src/messages/system.ts b/packages/chat/src/messages/system.ts
@@ -19,15 +19,13 @@ export class WebchatMessages extends WebchatSystem {
   }
 
   private async setupMessageReception() {
-    this.socket.com.events.on(SocketComEvents.Message, async (message) => {
-      if (message.type === 'message.new') {
-        await this.emitter.emit(MessagesEvents.Receive, [message.data.data.message])
-      }
+    this.socket.on('message', async (message) => {
+      await this.emitter.emit(MessagesEvents.Receive, [message])
     })
   }
 
   private async setupInitialMessages() {
-    const messages = await this.socket.messages.list(this.conversation.get()!.id, 20)
+    const messages = await this.socket.listMessages()
     await this.emitter.emit(MessagesEvents.Receive, messages.reverse())
   }
 
@@ -38,7 +36,7 @@ export class WebchatMessages extends WebchatSystem {
     }
     await this.emitter.emit(MessagesEvents.Send, [payload])
 
-    const message = await this.socket.messages.create(this.conversation.get()!.id, payload)
+    const message = await this.socket.sendPayload(payload)
     await this.emitter.emit(MessagesEvents.Receive, [message])
     return message
   }

diff --git a/packages/chat/src/user/events.ts b/packages/chat/src/user/events.ts
@@ -1,17 +1,18 @@
-import { Emitter, User, uuid } from '@botpress/messaging-base'
+import { Emitter, uuid } from '@botpress/messaging-base'
+import { UserCredentials } from '@botpress/messaging-socket'
 
 export enum UserEvents {
   Choose = 'choose',
   Set = 'set'
 }
 
 export interface UserSetEvent {
-  previous: User | undefined
-  value: User | undefined
+  previous: UserCredentials | undefined
+  value: UserCredentials | undefined
 }
 
 export interface UserChooseEvent {
-  choice: uuid | undefined
+  choice: UserCredentials | undefined
 }
 
 export class UserEmitter extends Emitter<{

diff --git a/packages/chat/src/user/system.ts b/packages/chat/src/user/system.ts
@@ -1,13 +1,13 @@
 import { User, uuid } from '@botpress/messaging-base'
-import { MessagingSocket } from '@botpress/messaging-socket'
+import { MessagingSocket, UserCredentials } from '@botpress/messaging-socket'
 import { WebchatSystem } from '../base/system'
 import { WebchatStorage } from '../storage/system'
 import { UserEmitter, UserEvents, UserWatcher } from './events'
 
 export class WebchatUser extends WebchatSystem {
   public readonly events: UserWatcher
   private readonly emitter: UserEmitter
-  private current?: User
+  private current?: UserCredentials
 
   constructor(private storage: WebchatStorage, private socket: MessagingSocket) {
     super()
@@ -17,13 +17,13 @@ export class WebchatUser extends WebchatSystem {
 
   async setup() {
     const STORAGE_ID = 'saved-user'
-    const saved = this.storage.get<uuid>(STORAGE_ID)
+    const saved = this.storage.get<UserCredentials>(STORAGE_ID)
 
     const event = { choice: saved }
     await this.emitter.emit(UserEvents.Choose, event)
 
-    const user = await this.socket.users.auth(event.choice, 'abc123')
-    this.storage.set(STORAGE_ID, user.id)
+    const user = await this.socket.login(event.choice)
+    this.storage.set(STORAGE_ID, user)
 
     await this.set(user)
   }
@@ -32,7 +32,7 @@ export class WebchatUser extends WebchatSystem {
     return this.current
   }
 
-  async set(value: User) {
+  async set(value: UserCredentials) {
     const previous = this.current
     this.current = value
     await this.emitter.emit(UserEvents.Set, { previous, value })

diff --git a/packages/skin/src/render.ts b/packages/skin/src/render.ts
@@ -59,7 +59,9 @@ export class WebchatRenderer {
           input.type = 'text'
           input.name = 'bp-message-input'
 
-          form.onsubmit = () => {
+          form.onsubmit = (e) => {
+            e.preventDefault()
+
             if (input.value.trim().length) {
               void this.webchat.messages.send(input.value.trim())
             }

diff --git a/packages/socket/src/socket.ts b/packages/socket/src/socket.ts
@@ -35,14 +35,17 @@ export class MessagingSocket extends SocketEmitter<{
 
     this.com.events.on(SocketComEvents.Message, async (e) => {
       if (e.type === 'message.new') {
-        await this.emit('message', e.data.data.message)
+        await this.emit('message', e.data.message)
       }
     })
+
+    this.com.events.on(SocketComEvents.Connect, async (e) => {
+      await this.emit('connect', undefined)
+    })
   }
 
   async connect(options?: { autoLogin: boolean; creds?: UserCredentials }) {
     this.com.connect()
-    await this.emit('connect', undefined)
 
     if (options?.autoLogin !== false) {
       await this.login(options?.creds)