feat(ConversationHistory): added ability to edit convo history names#624
Merged
rebeccaalpert merged 14 commits intopatternfly:mainfrom Aug 4, 2025
Merged
feat(ConversationHistory): added ability to edit convo history names#624rebeccaalpert merged 14 commits intopatternfly:mainfrom
rebeccaalpert merged 14 commits intopatternfly:mainfrom
Conversation
|
Preview: https://chatbot-pr-chatbot-624.surge.sh A11y report: https://chatbot-pr-chatbot-624-a11y.surge.sh |
rebeccaalpert
suggested changes
Jul 28, 2025
Member
There was a problem hiding this comment.
Overall this looks great! I am so happy that you pointed out the menu aria issue and were able to get this working. I noticed a visual regression, an axe issue on the dropdown toggle, and a couple of much smaller nitpick-y things. (Noted below.) Let me know if you need any help with the button thing - I think I have overridden those elsewhere in here before.
packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md
Outdated
Show resolved
Hide resolved
...module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotConversationEditing.tsx
Outdated
Show resolved
Hide resolved
...module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotConversationEditing.tsx
Outdated
Show resolved
Hide resolved
packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx
Outdated
Show resolved
Hide resolved
packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx
Outdated
Show resolved
Hide resolved
packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx
Outdated
Show resolved
Hide resolved
cdd6428 to
d80dc5f
Compare
thatblindgeye
commented
Jul 29, 2025
packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md
Outdated
Show resolved
Hide resolved
rebeccaalpert
approved these changes
Jul 29, 2025
Member
There was a problem hiding this comment.
Looking great! Thank you so much. 🚀
edonehoo
reviewed
Jul 29, 2025
Contributor
There was a problem hiding this comment.
Small formatting tweaks and wdyt about changing the example title?
Comment on lines
+376
to
+384
| - Each text input has a unique accessible name - this is handled automatically, but can be customized via the `inputAriaLabel` property on the conversation item. | ||
| - The `onBlur` and `onKeyDown` callback handlers are passed in, typically to "exit" editing mode on blur and to handle the Enter or Escape keys on key down - in this example, `onBlur` and the Enter key via `onKeyDown` save the text input content, while Escape via `onKeyDown` cancels the edit and reverts to the original text. | ||
| - The `onChange` callback handler is passed in to handle updating the text input value and any conversation state. | ||
| - Focus is handled correctly when enabling and disabled editing mode - when `isEditing` becomes true, focus should be moved to the text input, and when the Enter or Escape keys are pressed and `isEditing` becomes false focus should be moved to the conversation actions dropdown toggle. |
Contributor
There was a problem hiding this comment.
Suggested change
| - Each text input has a unique accessible name - this is handled automatically, but can be customized via the `inputAriaLabel` property on the conversation item. | |
| - The `onBlur` and `onKeyDown` callback handlers are passed in, typically to "exit" editing mode on blur and to handle the Enter or Escape keys on key down - in this example, `onBlur` and the Enter key via `onKeyDown` save the text input content, while Escape via `onKeyDown` cancels the edit and reverts to the original text. | |
| - The `onChange` callback handler is passed in to handle updating the text input value and any conversation state. | |
| - Focus is handled correctly when enabling and disabled editing mode - when `isEditing` becomes true, focus should be moved to the text input, and when the Enter or Escape keys are pressed and `isEditing` becomes false focus should be moved to the conversation actions dropdown toggle. | |
| - Each text input has a unique accessible name. This is handled automatically, but can be customized via the `inputAriaLabel` property on the conversation item. | |
| - The `onBlur` and `onKeyDown` callback handlers are passed in, typically being used to exit editing mode on blur and to handle the **Enter** or **Escape** keys on key down. | |
| - In this example, `onBlur` and the **Enter** key via `onKeyDown` save the text input content, while **Escape** via `onKeyDown` cancels the edit and reverts to the original text. | |
| - The `onChange` callback handler is passed in to handle updating the text input value and any conversation state. | |
| - Focus is handled correctly when enabling and disabled editing mode. | |
| - When `isEditing` becomes `true`, focus should be moved to the text input. | |
| - When the **Enter** or **Escape** keys are pressed and `isEditing` becomes `false`, focus should be moved to the conversation actions dropdown toggle. |
|
|
||
| ``` | ||
|
|
||
| ### Drawer with editable conversations |
Contributor
There was a problem hiding this comment.
Suggested change
| ### Drawer with editable conversations | |
| ### Renaming conversations in history drawer |
Collaborator
Author
|
Just FYI adding the "do not merge" label on for now pending discussion in this weeks chatbot sync |
b30c091 to
c42e9c4
Compare
...module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotConversationEditing.tsx
Outdated
Show resolved
Hide resolved
edonehoo
suggested changes
Jul 31, 2025
|
|
||
| ### Drawer with editable conversations | ||
|
|
||
| You can allow conversation items in the history drawer editable by implementing a modal that opens upon clicking a "Rename" (or similar) action. When doing so, you must ensure the following: |
Contributor
There was a problem hiding this comment.
Suggested change
| You can allow conversation items in the history drawer editable by implementing a modal that opens upon clicking a "Rename" (or similar) action. When doing so, you must ensure the following: | |
| You can allow users to edit conversation names in the history drawer by implementing a modal that opens upon clicking a "Rename" (or similar) action. When doing so, you must ensure the following: |
|
|
||
| - When the modal opens, place focus at the end of the text input. | ||
| - When the modal closes, focus goes back to the action toggle that was previously opened. | ||
| - Changes can be canceled via the Escape key or clicking a "cancel" button. |
Contributor
There was a problem hiding this comment.
Suggested change
| - Changes can be canceled via the Escape key or clicking a "cancel" button. | |
| - Changes can be canceled via the **Escape** key or by clicking a "Cancel" button. |
| - When the modal opens, place focus at the end of the text input. | ||
| - When the modal closes, focus goes back to the action toggle that was previously opened. | ||
| - Changes can be canceled via the Escape key or clicking a "cancel" button. | ||
| - Changes can be saved via the Enter key or clicking a "save" button. |
Contributor
There was a problem hiding this comment.
Suggested change
| - Changes can be saved via the Enter key or clicking a "save" button. | |
| - Changes can be saved via the **Enter** key or by clicking a "Save" button. |
|
|
||
| You can allow conversation items in the history drawer editable by implementing a modal that opens upon clicking a "Rename" (or similar) action. When doing so, you must ensure the following: | ||
|
|
||
| - When the modal opens, place focus at the end of the text input. |
Contributor
There was a problem hiding this comment.
Suggested change
| - When the modal opens, place focus at the end of the text input. | |
| - When the modal opens, focus is placed at the end of the text input. |
edonehoo
reviewed
Aug 1, 2025
packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md
Outdated
Show resolved
Hide resolved
kaylachumley
reviewed
Aug 1, 2025
There was a problem hiding this comment.
Hi! Can you please adjust the padding between the header and the box-body to be 8px (pf-t--global--spacer--sm)? everything else is looking good!
kaylachumley
approved these changes
Aug 4, 2025
There was a problem hiding this comment.
spacing looks good now! the modal does seem wide but when resizing to a smaller screen size it makes sense
|
🎉 This PR is included in version 6.4.0-prerelease.6 🎉 The release is available on: Your semantic-release bot 📦🚀 |
rebeccaalpert
pushed a commit
to rebeccaalpert/virtual-assistant
that referenced
this pull request
Oct 24, 2025
…edit convo history names (patternfly#624) Refactored ChatBotConversationHistoryNav from a PatternFly Menu to a PatternFly List so we can make it more flexible moving forward. Accordingly, menuProps has been deprecated and titleProps and listProps have been added. Also added demo for editing history names, triggered via dropdown. Dropdown launches edit modal. Co-authored-by: Eric Olkowski <git.eric@thatblindgeye.dev>
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
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.
Closes #473
Keeping with the design spec, this pivots the ChatbotConversationHistoryNav component away from the PatternFly Menu components and replacing that with other PF components. I tried to keep the visual aspect as close to what we currently have and also minimizing API changes. Just to note a couple of the API changes:
additionalPropsstill gets passed to a button element, but is no longer a MenuItemProps type and instead a ButtonProps type (so still from PatternFly)menuPropsis deprecated and will basically just do nothing anymore, since there's no applicable place to spread them anymore with that name.Let me know if any classes should be updated further - I had to update or remove some classes between the component and scss files.