[Chatbot] - Demo with Docked nav support in fullscreen and canvas mode

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

No files or tests are named. Start by locating the chatbot header, Canvas and Fullscreen layout entry points, then trace existing Settings, History, and New Chat actions. Done means an opt-in docked rail integrates without overlap, hides the standard header, and preserves those navigation actions.