Back out icon changes

Author: rebeccaalpert

README.md

@@ -30,7 +30,9 @@ Import each component from its dynamic entry point to keep bundle size minimal:
 import ChatbotToggle from '@patternfly/chatbot/dist/dynamic/ChatbotToggle';
 ```
 
-Do not import from the package root (`import { ChatbotToggle } from '@patternfly/chatbot'`).
+Named imports from the root barrel also tree-shake with modern bundlers that respect the package `sideEffects` field.
+
+`CodeModal`, `PreviewAttachment`, `AttachmentEdit`, and `tracking` are not exported from the root barrel — import them from `dist/dynamic/<Component>` instead. See `packages/module/patternfly-docs/content/extensions/chatbot/tree-shaking.md` for migration details.
 
 To verify tree-shaking in this repo:
 

packages/module/package.json

@@ -101,5 +101,10 @@
       "require": "./dist/cjs/*/index.js"
     },
     "./monaco-environment": "./monaco-environment.js"
-  }
+  },
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss",
+    "patternfly-docs/**"
+  ]
 }

packages/module/patternfly-docs/content/extensions/chatbot/tree-shaking.md

@@ -20,7 +20,12 @@ 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';
-import '@patternfly/chatbot/dist/css/main.css';
+```
+
+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:
@@ -32,40 +37,20 @@ import ChatbotHeader, {
 } 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** import from the package root:
+Do **not** use wildcard imports from the package root:
 
 ```tsx
-// Avoid — pulls in the entire component barrel
-import { ChatbotToggle } from '@patternfly/chatbot';
+// Avoid — may pull in the entire library
+import * as Chatbot from '@patternfly/chatbot';
 ```
 
-The root `index.js` re-exports every ChatBot component. Bundlers cannot eliminate unused exports from this autogenerated barrel, so your bundle will include components you never render.
-
 ## Icon imports
 
-ChatBot source code imports icons individually from deep paths so they tree-shake correctly:
-
-```tsx
-import PaperPlaneIcon from '@patternfly/react-icons/dist/esm/icons/paper-plane-icon';
-```
-
-In your own application code, follow the same pattern. Avoid importing from the `@patternfly/react-icons` barrel:
-
-```tsx
-// Avoid — may prevent icon tree-shaking
-import { PaperPlaneIcon } from '@patternfly/react-icons';
-```
-
-## PatternFly component imports
-
-When importing PatternFly components alongside ChatBot, prefer dynamic entry points:
-
-```tsx
-import { Button } from '@patternfly/react-core/dist/dynamic/Button';
-import { Stack } from '@patternfly/react-core/dist/dynamic/Stack';
-```
+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 — currently four icons in the tree-shaking demo.
 
 ## CSS import
 
@@ -86,7 +71,7 @@ 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 bundles that do not use attachment editing. Import them from dynamic entry points:
+`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';
@@ -95,9 +80,28 @@ import AttachmentEdit from '@patternfly/chatbot/dist/dynamic/AttachmentEdit';
 
 `monaco-editor` and `@monaco-editor/react` are peer dependencies when you use these components.
 
+## 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';
+```
+
 ## Verify tree-shaking in your project
 
-The repository includes a tree-shaking demo at `packages/tree-shaking-demo/` that builds three scenarios and compares bundle size, icon count, and component count:
+The repository includes a tree-shaking demo at `packages/tree-shaking-demo/` that builds four scenarios and compares bundle size, icon count, and component count:
 
 ```bash
 npm run build -w @patternfly/chatbot
@@ -106,9 +110,22 @@ npm run analyze:tree-shaking
 
 Open the generated `dist/<scenario>/stats.html` files for interactive bundle visualizations.
 
+Example results from the demo (Vite 6):
+
+| Scenario | JS size | Icons | ChatBot components |
+|----------|---------|-------|--------------------|
+| `ChatbotToggle` via `dist/dynamic` (source alias) | ~184 KB | 4 | 1 |
+| `ChatbotToggle` via root barrel (source alias) | ~184 KB | 4 | 1 |
+| `ChatbotToggle` via published package (no alias) | ~184 KB | 4 | 1 |
+| Multi-component UI (7 imports) | ~895 KB | 49 | 17 |
+
+The **published** scenario resolves `@patternfly/chatbot` through `package.json` `exports` and `dist/` with no monorepo source alias, matching how npm consumers resolve the package.
+
 ## How ChatBot supports tree-shaking
 
 - **ESM output** with a `module` field pointing to `dist/esm/`
-- **Per-component entry points** at `dist/dynamic/<Component>/`
-- **Deep icon imports** in library source code
-- **`exports`** field maps public subpaths (`dist/dynamic/*`, `dist/css/main.css`, `monaco-environment`) for bundler-friendly resolution
+- **`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)

packages/module/patternfly-docs/patternfly-docs.css.js

@@ -3,6 +3,7 @@
 // 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

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx

@@ -4,9 +4,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ChatbotConversationHistoryNav, { Conversation, ConversationGroup } from './ChatbotConversationHistoryNav';
 import { EmptyStateStatus, Spinner, MenuItem } from '@patternfly/react-core';
-import { BellIcon } from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import { OutlinedCommentsIcon } from '@patternfly/react-icons/dist/esm/icons/outlined-comments-icon';
-import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import { BellIcon, OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
 import { ComponentType, useState } from 'react';
 
 const ERROR = {

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -49,9 +49,7 @@ import {
   ExpandableSectionToggleProps
 } from '@patternfly/react-core';
 
-import { RhUiClockIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-clock-icon';
-import { RhUiCommentIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-comment-icon';
-import { RhUiEditFillIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-edit-fill-icon';
+import { RhUiClockIcon, RhUiCommentIcon, RhUiEditFillIcon } from '@patternfly/react-icons';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ConversationHistoryDropdown from './ChatbotConversationHistoryDropdown';
 import LoadingState from './LoadingState';

packages/module/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx

@@ -2,7 +2,7 @@ import type { Ref, FunctionComponent } from 'react';
 import { forwardRef } from 'react';
 
 import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
-import { RhMicronsCloseIcon } from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
+import { RhMicronsCloseIcon } from '@patternfly/react-icons';
 
 export interface ChatbotHeaderCloseButtonProps extends ButtonProps {
   /** Callback function for when button is clicked */

packages/module/src/FileDetailsLabel/FileDetailsLabel.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import FileDetailsLabel from './FileDetailsLabel';
 import userEvent from '@testing-library/user-event';
-import { BellIcon } from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import { BellIcon } from '@patternfly/react-icons';
 
 describe('FileDetailsLabel', () => {
   it('should render file details label', () => {

packages/module/src/FileDetailsLabel/FileDetailsLabel.tsx

@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
 import { Button, Label, LabelProps } from '@patternfly/react-core';
 import FileDetails from '../FileDetails';
 import { Spinner } from '@patternfly/react-core';
-import { RhMicronsCloseIcon } from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
+import { RhMicronsCloseIcon } from '@patternfly/react-icons';
 
 export interface FileDetailsLabelProps extends Omit<LabelProps, 'onClose' | 'onClick'> {
   /** Name of file, including extension */

packages/module/src/FileDropZone/FileDropZone.tsx

@@ -2,7 +2,7 @@ import { MultipleFileUpload, MultipleFileUploadMain } from '@patternfly/react-co
 import type { FunctionComponent } from 'react';
 import { useState } from 'react';
 import { ChatbotDisplayMode } from '../Chatbot';
-import { RhUiUploadIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';
+import { RhUiUploadIcon } from '@patternfly/react-icons';
 import { Accept, DropEvent, FileError, FileRejection } from 'react-dropzone';
 
 export interface FileDropZoneProps {