Alquist Editor provides a quick way to see the structure of dialogues created for Alquist dialogue manager and edit their code at the same time.

It consists of a javascript client that displays graph of dialogue's states and contains a simple user interface and python server which generates graph nodes and edges from yaml codes and provides basic file management.

Editor can be accessed on /editor/ url, for example http://127.0.0.1:5000/editor/

Python 3 is required to run the Alquist Editor. You can install all the needed requirements using pip command in project's root directory.

pip install -r requirements.txt

Should you have any problems with installation you can also check out installation instructions here: https://github.com/AlquistManager/alquist

To run Alquist editor use the same command you would use to run Alquist dialogue manager.

py -3 main.py

Main page

On the main page of the editor you can select an existing project or create a new one. New project can either be created empty or from existing files uploaded in a zip folder.

Editor page

File manager in the left pane contains flows and states folders by default. Flows folder is used for storing YAML files which define the structure of a bot. States folder is used for storing any custom python states that your project contains.

Nodes of the graph structure represent various states of the dialogue and oriented edges represent transitions between these states. Graph display divides states into groups according to the YAML files where they are defined. Clicking on a node will automatically open the appropriate file and scroll to the selected state. It also uses different colors to distinguish between different states:

• yellow for initial state
• red for unreachable states
• green for targets of intent transitions
• white for other states

Code editor highlighting supports python and yaml syntax. It also supports autoindent, line numbers etc.

Here is a list of the main files which are a part of the editor. The rest of the files in this project belong to the dialogue manager the editor is based on.

• graph_generator.py - contains methods for graph creation from dictionary of all states and related operations
• editor_server.py - flask server which accepts requests from javascript client, manages files etc.
• IO/index.html - index page of editor, project selection and creation
• IO/editor.html - main part of client, contains file manager, graph display and code editor
• IO/static-files - contains all static files such as stylesheetes, themes, javascript libraries etc.

Viz.js https://github.com/mdaines/viz.js/ - used for displaying graph of dialogue states

JQuery https://jquery.com

SVG Pan Zoom https://github.com/ariutta/svg-pan-zoom - enables easy panning and zooming of graph

Split.js https://nathancahill.github.io/Split.js/ - enables splitting web page into several panes

Tab Override https://github.com/wjbryant/taboverride - enables use of tab key in text area (default size of 2 spaces)

CodeMirror https://codemirror.net - enables syntax highlighting, autoindent, line numbers...

jsTree https://www.jstree.com - jquery plugin which provides interactive trees (displays interactive file structure)

jsTree Proton theme https://github.com/orangehill/jstree-bootstrap-theme - theme for jsTree plugin

Bootstrap http://getbootstrap.com - javascript framework

Bootbox http://bootboxjs.com - provides programmatic dialogue boxes for Bootstrap