@servicetitan/titan-chat-ui 3.0.1 → 3.1.1

package/dist/components/messages/__tests-cy__/message-system.test.js

@@ -1,19 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { BodyText, Stack } from '@servicetitan/design-system';
-import { ChatUiSelectors } from '@servicetitan/titan-chatbot-ui-cypress';
-import { mount } from 'cypress/react';
+import { runMessageSystemSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
 import { MessageSystem } from '../message-system';
-describe('[MessageSystem]', () => {
-    beforeEach(() => {
-        cy.viewport('macbook-13');
-    });
-    it('should be properly rendered', () => {
-        mount(_jsx(MessageSystem, { className: "custom-class", children: _jsx(Stack, { className: "border", children: _jsx(BodyText, { "data-cy": "content", children: "message system content" }) }) }));
-        ChatUiSelectors.chatMessageSystem.should('have.class', 'custom-class').should('be.visible');
-    });
-    it('should be properly rendered fullwidth', () => {
-        mount(_jsx(MessageSystem, { className: "custom-class", fullWidth: true, children: _jsx(Stack, { className: "border", children: _jsx(BodyText, { "data-cy": "content", children: "message system content" }) }) }));
-        ChatUiSelectors.chatMessageSystem.should('have.class', 'custom-class').should('be.visible');
+describe('MessageSystem', () => {
+    runMessageSystemSharedTests(MessageSystem, {
+        TextComponent: BodyText,
+        ContainerComponent: Stack,
     });
 });
 //# sourceMappingURL=message-system.test.js.map

package/dist/components/messages/__tests-cy__/message-system.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-system.test.js","sourceRoot":"","sources":["../../../../src/components/messages/__tests-cy__/message-system.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC7B,UAAU,CAAC,GAAG,EAAE;QACZ,EAAE,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,GAAG,EAAE;QACnC,KAAK,CACD,KAAC,aAAa,IAAC,SAAS,EAAC,cAAc,YACnC,KAAC,KAAK,IAAC,SAAS,EAAC,QAAQ,YACrB,KAAC,QAAQ,eAAS,SAAS,uCAAkC,GACzD,GACI,CACnB,CAAC;QACF,eAAe,CAAC,iBAAiB,CAAC,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IAChG,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uCAAuC,EAAE,GAAG,EAAE;QAC7C,KAAK,CACD,KAAC,aAAa,IAAC,SAAS,EAAC,cAAc,EAAC,SAAS,kBAC7C,KAAC,KAAK,IAAC,SAAS,EAAC,QAAQ,YACrB,KAAC,QAAQ,eAAS,SAAS,uCAAkC,GACzD,GACI,CACnB,CAAC;QACF,eAAe,CAAC,iBAAiB,CAAC,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IAChG,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC"}
+{"version":3,"file":"message-system.test.js","sourceRoot":"","sources":["../../../../src/components/messages/__tests-cy__/message-system.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,2BAA2B,EAAE,MAAM,wCAAwC,CAAC;AACrF,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC3B,2BAA2B,CAAC,aAAa,EAAE;QACvC,aAAa,EAAE,QAAQ;QACvB,kBAAkB,EAAE,KAAK;KAC5B,CAAC,CAAC;AACP,CAAC,CAAC,CAAC"}

package/dist/components/messages/__tests-cy__/message-timeout.test.js

@@ -1,25 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ChatUiSelectors } from '@servicetitan/titan-chatbot-ui-cypress';
-import { mount } from 'cypress/react';
+import { runMessageTimeoutSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
 import { MessageTimeout } from '../message-timeout';
 describe('MessageTimeout', () => {
-    it('should render message', () => {
-        const onResume = cy.spy().as('onResume');
-        const onReset = cy.spy().as('onReset');
-        mount(_jsx(MessageTimeout, { onResume: onResume, onReset: onReset }));
-        ChatUiSelectors.chatMessageTimeout
-            .should('be.visible')
-            .should('contain.text', [
-            'Your session has timed out.',
-            'Would you like to resume it or start a new one?',
-            'Continue session or Start new session',
-        ].join(''));
-        ChatUiSelectors.chatMessageTimeoutResume.should('be.visible');
-        ChatUiSelectors.chatMessageTimeoutReset.should('be.visible');
-        ChatUiSelectors.chatMessageTimeoutResume.click();
-        cy.get('@onResume').should('have.been.calledOnce');
-        ChatUiSelectors.chatMessageTimeoutReset.click();
-        cy.get('@onReset').should('have.been.calledOnce');
-    });
+    runMessageTimeoutSharedTests(MessageTimeout);
 });
 //# sourceMappingURL=message-timeout.test.js.map

package/dist/components/messages/__tests-cy__/message-timeout.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-timeout.test.js","sourceRoot":"","sources":["../../../../src/components/messages/__tests-cy__/message-timeout.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE;QAC7B,MAAM,QAAQ,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;QACzC,MAAM,OAAO,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;QACvC,KAAK,CAAC,KAAC,cAAc,IAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC,CAAC;QAEhE,eAAe,CAAC,kBAAkB;aAC7B,MAAM,CAAC,YAAY,CAAC;aACpB,MAAM,CACH,cAAc,EACd;YACI,6BAA6B;YAC7B,iDAAiD;YACjD,uCAAuC;SAC1C,CAAC,IAAI,CAAC,EAAE,CAAC,CACb,CAAC;QACN,eAAe,CAAC,wBAAwB,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;QAC9D,eAAe,CAAC,uBAAuB,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;QAE7D,eAAe,CAAC,wBAAwB,CAAC,KAAK,EAAE,CAAC;QACjD,EAAE,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC;QACnD,eAAe,CAAC,uBAAuB,CAAC,KAAK,EAAE,CAAC;QAChD,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC"}
+{"version":3,"file":"message-timeout.test.js","sourceRoot":"","sources":["../../../../src/components/messages/__tests-cy__/message-timeout.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,wCAAwC,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC5B,4BAA4B,CAAC,cAAc,CAAC,CAAC;AACjD,CAAC,CAAC,CAAC"}

package/dist/components/messages/__tests-cy__/message-typing.test.js

@@ -1,48 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ChatParticipantIcon } from '@servicetitan/titan-chat-ui-common';
-import { ChatUiSelectors } from '@servicetitan/titan-chatbot-ui-cypress';
-import { mount } from 'cypress/react';
+import { runMessageTypingSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
 import { MessageTyping } from '../message-typing';
-describe('ChatMessageTyping', () => {
-    function render(icon) {
-        mount(_jsx(MessageTyping, { avatar: {
-                name: 'Test User Name',
-                icon,
-                className: 'custom-class',
-            } }));
-        ChatUiSelectors.chatMessageTyping.should('be.visible').children().should('have.length', 2);
-        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
-    }
-    it('should render message with bot icon', () => {
-        render(ChatParticipantIcon.Bot);
-        ChatUiSelectors.chatAvatarBot
-            .should('be.visible')
-            .should('have.class', 'custom-class')
-            .invoke('css', 'background-image')
-            .then(bgColor => {
-            const isSvg = Boolean(bgColor.indexOf('data:image/svg+xml;base64') >= 0);
-            expect(isSvg).to.eq(true);
-        });
-    });
-    it('should render message with empty icon', () => {
-        render(ChatParticipantIcon.Empty);
-        ChatUiSelectors.chatAvatarEmpty.should('exist').should('not.be.visible');
-    });
-    it('should render message with initials', () => {
-        render(ChatParticipantIcon.Initials);
-        ChatUiSelectors.chatAvatarInitials.should('be.visible').should('contain.text', 'T');
-    });
-    it('should not cancel the dots animation', () => {
-        cy.clock();
-        render(ChatParticipantIcon.Initials);
-        // Verify the rendered component + check the dots animation doesn't change over the time
-        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
-        cy.tick(10000);
-        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
-        cy.tick(20000);
-        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
-        cy.tick(30000);
-        ChatUiSelectors.chatMessageTypingDots.should('be.visible');
-    });
+describe('MessageTyping', () => {
+    runMessageTypingSharedTests(MessageTyping);
 });
 //# sourceMappingURL=message-typing.test.js.map

package/dist/components/messages/__tests-cy__/message-typing.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-typing.test.js","sourceRoot":"","sources":["../../../../src/components/messages/__tests-cy__/message-typing.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IAC/B,SAAS,MAAM,CAAC,IAAyB;QACrC,KAAK,CACD,KAAC,aAAa,IACV,MAAM,EAAE;gBACJ,IAAI,EAAE,gBAAgB;gBACtB,IAAI;gBACJ,SAAS,EAAE,cAAc;aAC5B,GACH,CACL,CAAC;QACF,eAAe,CAAC,iBAAiB,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;QAC3F,eAAe,CAAC,qBAAqB,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IAC/D,CAAC;IAED,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;QAC3C,MAAM,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;QAChC,eAAe,CAAC,aAAa;aACxB,MAAM,CAAC,YAAY,CAAC;aACpB,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC;aACpC,MAAM,CAAC,KAAK,EAAE,kBAAkB,CAAC;aACjC,IAAI,CAAC,OAAO,CAAC,EAAE;YACZ,MAAM,KAAK,GAAG,OAAO,CAChB,OAAyB,CAAC,OAAO,CAAC,2BAA2B,CAAC,IAAI,CAAC,CACvE,CAAC;YACF,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;QAC9B,CAAC,CAAC,CAAC;IACX,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uCAAuC,EAAE,GAAG,EAAE;QAC7C,MAAM,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;QAClC,eAAe,CAAC,eAAe,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;IAC7E,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;QAC3C,MAAM,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QACrC,eAAe,CAAC,kBAAkB,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,cAAc,EAAE,GAAG,CAAC,CAAC;IACxF,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAC5C,EAAE,CAAC,KAAK,EAAE,CAAC;QACX,MAAM,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QACrC,wFAAwF;QACxF,eAAe,CAAC,qBAAqB,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;QAC3D,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACf,eAAe,CAAC,qBAAqB,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;QAC3D,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACf,eAAe,CAAC,qBAAqB,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;QAC3D,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACf,eAAe,CAAC,qBAAqB,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC"}
+{"version":3,"file":"message-typing.test.js","sourceRoot":"","sources":["../../../../src/components/messages/__tests-cy__/message-typing.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,wCAAwC,CAAC;AACrF,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC3B,2BAA2B,CAAC,aAAa,CAAC,CAAC;AAC/C,CAAC,CAAC,CAAC"}

package/dist/components/messages/__tests-cy__/message-user.test.js

@@ -1,27 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { BodyText } from '@servicetitan/design-system';
-import { ChatUiSelectors } from '@servicetitan/titan-chatbot-ui-cypress';
-import { mount } from 'cypress/react';
+import { runMessageUserSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
 import { MessageUser } from '../message-user';
-describe('[MessageUser]', () => {
-    beforeEach(() => {
-        cy.viewport('macbook-13');
-    });
-    it('should be properly rendered', () => {
-        mount(_jsx(MessageUser, { children: _jsx(BodyText, { "data-cy": "content", children: "message user content" }) }));
-        ChatUiSelectors.chatMessageUser.should('be.visible');
-        ChatUiSelectors.chatMessageContent
-            .should('be.visible')
-            .should('contain.text', 'message user content');
-    });
-    it('should be properly rendered with long text', () => {
-        const longText = 'message user content '.repeat(100).trim();
-        mount(_jsx(MessageUser, { children: _jsx(BodyText, { "data-cy": "content", children: longText }) }));
-        ChatUiSelectors.chatMessageContent.should('be.visible').should('contain.text', longText);
-    });
-    it('should be rendered with footer', () => {
-        mount(_jsx(MessageUser, { messageFooter: _jsx(BodyText, { children: "message user footer" }), children: _jsx(BodyText, { "data-cy": "content", children: "message user content" }) }));
-        ChatUiSelectors.chatMessageFooter.should('be.visible');
-    });
+describe('MessageUser', () => {
+    runMessageUserSharedTests(MessageUser, BodyText);
 });
 //# sourceMappingURL=message-user.test.js.map

package/dist/components/messages/__tests-cy__/message-user.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-user.test.js","sourceRoot":"","sources":["../../../../src/components/messages/__tests-cy__/message-user.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC3B,UAAU,CAAC,GAAG,EAAE;QACZ,EAAE,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,GAAG,EAAE;QACnC,KAAK,CACD,KAAC,WAAW,cACR,KAAC,QAAQ,eAAS,SAAS,qCAAgC,GACjD,CACjB,CAAC;QACF,eAAe,CAAC,eAAe,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;QACrD,eAAe,CAAC,kBAAkB;aAC7B,MAAM,CAAC,YAAY,CAAC;aACpB,MAAM,CAAC,cAAc,EAAE,sBAAsB,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4CAA4C,EAAE,GAAG,EAAE;QAClD,MAAM,QAAQ,GAAG,uBAAuB,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;QAC5D,KAAK,CACD,KAAC,WAAW,cACR,KAAC,QAAQ,eAAS,SAAS,YAAE,QAAQ,GAAY,GACvC,CACjB,CAAC;QACF,eAAe,CAAC,kBAAkB,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;IAC7F,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,GAAG,EAAE;QACtC,KAAK,CACD,KAAC,WAAW,IAAC,aAAa,EAAE,KAAC,QAAQ,sCAA+B,YAChE,KAAC,QAAQ,eAAS,SAAS,qCAAgC,GACjD,CACjB,CAAC;QACF,eAAe,CAAC,iBAAiB,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC"}
+{"version":3,"file":"message-user.test.js","sourceRoot":"","sources":["../../../../src/components/messages/__tests-cy__/message-user.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,yBAAyB,EAAE,MAAM,wCAAwC,CAAC;AACnF,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IACzB,yBAAyB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AACrD,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/titan-chat-ui",
-    "version": "3.0.1",
+    "version": "3.1.1",
     "description": "Chat experience UI package",
     "repository": {
         "type": "git",
@@ -17,7 +17,7 @@
         "push:local": "yalc push"
     },
     "dependencies": {
-        "@servicetitan/titan-chat-ui-common": "^3.0.1",
+        "@servicetitan/titan-chat-ui-common": "^3.1.1",
         "lodash": "4.17.21",
         "nanoid": "^5.1.5"
     },
@@ -40,7 +40,7 @@
         "react-dom": "^18"
     },
     "devDependencies": {
-        "@servicetitan/titan-chatbot-ui-cypress": "^3.0.1",
+        "@servicetitan/titan-chatbot-ui-cypress": "^3.1.1",
         "cypress": "^14.3.2"
     },
     "keywords": [
@@ -53,5 +53,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "4aea1ee0fe4bce5c3f6c09db1d49067eb75ac83a"
+    "gitHead": "83c89de5b42d24ce5d7fcd034810bf596a673a08"
 }

package/src/components/chat/__tests-cy__/chat-error.test.tsx

@@ -0,0 +1,6 @@
+import { runChatErrorSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
+import { ChatError } from '../chat-error';
+
+describe('ChatError', () => {
+    runChatErrorSharedTests(ChatError);
+});

package/src/components/chat/__tests-cy__/chat-input-file.test.tsx

@@ -0,0 +1,6 @@
+import { runChatInputFileSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
+import { ChatInputFile } from '../chat-input-file';
+
+describe('ChatInputFile', () => {
+    runChatInputFileSharedTests(ChatInputFile);
+});

package/src/components/chat/__tests-cy__/chat-input.test.tsx

@@ -0,0 +1,6 @@
+import { runChatInputSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
+import { ChatInput } from '../chat-input';
+
+describe('ChatInput', () => {
+    runChatInputSharedTests(ChatInput);
+});

package/src/components/chat/__tests-cy__/chat-log.test.tsx

@@ -0,0 +1,6 @@
+import { runChatLogSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
+import { ChatLog } from '../chat-log';
+
+describe('[ChatLog]', () => {
+    runChatLogSharedTests(ChatLog);
+});

package/src/components/chat/__tests-cy__/chat-messages.test.tsx

@@ -1,111 +1,6 @@
-import { Provider } from '@servicetitan/react-ioc';
-import { CHAT_UI_STORE_TOKEN, mockChatMessageModelText } from '@servicetitan/titan-chat-ui-common';
-import { ChatUiSelectors, CypressMocks } from '@servicetitan/titan-chatbot-ui-cypress';
-import { mount } from 'cypress/react';
+import { runChatMessagesSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
 import { ChatMessages } from '../chat-messages';
 
 describe('[ChatMessages]', () => {
-    let storeMock: CypressMocks.ChatUiStoreMock;
-
-    beforeEach(() => {
-        cy.viewport(780, 600);
-        cy.clock(new Date('2023-10-01T10:10:00Z').getTime());
-        storeMock = new CypressMocks.ChatUiStoreMock();
-    });
-
-    const render = () => {
-        return mount(
-            <Provider
-                singletons={[
-                    {
-                        provide: CHAT_UI_STORE_TOKEN,
-                        useValue: storeMock,
-                    },
-                ]}
-            >
-                <ChatMessages messages={storeMock.messages} />
-            </Provider>
-        );
-    };
-
-    it('should render default chat', () => {
-        render();
-
-        ChatUiSelectors.chatMessages.should('be.visible');
-        ChatUiSelectors.chatMessage.should('have.length', 2);
-    });
-
-    it('should render several consecutive agent messages without extra avatars', () => {
-        storeMock.messages = [
-            mockChatMessageModelText(true, {
-                id: 'id1',
-                timestamp: new Date('2023-01-01T10:10:00Z'),
-                message: 'Hello, this is the first message',
-            }),
-            mockChatMessageModelText(true, {
-                id: 'id2',
-                message: 'Hello, this is the second message. '.repeat(5).trim(),
-                timestamp: new Date('2023-01-01T10:10:59.999Z'),
-            }),
-            mockChatMessageModelText(true, {
-                id: 'id3',
-                message: 'Hello, this is the third message',
-                timestamp: new Date('2023-01-01T10:11:00Z'),
-            }),
-            mockChatMessageModelText(true, {
-                id: 'id4',
-                message: 'Hello, this is the forth message',
-                timestamp: new Date('2023-01-01T10:11:01Z'),
-            }),
-            mockChatMessageModelText(false, {
-                id: 'id11',
-                timestamp: new Date('2023-01-01T11:10:00Z'),
-                message: 'Hello, this is the first message',
-            }),
-            mockChatMessageModelText(false, {
-                id: 'id22',
-                message: 'Hello, this is the second message',
-                timestamp: new Date('2023-01-01T11:11:00Z'),
-            }),
-            mockChatMessageModelText(false, {
-                id: 'id33',
-                message: 'Hello, this is the third message',
-                timestamp: new Date('2023-01-01T11:12:00Z'),
-            }),
-            mockChatMessageModelText(false, {
-                id: 'id44',
-                message: 'Hello, this is the forth message',
-                timestamp: new Date('2023-01-01T11:12:01Z'),
-            }),
-        ];
-        render();
-
-        const getTimestamp = (i: number) =>
-            ChatUiSelectors.chatMessage
-                .eq(i)
-                .find(`[data-cy="${ChatUiSelectors.cy.chatMessageFooter}"]`);
-
-        ChatUiSelectors.chatMessageAgent.should('have.length', 4);
-        ChatUiSelectors.chatMessageUser.should('have.length', 4);
-
-        // Agent avatar should be visible only for the first message in group
-        const getAvatar = (i: number) =>
-            ChatUiSelectors.chatMessageAgent
-                .find(`[data-cy="${ChatUiSelectors.cy.chatAvatar}"]`)
-                .eq(i);
-        getAvatar(0).should('be.visible');
-        getAvatar(1).should('not.exist');
-        getAvatar(2).should('not.exist');
-        getAvatar(3).should('not.exist');
-
-        // Footer with date should be visible only for the different formatted timestamps
-        getTimestamp(0).should('not.exist');
-        getTimestamp(1).should('be.visible').should('contain.text', 'agent • 10:10 AM');
-        getTimestamp(2).should('not.exist');
-        getTimestamp(3).should('be.visible').should('contain.text', 'agent • 10:11 AM');
-        getTimestamp(4).should('be.visible').should('contain.text', '11:10 AM');
-        getTimestamp(5).should('be.visible').should('contain.text', '11:11 AM');
-        getTimestamp(6).should('not.exist');
-        getTimestamp(7).should('be.visible').should('contain.text', '11:12 AM');
-    });
+    runChatMessagesSharedTests(ChatMessages);
 });

package/src/components/chat/__tests-cy__/chat-notifications.test.tsx

@@ -0,0 +1,6 @@
+import { runChatNotificationsTests } from '@servicetitan/titan-chatbot-ui-cypress';
+import { ChatNotifications } from '../chat-notifications';
+
+describe('ChatNotifications', () => {
+    runChatNotificationsTests(ChatNotifications);
+});

package/src/components/chat/__tests-cy__/chat-timer.test.tsx

@@ -0,0 +1,6 @@
+import { runChatTimerTests } from '@servicetitan/titan-chatbot-ui-cypress';
+import { ChatTimer } from '../chat-timer';
+
+describe('ChatTimer', () => {
+    runChatTimerTests(ChatTimer);
+});

package/src/components/chat/__tests-cy__/chat.test.tsx

@@ -1,159 +1,6 @@
-import { Container, provide, useDependencies } from '@servicetitan/react-ioc';
-import {
-    CHAT_UI_BACKEND_STORE_TOKEN,
-    CHAT_UI_STORE_TOKEN,
-    ChatParticipantIcon,
-    ChatUiBackendEchoStore,
-    ChatUiStore,
-    IChatUiBackendStore,
-    IChatUiStore,
-} from '@servicetitan/titan-chat-ui-common';
-import { ChatUiSelectors } from '@servicetitan/titan-chatbot-ui-cypress';
-import { mount } from 'cypress/react';
-import { useEffect } from 'react';
+import { runChatSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
 import { Chat } from '../chat';
 
-const initContainer = () => {
-    const rootContainer = new Container();
-    const container = new Container();
-    container.parent = rootContainer;
-    container.bind<IChatUiStore>(CHAT_UI_STORE_TOKEN).to(ChatUiStore).inSingletonScope();
-    container
-        .bind<IChatUiBackendStore>(CHAT_UI_BACKEND_STORE_TOKEN)
-        .to(ChatUiBackendEchoStore)
-        .inSingletonScope();
-    return container;
-};
-
-describe('[Chat]', () => {
-    let container: Container;
-    let chatUiStore: IChatUiStore;
-    let chatUiBackendStore: ChatUiBackendEchoStore;
-
-    beforeEach(() => {
-        container = initContainer();
-        chatUiStore = container.get<IChatUiStore>(CHAT_UI_STORE_TOKEN);
-        chatUiBackendStore = container.get<ChatUiBackendEchoStore>(CHAT_UI_BACKEND_STORE_TOKEN);
-        cy.viewport(780, 800);
-        cy.clock(Date.parse('2023-10-01T00:00:00Z'));
-    });
-
-    const render = () => {
-        const ChatWrapper = provide({
-            singletons: [
-                {
-                    provide: CHAT_UI_STORE_TOKEN,
-                    useValue: chatUiStore,
-                },
-                {
-                    provide: CHAT_UI_BACKEND_STORE_TOKEN,
-                    useValue: chatUiBackendStore,
-                },
-            ],
-        })(() => {
-            const [chatUiStore, chatUiBackendStore] = useDependencies(
-                CHAT_UI_STORE_TOKEN,
-                CHAT_UI_BACKEND_STORE_TOKEN
-            );
-            useEffect(() => {
-                const init = async () => {
-                    chatUiBackendStore.subscribe();
-                    await chatUiStore.run({
-                        agentName: 'EchoBot',
-                        agentIcon: ChatParticipantIcon.Bot,
-                    });
-                };
-                init().then(() => {});
-                return () => chatUiBackendStore.unsubscribe();
-            }, [chatUiStore, chatUiBackendStore]);
-            return <Chat className="h-100vh max-h-100vh" />;
-        });
-
-        cy.spy(chatUiStore, 'run').as('runSpy');
-        mount(<ChatWrapper />);
-
-        ChatUiSelectors.chatConnecting.should('be.visible');
-        cy.tick(1000);
-        return cy.wrap(
-            new Promise(resolve => {
-                cy.get('@runSpy')
-                    .should('have.been.calledOnce')
-                    .then((invocation: any) => {
-                        const initPromise = invocation.firstCall.returnValue as ReturnType<
-                            IChatUiStore['run']
-                        >;
-                        initPromise.then(resolve);
-                    });
-            })
-        );
-    };
-
-    const ask = (message: string) => {
-        ChatUiSelectors.chatInput.type(`${message}{enter}`);
-    };
-
-    it('should render default chat', () => {
-        render().then(() => {
-            ChatUiSelectors.chatMessages.should('be.visible');
-            ChatUiSelectors.chatMessageAgent.should('have.length', 1).should('be.visible');
-            ChatUiSelectors.chatMessageContentAgent
-                .should('be.visible')
-                .should(
-                    'contain.text',
-                    "Hello! I'm generic echo bot. I can echo your messages. Try it out!"
-                );
-            ChatUiSelectors.chatNotifications.should('exist');
-            ChatUiSelectors.chatSend.should('be.visible').should('be.disabled');
-            ChatUiSelectors.chatInput.should('be.visible').should('not.be.disabled');
-
-            ChatUiSelectors.chatInput.type('Hello');
-            ChatUiSelectors.chatSend.click();
-
-            ChatUiSelectors.chatMessageUser
-                .should('be.visible')
-                .should('have.length', 1)
-                .should('contain.text', 'Hello');
-            ChatUiSelectors.chatMessageTyping.should('be.visible');
-            ChatUiSelectors.chatMessageAgent.should('have.length', 1);
-
-            cy.tick(1000);
-
-            ChatUiSelectors.chatMessageTyping.should('not.exist');
-            ChatUiSelectors.chatMessageAgent.should('have.length', 2);
-        });
-    });
-
-    it('should render chat error message', () => {
-        render().then(() => {
-            chatUiStore.setTimer({ secondsTotal: 100, secondsLeft: 10 });
-            chatUiStore.setError('error message', {
-                title: 'Custom Error',
-                recoverStrategy: {
-                    recoverButtonTitle: 'Recover button title',
-                },
-            });
-
-            ChatUiSelectors.chatTimer.should('not.exist');
-            ChatUiSelectors.chatError.should('be.visible');
-        });
-    });
-
-    it('should handle send message error and retry', () => {
-        render().then(() => {
-            ask('[Error]Custom error message');
-            cy.tick(1000);
-
-            // Check error message
-            ChatUiSelectors.chatMessageError
-                .should('be.visible')
-                .should('contain.text', 'Message not delivered. Retry');
-            ChatUiSelectors.chatError
-                .should('be.visible')
-                .should('contain.text', ['Custom Error Title', 'Custom error message'].join(''));
-
-            // Retry message
-            ChatUiSelectors.chatMessageErrorRetry.should('be.visible').click();
-            cy.tick(1000);
-        });
-    });
+describe('Chat', () => {
+    runChatSharedTests(Chat);
 });

package/src/components/chat/chat-error.tsx

@@ -4,9 +4,8 @@ import { CHAT_UI_STORE_TOKEN } from '@servicetitan/titan-chat-ui-common';
 import { observer } from 'mobx-react';
 import { FC, useCallback } from 'react';
 import { MultilineText } from '../common/multiline-text';
-import * as Styles from './chat-error.module.less';
 
-export const ChatError: FC = observer(() => {
+export const ChatError: FC<{ className?: string }> = observer(({ className }) => {
     const [chatUiStore] = useDependencies(CHAT_UI_STORE_TOKEN);
     const { error } = chatUiStore;
 
@@ -22,7 +21,7 @@ export const ChatError: FC = observer(() => {
             status="critical"
             title={error.title}
             icon
-            className={Styles.banner}
+            className={className}
             data-cy="titan-chat-error"
         >
             <MultilineText text={error.message} data-cy="titan-chat-error-text" />

package/src/components/chat/chat-input.tsx

@@ -3,7 +3,7 @@ import { provide, useDependencies } from '@servicetitan/react-ioc';
 import { CHAT_UI_STORE_TOKEN } from '@servicetitan/titan-chat-ui-common';
 import classNames from 'classnames';
 import { observer } from 'mobx-react';
-import { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { FC, FormEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { ChatInputStore } from '../../stores/chat-input.store';
 import * as Styles from './chat-input.module.less';
 
@@ -21,26 +21,30 @@ export const ChatInput: FC<{ className?: string }> = provide({
             ChatInputStore
         );
 
-        const handleSendMessage = useCallback(async () => {
-            const validateResult = await supportChatInputStore.formState.validate();
-            if (validateResult.hasError) {
-                return;
-            }
-            const text = supportChatInputStore.formState.$.message.value;
-            if (!text.trim() && !chatUiStore.file) {
-                return;
-            }
-            supportChatInputStore.formState.$.message.onChange('');
-            setIsSending(true);
-            try {
-                await chatUiStore.sendMessageText(text);
-            } finally {
-                setIsSending(false);
-            }
-            setTimeout(() => {
-                textareaRef.current?.focus();
-            }, 0);
-        }, [chatUiStore, supportChatInputStore]);
+        const handleSendMessage = useCallback(
+            async (event?: FormEvent) => {
+                event?.preventDefault();
+                const validateResult = await supportChatInputStore.formState.validate();
+                if (validateResult.hasError) {
+                    return;
+                }
+                const text = supportChatInputStore.formState.$.message.value;
+                if (!text.trim() && !chatUiStore.file) {
+                    return;
+                }
+                supportChatInputStore.formState.$.message.onChange('');
+                setIsSending(true);
+                try {
+                    await chatUiStore.sendMessageText(text);
+                } finally {
+                    setIsSending(false);
+                }
+                setTimeout(() => {
+                    textareaRef.current?.focus();
+                }, 0);
+            },
+            [chatUiStore, supportChatInputStore]
+        );
 
         const clearTimer = useCallback(() => {
             clearTimeout(typingTimeoutRef.current ?? 0);

package/src/components/chat/chat-notifications.tsx

@@ -13,7 +13,7 @@ export const ChatNotifications: FC<IChatNotificationsProps> = observer(() => {
     return (
         <Stack direction="column" spacing="2" data-cy="titan-chat-notifications">
             {chatUiStore.timer && !chatUiStore.isError && <ChatTimer />}
-            {chatUiStore.isError && <ChatError />}
+            {chatUiStore.isError && <ChatError className="m-x-3" />}
         </Stack>
     );
 });

package/src/components/message-content/__tests-cy__/message-content-file.test.tsx

@@ -0,0 +1,6 @@
+import { runMessageContentFileSharedTests } from '@servicetitan/titan-chatbot-ui-cypress';
+import { MessageContentFile } from '../message-content-file';
+
+describe('MessageContentFile', () => {
+    runMessageContentFileSharedTests(MessageContentFile);
+});