Generated by XState Viz: https://xstate.js.org/viz

machine.js

const chatMachine = Machine({
  id: "chat",
  initial: "idle",
  context: {
    messages: []
  },
  states: {
    idle: {
      on: {
        fetch: "fetching",
        receive: {
          target: "idle",
          actions: assign({
            messages: (context, event) => [...context.messages, 'new message']
          })
        }
      }
    },
    fetching: {
      on: {
        receive: {
          target: "fetching",
          actions: assign({
            messages: (context, event) => [...context.messages, 'new message']
          })
        }
      },
      invoke: {
        src: invokeFetchMessages,
        onDone: {
          target: "idle",
          actions: assign({
            messages: (context, event) => [...event.data, ...context.messages]
          })
        }
      }
    }
  }
});

function invokeFetchMessages() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(['foo', 'bar'])
    }, 5000)
  })
}