@servicetitan/titan-chatbot-ui-cypress 3.0.0

package/src/mocks/native-client.mock.ts

@@ -0,0 +1,213 @@
+import { Models } from '@servicetitan/titan-chatbot-api';
+
+const sessionId = 100;
+const messageId = 1;
+
+export const Options = {
+    response: {
+        options: {
+            key: 'customer-knowledge',
+            displayName: null,
+            type: 1,
+            subOptions: [
+                {
+                    key: 'Sources',
+                    displayName: 'Sources',
+                    type: 1,
+                    subOptions: [
+                        {
+                            key: 'KnowledgeBase',
+                            displayName: 'Knowledge Base',
+                            type: 2,
+                            subOptions: [
+                                {
+                                    key: 'ContentTypes',
+                                    displayName: 'Content Types',
+                                    type: 1,
+                                    subOptions: [
+                                        {
+                                            key: 'kbReleaseNotes',
+                                            displayName: 'Release Notes',
+                                            type: 2,
+                                            subOptions: null,
+                                        },
+                                        {
+                                            key: 'kbFaq',
+                                            displayName: 'FAQ',
+                                            type: 2,
+                                            subOptions: null,
+                                        },
+                                        {
+                                            key: 'kbHowTo',
+                                            displayName: 'How To',
+                                            type: 2,
+                                            subOptions: null,
+                                        },
+                                    ],
+                                },
+                                {
+                                    key: 'ProductAreas',
+                                    displayName: 'Product Areas',
+                                    type: 1,
+                                    subOptions: [
+                                        {
+                                            key: 'Call Booking',
+                                            displayName: 'Call Booking',
+                                            type: 2,
+                                            subOptions: null,
+                                        },
+                                        {
+                                            key: 'Marketing',
+                                            displayName: 'Marketing',
+                                            type: 2,
+                                            subOptions: null,
+                                        },
+                                        {
+                                            key: 'Marketing Pro',
+                                            displayName: 'Marketing Pro',
+                                            type: 2,
+                                            subOptions: null,
+                                        },
+                                    ],
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+    },
+    intercept: (baseUrl: string, version: number) => {
+        cy.intercept('GET', `${baseUrl}/api/v${version}/options`, {
+            statusCode: 200,
+            body: Options.response,
+        }).as('getOptions');
+        return '@getOptions';
+    },
+};
+
+export const SessionPost = {
+    request: {},
+    response: {
+        id: sessionId,
+        data: null,
+    },
+    intercept: (baseUrl: string, version: number) => {
+        cy.intercept('POST', `${baseUrl}/api/v${version}/session`, {
+            statusCode: 200,
+            body: SessionPost.response,
+        }).as('sessionPost');
+        return '@sessionPost';
+    },
+};
+
+export const SessionPatch = {
+    request: {
+        id: sessionId,
+        data: {
+            closedUtc: new Date().toISOString(),
+        },
+    },
+    response: {
+        id: sessionId,
+        data: {
+            closedUtc: new Date().toISOString(),
+        },
+    },
+    intercept: (baseUrl: string, version: number) => {
+        cy.intercept('PATCH', `${baseUrl}/api/v${version}/session`, {
+            statusCode: 200,
+            body: SessionPatch.response,
+        }).as('sessionPatch');
+        return '@sessionPatch';
+    },
+};
+
+export const SessionDelete = {
+    request: {
+        id: sessionId,
+    },
+    response: {
+        id: sessionId,
+        data: {
+            closedUtc: new Date().toISOString(),
+        },
+    },
+    intercept: (baseUrl: string, version: number) => {
+        cy.intercept('DELETE', `${baseUrl}/api/v${version}/session`, {
+            statusCode: 204,
+        }).as('sessionDelete');
+        return '@sessionDelete';
+    },
+};
+
+export const MessagePost = {
+    request: {
+        sessionId,
+        question: 'how to change my password?',
+        experience: Models.Experience.MultiTurn,
+    },
+    response: {
+        id: messageId,
+        sessionId,
+        answer: "Echo answer to 'how to change my password?'",
+        scoredUrls: null,
+        guardFlag: 'N',
+        isGuardrailed: false,
+    },
+    intercept: (baseUrl: string, version: number) => {
+        cy.intercept('POST', `${baseUrl}/api/v${version}/message`, {
+            statusCode: 200,
+            body: MessagePost.response,
+        }).as('messagePost');
+        return '@messagePost';
+    },
+};
+
+export const MessageFeedbackPost = {
+    request: {
+        sessionId,
+        messageId,
+        rating: Models.FeedbackRatings.ThumbsUp,
+    } as Models.IFeedback,
+    response: {
+        sessionId,
+        messageId,
+        rating: Models.FeedbackRatings.ThumbsUp,
+    } as Models.IFeedback,
+};
+
+export const SessionFeedbackPost = {
+    request: {
+        sessionId,
+        rating: Models.FeedbackRatings.ThumbsUp,
+        description: 'Great session!',
+    } as Models.IFeedback,
+    response: {
+        sessionId,
+        rating: Models.FeedbackRatings.ThumbsUp,
+        description: 'Great session!',
+    } as Models.IFeedback,
+};
+
+export const interceptFeedback = (baseUrl: string, version: number) => {
+    cy.intercept(`${baseUrl}/api/v${version}/feedback`, req => {
+        if (req.body.messageId) {
+            req.alias = 'feedbackPostMessage';
+            req.reply({
+                statusCode: 200,
+                body: MessageFeedbackPost.response,
+            });
+        } else {
+            req.alias = 'feedbackPostSession';
+            req.reply({
+                statusCode: 200,
+                body: SessionFeedbackPost.response,
+            });
+        }
+    });
+    return {
+        aliasPostMessage: '@feedbackPostMessage',
+        aliasPostSession: '@feedbackPostSession',
+    };
+};

package/src/utils/chat-ui-selectors.ts

@@ -0,0 +1,264 @@
+export class ChatUiSelectors {
+    static get chat() {
+        return cy.getCy(ChatUiSelectors.cy.chat);
+    }
+    static get chatConnecting() {
+        return cy.getCy(ChatUiSelectors.cy.chatConnecting);
+    }
+    static get chatError() {
+        return cy.getCy(ChatUiSelectors.cy.chatError);
+    }
+    static get chatErrorText() {
+        return cy.getCy(ChatUiSelectors.cy.chatErrorText);
+    }
+    static get chatErrorRecover() {
+        return cy.getCy(ChatUiSelectors.cy.chatErrorRecover);
+    }
+    static get chatInput() {
+        return cy.getCy(ChatUiSelectors.cy.chatInput);
+    }
+    static get chatSend() {
+        return cy.getCy(ChatUiSelectors.cy.chatSend);
+    }
+    static get chatUploadFile() {
+        return cy.getCy(ChatUiSelectors.cy.chatUploadFile);
+    }
+    static get chatMessageError() {
+        return cy.getCy(ChatUiSelectors.cy.chatMessageError);
+    }
+    static get chatMessageErrorRetry() {
+        return cy.getCy(ChatUiSelectors.cy.chatMessageErrorRetry);
+    }
+    static get chatNotifications() {
+        return cy.getCy(ChatUiSelectors.cy.chatNotifications);
+    }
+    static get chatTimer() {
+        return cy.getCy(ChatUiSelectors.cy.chatTimer);
+    }
+    static get chatTimerRestart() {
+        return cy.getCy(ChatUiSelectors.cy.chatTimerRestart);
+    }
+    static get chatMessages() {
+        return cy.getCy(ChatUiSelectors.cy.chatMessages);
+    }
+    static get chatMessage() {
+        return cy.getCy2(ChatUiSelectors.cy2.chatMessage);
+    }
+    static get chatMessageContent() {
+        return cy.getCy(ChatUiSelectors.cy.chatMessageContent);
+    }
+    static get chatMessageFooter() {
+        return cy.getCy(ChatUiSelectors.cy.chatMessageFooter);
+    }
+    static get chatAvatar() {
+        return cy.getCy(ChatUiSelectors.cy.chatAvatar);
+    }
+    static get chatMessageTimeoutResume() {
+        return cy.getCy(ChatUiSelectors.cy.chatMessageTimeoutResume);
+    }
+    static get chatMessageTimeoutReset() {
+        return cy.getCy(ChatUiSelectors.cy.chatMessageTimeoutReset);
+    }
+    static get chatMessageTypingDots() {
+        return cy.getCy(ChatUiSelectors.cy.chatMessageTypingDots);
+    }
+    static get chatMessageAgent() {
+        return cy.getCy(ChatUiSelectors.cy.chatMessageAgent);
+    }
+    static get chatMessageSystem() {
+        return cy.getCy(ChatUiSelectors.cy.chatMessageSystem);
+    }
+    static get chatMessageTimeout() {
+        return cy.getCy(ChatUiSelectors.cy.chatMessageTimeout);
+    }
+    static get chatMessageUser() {
+        return cy.getCy(ChatUiSelectors.cy.chatMessageUser);
+    }
+    static get chatMessageTyping() {
+        return cy.getCy(ChatUiSelectors.cy.chatMessageTyping);
+    }
+    static get chatMessageContentAgent() {
+        return cy.getCy2(ChatUiSelectors.cy2.chatMessageContentAgent);
+    }
+    static get chatMessageContentUser() {
+        return cy.getCy2(ChatUiSelectors.cy2.chatMessageContentUser);
+    }
+    static get chatAvatarEmpty() {
+        return cy.getCy2(ChatUiSelectors.cy2.chatAvatarEmpty);
+    }
+    static get chatAvatarBot() {
+        return cy.getCy2(ChatUiSelectors.cy2.chatAvatarBot);
+    }
+    static get chatAvatarInitials() {
+        return cy.getCy2(ChatUiSelectors.cy2.chatAvatarInitials);
+    }
+    static get chatbotRestartLink() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotRestartLink);
+    }
+    static get chatbotMessageFeedback() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotMessageFeedback);
+    }
+    static get chatbotMessageFeedbackUnrelated() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotMessageFeedbackUnrelated);
+    }
+    static get chatbotMessageFeedbackUnclear() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotMessageFeedbackUnclear);
+    }
+    static get chatbotMessageFeedbackNotFull() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotMessageFeedbackNotFull);
+    }
+    static get chatbotMessageFeedbackIncorrect() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotMessageFeedbackIncorrect);
+    }
+    static get chatbotMessageFeedbackOther() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotMessageFeedbackOther);
+    }
+    static get chatbotMessageFeedbackOtherComment() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotMessageFeedbackOtherComment);
+    }
+    static get chatbotMessageFeedbackLinkUrl() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotMessageFeedbackLinkUrl);
+    }
+    static get chatbotMessageFeedbackLoading() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotMessageFeedbackLoading);
+    }
+    static get chatbotMessageFeedbackSuccess() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotMessageFeedbackSuccess);
+    }
+    static get chatbotMessageFeedbackFailed() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotMessageFeedbackFailed);
+    }
+    static get chatbotMessageFeedbackThumbsUp() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotMessageFeedbackThumbsUp);
+    }
+    static get chatbotMessageFeedbackProvideAnswer() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotMessageFeedbackProvideAnswer);
+    }
+    static get chatbotMessageFeedbackThumbsDown() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotMessageFeedbackThumbsDown);
+    }
+    static get chatbotMessageFeedbackSubmit() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotMessageFeedbackSubmit);
+    }
+    static get chatbotSessionFeedbackLink() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotSessionFeedbackLink);
+    }
+    static get chatbotSessionFeedbackCancel() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotSessionFeedbackCancel);
+    }
+    static get chatbotSessionFeedbackSubmit() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotSessionFeedbackSubmit);
+    }
+    static get chatbotSessionFeedbackModal() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotSessionFeedbackModal);
+    }
+    static get chatbotSessionFeedbackThumbsUp() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotSessionFeedbackThumbsUp);
+    }
+    static get chatbotSessionFeedbackThumbsDown() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotSessionFeedbackThumbsDown);
+    }
+    static get chatbotSessionFeedbackComment() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotSessionFeedbackComment);
+    }
+    static get chatbotFilters() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotFilters);
+    }
+    static get chatbotFilterSearch() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotFilterSearch);
+    }
+    static get chatbotFilterAll() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotFilterAll);
+    }
+    static get chatbotFilterNone() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotFilterNone);
+    }
+    static get chatbotFilterButton() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotFilterButton);
+    }
+    static get chatbotFilterOptions() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotFilterOptions);
+    }
+    static get chatbotLinksMore() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotLinksMore);
+    }
+    static get chatbotLinksCollapsible() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotLinksCollapsible);
+    }
+    static get chatbotLinksLink() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotLinksLink);
+    }
+    static get chatbotMessageAnswer() {
+        return cy.getCy(ChatUiSelectors.cy.chatbotMessageAnswer);
+    }
+
+    static cy = {
+        chat: 'titan-chat',
+        chatConnecting: 'titan-chat-connecting',
+        chatError: 'titan-chat-error',
+        chatErrorText: 'titan-chat-error-text',
+        chatErrorRecover: 'titan-chat-error-recover',
+        chatInput: 'titan-chat-input',
+        chatSend: 'titan-chat-send',
+        chatUploadFile: 'titan-chat-upload-file',
+        chatMessageError: 'titan-chat-message-error',
+        chatMessageErrorRetry: 'titan-chat-message-error-retry',
+        chatNotifications: 'titan-chat-notifications',
+        chatTimer: 'titan-chat-timer',
+        chatTimerRestart: 'titan-chat-timer-restart',
+        chatMessages: 'titan-chat-messages',
+        chatMessageAgent: 'titan-chat-message-agent',
+        chatMessageSystem: 'titan-chat-message-system',
+        chatMessageTimeout: 'titan-chat-message-timeout',
+        chatMessageUser: 'titan-chat-message-user',
+        chatMessageTyping: 'titan-chat-message-typing',
+        chatMessageContent: 'titan-chat-message-content',
+        chatMessageFooter: 'titan-chat-message-footer',
+        chatAvatar: 'titan-chat-avatar',
+        chatMessageTimeoutResume: 'titan-chat-message-timeout-resume',
+        chatMessageTimeoutReset: 'titan-chat-message-timeout-reset',
+        chatMessageTypingDots: 'titan-chat-message-typing-dots',
+        chatbotRestartLink: 'titan-chatbot-restart-session',
+        chatbotMessageFeedback: 'titan-chatbot-message-feedback-form',
+        chatbotMessageFeedbackUnrelated: 'titan-chatbot-message-feedback-form-unrelated',
+        chatbotMessageFeedbackUnclear: 'titan-chatbot-message-feedback-form-unclear',
+        chatbotMessageFeedbackNotFull: 'titan-chatbot-message-feedback-form-not-full',
+        chatbotMessageFeedbackIncorrect: 'titan-chatbot-message-feedback-form-incorrect',
+        chatbotMessageFeedbackOther: 'titan-chatbot-message-feedback-form-other',
+        chatbotMessageFeedbackOtherComment: 'titan-chatbot-message-feedback-form-other-comment',
+        chatbotMessageFeedbackLinkUrl: 'titan-chatbot-message-feedback-form-link-url',
+        chatbotMessageFeedbackLoading: 'titan-chatbot-message-feedback-loading',
+        chatbotMessageFeedbackSuccess: 'titan-chatbot-message-feedback-success',
+        chatbotMessageFeedbackFailed: 'titan-chatbot-message-feedback-failed',
+        chatbotMessageFeedbackThumbsUp: 'titan-chatbot-message-feedback-thumbs-up',
+        chatbotMessageFeedbackProvideAnswer: 'titan-chatbot-message-feedback-provide-answer',
+        chatbotMessageFeedbackThumbsDown: 'titan-chatbot-message-feedback-thumbs-down',
+        chatbotMessageFeedbackSubmit: 'titan-chatbot-message-feedback-submit',
+        chatbotSessionFeedbackLink: 'titan-chatbot-session-feedback-link',
+        chatbotSessionFeedbackCancel: 'titan-chatbot-session-feedback-cancel',
+        chatbotSessionFeedbackSubmit: 'titan-chatbot-session-feedback-submit',
+        chatbotSessionFeedbackModal: 'titan-chatbot-session-feedback-modal',
+        chatbotSessionFeedbackThumbsUp: 'titan-chatbot-session-feedback-thumbs-up',
+        chatbotSessionFeedbackThumbsDown: 'titan-chatbot-session-feedback-thumbs-down',
+        chatbotSessionFeedbackComment: 'titan-chatbot-session-feedback-comment',
+        chatbotFilters: 'titan-chatbot-filters',
+        chatbotFilterSearch: 'titan-chatbot-filter-search',
+        chatbotFilterAll: 'titan-chatbot-filter-all',
+        chatbotFilterNone: 'titan-chatbot-filter-none',
+        chatbotFilterButton: 'titan-chatbot-filter-button',
+        chatbotFilterOptions: 'titan-chatbot-filter-options',
+        chatbotLinksMore: 'titan-chatbot-links-more',
+        chatbotLinksCollapsible: 'titan-chatbot-links-collapsible',
+        chatbotLinksLink: 'titan-chatbot-links-link',
+        chatbotMessageAnswer: 'titan-chatbot-message-answer',
+    };
+
+    static cy2 = {
+        chatMessage: 'titan-chat-message',
+        chatMessageContentAgent: 'titan-chat-message-content-agent',
+        chatMessageContentUser: 'titan-chat-message-content-user',
+        chatAvatarEmpty: 'titan-chat-avatar-empty',
+        chatAvatarBot: 'titan-chat-avatar-bot',
+        chatAvatarInitials: 'titan-chat-avatar-initials',
+    };
+}

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "extends": "@servicetitan/startup/tsconfig/base",
+    "compilerOptions": {
+        "composite": true,
+        "outDir": "dist",
+        "rootDir": "src",
+        "jsx": "react-jsx",
+        "moduleResolution": "bundler"
+    },
+    "include": [
+        "src/**/*"
+    ],
+    "exclude": [
+        "node_modules"
+    ],
+    "references": [
+        {
+            "path": "../titan-chat-ui-common"
+        },
+        {
+            "path": "../titan-chatbot-api"
+        }
+    ]
+}