feat: add version history pattern demo by kaylachumley · Pull Request #939 · patternfly/chatbot

kaylachumley · 2026-11-02T15:23:21Z

Description

Adds a Version History pattern demo to support canvas mode.

Layout

Split-screen

Chatbot and canvas sit side by side by default. Open version history from the Version history split button in the canvas header (next to close)—use the main button or Show full history in the menu. The chatbot hides and the screen splits into a read-only code preview on the left and version history on the right. Close with the X to return to chatbot + canvas.

Features

Version list with names, timestamps, and AI/user attribution
Per-version actions: rename, restore, and duplicate
Split-button menu: show full history, restore latest version, name current version, save current version
Confirmation modal before restore
Read-only preview with copy and download when history is open
Save control on the editable code editor toolbar

Checklist

Split-screen demo (VersionHistorySplitScreen.tsx)
Split-screen v1 demo (VersionHistorySplitScreenV1.tsx)
Documentation (VersionHistory.md)
CSS styles (VersionHistory.css)

Preview

https://chatbot-pr-chatbot-939.surge.sh/patterns/version-history/demo/fullscreen-version-history/

https://chatbot-pr-chatbot-939.surge.sh

This adds a new Version History demo showcasing three layout options for displaying version history in canvas mode: - Option 1: Full overlay - version history replaces canvas panel - Option 2: Split-screen - canvas (left) + version history (right) side-by-side - Option 3: Floating panel - 75% overlay with floating background Features include: - Version list with timestamps and AI/user attribution - Rename, restore, and duplicate version actions - Confirmation modal for restore operations - Read-only preview mode in split-screen layout Co-authored-by: Cursor <cursoragent@cursor.com>

patternfly-build · 2026-11-02T15:27:06Z

Preview: https://chatbot-pr-chatbot-939.surge.sh

A11y report: https://chatbot-pr-chatbot-939-a11y.surge.sh

Co-authored-by: Cursor <cursoragent@cursor.com>

- VersionHistoryOverlay: Full overlay that replaces the canvas panel - VersionHistorySplitScreen: Side-by-side canvas preview and version list - VersionHistoryFloating: 75% floating panel over the canvas Each demo is now self-contained and can be viewed independently without the need for a toggle switch. Co-authored-by: Cursor <cursoragent@cursor.com>

The VersionHistory.css import from example TSX files was not bundled by the docs framework, so the panel collapsed and hid the version list. Import the CSS from patternfly-docs.css.js and make the overlay panel fill the canvas drawer height. Co-authored-by: Cursor <cursoragent@cursor.com>

Restores the X close control in the panel header so users can dismiss version history and reopen it from the code editor toolbar. Co-authored-by: Cursor <cursoragent@cursor.com>

Remove the full overlay version history demo so the PR focuses on the two preferred layout options. Co-authored-by: Cursor <cursoragent@cursor.com>

Place the history icon button in the canvas panel header instead of the code editor toolbar. Co-authored-by: Cursor <cursoragent@cursor.com>

Restore the fullscreen chatbot + canvas default view, place the version history trigger in the canvas header, and show the split-screen layout only while version history is open. Update docs and PR description to remove the full overlay option. Co-authored-by: Cursor <cursoragent@cursor.com>

Keep the default chatbot + canvas view identical to the local prototype. Only relocate the version history trigger from the code editor toolbar into the canvas header DrawerActions next to close. Co-authored-by: Cursor <cursoragent@cursor.com>

Keep only the split-screen demo and related documentation. Co-authored-by: Cursor <cursoragent@cursor.com>

Preserve the previous icon-button trigger as SplitScreenV1. Replace the header control with a MenuToggle split action labeled Version history, including a dropdown of upcoming actions. Co-authored-by: Cursor <cursoragent@cursor.com>

Complete restore/name/save flows, restore editor toolbar actions, use default split MenuToggle styling with md spacer, and fix DataList clickable row selection/hover. Co-authored-by: Cursor <cursoragent@cursor.com>

Add missing MenuToggleAction/RhUiSaveIcon docs imports so the Surge demo no longer throws, and fix eslint/prettier issues in both demos. Co-authored-by: Cursor <cursoragent@cursor.com>

Scope the drawer actions gap to the canvas head so it applies in the default canvas panel, not only the split preview layout. Co-authored-by: Cursor <cursoragent@cursor.com>

Co-authored-by: Cursor <cursoragent@cursor.com>

andrew-ronaldson · 2026-11-05T22:00:34Z

This may get resolved with engineer input but noticed the code editor and chatbot both have some responsive issues where it adds a horizontal scroll bar

rebeccaalpert

I'm writing these comments largely for myself so I know what to adjust, so I am not writing them as nicely as I would for other people!

There's a few things I'd want to change, but overall nice job!

We lose focus when we use dropdown items - focus goes to main container
When we save current version, second option is still highlighted even when new first option appears
Input is rather small on mobile:

Need to rename CSS classes to match existing name format.

rebeccaalpert · 2026-11-05T21:44:01Z

+
+### Fullscreen version history
+
+This demo shows a read-only code preview (canvas view) on the left and version history list on the right, utilizing a split-screen layout. Open the version history with the split menu toggle in the canvas panel header (next to close)—click the main button or **Show full history** in the dropdown. The chatbot panel is automatically hidden when the version history toggle is triggered. Close the version history with the X icon button to return to the chatbot and canvas.


Suggested change

This demo shows a read-only code preview (canvas view) on the left and version history list on the right, utilizing a split-screen layout. Open the version history with the split menu toggle in the canvas panel header (next to close)—click the main button or **Show full history** in the dropdown. The chatbot panel is automatically hidden when the version history toggle is triggered. Close the version history with the X icon button to return to the chatbot and canvas.

This demo uses a split-screen layout to show a read-only code preview (canvas view) and version history list.

Sometimes the order will reverse in Hebrew, etc.

rebeccaalpert · 2026-11-05T21:44:42Z

+
+## Class names
+
+This demo reuses the [canvas](/patterns/canvas) `pf-chatbot__canvas*` classes from `@patternfly/chatbot` for the canvas and editor chrome. The classes below are defined in this demo's stylesheet (`VersionHistory.css`) and are used for the version history panel and split-screen layout. They are not exported from `@patternfly/chatbot`.


They are not exported from @patternfly/chatbot.

We can export them - I think we export the Canvas classes.

rebeccaalpert · 2026-11-05T21:49:02Z

@@ -0,0 +1,102 @@
+/* Version History Panel Styles */


If you tuck VersionHistory.css in a new folder at the path chatbot/packages/module/src/VersionHistory and then add it to this file the way Canvas is, we can export the classes like the other canvas ones. You should then be able to drop the change in patternfly-docs.css.js.

rebeccaalpert · 2026-11-05T21:55:21Z

+import '@patternfly/react-core/dist/styles/base.css';
+import '@patternfly/react-styles/css/components/InlineEdit/inline-edit.css';
+import '@patternfly/chatbot/dist/css/main.css';
+import './VersionHistory.css';


Should be able to drop with other CSS changes.

rebeccaalpert · 2026-11-05T21:55:27Z

+import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
+import userAvatar from '../Messages/user_avatar.svg';
+import '@patternfly/react-core/dist/styles/base.css';
+import '@patternfly/react-styles/css/components/InlineEdit/inline-edit.css';


Why is this here? 🤔 Research this.

rebeccaalpert · 2026-11-06T14:43:47Z

+        </ModalFooter>
+      </Modal>
+
+      <input {...getInputProps()} hidden />


Check to make sure this is in ok spot

rebeccaalpert · 2026-11-06T14:47:02Z

+  border-block-start: none;
+}
+
+/* Option 2: Split-screen layout styles */


Remove comment

rebeccaalpert · 2026-11-06T14:47:59Z

+  justify-content: space-between;
+  padding: var(--pf-t--global--spacer--md);
+  padding-top: var(--pf-t--global--spacer--lg);
+  padding-bottom: var(--pf-t--global--spacer--md);


Want to switch padding-top/bottom to padding-block-start, etc.

rebeccaalpert · 2026-11-06T14:48:25Z

+}
+
+.version-history-split-panel {
+  width: 400px;


Hard-coded width - check to make sure this looks ok on breakpoints.

rebeccaalpert · 2026-11-06T14:49:37Z

+
+.version-history-split-panel {
+  width: 400px;
+  flex-shrink: 0;


Removing this seems to fix iPhone SE issue

thatblindgeye · 2026-11-06T15:02:25Z

+                    <MenuToggleAction
+                      id="version-history-split-action"
+                      key="version-history-action"
+                      aria-label="Version history"


We shouldn't be adding an aria-label since there's visible text content to give this button an accessible name

Suggested change

aria-label="Version history"

thatblindgeye · 2026-11-06T15:03:43Z

+                      <Flex
+                        spaceItems={{ default: 'spaceItemsSm' }}
+                        alignItems={{ default: 'alignItemsCenter' }}
+                        flexWrap={{ default: 'nowrap' }}
+                      >
+                        <FlexItem>
+                          <RhUiHistoryIcon aria-hidden />
+                        </FlexItem>
+                        <FlexItem>Version history</FlexItem>
+                      </Flex>


Using the Flex layout in this button renders invalid markup (div elements inside the button). We could replace this with CSS instead and just render the icon and text content on their own (or inside span elements), then just apply some custom classes to target inside a CSS file.

thatblindgeye · 2026-11-06T15:11:45Z

+                      onClick={(event) => {
+                        event.stopPropagation();
+                        setIsVersionHistoryMenuOpen(false);
+                        openVersionHistory();
+                      }}


When clicking this "Version history" action, focus gets lost when the new view appears. Pressing the Tab key focuses the first CodeEditory action, but before that focus isn't visible. We could shift focus to the heading on the new view (would require giving the heading a tabindex of -1)

thatblindgeye · 2026-11-06T15:16:26Z

+            <Button type="submit" variant="plain" aria-label="Save edits" icon={<CheckIcon />} />
+          </div>
+          <div className="pf-v6-c-inline-edit__action">
+            <Button
+              type="button"
+              variant="plain"
+              aria-label="Cancel edits"
+              icon={<TimesIcon />}
+              onClick={handleCancelCanvasTitle}


Similar issue as above, focus gets lost when clicking the save or cancel edit buttons. Focus should go back to the MenuToggle that originally opened the list of actions that contained the edit trigger.

thatblindgeye · 2026-11-06T15:21:44Z

+                <Label
+                  isClickable
+                  variant="outline"
+                  icon={<RhUiAiInfoIcon aria-hidden />}
+                  role="button"
+                  tabIndex={0}
+                  aria-expanded={isGeneratedAiPopoverOpen}
+                  onKeyDown={handleGeneratedAiLabelKeyDown}
+                >
+                  Generated with AI
+                </Label>


This might be an issue in other demos, which if it is we can open a followup for those, but I'm notcing that wwhen this Label gets truncated, a tooltip doesn't render to show the full text content on hover/focus.

thatblindgeye · 2026-11-06T15:41:36Z

+                      aria-labelledby={`version-${version.id}`}
+                      id={`version-action-${version.id}`}
+                      aria-label="Version actions"


These aria attributes don't actually get passed in to anything, and the Dropdown being passed to this component will have any necessary accessible name, so they can be removed

Suggested change

aria-labelledby={`version-${version.id}`}

id={`version-action-${version.id}`}

aria-label="Version actions"

id={`version-action-${version.id}`}

thatblindgeye · 2026-11-06T15:42:44Z

+                        isOpen={openMenuVersionId === version.id}
+                        onOpenChange={(isOpen) => setOpenMenuVersionId(isOpen ? version.id : null)}
+                        toggle={(toggleRef) => (
+                          <MenuToggle


Needs a tooltip

thatblindgeye · 2026-11-06T15:45:04Z

+                          <DropdownItem key="restore" onClick={() => handleRestoreVersion(version.id)}>
+                            Restore this version
+                          </DropdownItem>


When triggering this action via keyboard, focus gets lost and looks like placed at the end of the page. We should move focus somewhere more appropriate.

thatblindgeye · 2026-11-06T15:46:09Z

+                          <DropdownItem key="duplicate" onClick={() => handleDuplicateVersion(version.id)}>
+                            Duplicate
+                          </DropdownItem>


Focus gets lost upon activating this action as well, and gets moved back to the very beginning of the page. WWe should place focus back on the kebab toggle that was originally opened.

thatblindgeye · 2026-11-06T15:50:09Z

+                <DropdownItem key="show-full-history" onClick={openVersionHistory}>
+                  Show full history
+                </DropdownItem>
+                <DropdownItem key="restore-latest-version" onClick={handleRestoreLatestVersion}>
+                  Restore latest version
+                </DropdownItem>
+                <DropdownItem key="name-current-version" onClick={handleNameCurrentVersion}>
+                  Name current version
+                </DropdownItem>
+                <DropdownItem key="save-current-version" onClick={handleSaveCurrentVersion}>
+                  Save current version
+                </DropdownItem>


Except for the "Name current version" action, the other actions all lose focus upon activating. We need to place focus somewwhere appropriate when the view changes.

kaylachumley and others added 17 commits November 2, 2026 10:34

fix: add eslint-disable comments for console.log statements

8edb3d4

Co-authored-by: Cursor <cursoragent@cursor.com>

fix: add close button to split-screen version history panel

1812167

Restores the X close control in the panel header so users can dismiss version history and reopen it from the code editor toolbar. Co-authored-by: Cursor <cursoragent@cursor.com>

refactor: keep only split-screen and partial overlay demos

d49879c

Remove the full overlay version history demo so the PR focuses on the two preferred layout options. Co-authored-by: Cursor <cursoragent@cursor.com>

fix: move split-screen version history trigger to canvas header

8e4c20d

Place the history icon button in the canvas panel header instead of the code editor toolbar. Co-authored-by: Cursor <cursoragent@cursor.com>

refactor: remove partial overlay version history demo

6aaceb9

Keep only the split-screen demo and related documentation. Co-authored-by: Cursor <cursoragent@cursor.com>

feat: wire version history split toggle menu actions and polish demo

43a4631

Complete restore/name/save flows, restore editor toolbar actions, use default split MenuToggle styling with md spacer, and fix DataList clickable row selection/hover. Co-authored-by: Cursor <cursoragent@cursor.com>

fix: restore version history demo imports and resolve lint errors

84a0265

Add missing MenuToggleAction/RhUiSaveIcon docs imports so the Surge demo no longer throws, and fix eslint/prettier issues in both demos. Co-authored-by: Cursor <cursoragent@cursor.com>

fix: apply md spacer between version history toggle and close

3d73ce4

Scope the drawer actions gap to the canvas head so it applies in the default canvas panel, not only the split preview layout. Co-authored-by: Cursor <cursoragent@cursor.com>

fix: resolve remaining prettier formatting in version history demos

323c85e

Co-authored-by: Cursor <cursoragent@cursor.com>

fix: break restore modal copy to satisfy prettier printWidth

d24d3cc

Co-authored-by: Cursor <cursoragent@cursor.com>

docs: refresh version history pattern copy and remove v1 demo

ab870ed

Co-authored-by: Cursor <cursoragent@cursor.com>

Merge branch 'main' into version-history-prototype

aea61c4

kaylachumley requested review from andrew-ronaldson, nicolethoen, rebeccaalpert and thatblindgeye November 5, 2026 21:32

rebeccaalpert reviewed Nov 6, 2026

View reviewed changes

thatblindgeye requested changes Nov 6, 2026

View reviewed changes


		### Fullscreen version history

		This demo shows a read-only code preview (canvas view) on the left and version history list on the right, utilizing a split-screen layout. Open the version history with the split menu toggle in the canvas panel header (next to close)—click the main button or Show full history in the dropdown. The chatbot panel is automatically hidden when the version history toggle is triggered. Close the version history with the X icon button to return to the chatbot and canvas.


		## Class names

		This demo reuses the [canvas](/patterns/canvas) `pf-chatbot__canvas*` classes from `@patternfly/chatbot` for the canvas and editor chrome. The classes below are defined in this demo's stylesheet (`VersionHistory.css`) and are used for the version history panel and split-screen layout. They are not exported from `@patternfly/chatbot`.

Conversation

kaylachumley commented Nov 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Layout

Split-screen

Features

Checklist

Preview

Uh oh!

patternfly-build commented Nov 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

andrew-ronaldson commented Nov 5, 2026

Uh oh!

rebeccaalpert left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

kaylachumley commented Nov 2, 2026 •

edited

Loading

patternfly-build commented Nov 2, 2026 •

edited

Loading

rebeccaalpert left a comment •

edited

Loading