Merge pull request #42 from PrajvalRaval/master

renatobecker · web-flow · commit d51eb48c6cec · 2020-09-04T17:00:13.000-03:00
[NEW] Add support for UIKit components
diff --git a/DialogflowApp.ts b/DialogflowApp.ts
@@ -14,17 +14,28 @@ import { ILivechatMessage } from '@rocket.chat/apps-engine/definition/livechat';
 import { IPostMessageSent } from '@rocket.chat/apps-engine/definition/messages';
 import { IAppInfo } from '@rocket.chat/apps-engine/definition/metadata';
 import { ISetting } from '@rocket.chat/apps-engine/definition/settings';
+import { IUIKitLivechatInteractionHandler, IUIKitResponse, UIKitLivechatBlockInteractionContext } from '@rocket.chat/apps-engine/definition/uikit';
 import { settings } from './config/Settings';
 import { FulfillmentsEndpoint } from './endpoints/FulfillmentsEndpoint';
 import { IncomingEndpoint } from './endpoints/IncomingEndpoint';
+import { ExecuteLivechatBlockActionHandler } from './handler/ExecuteLivechatBlockActionHandler';
 import { OnSettingUpdatedHandler } from './handler/OnSettingUpdatedHandler';
 import { PostMessageSentHandler } from './handler/PostMessageSentHandler';
 
-export class DialogflowApp extends App implements IPostMessageSent {
+export class DialogflowApp extends App implements IPostMessageSent, IUIKitLivechatInteractionHandler {
     constructor(info: IAppInfo, logger: ILogger, accessors: IAppAccessors) {
         super(info, logger, accessors);
     }
 
+    public async executeLivechatBlockActionHandler(context: UIKitLivechatBlockInteractionContext,
+                                                   read: IRead,
+                                                   http: IHttp,
+                                                   persistence: IPersistence,
+                                                   modify: IModify): Promise<IUIKitResponse> {
+        const handler = new ExecuteLivechatBlockActionHandler(this, context, read, http, persistence, modify);
+        return await handler.run();
+    }
+
     public async executePostMessageSent(message: ILivechatMessage,
                                         read: IRead,
                                         http: IHttp,
diff --git a/README.md b/README.md
@@ -61,6 +61,8 @@ You can find all these credentials in a JSON file, which u can get from [here](h
         - The Bot will send this message to Visitor if service is unavailable like suppose if no agents are online.
     9. Close Chat Message (optional)
         - This message will be sent automatically when a chat is closed
+    10. Hide Quick Replies (required)
+        - If enabled, then all quick-replies will hide when a visitor clicks on any one of them
 
 4. (Optional Step) Lastly you can test your Dialogflow Connection by viewing App Logs. To view the logs, goto App Page (`Setting > Apps > Dialogflow`). There click on menu item (3 vertical dots icon) and then select `View Logs`. There select the **most recent** `onSettingUpdated` title. If you see `------------------ Google Credentials validation Success ----------------` message, then it means your setup is fine. If you don't see this message, then recheck your Dialogflow credentials.
 
diff --git a/app.json b/app.json
@@ -1,7 +1,7 @@
 {
     "id": "21b7d3ba-031b-41d9-8ff2-fbbfa081ae90",
-    "version": "1.0.0",
-    "requiredApiVersion": "^1.15.0",
+    "version": "1.2.0",
+    "requiredApiVersion": "^1.17.0",
     "iconFile": "icon.png",
     "author": {
         "name": "Rocket.Chat",
diff --git a/config/Settings.ts b/config/Settings.ts
@@ -10,6 +10,7 @@ export enum AppSetting {
     DialogflowHandoverMessage = 'dialogflow_handover_message',
     DialogflowServiceUnavailableMessage = 'dialogflow_service_unavailable_message',
     DialogflowCloseChatMessage = 'dialogflow_close_chat_message',
+    DialogflowHideQuickReplies = 'dialogflow_hide_quick_replies',
 }
 
 export enum DefaultMessage {
@@ -97,4 +98,14 @@ export const settings: Array<ISetting> = [
         i18nDescription: 'dialogflow_close_chat_message_description',
         required: false,
     },
+    {
+        id: AppSetting.DialogflowHideQuickReplies,
+        public: true,
+        type: SettingType.BOOLEAN,
+        packageValue: true,
+        value: true,
+        i18nLabel: 'dialogflow_hide_quick_replies',
+        i18nDescription: 'dialogflow_hide_quick_replies_description',
+        required: true,
+    },
 ];
diff --git a/docs/QuickReplies.md b/docs/QuickReplies.md
@@ -1,34 +1,31 @@
-### Quick Replies Structure
+# Quick Replies
+
+## Required Structure
 ```
 {
   "quickReplies": {
     "text": string,
     "options": [
-      string
+      array of objects
     ]
   }
 }
 ```
 
-### Field description
-
-1. `text`
+## Params
 
-- **Type**: string
-- **Description**:  The title of the collection of quick replies
+| **Param Name** | **Param Type** |                **Description**                | **Dependency** |                                                                         **Example**                                                                         |
+|:--------------:|:--------------:|:---------------------------------------------:|:--------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------:|
+|     `text`     |     String     | The title of the collection of quick replies. |    Required    |                                 ``` "text": "Sorry I don't know the answer. Please select one of the following options:" ```                                |
+|    `options`   |      Array     |    The collection of quick replies objects.   |    Required    | ``` "options": [       {         "text": "Start chat with agent",         "actionId": "sflaia-start-chat",         "buttonStyle" : "primary"       }  ] ``` |
 
-2. `options[]`
-- **Type**: Array of string
-- **Description**:  The collection of quick replies.
+## `options` Params
 
+| **Param Name** | **Param Type** |                                                                      **Description**                                                                     | **Dependency** | **Acceptable Values** |               **Example**               |
+|:--------------:|:--------------:|:--------------------------------------------------------------------------------------------------------------------------------------------------------:|:--------------:|:---------------------:|:---------------------------------------:|
+|     `text`     |     String     |                                                            Title of the quick replies action.                                                            |    Required    |          Any          |       ``` "text": "Start Chat" ```      |
+|   `actionId`   |     String     |                                                              Id of the quick replies action.                                                             |    Optional    |          Any          | ``` "actionId": "sflaia-start-chat" ``` |
+|  `buttonStyle` |     String     | Button style of your quick replies action. Use `danger` to render a red colour action and `primary` for an action that matches your Livechat Bar colour. |    Optional    | `danger` or `primary` |     ``` "buttonStyle": "primary" ```    |
 ### Example
 
-In this example, there are 2 simple text messages and one `quickReply` message
-
-#### Dialogflow Dashboard
-
-![image](./images/QuickRepliesDialogflowDashboard.png)
-
-#### Corresponding Livechat widget
-
-![image](./images/QuickRepliesLivechatWidget.png)
+![Quick Replies Example](https://user-images.githubusercontent.com/41849970/91997140-62939c00-ed57-11ea-8b27-82e650a502f0.png)
diff --git a/docs/images/QuickRepliesDialogflowDashboard.png b/docs/images/QuickRepliesDialogflowDashboard.png
diff --git a/docs/images/QuickRepliesLivechatWidget.png b/docs/images/QuickRepliesLivechatWidget.png
diff --git a/enum/Dialogflow.ts b/enum/Dialogflow.ts
@@ -1,3 +1,5 @@
+import { ButtonStyle } from '@rocket.chat/apps-engine/definition/uikit';
+
 export interface IDialogflowMessage {
     messages?: Array<string | IDialogflowQuickReplies>;
     isFallback: boolean;
@@ -6,7 +8,13 @@ export interface IDialogflowMessage {
 
 export interface IDialogflowQuickReplies {
     text: string;
-    options: Array<string>;
+    options: Array<IDialogflowQuickReplyOptions>;
+}
+
+export interface IDialogflowQuickReplyOptions {
+    text: string;
+    actionId?: string;
+    buttonStyle?: ButtonStyle;
 }
 
 export interface IDialogflowAccessToken {
diff --git a/handler/ExecuteLivechatBlockActionHandler.ts b/handler/ExecuteLivechatBlockActionHandler.ts
@@ -0,0 +1,51 @@
+import { IHttp, IModify, IPersistence, IRead } from '@rocket.chat/apps-engine/definition/accessors';
+import { IApp } from '@rocket.chat/apps-engine/definition/IApp';
+import { ILivechatRoom } from '@rocket.chat/apps-engine/definition/livechat';
+import { IUIKitResponse, UIKitLivechatBlockInteractionContext } from '@rocket.chat/apps-engine/definition/uikit';
+import { UIKitIncomingInteractionContainerType } from '@rocket.chat/apps-engine/definition/uikit/UIKitIncomingInteractionContainer';
+import { IUser } from '@rocket.chat/apps-engine/definition/users';
+import { AppSetting } from '../config/Settings';
+import { createLivechatMessage, deleteAllActionBlocks } from '../lib/Message';
+import { getAppSettingValue } from '../lib/Settings';
+
+export class ExecuteLivechatBlockActionHandler {
+    constructor(private readonly app: IApp,
+                private context: UIKitLivechatBlockInteractionContext,
+                private read: IRead,
+                private http: IHttp,
+                private persistence: IPersistence,
+                private modify: IModify) {}
+
+    public async run(): Promise<IUIKitResponse> {
+        try {
+            const interactionData = this.context.getInteractionData();
+
+            const { visitor, room, container: { id, type }, value } = interactionData;
+
+            if (type !== UIKitIncomingInteractionContainerType.MESSAGE) {
+                return this.context.getInteractionResponder().successResponse();
+            }
+
+            const DialogflowBotUsername: string = await getAppSettingValue(this.read, AppSetting.DialogflowBotUsername);
+            const { servedBy: { username = null } = {}, id: rid } = room as ILivechatRoom;
+
+            if (!username || DialogflowBotUsername !== username) {
+                return this.context.getInteractionResponder().successResponse();
+            }
+
+            const appUser = await this.read.getUserReader().getAppUser(this.app.getID()) as IUser;
+
+            await createLivechatMessage(rid, this.read, this.modify, { text: value }, visitor);
+
+            const { value: hideQuickRepliesSetting } = await this.read.getEnvironmentReader().getSettings().getById(AppSetting.DialogflowHideQuickReplies);
+            if (hideQuickRepliesSetting) {
+                await deleteAllActionBlocks(this.modify, appUser, id);
+            }
+
+            return this.context.getInteractionResponder().successResponse();
+        } catch (error) {
+            this.app.getLogger().error(error);
+            return this.context.getInteractionResponder().errorResponse();
+        }
+    }
+}
diff --git a/i18n/en.json b/i18n/en.json
@@ -12,5 +12,7 @@
     "dialogflow_service_unavailable_message": "Service Unavailable Message",
     "dialogflow_service_unavailable_message_description": "The Bot will send this message to Visitor if service is unavailable",
     "dialogflow_close_chat_message": "Close Chat Message",
-    "dialogflow_close_chat_message_description": "This message will be sent automatically when a chat is closed"
+    "dialogflow_close_chat_message_description": "This message will be sent automatically when a chat is closed",
+    "dialogflow_hide_quick_replies": "Hide Quick Replies",
+    "dialogflow_hide_quick_replies_description": "If enabled, then all quick-replies will hide when a visitor clicks on any one of them"
 }
diff --git a/lib/Helper.ts b/lib/Helper.ts
@@ -34,3 +34,11 @@ export const base64EncodeData = (data: string, len: number, b64x: string, b64pad
 
     return dst;
 };
+
+export const uuid = (): string => {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+        const r = Math.random() * 16 | 0;
+        const v = c === 'x' ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+    });
+};
diff --git a/lib/Message.ts b/lib/Message.ts
@@ -1,27 +1,34 @@
 import { IModify, IRead } from '@rocket.chat/apps-engine/definition/accessors';
-import { IMessageAction, IMessageAttachment, MessageActionType, MessageProcessingType } from '@rocket.chat/apps-engine/definition/messages';
+import { IVisitor } from '@rocket.chat/apps-engine/definition/livechat';
+import { BlockElementType, BlockType, IActionsBlock, IButtonElement, TextObjectType } from '@rocket.chat/apps-engine/definition/uikit';
+import { IUser } from '@rocket.chat/apps-engine/definition/users';
 import { AppSetting } from '../config/Settings';
-import { IDialogflowMessage, IDialogflowQuickReplies } from '../enum/Dialogflow';
+import { IDialogflowMessage, IDialogflowQuickReplies, IDialogflowQuickReplyOptions } from '../enum/Dialogflow';
 import { Logs } from '../enum/Logs';
+import { uuid } from './Helper';
 import { getAppSettingValue } from './Settings';
 
 export const createDialogflowMessage = async (rid: string, read: IRead,  modify: IModify, dialogflowMessage: IDialogflowMessage): Promise<any> => {
     const { messages = [] } = dialogflowMessage;
 
     for (const message of messages) {
         const { text, options } = message as IDialogflowQuickReplies;
-
         if (text && options) {
-            // message is instanceof IDialogflowQuickReplies
-            const actions: Array<IMessageAction> = options.map((payload: string) => ({
-                type: MessageActionType.BUTTON,
-                text: payload,
-                msg: payload,
-                msg_in_chat_window: true,
-                msg_processing_type: MessageProcessingType.SendMessage,
-            } as IMessageAction));
-            const attachment: IMessageAttachment = { actions };
-            await createMessage(rid, read, modify, { text, attachment });
+            const elements: Array<IButtonElement> = options.map((payload: IDialogflowQuickReplyOptions) => ({
+                type: BlockElementType.BUTTON,
+                text: {
+                    type: TextObjectType.PLAINTEXT,
+                    text: payload.text,
+                },
+                value: payload.text,
+                actionId: payload.actionId || uuid(),
+                ...payload.buttonStyle && { style: payload.buttonStyle },
+            } as IButtonElement));
+
+            const actionsBlock: IActionsBlock = { type: BlockType.ACTIONS, elements };
+
+            await createMessage(rid, read, modify, { text });
+            await createMessage(rid, read, modify, { actionsBlock });
         } else {
             // message is instanceof string
             if ((message as string).trim().length > 0) {
@@ -55,6 +62,48 @@ export const createMessage = async (rid: string, read: IRead,  modify: IModify,
     }
 
     const msg = modify.getCreator().startMessage().setRoom(room).setSender(sender);
+
+    const { text, actionsBlock, attachment } = message;
+
+    if (text) {
+        msg.setText(text);
+    }
+
+    if (attachment) {
+        msg.addAttachment(attachment);
+    }
+
+    if (actionsBlock) {
+        const { elements } = actionsBlock as IActionsBlock;
+        msg.addBlocks(modify.getCreator().getBlockBuilder().addActionsBlock({ elements }));
+    }
+
+    return new Promise(async (resolve) => {
+        modify.getCreator().finish(msg)
+        .then((result) => resolve(result))
+        .catch((error) => console.error(error));
+    });
+};
+
+export const createLivechatMessage = async (rid: string, read: IRead,  modify: IModify, message: any, visitor: IVisitor ): Promise<any> => {
+    if (!message) {
+        return;
+    }
+
+    const botUserName = await getAppSettingValue(read, AppSetting.DialogflowBotUsername);
+    if (!botUserName) {
+        this.app.getLogger().error(Logs.EMPTY_BOT_USERNAME_SETTING);
+        return;
+    }
+
+    const room = await read.getRoomReader().getById(rid);
+    if (!room) {
+        this.app.getLogger().error(`${ Logs.INVALID_ROOM_ID } ${ rid }`);
+        return;
+    }
+
+    const msg = modify.getCreator().startLivechatMessage().setRoom(room).setVisitor(visitor);
+
     const { text, attachment } = message;
 
     if (text) {
@@ -71,3 +120,9 @@ export const createMessage = async (rid: string, read: IRead,  modify: IModify,
         .catch((error) => console.error(error));
     });
 };
+
+export const deleteAllActionBlocks = async (modify: IModify, appUser: IUser, msgId: string): Promise<void> => {
+    const msgBuilder = await modify.getUpdater().message(msgId, appUser);
+    msgBuilder.setEditor(appUser).setBlocks(modify.getCreator().getBlockBuilder().getBlocks());
+    return modify.getUpdater().finish(msgBuilder);
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "devDependencies": {
-        "@rocket.chat/apps-engine": "^1.15.0",
+        "@rocket.chat/apps-engine": "^1.17.0",
         "@types/node": "^10.17.24",
         "tslint": "^5.10.0",
         "typescript": "^2.9.1"

Original file line number	Diff line number	Diff line change
`@@ -12,5 +12,7 @@`
`12`	`12`	`"dialogflow_service_unavailable_message": "Service Unavailable Message",`
`13`	`13`	`"dialogflow_service_unavailable_message_description": "The Bot will send this message to Visitor if service is unavailable",`
`14`	`14`	`"dialogflow_close_chat_message": "Close Chat Message",`
`15`		`- "dialogflow_close_chat_message_description": "This message will be sent automatically when a chat is closed"`
	`15`	`+ "dialogflow_close_chat_message_description": "This message will be sent automatically when a chat is closed",`
	`16`	`+ "dialogflow_hide_quick_replies": "Hide Quick Replies",`
	`17`	`+ "dialogflow_hide_quick_replies_description": "If enabled, then all quick-replies will hide when a visitor clicks on any one of them"`
`16`	`18`	`}`