@servicetitan/titan-chat-ui-anvil2 3.1.5 → 3.2.1

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v3.2.1 (Tue Sep 09 2025)
+
+#### 🐛 Bug Fix
+
+- SPA-7282: Fixed browser default "p" style for messages. [#54](https://github.com/servicetitan/titan-chatbot-client/pull/54) ([@AlexYarmolchuk](https://github.com/AlexYarmolchuk))
+
+#### Authors: 1
+
+- Alexandr Yarmolchuk ([@AlexYarmolchuk](https://github.com/AlexYarmolchuk))
+
+---
+
+# v3.2.0 (Tue Sep 09 2025)
+
+#### 🚀 Enhancement
+
+- SPA-7282: Support Rendering of Markups in Chatbot Responses [#53](https://github.com/servicetitan/titan-chatbot-client/pull/53) ([@AlexYarmolchuk](https://github.com/AlexYarmolchuk))
+
+#### Authors: 1
+
+- Alexandr Yarmolchuk ([@AlexYarmolchuk](https://github.com/AlexYarmolchuk))
+
+---
+
 # v3.1.3 (Fri Aug 22 2025)
 
 #### 🐛 Bug Fix

package/dist/components/message-content/__tests-cy__/message-content-text.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=message-content-text.test.d.ts.map

package/dist/components/message-content/__tests-cy__/message-content-text.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-content-text.test.d.ts","sourceRoot":"","sources":["../../../../src/components/message-content/__tests-cy__/message-content-text.test.tsx"],"names":[],"mappings":""}

package/dist/components/message-content/__tests-cy__/message-content-text.test.js

@@ -0,0 +1,6 @@
+import { runMessageContentTextSharedTests } from '@servicetitan/cypress-shared';
+import { MessageContentText } from '../message-content-text';
+describe('MessageContentText', () => {
+    runMessageContentTextSharedTests(MessageContentText);
+});
+//# sourceMappingURL=message-content-text.test.js.map

package/dist/components/message-content/__tests-cy__/message-content-text.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-content-text.test.js","sourceRoot":"","sources":["../../../../src/components/message-content/__tests-cy__/message-content-text.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gCAAgC,EAAE,MAAM,8BAA8B,CAAC;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAChC,gCAAgC,CAAC,kBAAkB,CAAC,CAAC;AACzD,CAAC,CAAC,CAAC"}

package/dist/components/message-content/message-content-text.d.ts

@@ -1,7 +1,9 @@
 import { ChatMessageModelText, ChatMessageModelWelcome } from '@servicetitan/titan-chat-ui-common';
 import { FC } from 'react';
 interface IMessageContentTextProps {
+    className?: string;
     message: ChatMessageModelText | ChatMessageModelWelcome;
+    ['data-cy']?: string;
 }
 export declare const MessageContentText: FC<IMessageContentTextProps>;
 export {};

package/dist/components/message-content/message-content-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message-content-text.d.ts","sourceRoot":"","sources":["../../../src/components/message-content/message-content-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAEnG,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3B,UAAU,wBAAwB;IAC9B,OAAO,EAAE,oBAAoB,GAAG,uBAAuB,CAAC;CAC3D;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,wBAAwB,CAE1D,CAAC"}
+{"version":3,"file":"message-content-text.d.ts","sourceRoot":"","sources":["../../../src/components/message-content/message-content-text.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAInG,OAAO,EAAE,EAAE,EAAsB,MAAM,OAAO,CAAC;AAM/C,UAAU,wBAAwB;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,oBAAoB,GAAG,uBAAuB,CAAC;IACxD,CAAC,SAAS,CAAC,CAAC,EAAE,MAAM,CAAC;CACxB;AAID,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,wBAAwB,CA0F3D,CAAC"}

package/dist/components/message-content/message-content-text.js

@@ -1,7 +1,45 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Link, Text } from '@servicetitan/anvil2';
+import classNames from 'classnames';
+import DOMpurify from 'dompurify';
 import { observer } from 'mobx-react';
-import { MultilineText } from '../common/multiline-text';
-export const MessageContentText = observer(({ message }) => {
-    return _jsx(MultilineText, { text: message.message });
+import { useMemo } from 'react';
+import Markdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
+import * as Styles from './message-content-text.module.less';
+export const MessageContentText = observer(({ className, message, ...rest }) => {
+    var _a;
+    const dataCy = (_a = rest['data-cy']) !== null && _a !== void 0 ? _a : 'titan-chat-text';
+    const markdownComponents = useMemo(() => ({
+        code({ children }) {
+            return (_jsx(Text, { variant: "body", className: "c-primary bg-stronger border-radius-small", style: { fontFamily: 'monospace', fontSize: '0.85em' }, inline: true, children: children }));
+        },
+        u({ children }) {
+            return _jsx("u", { children: children });
+        },
+        a({ children, href }) {
+            return (_jsx(Link, { href: href, target: "_blank", appearance: "primary", rel: "noopener noreferrer", children: children }));
+        },
+        h1({ children }) {
+            return (_jsx(Text, { variant: "headline", el: "h1", size: "xlarge", children: children }));
+        },
+        h2({ children }) {
+            return (_jsx(Text, { variant: "headline", el: "h2", size: "large", children: children }));
+        },
+        h3({ children }) {
+            return (_jsx(Text, { variant: "headline", el: "h3", size: "medium", children: children }));
+        },
+        h4({ children }) {
+            return (_jsx(Text, { variant: "headline", el: "h4", size: "small", children: children }));
+        },
+        h5({ children }) {
+            return (_jsx(Text, { variant: "headline", el: "h5", size: "small", children: children }));
+        },
+        h6({ children }) {
+            return (_jsx(Text, { variant: "headline", el: "h6", size: "small", children: children }));
+        },
+    }), []);
+    return (_jsx(Text, { variant: "body", className: classNames(Styles.content, className), "data-cy": dataCy, children: _jsx(Markdown, { components: markdownComponents, rehypePlugins: [rehypeRaw], remarkPlugins: [remarkGfm], children: DOMpurify.sanitize(message.message) }) }));
 });
 //# sourceMappingURL=message-content-text.js.map

package/dist/components/message-content/message-content-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-content-text.js","sourceRoot":"","sources":["../../../src/components/message-content/message-content-text.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAMzD,MAAM,CAAC,MAAM,kBAAkB,GAAiC,QAAQ,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IACrF,OAAO,KAAC,aAAa,IAAC,IAAI,EAAE,OAAO,CAAC,OAAO,GAAI,CAAC;AACpD,CAAC,CAAC,CAAC"}
+{"version":3,"file":"message-content-text.js","sourceRoot":"","sources":["../../../src/components/message-content/message-content-text.tsx"],"names":[],"mappings":"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"}

package/dist/components/message-content/message-content-text.module.less

@@ -0,0 +1,8 @@
+@import '@servicetitan/tokens/dist/tokens.less';
+
+.content {
+    p {
+        margin: @spacing-0;
+        padding: @spacing-0;
+    }
+}

package/dist/index.d.ts

@@ -10,5 +10,6 @@ export { MessageAvatar, IMessageAvatarProps } from './components/messages/messag
 export { MessageFooter, IMessageFooterProps } from './components/messages/message-footer';
 export { useAvatarProps } from './components/messages/use-avatar-props';
 export { MultilineText } from './components/common/multiline-text';
+export { MessageContentText } from './components/message-content/message-content-text';
 export { ChatInputStore } from './stores/chat-input.store';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACvF,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACpF,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7F,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACvF,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACpF,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7F,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mDAAmD,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/index.js

@@ -10,5 +10,6 @@ export { MessageAvatar } from './components/messages/message-avatar';
 export { MessageFooter } from './components/messages/message-footer';
 export { useAvatarProps } from './components/messages/use-avatar-props';
 export { MultilineText } from './components/common/multiline-text';
+export { MessageContentText } from './components/message-content/message-content-text';
 export { ChatInputStore } from './stores/chat-input.store';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,IAAI,EAAc,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAsB,MAAM,qCAAqC,CAAC;AACvF,OAAO,EAAE,WAAW,EAAqB,MAAM,oCAAoC,CAAC;AACpF,OAAO,EAAE,aAAa,EAAuB,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,aAAa,EAAuB,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,cAAc,EAAwB,MAAM,uCAAuC,CAAC;AAC7F,OAAO,EAAE,aAAa,EAAuB,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,aAAa,EAAuB,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,IAAI,EAAc,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAsB,MAAM,qCAAqC,CAAC;AACvF,OAAO,EAAE,WAAW,EAAqB,MAAM,oCAAoC,CAAC;AACpF,OAAO,EAAE,aAAa,EAAuB,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,aAAa,EAAuB,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,cAAc,EAAwB,MAAM,uCAAuC,CAAC;AAC7F,OAAO,EAAE,aAAa,EAAuB,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,aAAa,EAAuB,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mDAAmD,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/titan-chat-ui-anvil2",
-    "version": "3.1.5",
+    "version": "3.2.1",
     "description": "Chat experience UI package (Anvil2 version)",
     "repository": {
         "type": "git",
@@ -17,9 +17,13 @@
         "push:local": "yalc push"
     },
     "dependencies": {
-        "@servicetitan/titan-chat-ui-common": "^3.1.5",
+        "@servicetitan/titan-chat-ui-common": "^3.2.1",
+        "dompurify": "^3.2.6",
         "lodash": "4.17.21",
-        "nanoid": "^5.1.5"
+        "nanoid": "^5.1.5",
+        "react-markdown": "^10.1.0",
+        "rehype-raw": "^7.0.0",
+        "remark-gfm": "^4.0.1"
     },
     "peerDependencies": {
         "@servicetitan/anvil2": ">=1.16.0",
@@ -34,7 +38,7 @@
         "react-dom": ">=18"
     },
     "devDependencies": {
-        "@servicetitan/cypress-shared": "^3.1.5",
+        "@servicetitan/cypress-shared": "^3.2.1",
         "cypress": "^14.3.2"
     },
     "keywords": [
@@ -47,5 +51,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "d505add9e192f5d8260f14e15eee7460980e869b"
+    "gitHead": "f6a97e29c801f2dd05627766056f9b6e9b2c2318"
 }

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

@@ -0,0 +1,6 @@
+import { runMessageContentTextSharedTests } from '@servicetitan/cypress-shared';
+import { MessageContentText } from '../message-content-text';
+
+describe('MessageContentText', () => {
+    runMessageContentTextSharedTests(MessageContentText);
+});

package/src/components/message-content/message-content-text.module.less

@@ -0,0 +1,8 @@
+@import '@servicetitan/tokens/dist/tokens.less';
+
+.content {
+    p {
+        margin: @spacing-0;
+        padding: @spacing-0;
+    }
+}

package/src/components/message-content/message-content-text.module.less.d.ts

@@ -0,0 +1,3 @@
+export const __esModule: true;
+export const content: string;
+

package/src/components/message-content/message-content-text.tsx

@@ -1,12 +1,110 @@
+import { Link, Text } from '@servicetitan/anvil2';
 import { ChatMessageModelText, ChatMessageModelWelcome } from '@servicetitan/titan-chat-ui-common';
+import classNames from 'classnames';
+import DOMpurify from 'dompurify';
 import { observer } from 'mobx-react';
-import { FC } from 'react';
-import { MultilineText } from '../common/multiline-text';
+import { FC, ReactNode, useMemo } from 'react';
+import Markdown, { Components } from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
+import * as Styles from './message-content-text.module.less';
 
 interface IMessageContentTextProps {
+    className?: string;
     message: ChatMessageModelText | ChatMessageModelWelcome;
+    ['data-cy']?: string;
 }
 
-export const MessageContentText: FC<IMessageContentTextProps> = observer(({ message }) => {
-    return <MultilineText text={message.message} />;
-});
+type Node = { children: ReactNode } & { [key: string]: any };
+
+export const MessageContentText: FC<IMessageContentTextProps> = observer(
+    ({ className, message, ...rest }) => {
+        const dataCy = rest['data-cy'] ?? 'titan-chat-text';
+        const markdownComponents: Components = useMemo(
+            () => ({
+                code({ children }: Node) {
+                    return (
+                        <Text
+                            variant="body"
+                            className="c-primary bg-stronger border-radius-small"
+                            style={{ fontFamily: 'monospace', fontSize: '0.85em' }}
+                            inline
+                        >
+                            {children}
+                        </Text>
+                    );
+                },
+                u({ children }: Node) {
+                    return <u>{children}</u>;
+                },
+                a({ children, href }: Node & { href?: string }) {
+                    return (
+                        <Link
+                            href={href}
+                            target="_blank"
+                            appearance="primary"
+                            rel="noopener noreferrer"
+                        >
+                            {children}
+                        </Link>
+                    );
+                },
+                h1({ children }: Node) {
+                    return (
+                        <Text variant="headline" el="h1" size="xlarge">
+                            {children}
+                        </Text>
+                    );
+                },
+                h2({ children }: Node) {
+                    return (
+                        <Text variant="headline" el="h2" size="large">
+                            {children}
+                        </Text>
+                    );
+                },
+                h3({ children }: Node) {
+                    return (
+                        <Text variant="headline" el="h3" size="medium">
+                            {children}
+                        </Text>
+                    );
+                },
+                h4({ children }: Node) {
+                    return (
+                        <Text variant="headline" el="h4" size="small">
+                            {children}
+                        </Text>
+                    );
+                },
+                h5({ children }: Node) {
+                    return (
+                        <Text variant="headline" el="h5" size="small">
+                            {children}
+                        </Text>
+                    );
+                },
+                h6({ children }: Node) {
+                    return (
+                        <Text variant="headline" el="h6" size="small">
+                            {children}
+                        </Text>
+                    );
+                },
+            }),
+            []
+        );
+
+        return (
+            <Text variant="body" className={classNames(Styles.content, className)} data-cy={dataCy}>
+                <Markdown
+                    components={markdownComponents}
+                    rehypePlugins={[rehypeRaw]}
+                    remarkPlugins={[remarkGfm]}
+                >
+                    {DOMpurify.sanitize(message.message)}
+                </Markdown>
+            </Text>
+        );
+    }
+);

package/src/index.ts

@@ -10,4 +10,5 @@ export { MessageAvatar, IMessageAvatarProps } from './components/messages/messag
 export { MessageFooter, IMessageFooterProps } from './components/messages/message-footer';
 export { useAvatarProps } from './components/messages/use-avatar-props';
 export { MultilineText } from './components/common/multiline-text';
+export { MessageContentText } from './components/message-content/message-content-text';
 export { ChatInputStore } from './stores/chat-input.store';