From 63573083fa8db3b3e2921a133439793c60e0d3c3 Mon Sep 17 00:00:00 2001
From: louistiti <louis.grenard@gmail.com>
Date: Mon, 15 May 2023 21:25:20 +0800
Subject: [PATCH] feat(web app): render widget

---
 app/src/js/chatbot.js          |  3 +++
 app/src/js/client.js           | 16 +++++++++++++++-
 server/src/core/brain/brain.ts |  1 -
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/app/src/js/chatbot.js b/app/src/js/chatbot.js
index 2afbc4c8..7175b958 100644
--- a/app/src/js/chatbot.js
+++ b/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')
diff --git a/app/src/js/client.js b/app/src/js/client.js
index 5cdc5dba..2d073e9c 100644
--- a/app/src/js/client.js
+++ b/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) => {
diff --git a/server/src/core/brain/brain.ts b/server/src/core/brain/brain.ts
index 5e6d68c8..d9b3e809 100644
--- a/server/src/core/brain/brain.ts
+++ b/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)
         }