55 | );
56 |
57 | const getClassName = item => {
58 | if (item.owner === 'user') {
59 | return 'right-item-list';
60 | } else {
61 | return 'left-item-list';
62 | }
63 | };
64 |
65 | const getImage = item => {
66 | if (item.owner === 'user') {
67 | return 'https://semantic-ui.com/images/avatar/small/stevie.jpg';
68 | } else {
69 | return '/images/watson.png';
70 | }
71 | };
72 |
73 | // type check to ensure we are called correctly
74 | Messages.propTypes = {
75 | messages: PropTypes.arrayOf(PropTypes.object).isRequired
76 | };
77 |
78 | // export so we are visible to parent
79 | module.exports = Messages;
80 |
--------------------------------------------------------------------------------
/env.sample:
--------------------------------------------------------------------------------
1 | # Copy this file to .env and replace the credentials with
2 | # your own before starting the app.
3 |
4 | #----------------------------------------------------------
5 | # IBM Cloud
6 | #
7 | # If your services are running on IBM Cloud,
8 | # uncomment and configure these.
9 | # Remove or comment out the IBM Cloud Pak for Data sections.
10 | #----------------------------------------------------------
11 |
12 | # Watson Assistant
13 | # ASSISTANT_AUTH_TYPE=iam
14 | # ASSISTANT_APIKEY=
15 | # ASSISTANT_URL=
16 | # ASSISTANT_ID=
17 |
18 | #----------------------------------------------------------
19 | # IBM Cloud Pak for Data (username and password)
20 | #
21 | # If your services are running on IBM Cloud Pak for Data,
22 | # uncomment and configure these.
23 | # Remove or comment out the IBM Cloud section.
24 | #----------------------------------------------------------
25 |
26 | ## CPD Cluster URL should be in the form:
27 | ## https://{cpd_cluster_host}{:port}
28 | ## Service URLs should be in the form:
29 | ## https://{cpd_cluster_host}{:port}/{service}/{release}/instances/{instance_id}/api
30 |
31 | # Watson Assistant
32 | # ASSISTANT_AUTH_TYPE=cp4d
33 | # ASSISTANT_AUTH_URL=
34 | # ASSISTANT_USERNAME=
35 | # ASSISTANT_PASSWORD=
36 | # ASSISTANT_URL=
37 | # # If you use a self-signed certificate, you need to disable SSL verification.
38 | # # This is not secure and not recommended.
39 | ## ASSISTANT_AUTH_DISABLE_SSL=true
40 | ## ASSISTANT_DISABLE_SSL=true
41 | # ASSISTANT_ID=
42 |
43 | ##
44 | # # Optional: Instead of the above IBM Cloud Pak for Data credentials...
45 | # # For testing and development, you can use the bearer token that's displayed
46 | # # in the IBM Cloud Pak for Data web client. To find this token, view the
47 | # # details for the provisioned service instance. The details also include the
48 | # # service endpoint URL. Only disable SSL if necessary (insecure).
49 | # # Don't use this token in production because it does not expire.
50 | # #
51 |
52 | # Watson Assistant
53 | # ASSISTANT_AUTH_TYPE=bearertoken
54 | # ASSISTANT_BEARER_TOKEN=
55 | # ASSISTANT_AUTH_URL=
56 | # ASSISTANT_URL=
57 | ## ASSISTANT_DISABLE_SSL=true
58 | # ASSISTANT_ID=
59 |
60 | # Run locally on a non-default port (default is 3000)
61 | # PORT=3000
62 |
--------------------------------------------------------------------------------
/src/Matches/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2019 IBM Corp. All Rights Reserved.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the 'License'); you may not
5 | * use this file except in compliance with the License. You may obtain a copy of
6 | * the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an 'AS IS' BASIS, WITHOUT
12 | * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
13 | * License for the specific language governing permissions and limitations under
14 | * the License.
15 | */
16 |
17 | import React from 'react';
18 | import PropTypes from 'prop-types';
19 | import { Container, Card } from 'semantic-ui-react';
20 |
21 | /**
22 | * This object renders the results of the search query on the web page.
23 | * Each result item, or 'match', will display a title, description, and
24 | * sentiment value.
25 | */
26 | const Match = props => (
27 |
28 |
29 |
30 | Score: { props.score }
31 |
32 |
33 | );
34 |
35 | // type check to ensure we are called correctly
36 | Match.propTypes = {
37 | text: PropTypes.string.isRequired,
38 | score: PropTypes.string.isRequired
39 | };
40 |
41 | const Matches = props => (
42 |
57 | );
58 |
59 | // type check to ensure we are called correctly
60 | Matches.propTypes = {
61 | matches: PropTypes.arrayOf(PropTypes.object).isRequired
62 | };
63 |
64 | // format text, setting background color for all highlighted words
65 | const getText = (item) => {
66 | return item.text ? item.text : 'No Description';
67 | };
68 |
69 | /**
70 | * getScore - round up to 4 decimal places.
71 | */
72 | const getScore = item => {
73 | var score = 0.0;
74 |
75 | if (item.score) {
76 | score = (item.score).toFixed(4);
77 | }
78 | return score;
79 | };
80 |
81 | // export so we are visible to parent
82 | module.exports = Matches;
83 |
--------------------------------------------------------------------------------
/src/layouts/default.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2019 IBM Corp. All Rights Reserved.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the 'License'); you may not
5 | * use this file except in compliance with the License. You may obtain a copy of
6 | * the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an 'AS IS' BASIS, WITHOUT
12 | * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
13 | * License for the specific language governing permissions and limitations under
14 | * the License.
15 | */
16 |
17 | import React from 'react';
18 | import PropTypes from 'prop-types';
19 |
20 | class DefaultLayout extends React.Component {
21 | getDescription() {
22 | return (
23 |
24 |
25 | This is a web app to demonstrates how to query your own Watson Discovery Collection and display it in a variety of ways.
26 |
27 |
28 | );
29 | }
30 |
31 | render() {
32 | return (
33 |
34 |
35 | Watson Discovery UI
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | {this.props.children}
48 |
53 |
54 |
55 |
56 | );
57 | }
58 | }
59 |
60 | DefaultLayout.propTypes = {
61 | hideHeader: PropTypes.bool,
62 | description: PropTypes.string,
63 | children: PropTypes.node.isRequired,
64 | initialData: PropTypes.string.isRequired
65 | };
66 |
67 | module.exports = DefaultLayout;
68 |
--------------------------------------------------------------------------------
/lib/utils.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2019 IBM Corp. All Rights Reserved.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the 'License'); you may not
5 | * use this file except in compliance with the License. You may obtain a copy of
6 | * the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an 'AS IS' BASIS, WITHOUT
12 | * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
13 | * License for the specific language governing permissions and limitations under
14 | * the License.
15 | */
16 |
17 | // Variables and functions needed by both server and client code
18 |
19 | /**
20 | * objectWithoutProperties - clear out unneeded properties from object.
21 | * object: object to scan
22 | * properties: items in object to remove
23 | */
24 | const objectWithoutProperties = (object, properties) => {
25 | 'use strict';
26 |
27 | const obj = {};
28 | const keys = Object.keys(object);
29 | keys.forEach(key => {
30 | if (properties.indexOf(key) < 0) {
31 | // keep this since it is not found in list of unneeded properties
32 | obj[key] = object[key];
33 | }
34 | });
35 |
36 | return obj;
37 | };
38 |
39 | /**
40 | * parseData - convert raw search results into collection of matching results.
41 | */
42 | const parseData = data => ({
43 | rawResponse: Object.assign({}, data),
44 | // sentiment: data.aggregations[0].results.reduce((accumulator, result) =>
45 | // Object.assign(accumulator, { [result.key]: result.matching_results }), {}),
46 | results: data.results
47 | });
48 |
49 | /**
50 | * formatData - format search results into items we can process easier. This includes
51 | * 1) only keeping fields we show in the UI
52 | * 2) highlight matching words in text
53 | * 3) if showing 'passages', ignore all other results
54 | */
55 | function formatData(data) {
56 | const formattedData = {};
57 | const newPassages = [];
58 |
59 | let count = 0;
60 | data.forEach(function(dataItem) {
61 | // only keep the data we show in the UI.
62 | if (dataItem.field === 'text') {
63 | count = count + 1;
64 | const newPassage = {
65 | id: count,
66 | text: dataItem.passage_text,
67 | score: dataItem.passage_score
68 | };
69 | newPassages.push(newPassage);
70 | }
71 | });
72 |
73 | formattedData.results = newPassages;
74 | console.log('Formatting Data: size = ' + newPassages.length);
75 | return formattedData;
76 | }
77 |
78 | module.exports = {
79 | objectWithoutProperties,
80 | parseData,
81 | formatData
82 | };
83 |
--------------------------------------------------------------------------------
/MAINTAINERS.md:
--------------------------------------------------------------------------------
1 | # Maintainers Guide
2 |
3 | This guide is intended for maintainers - anybody with commit access to one or
4 | more Code Pattern repositories.
5 |
6 | ## Methodology
7 |
8 | This repository does not have a traditional release management cycle, but
9 | should instead be maintained as a useful, working, and polished reference at
10 | all times. While all work can therefore be focused on the master branch, the
11 | quality of this branch should never be compromised.
12 |
13 | The remainder of this document details how to merge pull requests to the
14 | repositories.
15 |
16 | ## Merge approval
17 |
18 | The project maintainers use LGTM (Looks Good To Me) in comments on the pull
19 | request to indicate acceptance prior to merging. A change requires LGTMs from
20 | two project maintainers. If the code is written by a maintainer, the change
21 | only requires one additional LGTM.
22 |
23 | ## Reviewing Pull Requests
24 |
25 | We recommend reviewing pull requests directly within GitHub. This allows a
26 | public commentary on changes, providing transparency for all users. When
27 | providing feedback be civil, courteous, and kind. Disagreement is fine, so long
28 | as the discourse is carried out politely. If we see a record of uncivil or
29 | abusive comments, we will revoke your commit privileges and invite you to leave
30 | the project.
31 |
32 | During your review, consider the following points:
33 |
34 | ### Does the change have positive impact?
35 |
36 | Some proposed changes may not represent a positive impact to the project. Ask
37 | whether or not the change will make understanding the code easier, or if it
38 | could simply be a personal preference on the part of the author (see
39 | [bikeshedding](https://en.wiktionary.org/wiki/bikeshedding)).
40 |
41 | Pull requests that do not have a clear positive impact should be closed without
42 | merging.
43 |
44 | ### Do the changes make sense?
45 |
46 | If you do not understand what the changes are or what they accomplish, ask the
47 | author for clarification. Ask the author to add comments and/or clarify test
48 | case names to make the intentions clear.
49 |
50 | At times, such clarification will reveal that the author may not be using the
51 | code correctly, or is unaware of features that accommodate their needs. If you
52 | feel this is the case, work up a code sample that would address the pull
53 | request for them, and feel free to close the pull request once they confirm.
54 |
55 | ### Does the change introduce a new feature?
56 |
57 | For any given pull request, ask yourself "is this a new feature?" If so, does
58 | the pull request (or associated issue) contain narrative indicating the need
59 | for the feature? If not, ask them to provide that information.
60 |
61 | Are new unit tests in place that test all new behaviors introduced? If not, do
62 | not merge the feature until they are! Is documentation in place for the new
63 | feature? (See the documentation guidelines). If not do not merge the feature
64 | until it is! Is the feature necessary for general use cases? Try and keep the
65 | scope of any given component narrow. If a proposed feature does not fit that
66 | scope, recommend to the user that they maintain the feature on their own, and
67 | close the request. You may also recommend that they see if the feature gains
68 | traction among other users, and suggest they re-submit when they can show such
69 | support.
70 |
--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2019 IBM Corp. All Rights Reserved.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the 'License'); you may not
5 | * use this file except in compliance with the License. You may obtain a copy of
6 | * the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an 'AS IS' BASIS, WITHOUT
12 | * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
13 | * License for the specific language governing permissions and limitations under
14 | * the License.
15 | */
16 |
17 | 'use strict';
18 |
19 | require('dotenv').config({
20 | silent: true
21 | });
22 |
23 | require('isomorphic-fetch');
24 | const messageBuilder = require('./message-builder');
25 | const assistant = require('./watson-assistant-service');
26 |
27 | /**
28 | * Back end server which handles initializing the Watson Assistant
29 | * service, and setting up route methods to handle client requests.
30 | */
31 | const WatsonAssistantService = new Promise((resolve) => {
32 | assistant.createSession({ assistantId: assistant.assistantId })
33 | .then(res => {
34 | console.log('Create Session result: ' + JSON.stringify(res.result, null, 2));
35 | messageBuilder.setAssistantId(assistant.assistantId);
36 | messageBuilder.setSessionId(res.result.session_id);
37 | resolve(createServer());
38 | })
39 | .catch(error => {
40 | // eslint-disable-next-line no-console
41 | console.log('Error creating session:');
42 | console.error(error);
43 | });
44 | });
45 |
46 | /**
47 | * createServer - create express server and handle requests
48 | * from client.
49 | */
50 | function createServer() {
51 | const server = require('./express');
52 |
53 | // Endpoint for Watson Assistant requests
54 | server.post('/api/message', function(req, res) {
55 | // build message
56 | const params = {};
57 | params.context = req.body.context;
58 | params.input = {
59 | text: req.body.message
60 | };
61 | const messageParams = messageBuilder.message(params);
62 | // Send the input to the conversation service
63 | assistant.message(messageParams, function(err, data) {
64 | if (err) {
65 | console.log('ERROR! ' + err.code);
66 | return res.status(err.code || 500).json(err);
67 | }
68 | return res.json(updateMessage(data));
69 | });
70 | });
71 |
72 | /**
73 | * Updates the response text using the intent confidence
74 | * @param {Object} response The response from the Assistant service
75 | * @return {Object} The response with the updated message
76 | */
77 | function updateMessage(response) {
78 | let responseText = null;
79 | if (!response.result.output) {
80 | response.result.output = {};
81 | } else {
82 | return response;
83 | }
84 | if (response.result.output.intents && response.result.output.intents[0]) {
85 | const intent = response.result.output.intents[0];
86 | // Depending on the confidence of the response the app can return different messages.
87 | // The confidence will vary depending on how well the system is trained. The service will always try to assign
88 | // a class/intent to the input. If the confidence is low, then it suggests the service is unsure of the
89 | // user's intent . In these cases it is usually best to return a disambiguation message
90 | // ('I did not understand your intent, please rephrase your question', etc..)
91 | if (intent.confidence >= 0.75) {
92 | responseText = 'I understood your intent was ' + intent.intent;
93 | } else if (intent.confidence >= 0.5) {
94 | responseText = 'I think your intent was ' + intent.intent;
95 | } else {
96 | responseText = 'I did not understand your intent';
97 | }
98 | }
99 | response.result.output.text = responseText;
100 | return response;
101 | }
102 |
103 | // initial start-up request
104 | server.get('/*', function(req, res) {
105 | console.log('In startup!');
106 |
107 | // render chatbot welcome message
108 | res.render('index', {});
109 | });
110 |
111 | return server;
112 | }
113 |
114 | module.exports = WatsonAssistantService;
115 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2019 IBM Corp. All Rights Reserved.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the 'License'); you may not
5 | * use this file except in compliance with the License. You may obtain a copy of
6 | * the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an 'AS IS' BASIS, WITHOUT
12 | * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
13 | * License for the specific language governing permissions and limitations under
14 | * the License.
15 | */
16 |
17 | import 'isomorphic-fetch';
18 | import React from 'react';
19 | import PropTypes from 'prop-types';
20 | import Messages from './Messages';
21 | import { Grid, Card, Input } from 'semantic-ui-react';
22 |
23 | const util = require('util');
24 |
25 | var messageCounter = 1;
26 |
27 | /**
28 | * Main React object that contains all objects on the web page.
29 | * This object manages all interaction between child objects as
30 | * well as posting messages to the Watson Assistant service.
31 | */
32 | class Main extends React.Component {
33 | constructor(...props) {
34 | super(...props);
35 | const {
36 | error,
37 | } = this.props;
38 |
39 | // change in state fires re-render of components
40 | this.state = {
41 | error: error,
42 | // assistant data
43 | context: {},
44 | userInput: '',
45 | conversation: [
46 | { id: 1,
47 | text: 'Welcome to the Ecobee support team chatbot!',
48 | owner: 'watson'
49 | }]
50 | };
51 | }
52 |
53 | /**
54 | * sendMessage - build the message that will be passed to the
55 | * Assistant service.
56 | */
57 | sendMessage(text) {
58 | var { context, conversation } = this.state;
59 | console.log('context: ' + JSON.stringify(context, null, 2));
60 |
61 | this.setState({
62 | context: context
63 | });
64 |
65 | // send request
66 | fetch('/api/message', {
67 | method: 'POST',
68 | headers: {
69 | 'Accept': 'application/json',
70 | 'Content-Type': 'application/json'
71 | },
72 | body: JSON.stringify({
73 | context: context,
74 | message: text
75 | })
76 | }).then(response => {
77 | if (response.ok) {
78 | return response.json();
79 | } else {
80 | throw response;
81 | }
82 | }).then(json => {
83 | console.log('+++ ASSISTANT RESULTS +++' + JSON.stringify(json, null, 2));
84 | const result = json.result.output.generic[0];
85 |
86 | // returned text from assistant will either be a pre-canned
87 | // dialog response, or Discovery Search result
88 | if (result.response_type === 'text') {
89 | // normal dialog response from Assistant
90 | // add to message list
91 | messageCounter += 1;
92 | conversation.push({
93 | id: messageCounter,
94 | text: result.text,
95 | owner: 'watson'
96 | });
97 | } else if (result.response_type === 'search') {
98 | console.log('GOT DISCO OUTPUT!');
99 | // got response from Assistant search skill
100 | // add a header to our message
101 | messageCounter += 1;
102 | conversation.push({
103 | id: messageCounter,
104 | text: result.header,
105 | owner: 'watson'
106 | });
107 |
108 | // find the result with the highest confidence
109 | let message;
110 | let score = 0;
111 | for (var i=0; i score) {
113 | score = result.results[i].result_metadata.confidence;
114 | message = result.results[i].body;
115 | }
116 | }
117 | if (result.results.length > 0) {
118 | messageCounter += 1;
119 | conversation.push({
120 | id: messageCounter,
121 | text: message,
122 | owner: 'watson'
123 | });
124 | }
125 | } else {
126 | messageCounter += 1;
127 | conversation.push({
128 | id: messageCounter,
129 | text: 'Sorry. Please repeat your question',
130 | owner: 'watson'
131 | });
132 | }
133 |
134 | this.setState({
135 | conversation: conversation,
136 | context: json.context,
137 | error: null,
138 | userInput: ''
139 | });
140 | scrollToMain();
141 |
142 | }).catch(response => {
143 | console.log('ERROR in fetch: ' + JSON.stringify(response, null, 2));
144 | this.setState({
145 | error: 'Error in assistant'
146 | });
147 | // eslint-disable-next-line no-console
148 | console.error(response);
149 | });
150 | }
151 |
152 | /**
153 | * Log Watson Assistant context values, so we can follow along with its logic.
154 | */
155 | printContext(context) {
156 | if (context.system) {
157 | if (context.system.dialog_stack) {
158 | console.log('Dialog Stack:');
159 | console.log(util.inspect(context, false, null));
160 | }
161 | }
162 | }
163 |
164 | /**
165 | * Display each key stroke in the UI.
166 | */
167 | handleOnChange(event) {
168 | this.setState({userInput: event.target.value});
169 | }
170 |
171 | /**
172 | * Send user message to Assistant.
173 | */
174 | handleKeyPress(event) {
175 | const { userInput, conversation } = this.state;
176 |
177 | if (event.key === 'Enter') {
178 | messageCounter += 1;
179 | conversation.push(
180 | { id: messageCounter,
181 | text: userInput,
182 | owner: 'user'
183 | }
184 | );
185 |
186 | console.log('handleKeyPress1');
187 | this.sendMessage(userInput);
188 | console.log('handleKeyPress2');
189 | this.setState({
190 | conversation: conversation,
191 | // clear out input field
192 | userInput: ''
193 | });
194 |
195 | }
196 | }
197 |
198 | /**
199 | * Get list of conversation message to display.
200 | */
201 | getListItems() {
202 | const { conversation } = this.state;
203 |
204 | return (
205 |
208 | );
209 | }
210 |
211 | /**
212 | * render - return all the home page objects to be rendered.
213 | */
214 | render() {
215 | const { userInput } = this.state;
216 |
217 | return (
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 | Document Search ChatBot
226 |
227 |
228 | {this.getListItems()}
229 |
230 |
238 |
239 |
240 |
241 |
242 |
243 |
244 | );
245 | }
246 | }
247 |
248 | /**
249 | * scrollToMain - scroll window to show 'main' rendered object.
250 | */
251 | function scrollToMain() {
252 | setTimeout(() => {
253 | const scrollY = document.querySelector('main').getBoundingClientRect().top + window.scrollY;
254 | window.scrollTo(0, scrollY);
255 | }, 0);
256 | }
257 |
258 | // type check to ensure we are called correctly
259 | Main.propTypes = {
260 | context: PropTypes.object,
261 | userInput: PropTypes.string,
262 | conversation: PropTypes.array,
263 | error: PropTypes.object
264 | };
265 |
266 | module.exports = Main;
267 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Apache License
2 | Version 2.0, January 2004
3 | http://www.apache.org/licenses/
4 |
5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6 |
7 | 1. Definitions.
8 |
9 | "License" shall mean the terms and conditions for use, reproduction,
10 | and distribution as defined by Sections 1 through 9 of this document.
11 |
12 | "Licensor" shall mean the copyright owner or entity authorized by
13 | the copyright owner that is granting the License.
14 |
15 | "Legal Entity" shall mean the union of the acting entity and all
16 | other entities that control, are controlled by, or are under common
17 | control with that entity. For the purposes of this definition,
18 | "control" means (i) the power, direct or indirect, to cause the
19 | direction or management of such entity, whether by contract or
20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
21 | outstanding shares, or (iii) beneficial ownership of such entity.
22 |
23 | "You" (or "Your") shall mean an individual or Legal Entity
24 | exercising permissions granted by this License.
25 |
26 | "Source" form shall mean the preferred form for making modifications,
27 | including but not limited to software source code, documentation
28 | source, and configuration files.
29 |
30 | "Object" form shall mean any form resulting from mechanical
31 | transformation or translation of a Source form, including but
32 | not limited to compiled object code, generated documentation,
33 | and conversions to other media types.
34 |
35 | "Work" shall mean the work of authorship, whether in Source or
36 | Object form, made available under the License, as indicated by a
37 | copyright notice that is included in or attached to the work
38 | (an example is provided in the Appendix below).
39 |
40 | "Derivative Works" shall mean any work, whether in Source or Object
41 | form, that is based on (or derived from) the Work and for which the
42 | editorial revisions, annotations, elaborations, or other modifications
43 | represent, as a whole, an original work of authorship. For the purposes
44 | of this License, Derivative Works shall not include works that remain
45 | separable from, or merely link (or bind by name) to the interfaces of,
46 | the Work and Derivative Works thereof.
47 |
48 | "Contribution" shall mean any work of authorship, including
49 | the original version of the Work and any modifications or additions
50 | to that Work or Derivative Works thereof, that is intentionally
51 | submitted to Licensor for inclusion in the Work by the copyright owner
52 | or by an individual or Legal Entity authorized to submit on behalf of
53 | the copyright owner. For the purposes of this definition, "submitted"
54 | means any form of electronic, verbal, or written communication sent
55 | to the Licensor or its representatives, including but not limited to
56 | communication on electronic mailing lists, source code control systems,
57 | and issue tracking systems that are managed by, or on behalf of, the
58 | Licensor for the purpose of discussing and improving the Work, but
59 | excluding communication that is conspicuously marked or otherwise
60 | designated in writing by the copyright owner as "Not a Contribution."
61 |
62 | "Contributor" shall mean Licensor and any individual or Legal Entity
63 | on behalf of whom a Contribution has been received by Licensor and
64 | subsequently incorporated within the Work.
65 |
66 | 2. Grant of Copyright License. Subject to the terms and conditions of
67 | this License, each Contributor hereby grants to You a perpetual,
68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
69 | copyright license to reproduce, prepare Derivative Works of,
70 | publicly display, publicly perform, sublicense, and distribute the
71 | Work and such Derivative Works in Source or Object form.
72 |
73 | 3. Grant of Patent License. Subject to the terms and conditions of
74 | this License, each Contributor hereby grants to You a perpetual,
75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
76 | (except as stated in this section) patent license to make, have made,
77 | use, offer to sell, sell, import, and otherwise transfer the Work,
78 | where such license applies only to those patent claims licensable
79 | by such Contributor that are necessarily infringed by their
80 | Contribution(s) alone or by combination of their Contribution(s)
81 | with the Work to which such Contribution(s) was submitted. If You
82 | institute patent litigation against any entity (including a
83 | cross-claim or counterclaim in a lawsuit) alleging that the Work
84 | or a Contribution incorporated within the Work constitutes direct
85 | or contributory patent infringement, then any patent licenses
86 | granted to You under this License for that Work shall terminate
87 | as of the date such litigation is filed.
88 |
89 | 4. Redistribution. You may reproduce and distribute copies of the
90 | Work or Derivative Works thereof in any medium, with or without
91 | modifications, and in Source or Object form, provided that You
92 | meet the following conditions:
93 |
94 | (a) You must give any other recipients of the Work or
95 | Derivative Works a copy of this License; and
96 |
97 | (b) You must cause any modified files to carry prominent notices
98 | stating that You changed the files; and
99 |
100 | (c) You must retain, in the Source form of any Derivative Works
101 | that You distribute, all copyright, patent, trademark, and
102 | attribution notices from the Source form of the Work,
103 | excluding those notices that do not pertain to any part of
104 | the Derivative Works; and
105 |
106 | (d) If the Work includes a "NOTICE" text file as part of its
107 | distribution, then any Derivative Works that You distribute must
108 | include a readable copy of the attribution notices contained
109 | within such NOTICE file, excluding those notices that do not
110 | pertain to any part of the Derivative Works, in at least one
111 | of the following places: within a NOTICE text file distributed
112 | as part of the Derivative Works; within the Source form or
113 | documentation, if provided along with the Derivative Works; or,
114 | within a display generated by the Derivative Works, if and
115 | wherever such third-party notices normally appear. The contents
116 | of the NOTICE file are for informational purposes only and
117 | do not modify the License. You may add Your own attribution
118 | notices within Derivative Works that You distribute, alongside
119 | or as an addendum to the NOTICE text from the Work, provided
120 | that such additional attribution notices cannot be construed
121 | as modifying the License.
122 |
123 | You may add Your own copyright statement to Your modifications and
124 | may provide additional or different license terms and conditions
125 | for use, reproduction, or distribution of Your modifications, or
126 | for any such Derivative Works as a whole, provided Your use,
127 | reproduction, and distribution of the Work otherwise complies with
128 | the conditions stated in this License.
129 |
130 | 5. Submission of Contributions. Unless You explicitly state otherwise,
131 | any Contribution intentionally submitted for inclusion in the Work
132 | by You to the Licensor shall be under the terms and conditions of
133 | this License, without any additional terms or conditions.
134 | Notwithstanding the above, nothing herein shall supersede or modify
135 | the terms of any separate license agreement you may have executed
136 | with Licensor regarding such Contributions.
137 |
138 | 6. Trademarks. This License does not grant permission to use the trade
139 | names, trademarks, service marks, or product names of the Licensor,
140 | except as required for reasonable and customary use in describing the
141 | origin of the Work and reproducing the content of the NOTICE file.
142 |
143 | 7. Disclaimer of Warranty. Unless required by applicable law or
144 | agreed to in writing, Licensor provides the Work (and each
145 | Contributor provides its Contributions) on an "AS IS" BASIS,
146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 | implied, including, without limitation, any warranties or conditions
148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 | PARTICULAR PURPOSE. You are solely responsible for determining the
150 | appropriateness of using or redistributing the Work and assume any
151 | risks associated with Your exercise of permissions under this License.
152 |
153 | 8. Limitation of Liability. In no event and under no legal theory,
154 | whether in tort (including negligence), contract, or otherwise,
155 | unless required by applicable law (such as deliberate and grossly
156 | negligent acts) or agreed to in writing, shall any Contributor be
157 | liable to You for damages, including any direct, indirect, special,
158 | incidental, or consequential damages of any character arising as a
159 | result of this License or out of the use or inability to use the
160 | Work (including but not limited to damages for loss of goodwill,
161 | work stoppage, computer failure or malfunction, or any and all
162 | other commercial damages or losses), even if such Contributor
163 | has been advised of the possibility of such damages.
164 |
165 | 9. Accepting Warranty or Additional Liability. While redistributing
166 | the Work or Derivative Works thereof, You may choose to offer,
167 | and charge a fee for, acceptance of support, warranty, indemnity,
168 | or other liability obligations and/or rights consistent with this
169 | License. However, in accepting such obligations, You may act only
170 | on Your own behalf and on Your sole responsibility, not on behalf
171 | of any other Contributor, and only if You agree to indemnify,
172 | defend, and hold each Contributor harmless for any liability
173 | incurred by, or claims asserted against, such Contributor by reason
174 | of your accepting any such warranty or additional liability.
175 |
176 | END OF TERMS AND CONDITIONS
177 |
178 | APPENDIX: How to apply the Apache License to your work.
179 |
180 | To apply the Apache License to your work, attach the following
181 | boilerplate notice, with the fields enclosed by brackets "[]"
182 | replaced with your own identifying information. (Don't include
183 | the brackets!) The text should be enclosed in the appropriate
184 | comment syntax for the file format. We also recommend that a
185 | file or class name and description of purpose be included on the
186 | same "printed page" as the copyright notice for easier
187 | identification within third-party archives.
188 |
189 | Copyright [yyyy] [name of copyright owner]
190 |
191 | Licensed under the Apache License, Version 2.0 (the "License");
192 | you may not use this file except in compliance with the License.
193 | You may obtain a copy of the License at
194 |
195 | http://www.apache.org/licenses/LICENSE-2.0
196 |
197 | Unless required by applicable law or agreed to in writing, software
198 | distributed under the License is distributed on an "AS IS" BASIS,
199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 | See the License for the specific language governing permissions and
201 | limitations under the License.
202 |
--------------------------------------------------------------------------------
/public/css/application.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 |
3 | .base--radio + label,
4 | .text-input,
5 | input[type=radio] + label {
6 | position: relative;
7 | }
8 |
9 | .base--a,
10 | .icon:before,
11 | .rss-feed--icon,
12 | a {
13 | text-decoration: none;
14 | }
15 |
16 | .base--input,
17 | input,
18 | input[type=text] {
19 | font-family: "Helvetica Neue", Helvetica, "Open Sans", Arial, "Lucida Grande", Roboto, sans-serif;
20 | }
21 |
22 | body,
23 | div,
24 | h2,
25 | h5,
26 | header,
27 | label,
28 | li,
29 | main,
30 | nav,
31 | p,
32 | section,
33 | span,
34 | ul {
35 | background: 0 0;
36 | border: 0;
37 | font-size: 100%;
38 | margin: 0;
39 | outline: 0;
40 | padding: 0;
41 | vertical-align: baseline;
42 | }
43 |
44 | input {
45 | color: inherit;
46 | font: inherit;
47 | margin: 0;
48 | vertical-align: middle;
49 | }
50 |
51 | input::-moz-focus-inner {
52 | border: 0;
53 | padding: 0;
54 | }
55 |
56 | input[type=radio] {
57 | padding: 0;
58 | }
59 |
60 | .base--input,
61 | input,
62 | input[type=text] {
63 | width: 100%;
64 | padding: .6em 1em;
65 | font-size: 1em;
66 | font-weight: 300;
67 | border: 2px solid #464646;
68 | background-color: #fff;
69 | line-height: normal;
70 | display: block;
71 | }
72 |
73 | .base--input:focus,
74 | input:focus {
75 | outline: #9855d4 solid 3px;
76 | border-color: #9855d4;
77 | }
78 |
79 | .base--input:disabled,
80 | input:disabled {
81 | background-color: #e0e0e0;
82 | }
83 |
84 | label {
85 | display: block;
86 | margin: 1.25em 0 0.25em;
87 | }
88 |
89 | .story,
90 | .story--date {
91 | margin-bottom: 0.5rem;
92 | }
93 |
94 | .base--inline-label {
95 | display: inline;
96 | }
97 |
98 | .base--radio,
99 | input[type=radio] {
100 | display: none;
101 | }
102 |
103 | .base--radio + label::before,
104 | input[type=radio] + label::before {
105 | display: inline-block;
106 | width: 1em;
107 | height: 1em;
108 | margin-right: 1rem;
109 | vertical-align: middle;
110 | border: 2px solid #aeaeae;
111 | border-radius: 50%;
112 | content: '';
113 | transform: translateY(-0.125em);
114 | }
115 |
116 | .base--radio:checked + label::before,
117 | input[type=radio]:checked + label::before {
118 | background: radial-gradient(#323232 40%, rgba(0, 0, 0, 0) 40%);
119 | }
120 |
121 | .base--button {
122 | padding: .25em 2em;
123 | color: #9855d4;
124 | font-weight: 500;
125 | background-color: transparent;
126 | border: 2px solid #9855d4;
127 | border-radius: 10rem;
128 | transition: .2s;
129 | display: inline-block;
130 | }
131 |
132 | .base--button:focus,
133 | .base--button:hover {
134 | background-color: rgba(38, 38, 38, 0);
135 | border-color: #bd92e3;
136 | color: #bd92e3;
137 | }
138 |
139 | .base--button:active {
140 | transition: 0s;
141 | transform: translateY(2px);
142 | }
143 |
144 | .base--input {
145 | max-width: 30rem;
146 | border-width: 1px;
147 | border-color: #777677;
148 | }
149 |
150 | .base--input:focus,
151 | .base--input:hover {
152 | border-width: 1px;
153 | outline-width: 1px;
154 | }
155 |
156 | .text-input--input[type=text]:focus,
157 | a:active,
158 | a:hover,
159 | input:focus {
160 | outline: 0;
161 | }
162 |
163 | .text-input {
164 | border: none;
165 | border-bottom: 1px solid #e0e0e0;
166 | display: block;
167 | }
168 |
169 | .text-input--input[type=text] {
170 | border: none;
171 | padding-left: 0;
172 | padding-right: 0;
173 | box-shadow: 0 2px 0 0 #af6ee8;
174 | overflow: visible;
175 | }
176 |
177 | .text-input--input[type=text]:focus::-webkit-input-placeholder {
178 | color: #000;
179 | }
180 |
181 | .text-input--input[type=text]:focus:-ms-input-placeholder {
182 | color: #000;
183 | }
184 |
185 | .text-input--input[type=text]:focus::placeholder {
186 | color: #000;
187 | }
188 |
189 | .text-input--dummy {
190 | display: inline;
191 | font-weight: 300;
192 | position: absolute;
193 | top: 0;
194 | left: 0;
195 | visibility: hidden;
196 | }
197 |
198 | .bar {
199 | display: -ms-flexbox;
200 | display: flex;
201 | -ms-flex-align: center;
202 | align-items: center;
203 | width: 100%;
204 | max-width: 6rem;
205 | }
206 |
207 | .bar--full-bar {
208 | height: .5rem;
209 | border: 1px solid #777677;
210 | position: relative;
211 | width: calc(100% - 2rem);
212 | margin-right: 0.5rem;
213 | }
214 |
215 | .bar--value-bar {
216 | background-color: #777677;
217 | height: 100%;
218 | position: absolute;
219 | top: 0;
220 | left: 0;
221 | }
222 |
223 | .base--radio:checked + .buttons-group--button,
224 | .buttons-group--button:active {
225 | background-color: #9855d4;
226 | color: #fff;
227 | }
228 |
229 | .query,
230 | .query--search-container {
231 | position: relative;
232 | }
233 |
234 | .bar--score {
235 | width: 1.5rem;
236 | text-align: right;
237 | margin-top: 0;
238 | vertical-align: right;
239 | font-size: 0.8rem;
240 | }
241 |
242 | .buttons-group--button {
243 | text-align: center;
244 | border-width: 1px 1px 1px 0;
245 | font-weight: 300;
246 | white-space: nowrap;
247 | padding: .25rem 0;
248 | overflow: hidden;
249 | border-radius: 0;
250 | margin-top: 0;
251 | }
252 |
253 | .buttons-group--button:active {
254 | transform: none;
255 | }
256 |
257 | .buttons-group--button_first {
258 | border-radius: 10rem 0 0 10rem;
259 | border-left-width: 1px;
260 | }
261 |
262 | .buttons-group--button_last {
263 | border-radius: 0 10rem 10rem 0;
264 | border-left: none;
265 | }
266 |
267 | .base--radio + .buttons-group--button:before {
268 | display: none;
269 | }
270 |
271 | .query {
272 | padding: 0;
273 | background-color: #42126c;
274 | min-height: 500px;
275 | }
276 |
277 | @media (min-width: 768px) {
278 | .query {
279 | height: 500px;
280 | }
281 | }
282 | .query .text-input--input {
283 | background: 0 0;
284 | color: #fff;
285 | font-size: 1em;
286 | max-width: calc(100% - 5rem);
287 | box-shadow: 0 2px 0 0 #fff;
288 | padding-bottom: 1.1rem;
289 | }
290 |
291 | .query::-webkit-input-placeholder {
292 | color: #aaa;
293 | }
294 |
295 | .query .text-input--input:focus:-ms-input-placeholder {
296 | color: #aaa;
297 | }
298 |
299 | .query .text-input--input:focus::-webkit-input-placeholder {
300 | color: #aaa;
301 | }
302 |
303 | .query .text-input--input:focus::-moz-placeholder {
304 | color: #aaa;
305 | }
306 |
307 | .query .text-input--input:focus::placeholder {
308 | color: #aaa;
309 | }
310 |
311 | .query .text-input--input:-webkit-input-placeholder {
312 | color: #aaa;
313 | }
314 |
315 | .query .text-input--input::-moz-placeholder {
316 | color: #aaa;
317 | }
318 |
319 | .query .text-input--input:-ms-input-placeholder {
320 | color: #aaa;
321 | }
322 |
323 | .query .text-input--input::-webkit-input-placeholder {
324 | color: #aaa;
325 | }
326 |
327 | .query .text-input--input::placeholder {
328 | color: #aaa;
329 | }
330 |
331 | .query .text-input--dummy {
332 | font-size: 1em;
333 | width: 100%;
334 | overflow-x: hidden;
335 | }
336 |
337 | .query--text-input-container {
338 | display: block;
339 | position: relative;
340 | }
341 |
342 | .query--icon-container {
343 | display: inline-block;
344 | margin-top: 0;
345 | position: absolute;
346 | right: 1.5rem;
347 | bottom: 1rem;
348 | cursor: pointer;
349 | }
350 |
351 | .header,
352 | .prism {
353 | position: relative;
354 | }
355 |
356 | .query--icon-container .icon {
357 | height: 1.25rem;
358 | width: 1.25rem;
359 | }
360 |
361 | .query_collapsed {
362 | height: auto;
363 | min-height: auto;
364 | padding: 4rem 0;
365 | }
366 |
367 | .query_collapsed .query--search-container {
368 | margin-top: 0;
369 | }
370 |
371 | .query_collapsed .text-input {
372 | padding-left: 1.25rem;
373 | }
374 |
375 | @media (min-width: 415px) {
376 | .query .text-input--input {
377 | font-size: 1.25em;
378 | padding-bottom: 1rem;
379 | }
380 |
381 | .query .text-input--dummy {
382 | font-size: 1.25em;
383 | }
384 |
385 | .query--icon-container .icon {
386 | height: 1.25rem;
387 | width: 1.25rem;
388 | }
389 |
390 | .query--icon-container {
391 | bottom: 1.225rem;
392 | }
393 | }
394 | @media (min-width: 485px) {
395 | .query .text-input--dummy,
396 | .query .text-input--input {
397 | font-size: 1.5em;
398 | }
399 |
400 | .query--icon-container .icon {
401 | height: 1.5rem;
402 | width: 1.5rem;
403 | }
404 |
405 | .query--icon-container {
406 | bottom: 1rem;
407 | }
408 | }
409 | @media (min-width: 615px) {
410 | .query .text-input--input {
411 | font-size: 2em;
412 | padding-bottom: 0.35rem;
413 | }
414 |
415 | .query .text-input--dummy {
416 | font-size: 2em;
417 | }
418 |
419 | .query--icon-container .icon {
420 | height: 1.75rem;
421 | width: 1.75rem;
422 | }
423 |
424 | .query--icon-container {
425 | bottom: 0.75rem;
426 | }
427 | }
428 | @media (min-width: 768px) {
429 | .query .text-input--input {
430 | font-size: 1.25em;
431 | padding-bottom: 1.1rem;
432 | }
433 |
434 | .query .text-input--dummy {
435 | font-size: 1.25em;
436 | }
437 |
438 | .query--icon-container .icon {
439 | height: 1.25rem;
440 | width: 1.25rem;
441 | }
442 |
443 | .query--icon-container {
444 | bottom: 1rem;
445 | }
446 | }
447 | @media (min-width: 815px) {
448 | .query .text-input--input {
449 | font-size: 1.5em;
450 | padding-bottom: 0.75rem;
451 | }
452 |
453 | .query .text-input--dummy {
454 | font-size: 1.5em;
455 | }
456 |
457 | .query--icon-container .icon {
458 | height: 1.5rem;
459 | width: 1.5rem;
460 | }
461 | }
462 | @media (min-width: 885px) {
463 | .query .text-input--input {
464 | padding-left: 0;
465 | }
466 |
467 | .query--text-input-container {
468 | width: 48.93617%;
469 | margin-right: 2.12766%;
470 | float: left;
471 | }
472 |
473 | .query--search-container {
474 | margin-top: 4.75rem;
475 | }
476 |
477 | .query_collapsed .text-input--input {
478 | font-size: 1.25em;
479 | padding-bottom: 0.75rem;
480 | }
481 |
482 | .query_collapsed .text-input--dummy {
483 | font-size: 1.25em;
484 | }
485 | }
486 | @media (min-width: 1005px) {
487 | .query .text-input--input {
488 | font-size: 2em;
489 | padding-bottom: 0.35rem;
490 | }
491 |
492 | .query .text-input--dummy {
493 | font-size: 2em;
494 | }
495 |
496 | .query--icon-container .icon {
497 | height: 1.75rem;
498 | width: 1.75rem;
499 | }
500 |
501 | .query--icon-container {
502 | bottom: 0.75rem;
503 | }
504 |
505 | .query_collapsed .text-input--input {
506 | font-size: 1.5em;
507 | padding-bottom: 0.75rem;
508 | }
509 |
510 | .query_collapsed .text-input--dummy {
511 | font-size: 1.5em;
512 | }
513 | }
514 | .results--a,
515 | .results--a:visited {
516 | color: #9753e1;
517 | font-weight: inherit;
518 | background: 0 0;
519 | border: none;
520 | padding: 0;
521 | margin-top: 0;
522 | }
523 |
524 | .results--a:focus,
525 | .results--a:hover {
526 | color: #b07ce8;
527 | border-bottom: none;
528 | }
529 |
530 | .story--date {
531 | font-size: .7em;
532 | color: #5A5A5A;
533 | font-weight: 300;
534 | margin-top: 1rem;
535 | }
536 |
537 | .story--title {
538 | font-weight: 300;
539 | font-size: 1.3em;
540 | line-height: 1.3;
541 | }
542 |
543 | .story--score,
544 | .story--sentiment {
545 | font-size: 0.9em;
546 | }
547 |
548 | .story--source-and-score {
549 | margin-top: 0.05rem;
550 | }
551 |
552 | a,
553 | body {
554 | margin: 0;
555 | }
556 |
557 | .story--score,
558 | .story--sentiment {
559 | margin-top: 0;
560 | }
561 |
562 | .widget--header {
563 | display: block;
564 | }
565 |
566 | @media (min-width: 560px) {
567 | .widget {
568 | padding: 1rem 2rem;
569 | }
570 |
571 | .widget--header {
572 | display: -webkit-box;
573 | display: -ms-flexbox;
574 | display: flex;
575 | -webkit-box-align: center;
576 | -ms-flex-align: center;
577 | align-items: center;
578 | -webkit-box-orient: horizontal;
579 | -webkit-box-direction: normal;
580 | -ms-flex-direction: row;
581 | flex-direction: row;
582 | -webkit-box-pack: justify;
583 | -ms-flex-pack: justify;
584 | justify-content: space-between;
585 | }
586 |
587 | .widget--header-title {
588 | font-size: 2.25em;
589 | }
590 | }
591 | .buttons-group--button {
592 | background-color: transparent;
593 | color: #fff;
594 | border-color: #fff;
595 | }
596 |
597 | .buttons-group--button:hover,
598 | input[type=radio]:checked + label.buttons-group--button {
599 | background-color: #fff;
600 | color: #9855d4;
601 | border-color: #fff;
602 | }
603 |
604 | .query--flex-container {
605 | display: flex;
606 | align-items: flex-center;
607 | flex-direction: column;
608 | }
609 |
610 | .query--flex-container .query--text-input-container {
611 | width: 100%;
612 | }
613 |
614 | @media (max-width: 600px) {
615 | .query--flex-container {
616 | flex-direction: column;
617 | align-items: center;
618 | }
619 |
620 | .query--flex-container .query--text-input-container {
621 | width: 100%;
622 | }
623 | }
624 | .loader--container {
625 | text-align: center;
626 | padding: 3rem;
627 | }
628 |
629 | /* custom effects */
630 | .word-cloud .tag-cloud-tag {
631 | cursor: pointer;
632 | }
633 |
634 | .word-cloud span {
635 | text-decoration: underline;
636 | padding: 6px;
637 | }
638 |
639 | /* overrides for semantic-ui components */
640 |
641 | div.ui.grid.search-field-grid {
642 | background-color: #bdcbd6;
643 | }
644 |
645 | .ui.centered.fluid.card {
646 | background: #d9e5ef;
647 | }
648 |
649 | .ui.checkbox.filter-checkbox label {
650 | font-size: x-small !important;
651 | }
652 |
653 | div.ui.celled.grid.search-grid {
654 | margin-top: 0px;
655 | }
656 |
657 | div.ui.icon.input.searchinput {
658 | width: 500px;
659 | }
660 |
661 | div.ui.compact.floated.term-menu.menu {
662 | margin-left: 8px;
663 | }
664 |
665 | div.matches-pagination-bar {
666 | display: flex;
667 | justify-content: center;
668 | }
669 |
670 | div.ui.mini.statistics {
671 | display: inline-block;
672 | }
673 |
674 | div.ui.compact.sort-dropdown.menu {
675 | float: right;
676 | }
677 |
678 | h3.ui.center.aligned.header {
679 | padding-top: 80px;
680 | }
681 |
682 | div.content.right-item-list {
683 | text-align: right;
684 | }
685 |
686 | div.item.right-item-list {
687 | text-align: right;
688 | }
689 |
690 | div.ui.card.chatbot-container {
691 | width: 800px;
692 | }
693 |
694 | div.content.message-text {
695 | vertical-align: bottom !important;
696 | }
697 |
698 | div.content.dialog-header {
699 | text-align: center;
700 | background: #d4d4d5 !important;
701 | }
702 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://travis-ci.org/IBM/watson-discovery-sdu-with-assistant)
2 |
3 | # Enhance customer helpdesks with Smart Document Understanding using Assistant Search Skill
4 |
5 | In this code pattern, we walk you through a working example of a web app that utilizes multiple Watson services to create a better customer care experience.
6 |
7 | Using the Watson Discovery Smart Document Understanding (SDU) feature, we will enhance the Discovery model so that queries will be better focused to only search the most relevant information found in a typical owner's manual.
8 |
9 | Using Watson Assistant, we will use a standard customer care dialog to handle a typical conversation between a customer and a company representitive. When a customer question involves operation of a product, the Assistant dialog skill will communicate with the Discovery service using an Assistant search skill.
10 |
11 | > **NOTE**: This code pattern includes instructions for accessing Watson services running on both IBM Cloud and on IBM Cloud Pak for Data. In setting up your app, the main difference is the additional credentials required to access the IBM Cloud Pak for Data cluster that is hosting your Watson services.
12 | >
13 | > Click [here](https://www.ibm.com/products/cloud-pak-for-data) for more information about IBM Cloud Pak for Data.
14 |
15 | ## What is SDU?
16 |
17 | SDU trains Watson Discovery to extract custom fields in your documents. Customizing how your documents are indexed into Discovery will improve the answers returned from queries.
18 |
19 | With SDU, you annotate fields within your documents to train custom conversion models. As you annotate, Watson is learning and will start predicting annotations. SDU models can also be exported and used on other collections.
20 |
21 | Current document type support for SDU is based on your plan:
22 |
23 | * Lite plans: PDF, Word, PowerPoint, Excel, JSON, HTML
24 | * Advanced plans: PDF, Word, PowerPoint, Excel, PNG, TIFF, JPG, JSON, HTML
25 |
26 | Here is a great video that provides an overview of the benefits of SDU, and a walk-through of how to apply it to your document:
27 |
28 | [](https://www.youtube.com/watch?v=Jpr3wVH3FVA)
29 |
30 | ## What is an Assistant Search Skill?
31 |
32 | An Assistant search skill is a mechanism that allows you to directly query a Watson Discovery collection from your Assistant dialog. A search skill is triggered when the dialog reaches a node that has a search skill enabled. The user query is then passed to the Watson Discovery collection via the search skill, and the results are returned to the dialog for display to the user.
33 |
34 | Click [here](https://cloud.ibm.com/docs/services/assistant?topic=assistant-skill-search-add) for more information about the Watson Assistant search skill.
35 |
36 | > **NOTE**: Another method of integrating Watson Assistant with Watson Discovery is through the use of a webhook, which can be created using IBM Cloud Functions. Click [here](https://github.com/IBM/watson-discovery-sdu-with-assistant) to view a code pattern that uses this technique.
37 |
38 | ## Flow
39 |
40 | 
41 |
42 | 1. The document is annotated using Watson Discovery SDU
43 | 1. The user interacts with the backend server via the app UI. The frontend app UI is a chatbot that engages the user in a conversation.
44 | 1. Dialog between the user and backend server is coordinated using a Watson Assistant dialog skill.
45 | 1. If the user asks a product operation question, a search query is issued to the Watson Discovery service via a Watson Assistant search skill.
46 |
47 | # Watch the Video
48 |
49 | [](https://youtu.be/-yniuX-Poyw)
50 |
51 | >**NOTE**: This video is using `V1` versions of both Watson Discovery and Assistant. The concepts are similar in `V2`, but the navigation steps may be different.
52 |
53 | # Steps:
54 |
55 | 1. [Clone the repo](#1-clone-the-repo)
56 | 1. [Create Watson services](#2-create-watson-services)
57 | 1. [Configure Watson Discovery](#3-configure-watson-discovery)
58 | 1. [Configure Watson Assistant](#4-configure-watson-assistant)
59 | 1. [Add Watson service credentials to environment file](#5-add-watson-service-credentials-to-environment-file)
60 | 1. [Run the application](#6-run-the-application)
61 |
62 | ### 1. Clone the repo
63 |
64 | ```bash
65 | git clone https://github.com/IBM/watson-assistant-with-search-skill
66 | ```
67 |
68 | ### 2. Create Watson services
69 |
70 | Create the following services:
71 |
72 | * **Watson Assistant**
73 | * **Watson Discovery**
74 |
75 | The instructions will depend on whether you are provisioning services using IBM Cloud Pak for Data or on IBM Cloud.
76 |
77 | Click to expand one:
78 |
79 | IBM Cloud Pak for Data
80 |
81 | Use the following instructions for each of the services.
82 |
83 |
Install and provision service instances
84 |
85 | The services are not available by default. An administrator must install them on the IBM Cloud Pak for Data platform, and you must be given access to the service. To determine whether the service is installed, Click the Services icon () and check whether the service is enabled.
86 |
87 |
88 | IBM Cloud
89 |
90 |
Create the service instances
91 |
92 |
If you do not have an IBM Cloud account, register for a free trial account here.
Create a Discovery instance from the catalog and select the default "Plus" plan.
95 |
96 |
97 | >**NOTE**: The first instance of the `Plus` plan for IBM Watson Discovery comes with a free 30-day trial; it is chargeable once the trial is over. If you no longer require your Plus instance for Watson Discovery after going through this exercise, feel free to delete it.
98 |
99 |
100 | ### 3. Configure Watson Discovery
101 |
102 | Start by launching your Watson Discovery instance. How you do this will depend on whether you provisioned the instance on IBM Cloud Pak for Data or on IBM Cloud.
103 |
104 | Click to expand one:
105 |
106 | IBM Cloud Pak for Data
107 |
108 | Find the Discovery service in your list of `Provisioned Instances` in your IBM Cloud Pak for Data Dashboard.
109 |
110 | Click on `View Details` from the options menu associated with your Discovery service.
111 |
112 | 
113 |
114 | Click on `Open Watson Discovery`.
115 |
116 | 
117 |
118 |
119 |
120 | IBM Cloud
121 |
122 | From the IBM Cloud dashboard, click on your new Discovery service in the resource list.
123 |
124 | 
125 |
126 | From the `Manage` tab panel of your Discovery service, click the `Launch Watson Discovery` button.
127 |
128 |
129 |
130 | ### Create a project and collection
131 |
132 | The landing page for Watson Discovery is a panel showing your current projects.
133 |
134 | Create a new project by clicking the `New Project` tile.
135 |
136 | > **NOTE**: The Watson Discovery service queries are defaulted to be performed on all collections within a project. For this reason, it is advised that you create a new project to contain the collection we will be creating for this code pattern.
137 |
138 | 
139 |
140 | Give the project a unique name and select the `Document Retrieval` option, then click `Next`.
141 |
142 | 
143 |
144 | For data source, click on the `Upload data` tile and click `Next`.
145 |
146 | 
147 |
148 | Enter a unique name for your collection and click `Finish`.
149 |
150 | ### Import the document
151 |
152 | On the `Configure Collection` panel, click the `Drag and drop files here or upload` button to select and upload the `ecobee3_UserGuide.pdf` file located in the `data` directory of your local repo.
153 |
154 | 
155 |
156 | >**NOTE**: The `Ecobee` is a popular residential thermostat that has a wifi interface and multiple configuration options.
157 |
158 | Once the file is loaded, click the `Finish` button.
159 |
160 | Note that after the file is loaded it may take some time for Watson Discovery to process the file and make it available for use. You should see a notification once the file is ready.
161 |
162 | ### Access the collection
163 |
164 | To access the collection, make sure you are in the correct project, then click the `Manage Collections` tab in the left-side of the panel.
165 |
166 | 
167 |
168 | Click the collection tile to access it.
169 |
170 | 
171 |
172 | Before applying Smart Document Understanding (SDU) to our document, lets do some simple queries on the data so that we can compare it to results found after applying SDU. Click the `Try it out` panel to bring up the query panel.
173 |
174 | 
175 |
176 | Enter queries related to the operation of the thermostat and view the results. As you will see, the results are not very useful, and in some cases, not even related to the question.
177 |
178 | ### Annotate with SDU
179 |
180 | Now let's apply SDU to our document to see if we can generate some better query responses.
181 |
182 | 
183 |
184 | From the `Define structure` drop-down menu, click on `New fields`.
185 |
186 | 
187 |
188 | From the `Identify fields` tab panel, click on `User-trained models`, the click `Submit` from the confirmation dialog.
189 |
190 | Click the `Apply changes and reprocess` button in the top right corner. This will SDU process.
191 |
192 | Here is the layout of the SDU annotation panel:
193 |
194 | 
195 |
196 | The goal is to annotate all of the pages in the document so Discovery can learn what text is important, and what text can be ignored.
197 |
198 | * [1] is the list of pages in the manual. As each is processed, a green check mark will appear on the page.
199 | * [2] is the current page being annotated.
200 | * [3] is a graphic display of the same page, but allows you to select regions that you can label.
201 | * [4] is the list of labels you can assign to the graphic page.
202 | * Click [5] to submit the page to Discovery.
203 | * Click [6] when you have completed the annotation process.
204 |
205 | To add/change a label, select the new label, then click on the text areas in the graphic page to apply it.
206 |
207 | As you go though the annotations one page at a time, Discovery is learning and should start automatically updating the upcoming pages. Once you get to a page that is already correctly annotated, you can stop, or simply click `Submit` [5] to acknowledge it is correct. The more pages you annotate, the better the model will be trained.
208 |
209 | For this specific owner's manual, at a minimum, it is suggested to mark the following:
210 |
211 | * The main title page as `title`
212 | * The table of contents (shown in the first few pages) as `table_of_contents`
213 | * All headers and sub-headers (typed in light green text) as a `subtitle`
214 | * All page numbers as `footers`
215 | * All circuitry diagram pages (located near the end of the document) as a `footer`
216 | * All licensing information (located in the last few pages) as a `footer`
217 | * All other text should be marked as `text`.
218 |
219 | Click the `Apply changes and reprocess` button [6] to load your changes. Wait for Discovery to notify you that the reprocessing is complete.
220 |
221 | Next, click on the `Manage fields` [1] tab.
222 |
223 | 
224 |
225 | * [2] Here is where you tell Discovery which fields to ignore. Using the `on/off` buttons, turn off all labels except `subtitles` and `text`.
226 | * [3] is telling Discovery to split the document apart, based on `subtitle`.
227 | * Click [4] to submit your changes.
228 |
229 | Return to the `Activity` tab. After the changes are processed (may take some time), your collection will look very different:
230 |
231 | 
232 |
233 | Return to the query panel (click `Try it out`) and see how much better the results are.
234 |
235 | 
236 |
237 |
238 |
239 | ### 4. Configure Watson Assistant
240 |
241 | The instructions for configuring Watson Assistant are basically the same for both IBM Cloud Pak for Data and IBM Cloud.
242 |
243 | One difference is how you launch the Watson Assistant service. Click to expand one:
244 |
245 | IBM Cloud Pak for Data
246 |
247 | Find the Assistant service in your list of `Provisioned Instances` in your IBM Cloud Pak for Data Dashboard.
248 |
249 | Click on `View Details` from the options menu associated with your Assistant service.
250 |
251 | Click on `Open Watson Assistant`.
252 |
253 |
254 |
255 | IBM Cloud
256 |
257 | Find the Assistant service in your IBM Cloud Dashboard.
258 |
259 | Click on the service and then click on Launch tool.
260 |
261 |
262 |
263 | ### Create assistant
264 |
265 | From the main Assistant panel, you will see 2 tab options - `Assistants` and `Skills`. An `Assistant` is the container for a set of `Skills`.
266 |
267 | Go to the Assistant tab and click `Create assistant`.
268 |
269 | 
270 |
271 | Give your assistant a unique name then click `Create assistant`.
272 |
273 | ### Create Assistant dialog skill
274 |
275 | You will then be taken to a panel that shows the `Skills` assigned to your `Assistant`. You can also revisit this panel by selected the desired `Assistant` listed in the `Assistants` tab panl.
276 |
277 | 
278 |
279 | Click on `Add dialog skill`.
280 |
281 | From the `Add Dialog Skill` panel, select the `Use sample skill` tab.
282 |
283 | Select the `Customer Care Sample Skill` as your template.
284 |
285 | The newly created dialog skill should now be shown in your Assistant panel:
286 |
287 | 
288 |
289 | Click on your newly created dialog skill to edit it.
290 |
291 | #### Add new intent
292 |
293 | The default customer care dialog does not have a way to deal with any questions involving outside resources, so we will need to add this.
294 |
295 | Create a new `intent` that can detect when the user is asking about operating the Ecobee thermostat.
296 |
297 | From the `Customer Care Sample Skill` panel, select the `Intents` tab.
298 |
299 | Click the `Create intent` button.
300 |
301 | Name the intent `#Product_Information`, and at a minimum, enter the following example questions to be associated with it.
302 |
303 | 
304 |
305 | #### Create new dialog node
306 |
307 | Now we need to add a node to handle our intent. Click on the back arrow in the top left corner of the panel to return to the main panel. Click on the `Dialog` tab to bring up the nodes defined for the dialog.
308 |
309 | Select the `What can I do` node, then click on the drop down menu and select the `Add node below` option.
310 |
311 | 
312 |
313 | Name the node "Ask about product" [1] and assign it our new intent [2].
314 |
315 | 
316 |
317 | In the `Assistant responds` dropdown, select the option `Search skill`.
318 |
319 | This means that if Watson Assistant recognizes a user input such as "how do I set the time?", it will direct the conversation to this node, which will integrate with the search skill.
320 |
321 | ### Create Assistant search skill
322 |
323 | Return to the Skills panel by clicking the `Skills` icon in the left menu pane.
324 |
325 | From your Assistant skills panel, click on `Create skill`.
326 |
327 | For `Skill Type`, select `Search skill` and click `Next`.
328 |
329 | > **Note**: If you have provisioned Watson Assistant on IBM Cloud, the search skill is only offered on a paid plan, but a 30-day trial version is available if you click on the `Plus` button.
330 |
331 | Give your search skill a unique name, then click `Continue`.
332 |
333 | From the search skill panel, select the Discovery service instance and collection you created previously.
334 |
335 | 
336 |
337 | Click `Configure` to continue.
338 |
339 | From the `Configure Search Response` panel, select `text` as the field to use for the `Body` of the response.
340 |
341 | 
342 |
343 | You can also customize the return `Message` to be more appropriate for your use case.
344 |
345 | Click `Create` to complete the configuration.
346 |
347 | Now when the dialog skill node invokes the search skill, the search skill will query the Discovery collection and display the text result to the user.
348 |
349 | ### Test in Assistant Tooling
350 |
351 | > **NOTE**: The following feature is currently only available for Watson Assistant provisioned on IBM Cloud.
352 |
353 | You should now see both skills have been added to your assistant.
354 |
355 | 
356 |
357 | Normally, you can test the dialog skill be selecting the `Try it` button located at the top right side of the dialog skill panel, but when integrated with a search skill, a different method of testing must be used.
358 |
359 | From your assistant panel, select `Preview link`.
360 |
361 | 
362 |
363 | From the list of available integration types, select `Preview link`.
364 |
365 | If you click on the generated URL link, you will be able to interact with your dialog skill. Note that the input "how do I turn on the heater?" has triggered our `Ask about product` dialog node and invoked our search skill.
366 |
367 | 
368 |
369 | ### 5. Add Watson service credentials to environment file
370 |
371 | Copy the local `env.sample` file and rename it `.env`:
372 |
373 | ```bash
374 | cp env.sample .env
375 | ```
376 |
377 | You will need to Update the `.env` file with the credentials from your Assistant service. First you will need the `Assistant ID` which can found by:
378 |
379 | * Click on your Assistant panel
380 | * Clicking on the three dots in the upper right-hand corner and select `Settings`.
381 | * Select the `API Details` tab.
382 |
383 | You will also need the credentials for your Assistant service. What credentials you will need will depend on if you provisioned Watson Assistant on IBM Cloud Pak for Data or on IBM Cloud. Click to expand one:
384 |
385 | IBM Cloud Pak for Data
386 |
387 |
Gather service credentials
388 |
389 |
390 |
For production use, create a user to use for authentication. From the main navigation menu (☰), select Administer > Manage users and then + New user.
391 |
From the main navigation menu (☰), select My instances.
392 |
On the Provisioned instances tab, find your service instance, and then hover over the last column to find and click the ellipses icon. Choose View details.
393 |
Copy the URL to use as the {SERVICE_NAME}_URL when you configure credentials.
394 |
Optionally, copy the Bearer token to use in development testing only. It is not recommended to use the bearer token except during testing and development because that token does not expire.
395 |
Use the Menu and select Users and + Add user to grant your user access to this service instance. This is the user name (and password) you will use when you configure credentials to allow the Node.js server to authenticate.
396 |
397 |
398 | Edit the `.env` file with the necessary credentials and settings.
399 |
400 | #### `env.sample:`
401 |
402 | ```bash
403 | # Copy this file to .env and replace the credentials with
404 | # your own before starting the app.
405 |
406 | #----------------------------------------------------------
407 | # IBM Cloud Pak for Data (username and password)
408 | #
409 | # If your services are running on IBM Cloud Pak for Data,
410 | # uncomment and configure these.
411 | # Remove or comment out the IBM Cloud section.
412 | #----------------------------------------------------------
413 |
414 | ASSISTANT_AUTH_TYPE=cp4d
415 | ASSISTANT_AUTH_URL=https://my-cpd-cluster.ibmcodetest.us
416 | ASSISTANT_USERNAME=my-username
417 | ASSISTANT_PASSWORD=my-password
418 | ASSISTANT_URL=https://my-cpd-cluster.ibmcodetest.us/assistant/assistant/instances/1576274722862/api
419 | # # If you use a self-signed certificate, you need to disable SSL verification.
420 | # # This is not secure and not recommended.
421 | ## ASSISTANT_AUTH_DISABLE_SSL=true
422 | ## ASSISTANT_DISABLE_SSL=true
423 | ASSISTANT_ID=
424 | ```
425 |
426 |
427 |
428 | IBM Cloud
429 |
430 | For the Watson Assistant service provisioned on IBM Cloud, all of your credentials will be available on the `API Details` panel.
431 |
432 | 
433 |
434 | > **Important**: ASSISTANT_URL should end with an instance ID. If it contains `v2/assistants/`, please delete this part of the URL. For example: "https://api.us-south.assistant.watson.cloud.ibm.com/instances/5db04c67/v2/assistants/a85f67e8-xxx/sessions" should be truncated to "https://api.us-south.assistant.watson.cloud.ibm.com/instances/5db04c67".
435 |
436 | Edit the `.env` file with the necessary credentials and settings.
437 |
438 | #### `env.sample:`
439 |
440 | ```bash
441 | # Copy this file to .env and replace the credentials with
442 | # your own before starting the app.
443 |
444 | #----------------------------------------------------------
445 | # IBM Cloud
446 | #
447 | # If your services are running on IBM Cloud,
448 | # uncomment and configure these.
449 | # Remove or comment out the IBM Cloud Pak for Data sections.
450 | #----------------------------------------------------------
451 |
452 | # Watson Assistant
453 | ASSISTANT_AUTH_TYPE=iam
454 | ASSISTANT_APIKEY=2ZzwqVghEhvLEvRxfxxxxxmLukVv3YIF411GvgXhHX
455 | ASSISTANT_URL=https://api.us-south.assistant.watson.cloud.ibm.com/instances/5db04c67-b295-9999-bb99-e5587b6bed91
456 | ASSISTANT_ID=25f892c4-e1e6-2222-b6c8-0b8660786d1f
457 | ```
458 |
459 |
460 |
461 | ### 6. Run the application
462 |
463 | 1. Install [Node.js](https://nodejs.org/en/) runtime or NPM.
464 | 1. Start the app by running `npm install`, followed by `npm start`.
465 | 1. Use the chatbot at `localhost:3000`.
466 |
467 | Sample questions:
468 |
469 | * **How do I override the scheduled temperature**
470 | * **How do I turn on the heater**
471 | * **how do I set a schedule?**
472 |
473 | # Sample Output
474 |
475 | 
476 |
477 | # Access to results in application
478 |
479 | * To view the raw JSON results returned from Discovery (via the Assistant search skill), open up the Development tools in your browser and view the console output. Here is sample of what you should see:
480 |
481 | ```json
482 | {
483 | "result": {
484 | "output": {
485 | "generic": [
486 | {
487 | "response_type": "search",
488 | "header": "I searched my knowledge base and found this information which might be useful:",
489 | "results": [
490 | {
491 | "title": null,
492 | "body": "You can override the scheduled temperature by moving the bubble on the temperature slider up or down. The blue number represents the cool set point; the orange number represents the heat set point. The new desired temperature will be the set point used for the Hold. The duration of the Hold is the last configured value (the default value is Until I change it, meaning it keeps the value indefinitely, until you choose to revert to the schedule or change it). You can adjust the default Hold time in the Preferences menu (page 21). To cancel the current Hold, touch the Hold message box displayed on the Home screen. You can touch the box anywhere and not just the X displayed on the box.",
493 | "url": null,
494 | "id": "3a5efee70d8cc9d70e2b94d22c15e2d1_24",
495 | "result_metadata": {
496 | "confidence": 0.3056213337457547,
497 | "score": 7.38697695
498 | },
499 | "highlight": {
500 | "text": [
501 | "You can override the scheduled temperature by moving the bubble on the temperature slider up or down. The blue number represents the cool set point; the orange number represents the heat set point. The new desired temperature will be the set point used for the Hold.",
502 | "The duration of the Hold is the last configured value (the default value is Until I change it, meaning it keeps the value indefinitely, until you choose to revert to the schedule or change it). You can adjust the default Hold time in the Preferences menu (page 21). To cancel the current Hold, touch the Hold message box displayed on the Home screen."
503 | ],
504 | "body": [
505 | "You can override the scheduled temperature by moving the bubble on the temperature slider up or down. The blue number represents the cool set point; the orange number represents the heat set point. The new desired temperature will be the set point used for the Hold.",
506 | "The duration of the Hold is the last configured value (the default value is Until I change it, meaning it keeps the value indefinitely, until you choose to revert to the schedule or change it). You can adjust the default Hold time in the Preferences menu (page 21). To cancel the current Hold, touch the Hold message box displayed on the Home screen."
507 | ]
508 | }
509 | },
510 | ```
511 |
512 | # Learn more
513 |
514 | * **Artificial Intelligence Code Patterns**: Enjoyed this Code Pattern? Check out our other [AI Code Patterns](https://developer.ibm.com/technologies/artificial-intelligence/)
515 | * **AI and Data Code Pattern Playlist**: Bookmark our [playlist](https://www.youtube.com/playlist?list=PLzUbsvIyrNfknNewObx5N7uGZ5FKH0Fde) with all of our Code Pattern videos
516 | * **With Watson**: Want to take your Watson app to the next level? Looking to utilize Watson Brand assets? [Join the With Watson program](https://www.ibm.com/watson/with-watson/) to leverage exclusive brand, marketing, and tech resources to amplify and accelerate your Watson embedded commercial solution.
517 |
518 | # License
519 |
520 | This code pattern is licensed under the Apache License, Version 2. Separate third-party code objects invoked within this code pattern are licensed by their respective providers pursuant to their own separate licenses. Contributions are subject to the [Developer Certificate of Origin, Version 1.1](https://developercertificate.org/) and the [Apache License, Version 2](https://www.apache.org/licenses/LICENSE-2.0.txt).
521 |
522 | [Apache License FAQ](https://www.apache.org/foundation/license-faq.html#WhatDoesItMEAN)
523 |
--------------------------------------------------------------------------------