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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const chatMachine = Machine({
    id: 'chat',
    initial: 'hidden',
    context: {
     
    },
    states: {
      hidden: {
        initial: 'idle',
        states: {
          idle: {
            on: {
              RECEIVE: {
                target: '#chat.hidden.displaySingle',
                actions: ['setNew'], 
              },
              SHOW_ALL: '#chat.visible',
            },
          },
          displaySingle: {
            exit: ['unsetNew'],
            after: {
              5000: 'idle',
            },
            on: {
              SELECT: {
                target: '#chat.visible.chat',
                actions: ['setChat'],
              },
              DISMISS: '#chat.hidden.idle',
              SHOW_ALL: '#chat.visible',
            }
          }
        }
      },
      visible: {
        initial: 'idle',
        states: {
          idle: {
            entry: ['setClients'],
            on: {
              SELECT: {
                target: 'chat',
                actions: ['setChat']
              },
              SEARCH: [
                {
                  target: 'idle',
                  cond: 'searchIsValid',
                  actions: ['search'],
                },
                {
                  target: 'idle',
                  cond: 'searchIsEmpty',
                  actions: ['clearSearch'],
                }
              ],
              CLOSE: '#chat.hidden',
            }
          },
          chat: {
            on: {
              BACK: {
                target: 'idle',
                actions: ['unsetChat']
              },
              SEARCH: {
                target: 'chat',
                cond: 'searchIsValid',
                actions: ['search'],
              },
              CHANGE_CHAT: {
                target: 'chat',
                internal: false,
                actions: ['setChat', 'getMessages']
              },
              RECEIVE: {
                target: 'chat',
                actions: ['receiveMessage'],
              },
              SEND: {
                target: 'chat',
                cond: 'messageIsValid',
                actions: ['sendMessage'],
              },
              CLOSE: {
                target: '#chat.hidden',
                actions: ['unsetChat'],
              },
            }
          }
        }
      },
    }
  });