refactoring next part

src/lib/components/refactor/ComposerCharly.svelte

@@ -1,8 +1,32 @@
 <script>
+	import { onMount } from 'svelte';
+	import { coreServices } from '$lib/core/refactor/coreServices';
+
 	export let me;
+	export let data;
+
+	onMount(() => {
+		// coreServices.mutateData('ComposerCharly', { hello: ' this is on mount ' });
+	});
+	function toggle() {
+		me.do.machine.send('TOGGLE');
+	}
 </script>
 
 <div class="border-2 border-green-500">
 	<p>My ID is: {me.id}</p>
+	my state is {$data.state}
 	<h1 class="h1">I am charly</h1>
+	my data.context prop: {JSON.stringify($data.context)}
+	<br />
+	<button
+		class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
+		on:click={toggle}
+	>
+		Toggle
+	</button>
+
+	<!-- {#each $data.context.messages as message (message.timestamp)}
+		<p>{message.text}</p>
+	{/each} -->
 </div>