seanmtracey/Node-RED + Watson Assistant Details.md

## demo-flow.json
[{"id":"6ef14b61.701034","type":"watson-conversation-v1","z":"6f2ce8db.0463d8","name":"","workspaceid":"","multiuser":false,"context":true,"empty-payload":false,"default-endpoint":true,"service-endpoint":"https://gateway.watsonplatform.net/assistant/api","timeout":"","optout-learning":false,"x":540,"y":300,"wires":[["8a58287e.2fcd78","b7167dd3.ec22a"]]},{"id":"b7e19da6.a90b8","type":"websocket in","z":"6f2ce8db.0463d8","name":"","server":"7b3c79d.bb90188","client":"","x":130,"y":240,"wires":[["7136b412.2be1dc","b7167dd3.ec22a"]]},{"id":"8a58287e.2fcd78","type":"websocket out","z":"6f2ce8db.0463d8","name":"","server":"7b3c79d.bb90188","client":"","x":730,"y":300,"wires":[]},{"id":"b7167dd3.ec22a","type":"debug","z":"6f2ce8db.0463d8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":710,"y":240,"wires":[]},{"id":"7136b412.2be1dc","type":"function","z":"6f2ce8db.0463d8","name":"Restructure data","func":"const PAYLOAD = JSON.parse(msg.payload);\n\nmsg.payload = PAYLOAD.message;\nmsg.params = {\n    context : PAYLOAD.context\n}\n\nreturn msg;","outputs":1,"noerr":0,"x":350,"y":300,"wires":[["6ef14b61.701034","b7167dd3.ec22a"]]},{"id":"7b3c79d.bb90188","type":"websocket-listener","z":"","path":"/ws/chat","wholemsg":"false"}]

## mvp.html
<!DOCTYPE html>
<html>
    <head>
        <title>Demo WebSockets + Assistant Page</title>
        <link rel='stylesheet' href='style.css' />
    </head>
    <body>

        <div id="transcript">
          <!--<div class="to message">Hello, my name is Keith. My parents abandoned me at a young age, and now I test chatbots</div>
          <div class="from message">Hey Keith, sucks to be you.</div>-->
        </div>

        <form>
            <input type="text" id="text"/>
            <input type="submit" value="Send" />
        </form>
        <script>

            const transcriptElement = document.querySelector('#transcript');

            let MESSENGER_CONTEXT;

            const NODE_RED_SERVER_HOSTNAME = "localhost:1880";
            const ws = new WebSocket(`wss://${NODE_RED_SERVER_HOSTNAME}/ws/chat`);

            ws.addEventListener('open', function(e){
               console.log(`Websocket connection opened`, e);
            });

            ws.addEventListener('message', function(e){
                console.log(e);
                const data = JSON.parse(e.data);
                MESSENGER_CONTEXT = data.context;

                data.output.text.forEach(response => {

                  const fromMessage = document.createElement('div');
                      fromMessage.textContent = response;
                      fromMessage.classList.add('from');
                      fromMessage.classList.add('message');

                      transcriptElement.appendChild(fromMessage);

                });

            });

            ws.addEventListener('error', function(err){
                console.log('Websocket connection error:', err);
            });


            const form = document.querySelector('form');

            form.addEventListener('submit', function(e){
                e.preventDefault();
                e.stopImmediatePropagation();
                if(ws.readyState === 1){

                    const toMessage = document.createElement('div');
                    toMessage.textContent = form.querySelector('#text').value;
                    toMessage.classList.add('to');
                    toMessage.classList.add('message');

                    transcriptElement.appendChild(toMessage);

                    ws.send(JSON.stringify({
                        message : form.querySelector('#text').value,
                        context : MESSENGER_CONTEXT
                    }));

                  form.reset()

                }
            });

        </script>
    </body>
</html>

## Node-RED + Watson Assistant Details.md

      
    Raw
  

              Node-RED + Watson Assistant Details.md
            
          
    Instructions for plugging a website into Watson Assisstant with Node-RED + WebSockets
Okie dokie, so you want to plug your website into Watson Assistant, well, here's how you can do that.
First, you'll need to set up a Node-RED server which can talk to Watson Assistant. The demo-flow.json contains a demo flow that will hook up a websockets endpoint to a Watson Assistant instance enabling you to talk to the Assistant instance with a web page.

Copy the contents of demo-flow.json into your clipboard and then head to any Node-RED flow.
Top right of the Node-RED UI, hit the hamburger menu and then hover over "import" and then select "clipboard" from the context menu that appears.
In the dialog box that appears, paste the content of your clipboard and then click "import"
A flow will appear in your workflow, click to place it, you now have a websocket connection configured to talk to Watson Assistant
Head to your assistant workspace and find the credentials for you flow. Copy and paste them into the configuration panel for your assistant node where applicable.

Secondly, you'll need to add some code to your web page to pass messages to the websocket connection we just created. The mvp.html file contains a working demo that will plug straight into your demo. You don't need to copy the whole thing just copy the <form> and <script> tags and their contents into your own HTML page.

Copy the <form> and <script> tags and their contents into your own HTML page.
Replace the NODE_RED_SERVER_HOSTNAME value with the hostname of your own Node-RED server.

Now, whenever you submit some text in the forms <input> field, it will be passed to Watson Conversation.

  
## Styles.css
/* CSS files add styling rules to your content */

html, body{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
}

h1 {
  font-style: italic;
  color: #373fff;
}

form{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#transcript{
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 2em;
}

.message{
  max-width: 75%;
  font-size: 0.5em;
  float: right;
  display: inline-block;
  clear: both;
  background: blanchedalmond;
  padding: 5px;
  box-sizing: border-box;
  margin-bottom: 1em;
  border-radius: 3px;
}

.message.from{
  float: left;
  background: darkseagreen;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Demo WebSockets + Assistant Page</title>
	<link rel='stylesheet' href='style.css' />
	</head>
	<body>

	<div id="transcript">
	<!--<div class="to message">Hello, my name is Keith. My parents abandoned me at a young age, and now I test chatbots</div>
	<div class="from message">Hey Keith, sucks to be you.</div>-->
	</div>

	<form>
	<input type="text" id="text"/>
	<input type="submit" value="Send" />
	</form>
	<script>

	const transcriptElement = document.querySelector('#transcript');

	let MESSENGER_CONTEXT;

	const NODE_RED_SERVER_HOSTNAME = "localhost:1880";
	const ws = new WebSocket(`wss://${NODE_RED_SERVER_HOSTNAME}/ws/chat`);

	ws.addEventListener('open', function(e){
	console.log(`Websocket connection opened`, e);
	});

	ws.addEventListener('message', function(e){
	console.log(e);
	const data = JSON.parse(e.data);
	MESSENGER_CONTEXT = data.context;

	data.output.text.forEach(response => {

	const fromMessage = document.createElement('div');
	fromMessage.textContent = response;
	fromMessage.classList.add('from');
	fromMessage.classList.add('message');

	transcriptElement.appendChild(fromMessage);

	});

	});

	ws.addEventListener('error', function(err){
	console.log('Websocket connection error:', err);
	});


	const form = document.querySelector('form');

	form.addEventListener('submit', function(e){
	e.preventDefault();
	e.stopImmediatePropagation();
	if(ws.readyState === 1){

	const toMessage = document.createElement('div');
	toMessage.textContent = form.querySelector('#text').value;
	toMessage.classList.add('to');
	toMessage.classList.add('message');

	transcriptElement.appendChild(toMessage);

	ws.send(JSON.stringify({
	message : form.querySelector('#text').value,
	context : MESSENGER_CONTEXT
	}));

	form.reset()

	}
	});

	</script>
	</body>
	</html>
	/* CSS files add styling rules to your content */

	html, body{
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	}

	body {
	font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
	}

	h1 {
	font-style: italic;
	color: #373fff;
	}

	form{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	#transcript{
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	padding: 2em;
	}

	.message{
	max-width: 75%;
	font-size: 0.5em;
	float: right;
	display: inline-block;
	clear: both;
	background: blanchedalmond;
	padding: 5px;
	box-sizing: border-box;
	margin-bottom: 1em;
	border-radius: 3px;
	}

	.message.from{
	float: left;
	background: darkseagreen;
	}