fix(ui): fix support for old version of assist proto

frontend/app/player/web/assist/AssistManager.ts

@@ -53,6 +53,7 @@ export function getStatusText(status: ConnectionStatus): string {
 const MAX_RECONNECTION_COUNT = 4;
 
 export default class AssistManager {
+  assistVersion = 1
   static readonly INITIAL_STATE = {
     peerConnectionStatus: ConnectionStatus.Connecting,
     assistStart: 0,
@@ -71,6 +72,8 @@ export default class AssistManager {
     public readonly uiErrorHandler?: { error: (msg: string) => void }
   ) {}
 
+  public getAssistVersion = () => this.assistVersion
+
   private get borderStyle() {
     const { recordingState, remoteControl } = this.store.get()
 
@@ -168,6 +171,8 @@ export default class AssistManager {
       })
 
       socket.on('messages', messages => {
+        if (messages.data !== undefined) this.assistVersion = 2
+
         const data = messages.data || messages
         jmr.append(data) // as RawMessage[]
         if (waitingForMessages) {
@@ -189,7 +194,8 @@ export default class AssistManager {
       socket.on('UPDATE_SESSION', (evData) => {
         const { meta = {}, data = {} } = evData
         const { tabId } = meta
-        const { active } = data
+        const usedData = this.assistVersion === 1 ? evData : data
+        const { active } = usedData
         const currentTab = this.store.get().currentTab
         this.clearDisconnectTimeout()
         !this.inactiveTimeout && this.setStatus(ConnectionStatus.Connected)
@@ -198,6 +204,9 @@ export default class AssistManager {
           if (active) {
             this.setStatus(ConnectionStatus.Connected)
           } else {
+            if (tabId === undefined) {
+              this.inactiveTimeout = setTimeout(() => this.setStatus(ConnectionStatus.Inactive), 5000)
+            }
             if (tabId === currentTab) {
               this.inactiveTimeout = setTimeout(() => this.setStatus(ConnectionStatus.Inactive), 5000)
             }
@@ -223,20 +232,23 @@ export default class AssistManager {
         socket,
         this.config,
         this.peerID,
+        this.getAssistVersion
       )
       this.remoteControl = new RemoteControl(
         this.store,
         socket,
         this.screen,
         this.session.agentInfo,
-        () => this.screen.setBorderStyle(this.borderStyle)
+        () => this.screen.setBorderStyle(this.borderStyle),
+        this.getAssistVersion,
       )
       this.screenRecording = new ScreenRecording(
         this.store,
         socket,
         this.session.agentInfo,
         () => this.screen.setBorderStyle(this.borderStyle),
-        this.uiErrorHandler
+        this.uiErrorHandler,
+        this.getAssistVersion,
       )
 
       document.addEventListener('visibilitychange', this.onVisChange)

frontend/app/player/web/assist/Call.ts

@@ -22,6 +22,7 @@ export interface State {
 }
 
 export default class Call {
+	private assistVersion = 1
 	static readonly INITIAL_STATE: Readonly<State> = {
 		calling: CallingState.NoCall
 	}
@@ -36,6 +37,7 @@ export default class Call {
 		private socket: Socket,
 		private config: RTCIceServer[] | null,
 		private peerID: string,
+		private getAssistVersion: () => number
 	) {
 		socket.on('call_end', this.onRemoteCallEnd)
 		socket.on('videofeed', ({ streamId, enabled }) => {
@@ -64,6 +66,7 @@ export default class Call {
     socket.on("disconnect", () => {
       this.store.update({ calling: CallingState.NoCall })
     })
+		this.assistVersion = this.getAssistVersion()
 	}
 
 	private getPeer(): Promise<Peer> {
@@ -170,7 +173,11 @@ export default class Call {
 	}
 
 	private emitData = (event: string, data?: any) => {
-		this.socket?.emit(event, { meta: { tabId: this.store.get().currentTab }, data })
+		if (this.assistVersion === 1) {
+			this.socket?.emit(event, data)
+		} else {
+			this.socket?.emit(event, { meta: { tabId: this.store.get().currentTab }, data })
+		}
 	}
 
 
@@ -231,8 +238,8 @@ export default class Call {
 		if (!this.store.get().currentTab) {
 			console.warn('No tab data to connect to peer')
 		}
-		console.log(tab)
-		void this._peerConnection(`${this.peerID}-${tab || Object.keys(this.store.get().tabs)[0]}`);
+		const peerId = this.assistVersion === 1 ? this.peerID : `${this.peerID}-${tab || Object.keys(this.store.get().tabs)[0]}`
+		void this._peerConnection(peerId);
 		this.emitData("_agent_name", appStore.getState().getIn([ 'user', 'account', 'name']))
 	}
 

frontend/app/player/web/assist/RemoteControl.ts

@@ -16,6 +16,7 @@ export interface State {
 }
 
 export default class RemoteControl {
+  private assistVersion = 1
 	static readonly INITIAL_STATE: Readonly<State> = {
 		remoteControl: RemoteControlStatus.Disabled,
 		annotating: false,
@@ -28,6 +29,7 @@ export default class RemoteControl {
 		private screen: Screen,
 		private agentInfo: Object,
 		private onToggle: (active: boolean) => void,
+    private getAssistVersion: () => number,
 	){
 		socket.on("control_granted", ({ meta, data }) => {
       this.toggleRemoteControl(data === socket.id)
@@ -47,6 +49,7 @@ export default class RemoteControl {
     socket.on("error", () => {
       this.toggleRemoteControl(false)
     })
+    this.assistVersion = getAssistVersion()
 	}
 
 	private onMouseMove = (e: MouseEvent): void => {
@@ -55,7 +58,11 @@ export default class RemoteControl {
   }
 
   private emitData = (event: string, data?: any) => {
-    this.socket.emit(event, { meta: { tabId: this.store.get().currentTab }, data })
+    if (this.assistVersion === 1) {
+      this.socket.emit(event, data)
+    } else {
+      this.socket.emit(event, { meta: { tabId: this.store.get().currentTab }, data })
+    }
   }
 
   private onWheel = (e: WheelEvent): void => {

frontend/app/player/web/assist/ScreenRecording.ts

@@ -14,6 +14,7 @@ export interface State {
 }
 
 export default class ScreenRecording {
+  private assistVersion = 1
   onDeny: () => void = () => {}
 	static readonly INITIAL_STATE: Readonly<State> = {
 		recordingState: SessionRecordingStatus.Off,
@@ -23,7 +24,8 @@ export default class ScreenRecording {
 		private socket: Socket,
 		private agentInfo: Object,
 		private onToggle: (active: boolean) => void,
-    public readonly uiErrorHandler: { error: (msg: string) => void } | undefined
+    public readonly uiErrorHandler: { error: (msg: string) => void } | undefined,
+    private getAssistVersion: () => number
 	) {
 		socket.on('recording_accepted', () => {
       this.toggleRecording(true)
@@ -35,6 +37,8 @@ export default class ScreenRecording {
     socket.on('recording_busy', () => {
       this.onRecordingBusy()
     })
+
+    this.assistVersion = getAssistVersion()
 	}
 
 	private onRecordingBusy = () => {
@@ -55,7 +59,11 @@ export default class ScreenRecording {
   }
 
   private emitData = (event: string, data?: any) => {
-    this.socket.emit(event, { meta: { tabId: this.store.get().currentTab }, data })
+    if (this.assistVersion === 1) {
+      this.socket.emit(event, data)
+    } else {
+      this.socket.emit(event, { meta: { tabId: this.store.get().currentTab }, data })
+    }
   }
 
   stopRecording = () => {