@servicetitan/titan-chat-ui-anvil2 4.2.0 → 4.3.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v4.3.0 (Wed Oct 08 2025)
+
+#### 🚀 Enhancement
+
+- SPA-7396: Updated API contract. Improved markdown rendering. Exposed markdown text component [#63](https://github.com/servicetitan/titan-chatbot-client/pull/63) ([@AlexYarmolchuk](https://github.com/AlexYarmolchuk))
+
+#### Authors: 1
+
+- Alexandr Yarmolchuk ([@AlexYarmolchuk](https://github.com/AlexYarmolchuk))
+
+---
+
 # v4.0.0 (Fri Sep 19 2025)
 
 #### 💥 Breaking Change

package/dist/components/common/markdown-text.d.ts

@@ -0,0 +1,8 @@
+import { TextProps } from '@servicetitan/anvil2';
+import { FC } from 'react';
+type MarkdownTextProps = TextProps & {
+    text: string;
+};
+export declare const MarkdownText: FC<MarkdownTextProps>;
+export {};
+//# sourceMappingURL=markdown-text.d.ts.map

package/dist/components/common/markdown-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-text.d.ts","sourceRoot":"","sources":["../../../src/components/common/markdown-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAG7D,OAAO,EAAE,EAAE,EAAsB,MAAM,OAAO,CAAC;AAQ/C,KAAK,iBAAiB,GAAG,SAAS,GAAG;IACjC,IAAI,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAuF9C,CAAC"}

package/dist/components/common/markdown-text.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Link, Text } from '@servicetitan/anvil2';
+import classNames from 'classnames';
+import DOMpurify from 'dompurify';
+import { useMemo } from 'react';
+import Markdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
+import * as Styles from './markdown-text.module.less';
+export const MarkdownText = ({ className, text, ...rest }) => {
+    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), ...rest, children: _jsx(Markdown, { components: markdownComponents, rehypePlugins: [rehypeRaw], remarkPlugins: [remarkGfm], children: DOMpurify.sanitize(text) }) }));
+};
+//# sourceMappingURL=markdown-text.js.map

package/dist/components/common/markdown-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-text.js","sourceRoot":"","sources":["../../../src/components/common/markdown-text.tsx"],"names":[],"mappings":"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"}

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":"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"}
+{"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,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,oBAAoB,GAAG,uBAAuB,CAAC;IACxD,CAAC,SAAS,CAAC,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,wBAAwB,CAK3D,CAAC"}

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

@@ -1,45 +1,9 @@
 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 { 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';
+import { MarkdownText } from '../common/markdown-text';
 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) }) }));
+    return _jsx(MarkdownText, { className: className, text: message.message, "data-cy": dataCy });
 });
 //# 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":"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"}
+{"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,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAQvD,MAAM,CAAC,MAAM,kBAAkB,GAAiC,QAAQ,CACpE,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;;IAChC,MAAM,MAAM,GAAG,MAAA,IAAI,CAAC,SAAS,CAAC,mCAAI,iBAAiB,CAAC;IACpD,OAAO,KAAC,YAAY,IAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,CAAC,OAAO,aAAW,MAAM,GAAI,CAAC;AAC1F,CAAC,CACJ,CAAC"}

package/dist/index.d.ts

@@ -10,6 +10,7 @@ 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 { MarkdownText } from './components/common/markdown-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,kBAAkB,EAAE,MAAM,mDAAmD,CAAC;AACvF,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,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mDAAmD,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/index.js

@@ -10,6 +10,7 @@ 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 { MarkdownText } from './components/common/markdown-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,kBAAkB,EAAE,MAAM,mDAAmD,CAAC;AACvF,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,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,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": "4.2.0",
+    "version": "4.3.0",
     "description": "Chat experience UI package (Anvil2 version)",
     "repository": {
         "type": "git",
@@ -17,7 +17,7 @@
         "push:local": "yalc push"
     },
     "dependencies": {
-        "@servicetitan/titan-chat-ui-common": "^4.2.0",
+        "@servicetitan/titan-chat-ui-common": "^4.3.0",
         "dompurify": "^3.2.6",
         "lodash": "4.17.21",
         "nanoid": "^5.1.5",
@@ -38,7 +38,7 @@
         "react-dom": ">=18"
     },
     "devDependencies": {
-        "@servicetitan/cypress-shared": "^4.2.0",
+        "@servicetitan/cypress-shared": "^4.3.0",
         "cypress": "^15.2.0"
     },
     "keywords": [
@@ -51,5 +51,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "165f0a686b7a040223f6a0928b10d1d8cf6033e6"
+    "gitHead": "640e7253dc9fa5135ca7c330391989d4e3d06374"
 }

package/src/components/common/markdown-text.tsx

@@ -0,0 +1,103 @@
+import { Link, Text, TextProps } from '@servicetitan/anvil2';
+import classNames from 'classnames';
+import DOMpurify from 'dompurify';
+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 './markdown-text.module.less';
+
+type Node = { children: ReactNode } & { [key: string]: any };
+
+type MarkdownTextProps = TextProps & {
+    text: string;
+};
+
+export const MarkdownText: FC<MarkdownTextProps> = ({ className, text, ...rest }) => {
+    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)} {...rest}>
+            <Markdown
+                components={markdownComponents}
+                rehypePlugins={[rehypeRaw]}
+                remarkPlugins={[remarkGfm]}
+            >
+                {DOMpurify.sanitize(text)}
+            </Markdown>
+        </Text>
+    );
+};

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

@@ -1,13 +1,7 @@
-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, 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';
+import { FC } from 'react';
+import { MarkdownText } from '../common/markdown-text';
 
 interface IMessageContentTextProps {
     className?: string;
@@ -15,96 +9,9 @@ interface IMessageContentTextProps {
     ['data-cy']?: string;
 }
 
-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>
-        );
+        return <MarkdownText className={className} text={message.message} data-cy={dataCy} />;
     }
 );

package/src/index.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 { MarkdownText } from './components/common/markdown-text';
 export { MessageContentText } from './components/message-content/message-content-text';
 export { ChatInputStore } from './stores/chat-input.store';