Chatbot Component Area
Layout (Chat Drawer, Header, Persona)
Describe the feature
Overview:
Build a functional demo introducing an optional vertical docked navigation rail on the left side of the screen during Canvas mode and Fullscreen viewports. This does not replace the current chatbot header globally; instead, it provides a configurable opt-in feature for different product areas to enable based on their specific UI and layout needs.
Pros:
-
Maximizes Vertical Space: Allows the conversation flow to span the full container height, providing optimal viewing for complex outputs.
-
Improves Scalability: Offers significantly more capacity for new navigation items compared to limited-width horizontal tabs.
-
Flexible Integration: Gives product teams the modular choice to use the standard header or the docked nav depending on their environment.
Use Cases:
-
Seamless Context Switching: When enabled by a product area, users can fluidly navigate between the active chat window, their history drawer, application settings, or start a new chat directly from the docked nav without losing focus on their work in Canvas Mode.
-
Flexible UI & Optimal Conversation Height: Moving navigation to a vertical dock allows the conversation thread to utilize the full height of the container. This improves accessibility and provides a more flexible UI for reading long conversations or complex outputs without the visual obstruction of a top header.
Acceptance Criteria
Expected Data Structure
No response
Conversational Flow
No response
Visuals & Mockups
Conversational Accessibility
No response
Validation
Jira Issue: PF-4634
Chatbot Component Area
Layout (Chat Drawer, Header, Persona)
Describe the feature
Overview:
Build a functional demo introducing an optional vertical docked navigation rail on the left side of the screen during Canvas mode and Fullscreen viewports. This does not replace the current chatbot header globally; instead, it provides a configurable opt-in feature for different product areas to enable based on their specific UI and layout needs.
Pros:
Maximizes Vertical Space: Allows the conversation flow to span the full container height, providing optimal viewing for complex outputs.
Improves Scalability: Offers significantly more capacity for new navigation items compared to limited-width horizontal tabs.
Flexible Integration: Gives product teams the modular choice to use the standard header or the docked nav depending on their environment.
Use Cases:
Seamless Context Switching: When enabled by a product area, users can fluidly navigate between the active chat window, their history drawer, application settings, or start a new chat directly from the docked nav without losing focus on their work in Canvas Mode.
Flexible UI & Optimal Conversation Height: Moving navigation to a vertical dock allows the conversation thread to utilize the full height of the container. This improves accessibility and provides a more flexible UI for reading long conversations or complex outputs without the visual obstruction of a top header.
Acceptance Criteria
Implement a configuration flag/prop allowing product areas to enable the docked navigation feature for Fullscreen and Canvas modes.
Seamless Layout Integration: When enabled, the interface should dynamically adjust so the chatbot and canvas areas sit cleanly alongside the docked nav without overlapping or crowding.
Header Toggle: Ensure the standard horizontal chatbot header is hidden when the docked nav is active to prevent redundant UI elements.
Context Preservation: Core navigation actions triggered from the dock (e.g., Settings, History, New Chat) should open their respective panels or execute their functions without breaking the user's active chat session or visual context.
Expected Data Structure
No response
Conversational Flow
No response
Visuals & Mockups
Conversational Accessibility
No response
Validation
This request aligns with PatternFly AI/Chatbot design guidelines.
I have searched for existing chatbot-specific components.
Jira Issue: PF-4634