feat(MessageBar): added custom attach and additional actions

packages/module/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' }}>
+        <h3 style={{ marginBottom: '0.5rem' }}>Custom attach menu with Plus icon</h3>
+        <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>
+        <h3 style={{ marginBottom: '0.5rem' }}>Custom attach menu with additional actions</h3>
+        <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>
+    </>
+  );
+};

packages/module/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 position the attach button at the start of the message bar and customize it with a different icon (like a Plus icon). Additionally, you can use the `additionalActions` prop to add custom controls such as a model selector or dismissable labels.
+
+This example shows two variations:
+
+1. A message bar with a custom attach menu using a Plus icon positioned at the start
+2. A message bar with the same attach menu plus additional actions including a model selector 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:

packages/module/src/MessageBar/MessageBar.scss

@@ -66,6 +66,19 @@
     padding-block-start: var(--pf-t--global--spacer--xs);
     padding-block-end: var(--pf-t--global--spacer--xs);
     gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
+
+    &.pf-m-grouped {
+      flex-basis: 100%;
+      justify-content: space-between;
+    }
+  }
+
+  &-actions-group {
+    display: flex;
+    padding-block-start: var(--pf-t--global--spacer--xs);
+    padding-block-end: var(--pf-t--global--spacer--xs);
+    gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
+    align-items: center;
   }
 
   &-input {
@@ -150,7 +163,8 @@
 }
 
 .pf-m-compact {
-  .pf-chatbot__message-bar-actions {
+  .pf-chatbot__message-bar-actions,
+  .pf-chatbot__message-bar-actions-group {
     padding-block-start: var(--pf-t--global--spacer--sm);
     padding-block-end: var(--pf-t--global--spacer--sm);
   }

packages/module/src/MessageBar/MessageBar.test.tsx

@@ -488,4 +488,31 @@ describe('Message bar', () => {
 
     expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar')).toHaveClass('pf-v6-m-thinking');
   });
+
+  it('Renders with flex-basis of auto by default', () => {
+    render(<MessageBar onSendMessage={jest.fn} />);
+
+    expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute(
+      'style',
+      'flex-basis: auto;'
+    );
+  });
+
+  it('Renders with flex-basis of 100% when forceMultilineLayout is true', () => {
+    render(<MessageBar forceMultilineLayout onSendMessage={jest.fn} />);
+
+    expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute(
+      'style',
+      'flex-basis: 100%;'
+    );
+  });
+
+  it('Renders with flex-basis of 100% when additionalActions is truthy', () => {
+    render(<MessageBar additionalActions="actions" onSendMessage={jest.fn} />);
+
+    expect(screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute(
+      'style',
+      'flex-basis: 100%;'
+    );
+  });
 });