feat(CodeBlockMessage/Message): Add expandable code block (#556)

Co-authored-by: Erin Donehoo <[email protected]>

Author: rebeccaalpert

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx

@@ -15,11 +15,13 @@ export const BotMessageExample: FunctionComponent = () => {
   const [variant, setVariant] = useState<string>('Code');
   const [isOpen, setIsOpen] = useState(false);
   const [selected, setSelected] = useState<string>('Message content type');
+  const [isExpandable, setIsExpanded] = useState(false);
 
   /* eslint-disable indent */
   const renderContent = () => {
     switch (variant) {
       case 'Code':
+      case 'Expandable code':
         return code;
       case 'Heading':
         return heading;
@@ -166,6 +168,11 @@ _Italic text, formatted with single underscores_
     setVariant(value);
     setSelected(value as string);
     setIsOpen(false);
+    if (value === 'Expandable code') {
+      setIsExpanded(true);
+    } else {
+      setIsExpanded(false);
+    }
   };
 
   const onToggleClick = () => {
@@ -237,6 +244,7 @@ _Italic text, formatted with single underscores_
       >
         <SelectList>
           <SelectOption value="Code">Code</SelectOption>
+          <SelectOption value="Expandable code">Expandable code</SelectOption>
           <SelectOption value="Inline code">Inline code</SelectOption>
           <SelectOption value="Heading">Heading</SelectOption>
           <SelectOption value="Block quotes">Block quotes</SelectOption>
@@ -259,6 +267,7 @@ _Italic text, formatted with single underscores_
           variant === 'Table' ? { 'aria-label': 'App information and user roles for bot messages' } : undefined
         }
         error={variant === 'Error' ? error : undefined}
+        codeBlockProps={{ isExpandable, expandableSectionProps: { truncateMaxLines: isExpandable ? 1 : undefined } }}
       />
     </>
   );

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx

@@ -15,11 +15,13 @@ export const UserMessageExample: FunctionComponent = () => {
   const [isEditable, setIsEditable] = useState<boolean>(true);
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [selected, setSelected] = useState<string>('Message content type');
+  const [isExpandable, setIsExpanded] = useState(false);
 
   /* eslint-disable indent */
   const renderContent = () => {
     switch (variant) {
       case 'Code':
+      case 'Expandable code':
         return code;
       case 'Inline code':
         return inlineCode;
@@ -166,6 +168,11 @@ _Italic text, formatted with single underscores_
     setVariant(value);
     setSelected(value as string);
     setIsOpen(false);
+    if (value === 'Expandable code') {
+      setIsExpanded(true);
+    } else {
+      setIsExpanded(false);
+    }
   };
 
   const onToggleClick = () => {
@@ -215,6 +222,7 @@ _Italic text, formatted with single underscores_
       >
         <SelectList>
           <SelectOption value="Code">Code</SelectOption>
+          <SelectOption value="Expandable code">Expandable code</SelectOption>
           <SelectOption value="Inline code">Inline code</SelectOption>
           <SelectOption value="Heading">Heading</SelectOption>
           <SelectOption value="Block quotes">Block quotes</SelectOption>
@@ -241,6 +249,7 @@ _Italic text, formatted with single underscores_
         error={variant === 'Error' ? error : undefined}
         onEditUpdate={() => setIsEditable(false)}
         onEditCancel={() => setIsEditable(false)}
+        codeBlockProps={{ isExpandable, expandableSectionProps: { truncateMaxLines: isExpandable ? 1 : undefined } }}
       />
     </>
   );

packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.scss

@@ -80,3 +80,10 @@
   background-color: var(--pf-t--global--background--color--tertiary--default);
   font-size: var(--pf-t--global--font--size--body--default);
 }
+
+.pf-chatbot__message-code-toggle {
+  .pf-v6-c-button.pf-m-link {
+    --pf-v6-c-button--m-link--Color: var(--pf-t--global--color--nonstatus--blue--default);
+    --pf-v6-c-button--hover--Color: var(--pf-t--global--color--nonstatus--blue--hover);
+  }
+}

packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx

@@ -5,25 +5,68 @@ import { useState, useRef, useId, useCallback, useEffect } from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { obsidian } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 // Import PatternFly components
-import { CodeBlock, CodeBlockAction, CodeBlockCode, Button, Tooltip } from '@patternfly/react-core';
+import {
+  CodeBlock,
+  CodeBlockAction,
+  CodeBlockCode,
+  Button,
+  Tooltip,
+  ExpandableSection,
+  ExpandableSectionToggle,
+  ExpandableSectionProps,
+  ExpandableSectionToggleProps,
+  ExpandableSectionVariant
+} from '@patternfly/react-core';
 
 import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon';
-import { ExtraProps } from 'react-markdown';
+import { ExpandableSectionForSyntaxHighlighter } from './ExpandableSectionForSyntaxHighlighter';
+
+export interface CodeBlockMessageProps {
+  /** Content rendered in code block */
+  children?: React.ReactNode;
+  /** Aria label applied to code block */
+  'aria-label'?: string;
+  /** Class name applied to code block */
+  className?: string;
+  /** Whether code block is expandable */
+  isExpandable?: boolean;
+  /** 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;
+}
 
 const CodeBlockMessage = ({
   children,
   className,
   'aria-label': ariaLabel,
+  isExpandable = false,
+  expandableSectionProps,
+  expandableSectionToggleProps,
+  expandedText = 'Show less',
+  collapsedText = 'Show more',
   ...props
-}: Omit<JSX.IntrinsicElements['code'], 'ref'> & ExtraProps) => {
+}: CodeBlockMessageProps) => {
   const [copied, setCopied] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
 
-  const buttonRef = useRef(undefined);
+  const buttonRef = useRef();
   const tooltipID = useId();
+  const toggleId = useId();
+  const contentId = useId();
+  const codeBlockRef = useRef<HTMLDivElement>(null);
 
   const language = /language-(\w+)/.exec(className || '')?.[1];
 
+  const onToggle = (isExpanded) => {
+    setIsExpanded(isExpanded);
+  };
+
   // Handle clicking copy button
   const handleCopy = useCallback((event, text) => {
     navigator.clipboard.writeText(text.toString());
@@ -69,17 +112,61 @@ const CodeBlockMessage = ({
   );
 
   return (
-    <div className="pf-chatbot__message-code-block">
+    <div className="pf-chatbot__message-code-block" ref={codeBlockRef}>
       <CodeBlock actions={actions}>
         <CodeBlockCode>
-          {language ? (
-            <SyntaxHighlighter {...props} language={language} style={obsidian} PreTag="div" CodeTag="div" wrapLongLines>
-              {String(children).replace(/\n$/, '')}
-            </SyntaxHighlighter>
-          ) : (
-            <>{children}</>
-          )}
+          <>
+            {language ? (
+              // SyntaxHighlighter doesn't work with ExpandableSection because it targets the direct child
+              // Forked for now and adjusted to match what we need
+              <ExpandableSectionForSyntaxHighlighter
+                variant={ExpandableSectionVariant.truncate}
+                isExpanded={isExpanded}
+                isDetached
+                toggleId={toggleId}
+                contentId={contentId}
+                language={language}
+                {...expandableSectionProps}
+              >
+                <SyntaxHighlighter
+                  {...props}
+                  language={language}
+                  style={obsidian}
+                  PreTag="div"
+                  CodeTag="div"
+                  wrapLongLines
+                >
+                  {String(children).replace(/\n$/, '')}
+                </SyntaxHighlighter>
+              </ExpandableSectionForSyntaxHighlighter>
+            ) : (
+              <ExpandableSection
+                variant={ExpandableSectionVariant.truncate}
+                isExpanded={isExpanded}
+                isDetached
+                toggleId={toggleId}
+                contentId={contentId}
+                {...expandableSectionProps}
+              >
+                {children}
+              </ExpandableSection>
+            )}
+          </>
         </CodeBlockCode>
+        {isExpandable && (
+          <ExpandableSectionToggle
+            isExpanded={isExpanded}
+            onToggle={onToggle}
+            direction="up"
+            toggleId={toggleId}
+            contentId={contentId}
+            hasTruncatedContent
+            className="pf-chatbot__message-code-toggle"
+            {...expandableSectionToggleProps}
+          >
+            {isExpanded ? expandedText : collapsedText}
+          </ExpandableSectionToggle>
+        )}
       </CodeBlock>
     </div>
   );