Repository navigation
feat: add version history pattern demo #939
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| /* Version History Panel Styles */ | ||
| .version-history-panel { | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex: 1; | ||
| min-height: 0; | ||
| height: 100%; | ||
| padding: var(--pf-t--global--spacer--lg); | ||
| background-color: var(--pf-t--global--background--color--primary--default); | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| .version-history-header { | ||
| padding-bottom: var(--pf-t--global--spacer--md); | ||
| border-bottom: 1px solid var(--pf-t--global--border--color--default); | ||
| flex-shrink: 0; | ||
| } | ||
|
|
||
| .version-history-content { | ||
| flex: 1; | ||
| min-height: 0; | ||
| overflow: auto; | ||
| } | ||
|
|
||
| /* Remove top border from first data list item */ | ||
| .version-history-panel .pf-v6-c-data-list { | ||
| border-top: none; | ||
| } | ||
|
|
||
| .version-history-panel .pf-v6-c-data-list__item:first-child { | ||
| border-block-start: none; | ||
| } | ||
|
|
||
| /* Option 2: Split-screen layout styles */ | ||
|
|
||
| .version-history-split-screen-demo { | ||
| display: flex; | ||
| height: 100vh; | ||
| width: 100%; | ||
| background-color: var(--pf-t--global--background--color--secondary--default); | ||
| } | ||
|
|
||
| .version-history-split-canvas { | ||
| flex: 1; | ||
| display: flex; | ||
| flex-direction: column; | ||
| overflow: hidden; | ||
| min-width: 0; | ||
| } | ||
|
|
||
| .version-history-split-canvas .pf-chatbot__canvas-section { | ||
| display: flex; | ||
| flex-direction: column; | ||
| height: 100%; | ||
| background-color: var(--pf-t--global--background--color--secondary--default); | ||
| } | ||
|
|
||
| .version-history-split-canvas .pf-chatbot__canvas-head { | ||
| display: flex; | ||
| align-items: center; | ||
| 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); | ||
|
Member
There was a problem hiding this comment. Want to switch padding-top/bottom to padding-block-start, etc. |
||
| background-color: var(--pf-t--global--background--color--secondary--default); | ||
| flex-shrink: 0; | ||
| } | ||
|
|
||
| .pf-chatbot__canvas-head .pf-v6-c-drawer__actions { | ||
| gap: var(--pf-t--global--spacer--md); | ||
| } | ||
|
|
||
| .version-history-split-canvas .pf-chatbot__canvas-panel-body { | ||
| flex: 1; | ||
| overflow: hidden; | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding: var(--pf-t--global--spacer--md); | ||
| min-height: 0; | ||
| } | ||
|
|
||
| .version-history-split-canvas .pf-chatbot__canvas-editor { | ||
| flex: 1; | ||
| overflow: hidden; | ||
| border-radius: var(--pf-t--global--border--radius--medium); | ||
| min-height: 0; | ||
| } | ||
|
|
||
| .version-history-split-canvas .pf-v6-c-code-editor { | ||
| height: 100%; | ||
| } | ||
|
|
||
| .version-history-split-panel { | ||
| width: 400px; | ||
|
Member
There was a problem hiding this comment. Hard-coded width - check to make sure this looks ok on breakpoints. |
||
| flex-shrink: 0; | ||
|
Member
There was a problem hiding this comment. Removing this seems to fix iPhone SE issue |
||
| overflow: hidden; | ||
| border-left: 1px solid var(--pf-t--global--border--color--default); | ||
| background-color: var(--pf-t--global--background--color--primary--default); | ||
| } | ||
|
|
||
| .version-history-split-panel .version-history-panel { | ||
| height: 100%; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,125 @@ | ||||||
| --- | ||||||
| id: Version history | ||||||
| section: patterns | ||||||
| source: demo | ||||||
| --- | ||||||
|
|
||||||
| import { useState, useRef, useCallback, useEffect, FunctionComponent, ReactNode } from 'react'; | ||||||
| import { | ||||||
| Brand, | ||||||
| Button, | ||||||
| Divider, | ||||||
| Drawer, | ||||||
| DrawerActions, | ||||||
| DrawerContent, | ||||||
| DrawerContentBody, | ||||||
| DrawerHead, | ||||||
| DrawerPanelContent, | ||||||
| Dropdown, | ||||||
| DropdownItem, | ||||||
| DropdownList, | ||||||
| Flex, | ||||||
| FlexItem, | ||||||
| Label, | ||||||
| MenuToggle, | ||||||
| MenuToggleAction, | ||||||
| Modal, | ||||||
| ModalBody, | ||||||
| ModalFooter, | ||||||
| ModalHeader, | ||||||
| Popover, | ||||||
| Select, | ||||||
| SelectList, | ||||||
| SelectOption, | ||||||
| Title, | ||||||
| Tooltip, | ||||||
| TextInput, | ||||||
| DataList, | ||||||
| DataListItem, | ||||||
| DataListItemRow, | ||||||
| DataListItemCells, | ||||||
| DataListCell, | ||||||
| DataListAction, | ||||||
| Content, | ||||||
| ContentVariants | ||||||
| } from '@patternfly/react-core'; | ||||||
| import { CodeEditor, CodeEditorControl, Language } from '@patternfly/react-code-editor'; | ||||||
| import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot'; | ||||||
| import ChatbotContent from '@patternfly/chatbot/dist/dynamic/ChatbotContent'; | ||||||
| import ChatbotFooter, { ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic/ChatbotFooter'; | ||||||
| import MessageBar from '@patternfly/chatbot/dist/dynamic/MessageBar'; | ||||||
| import MessageBox from '@patternfly/chatbot/dist/dynamic/MessageBox'; | ||||||
| import Message from '@patternfly/chatbot/dist/dynamic/Message'; | ||||||
| import ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav'; | ||||||
| import ChatbotHeader, { | ||||||
| ChatbotHeaderActions, | ||||||
| ChatbotHeaderCloseButton, | ||||||
| ChatbotHeaderMain, | ||||||
| ChatbotHeaderMenu, | ||||||
| ChatbotHeaderTitle | ||||||
| } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader'; | ||||||
| import RhUiAiInfoIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ai-info-icon'; | ||||||
| import RhUiImageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-image-fill-icon'; | ||||||
| import RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon'; | ||||||
| import RhUiTaskFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-task-fill-icon'; | ||||||
| import RhUiHistoryIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-history-icon'; | ||||||
| import RhUiSaveIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-save-icon'; | ||||||
| import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon'; | ||||||
| import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; | ||||||
| import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; | ||||||
| import RhUiRedoIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-redo-icon'; | ||||||
| import RhUiUndoIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-undo-icon'; | ||||||
| import RhUiServerUploadFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-upload-fill-icon'; | ||||||
| import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon'; | ||||||
| import RhUiCalendarFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-calendar-fill-icon'; | ||||||
| import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon'; | ||||||
| import { useDropzone } from 'react-dropzone'; | ||||||
| import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg'; | ||||||
| import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg'; | ||||||
| import userAvatar from '../Messages/user_avatar.svg'; | ||||||
|
|
||||||
| **Version history** allows users to view, compare, and restore previous versions of AI-generated or user-edited content in canvas mode. This pattern is essential for collaborative AI workflows where users need to track changes over time and recover earlier states of their work. It is recommended to use version history and canvas mode in full width and fullscreen layouts only. | ||||||
|
|
||||||
| ## Use cases | ||||||
|
|
||||||
| Version history is useful when: | ||||||
| - Users need to track changes made by both AI and humans over time | ||||||
| - Users want to restore a previous version of their work | ||||||
| - Users need to compare different iterations of AI-generated content | ||||||
| - Teams collaborate on AI-assisted documents or code | ||||||
|
|
||||||
| ## Version list features | ||||||
|
|
||||||
| Each version in the list displays: | ||||||
| - **Version name**: A user editable name for each version | ||||||
| - **Author**: Who created the version (user or AI bot) | ||||||
| - **Timestamp**: Meta data that displays relative time since the version was created | ||||||
| - **AI label**: A badge indicating AI-generated edits | ||||||
|
|
||||||
| Version actions include: | ||||||
| - **Name this version**: Rename a version for easier identification | ||||||
| - **Restore this version**: Revert the canvas to a past version's content | ||||||
| - **Duplicate**: Create a copy of the version | ||||||
|
|
||||||
| ## 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`. | ||||||
|
Member
There was a problem hiding this comment.
We can export them - I think we export the Canvas classes. |
||||||
|
|
||||||
| | Class name | Purpose | | ||||||
| | ----------------------------------- | ----------------------------------------------------------------------- | | ||||||
| | `version-history-panel` | Flex column container for the version history panel and its spacing. | | ||||||
| | `version-history-header` | Styles the panel header and its bottom border. | | ||||||
| | `version-history-content` | Scrollable area that holds the version list. | | ||||||
| | `version-history-split-screen-demo` | Full-viewport flex row that hosts the split-screen layout. | | ||||||
| | `version-history-split-canvas` | Left pane that contains the read-only canvas preview. | | ||||||
| | `version-history-split-panel` | Fixed-width right pane that contains the version history panel. | | ||||||
|
|
||||||
| ## Demo | ||||||
|
|
||||||
| ### 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. | ||||||
|
Member
There was a problem hiding this comment.
Suggested change
Sometimes the order will reverse in Hebrew, etc. |
||||||
|
|
||||||
| ```js file="./VersionHistorySplitScreen.tsx" isFullscreen | ||||||
|
|
||||||
| ``` | ||||||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.