Customize Build Your Own Copilot for Zava retail and support operations

[Copilot]

This PR transforms the Build Your Own Copilot Solution Accelerator from a wealth advisor scenario (Woodgrove Bank) into a retail and support assistant for Zava. The implementation focuses on speed, clarity, and usability for retail associates and support agents.

Key Changes

🎨 Zava Branding & Visual Identity

• Updated color scheme to Zava brand colors (#111 primary, #FF4D00 accent)
• Replaced Woodgrove Bank branding with custom Zava logo and messaging
• Updated system prompts to focus on retail and support scenarios
• Modernized UI with mobile-first responsive design

💬 Enhanced Chat Interface

• Slash Commands: Added support for /check-inventory, /warranty-check, /create-rma, /backorder commands with autocomplete dropdown
• Quick Action Prompts: Replaced banking prompts with retail-focused options:
  • "Check product availability"
  • "Warranty lookup"
  • "Create RMA"
• Multi-line Input: Enhanced input component with better UX and Zava styling

🛠️ Core Workflow Components

• ProductFlow: Handles Product Q&A → Availability → Backorder workflow
• WarrantyFlow: Manages Warranty Check → RMA → Label generation workflow
• QuickActions: Dynamic action chips that appear based on AI response content
• ActionDrawer: Slide-out panel with pre-filled forms and progress indicators

📱 Mobile-First Design

• Responsive layout optimized for retail environments
• Clean, modern interface with improved typography and spacing
• Streamlined navigation - direct access to chat interface
• Touch-friendly controls and spacing

🧠 Smart Flow Detection

• AI response parsing to automatically detect product availability or warranty scenarios
• Context-aware quick actions based on conversation content
• Integrated flow helpers with mock backend functions ready for API integration

Technical Implementation

The solution maintains the existing React/TypeScript architecture while adding:

• New reusable components (QuickActions, ActionDrawer, ProductFlow, WarrantyFlow)
• Content parsing utilities for flow detection
• Enhanced CSS with Zava design system variables
• Type-safe interfaces for retail/support data structures

Usage Examples

Retail Associate workflow:

User: "Do we have iPhone 15 Pro in stock?"
→ AI responds with availability 
→ Quick actions appear: "Reserve (5 available)" and "Create Backorder"
→ Click action opens pre-filled form

Support Agent workflow:

User: "/warranty-check SN123456789"
→ AI checks warranty status
→ Quick actions: "Create RMA" and "Generate Return Label"
→ Guided multi-step process with progress indicators

Screenshots

Before (Woodgrove Bank wealth advisor):

After (Zava retail/support assistant):

Slash Command Functionality:

The implementation delivers a chat-first interface with quick actions specifically designed for Zava's retail and support team needs, providing speed, clarity, and usability as requested in the requirements.

Fixes #1.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[Copilot]

@thegovind 👋 This repository doesn't have Copilot instructions. With Copilot instructions, I can understand the repository better, work faster and produce higher quality PRs.

I can generate a .github/copilot-instructions.md file for you automatically. Click here to open a pre-filled issue and assign it to me. I'll write the instructions, and then tag you for review.