this.performAction(props.action)}>
11 | {props.action.text}
12 |
13 | );
14 | }
15 |
16 | performAction(action: IAction) {
17 | botman.callAPI(action.value, true, null, (msg: IMessage) => {
18 | this.props.messageHandler({
19 | text: msg.text,
20 | type: msg.type,
21 | actions: msg.actions,
22 | attachment: msg.attachment,
23 | additionalParameters: msg.additionalParameters,
24 | from: 'chatbot'
25 | });
26 | }, null);
27 | }
28 | }
29 |
30 | interface IChatActionProps {
31 | messageHandler: Function,
32 | action: IAction,
33 | }
--------------------------------------------------------------------------------
/src/widget/chat-frame.tsx:
--------------------------------------------------------------------------------
1 | import { h, Component } from 'preact';
2 | import { IConfiguration } from '../typings';
3 |
4 | export default class ChatFrame extends Component-
19 | {
20 | props.messages.map((message) => {
21 | const listElement =
this.performAction(action)}>
13 | {action.text}
14 |
;
15 | });
16 |
17 | return (
18 |
19 | {message.text &&
24 | );
25 | }
26 |
27 | performAction(action: IAction) {
28 | botman.callAPI(action.value, true, null, (msg: IMessage) => {
29 | this.setState({ attachmentsVisible : false});
30 | this.props.messageHandler({
31 | text: msg.text,
32 | type: msg.type,
33 | timeout: msg.timeout,
34 | actions: msg.actions,
35 | attachment: msg.attachment,
36 | additionalParameters: msg.additionalParameters,
37 | from: 'chatbot'
38 | });
39 | }, null);
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/chat/messages/buttons.tsx:
--------------------------------------------------------------------------------
1 | import { h, Component } from 'preact';
2 | import {botman} from './../botman';
3 | import { IButton, IMessage, IMessageTypeProps } from '../../typings';
4 | import MessageType from "./messagetype";
5 |
6 | export default class ButtonsType extends MessageType {
7 |
8 | render(props: IMessageTypeProps) {
9 | const message = props.message;
10 |
11 | const buttons = message.buttons.map((button) => {
12 | if (button.type === 'postback') {
13 | return {message.text}
}
20 | {this.state.attachmentsVisible ?
21 | {buttons}
22 | : ''}
23 | this.performAction(button)}>
14 | {button.title}
15 |
;
16 | }
17 | if (button.type === 'web_url') {
18 | return {button.title};
19 | }
20 | });
21 | return (
22 |
23 | {message.text}
24 | {this.state.attachmentsVisible ? buttons : ''}
25 |
26 | );
27 | }
28 |
29 | performAction(button: IButton) {
30 | botman.callAPI(button.payload, true, null, (msg: IMessage) => {
31 | this.setState({ attachmentsVisible : false});
32 | this.props.messageHandler({
33 | text: msg.text,
34 | type: msg.type,
35 | actions: msg.actions,
36 | attachment: msg.attachment,
37 | additionalParameters: msg.additionalParameters,
38 | from: 'chatbot'
39 | });
40 | }, null);
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/chat/messages/text.tsx:
--------------------------------------------------------------------------------
1 | import { h, Component } from "preact";
2 | import MessageType from "./messagetype";
3 | import { IMessageTypeProps } from "../../typings";
4 |
5 | export default class TextType extends MessageType {
6 | render(props: IMessageTypeProps) {
7 | const message = props.message;
8 | const attachment = message.attachment;
9 |
10 | const textObject = { __html: message.text };
11 |
12 | return (
13 |
14 |
15 |
16 | {attachment && attachment.type === "image" ? (
17 | 
18 | ) : (
19 | ""
20 | )}
21 | {attachment && attachment.type === "audio" ? (
22 |
25 | ) : (
26 | ""
27 | )}
28 | {attachment && attachment.type === "video" ? (
29 |
37 | ) : (
38 | ""
39 | )}
40 |
41 | );
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # BotMan Web Widget
2 |
3 | ## Install requirements
4 |
5 | ### Install nodejs
6 | ```
7 | apt-get install build-essential libssl-dev
8 | apt-get install nodejs
9 | nodejs -v
10 | apt-get install npm
11 | npm -v
12 | ```
13 |
14 | ### Install nvm
15 |
16 | To download the nvm installation script from the project's GitHub page, you can use curl. Note that the version number may differ from what is highlighted here:
17 |
18 | ```
19 | curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh -o install_nvm.sh
20 | ```
21 |
22 | Inspect the installation script with nano:
23 |
24 | ```
25 | nano install_nvm.sh
26 | ```
27 |
28 | Run the script with bash:
29 |
30 | ```
31 | bash install_nvm.sh
32 | ```
33 |
34 | It will install the software into a subdirectory of your home directory at ~/.nvm. It will also add the necessary lines to your ~/.profile file to use the file.
35 |
36 | To gain access to the nvm functionality, you'll need to either log out and log back in again or source the ~/.profile file so that your current session knows about the changes:
37 |
38 | ```
39 | source ~/.profile
40 | ```
41 |
42 | With nvm installed, you can install isolated Node.js versions. For information about the versions of Node.js that are available, type:
43 |
44 | ```
45 | nvm ls-remote
46 | ```
47 |
48 | Then you can use nvm to install the node version you need
49 |
50 | ```
51 | nvm use
8 | {/* keyboard arrow up */}
9 | { (isOpened) ?
10 |
26 | :
27 |
36 |
37 | }
38 |
39 | );
40 | }
41 | }
42 |
43 | interface IArrowIconProps {
44 | isOpened: boolean
45 | }
--------------------------------------------------------------------------------
/src/widget/chat-floating-button.tsx:
--------------------------------------------------------------------------------
1 | import { h, Component } from 'preact';
2 | import {mobileClosedMessageAvatarStyle, closedChatAvatarImageStyle} from './style';
3 | import { IConfiguration } from '../typings';
4 |
5 | export default class ChatFloatingButton extends Component
10 |
34 | );
35 | }
36 | }
37 |
38 | interface IChatFloatingButtonProps {
39 | onClick: any,
40 | conf: IConfiguration
41 | }
--------------------------------------------------------------------------------
/src/widget/api.ts:
--------------------------------------------------------------------------------
1 | import Widget from './widget';
2 | import {IMessage} from "../typings";
3 |
4 | export default class Api {
5 |
6 | widget: Widget;
7 |
8 | constructor(widget: Widget) {
9 | this.widget = widget;
10 | }
11 |
12 | open() {
13 | this.widget.open();
14 | }
15 |
16 | close() {
17 | this.widget.close();
18 | }
19 |
20 | toggle() {
21 | this.widget.toggle();
22 | }
23 |
24 | isOpen() {
25 | return this.widget.state.isChatOpen === true;
26 | }
27 |
28 | callChatWidget(payload: Object) {
29 | if (this.isOpen()) {
30 | (document.getElementById('chatBotManFrame') as HTMLIFrameElement).contentWindow.postMessage(payload, '*');
31 | } else {
32 | try {
33 | this.open();
34 | setTimeout(() => {
35 | (document.getElementById('chatBotManFrame') as HTMLIFrameElement).contentWindow.postMessage(payload, '*');
36 | }, 750);
37 | } catch (e) {
38 | console.error(e);
39 | }
40 | }
41 | }
42 |
43 | writeToMessages(message: IMessage) {
44 | this.callChatWidget({
45 | method: 'writeToMessages',
46 | params: [
47 | message
48 | ]
49 | })
50 | }
51 |
52 | sayAsBot(text: string) {
53 | this.callChatWidget({
54 | method: 'sayAsBot',
55 | params: [
56 | text
57 | ]
58 | });
59 | }
60 |
61 | say(text: string) {
62 | this.callChatWidget({
63 | method: 'say',
64 | params: [
65 | text
66 | ]
67 | });
68 | }
69 |
70 | whisper(text: string) {
71 | this.callChatWidget({
72 | method: 'whisper',
73 | params: [
74 | text
75 | ]
76 | });
77 | }
78 |
79 | }
--------------------------------------------------------------------------------
/src/widget/index.tsx:
--------------------------------------------------------------------------------
1 | import {h, render} from 'preact';
2 | import Widget from './widget';
3 | import {defaultConfiguration} from './configuration';
4 | import {IConfiguration} from "../typings";
5 |
6 | if (window.attachEvent) {
7 | window.attachEvent('onload', injectChat);
8 | } else {
9 | window.addEventListener('load', injectChat, false);
10 | }
11 |
12 | function getUrlParameter(name: string, defaults = '') {
13 | name = name.replace(/[[]/, '\\[').replace(/[]]/, '\\]');
14 | let regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
15 | let results = regex.exec(document.getElementById('botmanWidget').getAttribute('src'));
16 | return results === null ? defaults : decodeURIComponent(results[1].replace(/\+/g, ' '));
17 | }
18 |
19 | function getUserId(conf: IConfiguration) {
20 | return conf.userId || generateRandomId();
21 | }
22 |
23 | function generateRandomId() {
24 | return Math.random().toString(36).substr(2, 6);
25 | }
26 |
27 | function injectChat() {
28 | let root = document.createElement('div');
29 | root.id = 'botmanWidgetRoot';
30 | document.getElementsByTagName('body')[0].appendChild(root);
31 |
32 | let settings = {};
33 | try {
34 | settings = JSON.parse(getUrlParameter('settings', '{}'));
35 | } catch (e) { }
36 |
37 | const dynamicConf = window.botmanWidget || {} as IConfiguration; // these configuration are loaded when the chat frame is opened
38 |
39 | dynamicConf.userId = getUserId({...defaultConfiguration, ...dynamicConf});
40 |
41 | if (typeof dynamicConf.echoChannel === 'function') {
42 | dynamicConf.echoChannel = dynamicConf.echoChannel(dynamicConf.userId);
43 | }
44 |
45 | const conf = {...defaultConfiguration, ...settings, ...dynamicConf};
46 |
47 | const iFrameSrc = conf.frameEndpoint;
48 |
49 | render(
50 |
17 |
18 | {(conf.bubbleAvatarUrl === '') ?
19 |
25 | :
26 | ((conf.bubbleAvatarUrl.indexOf('/')!==-1) ?
27 | 
:
{conf.bubbleAvatarUrl})
31 | }
32 |
33 | {conf.bubbleAvatarUrl}
this.performAction(button)}>
11 | {button.title}
12 |
;
13 | }
14 | if (button.type === 'web_url') {
15 | return {button.title};
16 | }
17 | }
18 |
19 | render(props: IMessageTypeProps) {
20 | const message = props.message;
21 |
22 | const globalButtons = message.globalButtons.map((button: IButton) => {
23 | return this.getButton(button);
24 | });
25 |
26 | const lists = message.elements.map((element) => {
27 | const elementButtons = element.buttons.map((button: IButton) => {
28 | return this.getButton(button);
29 | });
30 |
31 | return
32 | 
33 |
;
37 | });
38 |
39 | return (
40 | {element.title}
34 |{element.subtitle}
35 | {elementButtons} 36 |
41 |
46 | );
47 | }
48 |
49 | performAction(button: IButton) {
50 | botman.callAPI(button.payload, true, null, (msg: IMessage) => {
51 | this.props.messageHandler({
52 | text: msg.text,
53 | type: msg.type,
54 | actions: msg.actions,
55 | attachment: msg.attachment,
56 | additionalParameters: msg.additionalParameters,
57 | from: 'chatbot'
58 | });
59 | }, null);
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "extends": "eslint:recommended",
4 | "plugins": [
5 | "react",
6 | "jest"
7 | ],
8 | "env": {
9 | "browser": true,
10 | "node": true,
11 | "mocha": true,
12 | "es6": true,
13 | "jest/globals": true
14 | },
15 | "parserOptions": {
16 | "ecmaFeatures": {
17 | "modules": true,
18 | "jsx": true
19 | }
20 | },
21 | "settings": {
22 | "react": {
23 | "pragma": "h"
24 | }
25 | },
26 | "globals": {
27 | "sleep": 1
28 | },
29 | "rules": {
30 | "react/jsx-no-duplicate-props": 2,
31 | "react/self-closing-comp": 2,
32 | "react/prefer-es6-class": 2,
33 | "react/no-string-refs": 2,
34 | "react/require-render-return": 2,
35 | "react/no-find-dom-node": 2,
36 | "react/no-is-mounted": 2,
37 | "react/jsx-no-comment-textnodes": 2,
38 | "react/jsx-curly-spacing": 2,
39 | "react/jsx-no-undef": 2,
40 | "react/jsx-uses-react": 2,
41 | "react/jsx-uses-vars": 2,
42 | "jest/no-disabled-tests": 1,
43 | "jest/no-focused-tests": 1,
44 | "jest/no-identical-title": 2,
45 | "no-empty": 0,
46 | "no-console": 0,
47 | "no-cond-assign": 1,
48 | "no-empty-pattern": 0,
49 | "no-empty-character-class": 0,
50 | "semi": 2,
51 | "camelcase": 0,
52 | "comma-style": 2,
53 | "comma-dangle": [2, "never"],
54 | "indent": [2],
55 | "no-mixed-spaces-and-tabs": [0, "smart-tabs"],
56 | "no-trailing-spaces": [2, { "skipBlankLines": true }],
57 | "max-nested-callbacks": [2, 3],
58 | "no-implied-eval": 2,
59 | "no-new-func": 2,
60 | "guard-for-in": 2,
61 | "eqeqeq": 1,
62 | "no-else-return": 2,
63 | "no-redeclare": 2,
64 | "no-dupe-keys": 2,
65 | "strict": [2, "never"],
66 | "no-shadow": 0,
67 | "no-delete-var": 2,
68 | "no-undef-init": 2,
69 | "no-unused-vars": 0,
70 | "no-shadow-restricted-names": 2,
71 | "handle-callback-err": 0,
72 | "no-lonely-if": 2,
73 | "keyword-spacing": 2,
74 | "constructor-super": 2,
75 | "no-this-before-super": 2,
76 | "no-dupe-class-members": 2,
77 | "no-const-assign": 2,
78 | "prefer-spread": 2,
79 | "no-useless-concat": 2,
80 | "no-var": 2,
81 | "object-shorthand": 2,
82 | "prefer-arrow-callback": 2
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/src/widget/chat-title-msg.tsx:
--------------------------------------------------------------------------------
1 | import { h, Component } from 'preact';
2 | import {desktopClosedMessageStyle, desktopIntroMessageStyle, desktopClosedMessageAvatarStyle, closedChatAvatarImageStyle} from './style';
3 |
4 | export default class ChatTitleMsg extends Component
42 | {lists}
43 |
44 | {globalButtons}
45 |
9 |
32 | );
33 | }
34 | }
35 |
36 | interface IChatTitleMsgProps {
37 | conf: {
38 | bubbleAvatarUrl: string,
39 | bubbleBackground: string
40 | }
41 | }
--------------------------------------------------------------------------------
/src/chat/message-holder.tsx:
--------------------------------------------------------------------------------
1 | import { h, Component } from 'preact';
2 | import {IMessage, IMessageHolderProps, IMessageTypeState} from '../typings';
3 | import * as dateFormat from "dateformat";
4 | import TextType from "./messages/text";
5 | import ActionType from "./messages/action";
6 | import TypingIndicator from "./messages/typing-indicator";
7 | import ListType from "./messages/list";
8 | import ButtonsType from "./messages/buttons";
9 |
10 |
11 | const dayInMillis = 60 * 60 * 24 * 1000;
12 |
13 | const messageTypes = {
14 | actions: ActionType,
15 | buttons: ButtonsType,
16 | list: ListType,
17 | text: TextType,
18 | typing_indicator: TypingIndicator
19 | };
20 |
21 | export default class MessageHolder extends Component
16 | {(conf.bubbleAvatarUrl === '') ?
17 |
23 | :
24 | ((conf.bubbleAvatarUrl.indexOf('/')!==-1) ?
25 | :
{conf.bubbleAvatarUrl})
29 | }
30 |
31 | {conf.bubbleAvatarUrl}
87 |
88 | {/* Open/close button */}
89 | {(isMobile || conf.alwaysUseFloatingButton) && !isChatOpen ?
90 |
91 |
92 |
93 | :
94 |
95 | (isChatOpen || this.state.wasChatOpened) ?
96 | (isChatOpen ?
97 | )
106 | :
107 |
108 | }
109 |
110 | {/*Chat IFrame*/}
111 |
119 | );
120 | }
121 |
122 | toggle = () => {
123 | let stateData = {
124 | pristine: false,
125 | isChatOpen: !this.state.isChatOpen,
126 | wasChatOpened: this.state.wasChatOpened
127 | };
128 | if (!this.state.isChatOpen && !this.state.wasChatOpened) {
129 | if (this.props.conf.sendWidgetOpenedEvent) {
130 | setTimeout(() => {
131 | this.sendOpenEvent();
132 | }, 500);
133 | }
134 | stateData.wasChatOpened = true;
135 | }
136 | this.setState(stateData);
137 | };
138 |
139 | open() {
140 | this.setState({
141 | pristine: false,
142 | isChatOpen: true,
143 | wasChatOpened: true
144 | });
145 | }
146 |
147 | close() {
148 | this.setState({
149 | pristine: false,
150 | isChatOpen: false
151 | });
152 | }
153 |
154 | private sendOpenEvent() {
155 | let data = new FormData();
156 | data.append('driver', 'web');
157 | data.append('eventName', 'widgetOpened');
158 | data.append('eventData', this.props.conf.widgetOpenedEventData);
159 |
160 | axios.post(this.props.conf.chatServer, data).then(response => {
161 | const messages = response.data.messages || [];
162 |
163 | messages.forEach((message : IMessage) => {
164 | window.botmanChatWidget.writeToMessages(message);
165 | });
166 | });
167 | }
168 | }
169 |
170 | interface IWidgetState {
171 | isChatOpen: boolean,
172 | pristine: boolean,
173 | wasChatOpened: boolean,
174 | }
175 |
176 |
177 | interface IWidgetProps {
178 | iFrameSrc: string,
179 | conf: IConfiguration,
180 | isMobile: boolean,
181 | }
182 |
183 | declare global {
184 | interface Window { attachEvent: Function, botmanChatWidget: Api }
185 | }
186 |
187 | // FIXME: toGMTString is deprecated
188 | interface IDate extends Date {
189 | toUTCString(): string;
190 | }
191 |
--------------------------------------------------------------------------------
/src/chat/chat.tsx:
--------------------------------------------------------------------------------
1 | import { h, Component } from "preact";
2 | import MessageArea from "./message-area";
3 | import { botman } from "./botman";
4 | import {IMessage, IConfiguration} from "../typings";
5 |
6 | export default class Chat extends Component
98 |
105 |
:
102 | {conf.title}
103 |
104 |
115 | {pristine ? null :
117 |
118 |
76 |
77 |
83 |
84 | {this.state.replyType === ReplyType.Text ? (
85 | {
91 | this.input = input as HTMLInputElement;
92 | }}
93 | onKeyPress={this.handleKeyPress}
94 | autofocus
95 | />
96 | ) : ''}
97 |
98 | {this.state.replyType === ReplyType.TextArea ? (
99 |
100 |
101 |
111 |
112 |