Skip to content
This repository has been archived by the owner on Oct 3, 2023. It is now read-only.

Commit

Permalink
Nestjs (#250)
Browse files Browse the repository at this point in the history
* NestJs init

* Create controllers

* connected to typeorm

* conversation module setup

* userMessage module

* Save new conversation to table

* Controller testing

* Include beginnings of botMessage & Storyblok

* Include botMessage

* Save user messages

* Included botMessage DTO & save bot Message

* Lint, Tests & Travis

* Linter fixes

* Install additional package

* prettier

* Correct typings on service call

* Included DialogFlow

* Testing

* Fix conversationId client issue

* Bug fix

* Fingers crossed for Travis

* praying for travis

* Include validation

* Update front end translations

* Bug fixes

* Included logging

* Remove src-old

* Bot Message tests

* Add dialogflow tests

* Include rollbar

* Block user from typing when conversation has ended

* Fix refresh conversation

* Tests fix

* Migrations

* Update README.md

* Update app.json

* Fix db column error

* Enum Columns fix

* Dialogflow private key

* Travis test command

* Change dialogflow key processing

* Tidy package.jsons & Procfile

* Improve scripts

* Package updates

* Remove postbuild

* Update Procile

* Static serve

* Update static serve path

* Update static serve path

* Remove extra command in travis

* Fix linting

* Update package.json

Co-authored-by: Jiten (Jits) Bhagat <[email protected]>

* Improve Rollbar connection

* Include build script

* Change processing of dialogflow key for production

* Change labelling of rollbar environment

* Prevent saving to conversation in error

* Set langugage to english if none selected;

* Include shallow tests for all components

* Test action creators

* Add build-client command

* update client-build task

* Client testing linting

* Set dialogflow private key

* Update src/userMessage/userMessage.service.ts

Co-authored-by: Jiten (Jits) Bhagat <[email protected]>

* Throw specific errors

Co-authored-by: Jiten (Jits) Bhagat <[email protected]>
  • Loading branch information
sophieheb and jits authored May 11, 2020
1 parent 97c3662 commit eac0d42
Show file tree
Hide file tree
Showing 76 changed files with 13,432 additions and 5,166 deletions.
24 changes: 12 additions & 12 deletions .eslintrc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,29 @@ env:
es6: true
node: true
jest: true
root: true
extends:
- 'plugin:react/recommended'
- airbnb
- 'plugin:@typescript-eslint/eslint-recommended'
- 'plugin:@typescript-eslint/recommended'
- 'prettier'
- 'prettier/@typescript-eslint'
globals:
Atomics: readonly
SharedArrayBuffer: readonly
parser: "babel-eslint"
parser: '@typescript-eslint/parser'
parserOptions:
ecmaFeatures:
jsx: true
ecmaVersion: 7
project: tsconfig.json
sourceType: module
plugins:
- react
- '@typescript-eslint/eslint-plugin'
ignorePatterns:
- 'node_modules/'
- 'build/'
- 'src/db/init.js'
rules:
react/jsx-filename-extension: 0
no-underscore-dangle: 0
no-restricted-syntax: 1
no-await-in-loop: 1
settings:
react:
version: 'latest'
no-await-in-loop: 0
typescript-eslint/interface-name-prefix: 0
typescript-eslint/explicit-function-return-type: 0
typescript-eslint/no-explicit-any: 0
7 changes: 6 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ build/Release

# Dependency directories
node_modules/
/dist
jspm_packages/

# Typescript v1 declaration files
Expand All @@ -55,7 +56,11 @@ typings/
.yarn-integrity

# dotenv environment variables file
*.env
.env.local
.env
.env.development.local
.env.test.local
.env.production.local

#files related to api setup
client_secret.json
Expand Down
5 changes: 5 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"singleQuote": true,
"trailingComma": "all",
"quoteProps": "preserve"
}
7 changes: 4 additions & 3 deletions .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ before_script:
- psql -c 'create database littlewindowtest;' -U postgres
script:
- npm run lint
# TODO: Add in tests!
# - npm test --passWithNoTests
# - cd client && npm test --passWithNoTests
- npm run testtravis
- cd client && npm install
- npm run test
- npm run lint
2 changes: 1 addition & 1 deletion Procfile
Original file line number Diff line number Diff line change
@@ -1 +1 @@
web:node ./src/server.js
web: npm run start:prod
141 changes: 66 additions & 75 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,102 +2,93 @@
> Little window is a clever little cat chatbot that directs women to the information they are looking for as quickly as possible. Think of it like google search on turbo for all of Chayn’s resources and those provided by our friends too. We want to drastically reduce the time women take to search for information which in many cases can save lives.
**Currently in active development**
[![Build Status](https://travis-ci.org/chaynHQ/soulmedicine.svg?branch=master)](https://travis-ci.org/chaynHQ/soulmedicine)
[![Build Status](https://travis-ci.org/chaynHQ/soulmedicine.svg?branch=master)](https://travis-ci.org/chaynHQ/little-window)

![LWDemo](https://user-images.githubusercontent.com/24212625/37564932-9ac46b84-2a97-11e8-8087-127b9225db75.gif)

## Installing / Getting started

### Prerequisites
- Dialogflow key
- Googlesheets API key
- PostgreSQL Database
___

### Quick Start
1. Clone the repo:
`git clone [email protected]:chaynHQ/little-window.git`
2. Move into your newly created folder and install dependencies:
## Development

### .env files
You will need to create a .env file in both the root directory and the client directory.

#### Client .env file
- SKIP_PREFLIGHT_CHECK=true

#### Root .env file

- PORT
- DATABASE_URL
- DIALOGFLOW_PROJECT_ID
- DIALOGFLOW_CLIENT_EMAIL
- DIALOGFLOW_PRIVATE_KEY
- ROLLBAR_TOKEN
- ROLLBAR_ENV
- STORYBLOK_TOKEN
- CONTENT_PREVIEW_MODE
- kickoffSupportMessageStoryblokId
- freeTextSupportRequestStoryblokId
- radioButtonSupportRequestStoryblokId
- resourceStoryblokId
- additionalResourcesStoryblokId
- anythingElseStoryblokId
- finalMessageStoryblokId

### Running locally
Install dependancies
`npm install`
3. Create a `.env` file in the root directory. This will need to include:
- `DATABASE_URL=` [Your PostgreSQL DB URL]
- `GOOGLE_API_1=` https://sheets.googleapis.com/v4/spreadsheets/{your-sheet-id}/values/
- `GOOGLE_API_2=` ?key={your-GSheet-apikey}
- `DIALOGFLOW_PROJECT_ID=`
- `DIALOGFLOW_CLIENT_EMAIL=`
- `DIALOGFLOW_PRIVATE_KEY=`
All of the variables prefixed with DIALOGFLOW_ can be created by following the following instructions to generate a key: [Get Dialogflow key](https://dialogflow.com/docs/reference/v2-auth-setup?utm_source=msa&amp;utm_medium=email&amp;utm_campaign=dialogflow_v1_deprecationauth_setup). Then follow this tutorial to include them in your .env file: [Include in .env file](https://medium.com/@tzahi/how-to-setup-dialogflow-v2-authentication-programmatically-with-node-js-b37fa4815d89).
4. Run the app in dev mode:
`npm run dev`
`cd client && npm install`

### Testing
1. Run `npm test` from the root folder to run server tests.
2. Run `cd client` then `npm test` to run React tests.
Create a postgres server locally and store it's URL in your root .env file.
Migrations to populate the db will automatically run.

___
Run the server and the client separately, using only the following commands to ensure correct binaries are used.
Server: `npm run start` or `npm run start:dev`
Client: `cd client && npm run start`

## Architecture
- DialogFlow (Natural Language Processor)
- GoogleSheets API
- React
- Node / Express
- PostgreSQL
- Heroku

![architecture](https://user-images.githubusercontent.com/24212625/37564922-8ba64078-2a97-11e8-82c6-172ca3a67a8d.png)

_
### Testing
Server: `npm run test`
Client: `cd client && npm run test`

Testing:
1. Run `npm test` in the command line
2. Run `cd client` then `npm test` to run React tests
### Formatting and Linting
Server: `npm run format` and `npm run lint`
Client: `cd client && npm run lint`

___

## Dialogflow

You can setup your conversation flow in Dialogflow using the following guidelines:

### Payloads

- All intents need to send back a custom payload, even if it's just an empty object

![](https://user-images.githubusercontent.com/24212625/37565404-c848897e-2aa0-11e8-9c9b-b00698701114.png)

### Option buttons

- For options buttons, send an `options` property in the custom payload. This is an array of objects for each button, where each object contains a `text` and `postback` key & value. `text` is the value that will appear on the button, `postback` is the actual value that will be sent to Dialogflow - this should map to the utterance of next intent you want to trigger with that button.

![](https://user-images.githubusercontent.com/24212625/37565413-f9bf4efc-2aa0-11e8-8233-472d1cb92ced.png)

- If it is intended that by selecting the relevant option that resources will be displayed to the user, the `postback` on the button should also be the reference for the server to lookup the correct columns in a Google Sheet.

![](https://user-images.githubusercontent.com/24212625/37565424-38e4102c-2aa1-11e8-91ad-2d6b7cfa83da.png)

![](https://user-images.githubusercontent.com/24212625/37565637-cb519e5e-2aa4-11e8-96de-1ee97a6c5cee.png)

- The message that is then returned by Dialogflow in response to the postback should contain a value of `"resources": "true"`, which then triggers this lookup:

![](https://user-images.githubusercontent.com/24212625/37565598-02bfa97c-2aa4-11e8-9c74-54365c642d58.png)

### Selecting multiple buttons

- If it is intended that multiple options can be selected for a set of buttons, which are then submitted:
## Architecture

![](https://user-images.githubusercontent.com/24212625/37565312-f5a33fce-2a9e-11e8-9f43-ef0769fb4fe1.png)
### Server
- NestJS
- Typescript
- PostgreSQL
- Typeorm
- DialogFlow for natural language processing
- Storyblok as CMS for conversation content
- Jest for testing

- Then the payload should contain a `selectOptions` property which is an array of objects for each option, where each object contains a `text`, `postback` and `lookup` value. However in contrast to the button options, instead of the `postback` being the lookup to the Google Sheet, the `lookup` value should map to the relevant columns in the Google Sheet. The user can then select multiple options before submitting.
### Client
- React

![](https://user-images.githubusercontent.com/24212625/37565331-589a60c6-2a9f-11e8-949c-219964f0ccaf.png)
### Deployment
- Heroku

### Multiple messages
___

- Where multiple messages are to be displayed to the user, without any user input, each message where there should be a followup message from the bot should contain a `retrigger` property for which the value maps to the utterance for the intent for the next message:

![](https://user-images.githubusercontent.com/24212625/37565342-92b8fd44-2a9f-11e8-8f2c-39a534059d82.png)
## Conversation Structure
The Little Window conversation is structured into three distinct sections.
1) Setup
All of the questions required to setup the conversation including GDPR & Language settings. These must be set before we can deliver any more content to the user.
2) Support
The bulk of the conversation. This is where Little Window determines what the user wants and sends them relevant resources. Little Window determines what the user wants via either NLP or directly offering a selection of it's knowledge.
3) Feedback
At the end of the conversation we collect feedback to improve Little Window with four questions.

### Message speed
___

- As in the above screenshot, each message can be given a `time delay` in the payload of `slow` (5secs) or `superslow` (8secs) to slow down the speed of a given bot response. The standard speed is 1.5secs.

# Support Us
Little Window is created by Chayn a global volunteer network with over 400 volunteers from 15 countries. If you like what you see and you want to join our team of volunteers get in touch. Or you can [donate](https://www.paypal.me/chaynhq); all proceeds go to improving Little Window and building more tools and resources at ChaynHQ.
12 changes: 12 additions & 0 deletions app.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
{
"name": "little-window",
"env": {
"PORT": {
"required": true
},
"SKIP_PREFLIGHT_CHECK": {
"required": true
},
"DIALOGFLOW_PROJECT_ID": {
"required": true
},
Expand Down Expand Up @@ -33,6 +39,12 @@
},
"anythingElseStoryblokId": {
"required": true
},
"ROLLBAR_TOKEN": {
"required": true
},
"ROLLBAR_ENV": {
"required": false
}
},
"addons": [
Expand Down
1 change: 1 addition & 0 deletions client/.env
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
SKIP_PREFLIGHT_CHECK=true
31 changes: 31 additions & 0 deletions client/.eslintrc.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
env:
browser: true
es6: true
node: true
jest: true
root: true
extends:
- 'plugin:react/recommended'
- airbnb
globals:
Atomics: readonly
SharedArrayBuffer: readonly
parser: "babel-eslint"
parserOptions:
ecmaFeatures:
jsx: true
ecmaVersion: 7
sourceType: module
plugins:
- react
ignorePatterns:
- 'node_modules/'
- 'build/'
rules:
react/jsx-filename-extension: 0
no-underscore-dangle: 0
no-restricted-syntax: 1
no-await-in-loop: 1
settings:
react:
version: 'latest'
Loading

0 comments on commit eac0d42

Please sign in to comment.