@patternfly/chatbot 6.8.0-prerelease.7 → 6.8.0-prerelease.9

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

@@ -48,7 +48,7 @@ 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 { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/dynamic/Message';
 import SourcesCard from '@patternfly/chatbot/dist/dynamic/SourcesCard';
 import { RhUiArrowCircleDownFillIcon, RhUiArrowRightIcon, RhUiCheckCircleFillIcon, RhUiCopyFillIcon, RhUiExportIcon, RhMicronsInformationFillIcon, OutlinedQuestionCircleIcon, RhUiRedoIcon, RhUiBuildFillIcon, RhUiQuestionMarkCircleIcon } from '@patternfly/react-icons';
 import patternflyAvatar from './patternfly_avatar.jpg';
@@ -59,7 +59,7 @@ import FileDropZone from '@patternfly/chatbot/dist/dynamic/FileDropZone';
 import { PreviewAttachment } from '@patternfly/chatbot/dist/dynamic/PreviewAttachment';
 import ChatbotAlert from '@patternfly/chatbot/dist/dynamic/ChatbotAlert';
 import { explorePipelinesQuickStart } from './explore-pipeline-quickstart.ts';
-import { monitorSampleAppQuickStart } from '@patternfly/chatbot/src/Message/QuickStarts/monitor-sampleapp-quickstart.ts';
+import { monitorSampleAppQuickStart } from './monitor-sampleapp-quickstart.ts';
 import userAvatar from './user_avatar.svg';
 import squareImg from './PF-social-color-square.svg';
 import { CSSProperties, useState, Fragment, FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent, Ref, isValidElement, cloneElement, Children, ReactNode, useRef, useEffect } from 'react';

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

@@ -19,7 +19,7 @@ import {
   SelectList,
   SelectOption
 } from '@patternfly/react-core';
-import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle';
+import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/dynamic/Message';
 
 export const UserMessageExample: FunctionComponent = () => {
   const messageInputRef = useRef<HTMLTextAreaElement>(null);

package/patternfly-docs/content/extensions/chatbot/examples/Messages/monitor-sampleapp-quickstart.ts

@@ -0,0 +1 @@
+export { monitorSampleAppQuickStart } from '../../../../../../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts';

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

@@ -0,0 +1,104 @@
+import { useState, FunctionComponent } from 'react';
+import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotConversationHistoryNav, {
+  Conversation,
+  ConversationGroup
+} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
+import { Checkbox } from '@patternfly/react-core';
+
+const pinnedChats: Conversation[] = [
+  {
+    id: '1',
+    text: 'Red Hat products and services'
+  }
+];
+
+const recentChats: Conversation[] = [
+  {
+    id: '2',
+    text: 'Enterprise Linux installation and setup'
+  },
+  {
+    id: '3',
+    text: 'Troubleshoot system crash'
+  },
+  {
+    id: '4',
+    text: 'Ansible security and updates'
+  },
+  {
+    id: '5',
+    text: 'Red Hat certification'
+  },
+  {
+    id: '6',
+    text: 'Lightspeed user documentation'
+  }
+];
+
+const savedPrompts: Conversation[] = [
+  {
+    id: '7',
+    text: 'Summarize this document'
+  },
+  {
+    id: '8',
+    text: 'Draft a release announcement'
+  }
+];
+
+const VISIBLE_CHAT_COUNT = 3;
+
+export const ChatbotHeaderDrawerWithExpandableGroupsDemo: FunctionComponent = () => {
+  const [isOpen, setIsOpen] = useState(true);
+  const [isSavedPromptsExpanded, setIsSavedPromptsExpanded] = useState(false);
+  const [isShowingAllChats, setIsShowingAllChats] = useState(false);
+
+  const conversations: ConversationGroup[] = [
+    {
+      id: 'pinned',
+      label: 'Pinned chats',
+      items: pinnedChats
+    },
+    {
+      id: 'chats',
+      label: 'Chats',
+      items: recentChats,
+      showAll: {
+        visibleCount: VISIBLE_CHAT_COUNT,
+        isExpanded: isShowingAllChats,
+        onToggle: setIsShowingAllChats,
+        label: isShowingAllChats ? 'Show less' : 'Show all'
+      }
+    },
+    {
+      id: 'saved-prompts',
+      label: 'Saved prompts',
+      expandable: {
+        isExpanded: isSavedPromptsExpanded,
+        onToggle: setIsSavedPromptsExpanded
+      },
+      items: savedPrompts
+    }
+  ];
+
+  return (
+    <>
+      <Checkbox
+        label="Display drawer"
+        isChecked={isOpen}
+        onChange={() => setIsOpen(!isOpen)}
+        id="expandable-groups-drawer-visible"
+        name="expandable-groups-drawer-visible"
+      />
+      <ChatbotConversationHistoryNav
+        displayMode={ChatbotDisplayMode.embedded}
+        onDrawerToggle={() => setIsOpen(!isOpen)}
+        isDrawerOpen={isOpen}
+        setIsDrawerOpen={setIsOpen}
+        conversations={conversations}
+        drawerContent={<div>Drawer content</div>}
+      />
+    </>
+  );
+};

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

@@ -35,7 +35,8 @@ propComponents:
     'MessageBarWithAttachMenuProps',
     'SourceDetailsMenuItem',
     'ChatbotConversationHistoryNav',
-    'Conversation'
+    'Conversation',
+    'ConversationGroup'
   ]
 sortValue: 2
 ---
@@ -401,6 +402,16 @@ To help users track important conversations, add a "pin" option to the conversat
 
 ```
 
+### Grouped and expandable conversation history
+
+For grouped chat history, pass a `ConversationGroup[]` to describe each section's label, items, and behavior. Each group's `items` array accepts `Conversation` objects or custom menu content such as a **Show all** action. Use `expandable` on a group to make that section expandable, and `footer` for content rendered after the group's menu list.
+
+The object form `{ [groupLabel: string]: Conversation[] }` remains supported as shorthand for simple static groups.
+
+```js file="./ChatbotHeaderDrawerWithExpandableGroups.tsx"
+
+```
+
 ### Renaming conversations in chat history drawer
 
 You can allow users to rename a conversation in the chat history drawer by implementing a modal that opens upon clicking a "Rename" (or similar) action. When doing so, you must ensure the following:

package/patternfly-docs/content/extensions/chatbot/tree-shaking.md

@@ -0,0 +1,124 @@
+---
+id: Tree-shaking
+title: Tree-shaking
+section: extensions
+subsection: ChatBot
+sortValue: 80
+source: TreeShaking
+---
+
+**Note:** The PatternFly ChatBot extension lives in its own package [`@patternfly/chatbot`](https://www.npmjs.com/package/@patternfly/chatbot).
+
+When you add ChatBot to your application, you want the bundler to include only the components you actually use — not the entire library or every PatternFly icon. ChatBot is designed to support tree-shaking when imported correctly.
+
+---
+
+## Recommended import pattern
+
+Import each component from its dynamic entry point:
+
+```tsx
+import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
+import ChatbotHeader from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
+```
+
+Named imports from the root barrel also tree-shake with modern bundlers:
+
+```tsx
+import { ChatbotToggle } from '@patternfly/chatbot';
+```
+
+Sub-components can be imported from the same entry point:
+
+```tsx
+import ChatbotHeader, {
+  ChatbotHeaderMenu,
+  ChatbotHeaderMain,
+} from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
+```
+
+Per-component `dist/dynamic` imports are preferred for faster builds and for components excluded from the root barrel (`CodeModal`, `PreviewAttachment`, `AttachmentEdit`).
+
+## What to avoid
+
+Do **not** use wildcard imports from the package root:
+
+```tsx
+// Avoid — may pull in the entire library
+import * as Chatbot from '@patternfly/chatbot';
+```
+
+## Icon imports
+
+Which PatternFly icons end up in your bundle depends on **which ChatBot components you import**, not on whether ChatBot source code or your app uses barrel or deep icon paths. Importing `ChatbotToggle` via `dist/dynamic` includes only the icons that component uses.
+
+## CSS import
+
+ChatBot styles are side-effectful and must be imported explicitly:
+
+```tsx
+import '@patternfly/chatbot/dist/css/main.css';
+```
+
+Place this import after your PatternFly CSS imports so ChatBot overrides apply correctly.
+
+## Monaco editor (`CodeModal`, attachment preview and edit)
+
+`CodeModal` (used by `PreviewAttachment` and `AttachmentEdit`) lazy-loads Monaco. Web workers must be configured before the modal opens. Import the package worker helper once at application startup:
+
+```tsx
+import '@patternfly/chatbot/monaco-environment';
+import PreviewAttachment from '@patternfly/chatbot/dist/dynamic/PreviewAttachment';
+```
+
+`CodeModal`, `PreviewAttachment`, and `AttachmentEdit` are excluded from the root barrel so Monaco stays out of root-barrel bundles. Import them from dynamic entry points:
+
+```tsx
+import PreviewAttachment from '@patternfly/chatbot/dist/dynamic/PreviewAttachment';
+import AttachmentEdit from '@patternfly/chatbot/dist/dynamic/AttachmentEdit';
+```
+
+`monaco-editor` and `@monaco-editor/react` are peer dependencies when you use these components.
+
+## Markdown rendering (`Message`, `MarkdownContent`)
+
+`MarkdownContent` lazy-loads its markdown parser so lightweight imports avoid pulling in `react-markdown`, syntax highlighting, and related dependencies until they are needed. That async chunk is roughly 400 KB.
+
+`MessageBox` automatically preloads the markdown renderer and coordinates rendering so existing messages do not each flash an individual loading state — message chrome (avatars, timestamps, and so on) appears immediately, and markdown content fills in once the chunk is ready.
+
+For chatbots that display messages on first render, you can call `preloadMarkdownRenderer()` earlier in your application — such as in your app's entry point or route loader — so the chunk is already loaded by the time the chatbot mounts:
+
+```tsx
+// App.tsx or route loader — call once at startup
+import { preloadMarkdownRenderer } from '@patternfly/chatbot/dist/dynamic/MarkdownContent';
+
+preloadMarkdownRenderer();
+```
+
+## Migration: root barrel changes
+
+The following modules are **not** re-exported from the root barrel (`@patternfly/chatbot`). They were removed so Monaco and internal utilities stay out of default bundles. Update existing root imports to subpath entry points:
+
+| Module | Before (no longer works) | After |
+|--------|--------------------------|-------|
+| `CodeModal` | `import { CodeModal } from '@patternfly/chatbot'` | `import CodeModal from '@patternfly/chatbot/dist/dynamic/CodeModal'` |
+| `PreviewAttachment` | `import { PreviewAttachment } from '@patternfly/chatbot'` | `import PreviewAttachment from '@patternfly/chatbot/dist/dynamic/PreviewAttachment'` |
+| `AttachmentEdit` | `import { AttachmentEdit } from '@patternfly/chatbot'` | `import AttachmentEdit from '@patternfly/chatbot/dist/dynamic/AttachmentEdit'` |
+| `tracking` | `import { getTrackingProviders } from '@patternfly/chatbot'` | `import { getTrackingProviders } from '@patternfly/chatbot/dist/dynamic/tracking'` |
+
+All other components remain available from the root barrel and continue to tree-shake when your bundler respects the package `sideEffects` field.
+
+When using `CodeModal`, `PreviewAttachment`, or `AttachmentEdit`, also import the Monaco worker helper once at application startup:
+
+```tsx
+import '@patternfly/chatbot/monaco-environment';
+```
+
+## How ChatBot supports tree-shaking
+
+- **ESM output** with a `module` field pointing to `dist/esm/`
+- **`sideEffects`** in `package.json` so bundlers can drop unused re-exports from the root barrel while preserving CSS and the documentation-site style entry (`patternfly-docs/**`)
+- **Per-component dynamic entry points** at `dist/dynamic/<Component>/`
+- **Unbundled compilation** — icons and dependencies remain as external imports for your bundler to resolve
+- **`exports`** field maps public subpaths for bundler-friendly resolution
+- **Explicit CSS imports** (see above)

package/patternfly-docs/monaco-environment.js

@@ -0,0 +1,45 @@
+/* global globalThis */
+// Docs-site worker setup for rspack/webpack. Paths target hoisted monaco-editor in the
+// workspace root (../../../node_modules/...). npm consumers should import
+// @patternfly/chatbot/monaco-environment instead (../../monaco-editor/... layout).
+// Each branch must use inline new Worker(new URL(...)) so rspack emits worker chunks.
+const workerOptions = { type: 'module' };
+
+if (typeof globalThis !== 'undefined' && !globalThis.MonacoEnvironment?.getWorker) {
+  globalThis.MonacoEnvironment = {
+    getWorker(_workerId, label) {
+      switch (label) {
+        case 'json':
+          return new Worker(
+            new URL('../../../node_modules/monaco-editor/esm/vs/language/json/json.worker.js', import.meta.url),
+            workerOptions
+          );
+        case 'css':
+        case 'scss':
+        case 'less':
+          return new Worker(
+            new URL('../../../node_modules/monaco-editor/esm/vs/language/css/css.worker.js', import.meta.url),
+            workerOptions
+          );
+        case 'html':
+        case 'handlebars':
+        case 'razor':
+          return new Worker(
+            new URL('../../../node_modules/monaco-editor/esm/vs/language/html/html.worker.js', import.meta.url),
+            workerOptions
+          );
+        case 'typescript':
+        case 'javascript':
+          return new Worker(
+            new URL('../../../node_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js', import.meta.url),
+            workerOptions
+          );
+        default:
+          return new Worker(
+            new URL('../../../node_modules/monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url),
+            workerOptions
+          );
+      }
+    }
+  };
+}

package/patternfly-docs/patternfly-docs.css.js

@@ -1,4 +1,10 @@
 // Patternfly
+// Monaco workers for CodeModal attachment examples — load before any editor opens.
+// The docs framework aliases this file as the global client entry (client-styles), so
+// side-effect imports belong here even though the filename suggests CSS only.
+// Uses patternfly-docs/monaco-environment.js (monorepo node_modules paths), not the package export.
+// This file must stay side-effectful — see package.json "sideEffects" ("patternfly-docs/**").
+import './monaco-environment.js';
 import '@patternfly/patternfly/patternfly.css';
 // Patternfly utilities
 import '@patternfly/patternfly/patternfly-addons.css';

package/src/Chatbot/Chatbot.scss

@@ -48,6 +48,10 @@
       var(--pf-t--global--background--color--secondary--default)
     );
   }
+
+  &:not(&--default):has(.pf-chatbot__content.pf-m-primary) {
+    background-color: var(--pf-t--global--background--color--primary--default);
+  }
 }
 
 :root:where(.pf-v6-theme-felt):not(.pf-v6-theme-glass) {

package/src/ChatbotContent/ChatbotContent.scss

@@ -19,7 +19,7 @@
 }
 
 .pf-chatbot:not(.pf-chatbot--default) {
-  .pf-chatbot__content {
+  .pf-chatbot__content:not(.pf-m-primary) {
     background-color: var(
       --pf-t--global--background--color--glass--primary--default,
       var(--pf-t--global--background--color--secondary--default)

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss

@@ -60,12 +60,8 @@
     --pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--md);
   }
 
-  .pf-chatbot__menu-item-header > .pf-v6-c-menu__group-title {
-    color: var(--pf-t--global--text--color--subtle);
-    font-weight: var(--pf-t--global--font--weight--body--bold);
-    font-size: var(--pf-t--global--icon--size--font--sm);
-    --pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--sm);
-    --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  .pf-chatbot__menu-item-header > .pf-v6-c-menu__group-title,
+  .pf-chatbot__menu-item-header--expandable .pf-chatbot__menu-group-toggle {
     position: -webkit-sticky;
     position: sticky;
     top: 0;
@@ -73,6 +69,46 @@
     z-index: var(--pf-t--global--z-index--md);
   }
 
+  .pf-chatbot__menu-item-header > .pf-v6-c-menu__group-title,
+  .pf-chatbot__menu-item-header--expandable .pf-chatbot__menu-group-toggle > .pf-v6-c-expandable-section__toggle {
+    color: var(--pf-t--global--text--color--subtle);
+    font-weight: var(--pf-t--global--font--weight--body--bold);
+    font-size: var(--pf-t--global--icon--size--font--sm);
+  }
+
+  .pf-chatbot__menu-group-toggle {
+    padding-block-start: var(--pf-t--global--spacer--xs);
+    padding-block-end: var(--pf-t--global--spacer--xs);
+  }
+
+  .pf-chatbot__menu-item-header > .pf-v6-c-menu__group-title {
+    --pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+    --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  }
+
+  .pf-chatbot__menu-item-header--expandable .pf-chatbot__menu-group-toggle {
+    width: 100%;
+
+    .pf-v6-c-expandable-section__toggle {
+      margin: 0;
+    }
+
+    .pf-v6-c-button.pf-m-link {
+      --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--small);
+      --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+      --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+      color: inherit;
+      font-weight: inherit;
+      font-size: inherit;
+      justify-content: flex-start;
+      width: 100%;
+    }
+
+    .pf-v6-c-expandable-section__toggle-icon {
+      color: var(--pf-t--global--text--color--subtle);
+    }
+  }
+
   .pf-chatbot__menu-item {
     --pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--sm);
     --pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -86,6 +122,16 @@
     border-radius: var(--pf-t--global--border--radius--small);
   }
 
+  // "Show all" / "Show less" toggle
+  // Rendered as a regular MenuItem positioned after the (conditionally rendered)
+  // overflow items, so it participates in the menu's normal roving tabindex and
+  // arrow-key navigation, and stays in a fixed position at the bottom of the list.
+  .pf-chatbot__menu-show-all-toggle {
+    color: var(--pf-t--global--text--color--link--default);
+    font-size: var(--pf-t--global--font--size--body--default);
+    font-weight: var(--pf-t--global--font--weight--body--default);
+  }
+
   li.pf-chatbot__menu-item:hover::after {
     position: absolute;
     inset: 0;