feat(web app): render widget

app/src/js/chatbot.js

@@ -60,6 +60,9 @@ export default class Chatbot {
   }
 
   loadFeed() {
+    /**
+     * TODO: widget: load widget from local storage
+     */
     return new Promise((resolve) => {
       if (this.parsedBubbles === null || this.parsedBubbles.length === 0) {
         this.noBubbleMessage.classList.remove('hide')

app/src/js/client.js

@@ -1,5 +1,8 @@
 import { io } from 'socket.io-client'
+import React from 'react'
+import { createRoot } from 'react-dom/client'
 
+import { Button } from './aurora/button'
 import Chatbot from './chatbot'
 
 export default class Client {
@@ -64,8 +67,19 @@ export default class Client {
     })
 
     this.socket.on('widget', (data) => {
+      /**
+       * TODO: widget: widget handler to core/skill; dynamic component rendering
+       */
       console.log('data', data)
-      // TODO: render widget via React
+
+      const container = document.createElement('div')
+      container.className = 'widget'
+      this.chatbot.feed.appendChild(container)
+
+      const root = createRoot(container)
+
+      // TODO: widget: pass props and dynamic component loading according to type
+      root.render(Button({ children: 'OK' }))
     })
 
     this.socket.on('audio-forwarded', (data, cb) => {

server/src/core/brain/brain.ts

@@ -198,7 +198,6 @@ export default class Brain {
         LogHelper.title(`${this.skillFriendlyName} skill (on data)`)
         LogHelper.info(data.toString())
 
-        // TODO: widget
         if (obj.output.widget) {
           SOCKET_SERVER.socket?.emit('widget', obj.output.widget)
         }