feat: NethVoice chat

package.json

@@ -45,8 +45,9 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^2.2.8",
     "@hookform/resolvers": "^3.3.4",
+    "@nethesis/chat-island": "^0.1.51",
     "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid",
-    "@nethesis/phone-island": "^1.0.15",
+    "@nethesis/phone-island": "^1.0.16",
     "@tailwindcss/forms": "^0.5.7",
     "@types/lodash": "^4.14.202",
     "@types/node": "^18.19.9",

public/locales/en/translations.json

@@ -699,6 +699,21 @@
     "Z-A label": "Z-A",
     "EXT label": "Extension"
   },
+  "Chat": {
+    "No longer active": "No longer active",
+    "Messages": "Messages",
+    "Chat": "Chat",
+    "New chat": "New chat",
+    "No conversations": "No conversations",
+    "No messages yet": "No messages yet",
+    "members": "members",
+    "You": "You",
+    "Delete": "Delete",
+    "Leave": "Leave",
+    "Delete confirm": "Delete the conversation with \"{{name}}\"? Your copy of the messages is removed.",
+    "Delete group confirm": "Delete the group \"{{name}}\" for everyone? Its messages are removed for all members.",
+    "Leave confirm": "Leave the group \"{{name}}\"? You stop receiving its messages and your copy is removed."
+  },
   "LastCalls": {
     "Last calls": "Last calls",
     "No calls": "No calls",
@@ -992,7 +1007,8 @@
   },
   "CommandBar": {
     "Placeholder": "Search contact or dial number...",
-    "Call": "Call"
+    "Call": "Call",
+    "Chat hint": "Chat (Ctrl/⌘+Enter)"
   },
   "Errors": {
     "browser_permissions": "Browser permissions error",

public/locales/it/translations.json

@@ -699,6 +699,21 @@
     "Z-A label": "Z-A",
     "EXT label": "Interno"
   },
+  "Chat": {
+    "No longer active": "Non più attivo",
+    "Messages": "Messaggi",
+    "Chat": "Chat",
+    "New chat": "Nuova chat",
+    "No conversations": "Nessuna conversazione",
+    "No messages yet": "Nessun messaggio",
+    "members": "membri",
+    "You": "Tu",
+    "Delete": "Elimina",
+    "Leave": "Abbandona",
+    "Delete confirm": "Eliminare la conversazione con \"{{name}}\"? La tua copia dei messaggi viene rimossa.",
+    "Delete group confirm": "Eliminare il gruppo \"{{name}}\" per tutti? I suoi messaggi vengono rimossi per tutti i membri.",
+    "Leave confirm": "Abbandonare il gruppo \"{{name}}\"? Non riceverai più i suoi messaggi e la tua copia viene rimossa."
+  },
   "LastCalls": {
     "Last calls": "Ultime chiamate",
     "No calls": "Nessuna chiamata",
@@ -992,7 +1007,8 @@
   },
   "CommandBar": {
     "Placeholder": "Cerca contatto o componi numero...",
-    "Call": "Chiama"
+    "Call": "Chiama",
+    "Chat hint": "Chat (Ctrl/⌘+Invio)"
   },
   "Errors": {
     "browser_permissions": "Errore nei permessi del browser",

src/main/classes/controllers/AppController.ts

@@ -1,6 +1,7 @@
 import { LoginController } from './LoginController'
 import { NethLinkController } from './NethLinkController'
 import { PhoneIslandController } from './PhoneIslandController'
+import { ChatIslandController } from './ChatIslandController'
 import { TrayController } from './TrayController'
 import { Log } from '@shared/utils/logger'
 import { DevToolsController } from './DevToolsController'
@@ -32,6 +33,11 @@ export class AppController {
           Log.warning('unable to correctly close the PhoneIslandController:', e)
         }
       }
+      try {
+        await ChatIslandController.instance?.safeQuit()
+      } catch (e) {
+        Log.warning('unable to correctly close the ChatIslandController:', e)
+      }
       if (NethLinkController.instance) {
         try {
           await NethLinkController.instance.safeQuit()

src/main/classes/controllers/ChatIslandController.ts

@@ -0,0 +1,201 @@
+import { ChatIslandWindow } from '../windows'
+import { Log } from '@shared/utils/logger'
+import { IPC_EVENTS } from '@shared/constants'
+import { screen } from 'electron'
+
+type Corner = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
+type Rect = { x: number; y: number; w: number; h: number }
+type Size = {
+  w: number
+  h: number
+  dock?: Rect
+  corner?: Corner
+  side?: number
+}
+
+// Between the window's edge and the dock: the island's right-4/left-4 and bottom-8/top-8.
+// The page may ask for more room at the sides (`side`): that part may stick out of the screen.
+const SIDE = 16
+const END = 32
+
+export class ChatIslandController {
+  static instance: ChatIslandController | undefined
+  window: ChatIslandWindow
+  private wantFocus = false
+  private focusTimer: ReturnType<typeof setTimeout> | undefined
+  // The work area's corner nearest the dock, and the window's distance from its two edges, kept after a drag.
+  private corner: Corner = 'bottom-right'
+  private anchor = { x: 0, y: 0 }
+  private displayId: number | undefined
+  private size: Size = { w: 0, h: 0 }
+  // While dragged the window keeps its size and only follows the cursor: resizes wait for the drop.
+  private drag: { w: number; h: number; x?: number; y?: number } | undefined
+  private through = false
+  // A new corner moves the dock to the window's other side: hidden until the island has drawn it there.
+  private flip: ReturnType<typeof setTimeout> | undefined
+
+  constructor() {
+    ChatIslandController.instance = this
+    this.window = new ChatIslandWindow()
+  }
+
+  // Sized to the island, grown from the corner nearest the dock; hidden when there is nothing to show.
+  resize(size: Size) {
+    try {
+      this.size = size
+      if (this.drag || (this.flip && size.corner !== this.corner)) return
+      // A reloaded island starts from the default corner: tell it the current one.
+      if (size.corner && size.corner !== this.corner)
+        this.window.emit(
+          IPC_EVENTS.CHAT_TO_ISLAND,
+          'chat-island-corner',
+          this.corner,
+        )
+      const window = this.window.getWindow()
+      if (!window) return
+      if (size.w < 8 || size.h < 8) {
+        window.hide()
+        return
+      }
+      const { x, y, width, height } = this.workArea()
+      const slack = (size.side ?? SIDE) - SIDE
+      const w = Math.min(Math.ceil(size.w), width + 2 * slack)
+      const h = Math.min(Math.ceil(size.h), height)
+      const left = this.corner.endsWith('left')
+        ? x + this.anchor.x - slack
+        : x + width - this.anchor.x + slack - w
+      const top = this.corner.startsWith('top')
+        ? y + this.anchor.y
+        : y + height - this.anchor.y - h
+      const was = window.getBounds()
+      window.setBounds({
+        x: Math.min(Math.max(x - slack, left), x + width + slack - w),
+        y: Math.min(Math.max(y, top), y + height - h),
+        width: w,
+        height: h,
+      })
+      // Same size: the page is already drawn for the new corner, only the window moved.
+      if (this.flip) this.reveal(was.width === w && was.height === h ? 0 : 32)
+      if (this.wantFocus) {
+        this.wantFocus = false
+        window.show()
+        window.focus()
+      } else if (!window.isVisible()) window.showInactive()
+    } catch (e) {
+      Log.warning('error during resizing ChatIslandWindow:', e)
+    }
+  }
+
+  // The display the dock was dropped on, while it is still connected; not the one most of the transparent window is on.
+  private workArea() {
+    const d = screen.getAllDisplays().find((d) => d.id === this.displayId)
+    return (d ?? screen.getPrimaryDisplay()).workArea
+  }
+
+  startDrag() {
+    const b = this.window.getWindow()?.getBounds()
+    if (!b) return
+    this.clickThrough(false)
+    this.drag = { w: b.width, h: b.height }
+  }
+
+  dragTo(x: number, y: number) {
+    const window = this.window.getWindow()
+    if (!window || !this.drag || (x === this.drag.x && y === this.drag.y))
+      return
+    this.drag.x = x
+    this.drag.y = y
+    window.setBounds({ x, y, width: this.drag.w, height: this.drag.h }, false)
+  }
+
+  stopDrag(moved: boolean) {
+    if (!this.drag) return
+    this.drag = undefined
+    if (moved) this.keepPosition()
+    else this.resize(this.size)
+  }
+
+  // Transparent parts let the mouse through; hover is still reported, so the page can take it back.
+  clickThrough(through: boolean) {
+    if (through === this.through || (through && this.drag)) return
+    this.through = through
+    this.window.getWindow()?.setIgnoreMouseEvents(through, { forward: true })
+  }
+
+  // After a drag: the corner nearest the dock is where the island grows from, as in the CTI.
+  keepPosition() {
+    const window = this.window.getWindow()
+    if (!window) return
+    const b = window.getBounds()
+    const side = this.size.side ?? SIDE
+    // The dock sits in the window's corner: its place follows from the bounds, only its size is measured.
+    const w = this.size.dock?.w ?? b.width - 2 * side
+    const h = this.size.dock?.h ?? b.height - 2 * END
+    const dock = {
+      x: this.corner.endsWith('left') ? b.x + side : b.x + b.width - side - w,
+      y: this.corner.startsWith('top') ? b.y + END : b.y + b.height - END - h,
+      w,
+      h,
+    }
+    this.displayId = screen.getDisplayNearestPoint({
+      x: Math.round(dock.x + w / 2),
+      y: Math.round(dock.y + h / 2),
+    }).id
+    const { x, y, width, height } = this.workArea()
+    const left = dock.x + dock.w / 2 < x + width / 2
+    const top = dock.y + dock.h / 2 < y + height / 2
+    const corner: Corner = `${top ? 'top' : 'bottom'}-${left ? 'left' : 'right'}`
+    this.anchor = {
+      x: Math.max(
+        0,
+        left ? dock.x - SIDE - x : x + width - dock.x - dock.w - SIDE,
+      ),
+      y: Math.max(
+        0,
+        top ? dock.y - END - y : y + height - dock.y - dock.h - END,
+      ),
+    }
+    // The dock alone in a symmetric window (as large on both sides) stays put when the corner changes.
+    const alone =
+      side > SIDE && b.width - 2 * side - w < 2 && b.height - 2 * END - h < 2
+    if (corner !== this.corner && alone) {
+      this.corner = corner
+      this.window.emit(IPC_EVENTS.CHAT_TO_ISLAND, 'chat-island-corner', corner)
+    } else if (corner !== this.corner) {
+      this.corner = corner
+      window.setOpacity(0)
+      // Placed by the island's next size, which carries the new corner; shown anyway if it never comes.
+      this.reveal(500, true)
+      this.window.emit(IPC_EVENTS.CHAT_TO_ISLAND, 'chat-island-corner', corner)
+      return
+    }
+    // Back inside the dock's screen, grown from its corner.
+    this.resize(this.size)
+  }
+
+  private reveal(ms: number, place = false) {
+    clearTimeout(this.flip)
+    const show = () => {
+      this.flip = undefined
+      if (place) this.resize(this.size)
+      this.window.getWindow()?.setOpacity(1)
+    }
+    if (ms) this.flip = setTimeout(show, ms)
+    else show()
+  }
+
+  // Focus once the island has sized the window for what it opens.
+  focus() {
+    const window = this.window.getWindow()
+    if (window?.isVisible()) window.focus()
+    // Only for the resize this open causes: a later one (a message growing the dock) must not steal focus.
+    this.wantFocus = true
+    clearTimeout(this.focusTimer)
+    this.focusTimer = setTimeout(() => (this.wantFocus = false), 1000)
+  }
+
+  async safeQuit() {
+    ChatIslandController.instance = undefined
+    await this.window.quit(true)
+  }
+}

src/main/classes/controllers/index.ts

@@ -4,3 +4,4 @@ export * from './PhoneIslandController'
 export * from './TrayController'
 export * from './DevToolsController'
 export * from './CommandBarController'
+export * from './ChatIslandController'

src/main/classes/windows/ChatIslandWindow.ts

@@ -0,0 +1,42 @@
+import { PAGES } from '@shared/types'
+import { BaseWindow } from './BaseWindow'
+
+// Transparent, always on top: the chat stays in view with NethLink closed.
+export class ChatIslandWindow extends BaseWindow {
+  constructor() {
+    super(PAGES.CHATISLAND, {
+      width: 440,
+      height: 600,
+      show: false,
+      focusable: true,
+      acceptFirstMouse: true,
+      fullscreenable: false,
+      autoHideMenuBar: true,
+      closable: false,
+      alwaysOnTop: true,
+      minimizable: false,
+      maximizable: false,
+      movable: false,
+      resizable: false,
+      skipTaskbar: true,
+      roundedCorners: false,
+      parent: undefined,
+      transparent: true,
+      hiddenInMissionControl: true,
+      hasShadow: false,
+      fullscreen: false,
+      enableLargerThanScreen: false,
+      frame: false,
+      thickFrame: false,
+      trafficLightPosition: { x: 0, y: 0 },
+      webPreferences: {
+        nodeIntegration: true,
+        backgroundThrottling: false,
+      },
+    })
+
+    this.addOnBuildListener(() => {
+      this.getWindow()?.setAlwaysOnTop(true, 'screen-saver')
+    })
+  }
+}

src/main/classes/windows/index.ts

@@ -4,3 +4,4 @@ export * from './NethLinkWindow'
 export * from './PhoneIslandWindow'
 export * from './DevToolsWindow'
 export * from './CommandBarWindow'
+export * from './ChatIslandWindow'