fix(AttachMenu): Update styles and fix bug

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotAttachment/AttachMenu.tsx

@@ -1,17 +1,36 @@
 import React from 'react';
 import AttachMenu from '@patternfly/virtual-assistant/dist/dynamic/AttachMenu';
+import SourceDetailsMenuItem from '@patternfly/virtual-assistant/dist/dynamic/SourceDetailsMenuItem';
 import { Button, Divider, DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
 import { BellIcon, CodeIcon, ClipboardIcon, CalendarAltIcon, UploadIcon } from '@patternfly/react-icons';
 import PaperclipIcon from './PaperclipIcon';
-import AttachmentIcon from './AttachmentIcon';
 
 const initialMenuItems = [
  <DropdownList key="list-1">
- <DropdownItem value="auth-operator Pod" id="0" icon={<img src={AttachmentIcon} alt="Pod icon" />}>
- <div className="pf-chatbot__menu-operator">
- auth-operator
- <div className="pf-v6-c-menu__item-description">Pod</div>
- </div>
+ <DropdownItem className="pf-chatbot-source-details-dropdown-item" value="auth-operator Pod" id="0">
+ <SourceDetailsMenuItem
+ icon={
+ <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M0 12.5C0 5.87258 5.37258 0.5 12 0.5C18.6274 0.5 24 5.87258 24 12.5C24 19.1274 18.6274 24.5 12 24.5C5.37258 24.5 0 19.1274 0 12.5Z"
+ fill="currentColor"
+ />
+ <g clipPath="url(#clip0_3280_27488)">
+ <path
+ d="M8.25 8.75C8.25 7.92266 8.92266 7.25 9.75 7.25H12C14.0719 7.25 15.75 8.92812 15.75 11C15.75 13.0719 14.0719 14.75 12 14.75H9.75V17C9.75 17.4148 9.41484 17.75 9 17.75C8.58516 17.75 8.25 17.4148 8.25 17V14V8.75ZM9.75 13.25H12C13.2422 13.25 14.25 12.2422 14.25 11C14.25 9.75781 13.2422 8.75 12 8.75H9.75V13.25Z"
+ fill="white"
+ />
+ </g>
+ <defs>
+ <clipPath id="clip0_3280_27488">
+ <rect width="7.5" height="12" fill="white" transform="translate(8.25 6.5)" />
+ </clipPath>
+ </defs>
+ </svg>
+ }
+ name="auth-operator"
+ type="Pod"
+ />
  </DropdownItem>
  </DropdownList>,
  <DropdownGroup key="group2">
@@ -60,7 +79,7 @@ export const AttachmentMenuExample: React.FunctionComponent = () => {
  if (React.isValidElement(element)) {
  // Check if the element's value matches the targetValue
  if (element.props.value && element.props.value.toLowerCase().includes(targetValue.toLowerCase())) {
- matchingElements.push(element);
+ matchingElements.push(React.cloneElement(element, { key: element.props.value }));
  }
 
  // Recursively check the element's children
@@ -86,8 +105,11 @@ export const AttachmentMenuExample: React.FunctionComponent = () => {
  setUserFacingMenuItems(
  <>
  <DropdownList>
- {newMenuItems.map((item) => item)}
- {newMenuItems.length === 0 && <DropdownItem key="no-items">No results found</DropdownItem>}
+ {newMenuItems.length === 0 ? (
+ <DropdownItem key="no-items">No results found</DropdownItem>
+ ) : (
+ newMenuItems.map((item) => item)
+ )}
  </DropdownList>
  {uploadMenuItems.map((item) => item)}
  </>

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/ChatbotAttachment/ChatbotAttachment.md

@@ -10,15 +10,7 @@ id: Chatbot attachment
 source: react
 # If you use typescript, the name of the interface to display props for
 # These are found through the sourceProps function provided in patternfly-docs.source.js
-propComponents:
- [
- 'AttachMenu',
- 'AttachmentEdit',
- 'FileDetails',
- 'FileDetailsLabel',
- 'FileDropZone',
- 'PreviewAttachment'
- ]
+propComponents: ['AttachMenu', 'AttachmentEdit', 'FileDetails', 'FileDetailsLabel', 'FileDropZone', 'PreviewAttachment']
 ---
 
 import AttachmentEdit from '@patternfly/virtual-assistant/dist/dynamic/AttachmentEdit';
@@ -27,10 +19,10 @@ import FileDetails from '@patternfly/virtual-assistant/dist/dynamic/FileDetails'
 import FileDetailsLabel from '@patternfly/virtual-assistant/dist/dynamic/FileDetailsLabel';
 import FileDropZone from '@patternfly/virtual-assistant/dist/dynamic/FileDropZone';
 import { PreviewAttachment } from '@patternfly/virtual-assistant/dist/dynamic/PreviewAttachment';
+import SourceDetailsMenuItem from '@patternfly/virtual-assistant/dist/dynamic/SourceDetailsMenuItem';
 
 import { BellIcon, UploadIcon, CodeIcon, ClipboardIcon, CalendarAltIcon } from '@patternfly/react-icons';
 import PaperclipIcon from './PaperclipIcon.svg';
-import AttachmentIcon from './AttachmentIcon.svg';
 
 ### Attach menu for appending to attach icon
 
@@ -52,7 +44,7 @@ import AttachmentIcon from './AttachmentIcon.svg';
 
 ### Details of file attached to chat conversation
 
-The file extension on the upladed file is reflected in the text below the file name.
+The file extension on the uploaded file is reflected in the text below the file name.
 
 ```js file="./FileDetails.tsx"
 

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/demos/AttachmentDemos.md

@@ -23,8 +23,8 @@ import FileDropZone from '@patternfly/virtual-assistant/dist/dynamic/FileDropZon
 import FileDetailsLabel from '@patternfly/virtual-assistant/dist/dynamic/FileDetailsLabel';
 import PreviewAttachment from '@patternfly/virtual-assistant/dist/dynamic/PreviewAttachment';
 import AttachmentEdit from '@patternfly/virtual-assistant/dist/dynamic/AttachmentEdit';
+import SourceDetailsMenuItem from '@patternfly/virtual-assistant/dist/dynamic/SourceDetailsMenuItem';
 import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
-import AttachmentIcon from './AttachmentIcon.svg';
 import { useDropzone } from 'react-dropzone';
 
 # Demos

packages/module/patternfly-docs/content/extensions/virtual-assistant/examples/demos/ChatbotAttachmentMenu.tsx

@@ -8,6 +8,7 @@ import MessageBar from '@patternfly/virtual-assistant/dist/dynamic/MessageBar';
 import MessageBox from '@patternfly/virtual-assistant/dist/dynamic/MessageBox';
 import Message, { MessageProps } from '@patternfly/virtual-assistant/dist/dynamic/Message';
 import FileDropZone from '@patternfly/virtual-assistant/dist/dynamic/FileDropZone';
+import SourceDetailsMenuItem from '@patternfly/virtual-assistant/dist/dynamic/SourceDetailsMenuItem';
 import {
  Alert,
  AlertActionCloseButton,
@@ -19,16 +20,34 @@ import {
 } from '@patternfly/react-core';
 import FileDetailsLabel from '@patternfly/virtual-assistant/dist/dynamic/FileDetailsLabel';
 import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
-import AttachmentIcon from './AttachmentIcon.svg';
 import { useDropzone } from 'react-dropzone';
 
 const initialMenuItems = [
  <DropdownList key="list-1">
- <DropdownItem value="auth-operator Pod" id="0" icon={<img src={AttachmentIcon} alt="Pod icon" />}>
- <div className="pf-chatbot__menu-operator">
- auth-operator
- <div className="pf-v6-c-menu__item-description">Pod</div>
- </div>
+ <DropdownItem value="auth-operator Pod" id="0" className="pf-chatbot-source-details-dropdown-item">
+ <SourceDetailsMenuItem
+ icon={
+ <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M0 12.5C0 5.87258 5.37258 0.5 12 0.5C18.6274 0.5 24 5.87258 24 12.5C24 19.1274 18.6274 24.5 12 24.5C5.37258 24.5 0 19.1274 0 12.5Z"
+ fill="currentColor"
+ />
+ <g clipPath="url(#clip0_3280_27488)">
+ <path
+ d="M8.25 8.75C8.25 7.92266 8.92266 7.25 9.75 7.25H12C14.0719 7.25 15.75 8.92812 15.75 11C15.75 13.0719 14.0719 14.75 12 14.75H9.75V17C9.75 17.4148 9.41484 17.75 9 17.75C8.58516 17.75 8.25 17.4148 8.25 17V14V8.75ZM9.75 13.25H12C13.2422 13.25 14.25 12.2422 14.25 11C14.25 9.75781 13.2422 8.75 12 8.75H9.75V13.25Z"
+ fill="white"
+ />
+ </g>
+ <defs>
+ <clipPath id="clip0_3280_27488">
+ <rect width="7.5" height="12" fill="white" transform="translate(8.25 6.5)" />
+ </clipPath>
+ </defs>
+ </svg>
+ }
+ name="auth-operator"
+ type="Pod"
+ />
  </DropdownItem>
  </DropdownList>,
  <DropdownGroup key="group2">
@@ -219,7 +238,7 @@ export const BasicDemo: React.FunctionComponent = () => {
  if (React.isValidElement(element)) {
  // Check if the element's value matches the targetValue
  if (element.props.value && element.props.value.toLowerCase().includes(targetValue.toLowerCase())) {
- matchingElements.push(element);
+ matchingElements.push(React.cloneElement(element, { key: element.props.value }));
  }
 
  // Recursively check the element's children
@@ -245,8 +264,11 @@ export const BasicDemo: React.FunctionComponent = () => {
  setUserFacingMenuItems(
  <>
  <DropdownList>
- {newMenuItems.map((item) => item)}
- {newMenuItems.length === 0 && <DropdownItem key="no-items">No results found</DropdownItem>}
+ {newMenuItems.length === 0 ? (
+ <DropdownItem key="no-items">No results found</DropdownItem>
+ ) : (
+ newMenuItems.map((item) => item)
+ )}
  </DropdownList>
  {uploadMenuItems.map((item) => item)}
  </>

packages/module/src/AttachMenu/AttachMenu.scss

@@ -1,5 +1,6 @@
 .pf-chatbot__menu.pf-v6-c-menu {
  --pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--large);
+ --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
 }
 
 .pf-chatbot__menu {
@@ -18,7 +19,7 @@
  /* there is spacing between groups because of this normally, even if there's no title */
  .pf-v6-c-menu__group-title {
  height: 0;
- --pf-v6-c-menu__group-title--PaddingBlockStart: 0;
+ --pf-v6-c-menu__group-title--PaddingBlockStart: var(--pf-t--global--spacer--sm);
  --pf-v6-c-menu__group-title--PaddingBlockEnd: 0;
  --pf-v6-c-menu__group-title--PaddingInlineStart: 0;
  --pf-v6-c-menu__group-title--PaddingInlineEnd: 0;
@@ -40,28 +41,22 @@
  overflow: hidden;
  }
 
+ .pf-v6-c-menu__item {
+ padding-inline-start: var(--pf-t--global--spacer--md);
+ padding-inline-end: var(--pf-t--global--spacer--md);
+ }
+
  .pf-v6-c-menu__item-icon {
- --pf-v6-c-menu__item--icon--Color: #707070;
  display: flex;
  justify-content: center;
- width: 24px;
+ width: 21px;
  }
 
  .pf-v6-c-menu__item-description {
  font-weight: 500;
  }
-}
 
-.pf-v6-theme-dark {
- .pf-chatbot__menu.pf-v6-c-menu {
- --pf-v6-c-menu--Color: #f2f2f2;
- --pf-v6-c-menu--BackgroundColor: #383838;
- --pf-v6-c-menu__list-item--hover--BackgroundColor: #1f1f1f;
- }
- .pf-v6-c-menu__item-icon {
- --pf-v6-c-menu__item--icon--Color: #c7c7c7;
- }
- .pf-chatbot__menu-operator {
- color: #fff;
+ .pf-v6-c-divider {
+ padding: 0 var(--pf-t--global--spacer--md) 0 var(--pf-t--global--spacer--md);
  }
 }

packages/module/src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss

@@ -0,0 +1,33 @@
+.pf-chatbot__source-details-subhead {
+ color: var(--pf-t--global--text--color--subtle);
+ font-size: var(--pf-t--global--icon--size--font--xs);
+ font-weight: 500;
+}
+
+.pf-chatbot__source-details-heading {
+ font-size: var(--pf-t--global--font--size--body--default);
+ word-wrap: break-word;
+}
+
+.pf-chatbot__source-details-icon {
+ width: 100%;
+}
+
+// this is only used in demo code
+.pf-chatbot__source-details-icon > .pf-v6-c-icon__content > svg {
+ width: 24px;
+ color: var(--pf-t--global--icon--color--status--custom--default);
+}
+.pf-chatbot-source-details-dropdown-item:hover {
+ .pf-chatbot__source-details-icon > .pf-v6-c-icon__content > svg {
+ color: var(--pf-t--global--icon--color--status--custom--hover);
+ }
+}
+
+.pf-chatbot__source-details {
+ flex-direction: row;
+}
+
+.pf-chatbot__source-details-text {
+ max-width: 20rem;
+}

packages/module/src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx

@@ -0,0 +1,31 @@
+import React, { PropsWithChildren } from 'react';
+import { Icon, Flex, Stack, StackItem } from '@patternfly/react-core';
+
+interface SourceDetailsMenuItemProps {
+ /** Icon */
+ icon: React.ReactNode;
+ /** Name of source */
+ name: string;
+ /** Description of source */
+ type?: string;
+}
+
+export const SourceDetailsMenuItem = ({ icon, name, type }: PropsWithChildren<SourceDetailsMenuItemProps>) => (
+ <Flex className="pf-chatbot__source-details" gap={{ default: 'gapSm' }}>
+ <Flex
+ justifyContent={{ default: 'justifyContentCenter' }}
+ alignItems={{ default: 'alignItemsCenter' }}
+ alignSelf={{ default: 'alignSelfCenter' }}
+ >
+ <Icon className="pf-chatbot__source-details-icon">{icon}</Icon>
+ </Flex>
+ <Stack className="pf-chatbot__source-details-text">
+ <StackItem>
+ <span className="pf-chatbot__source-details-heading">{name}</span>
+ </StackItem>
+ {type && <StackItem className="pf-chatbot__source-details-subhead">{type}</StackItem>}
+ </Stack>
+ </Flex>
+);
+
+export default SourceDetailsMenuItem;

packages/module/src/SourceDetailsMenuItem/index.ts

@@ -0,0 +1,2 @@
+export { default } from './SourceDetailsMenuItem';
+export * from './SourceDetailsMenuItem';

packages/module/src/index.ts

@@ -60,6 +60,9 @@ export * from './MessageBox';
 export { default as PreviewAttachment } from './PreviewAttachment';
 export * from './PreviewAttachment';
 
+export { default as SourceDetailsMenuItem } from './SourceDetailsMenuItem';
+export * from './SourceDetailsMenuItem';
+
 export { default as SystemMessageEntry } from './SystemMessageEntry';
 export * from './SystemMessageEntry';
 

packages/module/src/main.scss

@@ -14,19 +14,20 @@
 @import './MessageBox/MessageBox';
 @import './Message/Message';
 @import './ChatbotPopover/ChatbotPopover';
+@import './SourceDetailsMenuItem/SourceDetailsMenuItem';
 
 :where(:root) {
  // ============================================================================
  // Chatbot Custom Default Tokens
  // ============================================================================
 
  --pf-t--chatbot--heading--font-family: var(
-  --pf-v6-c-content--heading--FontFamily,
-  redhatdisplayvf,
-  redhatdisplay,
-  helvetica,
-  arial,
-  sans-serif
+ --pf-v6-c-content--heading--FontFamily,
+ redhatdisplayvf,
+ redhatdisplay,
+ helvetica,
+ arial,
+ sans-serif
  );
 
  --pf-t--chatbot--illustration--fill: var(--pf-t--color--red--50);
@@ -36,9 +37,14 @@
 
  --pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--70);
 
- --pf-t--chatbot--timing-function: cubic-bezier(0.77,0,0.175,1);
+ --pf-t--chatbot--timing-function: cubic-bezier(0.77, 0, 0.175, 1);
 
- --pf-t--chatbot--blue-icon--background--color--hover: rgba(185, 218, 252, .25); // --pf-t--global--color--nonstatus--blue--default @ 25%
+ --pf-t--chatbot--blue-icon--background--color--hover: rgba(
+ 185,
+ 218,
+ 252,
+ 0.25
+ ); // --pf-t--global--color--nonstatus--blue--default @ 25%
  --pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--color--brand--hover);
 
  // ============================================================================
@@ -69,7 +75,6 @@
 
  --pf-t--chatbot--blue-icon--background--color--hover: var(--pf-t--global--color--brand--hover);
  --pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--icon--color--inverse);
-
 }
 
 .ws-full-page-utils {
@@ -84,4 +89,3 @@
 .pf-v6-c-backdrop {
  position: static;
 }
-