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

machine.js

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

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