feat(chat): add chat wrapper

aurelia-ui-toolkits · Jun 5, 2018 · ac9d13a · ac9d13a
1 parent 6e17a41
commit ac9d13a
Show file tree

Hide file tree

Showing 5 changed files with 153 additions and 4 deletions.
diff --git a/sample/index.html b/sample/index.html
@@ -3,7 +3,6 @@
   <head>
     <title>Aurelia Catalog</title>
     <link rel="stylesheet" href="jspm_packages/npm/font-awesome@4.6.3/css/font-awesome.min.css">
-
     <link rel="stylesheet" href="styles/samples.css">
     <link rel="stylesheet" href="styles/styles.css">
 
@@ -20,7 +19,9 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.1/chroma.min.js"></script>
     <script src="http://kendo.cdn.telerik.com/2018.2.516/js/jquery.min.js"></script>
     <script src="http://kendo.cdn.telerik.com/2018.2.516/js/jszip.min.js"></script>
-    <script src="http://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>
+	<script src="http://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>
+	<!-- Load DialogFlow Client API -->
+	<script src="https://cdn.rawgit.com/dialogflow/dialogflow-javascript-client/50e82e62/target/ApiAi.min.js"></script>
 
     <script src="jspm_packages/system.js"></script>
     <script src="config.js"></script>

diff --git a/sample/src/test/test.html b/sample/src/test/test.html
@@ -1,6 +1,7 @@
 <template>
 	<require from="aurelia-kendoui-bridge/listbox/listbox"></require>
 	<require from="aurelia-kendoui-bridge/dropdowntree/dropdowntree">
+	</require><require from="aurelia-kendoui-bridge/chat/chat">
 	</require>
 
 	<div id="example"
@@ -67,6 +68,8 @@ <h3>#: data.ContactName #</h3>
                         ]
                     }
 				]"></ak-drop-down-tree>
+
+				<div ak-chat k-on-ready.delegate="chatReady($event.detail)" k-on-post.delegate="agent.postMessage($event.detail.text)"></div>
 			<div>${chacked}</div>
 		</div>
 	</div>

diff --git a/sample/src/test/test.js b/sample/src/test/test.js
@@ -1,4 +1,86 @@
 export class Test {
+
+	constructor() {
+		window.DialogFlowAgent = kendo.Class.extend({
+			init: function (chat) {
+				this.chat = chat;
+				this.userInfo = {
+					id: "botty",
+					iconUrl: "../content/chat/InsuranceBot.png",
+					name: "Botty McbotFace"
+				};
+
+				this.agent2 = new ApiAi.ApiAiClient({ accessToken: "280344fb165a461a8ccfef7e1bb47e65" });
+
+				this.postEvent("Welcome");
+
+				this._timestamp;
+			},
+
+			postEvent: function (event) {
+				this.agent2
+					.eventRequest(event)
+					.then($.proxy(this.onResponse, this));
+			},
+
+			postMessage: function (text) {
+				this.agent2
+					.textRequest(text)
+					.then($.proxy(this.onResponse, this));
+			},
+
+			onResponse: function (response) {
+				this._timestamp = response.timestamp;
+
+				if (response.result && response.result.fulfillment) {
+					var fulfillment = response.result.fulfillment;
+					var data = fulfillment.data;
+
+					this.renderMessages(fulfillment.messages);
+
+					if (data && data.null) {
+						this.renderAttachments(data.null);
+
+						this.renderSuggestedActions(data.null.suggestedActions);
+					}
+				}
+			},
+
+			renderMessages: function (messages) {
+				var that = this;
+
+				$(messages).each(function (index, message) {
+					switch (message.type) {
+						case 0:
+							that.chat.renderMessage({ type: "text", text: message.speech, timestamp: that._timestamp }, that.userInfo);
+							break;
+						case 2:
+							that.renderSuggestedActions(message.replies.map(function (reply) { return { title: reply, value: reply }; }));
+							break;
+						default:
+					}
+				});
+
+			},
+
+			renderAttachments: function (data) {
+				var that = this;
+				data.attachments = $(data.attachments).map(function (index, attachment) {
+					return {
+						contentType: attachment.type || "heroCard",
+						content: attachment
+					};
+				}).toArray();
+
+				this.chat.renderAttachments(data, this.userInfo);
+			},
+
+			renderSuggestedActions: function (suggestedActions) {
+				this.chat.renderSuggestedActions($(suggestedActions).toArray());
+			}
+		});
+	}
+
   toolbar = {
     position: 'right',
     tools: ['moveUp', 'moveDown', 'transferTo', 'transferFrom', 'transferAllTo', 'transferAllFrom', 'remove']
@@ -20,5 +102,11 @@ export class Test {
         .addClass('custom-placeholder')
         .removeClass('k-ghost');
     }
-  }
+	}
+
+	chatReady(e) {
+		console.log(e);
+
+		this.agent = new DialogFlowAgent(e);
+	}
 }
diff --git a/src/chat/chat.js b/src/chat/chat.js
@@ -0,0 +1,51 @@
+import {inject} from 'aurelia-dependency-injection';
+import {customAttribute, bindable} from 'aurelia-templating';
+import {WidgetBase} from '../common/widget-base';
+import {generateBindables} from '../common/decorators';
+import {constants} from '../common/constants';
+
+@customAttribute(`${constants.attributePrefix}chat`)
+@generateBindables('kendoChat')
+@inject(Element, WidgetBase)
+export class Chat {
+  @bindable kEnabled;
+
+  constructor(element, widgetBase) {
+    this.element = element;
+    this.widgetBase = widgetBase
+      .control('kendoChat')
+      .useElement(this.element)
+      .bindToKendo('kEnabled', 'enable')
+      .linkViewModel(this);
+  }
+
+  subscribe(event, callback) {
+    return this.widgetBase.subscribe(event, callback);
+  }
+
+  bind(ctx, overrideCtx) {
+    this.widgetBase.useParentCtx(overrideCtx);
+  }
+
+  attached() {
+    if (!this.kNoInit) {
+      this.recreate();
+    }
+  }
+
+  recreate() {
+    this.kWidget = this.widgetBase.recreate();
+  }
+
+  propertyChanged(property, newValue, oldValue) {
+    this.widgetBase.handlePropertyChanged(this.kWidget, property, newValue, oldValue);
+  }
+
+  destroy() {
+    this.widgetBase.destroy(this.kWidget);
+  }
+
+  detached() {
+    this.destroy();
+  }
+}
diff --git a/src/config-builder.js b/src/config-builder.js
@@ -85,7 +85,8 @@ export class KendoConfigBuilder {
   pro(): KendoConfigBuilder {
     this.core()
       .kendoBarcode()
-      .kendoChart()
+	  .kendoChart()
+	  .kendoChat()
 	  .kendoDiagram()
       .kendoEditor()
       .kendoFilterMenu()
@@ -187,6 +188,11 @@ export class KendoConfigBuilder {
     this.resources.push(PLATFORM.moduleName('./chart/treemap'));
     return this;
   }
+
+  kendoChat(): KendoConfigBuilder {
+    this.resources.push(PLATFORM.moduleName('./chat/chat'));
+    return this;
+  }
 
   kendoComboBox(): KendoConfigBuilder {
     this.resources.push(PLATFORM.moduleName('./combobox/combobox'));