sap.ui.define(
[ "sap/ui/core/Control",
"sap/m/Button",
"sap/ui/core/IconPool",
"sap/m/Dialog",
"sap/m/List",
"sap/m/FeedListItem",
"sap/m/FeedInput",
"sap/m/ResponsivePopover",
"sap/m/VBox",
"sap/m/ScrollContainer",
"sap/m/Bar",
"sap/m/Title",
"sap/ui/core/ResizeHandler"
],
function(Control, Button, IconPool, Dialog, List, FeedListItem, FeedInput, ResponsivePopover, VBox, ScrollContainer, Bar, Title, ResizeHandler) {
var ChatDialog = Control.extend("CSID.i027737.custlib.controls.ChatDialog",{
metadata : {
properties : {
title: {type: "string", group: "Appearance", defaultValue: null},
width: {type: "sap.ui.core.CSSSize", group: "Dimension", defaultValue: null},
height: {type: "sap.ui.core.CSSSize", group: "Dimension", defaultValue: null},
buttonIcon: {type: "sap.ui.core.URI", group: "Appearance", defaultValue: null},
robotIcon: {type: "sap.ui.core.URI", group: "Appearance", defaultValue: null},
userIcon: {type: "sap.ui.core.URI", group: "Appearance", defaultValue: null},
initialMessage: {type: "string", group: "Appearance", defaultValue: "Hello, How can I help?"},
placeHolder: {type: "string", group: "Appearance", defaultValue: "Post something here"}
},
aggregations : {
_chatButton: {type: "sap.m.Button", multiple: false},
_popover: {type: "sap.m.ResponsivePopover", multiple: false}
},
events : {
send: {
parameters : {
text : {type : "string"}
}
}
}
},
renderer : function(oRm, oControl) {
var oChatBtn = oControl.getAggregation("_chatButton");
var oPop = oControl.getAggregation("_popover");
oRm.write("<div ");
oRm.addClass("bkChatButton");
oRm.writeClasses();
oRm.write(">");
oRm.renderControl(oChatBtn);
oRm.renderControl(oPop);
oRm.write("</div>");
}
init : function () {
//initialisation code, in this case, ensure css is imported
var libraryPath = jQuery.sap.getModulePath("CSID.i027737.custlib");
jQuery.sap.includeStyleSheet(libraryPath + "/css/bkChat.css");
var oBtn = new Button(this.getId() + "-bkChatButton", {
press: this._onOpenChat.bind(this)
});
this.setAggregation("_chatButton", oBtn);
_onOpenChat: function(oEvent){
this.getAggregation("_popover").openBy(this.getAggregation("_chatButton"));
this.getAggregation("_popover").setContentHeight(this.getProperty("height"));
this.getAggregation("_popover").setContentWidth(this.getProperty("width"));
},
setButtonIcon: function(sButtonIcon){
this.setProperty("buttonIcon", sButtonIcon, true);
sap.ui.getCore().byId(this.getId() + "-bkChatButton").setIcon(sButtonIcon);
},
var oFeedIn = new FeedInput(this.getId() + "-bkChatInput", {
post: this._onPost.bind(this),
showicon: true
}).addStyleClass("sapUiTinyMargin");
oFeedIn.addEventDelegate({
onsapenter: function(oEvent) {
oEvent.preventDefault();
var sTxt = oFeedIn.getValue();
if(sTxt.length > 0){
oFeedIn.fireEvent("post", {
value: sTxt
}, true, false);
oFeedIn.setValue(null);
}
}
});
_onPost: function(oEvent){
var sText = oEvent.getSource().getValue();
this.addChatItem(sText, true);
this.fireEvent("send", {
text: sText
}, false, true);
},
addChatItem: function(sText, bUser){
var oFeedListItem = new FeedListItem({
showicon: true,
text: sText
});
if(bUser){
oFeedListItem.setIcon(this.getUserIcon());
oFeedListItem.addStyleClass("bkUserInput");
sap.ui.getCore().byId(this.getId() + "-bkChatList").addItem(oFeedListItem, 0);
}else{
oFeedListItem.setIcon(this.getRobotIcon());
oFeedListItem.addStyleClass("bkRobotInput");
sap.ui.getCore().byId(this.getId() + "-bkChatList").addItem(oFeedListItem, 0);
}
var oScroll = sap.ui.getCore().byId(this.getId() + "-bkChatScroll");
setTimeout(function(){
oScroll.scrollTo(0, 1000, 0);
}, 0);
}
<mvc:View controllerName="sap.i027737.Node.controller.App"
xmlns:mvc="sap.ui.core.mvc"
xmlns:controls="sap.i027737.Node.controls"
displayBlock="true" xmlns="sap.m" async="true">
<App id="idAppControl">
<pages>
<Page title="{i18n>title}">
<content>
<controls:ChatDialog id="brianchat"
title="Chat"
height="600px"
width="350px"
showCloseButton="true"
send="onSendPressed"
initialMessage="hello how can i help you?"
placeHolder="Please ask"
userIcon="https://avatars1.githubusercontent.com/u/5350169"
robotIcon="https://edspace.american.edu/perf683/wp-content/uploads/sites/392/2015/10/robot.png"
buttonIcon="sap-icon://discussion">
</controls:ChatDialog>
</content>
</Page>
</pages>
</App>
</mvc:View>
onSendPressed: function(oEvent){
var chatbot = this.getView().byId("brianchat");
var question = oEvent.getParameter("text");
var payload = {content: question};
jQuery.ajax({
url: "/chat",
cache: false,
type: "POST",
data: JSON.stringify(payload),
async: true,
success: function(sData) {
chatbot.addChatItem(sData.content, false);
},
error: function(sError) {
chatbot.addChatItem("Sorry im malfunctioning", false);
}
});
}
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
24 | |
8 | |
8 | |
7 | |
7 | |
6 | |
6 | |
6 | |
6 | |
6 |