From dc3995e327e4ce8b1e1cc9f04820a17268514bc1 Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Sat, 22 Jul 2023 17:35:14 +0200
Subject: [PATCH] decoupled actions from the components loading dynamically

---
 src/lib/components/Composite.svelte | 22 ++++++++++++++++------
 src/lib/stores/compositeStore.ts    |  0
 src/routes/+page.svelte             |  3 ++-
 3 files changed, 18 insertions(+), 7 deletions(-)
 create mode 100644 src/lib/stores/compositeStore.ts

diff --git a/src/lib/components/Composite.svelte b/src/lib/components/Composite.svelte
index 2da1b00..dca2e21 100644
--- a/src/lib/components/Composite.svelte
+++ b/src/lib/components/Composite.svelte
@@ -15,12 +15,22 @@
 	{#each componentsData.children as component (component.id)}
 		{#await getComponent(component.componentName) then Component}
 			{#if Component}
-				<div class="w-full h-full overflow-hidden">
-					<svelte:component
-						this={Component}
-						{...component.props}
-						class=" h-full w-full {component.slot} "
-					/>
+				<div class="w-full h-full overflow-hidden {component.slot}">
+					<svelte:component this={Component} {...component.props} />
+
+					{#if component.actions}
+						<div class="flex justify-end p-4">
+							{#each component.actions as action}
+								{#await getComponent(action) then ActionComponent}
+									{#if ActionComponent}
+										<svelte:component this={ActionComponent} {...component.props} />
+									{:else}
+										<p>Action {action} not found.</p>
+									{/if}
+								{/await}
+							{/each}
+						</div>
+					{/if}
 				</div>
 			{:else}
 				<p>Component {component.componentName} not found.</p>
diff --git a/src/lib/stores/compositeStore.ts b/src/lib/stores/compositeStore.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b8acce1..35d4bad 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -27,7 +27,8 @@
 				id: 3,
 				componentName: 'MessageInput',
 				props: {},
-				slot: 'footer'
+				slot: 'footer',
+				actions: ['ClearMessages', 'SendMessage']
 			}
 		]
 	};