Merge pull request #2445 from botpress/minor/12-2-0

feat(nlu): UI revamp into 12-1-6

modules/nlu/package.json

@@ -18,29 +18,33 @@
     "@types/node": "^10.11.3",
     "@types/react": "^16.8.17",
     "@types/react-dom": "^16.8.4",
+    "@types/slate": "^0.47.1",
+    "@types/slate-react": "^0.22.5",
     "module-builder": "../../build/module-builder"
   },
   "dependencies": {
+    "@blueprintjs/select": "^3.10.0",
     "axios": "^0.18.1",
     "bluebird": "^3.5.3",
     "bluebird-global": "^1.0.1",
     "bluebird-retry": "^0.11.0",
     "classnames": "^2.2.6",
-    "draft-js": "^0.10.5",
-    "draftjs-utils": "^0.9.4",
     "fs-extra": "^8.0.1",
     "https-proxy-agent": "^2.2.1",
+    "immutable": "^4.0.0-rc.12",
     "joi": "^13.6.0",
     "lodash": "^4.17.11",
     "lru-cache": "^5.1.1",
     "mathjs": "^5.9.0",
     "ms": "^2.1.1",
     "nanoid": "^2.0.1",
-    "react-dnd": "^8.0.3",
-    "react-dnd-html5-backend": "^8.0.3",
+    "react-dnd": "8.0.3",
+    "react-dnd-html5-backend": "8.0.3",
     "react-select": "^2.4.3",
-    "react-splitter-layout": "^3.0.0",
     "react-tag-input": "6.4.0",
+    "slate": "^0.47.4",
+    "slate-react": "^0.22.4",
+    "slate-react-placeholder": "^0.2.4",
     "tmp": "^0.0.33",
     "verror": "^1.10.0"
   },

modules/nlu/src/backend/api.ts

@@ -141,6 +141,15 @@ export default async (bp: typeof sdk, nlus: EngineByBot) => {
     }
   })
 
+  router.put('/intents/:id', async (req, res) => {
+    const { botId, id } = req.params
+    const { lang, utterances } = req.body
+    const botEngine = nlus[botId] as ScopedEngine
+    // TODO add validation : bot exists, intent exist, lang is supported by bot utterance is string[])
+
+    await botEngine.storage.updateIntent(id, { utterances: { [lang]: utterances } })
+  })
+
   router.get('/contexts', async (req, res) => {
     const botId = req.params.botId
     const filepaths = await bp.ghost.forBot(botId).directoryListing('/intents', '*.json')

modules/nlu/src/backend/pipelines/intents/exact_matcher.test.ts

@@ -34,6 +34,7 @@ const I_like_dogs = makeSequence('I like dogs', I_LIKE_ANIMALS_INTENT, [
   {
     name: ANIMAL_I_LIKE_SLOT,
     entities: [ANIMAL_ENTITY],
+    color: 1,
     start: 7,
     end: 11,
     source: 'dogs'
@@ -44,13 +45,15 @@ const I_like_69_pretty_dogs = makeSequence('I like 69 pretty dogs', I_LIKE_ANIMA
   {
     name: 'number_of_animals',
     entities: [NUMBER_ENTITY],
+    color: 1,
     start: 7,
     end: 9,
     source: '69'
   },
   {
     name: ANIMAL_I_LIKE_SLOT,
     entities: [ANIMAL_ENTITY],
+    color: 2,
     start: 17,
     end: 21,
     source: 'dogs'

modules/nlu/src/backend/pipelines/slots/pre-processor.test.ts

@@ -42,11 +42,13 @@ describe('Preprocessing', () => {
     const slotDef = [
       {
         name: 'ME',
-        entities: [AN_ENTITY]
+        entities: [AN_ENTITY],
+        color: 1
       },
       {
         name: 'YOU',
-        entities: [AN_ENTITY, OTHER_ENTITY]
+        entities: [AN_ENTITY, OTHER_ENTITY],
+        color: 2
       }
     ]
     const scopedGenerateTrainingSequence = generateTrainingSequence(languageProvider, logger)

modules/nlu/src/views/api.ts

@@ -1,9 +1,10 @@
 import { AxiosInstance } from 'axios'
 import { NLU } from 'botpress/sdk'
 
-export interface NLUAPI {
+export interface NLUApi {
   fetchContexts: () => Promise<string[]>
   fetchIntents: () => Promise<NLU.IntentDefinition[]>
+  fetchIntent: (x: string) => Promise<NLU.IntentDefinition>
   createIntent: (x: Partial<NLU.IntentDefinition>) => Promise<any>
   updateIntent: Function
   deleteIntent: (x: string) => Promise<any>
@@ -13,14 +14,15 @@ export interface NLUAPI {
   deleteEntity: (x: string) => Promise<any>
 }
 
-export const makeApi = (bp: { axios: AxiosInstance }): NLUAPI => ({
+export const makeApi = (bp: { axios: AxiosInstance }): NLUApi => ({
   fetchContexts: () => bp.axios.get(`/mod/nlu/contexts`).then(res => res.data),
   fetchIntents: async () => {
     const { data } = await bp.axios.get('/mod/nlu/intents')
     return data.filter(x => !x.name.startsWith('__qna__'))
   },
+  fetchIntent: (intentName: string) => bp.axios.get(`/mod/nlu/intents/${intentName}`).then(res => res.data),
   createIntent: (intent: Partial<NLU.IntentDefinition>) => bp.axios.post(`/mod/nlu/intents`, intent),
-  updateIntent: () => {}, // TODO use /intent/:id/utterances and use it in intent editor
+  updateIntent: (intent: NLU.IntentDefinition) => bp.axios.put(`/mod/nlu/intents/${intent.name}`, intent),
   deleteIntent: (name: string) => bp.axios.post(`/mod/nlu/intents/${name}/delete`),
   fetchEntities: () => bp.axios.get('/mod/nlu/entities').then(res => res.data.filter(r => r.type !== 'system')),
   createEntity: (entity: NLU.EntityDefinition) => bp.axios.post(`/mod/nlu/entities/`, entity),

modules/nlu/src/views/full/entities/SidePanelSection.tsx

@@ -1,5 +1,5 @@
 import { Button, Classes, Icon } from '@blueprintjs/core'
-import { NLUAPI } from 'api'
+import { NLUApi } from 'api'
 import { NLU } from 'botpress/sdk'
 import { Item, ItemList, SearchBar, SectionAction, SidePanelSection } from 'botpress/ui'
 import { NluItem } from 'full'
@@ -8,7 +8,7 @@ import React, { FC, useState } from 'react'
 import CreateEntityModal from './CreateEntityModal'
 
 interface Props {
-  api: NLUAPI
+  api: NLUApi
   entities: NLU.EntityDefinition[]
   currentItem: NluItem
   setCurrentItem: (x: NluItem) => void

modules/nlu/src/views/full/index.tsx

@@ -5,10 +5,10 @@ import _ from 'lodash'
 import React, { FC, useEffect, useState } from 'react'
 
 import { makeApi } from '../api'
+import { IntentEditor } from '../lite/intentEditor/IntentEditor'
 
 import EntityEditor from './entities/EntityEditor'
 import { EntitySidePanelSection } from './entities/SidePanelSection'
-import IntentEditor from './intents/editor'
 import { IntentSidePanelSection } from './intents/SidePanelSection'
 import style from './style.scss'
 
@@ -30,13 +30,11 @@ const NLU: FC<Props> = props => {
   const [currentItem, setCurrentItem] = useState<NluItem | undefined>()
   const [intents, setIntents] = useState([])
   const [entities, setEntities] = useState([])
-  const [contexts, setContexts] = useState([])
 
   const loadIntents = () => api.fetchIntents().then(setIntents)
   const loadEntities = () => api.fetchEntities().then(setEntities)
 
   useEffect(() => {
-    api.fetchContexts().then(setContexts)
     loadIntents()
     loadEntities()
     setCurrentItemFromPath()
@@ -131,17 +129,16 @@ const NLU: FC<Props> = props => {
             description="Use Botpress native Natural language understanding engine to make your bot smarter."
           />
         )}
-        {(intents.length && currentItem && currentItem.type === 'intent' && (
+        {!!intents.length && currentItem && currentItem.type === 'intent' && (
           <IntentEditor
-            intent={intents.find(i => i.name == currentItem.name)}
-            contexts={contexts} // TODO fetch this within the component
-            axios={props.bp.axios} // TODO replace this with api instance
-            reloadIntents={loadIntents}
+            intent={currentItem.name}
+            api={api}
             contentLang={props.contentLang}
+            showSlotPanel
+            axios={props.bp.axios} // to be removed for api, requires a lot of refactoring
           />
-        )) ||
-          null}
-        {(entities.length && currentItem && currentItem.type === 'entity' && (
+        )}
+        {(!!entities.length && currentItem && currentItem.type === 'entity' && (
           <EntityEditor entity={entities.find(ent => ent.name === currentItem.name)} onUpdate={updateEntity} />
         )) ||
           null}

modules/nlu/src/views/full/intents/SidePanelSection.tsx

@@ -1,12 +1,12 @@
 import { Button, Classes } from '@blueprintjs/core'
-import { NLUAPI } from 'api'
+import { NLUApi } from 'api'
 import { NLU } from 'botpress/sdk'
 import { Item, ItemList, SearchBar, SectionAction, SidePanelSection } from 'botpress/ui'
 import { NluItem } from 'full'
 import React, { FC, useState } from 'react'
 
 interface Props {
-  api: NLUAPI
+  api: NLUApi
   intents: NLU.IntentDefinition[]
   currentItem: NluItem
   contentLang: string