VYZN: Matrix Messaging Integration

.gitignore

@@ -7,7 +7,10 @@
 # misc
 .DS_Store
 .vscode
+.idea
 *.log
 
 cypress/videos
 cypress/screenshots
+
+.idea

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r501",
+  "version": "1.0.0-r530",
   "main": "src/index.jsx",
   "homepage": "https://github.com/bldrs-ai/Share",
   "bugs": {
@@ -34,6 +34,7 @@
     "@mui/styles": "^5.9.2",
     "@octokit/rest": "^19.0.3",
     "clsx": "^1.2.1",
+    "matrix-widget-api": "^1.1.1",
     "normalize.css": "^8.0.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

src/BaseRoutes.jsx

@@ -2,7 +2,7 @@ import React, {useEffect} from 'react'
 import {Outlet, Route, Routes, useLocation, useNavigate} from 'react-router-dom'
 import ShareRoutes from './ShareRoutes'
 import debug from './utils/debug'
-
+import useStore from './store/useStore'
 
 /**
  * From URL design: https://github.com/bldrs-ai/Share/wiki/URL-Structure
@@ -24,14 +24,19 @@ export default function BaseRoutes({testElt = null}) {
   const navigation = useNavigate()
   const installPrefix = window.location.pathname.startsWith('/Share') ? '/Share' : ''
   const basePath = `${installPrefix }/`
+  const widgetApiUri = useStore((state) => state.widgetApiUri)
 
   useEffect(() => {
     if (location.pathname === installPrefix ||
         location.pathname === basePath) {
       debug().log('BaseRoutes#useEffect[], forwarding to: ', `${installPrefix }/share`)
       navigation(`${installPrefix }/share`)
     }
-  }, [basePath, installPrefix, location, navigation])
+    if (widgetApiUri) {
+      navigation(widgetApiUri)
+    }
+
+  }, [basePath, installPrefix, location, navigation, widgetApiUri])
 
   return (
     <Routes>

src/WidgetApi/ApiConnection.js

@@ -0,0 +1,26 @@
+class AbstractApiConnection {
+
+    on(event, callable) {
+    }
+
+    start() {
+    }
+
+    stop() {
+    }
+
+    missingArgumentResponse = function (argumentName) {
+        return {
+            'error': true,
+            'reason': `Missing argument ${argumentName}`
+        }
+    }
+    successfulResponse = function (data) {
+        return {
+            'error': false,
+            ...data
+        }
+    }
+}
+
+export default AbstractApiConnection

src/WidgetApi/ApiConnectionIframe.js

@@ -0,0 +1,34 @@
+import {WidgetApi as MatrixWidgetApi} from "matrix-widget-api/lib/WidgetApi"
+import AbstractApiConnection from "./ApiConnection";
+
+class ApiConnectionIframe extends AbstractApiConnection{
+    widgetId = 'bldrs-share'
+    matrixWidgetApi = null
+
+    constructor() {
+        super();
+        this.matrixWidgetApi = new MatrixWidgetApi(this.widgetId)
+        this.matrixWidgetApi.requestCapabilities([])
+    }
+
+    on(eventName, callable) {
+        this.matrixWidgetApi.on(
+            eventName,
+            (event) => {
+                event.preventDefault();
+                let response = callable(event.detail.data)
+                this.matrixWidgetApi.transport.reply(event.detail, response)
+            }
+        )
+    }
+
+    start() {
+        this.matrixWidgetApi.start()
+    }
+
+    stop() {
+        this.matrixWidgetApi.stop()
+    }
+}
+
+export default ApiConnectionIframe

src/WidgetApi/ApiEventsRegistry.js

@@ -0,0 +1,51 @@
+import useStore from '../store/useStore'
+
+const EVENT_LOAD_MODEL = 'action:ai.bldrs-share.loadModel'
+const EVENT_HIGHLIGHT_ELEMENTS = 'action:ai.bldrs-share.highlightElements'
+
+class ApiEventsRegistry {
+
+    apiConnection = null
+
+    constructor(apiConnection) {
+        this.apiConnection = apiConnection
+        this.registerEventHandlers()
+    }
+
+    EVENT_HANDLER_LOAD_MODEL = (data) => {
+        if (!('githubIfcPath' in data)) {
+            return this.apiConnection.missingArgumentResponse('githubIfcPath')
+        }
+        useStore.setState({ widgetApiUri: '/share/v/gh/' + data.githubIfcPath })
+        return this.apiConnection.successfulResponse()
+    }
+
+    EVENT_HANDLER_HIGHLIGHT_ELEMENTS = (data) => {
+        if (!('githubIfcPath' in data)) {
+            return this.apiConnection.missingArgumentResponse('githubIfcPath')
+        }
+        if (!('globalIds' in data)) {
+            return this.apiConnection.missingArgumentResponse('globalIds')
+        }
+        if (data.globalIds.length) {
+            useStore.setState({ widgetApiUri: '/share/v/gh/' + data.githubIfcPath + '/' + data.globalIds[0] })
+        } else {
+            useStore.setState({ widgetApiUri: '/share/v/gh/' + data.githubIfcPath })
+        }
+
+        return this.apiConnection.successfulResponse()
+    }
+
+    EVENT_HANDLER_MAP = {
+        [EVENT_LOAD_MODEL]: this.EVENT_HANDLER_LOAD_MODEL,
+        [EVENT_HIGHLIGHT_ELEMENTS]: this.EVENT_HANDLER_HIGHLIGHT_ELEMENTS
+    }
+
+    registerEventHandlers = () => {
+        for (const [eventName, callable] of Object.entries(this.EVENT_HANDLER_MAP)) {
+            this.apiConnection.on(eventName, callable)
+        }
+    }
+}
+
+export default ApiEventsRegistry

src/WidgetApi/WidgetApi.js

@@ -0,0 +1,23 @@
+import ApiConnectionIframe from "./ApiConnectionIframe";
+import ApiEventsRegistry from "./ApiEventsRegistry";
+
+class WidgetApi {
+
+    constructor() {
+        if (this.detectIframe()) {
+            let apiConnection = new ApiConnectionIframe()
+            new ApiEventsRegistry(apiConnection)
+            apiConnection.start()
+        }
+    }
+
+    detectIframe () {
+        try {
+            return window.self !== window.top;
+        } catch (e) {
+            return true;
+        }
+    }
+}
+
+export default WidgetApi

src/index.jsx

@@ -2,9 +2,12 @@ import React from 'react'
 import {createRoot} from 'react-dom/client'
 import {BrowserRouter} from 'react-router-dom'
 import BaseRoutes from './BaseRoutes'
-
+import WidgetApi from "./WidgetApi/WidgetApi";
 
 const root = createRoot(document.getElementById('root'))
+
+new WidgetApi()
+
 root.render(
     <BrowserRouter>
       <BaseRoutes/>

src/store/useStore.js

@@ -6,6 +6,7 @@ import createRepositorySlice from './RepositorySlice'
 
 
 const useStore = create((set, get) => ({
+  widgetApiUri: null,
   ...createIFCSlice(set, get),
   ...createIssuesSlice(set, get),
   ...createRepositorySlice(set, get),

yarn.lock

@@ -3379,6 +3379,11 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40"
   integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==
 
+"@types/events@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
+  integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==
+
 "@types/glob@*", "@types/glob@^7.1.1":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.2.0.tgz#bc1b5bf3aa92f25bd5dd39f35c57361bdce5b2eb"
@@ -10049,6 +10054,14 @@ markdown-table@^3.0.0:
   resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-3.0.2.tgz#9b59eb2c1b22fe71954a65ff512887065a7bb57c"
   integrity sha512-y8j3a5/DkJCmS5x4dMCQL+OR0+2EAq3DOtio1COSHsmW2BGXnNCK3v12hJt1LrUz5iZH5g0LmuYOjDdI+czghA==
 
+matrix-widget-api@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/matrix-widget-api/-/matrix-widget-api-1.1.1.tgz#d3fec45033d0cbc14387a38ba92dac4dbb1be962"
+  integrity sha512-gNSgmgSwvOsOcWK9k2+tOhEMYBiIMwX95vMZu0JqY7apkM02xrOzUBuPRProzN8CnbIALH7e3GAhatF6QCNvtA==
+  dependencies:
+    "@types/events" "^3.0.0"
+    events "^3.2.0"
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"