This is, strictly speaking, not about Qwiery but about the default client rendering results from the Qwiery backend. The client uses standard ReactJS techniques to inject a component which corresponds to a data type returned from the backend. For example, the question ‘how are you doing?‘ returns a simple string as part of the Output:

{
    "ExchangeId": 4,
    "Handled": true,
    "Historize": true,
    "Input": {
        "Raw": "how are you doing",
        "Timestamp": "2016-04-24T09:07:29.823Z"
    },
    "Key": {
        "CorrelationId": "1hXzf2t9Es",
        "UserId": "Anonymous"
    },
    "Output": {
        "Answer": [
            {
                "Content": "I'm doing great, how about you?",
                "DataType": "SimpleContent"
            }
        ],
        "Timestamp": "2016-04-24T09:07:29.825Z"
    },
    "Trace": [
        {
            "Oracle": [
                {
                    "Id": "foxV03NRlO",
                    "Grab": "How are you doing",
                    "Wildcards": [],
                    "Template": {
                        "Answer": {
                            "String": "I'm doing great, how about you?"
                        }
                    },
                    "Head": "Template 1",
                    "Approved": false,
                    "DataType": "OracleStackItem"
                }
            ]
        }
    ],
    "Context": {
        "userId": "Anonymous",
        "role": "Standard"
    },
    "Timing": "0.002s"
}

The Answer is always a collections of pods with a DataType specifying the type of content you can expect within the pod. The SimpleContent type has a Content property with the answer.

The main pod rendering ReactJS component is the InteractionComponent which gets refreshed/rerendered after each question. Inside this component you can see this snippet:

for(var i = 0; i < pods.length; i++) {
    var pod = pods[i];

    switch(pod.DataType) {
        case UI.constants.SimpleContent:
            components.push(<SimpleContentComponent content={UI.parseMap(pod.Content)}/>);
            break;
    ...
   }
}

The loop injects the appropriate component in function of the DataType. So, if you create a new component this is the place where you have to make sure you add/alter the mapping.

The Common component more a collection of UI utils than a component and contains many useful (static) methods you can use inside a component. Among other:

  • UI.ask will automatically trigger a new question-answer session. The argument can be a string question or an object. For instance, the following
UI.ask({
  type: "Entity",
  id: "JohnField",  
  isEntity: true
 });

will ask for the entity “JohnField” and present it in one go. If you use

UI.ask({
  type: "Tag",
  title: "Music",  
  isEntity: true
 });

the entities tagged with ‘music’ will be presented.

  • UI.showError and UI.showSuccess are a way to present an error respectively success message in the standard way (a bootstrap notification which disappears after few seconds).
  • UI.refreshGraphSummary will refresh the tags, favorites… section when one of those has changed.

You will also find methods to present traces render a grid and much more.

The ReactJS mechanics is really easy to learn and there are various books and resources if you need a little push:

Of course, you can use the Qwiery backend in any way you like and the default set of ReactJS components are just an example. See the integration topics for more.