Add the first version of Bridget, the AI agent (#119)

* Fix an issue that misplaced context menus when running in a web browser

Signed-off-by: Axel Boberg <git@axelboberg.se>

* Use server time for time displays in the rundown

Signed-off-by: Axel Boberg <git@axelboberg.se>

* Fix an issue where the clipboard isn't available in a insecure contexts

Signed-off-by: Axel Boberg <git@axelboberg.se>

* Start preparing for server deployments

Signed-off-by: Axel Boberg <git@axelboberg.se>

* Catch plugin initialization errors

Signed-off-by: Axel Boberg <git@axelboberg.se>

* Add a default tab for the new agent mode

Signed-off-by: Axel Boberg <git@axelboberg.se>

* Allow plugins to use warnings in settings

Signed-off-by: Axel Boberg <git@axelboberg.se>

* Set a default font size for h4 headings

Signed-off-by: Axel Boberg <git@axelboberg.se>

* Add the first version of the ai agent

Signed-off-by: Axel Boberg <git@axelboberg.se>

* Update dependencies

Signed-off-by: Axel Boberg <git@axelboberg.se>

* Add AI to the feature list

Signed-off-by: Axel Boberg <git@axelboberg.se>

---------

Signed-off-by: Axel Boberg <git@axelboberg.se>

Author: axelboberg

.dockerignore

@@ -1 +1,3 @@
-.git
+.git
+assets.json
+node_modules

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 1.0.0-beta.11 [UNRELEASED]
+### Added
+- An AI agent
+- A `bridge.time.now()` api for getting the current server time
+### Fixed
+- An issue where context menues wouldn't be properly placed when running in a web browser
+- An issue where time displays in the rundown didn't sync with the server time
+- The clipboard isn't available in insecure contexts
+- Updated dependencies
+
 ## 1.0.0-beta.10
 ### Added
 - Human/AI readable descriptors for types

Dockerfile

@@ -1,13 +1,19 @@
 # The first stage will
 # build the app into /app
-FROM node:14.16.0-alpine3.10
+FROM node:24-trixie
+
+# RUN apk add --update --no-cache python3 make g++
+
 WORKDIR /app
 
 COPY package*.json ./
+COPY plugins/* ./plugins/
+COPY scripts/* ./scripts/
 
 RUN npm ci
 
 COPY . ./
+
 RUN npm run build
 
 CMD ["npm", "start"]
@@ -16,7 +22,7 @@ CMD ["npm", "start"]
 # to force-squash the history
 # and prevent any tokens
 # from leaking out
-FROM node:14.16.0-alpine3.10
+FROM node:24-trixie
 WORKDIR /app
 
 COPY --from=0 /app /app

README.md

@@ -5,7 +5,7 @@
 [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 [![REUSE status](https://api.reuse.software/badge/github.com/svt/bridge)](https://api.reuse.software/info/github.com/svt/bridge)  
 
-Playout control software that can be customized to fit your needs.  
+AI-powered playout control software that can be customized to fit your needs.  
 Developed for CasparCG but can control anything that supports OSC.
 
 ![Screenshot](/media/screenshot.png)
@@ -46,6 +46,7 @@ The roadmap is available on Notion
 - CasparCG library, playout and templates
 - LTC timecode triggers
 - Keyboard triggers
+- Built in AI-agent
 
 ## Community plugins  
 - [CRON - triggers based on the time of day](https://github.com/axelboberg/bridge-plugin-cron)

api/browser/clipboard.js

@@ -7,6 +7,8 @@ const DIController = require('../../shared/DIController')
 const InvalidArgumentError = require('../error/InvalidArgumentError')
 
 class Clipboard {
+  #copiedContent
+
   /**
    * Write a string into the clipboard
    * @param { String } str A string to write
@@ -17,7 +19,17 @@ class Clipboard {
       throw new InvalidArgumentError('Provided text is not a string and cannot be written to the clipboard')
     }
 
-    return navigator.clipboard.writeText(str)
+    if (navigator.clipboard) {
+      return navigator.clipboard.writeText(str)
+    }
+
+    /*
+    Fall back to using an internal
+    property as store if navigator.clipboard
+    is not available (it isn't in insecure contexts)
+    */
+    this.#copiedContent = str
+    return Promise.resolve(true)
   }
 
   /**
@@ -27,7 +39,10 @@ class Clipboard {
    * @returns { Promise.<string> }
    */
   readText () {
-    return navigator.clipboard.readText()
+    if (navigator.clipboard) {
+      return navigator.clipboard.readText()
+    }
+    return Promise.resolve(this.#copiedContent)
   }
 
   /**

api/browser/ui/contextMenu.js

@@ -103,6 +103,35 @@ class UIContextMenu {
     this.#openedAt = Date.now()
     this.#props.Events.emitLocally('ui.contextMenu.open', spec, opts)
   }
+
+  /**
+   * Get the event position for use
+   * when opening a context menu
+   * @param { PointerEvent } e
+   * @returns
+   */
+  getPositionFromEvent (e) {
+    if (Object.prototype.hasOwnProperty.call(e.nativeEvent, 'pointerType')) {
+      throw new InvalidArgumentError('Provided event is not of type PointerEvent')
+    }
+
+    /*
+    Find the root element, either an encapsulating
+    iframe or the body and use its position
+    as offset for the event
+    */
+    let rootEl = e?.target?.ownerDocument?.defaultView?.frameElement
+    if (!rootEl) {
+      rootEl = document.body
+    }
+
+    const bounds = rootEl.getBoundingClientRect()
+
+    return {
+      x: e.clientX + bounds.x,
+      y: e.clientY + bounds.y
+    }
+  }
 }
 
 DIController.main.register('UIContextMenu', UIContextMenu, [

api/time.js

@@ -4,9 +4,15 @@
 
 const DIController = require('../shared/DIController')
 
+const SERVER_TIME_TTL_MS = 10000
+
 class Time {
   #props
 
+  #serverTime
+  #serverTimeUpdatedAt
+  #serverTimePromise
+
   constructor (props) {
     this.#props = props
   }
@@ -30,10 +36,65 @@ class Time {
   submitFrame (id, frame) {
     return this.#props.Commands.executeRawCommand('time.submitFrame', id, frame)
   }
+
+  /**
+   * Update the record of
+   * the current server time
+   *
+   * This will set the #serverTime and #serverTimeUpdatedAt
+   * properties, allowing the client to return the correct time
+   * accordingly
+   *
+   * @returns { Promise.<void> }
+   */
+  async #updateServerTime () {
+    /*
+    Skip updating if it's already trying
+    to update to avoid multiple requests
+    */
+    if (this.#serverTimePromise) {
+      return this.#serverTimePromise
+    }
+
+    /*
+    Resolve immediately if the local
+    time hasn't become outdated
+    */
+    if (this.#serverTimeUpdatedAt && (Date.now() - this.#serverTimeUpdatedAt) < SERVER_TIME_TTL_MS) {
+      return Promise.resolve()
+    }
+
+    this.#serverTimePromise = new Promise((resolve, reject) => {
+      const start = Date.now()
+      this.#props.Commands.executeCommand('time.getServerTime')
+        .then(now => {
+          const roundtripDur = Date.now() - start
+          this.#serverTime = now + Math.round(roundtripDur / 2)
+          this.#serverTimeUpdatedAt = Date.now()
+          resolve()
+        })
+        .catch(err => {
+          this.#serverTimeUpdatedAt = Date.now()
+          reject(err)
+        })
+        .finally(() => {
+          this.#serverTimePromise = undefined
+        })
+    })
+    return this.#serverTimePromise
+  }
+
+  /**
+   * Get the current time according to the server,
+   * compensating for latency and clock drift
+   * @returns { Promise.<number> }
+   */
+  async now (id) {
+    await this.#updateServerTime()
+    return this.#serverTime + (Date.now() - this.#serverTimeUpdatedAt)
+  }
 }
 
 DIController.main.register('Time', Time, [
-  'State',
-  'Events',
   'Commands'
 ])

api/time.unit.test.js

@@ -0,0 +1,24 @@
+require('./time')
+
+const DIController = require('../shared/DIController')
+
+let time
+beforeAll(() => {
+  time = DIController.main.instantiate('Time', {
+    Commands: {
+      executeCommand: command => {
+        if (command === 'time.getServerTime') {
+          return Promise.resolve(Date.now())
+        }
+      },
+      executeRawCommand: () => {}
+    }
+  })
+})
+
+test('get the server time', async () => {
+  const value = await time.now()
+  const now = Date.now()
+  expect(value).toBeGreaterThanOrEqual(now - 100)
+  expect(value).toBeLessThan(now + 100)
+})

app/bridge.css

@@ -145,6 +145,7 @@ h3, .u-heading--3 {
 }
 
 h4, .u-heading--4 {
+  font-size: 1em;
   margin: 0.2em 0;
 }
 

app/components/ContextMenuBoundary/index.jsx

@@ -22,20 +22,6 @@ function isNumber (x) {
   return typeof x === 'number' && !Number.isNaN(x)
 }
 
-function getScreenCoordinates () {
-  return {
-    x: window.screenLeft,
-    y: window.screenTop
-  }
-}
-
-function convertToPageCoordinates (ctxX, ctxY, screenX, screenY) {
-  return {
-    x: ctxX - screenX,
-    y: ctxY - screenY
-  }
-}
-
 function sanitizeItemSpec (spec) {
   const out = {}
   for (const property of ALLOWED_SPEC_PROPERTIES) {
@@ -90,12 +76,9 @@ export function ContextMenuBoundary ({ children }) {
         return
       }
 
-      const screenCoords = getScreenCoordinates()
-      const pageCoords = convertToPageCoordinates(opts.x, opts.y, screenCoords.x, screenCoords.y)
-
       setContextPos({
-        x: Math.max(pageCoords.x, 0),
-        y: Math.max(pageCoords.y, 0)
+        x: Math.max(opts.x, 0),
+        y: Math.max(opts.y, 0)
       })
 
       setOpts(opts)