Alquist Editor is web editor for Alquist dialogue manager
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.credentials
.idea
IO
__pycache__
bots
client
modules
states
tests/test_dialogue
yaml_parser
Dockerfile
Procfile
README.md
config.py
crossdomain.py
czech-morfflex-160310.dict
dialogue_logger.py
editor_server.py
graph_generator.py
loaded_states.py
loggers.py
main.py
requirements.txt
run-docker-container.sh
runtime.txt
solver.py
state_positions.txt

README.md

Alquist Editor

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/

Installation

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

Run

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

py -3 main.py

How to use

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.

Editor structure

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.

Used javascript libraries

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