conversational-glue
Conversation-first libraries for website construction
Conversational-glue provides hooks to integrate conversational interfaces into the core of your website. Currently integrates via redux to react-router-dom.
First iteration is focused on updating application state from Dialogflow. Future iterations will look at wrapping existing components to shift existing interface components to a conversationally augmented flow (eg. clicking a website button corresponds to a conversational turn) and binding additional page elements to conversational context.
Installation
Use the package manager npm/yarn to install conversational-glue
yarn add conversational-glue
Requirements
- react-router
- redux
Usage
Add custom Route Payload into Dialogflow responses as Custom payload
First, within Dialogflow CX, we tag the intents that we want to navigate around the App
{"route": "/my_target_route"}
Connect reducer
Secondly, we connect our routing reducer to our Redux store:
import { applyMiddleware, createStore, combineReducers } from 'redux';
import { createRouteReducer } from 'conversational-glue';
export const store = createStore(
combineReducers({feed: messageReducer, route: createRouteReducer(initState)}),
applyMiddleware(messageMiddleware));
This reducer extracts the route object from any custom payload that is returned.
Note: sample above assumes that you've already integrated message handling in a similar way to the Dialogflow CX samples using Redux. Data is assumed to follow the following structure:
export const sendMessage = (text, session, sender = 'user', type) => ({
type: ON_MESSAGE,
payload: { text, session, sender, type }
})
Defined on API response as follows:
axios.post(settings.detectintent, {
query: action.payload.text,
sessionid: action.payload.session
}).then(onSuccess)
function onSuccess(response) {
response.data.response.queryResult.responseMessages.forEach(function (item, index) {
if ('payload' in item){
next(sendMessage(item.payload.fields, response, 'bot', 'payload'));
} else {
next(sendMessage(item.text.text, response, 'bot', 'text'));
}
});
}
Add routing Controller
Finally, we add the Routing controller to our App Requires react-router-dom and triggers a Route change based on an input function
import React, { Component } from 'react';
import { BrowserRouter, Route, Redirect } from 'react-router-dom';
//import { RouteController } from 'conversational-glue'; // In development
// trigger the change Route method from within your React component
(props) => {
const { activeRoute } = props;
<BrowserRouter>
<Redirect to={activeRoute} />
{/* withRouter(<RouteController activeRoute={activeRoute} />) */}
<Route exact path='/' component={HomePage} />
<Route exact path='/two' component={SecondPage} />
</BrowserRouter>
}
const mapStateToProps = state => ({
activeRoute: state.route,
feed: state.feed // feed as per the Dialogflow CX sample code base
});
Note: You'll likely want to ensure that the chat component persists between pages and that the conversation state remains bound.
License
Apache 2.0
Why? Conversation First Design
Typical conversation integration to websites involves bolting on a new component to an existing build. This is typically isolated from the core workings of the website, and the experience is limited to the container within which the chat is surfaced and uses backend integrations to peform any interactions.
But what if Conversation drove the entire experience of the website?
The experience could be more immersive, and open up new ways of engaging with the content.
How?
This initial prototype allows you to connect Dialogflow CX via Redux to a React based router.
Additional considerations / Principles
- SEO - Search Engines should be able to index and understand your website as if it were a conventional website
- Accessibility - The Conversational design should improve accessibility and not inhibit existing approaches to accessbility such as support for screen readers
- Graceful Failure - Fallback navigation and content if the conversation integration is unavailable
Todo:
- Setup CICD
- Testing Harness
- Demo deployment
- Action types
- Navigation
- Model transforms
- Dynamic Routing - Dynamic Fulfilment -> Dynamic Routes
- HoC for Attaching suggested utterances to buttons