This is the repository for the TOBi 2 chatbot.
- Product Owner: Darragh Keogh
- Scrum Master: Andrejs Kasurins
- Dev Team Lead: Mihai Rotaru
- repo: https://vfuk-digital.visualstudio.com/Digital/_git/web-tobi-2-app
- base boilerplate: https://vfuk-digital.visualstudio.com/Digital/_git/web-client-boilerplate
- sprints/Kanban board: https://vfuk-digital.visualstudio.com/Digital/_sprints/taskboard/Chatbot
- TOBi documents: https://vodafone.sharepoint.com/:f:/r/teams/Digital/technology/Shared%20Documents/Channels/TOBi%20Chatbot?csf=1&web=1&e=NAD2cJ
- detailed diagram: https://vodafone.sharepoint.com/:u:/r/teams/Digital/technology/_layouts/15/Doc.aspx?sourcedoc=%7B084070D7-F038-4282-A9D0-C9612652CCF4%7D&file=Tobi%202.0%20-%20Architecture%20Design%20Diarams.vsdx&action=default&cid=7cb7753e-429f-4c95-8244-8557a2c8a1e9
- TOBi team wiki: https://vfuk-digital.visualstudio.com/Digital/_wiki/wikis/Digital%20X.wiki/5745/TOBi-Wiki
- other teams: https://vfuk-digital.visualstudio.com/Digital/_wiki/wikis/Digital%20X.wiki/2653/Teams
- to be able to clone repositories, make sure your (public) SSH key is added to your account (guide)
- to be able to install first-party npm/yarn dependencies, follow this guide
- if getting SSL errors in chrome: chrome://flags/#allow-insecure-localhost
- some services (like IDM, which handles auth) are hosted internally; in order for them to work one needs to connect to bastion
- to clone and run the app locally:
$ git clone vfuk-digital@vs-ssh.visualstudio.com:v3/vfuk-digital/Digital/web-tobi-2-app
$ cd web-tobi-2-app
$ yarn install
$ yarn nps start
- Note: you might run into
gyp ERR! build error
while runningyarn install
, Possibly it's Node version. At the time of writing v14 is working and later ones are not!
- DX-IDM for managing authentication and authorization, via Dalmatian IDM middleware
- Nuance provides programmatic access to its chat agents; for sample code, see the ./nuance folder
- Nuance Agent development environment: https://agent-vodafoneuk-demo.lle.digital.nuance.com/ (ask @VasilMarchev for credentials)
- Nuance Customer Interface API
- DXL (Digital eXperience Layer, formally DAL - Digital Access Layer) wiki
- on
yarn nps start
,nps
will read ./package-scripts.js which requires this file - this will result in running
webpack-dev-server
with some env vars, mainlyNEUTRINO_CONFIG
set to "client" -
webpack-dev-server
will readwebpack.config.js
, which will runneutrino
-
neutrino
reads.neutrinorc.js
, selects a config from./tools/webpack
based onNEUTRINO_CONFIG
- when
NEUTRINO_CONFG
is "client", the config file is./tools/webpack/client/neutrino/neutrino.config.ts
- the client config extends vfukPresets/clientTypescript/clientTypescript.ts preset
- the vfukPresets/clientTypescript/clientTypescript.ts preset uses most presets in
neutrinoPresets/client
- among them, devServer - the
clientTypescriptPreset
takes an obj as param, and will passdevServer.customServerMiddleware
to thedevServer
preset - the
devServer
preset passescustomServerMiddleware
towebpack-dev-server
as thebefore
arg - the custom middleware is in the
src/server/development/index.ts
file - middleware loads env variables from the file specified with
--env
from the./env
folder (using @vfuk/web-config-dotenv) - middleware then runs
./src/server/development/neutrino.server.config.ts
- invoke
vfukDevServer
preset (injects routes, env variables, cors, json, cookie parser) - load Dalmatian config, from
./src/server/common/middleware/Dalmatian/dalmatian.ts
- load DXL auth config, from
DxlAuthService
- invoke
- application is running at https://localhost:8000/webchat-ui/ (important: use https and slash at end of the link)
- use following url attributes at the end of the link to trigger Nuance business rules manually and start
up Nuance API.
-
?nuance=PCIAPIWatson&agentref=gtp-pre1
triggers Watson responses -
?nuance=PCIAPI
triggers live agent busienss rule and connects with Nunace Live Agent platform -
?mock-nuance
triggers UI without connection to Nuance, useful to test locally on mobile/ mobile emulators or whenever Nuance is not available.
-
- to login with OTAC
- type "login" in the chat input
- user name / password: 7000780473_VF / testing1
- choose any of the phone numbers, and enter 12345 as the OTAP
- more credentials here
- DX-IDM can be brittle; if issue persist, contact heimdall_public (https://vfuk-digital.slack.com/archives/CJJUP9TQQ)
- useful filter for dev tools network panel:
-/(pagead)|(ads\.linkedin)|(adrum)|(bing\.com)|(submit-events)|(woff)|(kampyle\.com)|(tags\.tiqcdn)|(logging\/logline)/
- useful filter for dev tools console:
-/tcFramework/ -/postToServer/ -/InqFramework/ -/HMR/ -/WDS/
- if seeing errors like
[hardsource:02bc0307] Could not freeze ./src/client/routes.tsx: Cannot read property 'hash' of undefined
:rm -rf ./node_modules/.cache/hard-source/
-
nps
controls availablenpm/yarn
scripts (seeweb-client-boilerplate-core
package scripts) -
neutrino
is used to wrap Webpack configuration (seeweb-client-boilerplate-core
neutrino presets) - iframe communications via Postmate, which wraps window.postMessage
- more WIP documentation - on
neutrino
,nps
- as defined in the React neutrino preset, the index.ejs file is used as a template
- links to compiled application code, also to the vendors bundle and Webpack runtime will be injected into the template
- there are two kinds of interactions: request/response, and event-based
- request/response - all normalized to return promises:
- start engagement
- send message
- send data
- request email transcript
- end engagement
- event-based - must register a callback:
- initialization complete (engagement can be started)
- agent chat message received
- connection lost/re-gained
- to run unit tests locally:
yarn nps test
- to run Cypress tests, without the GUI:
./node_modules/.bin/cypress run
- to open Cypress GUI:
./node_modules/.bin/cypress open
- Note: the application needs to be started (e.g., with
yarn nps start
) before running Cypress
- Note: the application needs to be started (e.g., with
- to run only test(s) containing the string "foo" in description:
yarn nps "test -t foo"
oryarn test-filter "foo"
- styleguide: https://vfuk-digital.visualstudio.com/Digital/_wiki/wikis/Digital%20X.wiki/152/Coding-Styleguide
- React-specific guidelines: https://vfuk-digital.visualstudio.com/Digital/_wiki/wikis/Digital%20X.wiki/155/Overview-React
- JavaScript gudelines: https://vfuk-digital.visualstudio.com/Digital/_wiki/wikis/Digital%20X.wiki/160/Javascript
- eslint config: https://vfuk-digital.visualstudio.com/Digital/_git/lib-web-config-eslint
- run
yarn lint:eslint
locally to check
- pull requests and code review: https://vfuk-digital.visualstudio.com/Digital/_wiki/wikis/Digital%20X.wiki/2473/PR-and-code-review-guidelines
- preffer short-lived branches, and rebase
master
at least once a day - treat pull request review as a high priority item - a PR should not be outstanding more than one day
- conventional commits: https://www.conventionalcommits.org/en/v1.0.0/
- use imperative tense (not past tense)
- prefix with
feat
,fix
or any of the other supported prefixes - if the commit only affects a certain module/functionality, include it after prefix
- example commit with module:
fix(media): large images not scaled
- example commit with module:
fix(auth): user able to see information of other users
- example commit without module:
feat: add support for feature x
- github-flow: https://guides.github.com/introduction/flow/
- branch off from
master
; branch name should include associated work item number, and a brief description - branch should include a prefix:
feature
/xxxx - branch should use dashes not underscores
- example branch name, when it relates to work item: feature/
12345
-implement-feature-x - release branches not used/created currently - releases controled via the Azure pipeline, described above
- https://vfuk-digital.visualstudio.com/Digital/_wiki/wikis/Digital%20X.wiki/157/Overview-unit-tests
- run
yarn jest
locally
- marking tickets as ready/done: https://vfuk-digital.visualstudio.com/Digital/_wiki/wikis/Digital%20X.wiki/701/Definition-of-Done-(DoD)
- supported browsers - list updated every month: https://vodafone.sharepoint.com/:b:/r/sites/DMC/Shared%20Documents/Browser%20Specification/2020/Browser%20Specification%20August%202020.pdf?csf=1&web=1&e=NokP9t
- for app local state monitoring, mobx remotedev package allows us to use chrome
redux-devtools-extension
to monitor, inspect and dispatch actions. github page: https://github.com/zalmoxisus/redux-devtools-extension, chrome extention page: https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd