refactoring next part

src/lib/components/refactor/ComposerWrap.svelte

@@ -1,5 +1,8 @@
-<script>
+<script lang="ts">
 	import Composer from '$lib/core/refactor/Composer.svelte';
+	import { assign } from 'xstate';
+	import { coreServices } from '$lib/core/refactor/coreServices';
+	import { queryMessages } from '$lib/data/queryMessages';
 
 	let composer = {
 		id: 'ComposerParent',
@@ -26,18 +29,31 @@
 			{
 				id: 'ComposerCharly',
 				component: 'ComposerCharly',
-				data: {
-					context: { messenges: 'put the messengesStore here' }
-				},
 				slot: 'aside',
+				data: {},
 				machine: {
-					initial: 'NOTREADY',
+					initial: 'LOADING',
+					context: {
+						hello: 'start',
+						messages: []
+					},
 					states: {
-						NOTREADY: {
-							on: { TOGGLE: 'READY' }
+						LOADING: {
+							on: {
+								TOGGLE: {
+									target: 'READY',
+									actions: assign({
+										hello: (context, event) => 'this was updated from loading'
+									})
+								}
+							}
 						},
 						READY: {
-							on: { TOGGLE: 'NOTREADY' }
+							on: {
+								TOGGLE: {
+									target: 'LOADING'
+								}
+							}
 						}
 					}
 				}
@@ -46,11 +62,8 @@
 				id: 'ComposerBob',
 				component: 'ComposerBob',
 				slot: 'top',
-				data: {
-					machine: { state: 'NOTREADY' }
-				},
 				machine: {
-					initial: 'NOTREADY',
+					initial: 'READY',
 					states: {
 						NOTREADY: {
 							on: { TOGGLE: 'READY' }