@patternfly/chatbot 6.8.0-prerelease.8 → 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/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/ChatbotFooter/ChatbotFooter.scss

@@ -17,8 +17,8 @@
   }
 }
 
-.pf-chatbot:not(.pf-chatnot--default) {
-  .pf-chatbot__footer {
+.pf-chatbot:not(.pf-chatbot--default) {
+  .pf-chatbot__footer:not(.pf-m-primary) {
     background-color: var(--pf-t--global--background--color--secondary--default);
 
     @at-root :where(.pf-v6-theme-glass) & {

package/src/ChatbotHeader/ChatbotHeader.scss

@@ -64,6 +64,10 @@
       background-color: var(--pf-t--global--background--color--glass--primary--default);
     }
   }
+
+  &:has(.pf-chatbot__content.pf-m-primary) .pf-chatbot__header {
+    background-color: var(--pf-t--global--background--color--primary--default);
+  }
 }
 
 // ============================================================================

package/src/ChatbotModal/ChatbotModal.scss

@@ -4,6 +4,7 @@
 
 .pf-chatbot__chatbot-modal {
   --pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--medium) !important;
+  --pf-v6-c-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
   position: fixed !important;
   inset-block-end: var(--pf-t--global--spacer--800); // no associated semantic token
   inset-inline-end: var(--pf-t--global--spacer--lg);
@@ -26,6 +27,15 @@
   }
 }
 
+:root:where(.pf-v6-theme-glass) {
+  .pf-chatbot__chatbot-modal {
+    --pf-v6-c-modal-box--BackgroundColor: var(
+      --pf-t--global--background--color--glass--primary--default,
+      var(--pf-t--global--background--color--secondary--default)
+    );
+  }
+}
+
 // ============================================================================
 // Chatbot Display Mode - Fullscreen and Embedded
 // ============================================================================

package/src/CodeModal/CodeModal.tsx

@@ -27,6 +27,12 @@ import ChatbotModal from '../ChatbotModal/ChatbotModal';
 let monacoInstance: typeof import('monaco-editor') | null = null;
 const loadMonaco = async () => {
   if (!monacoInstance) {
+    if (!globalThis.MonacoEnvironment?.getWorker && !globalThis.MonacoEnvironment?.getWorkerUrl) {
+      // eslint-disable-next-line no-console
+      console.error(
+        'Monaco web workers are not configured. Import @patternfly/chatbot/monaco-environment before using CodeModal.'
+      );
+    }
     const [monaco, { loader }] = await Promise.all([import('monaco-editor'), import('@monaco-editor/react')]);
     monacoInstance = monaco;
     loader.config({ monaco });

package/src/DeepThinking/DeepThinking.test.tsx

@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import DeepThinking from './DeepThinking';
+import { expectBoldMarkdownText } from '../test-utils/markdownTestUtils';
 
 describe('DeepThinking', () => {
   const defaultProps = {
@@ -120,11 +121,10 @@ describe('DeepThinking', () => {
     expect(screen.getByText('Thinking content')).not.toBeVisible();
   });
 
-  it('should render toggleContent as markdown when isToggleContentMarkdown is true', () => {
+  it('should render toggleContent as markdown when isToggleContentMarkdown is true', async () => {
     const toggleContent = '**Bold thinking**';
-    const { container } = render(<DeepThinking toggleContent={toggleContent} isToggleContentMarkdown />);
-    expect(container.querySelector('strong')).toBeTruthy();
-    expect(screen.getByText('Bold thinking')).toBeTruthy();
+    render(<DeepThinking toggleContent={toggleContent} isToggleContentMarkdown />);
+    await expectBoldMarkdownText('Bold thinking');
   });
 
   it('should not render toggleContent as markdown when isToggleContentMarkdown is false', () => {
@@ -134,11 +134,10 @@ describe('DeepThinking', () => {
     expect(screen.getByText('**Bold thinking**')).toBeTruthy();
   });
 
-  it('should render subheading as markdown when isSubheadingMarkdown is true', () => {
+  it('should render subheading as markdown when isSubheadingMarkdown is true', async () => {
     const subheading = '**Bold subheading**';
-    const { container } = render(<DeepThinking {...defaultProps} subheading={subheading} isSubheadingMarkdown />);
-    expect(container.querySelector('strong')).toBeTruthy();
-    expect(screen.getByText('Bold subheading')).toBeTruthy();
+    render(<DeepThinking {...defaultProps} subheading={subheading} isSubheadingMarkdown />);
+    await expectBoldMarkdownText('Bold subheading');
   });
 
   it('should not render subheading as markdown when isSubheadingMarkdown is false', () => {
@@ -147,11 +146,10 @@ describe('DeepThinking', () => {
     expect(screen.getByText('**Bold subheading**')).toBeTruthy();
   });
 
-  it('should render body as markdown when isBodyMarkdown is true', () => {
+  it('should render body as markdown when isBodyMarkdown is true', async () => {
     const body = '**Bold body**';
-    const { container } = render(<DeepThinking {...defaultProps} body={body} isBodyMarkdown />);
-    expect(container.querySelector('strong')).toBeTruthy();
-    expect(screen.getByText('Bold body')).toBeTruthy();
+    render(<DeepThinking {...defaultProps} body={body} isBodyMarkdown />);
+    await expectBoldMarkdownText('Bold body');
   });
 
   it('should not render body as markdown when isBodyMarkdown is false', () => {

package/src/MarkdownContent/MarkdownContent.test.tsx

@@ -1,7 +1,12 @@
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import MarkdownContent from './MarkdownContent';
+import MarkdownContent, {
+  MarkdownRendererReadyContext,
+  preloadMarkdownRenderer,
+  whenMarkdownRendererReady
+} from './MarkdownContent';
 import rehypeExternalLinks from '../__mocks__/rehype-external-links';
+import { expectBoldMarkdownText, warmupMarkdownRenderer } from '../test-utils/markdownTestUtils';
 
 const BOLD_TEXT = '**Bold text**';
 const ITALIC_TEXT = '*Italic text*';
@@ -33,14 +38,17 @@ const BLOCKQUOTE = '> This is a blockquote';
 const IMAGE = '![Alt text](https://example.com/image.png)';
 
 describe('MarkdownContent', () => {
+  beforeAll(async () => {
+    await warmupMarkdownRenderer();
+  });
+
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  it('should render bold text correctly', () => {
-    const { container } = render(<MarkdownContent content={BOLD_TEXT} />);
-    expect(container.querySelector('strong')).toBeTruthy();
-    expect(screen.getByText('Bold text')).toBeTruthy();
+  it('should render bold text correctly', async () => {
+    render(<MarkdownContent content={BOLD_TEXT} />);
+    await expectBoldMarkdownText('Bold text');
   });
 
   it('should render italic text correctly', () => {
@@ -205,3 +213,42 @@ const x = 5;
     expect(screen.getByRole('link', { name: /Link/i })).toBeTruthy();
   });
 });
+
+describe('preloadMarkdownRenderer', () => {
+  it('starts loading the markdown renderer', async () => {
+    preloadMarkdownRenderer();
+    const module = await whenMarkdownRendererReady();
+    expect(module.default).toBeDefined();
+  });
+});
+
+describe('whenMarkdownRendererReady', () => {
+  it('should resolve to the MarkdownRenderer module', async () => {
+    const module = await whenMarkdownRendererReady();
+    expect(module.default).toBeDefined();
+  });
+});
+
+describe('MarkdownContent with MarkdownRendererReadyContext', () => {
+  it('renders nothing while markdown is not ready inside MessageBox', () => {
+    const { container } = render(
+      <MarkdownRendererReadyContext.Provider value={false}>
+        <MarkdownContent content={BOLD_TEXT} />
+      </MarkdownRendererReadyContext.Provider>
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+});
+
+describe('MarkdownContent lazy loading', () => {
+  it('renders nothing while markdown renderer is not ready', () => {
+    const { container } = render(
+      <MarkdownRendererReadyContext.Provider value={false}>
+        <MarkdownContent content={BOLD_TEXT} />
+      </MarkdownRendererReadyContext.Provider>
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+});