Chatbot Component Area
Layout (Chat Drawer, Header, Persona)
Describe the feature
Background:
While PatternFly currently provides basic Chatbot layout modes (Overlay, Docked, Fullscreen, Embedded) and Page/Drawer layouts, we lack a standardized, componentized Canvas Mode pattern in our Figma UI Kit.
Objective:
Design, document, and publish a reusable "Canvas Mode" UI component and layout spec in Figma that product designers across all areas can easily adopt for AI-assisted workflows.
Scope of Work:
Layout Structure: Establish fixed/responsive layout rules for the split-screen paradigm (e.g., Chat panel vs. Canvas Workspace).
Canvas Modes & Variants:
-
Document / Text Editor (inline co-editing, selection popovers, diff views)
-
Interactive / Visual Canvas (cards, node-based, or preview container)
-
Code / Artifact Viewer (syntax highlighting container, action headers)
Control Surfaces & Actions:
-
Top bar (close, expand, view source, version history, export/copy)
-
Contextual floating toolbars (prompt adjustments, quick action pills)
-
Transition states (entering canvas mode from standard chat, minimizing, side-by-side resizing)
-
Design System Integration: Build components utilizing existing design tokens (typography, elevation, spacing, color, dark/light modes).
Key Deliverables
- Figma Component Set: Auto-layout enabled, variants configured for standard layout states.
- Usage Guidelines & Documentation: In-canvas guidance detailing when to use Canvas Mode vs. inline chat, desktop vs. mobile responsive behavior, and accessibility standards.
Out of Scope
-
Frontend code implementation (will be covered in a separate engineering task).
-
Interactive Demo: Demonstrating transition from standard chat into Canvas Mode.(will be covered in a separate engineering task)
-
Product-specific canvas logic (e.g., specialized canvas tools for specific feature verticals).
Acceptance Criteria
Validation
Jira Issue: PF-4565
Chatbot Component Area
Layout (Chat Drawer, Header, Persona)
Describe the feature
Background:
While PatternFly currently provides basic Chatbot layout modes (Overlay, Docked, Fullscreen, Embedded) and Page/Drawer layouts, we lack a standardized, componentized Canvas Mode pattern in our Figma UI Kit.
Objective:
Design, document, and publish a reusable "Canvas Mode" UI component and layout spec in Figma that product designers across all areas can easily adopt for AI-assisted workflows.
Scope of Work:
Layout Structure: Establish fixed/responsive layout rules for the split-screen paradigm (e.g., Chat panel vs. Canvas Workspace).
Canvas Modes & Variants:
Document / Text Editor (inline co-editing, selection popovers, diff views)
Interactive / Visual Canvas (cards, node-based, or preview container)
Code / Artifact Viewer (syntax highlighting container, action headers)
Control Surfaces & Actions:
Top bar (close, expand, view source, version history, export/copy)
Contextual floating toolbars (prompt adjustments, quick action pills)
Transition states (entering canvas mode from standard chat, minimizing, side-by-side resizing)
Design System Integration: Build components utilizing existing design tokens (typography, elevation, spacing, color, dark/light modes).
Key Deliverables
Out of Scope
Frontend code implementation (will be covered in a separate engineering task).
Interactive Demo: Demonstrating transition from standard chat into Canvas Mode.(will be covered in a separate engineering task)
Product-specific canvas logic (e.g., specialized canvas tools for specific feature verticals).
Acceptance Criteria
Component set created and published to the patterns and extensions Figma library.
Responsive behavior (flexibility/min-widths for chat vs. canvas side-by-side) verified with developer
Figma library reviewed and signed off by Design System / Design Leadership.
Validation
This request aligns with PatternFly AI/Chatbot design guidelines.
I have searched for existing chatbot-specific components.
Jira Issue: PF-4565