Merge pull request RocketChat#200 from redlink-gmbh/new-smarti-widget

There still are some issues in the widget itself and one unnecessary log for the legacy service.
Apart from that, the widget backend looks fine, separate issues have been created => merging

.meteor/versions

@@ -8,7 +8,7 @@ [email protected]
 [email protected]
 aldeed:[email protected]
 [email protected]
-assistify:ai@0.1.0
+assistify:ai@0.2.0
 assistify:[email protected]
 assistify:[email protected]
 [email protected]

packages/assistify-ai/client/public/stylesheets/smarti.css

@@ -1,13 +1,106 @@
 .smarti-widget .loading-notification {
 	margin: 0 20px;
-
 	text-align: justify;
-
 	font-style: italic;
-
 	line-height: 1.4;
 }
 
-.content .external-search-content .smarti {
+.external-search-content .smarti {
+	overflow-y: auto;
+}
+
+.smarti #widgetContainer {
+	position: absolute;
+	font-family: "Helvetica Neue", Arial, sans-serif;
+	font-size: 16px;
+	color: #3D3D3D;
+	top: 0;
+	right: 0;
+	width: 400px;
+	height: 100%;
+	border-right: 1px solid #dfdfdf;
+	border-left: 1px solid #dfdfdf;
+	background: #f4f4f4;
+	overflow: hidden;
+	line-height: normal;
+}
+
+.smarti #widgetContainer #widgetWrapper {
+	position: relative;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.smarti #widgetContainer #widgetWrapper #widgetHeader {
+	position: relative;
+}
+
+.smarti #widgetContainer #widgetWrapper #widgetHeader .widgetHeaderWrapper {
+	padding: 15px 15px;
+}
+
+.smarti #widgetContainer #widgetWrapper #widgetHeader h4 {
+	font-size: 20px;
+	color: #3D3D3D;
+	letter-spacing: 0;
+	margin-top: -10px;
+	/*margin-bottom: 30px;*/
+}
+
+.smarti #widgetContainer #widgetWrapper #widgetHeader h4 img {
+	position: relative;
+	top: 5px;
+	height: 30px;
+	margin-right: 4px;
+}
+
+.smarti #widgetContainer #widgetWrapper #widgetBody {
+	position: relative;
+	background: #ffffff;
+	width: 100%;
+	padding: 10px 10px 10px 10px;
 	overflow-y: auto;
+	flex: 1;
+}
+
+.smarti #widgetContainer #widgetWrapper #widgetFooter {
+	position: absolute;
+	bottom: 0;
+	background: #f4f4f4;
+	color: #747474;
+	opacity: 1;
+	width: 100%;
+	text-align: center;
+	border-top: 1px solid #CBCBCB;
+	transition: 0.2s;
+}
+
+.smarti #widgetContainer #widgetWrapper #widgetFooter .help-request-actions {
+	margin: 0;
+}
+
+.smarti #widgetContainer #widgetWrapper #widgetFooter button {
+	-o-transition: 0.2s;
+	-ms-transition: 0.2s;
+	-moz-transition: 0.2s;
+	-webkit-transition: 0.2s;
+	transition: 0.2s;
+	position: relative;
+	color: #747474;
+	text-decoration: none;
+	padding: 15px 30px 15px 30px;
+	width: calc(100% - 20px);
+	font-size: 14px;
+	margin: 10px;
+	text-transform: uppercase;
+	background: #CBCBCB;
+	border-radius: 3px;
+	display: inline-block;
+	text-align: center;
+}
+
+.smarti #widgetContainer #widgetWrapper #widgetFooter button:hover {
+	background: #d5195b;
+	color: #ffffff;
 }

packages/assistify-ai/client/views/app/tabbar/smarti.html

@@ -1,3 +1,39 @@
+<template name="AssistifySmarti">
+	<div class="external-search-content smarti">
+		<div id="widgetContainer">
+			<div id="widgetWrapper">
+				<div id="widgetHeader">
+					<div class="widgetHeaderWrapper">
+						<h4>
+							<img src="/packages/assistify_ai/client/public/assistify.png" alt="Bulb-icon">
+							{{_ "Knowledge_Base"}}
+						</h4>
+					</div>
+				</div>
+				<div id="widgetBody">
+					<div class="widgetMessage">
+						<div class="loading-notification">{{loadingNotification}}</div>
+					</div>
+					{{#if isLoading }}
+						{{> loading }}
+					{{/if}}
+				</div>
+				<div id="widgetFooter">
+					{{#let helpRequest=helpRequestByRoom }}
+						{{#if helpRequest}}
+							{{> HelpRequestActions helpRequest }}
+						{{/if}}
+					{{/let}}
+					{{#if isLivechat}}
+						{{> HelpRequestActions liveChatActions}}
+					{{/if}}
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<!--
 <template name="AssistifySmarti">
 	<div class="content external-search-content smarti">
 		<div class="title">
@@ -6,19 +42,20 @@ <h2><span class="title-icon"><img
 					style="margin-right: 10px; margin-bottom: -3px"></span>{{_ "Knowledge_Base"}}</h2>
 		</div>
 		{{#let helpRequest=helpRequestByRoom }}
-			{{#if helpRequest}}
-				{{> HelpRequestContext helpRequest }}
-				{{> HelpRequestActions helpRequest }}
-			{{/if}}
-		{{/let}}
-		{{#if isLivechat}}
-			{{> HelpRequestActions liveChatActions}}
-		{{/if}}
+	{{#if helpRequest}}
+		{{> HelpRequestContext helpRequest }}
+		{{> HelpRequestActions helpRequest }}
+	{{/if}}
+{{/let}}
+	{{#if isLivechat}}
+		{{> HelpRequestActions liveChatActions}}
+	{{/if}}
 		<div class="smarti-widget {{loadingClass}}">
 			<div class="loading-notification">{{loadingNotification}}</div>
 			{{#if isLoading }}
-				{{> loading }}
-			{{/if}}
+	{{> loading }}
+{{/if}}
 		</div>
 	</div>
 </template>
+-->

packages/assistify-ai/client/views/app/tabbar/smarti.js

@@ -33,9 +33,9 @@ Template.AssistifySmarti.onRendered(function() {
 	const instance = this;
 
 	/* in order to avoid duplicated scrollbars, have the outer one hidden */
-	const parentContainer = this.$(':parent').parent();
-	parentContainer.css('overflow-y', 'initial');
-	this.$('.smarti-widget').css('overflow-y', 'auto');
+	//const parentContainer = this.$(':parent').parent();
+	//parentContainer.css('overflow-y', 'initial');
+	//this.$('.smarti-widget').css('overflow-y', 'auto');
 
 	function createSmarti() {
 		if (window.SmartiWidget === undefined) {
@@ -60,10 +60,10 @@ Template.AssistifySmarti.onRendered(function() {
 					type: WIDGET_POSTING_TYPE,
 					cssInputSelector: '.rc-message-box .js-input-message'
 				},
-				lang: 'de'
+				lang: localStorage.getItem('userLanguage').split('-')[0]
 			};
 			console.debug('Initializing Smarti with options: ', JSON.stringify(smartiOptions, null, 2));
-			instance.smarti = new window.SmartiWidget(instance.find('.smarti-widget'), smartiOptions);
+			instance.smarti = new window.SmartiWidget(instance.find('.smarti #widgetContainer'), smartiOptions);
 		}
 	}
 

packages/assistify-ai/package.js

@@ -1,6 +1,6 @@
 Package.describe({
 	name: 'assistify:ai',
-	version: '0.1.0',
+	version: '0.2.0',
 	summary: 'Integration of artificial knowledge',
 	git: 'https://github.com/assistify/Rocket.Chat',
 	documentation: 'README.md'
@@ -51,7 +51,7 @@ Package.onUse(function(api) {
 
 	//Assets
 	api.addAssets('client/public/assistify.png', 'client');
-	api.addAssets('client/public/assistify-beta.png', 'client');
+	//api.addAssets('client/public/assistify-beta.png', 'client');
 
 	//i18n in Rocket.Chat-package (packages/rocketchat-i18n/i18n
 

packages/assistify-ai/server/SmartiProxy.js

@@ -29,24 +29,32 @@ export class SmartiProxy {
 	 * @param {String} method - the HTTP method to use
 	 * @param {String} path - the path to call
 	 * @param {Object} [body=null] - the payload to pass (optional)
+	 * @param {Function} onError=null - custom error handler
 	 *
 	 * @returns {Object}
 	 */
-	static propagateToSmarti(method, path, body = null) {
-
-		const url = encodeURI(`${ SmartiProxy.smartiUrl }${ path }`);
+	static propagateToSmarti(method, path, body = null, onError = null) {
+		const url = `${ SmartiProxy.smartiUrl }${ path }`;
 		const header = {
 			'X-Auth-Token': SmartiProxy.smartiAuthToken,
 			'Content-Type': 'application/json; charset=utf-8'
 		};
 		try {
+			SystemLogger.debug('Sending request to Smarti', method, 'to', url, 'body', JSON.stringify(body));
 			const response = HTTP.call(method, url, {data: body, headers: header});
-			if (response.statusCode === 200) {
+			if (response.statusCode === 200 || response.statusCode === 201) {
 				return response.data || response.content; //.data if it's a json-response
 			} else {
 				SystemLogger.debug('Got unexpected result from Smarti', method, 'to', url, 'response', JSON.stringify(response));
 			}
 		} catch (error) {
+			if (onError) {
+				const recoveryResult = onError(error);
+				if (recoveryResult !== undefined) {
+					return recoveryResult;
+				}
+			}
+
 			SystemLogger.error('Could not complete', method, 'to', url);
 			SystemLogger.debug(error);
 		}

packages/assistify-ai/server/hooks/sendMessageToKnowledgeAdapter.js

@@ -1,6 +1,6 @@
 /* globals RocketChat, SystemLogger */
 
-import {getKnowledgeAdapter} from '../lib/KnowledgeAdapterProvider';
+import { getKnowledgeAdapter } from '../lib/KnowledgeAdapterProvider';
 
 RocketChat.callbacks.remove('afterSaveMessage', 'externalWebHook');
 
@@ -19,7 +19,8 @@ RocketChat.callbacks.add('afterSaveMessage', function(message, room) {
 		return message;
 	}
 
-	if (!(typeof room.t !== 'undefined' && room.v && room.v.token)) {
+	//we only want to forward messages from livechat-rooms
+	if (!(room && (room.t === 'l'))) {
 		return message;
 	}
 
@@ -28,8 +29,10 @@ RocketChat.callbacks.add('afterSaveMessage', function(message, room) {
 		return;
 	}
 
+	SystemLogger.debug(`Send message ${message._id} to knowledgeAdapter (Meteor.defer()`);
 	Meteor.defer(() => {
 		try {
+			SystemLogger.debug(`Calling onMessage(${message._id});`);
 			knowledgeAdapter.onMessage(message);
 		} catch (e) {
 			SystemLogger.error('Error using knowledge provider ->', e);