# Transitions

{% hint style="info" %}
Key Concepts In This Chapter:\
\- **Types of Transitions, Transition Attributes, and Transition Scope**
{% endhint %}

In this chapter, we will show how to perform the transition between different states. Here is an example config:

```json
{
  "type": "automata",
  "id": "transition_demo",
  "initial": "home_page_state",
  "inputs": {},
  "outputs": {},
  "transitions": {
    "go_home": "home_page_state"
  },
  "states": {
    "home_page_state": {
      "render": {
        "text": "Click 'Start' to chat!",
        "buttons": [
          {
            "content": "Start Chat",
            "description": "Click to Start Chatting.",
            "on_click": "start_chat"
          }
        ]
      },
      "transitions": {
        "start_chat": "intro_message_state"
      }
    },
    "intro_message_state": {
      "render": {
        "text": "Hi, welcome to the Pro Config tutorial. How can I assist you today?",
        "buttons": [
          {
            "content": "Home",
            "description": "Click to Go Back to Home.",
            "on_click": "go_home"
          }
        ]
      },
      "transitions": {
        "CHAT": "chat_page_state"
      }
    },
    "chat_page_state": {
      "inputs": {
        "user_message": {
          "type": "IM",
          "user_input": true
        }
      },
      "tasks": [
        {
          "name": "generate_reply",
          "module_type": "AnyWidgetModule",
          "module_config": {
            "widget_id": "1744214024104448000",
            "system_prompt": "You are a teacher teaching Pro Config.",
            "user_prompt": "{{user_message}}",
            "output_name": "reply"
          }
        },
        {
          "name": "generate_voice",
          "module_type": "AnyWidgetModule",
          "module_config": {
            "content": "{{reply}}",
            "widget_id": "1743159010695057408",
            "output_name": "reply_voice"
          }
        }
      ],
      "render": {
        "text": "{{reply}}",
        "audio": "{{reply_voice}}",
        "buttons": [
          {
            "content": "Home",
            "description": "Click to Go Back to Home.",
            "on_click": "go_home"
          }
        ]
      },
      "transitions": {
        "CHAT": "chat_page_state"
      }
    }
  }
}
```

<figure><img src="https://2975681513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDtmZwLatyyBFLUK6P6Pj%2Fuploads%2F6lpUCLNoc4HvvtHBYYhd%2Fimage.png?alt=media&#x26;token=8fc38d4a-725f-4791-8077-bf0af7dd78f2" alt=""><figcaption><p>Output for the pro config</p></figcaption></figure>

### State Transition Process In the Above Example

In the above agent, the user will start from a home page. In `home_page_state`, when the user clicks the `Start Chat` button,  the state machine jumps to  `intro_message_state` and display the intro message.&#x20;

At `intro_message_state` , user can transit to `chat_page_state` by chatting with the agent. &#x20;

\
We have included several concepts related to transitions in the above example. Let's explain them one by one.

### Transition & Its Attributes

A transition is usually defined as:&#x20;

```json
"transitions": {
   "<action_name>": "<target_state>"
}
```

Where `<action_name>` is the name of action, usually which you provide in the `on_click` property of button, and `<target_state>` is the state to transition when the action is run. This way, you can create a flow where the user gets to choose the path they want the workflow to go by clicking buttons. There are also some **reserved action names** that allow you to transition when a specific event happens in your agent.&#x20;

We currently support three reserved action names:

* **CHAT**: triggered when the user sends a message
* **ALWAYS**: triggered when an AtomicState has finished. Usually used to connect two consecutive states.
* **DONE:** triggered when an Automata is finished. This can be useful in nested automata (to determine the next state of a child automata).

### The Scope of Transitions

The `transitions` can be defined either in an `AtomicState` or in an `Automata`. If a transition is defined in an `AtomicState`, it will only handle the action triggered in that AtomicState (such as  `start_chat` in the `home_page_state`). However, if a transition is defined in the `Automata`, it will handle the actions in all its states. For example, since `go_home` is handled in the `transitions` of the whole `transition_demo`, any button within `transition_demo` that can trigger the action `go_home` and make the automata jump to `home_page_state`.

### Conditional Transitioning

Pro Config also supports conditional transition, which means performing validation of some boolean expressions during the transition. The syntax is as follows:

```json
"transitions": {
  "<action_name>": [
    {
      "target": "<target_name1>",
      "condition": "<condition1>",
    },
    {
      "target": "<target_name2>",
      "condition": "<condition2>",
    }
    ...
  ]
}
```

When `<action_name>` is triggered, Pro Config will check the conditions sequentially (first check `<condition1>`, and then `<condition2>`) to decide which state to jump to. If no condition is satisfied, the automata will stay in the original state. We will show how to leverage this advanced syntax in later examples.