decoupled actions from the components loading dynamically

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">
+				<div class="w-full h-full overflow-hidden {component.slot}">
-					<svelte:component
+					<svelte:component this={Component} {...component.props} />
-						this={Component}
+
-						{...component.props}
+					{#if component.actions}
-						class=" h-full w-full {component.slot} "
+						<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>

src/routes/+page.svelte

@@ -27,7 +27,8 @@
 				id: 3,
 				componentName: 'MessageInput',
 				props: {},
-				slot: 'footer'
+				slot: 'footer',
+				actions: ['ClearMessages', 'SendMessage']
 			}
 		]
 	};