feat: expose router for serving user interface (#419)

* feat: expose router for serving user interface

* fix: upgrade UI package to version for /ui path

* style: update README.md to reflect UI changes

README.md

@@ -50,12 +50,21 @@ server.post('/api/messages', (req, res) => {
 })
 ```
 
-Starting the UI server:
+## Using the UI router.
+Previously the UI was served separately and required to be run on a different port than your bot.  Now the UI is included with your bot! The ui is availble at the `/ui` path of your bot url. The leaves the root `/` available for you to add a Bot landing page. There you can summarize your bot's purpose and capabilities to the user.
 
 ```typescript
-import { startUiServer } from '@conversationlearner/sdk'
+...
+import { uiRouter } from '@conversationlearner/sdk'
+
+...
+
+"Mount the router at the root `/` as it internally has the /ui paths."
+server.use(uiRouter)
+
+... 
 
-startUiServer()
+server.listen(port)
 ```
 
 

package.json

@@ -17,7 +17,7 @@
     "test": "jest",
     "setpackageversion": "tsc -p ./scripts/tsconfig.json && node ./scripts/setpackageversion.js",
     "verifypackagelock": "tsc -p ./scripts/tsconfig.json && node ./scripts/verifypackagelock.js",
-    "ui": "node ./lib/clUiRunner.js",
+    "ui": "node ./lib/uiServer.js",
     "commit": "git-cz",
     "commitmsg": "commitlint -E GIT_PARAMS"
   },
@@ -41,7 +41,7 @@
   "license": "MIT",
   "dependencies": {
     "@conversationlearner/models": "0.193.2",
-    "@conversationlearner/ui": "0.336.2",
+    "@conversationlearner/ui": "0.337.0",
     "@types/supertest": "2.0.4",
     "async-file": "^2.0.2",
     "body-parser": "1.18.3",

src/index.ts

@@ -7,12 +7,12 @@ import { ICLOptions } from './CLOptions'
 import { ClientMemoryManager, ReadOnlyClientMemoryManager } from './Memory/ClientMemoryManager'
 import { RedisStorage } from './RedisStorage'
 import { FileStorage } from './FileStorage'
-import startUiServer from './clUi'
+import uiRouter from './uiRouter'
 import { SessionEndState, MemoryValue } from '@conversationlearner/models'
 import { EntityDetectionCallback, OnSessionStartCallback, OnSessionEndCallback, LogicCallback, RenderCallback, ICallbackInput } from './CLRunner'
 
 export {
-    startUiServer,
+    uiRouter,
     ConversationLearner,
     ICLOptions,
     ClientMemoryManager,

src/uiRouter.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+import * as express from 'express'
+import * as clUI from '@conversationlearner/ui'
+
+// console.log(`@conversationlearner/ui directory path: `, clUI.directoryPath)
+// console.log(`@conversationlearner/ui default file path: `, clUI.defaultFilePath)
+
+const router = express.Router({ caseSensitive: false })
+router.use('/ui', express.static(clUI.directoryPath));
+router.get('/ui/*', (_, res) => {
+    res.sendFile(clUI.defaultFilePath)
+})
+
+export default router

src/uiServer.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+/**
+ * This is just a convenience for @conversationlearner/sdk developers to test the UI
+ */
+import uiRouter from './uiRouter'
+import * as express from 'express'
+
+const app = express()
+app.use(uiRouter)
+
+const port = 5053
+const listener = app.listen(port, () =>
+    console.log(`Navigate to http://localhost:${listener.address().port}/ui to view Conversation Learner administration application.`)
+).on('error', (error: NodeJS.ErrnoException) => {
+    if (error.code === 'EADDRINUSE') {
+        console.log(`ERROR: The UI is already running or the port (${port}) is in use by another process`)
+        return
+    }
+
+    throw error
+});