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