From 7a69714efb71590002f86fa9eb03c1fe6dc66e39 Mon Sep 17 00:00:00 2001
From: louistiti <louis.grenard@gmail.com>
Date: Tue, 6 Aug 2024 08:25:45 +0800
Subject: [PATCH] feat: nested widget components rendering PoC

---
 app/src/js/chatbot.jsx                        |  6 ++
 .../src/widgets/playground-test.ts            | 90 +++++++++++++++++--
 2 files changed, 88 insertions(+), 8 deletions(-)

diff --git a/app/src/js/chatbot.jsx b/app/src/js/chatbot.jsx
index c956c306..95a9bc7a 100644
--- a/app/src/js/chatbot.jsx
+++ b/app/src/js/chatbot.jsx
@@ -133,6 +133,12 @@ export default class Chatbot {
           }
         }
 
+        // When children is a component, then wrap it in an array to render properly
+        const isComponent = !!component.props?.children?.component
+        if (isComponent) {
+          component.props.children = [component.props.children]
+        }
+
         if (
           component.props?.children &&
           Array.isArray(component.props.children)
diff --git a/skills/unknown/widget-playground/src/widgets/playground-test.ts b/skills/unknown/widget-playground/src/widgets/playground-test.ts
index 32d5e44c..ce935749 100644
--- a/skills/unknown/widget-playground/src/widgets/playground-test.ts
+++ b/skills/unknown/widget-playground/src/widgets/playground-test.ts
@@ -1,6 +1,14 @@
 import { Widget, type WidgetOptions } from '@sdk/widget'
 import { type WidgetComponent } from '@sdk/widget-component'
-import { Button } from '@sdk/aurora'
+import {
+  Button,
+  Flexbox,
+  List,
+  ListHeader,
+  ListItem,
+  Checkbox,
+  Link
+} from '@sdk/aurora'
 
 interface Params {
   value1: string
@@ -34,13 +42,79 @@ export class PlaygroundTestWidget extends Widget<Params> {
 
   public render(): WidgetComponent {
     const children = this.params.value1 + ' ' + this.params.value2
-    return new Button({
-      children,
-      secondary: true,
-      // TODO
-      onClick: () => {
-        return runSkillAction('test', 'param1')
-      }
+
+    // TODO: timer
+
+    // TODO
+    return new Flexbox({
+      gap: 'md',
+      flexDirection: 'column',
+      children: [
+        new Link({
+          href: 'https://getleon.ai',
+          children: 'Test link'
+        }),
+        new List({
+          children: [
+            new ListHeader({
+              children: 'Shopping List'
+            }),
+            new ListItem({
+              children: new Checkbox({
+                value: 'Milk',
+                label: 'Milk',
+                checked: true
+              })
+            }),
+            new ListItem({
+              children: new Checkbox({
+                value: 'Eggs',
+                label: 'Eggs',
+                checked: false
+              })
+            }),
+            new ListItem({
+              children: new Checkbox({
+                value: 'Bread',
+                label: 'Bread',
+                checked: true
+              })
+            })
+          ]
+        }),
+        new List({
+          children: [
+            new ListHeader({
+              children: 'Select your music provider'
+            }),
+            new ListItem({
+              children: new Button({
+                children: 'Spotify',
+                onClick: () => {
+                  return runSkillAction('play_music', 'spotify')
+                }
+              })
+            }),
+            new ListItem({
+              children: new Button({
+                children: 'Apple Music',
+                onClick: () => {
+                  return runSkillAction('play_music', 'apple_music')
+                }
+              })
+            }),
+            new ListItem({
+              children: new Button({
+                children: 'YouTube Music',
+                onClick: () => {
+                  return runSkillAction('play_music', 'youtube_music')
+                }
+              })
+            })
+          ]
+        })
+        // TODO: form input
+      ]
     })
   }
 }