PatternFly ChatBot Interactive Component Showcase (GSoC 2026) #292
Description
Summary: Build a comprehensive interactive demo showcasing all PatternFly ChatBot components through a guided tour experience where developers explore features via suggested prompts.
Description
Problem Statement
PatternFly ChatBot provides 40+ React components for building AI-focused experiences, but developers struggle to:
- Discover the full range of available components and UI patterns
- Understand how components work together in real applications
- Find examples of advanced features scattered across documentation
- Visualize different display modes and message types in context
Solution
An interactive component gallery within a realistic application page that demonstrates all ChatBot capabilities through categorized feature tours and pre-seeded example conversations.
Project Scope
Project Size: Medium (175 hours over 15 weeks, ~11-12 hours/week)
Student will receive:
- Starter branch with basic page layout and minimal ChatBot
- Design mockups and wireframes
- Component inventory and prompt library structure
- Weekly mentorship from design and technical mentors
Goals & Deliverables
Primary Deliverables
- Interactive showcase integrated into PatternFly ChatBot documentation
- 5 display modes (overlay, docked, embedded, fullscreen, inline drawer)
- 7 feature tours with suggested prompts
- Pre-seeded example conversations demonstrating component combinations
- Analytics tracking for user interactions
- WCAG 2.1 AA accessible implementation
Documentation
- README.md (project overview and setup)
- ARCHITECTURE.md (system design and demo flow)
- IMPLEMENTATION_GUIDE.md (patterns and customization)
Technical Requirements
Required Skills
- React (hooks, component composition, state management)
- TypeScript (types, interfaces, generics)
- CSS/SCSS (layout, responsive design, theming)
- Git/GitHub (version control, PRs, code review)
- Web Accessibility (WCAG guidelines, ARIA)
Preferred Skills
- Experience with PatternFly or similar design systems
- UI/UX sensibility and attention to detail
- Technical writing ability
- Interest in component libraries and documentation
Timeline (15 Weeks)
Phase 1: Foundation (Weeks 1-4)
- Onboarding and understanding starter template
- Header implementation with all sub-components
- All 5 display modes functional
- Display mode switcher in header
Phase 2: Core Features (Weeks 5-8)
- Footer with MessageBar and welcome experience
- Conversation history with search and favorites
- Message types and variants showcase
- Basic message flow working
Phase 3: Advanced Features (Weeks 9-12)
- Thinking + tool calling patterns
- Historical chats with rich content (sources, quick starts, code)
- User feedback and interaction patterns
- File attachments with preview/edit
Phase 4: Polish & Documentation (Weeks 13-15)
- Analytics and event tracking
- Accessibility audit and fixes
- Documentation completion
- Performance optimization and deployment
Success Criteria
Functional Requirements
- All major ChatBot components integrated and functional
- All 5 display modes implemented with smooth transitions and state persistence
- 7 feature tours complete with suggested prompts
- Rich content demonstrated (source citations, code examples, quick starts, attachments)
- Conversation history with pre-seeded example conversations
- Analytics tracking implemented and documented
Quality Requirements
- WCAG 2.2 AA accessibility compliance
- No critical bugs in production deployment
- Code review approval from mentors
- Documentation is complete and clear
Mentors
- Technical Mentor: @thatblindgeye - Code review, architecture guidance, technical support
- Design Mentor: @kaylachumley - UI/UX review, design specifications, accessibility validation
Resources
- [PatternFly ChatBot Documentation|https://www.patternfly.org/extensions/chatbot/overview]
- [Project Repository|https://github.com/patternfly/chatbot]
- [PatternFly Design Guidelines|https://www.patternfly.org/get-started/contribute]
Jira Issue: PF-3487