@patternfly/chatbot 2.2.0-prerelease.28 → 2.2.0-prerelease.29

package/dist/cjs/Message/Message.d.ts

@@ -7,6 +7,7 @@ import QuickResponse from './QuickResponse/QuickResponse';
 import { UserFeedbackProps } from './UserFeedback/UserFeedback';
 import { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
 import { TableProps } from '@patternfly/react-table';
+import { PluggableList } from 'react-markdown/lib';
 export interface MessageAttachment {
     /** Name of file attached to the message */
     name: string;
@@ -97,6 +98,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
     innerRef?: React.Ref<HTMLDivElement>;
     /** Props for table message. It is important to include a detailed aria-label that describes the purpose of the table. */
     tableProps?: Required<Pick<TableProps, 'aria-label'>> & TableProps;
+    /** Additional rehype plugins passed from the consumer */
+    additionalRehypePlugins?: PluggableList;
 }
 export declare const MessageBase: React.FunctionComponent<MessageProps>;
 declare const Message: React.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/Message/Message.js

@@ -44,7 +44,7 @@ const ThMessage_1 = __importDefault(require("./TableMessage/ThMessage"));
 const ImageMessage_1 = __importDefault(require("./ImageMessage/ImageMessage"));
 const rehype_unwrap_images_1 = __importDefault(require("rehype-unwrap-images"));
 const MessageBase = (_a) => {
-    var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps"]);
+    var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, additionalRehypePlugins = [] } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "additionalRehypePlugins"]);
     const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
     let avatarClassName;
     if (avatarProps && 'className' in avatarProps) {
@@ -55,6 +55,7 @@ const MessageBase = (_a) => {
     // Keep timestamps consistent between Timestamp component and aria-label
     const date = new Date();
     const dateString = timestamp !== null && timestamp !== void 0 ? timestamp : `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+    const rehypePlugins = [rehype_unwrap_images_1.default, ...(additionalRehypePlugins !== null && additionalRehypePlugins !== void 0 ? additionalRehypePlugins : [])];
     return (react_1.default.createElement("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props),
         react_1.default.createElement(react_core_1.Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)),
         react_1.default.createElement("div", { className: "pf-chatbot__message-contents" },
@@ -95,7 +96,7 @@ const MessageBase = (_a) => {
                                 },
                                 th: (props) => react_1.default.createElement(ThMessage_1.default, Object.assign({}, props)),
                                 img: (props) => react_1.default.createElement(ImageMessage_1.default, Object.assign({}, props))
-                            }, remarkPlugins: [remark_gfm_1.default], rehypePlugins: [rehype_unwrap_images_1.default] }, content),
+                            }, remarkPlugins: [remark_gfm_1.default], rehypePlugins: rehypePlugins }, content),
                         afterMainContent && react_1.default.createElement(react_1.default.Fragment, null, afterMainContent))),
                     !isLoading && sources && react_1.default.createElement(SourcesCard_1.default, Object.assign({}, sources)),
                     quickStarts && quickStarts.quickStart && (react_1.default.createElement(QuickStartTile_1.default, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel })),

package/dist/esm/Message/Message.d.ts

@@ -7,6 +7,7 @@ import QuickResponse from './QuickResponse/QuickResponse';
 import { UserFeedbackProps } from './UserFeedback/UserFeedback';
 import { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
 import { TableProps } from '@patternfly/react-table';
+import { PluggableList } from 'react-markdown/lib';
 export interface MessageAttachment {
     /** Name of file attached to the message */
     name: string;
@@ -97,6 +98,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
     innerRef?: React.Ref<HTMLDivElement>;
     /** Props for table message. It is important to include a detailed aria-label that describes the purpose of the table. */
     tableProps?: Required<Pick<TableProps, 'aria-label'>> & TableProps;
+    /** Additional rehype plugins passed from the consumer */
+    additionalRehypePlugins?: PluggableList;
 }
 export declare const MessageBase: React.FunctionComponent<MessageProps>;
 declare const Message: React.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/Message/Message.js

@@ -38,7 +38,7 @@ import ThMessage from './TableMessage/ThMessage';
 import ImageMessage from './ImageMessage/ImageMessage';
 import rehypeUnwrapImages from 'rehype-unwrap-images';
 export const MessageBase = (_a) => {
-    var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps"]);
+    var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, additionalRehypePlugins = [] } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "additionalRehypePlugins"]);
     const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
     let avatarClassName;
     if (avatarProps && 'className' in avatarProps) {
@@ -49,6 +49,7 @@ export const MessageBase = (_a) => {
     // Keep timestamps consistent between Timestamp component and aria-label
     const date = new Date();
     const dateString = timestamp !== null && timestamp !== void 0 ? timestamp : `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+    const rehypePlugins = [rehypeUnwrapImages, ...(additionalRehypePlugins !== null && additionalRehypePlugins !== void 0 ? additionalRehypePlugins : [])];
     return (React.createElement("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props),
         React.createElement(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)),
         React.createElement("div", { className: "pf-chatbot__message-contents" },
@@ -89,7 +90,7 @@ export const MessageBase = (_a) => {
                                 },
                                 th: (props) => React.createElement(ThMessage, Object.assign({}, props)),
                                 img: (props) => React.createElement(ImageMessage, Object.assign({}, props))
-                            }, remarkPlugins: [remarkGfm], rehypePlugins: [rehypeUnwrapImages] }, content),
+                            }, remarkPlugins: [remarkGfm], rehypePlugins: rehypePlugins }, content),
                         afterMainContent && React.createElement(React.Fragment, null, afterMainContent))),
                     !isLoading && sources && React.createElement(SourcesCard, Object.assign({}, sources)),
                     quickStarts && quickStarts.quickStart && (React.createElement(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel })),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "2.2.0-prerelease.28",
+  "version": "2.2.0-prerelease.29",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/Message/Message.tsx

@@ -38,6 +38,7 @@ import ThMessage from './TableMessage/ThMessage';
 import { TableProps } from '@patternfly/react-table';
 import ImageMessage from './ImageMessage/ImageMessage';
 import rehypeUnwrapImages from 'rehype-unwrap-images';
+import { PluggableList } from 'react-markdown/lib';
 
 export interface MessageAttachment {
   /** Name of file attached to the message */
@@ -133,6 +134,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   innerRef?: React.Ref<HTMLDivElement>;
   /** Props for table message. It is important to include a detailed aria-label that describes the purpose of the table. */
   tableProps?: Required<Pick<TableProps, 'aria-label'>> & TableProps;
+  /** Additional rehype plugins passed from the consumer */
+  additionalRehypePlugins?: PluggableList;
 }
 
 export const MessageBase: React.FunctionComponent<MessageProps> = ({
@@ -159,6 +162,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
   isLiveRegion = true,
   innerRef,
   tableProps,
+  additionalRehypePlugins = [],
   ...props
 }: MessageProps) => {
   const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
@@ -171,6 +175,9 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
   // Keep timestamps consistent between Timestamp component and aria-label
   const date = new Date();
   const dateString = timestamp ?? `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+
+  const rehypePlugins = [rehypeUnwrapImages, ...(additionalRehypePlugins ?? [])];
+
   return (
     <section
       aria-label={`Message from ${role} - ${dateString}`}
@@ -240,7 +247,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
                     img: (props) => <ImageMessage {...props} />
                   }}
                   remarkPlugins={[remarkGfm]}
-                  rehypePlugins={[rehypeUnwrapImages]}
+                  rehypePlugins={rehypePlugins}
                 >
                   {content}
                 </Markdown>