@patternfly/chatbot 6.5.0-prerelease.1 → 6.5.0-prerelease.3

package/src/Message/Message.tsx

@@ -11,8 +11,6 @@ import {
   AvatarProps,
   ButtonProps,
   ContentVariants,
-  ExpandableSectionProps,
-  ExpandableSectionToggleProps,
   FormProps,
   Label,
   LabelGroupProps,
@@ -20,7 +18,7 @@ import {
   Truncate
 } from '@patternfly/react-core';
 import MessageLoading from './MessageLoading';
-import CodeBlockMessage from './CodeBlockMessage/CodeBlockMessage';
+import CodeBlockMessage, { CodeBlockMessageProps } from './CodeBlockMessage/CodeBlockMessage';
 import TextMessage from './TextMessage/TextMessage';
 import FileDetailsLabel from '../FileDetailsLabel/FileDetailsLabel';
 import ResponseActions, { ActionProps } from '../ResponseActions/ResponseActions';
@@ -44,6 +42,9 @@ import ImageMessage from './ImageMessage/ImageMessage';
 import rehypeUnwrapImages from 'rehype-unwrap-images';
 import rehypeExternalLinks from 'rehype-external-links';
 import rehypeSanitize from 'rehype-sanitize';
+import rehypeHighlight from 'rehype-highlight';
+// see the full list of styles here: https://highlightjs.org/examples
+import 'highlight.js/styles/vs2015.css';
 import { PluggableList } from 'unified';
 import LinkMessage from './LinkMessage/LinkMessage';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
@@ -114,24 +115,7 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   /** Label for the English "Loading message," displayed to screenreaders when loading a message */
   loadingWord?: string;
   /** Props for code blocks */
-  codeBlockProps?: {
-    /** Aria label applied to code blocks */
-    'aria-label'?: string;
-    /** Class name applied to code blocks */
-    className?: string;
-    /** Whether code blocks are expandable */
-    isExpandable?: boolean;
-    /** Length of text initially shown in expandable code blocks; defaults to 10 characters */
-    maxLength?: number;
-    /** Additional props passed to expandable section if isExpandable is applied */
-    expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
-    /** Additional props passed to expandable toggle if isExpandable is applied */
-    expandableSectionToggleProps?: ExpandableSectionToggleProps;
-    /** Link text applied to expandable toggle when expanded */
-    expandedText?: string;
-    /** Link text applied to expandable toggle when collapsed */
-    collapsedText?: string;
-  };
+  codeBlockProps?: CodeBlockMessageProps;
   /** Props for quick responses */
   quickResponses?: QuickResponse[];
   /** Props for quick responses container */
@@ -261,7 +245,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   }, [content]);
 
   const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
-  let rehypePlugins: PluggableList = [rehypeUnwrapImages, rehypeMoveImagesOutOfParagraphs];
+  let rehypePlugins: PluggableList = [rehypeUnwrapImages, rehypeMoveImagesOutOfParagraphs, rehypeHighlight];
   if (openLinkInNewTab) {
     rehypePlugins = rehypePlugins.concat([[rehypeExternalLinks, { target: '_blank' }, rehypeSanitize]]);
   }

package/src/Message/TextMessage/TextMessage.scss

@@ -71,6 +71,12 @@ li[id*='user-content-fn-']:has(> span > span > .pf-chatbot__message-text + .pf-c
   margin-block-end: var(--pf-t--global--spacer--md);
 }
 
+.pf-chatbot__message-text.footnotes {
+  .data-footnote-backref {
+    width: fit-content;
+  }
+}
+
 .pf-chatbot__message--user {
   .pf-chatbot__message-text {
     background-color: var(--pf-t--global--color--brand--default);

package/src/__mocks__/rehype-highlight.ts

@@ -0,0 +1,3 @@
+const rehypeHighlight = () => (tree) => tree;
+
+export default rehypeHighlight;