@patternfly/chatbot 6.5.0-prerelease.27 → 6.5.0-prerelease.29

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithCustomStructure.tsx

@@ -0,0 +1,102 @@
+import { FunctionComponent } from 'react';
+import Message, {
+  ErrorMessage,
+  MessageAndActions,
+  MessageAttachmentItem,
+  MessageAttachmentsContainer,
+  MessageLoading
+} from '@patternfly/chatbot/dist/dynamic/Message';
+import MarkdownContent from '@patternfly/chatbot/dist/dynamic/MarkdownContent';
+import ToolCall from '@patternfly/chatbot/dist/dynamic/ToolCall';
+import ToolResponse from '@patternfly/chatbot/dist/dynamic/ToolResponse';
+import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel';
+import ResponseActions, { ResponseActionsGroups } from '@patternfly/chatbot/dist/dynamic/ResponseActions';
+import patternflyAvatar from './patternfly_avatar.jpg';
+import userAvatar from './user_avatar.svg';
+
+const handlePositiveResponse = () => {
+  // Handle positive response
+};
+
+const handleNegativeResponse = () => {
+  // Handle negative response
+};
+
+const handleCopy = () => {
+  // Handle copy action
+};
+
+const handleDownload = () => {
+  // Handle download action
+};
+
+const handleListen = () => {
+  // Handle listen action
+};
+
+export const MessageWithCustomStructure: FunctionComponent = () => (
+  <>
+    <Message name="Bot" role="bot" avatar={patternflyAvatar}>
+      <MessageAndActions>
+        <MarkdownContent
+          content={`This is a basic message with a more custom, fine-tuned structure. You can pass markdown to the MarkdownContent component, such as **bold content with double asterisks** or _italic content with single underscores_.`}
+        />
+        <ToolCall titleText="Calling 'awesome_tool'" loadingText="Loading 'awesome_tool'" isLoading={true} />
+        <ToolResponse
+          toggleContent="Tool response: fetch_user_data"
+          subheading="Executed in 0.3 seconds"
+          body="Successfully retrieved user data from the database."
+          cardTitle="User Data Response"
+          cardBody="The tool returned 150 user records matching the specified criteria."
+        />
+        <ErrorMessage title="An issue placed within this custom structure." />
+        <MarkdownContent
+          isMarkdownDisabled
+          textComponent={`You can also pass plain text without markdown to the MarkdownContent component by passing the isMarkdownDisabled prop. Optionally, you can also use the textComponent prop instead of content.`}
+        />
+        <ToolCall titleText="Calling 'more_awesome_tool'" loadingText="Loading 'more_awesome_tool'" isLoading={true} />
+        <ToolCall titleText="Calling 'even_more_awesome_tool'" loadingText="Loading 'even_more_awesome_tool'" />
+        <MarkdownContent content={`You can even place a message loading state in the middle of a message:`} />
+        <MessageLoading loadingWord="Loading something in the middle of a custom structured message" />
+        <ResponseActionsGroups>
+          <ResponseActions
+            actions={{
+              positive: { onClick: handlePositiveResponse, ariaLabel: 'Good response' },
+              negative: { onClick: handleNegativeResponse, ariaLabel: 'Bad response' }
+            }}
+            persistActionSelection={true}
+          />
+          <ResponseActions
+            actions={{
+              copy: { onClick: handleCopy, ariaLabel: 'Copy' },
+              download: { onClick: handleDownload, ariaLabel: 'Download' }
+            }}
+            persistActionSelection={false}
+          />
+          <ResponseActions
+            actions={{
+              listen: { onClick: handleListen, ariaLabel: 'Listen' }
+            }}
+            persistActionSelection={true}
+          />
+        </ResponseActionsGroups>
+      </MessageAndActions>
+    </Message>
+    <Message name="User" role="user" avatar={userAvatar}>
+      <MessageAndActions>
+        <MarkdownContent content="This message is in the MessageAndActions container, and the file attachments below are in their own separate MessageAttachmentsContainer!" />
+      </MessageAndActions>
+      <MessageAttachmentsContainer>
+        <MessageAttachmentItem>
+          <FileDetailsLabel fileName="project-report.pdf" />
+        </MessageAttachmentItem>
+        <MessageAttachmentItem>
+          <FileDetailsLabel fileName="data-analysis.csv" />
+        </MessageAttachmentItem>
+        <MessageAttachmentItem>
+          <FileDetailsLabel fileName="presentation-slides.pptx" />
+        </MessageAttachmentItem>
+      </MessageAttachmentsContainer>
+    </Message>
+  </>
+);

package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md

@@ -14,24 +14,40 @@ propComponents:
   [
     'AttachMenu',
     'AttachmentEdit',
-    'FileDetailsProps',
-    'FileDetailsLabelProps',
     'FileDropZone',
-    'PreviewAttachment',
     'Message',
-    'MessageExtraContent',
-    'PreviewAttachment',
+    'ErrorMessage',
+    'MessageLoadingProps',
+    'MessageInputProps',
+    'MessageAndActionsProps',
+    'MarkdownContent',
+    'QuickResponseProps',
+    'QuickStartTileProps',
+    'UserFeedback',
+    'UserFeedbackComplete',
+    'DeepThinking',
+    'ToolCall',
+    'ToolResponse',
+    'SourcesCard',
+    'ResponseActionsGroupsProps',
+    'ResponseActionProps',
     'ActionProps',
-    'SourcesCardProps',
-    'UserFeedbackProps',
-    'UserFeedbackCompleteProps',
-    'QuickResponseProps'
+    'MessageAttachmentsContainerProps',
+    'MessageAttachmentItemProps',
+    'FileDetailsProps',
+    'FileDetailsLabelProps',
+    'MessageExtraContent',
+    'PreviewAttachment'
   ]
 sortValue: 3
 ---
 
-import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import Message, { ErrorMessage, MessageAndActions, MessageLoading, MessageAttachmentItem, MessageAttachmentsContainer } from '@patternfly/chatbot/dist/dynamic/Message';
+import MarkdownContent from '@patternfly/chatbot/dist/dynamic/MarkdownContent';
 import MessageDivider from '@patternfly/chatbot/dist/dynamic/MessageDivider';
+import ToolCall from '@patternfly/chatbot/dist/dynamic/ToolCall';
+import ResponseActions, { ResponseActionsGroups } from '@patternfly/chatbot/dist/dynamic/ResponseActions';
+import ToolResponse from '@patternfly/chatbot/dist/dynamic/ToolResponse';
 import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle';
 import SourcesCard from '@patternfly/chatbot/dist/dynamic/SourcesCard';
 import { ArrowCircleDownIcon, ArrowRightIcon, CheckCircleIcon, CopyIcon, CubeIcon, CubesIcon, DownloadIcon, InfoCircleIcon, OutlinedQuestionCircleIcon, RedoIcon, RobotIcon, WrenchIcon } from '@patternfly/react-icons';
@@ -271,6 +287,35 @@ You can add custom content to specific parts of a `<Message>` via the `extraCont
 
 ```
 
+### Custom message structure
+
+For more advanced use cases, you can build completely custom message structures by passing children directly to `<Message>`. This approach is useful when you need to customize the order or structure of message elements beyond what the standard props allow.
+
+When creating custom message structures, you must follow an intended composable structure.
+
+1. **Message content and actions:** Wrap in `<MessageAndActions>`. This includes, but is not limited to:
+
+   - `<MarkdownContent>`: For rendering markdown or plain text content
+   - `<ErrorMessage>`
+   - `<MessageLoading>`
+   - `<MessageInput>`
+   - `<ToolCall>`
+   - `<ToolResponse>`
+   - `<DeepThinking>`
+   - `<QuickResponse>`
+   - `<QuickStartTile>`
+   - `<UserFeedback>` and `<UserFeedbackComplete>`
+   - `<SourcesCard>`
+   - `<ResponseActionsGroups>` and `<ResponseActions>`
+
+2. **File attachments:** Placed outside `<MessageAndActions>` and wrapped in attachment containers:
+   - `<MessageAttachmentsContainer>`: Container for all attachments
+   - `<MessageAttachmentItem>`: Individual attachment wrapper (contains `<FileDetailsLabel>` or other attachment components)
+
+```ts file="./MessageWithCustomStructure.tsx"
+
+```
+
 ## File attachments
 
 ### Messages with attachments

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotMessageBarCustomActions.tsx

@@ -0,0 +1,190 @@
+import { useState, FunctionComponent, ReactNode } from 'react';
+import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
+import {
+  Divider,
+  DropdownItem,
+  DropdownList,
+  Label,
+  MenuToggle,
+  Select,
+  SelectList,
+  SelectOption
+} from '@patternfly/react-core';
+import { PlusIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
+import { useDropzone } from 'react-dropzone';
+
+export const ChatbotMessageBarCustomActionsExample: FunctionComponent = () => {
+  const [isFirstMenuOpen, setIsFirstMenuOpen] = useState<boolean>(false);
+  const [isSecondMenuOpen, setIsSecondMenuOpen] = useState<boolean>(false);
+  const [isModelSelectOpen, setIsModelSelectOpen] = useState<boolean>(false);
+  const [selectedModel, setSelectedModel] = useState<string>('GPT-4');
+  const [showCanvasLabel, setShowCanvasLabel] = useState<boolean>(true);
+
+  const handleSend = (message: string | number) => alert(message);
+
+  const { open, getInputProps } = useDropzone({
+    multiple: true,
+    // eslint-disable-next-line no-console
+    onDropAccepted: () => console.log('fileUploaded')
+  });
+
+  const onFirstMenuToggle = () => {
+    setIsFirstMenuOpen(!isFirstMenuOpen);
+  };
+
+  const onSecondMenuToggle = () => {
+    setIsSecondMenuOpen(!isSecondMenuOpen);
+  };
+
+  const onModelSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined
+  ) => {
+    setSelectedModel(value as string);
+    setIsModelSelectOpen(false);
+  };
+
+  const firstMenuItems: ReactNode = (
+    <DropdownList>
+      <DropdownItem value="Logs" id="logs" icon={<ClipboardIcon />}>
+        Logs
+      </DropdownItem>
+      <DropdownItem value="YAML - Status" id="yaml-status" icon={<CodeIcon />}>
+        YAML - Status
+      </DropdownItem>
+      <DropdownItem value="YAML - All contents" id="yaml-all" icon={<CodeIcon />}>
+        YAML - All contents
+      </DropdownItem>
+      <Divider key="divider" />
+      <DropdownItem value="Upload from computer" id="upload" icon={<UploadIcon />} onClick={open}>
+        Upload from computer
+      </DropdownItem>
+    </DropdownList>
+  );
+
+  const secondMenuItems: ReactNode = (
+    <DropdownList>
+      <DropdownItem value="canvas" id="canvas">
+        {showCanvasLabel ? 'Disable' : 'Enable'} Canvas
+      </DropdownItem>
+      <Divider key="divider-1" />
+      <DropdownItem value="Logs" id="logs" icon={<ClipboardIcon />}>
+        Logs
+      </DropdownItem>
+      <DropdownItem value="YAML - Status" id="yaml-status" icon={<CodeIcon />}>
+        YAML - Status
+      </DropdownItem>
+      <DropdownItem value="YAML - All contents" id="yaml-all" icon={<CodeIcon />}>
+        YAML - All contents
+      </DropdownItem>
+      <Divider key="divider-2" />
+      <DropdownItem value="Upload from computer" id="upload" icon={<UploadIcon />} onClick={open}>
+        Upload from computer
+      </DropdownItem>
+    </DropdownList>
+  );
+
+  const modelOptions = ['GPT-4', 'GPT-3.5', 'Claude', 'Llama 2'];
+
+  return (
+    <>
+      {/* This is required for react-dropzone to work in Safari and Firefox */}
+      <input {...getInputProps()} hidden />
+      <div style={{ marginBottom: '1rem' }}>
+        <h4 style={{ marginBottom: '0.5rem' }}>Custom attach menu with a PlusIcon at the start</h4>
+        <MessageBar
+          onSendMessage={handleSend}
+          attachButtonPosition="start"
+          attachMenuProps={{
+            isAttachMenuOpen: isFirstMenuOpen,
+            setIsAttachMenuOpen: setIsFirstMenuOpen,
+            attachMenuItems: firstMenuItems,
+            onAttachMenuSelect: (_ev, value) => {
+              // eslint-disable-next-line no-console
+              console.log('selected', value);
+              setIsFirstMenuOpen(false);
+            },
+            attachMenuInputPlaceholder: 'Search options...',
+            onAttachMenuToggleClick: onFirstMenuToggle,
+            onAttachMenuOnOpenChangeKeys: ['Escape', 'Tab']
+          }}
+          buttonProps={{
+            attach: {
+              icon: <PlusIcon />,
+              tooltipContent: 'Message actions',
+              'aria-label': 'Message actions'
+            }
+          }}
+        />
+      </div>
+
+      <div>
+        <h4 style={{ marginBottom: '0.5rem' }}>Custom attach menu with additional actions</h4>
+        <MessageBar
+          onSendMessage={handleSend}
+          attachButtonPosition="start"
+          attachMenuProps={{
+            isAttachMenuOpen: isSecondMenuOpen,
+            setIsAttachMenuOpen: setIsSecondMenuOpen,
+            attachMenuItems: secondMenuItems,
+            onAttachMenuOnOpenChangeKeys: ['Escape', 'Tab'],
+            onAttachMenuSelect: (_ev, value) => {
+              // eslint-disable-next-line no-console
+              console.log('selected', value);
+              if (value === 'canvas') {
+                setShowCanvasLabel(!showCanvasLabel);
+              }
+              setIsSecondMenuOpen(false);
+            },
+            onAttachMenuToggleClick: onSecondMenuToggle
+          }}
+          buttonProps={{
+            attach: {
+              icon: <PlusIcon />,
+              tooltipContent: 'Message actions',
+              'aria-label': 'Message actions'
+            }
+          }}
+          additionalActions={
+            <>
+              <Select
+                isOpen={isModelSelectOpen}
+                selected={selectedModel}
+                shouldFocusToggleOnSelect
+                onSelect={onModelSelect}
+                onOpenChange={(isOpen) => setIsModelSelectOpen(isOpen)}
+                toggle={(toggleRef) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    variant="plainText"
+                    onClick={() => setIsModelSelectOpen(!isModelSelectOpen)}
+                    isExpanded={isModelSelectOpen}
+                    aria-label={`${selectedModel}, Select a model`}
+                    style={{
+                      minWidth: '120px'
+                    }}
+                  >
+                    {selectedModel}
+                  </MenuToggle>
+                )}
+              >
+                <SelectList>
+                  {modelOptions.map((option) => (
+                    <SelectOption key={option} value={option}>
+                      {option}
+                    </SelectOption>
+                  ))}
+                </SelectList>
+              </Select>
+              {showCanvasLabel && (
+                <Label closeBtnAriaLabel="Remove Canvas mode" onClose={() => setShowCanvasLabel(false)}>
+                  Canvas
+                </Label>
+              )}
+            </>
+          }
+        />
+      </div>
+    </>
+  );
+};

package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

@@ -70,11 +70,11 @@ import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
 import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetailsMenuItem';
 import { ChatbotModal } from '@patternfly/chatbot/dist/dynamic/ChatbotModal';
 import SettingsForm from '@patternfly/chatbot/dist/dynamic/Settings';
-import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, ThumbtackIcon, UploadIcon } from '@patternfly/react-icons';
+import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, PlusIcon, ThumbtackIcon, UploadIcon } from '@patternfly/react-icons';
 import { useDropzone } from 'react-dropzone';
 
 import ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
-import { Button, DropdownItem, DropdownList, Checkbox, MenuToggle, Select, SelectList, SelectOption } from '@patternfly/react-core';
+import { Button, Label, DropdownItem, DropdownList, Checkbox, MenuToggle, Select, SelectList, SelectOption } from '@patternfly/react-core';
 
 import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
 import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
@@ -291,6 +291,19 @@ Attachments can also be added to the ChatBot via [drag and drop.](/extensions/ch
 
 ```
 
+### Message bar with custom attach menu and additional actions
+
+You can move the attach button to the start of the message bar and customize it with a different icon. To include additional actions in the message bar you can also use the `additionalActions` prop.
+
+This example shows two message bar variations:
+
+1. A message bar with a custom attach menu where a `PlusIcon` is positioned at the start
+2. The same custom attach menu with additional actions, including a model selector menu and a dismissable "Canvas" label
+
+```js file="./ChatbotMessageBarCustomActions.tsx"
+
+```
+
 ### Footer with message bar and footnote
 
 A simple footer with a message bar and footnote would have this code structure:

package/src/MarkdownContent/MarkdownContent.tsx

@@ -30,10 +30,15 @@ import SuperscriptMessage from '../Message/SuperscriptMessage/SuperscriptMessage
 import { ButtonProps } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 
+/**
+ * MarkdownContent renders content either as plain text or with content with markdown support.
+ *
+ * Use this component when passing children to Message to customize its structure.
+ */
 export interface MarkdownContentProps {
-  /** The markdown content to render */
+  /** The content to render. Supports markdown formatting by default, or plain text when isMarkdownDisabled is true. */
   content?: string;
-  /** Disables markdown parsing, allowing only text input */
+  /** Disables markdown parsing, allowing only plain text input */
   isMarkdownDisabled?: boolean;
   /** Props for code blocks */
   codeBlockProps?: CodeBlockMessageProps;

package/src/Message/ErrorMessage/ErrorMessage.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ErrorMessage from './ErrorMessage';
+
+test('Renders with title', () => {
+  render(<ErrorMessage title="Error occurred" />);
+
+  expect(screen.getByText('Error occurred')).toBeVisible();
+});
+
+test('Renders with children', () => {
+  render(<ErrorMessage title="Error occurred">This is the error message body</ErrorMessage>);
+
+  expect(screen.getByText('This is the error message body')).toBeVisible();
+});
+
+test('Renders with action links', () => {
+  const actionLinks = (
+    <a href="#retry" data-testid="retry-link">
+      Retry action link
+    </a>
+  );
+  render(<ErrorMessage title="Error occurred" actionLinks={actionLinks} />);
+
+  expect(screen.getByText('Retry action link')).toBeVisible();
+});
+
+test('Renders with custom className', () => {
+  render(<ErrorMessage title="Error occurred" className="custom-error-class" />);
+
+  expect(screen.getByText('Error occurred').parentElement).toHaveClass('custom-error-class');
+});
+
+test('Renders with spread props', () => {
+  render(<ErrorMessage title="Error occurred" id="test-error-id" />);
+
+  expect(screen.getByText('Error occurred').parentElement).toHaveAttribute('id', 'test-error-id');
+});

package/src/Message/ErrorMessage/ErrorMessage.tsx

@@ -4,8 +4,23 @@
 
 import { Alert, AlertProps } from '@patternfly/react-core';
 
-const ErrorMessage = ({ title, actionLinks, children, ...props }: AlertProps) => (
-  <Alert isInline variant="danger" title={title} actionLinks={actionLinks} {...props}>
+/**
+ * ErrorMessage displays an inline danger alert for error states in messages.
+ * Use this component when passing children to Message to display error information.
+ */
+export interface ErrorMessageProps extends Partial<AlertProps> {
+  /** Content to display in the error alert body */
+  children?: React.ReactNode;
+  /** Additional classes for the error alert */
+  className?: string;
+  /** Title of the error alert */
+  title?: React.ReactNode;
+  /** Action links to display in the alert footer */
+  actionLinks?: React.ReactNode;
+}
+
+export const ErrorMessage = ({ title, actionLinks, children, className, ...props }: ErrorMessageProps) => (
+  <Alert isInline variant="danger" title={title} actionLinks={actionLinks} className={className} {...props}>
     {children}
   </Alert>
 );

package/src/Message/Message.tsx

@@ -67,6 +67,8 @@ export interface MessageExtraContent {
 }
 
 export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
+  /** Children to render instead of the default message structure, allowing more fine-tuned message control. When provided, this will override the default rendering of content, toolResponse, deepThinking, toolCall, sources, quickStarts, actions, etc. */
+  children?: ReactNode;
   /** Unique id for message */
   id?: string;
   /** Role of the user sending the message */
@@ -193,6 +195,7 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
 }
 
 export const MessageBase: FunctionComponent<MessageProps> = ({
+  children,
   role,
   content,
   extraContent,
@@ -341,74 +344,82 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
           <Timestamp date={date}>{timestamp}</Timestamp>
         </div>
         <div className="pf-chatbot__message-response">
-          <div className="pf-chatbot__message-and-actions">
-            {renderMessage()}
-            {afterMainContent && <>{afterMainContent}</>}
-            {toolResponse && <ToolResponse {...toolResponse} />}
-            {deepThinking && <DeepThinking {...deepThinking} />}
-            {toolCall && <ToolCall {...toolCall} />}
-            {!isLoading && sources && <SourcesCard {...sources} isCompact={isCompact} />}
-            {quickStarts && quickStarts.quickStart && (
-              <QuickStartTile
-                quickStart={quickStarts.quickStart}
-                onSelectQuickStart={quickStarts.onSelectQuickStart}
-                minuteWord={quickStarts.minuteWord}
-                minuteWordPlural={quickStarts.minuteWordPlural}
-                prerequisiteWord={quickStarts.prerequisiteWord}
-                prerequisiteWordPlural={quickStarts.prerequisiteWordPlural}
-                quickStartButtonAriaLabel={quickStarts.quickStartButtonAriaLabel}
-                isCompact={isCompact}
-              />
-            )}
-            {!isLoading && !isEditable && actions && (
-              <>
-                {Array.isArray(actions) ? (
-                  <div className="pf-chatbot__response-actions-groups">
-                    {actions.map((actionGroup, index) => (
-                      <ResponseActions
-                        key={index}
-                        actions={actionGroup.actions || actionGroup}
-                        persistActionSelection={persistActionSelection || actionGroup.persistActionSelection}
-                      />
-                    ))}
-                  </div>
-                ) : (
-                  <ResponseActions actions={actions} persistActionSelection={persistActionSelection} />
+          {children ? (
+            <>{children}</>
+          ) : (
+            <>
+              <div className="pf-chatbot__message-and-actions">
+                {renderMessage()}
+                {afterMainContent && <>{afterMainContent}</>}
+                {toolResponse && <ToolResponse {...toolResponse} />}
+                {deepThinking && <DeepThinking {...deepThinking} />}
+                {toolCall && <ToolCall {...toolCall} />}
+                {!isLoading && sources && <SourcesCard {...sources} isCompact={isCompact} />}
+                {quickStarts && quickStarts.quickStart && (
+                  <QuickStartTile
+                    quickStart={quickStarts.quickStart}
+                    onSelectQuickStart={quickStarts.onSelectQuickStart}
+                    minuteWord={quickStarts.minuteWord}
+                    minuteWordPlural={quickStarts.minuteWordPlural}
+                    prerequisiteWord={quickStarts.prerequisiteWord}
+                    prerequisiteWordPlural={quickStarts.prerequisiteWordPlural}
+                    quickStartButtonAriaLabel={quickStarts.quickStartButtonAriaLabel}
+                    isCompact={isCompact}
+                  />
+                )}
+                {!isLoading && !isEditable && actions && (
+                  <>
+                    {Array.isArray(actions) ? (
+                      <div className="pf-chatbot__response-actions-groups">
+                        {actions.map((actionGroup, index) => (
+                          <ResponseActions
+                            key={index}
+                            actions={actionGroup.actions || actionGroup}
+                            persistActionSelection={persistActionSelection || actionGroup.persistActionSelection}
+                          />
+                        ))}
+                      </div>
+                    ) : (
+                      <ResponseActions actions={actions} persistActionSelection={persistActionSelection} />
+                    )}
+                  </>
+                )}
+                {userFeedbackForm && (
+                  <UserFeedback {...userFeedbackForm} timestamp={dateString} isCompact={isCompact} />
                 )}
-              </>
-            )}
-            {userFeedbackForm && <UserFeedback {...userFeedbackForm} timestamp={dateString} isCompact={isCompact} />}
-            {userFeedbackComplete && (
-              <UserFeedbackComplete {...userFeedbackComplete} timestamp={dateString} isCompact={isCompact} />
-            )}
-            {!isLoading && quickResponses && (
-              <QuickResponse
-                quickResponses={quickResponses}
-                quickResponseContainerProps={quickResponseContainerProps}
-                isCompact={isCompact}
-              />
-            )}
-          </div>
-          {attachments && (
-            <div className="pf-chatbot__message-attachments-container">
-              {attachments.map((attachment) => (
-                <div key={attachment.id ?? attachment.name} className="pf-chatbot__message-attachment">
-                  <FileDetailsLabel
-                    fileName={attachment.name}
-                    fileId={attachment.id}
-                    onClose={attachment.onClose}
-                    onClick={attachment.onClick}
-                    isLoading={attachment.isLoading}
-                    closeButtonAriaLabel={attachment.closeButtonAriaLabel}
-                    languageTestId={attachment.languageTestId}
-                    spinnerTestId={attachment.spinnerTestId}
-                    variant={isPrimary ? 'outline' : undefined}
+                {userFeedbackComplete && (
+                  <UserFeedbackComplete {...userFeedbackComplete} timestamp={dateString} isCompact={isCompact} />
+                )}
+                {!isLoading && quickResponses && (
+                  <QuickResponse
+                    quickResponses={quickResponses}
+                    quickResponseContainerProps={quickResponseContainerProps}
+                    isCompact={isCompact}
                   />
+                )}
+              </div>
+              {attachments && (
+                <div className="pf-chatbot__message-attachments-container">
+                  {attachments.map((attachment) => (
+                    <div key={attachment.id ?? attachment.name} className="pf-chatbot__message-attachment">
+                      <FileDetailsLabel
+                        fileName={attachment.name}
+                        fileId={attachment.id}
+                        onClose={attachment.onClose}
+                        onClick={attachment.onClick}
+                        isLoading={attachment.isLoading}
+                        closeButtonAriaLabel={attachment.closeButtonAriaLabel}
+                        languageTestId={attachment.languageTestId}
+                        spinnerTestId={attachment.spinnerTestId}
+                        variant={isPrimary ? 'outline' : undefined}
+                      />
+                    </div>
+                  ))}
                 </div>
-              ))}
-            </div>
+              )}
+              {!isLoading && endContent && <>{endContent}</>}
+            </>
           )}
-          {!isLoading && endContent && <>{endContent}</>}
         </div>
       </div>
     </section>