@servicetitan/titan-chat-ui 2.0.0 → 2.0.2

package/src/components/messages/__tests-cy__/message-user.test.tsx

@@ -1,5 +1,6 @@
 // eslint-disable-next-line spaced-comment
 /// <reference types="../../../cypress" />
+import { ChatUiSelectors } from '@local/utils';
 import { BodyText } from '@servicetitan/design-system';
 import { mount } from 'cypress/react';
 import { MessageUser } from '../message-user';
@@ -15,9 +16,8 @@ describe('[MessageUser]', () => {
                 <BodyText data-cy="content">message user content</BodyText>
             </MessageUser>
         );
-        cy.getCy('chat-message-user').should('be.visible');
-        cy.getCy2('chat-message-normal').should('be.visible');
-        cy.getCy('chat-message-user-content')
+        ChatUiSelectors.chatMessageUser.should('be.visible');
+        ChatUiSelectors.chatMessageContent
             .should('be.visible')
             .should('contain.text', 'message user content');
     });
@@ -29,7 +29,7 @@ describe('[MessageUser]', () => {
                 <BodyText data-cy="content">{longText}</BodyText>
             </MessageUser>
         );
-        cy.getCy('chat-message-user-content').should('be.visible').should('contain.text', longText);
+        ChatUiSelectors.chatMessageContent.should('be.visible').should('contain.text', longText);
     });
 
     it('should be rendered with footer', () => {
@@ -38,15 +38,6 @@ describe('[MessageUser]', () => {
                 <BodyText data-cy="content">message user content</BodyText>
             </MessageUser>
         );
-        cy.getCy('chat-message-user-footer').should('be.visible');
-    });
-
-    it('should be rendered with error', () => {
-        mount(
-            <MessageUser isError>
-                <BodyText data-cy="content">message user content</BodyText>
-            </MessageUser>
-        );
-        cy.getCy2('chat-message-error').should('be.visible');
+        ChatUiSelectors.chatMessageFooter.should('be.visible');
     });
 });

package/src/components/messages/message-agent.tsx

@@ -1,22 +1,24 @@
 import { Stack } from '@servicetitan/design-system';
 import classNames from 'classnames';
 import { FC, PropsWithChildren, ReactNode } from 'react';
-import { IDataCyProps } from '../../models/component';
 import * as Styles from './message-agent.module.less';
 import { IMessageAvatarProps, MessageAvatar } from './message-avatar';
 
-export interface IMessageAgentProps extends IDataCyProps {
+export interface IMessageAgentProps {
     avatar?: IMessageAvatarProps;
     messageFooter?: ReactNode;
     isError?: boolean;
     fullWidth?: boolean;
     subtle?: boolean;
     omitAvatar?: boolean;
+    className?: string;
+    ['data-cy2']?: string;
 }
 
 export const MessageAgent: FC<PropsWithChildren<IMessageAgentProps>> = ({
     avatar,
     children,
+    className,
     fullWidth,
     isError,
     messageFooter,
@@ -24,14 +26,17 @@ export const MessageAgent: FC<PropsWithChildren<IMessageAgentProps>> = ({
     subtle,
     ...rest
 }) => {
-    const dataCy = rest['data-cy'] ?? 'chat-message-agent';
-    const dataCy2 = isError ? 'chat-message-error' : 'chat-message-normal';
+    const dataCy2 = rest['data-cy2'] ?? 'titan-chat-message-agent';
     return (
         <div
-            className={classNames(Styles.messageRoot, {
-                [Styles.fullWidth]: Boolean(fullWidth),
-            })}
-            data-cy={dataCy}
+            className={classNames(
+                Styles.messageRoot,
+                {
+                    [Styles.fullWidth]: Boolean(fullWidth),
+                },
+                className
+            )}
+            data-cy="titan-chat-message"
             data-cy2={dataCy2}
         >
             <div className={Styles.messageAvatar}>
@@ -41,7 +46,8 @@ export const MessageAgent: FC<PropsWithChildren<IMessageAgentProps>> = ({
                 direction="column"
                 spacing="1"
                 className={classNames(Styles.messageContent)}
-                data-cy={`${dataCy}-center`}
+                data-cy="titan-chat-message-content"
+                data-cy2="titan-chat-message-content-agent"
             >
                 {subtle ? (
                     children
@@ -50,12 +56,13 @@ export const MessageAgent: FC<PropsWithChildren<IMessageAgentProps>> = ({
                         className={classNames(Styles.messageBubble, {
                             [Styles.error]: Boolean(isError),
                         })}
-                        data-cy={`${dataCy}-content`}
                     >
                         {children}
                     </div>
                 )}
-                {Boolean(messageFooter) && <div data-cy={`${dataCy}-footer`}>{messageFooter}</div>}
+                {Boolean(messageFooter) && (
+                    <div data-cy="titan-chat-message-footer">{messageFooter}</div>
+                )}
             </Stack>
         </div>
     );

package/src/components/messages/message-avatar.tsx

@@ -1,6 +1,8 @@
+import { BodyText } from '@servicetitan/design-system';
 import classNames from 'classnames';
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
 import { ChatParticipantIcon } from '../../models/support-chat';
+import { getNameInitials } from '../../utils/text-utils';
 import * as Styles from './message-avatar.module.less';
 
 export interface IMessageAvatarProps {
@@ -13,6 +15,7 @@ export const MessageAvatar: FC<IMessageAvatarProps> = ({ className, icon, name }
     const isEmpty = icon === ChatParticipantIcon.Empty;
     const isInitials = icon === ChatParticipantIcon.Initials;
     const isBot = icon === ChatParticipantIcon.Bot;
+    const nameInitials = useMemo(() => getNameInitials(name), [name]);
 
     return (
         <div
@@ -25,9 +28,10 @@ export const MessageAvatar: FC<IMessageAvatarProps> = ({ className, icon, name }
                 },
                 className
             )}
-            data-cy={`chat-avatar-${icon}`}
+            data-cy="titan-chat-avatar"
+            data-cy2={`titan-chat-avatar-${icon}`}
         >
-            {isInitials ? name : null}
+            <BodyText el="span">{isInitials ? nameInitials : null}</BodyText>
         </div>
     );
 };

package/src/components/messages/message-system.tsx

@@ -1,12 +1,12 @@
 import { Stack } from '@servicetitan/design-system';
 import classNames from 'classnames';
 import { FC, PropsWithChildren } from 'react';
-import { IDataCyProps } from '../../models/component';
 import * as Styles from './message-system.module.less';
 
-export interface IMessageSystemProps extends IDataCyProps {
+export interface IMessageSystemProps {
     fullWidth?: boolean;
     className?: string;
+    ['data-cy2']?: string;
 }
 
 export const MessageSystem: FC<PropsWithChildren<IMessageSystemProps>> = ({
@@ -15,7 +15,7 @@ export const MessageSystem: FC<PropsWithChildren<IMessageSystemProps>> = ({
     fullWidth,
     ...rest
 }) => {
-    const dataCy = rest['data-cy'] ?? 'chat-message-system';
+    const dataCy2 = rest['data-cy2'] ?? 'titan-chat-message-system';
     return (
         <div
             className={classNames(
@@ -25,7 +25,8 @@ export const MessageSystem: FC<PropsWithChildren<IMessageSystemProps>> = ({
                 },
                 className
             )}
-            data-cy={dataCy}
+            data-cy="titan-chat-message"
+            data-cy2={dataCy2}
         >
             <Stack direction="column" spacing="1" className={Styles.messageContent}>
                 {children}

package/src/components/messages/message-timeout.tsx

@@ -1,16 +1,13 @@
 import { BodyText, Divider, Link, Stack } from '@servicetitan/design-system';
 import { FC, useCallback } from 'react';
-import { IDataCyProps } from '../../models/component';
 import { MessageSystem } from './message-system';
 
-export interface IMessageTimeoutProps extends IDataCyProps {
+export interface IMessageTimeoutProps {
     onResume: () => void;
     onReset: () => void;
 }
 
-export const MessageTimeout: FC<IMessageTimeoutProps> = ({ onReset, onResume, ...rest }) => {
-    const dataCy = rest['data-cy'] ?? 'chat-message-timeout';
-
+export const MessageTimeout: FC<IMessageTimeoutProps> = ({ onReset, onResume }) => {
     const handleResume = useCallback(() => {
         onResume();
     }, [onResume]);
@@ -20,7 +17,7 @@ export const MessageTimeout: FC<IMessageTimeoutProps> = ({ onReset, onResume, ..
     }, [onReset]);
 
     return (
-        <MessageSystem data-cy={dataCy} fullWidth>
+        <MessageSystem data-cy2="titan-chat-message-timeout" fullWidth>
             <Stack direction="column" spacing="2">
                 <Divider />
                 <BodyText el="div" className="ta-center">
@@ -28,11 +25,15 @@ export const MessageTimeout: FC<IMessageTimeoutProps> = ({ onReset, onResume, ..
                     <br />
                     Would you like to resume it or start a new one?
                     <br />
-                    <Link onClick={handleResume} primary data-cy={`${dataCy}-resume`}>
+                    <Link
+                        onClick={handleResume}
+                        primary
+                        data-cy="titan-chat-message-timeout-resume"
+                    >
                         Continue session
                     </Link>{' '}
                     or{' '}
-                    <Link onClick={handleReset} primary data-cy={`${dataCy}-reset`}>
+                    <Link onClick={handleReset} primary data-cy="titan-chat-message-timeout-reset">
                         Start new session
                     </Link>
                 </BodyText>

package/src/components/messages/message-typing.tsx

@@ -1,25 +1,21 @@
 import { Stack } from '@servicetitan/design-system';
 import { FC } from 'react';
-import { IDataCyProps } from '../../models/component';
 import { MessageAgent } from './message-agent';
 import { IMessageAvatarProps } from './message-avatar';
 import * as Styles from './message-typing.module.less';
 
-export interface IMessageTypingProps extends IDataCyProps {
+export interface IMessageTypingProps {
     avatar: IMessageAvatarProps;
 }
 
-export const MessageTyping: FC<IMessageTypingProps> = ({ avatar, ...rest }) => {
-    const dataCy = rest['data-cy'] ?? 'chat-message-typing';
-    return (
-        <MessageAgent avatar={avatar} data-cy={dataCy} subtle>
-            <Stack className="h-100" alignItems="center">
-                <div className={Styles.dotsContainer} data-cy={`${dataCy}-dots`}>
-                    <span className={Styles.dot} />
-                    <span className={Styles.dot} />
-                    <span className={Styles.dot} />
-                </div>
-            </Stack>
-        </MessageAgent>
-    );
-};
+export const MessageTyping: FC<IMessageTypingProps> = ({ avatar }) => (
+    <MessageAgent avatar={avatar} data-cy2="titan-chat-message-typing" subtle>
+        <Stack className="h-100" alignItems="center">
+            <div className={Styles.dotsContainer} data-cy="titan-chat-message-typing-dots">
+                <span className={Styles.dot} />
+                <span className={Styles.dot} />
+                <span className={Styles.dot} />
+            </div>
+        </Stack>
+    </MessageAgent>
+);

package/src/components/messages/message-user.tsx

@@ -1,10 +1,9 @@
 import { Stack } from '@servicetitan/design-system';
 import classNames from 'classnames';
 import { FC, PropsWithChildren, ReactNode } from 'react';
-import { IDataCyProps } from '../../models/component';
 import * as Styles from './message-user.module.less';
 
-export interface IMessageUserProps extends IDataCyProps {
+export interface IMessageUserProps {
     messageFooter?: ReactNode;
     isError?: boolean;
     className?: string;
@@ -15,15 +14,12 @@ export const MessageUser: FC<PropsWithChildren<IMessageUserProps>> = ({
     className,
     isError,
     messageFooter,
-    ...rest
 }) => {
-    const dataCy = rest['data-cy'] ?? 'chat-message-user';
-    const dataCy2 = isError ? 'chat-message-error' : 'chat-message-normal';
     return (
         <div
-            className={classNames(Styles.messageRoot, 'max-w-100')}
-            data-cy={dataCy}
-            data-cy2={dataCy2}
+            className={classNames(Styles.messageRoot, 'max-w-100', className)}
+            data-cy="titan-chat-message"
+            data-cy2="titan-chat-message-user"
         >
             <Stack
                 direction="column"
@@ -34,12 +30,13 @@ export const MessageUser: FC<PropsWithChildren<IMessageUserProps>> = ({
                     className={classNames(Styles.messageBubble, {
                         [Styles.error]: isError,
                     })}
-                    data-cy={`${dataCy}-content`}
+                    data-cy="titan-chat-message-content"
+                    data-cy2="titan-chat-message-content-user"
                 >
                     {children}
                 </div>
                 {Boolean(messageFooter) && (
-                    <div className={Styles.messageFooter} data-cy={`${dataCy}-footer`}>
+                    <div className={Styles.messageFooter} data-cy="titan-chat-message-footer">
                         {messageFooter}
                     </div>
                 )}

package/src/index.ts

@@ -12,3 +12,4 @@ export { useAvatarProps } from './components/messages/use-avatar-props';
 export { MultilineText } from './components/common/multiline-text';
 export * from './stores';
 export * from './models';
+export * from './utils/text-utils';

package/src/stores/__tests__/chat-input.store.test.ts

@@ -1,6 +1,6 @@
 import { expect } from '@jest/globals';
+import { initTestContainer } from '@local/utils';
 import { Container } from '@servicetitan/react-ioc';
-import { initTestContainer } from '../../utils/test-utils';
 import { ChatInputStore } from '../chat-input.store';
 
 const initContainer = initTestContainer(ChatInputStore, () => {});
@@ -19,21 +19,25 @@ describe('[ChatInputStore]', () => {
         expect(store.formState.$.message.value).toBe('');
         const validateResult = await store.formState.validate();
         expect(validateResult.hasError).toBe(false);
+        expect(store.isEmpty).toBe(true);
 
         store.formState.$.message.onChange('test');
         expect(store.formState.$.message.value).toBe('test');
         const validateResult2 = await store.formState.validate();
         expect(validateResult2.hasError).toBe(false);
+        expect(store.isEmpty).toBe(false);
 
         store.formState.$.message.onChange('a'.repeat(6000));
         expect(store.formState.$.message.value).toBe('a'.repeat(6000));
         const validateResult3 = await store.formState.validate();
         expect(validateResult3.hasError).toBe(false);
+        expect(store.isEmpty).toBe(false);
 
         store.formState.$.message.onChange('a'.repeat(6001));
         expect(store.formState.$.message.value).toBe('a'.repeat(6001));
         const validateResult4 = await store.formState.validate();
         expect(validateResult4.hasError).toBe(true);
         expect(store.formState.$.message.error).toBe('Message character max is 6000.');
+        expect(store.isEmpty).toBe(false);
     });
 });