Customize this for an internal workshop using Zava as an example

[thegovind]

Description

Build a conversational UI for Zava Copilot that answers questions and executes key actions for retail and support roles. Focus on speed, clarity, and usability. Security and backend details are out of scope for this issue.

---

Goals

• Deliver a chat-first interface with quick actions.
• Enable two core flows:
  1. Product Q&A → Availability → Backorder
  2. Warranty Check → RMA → Label

---

Personas

• Retail Associate: product info, availability, quick reserve/backorder.
• Support Agent: warranty checks, RMA creation, refund initiation.

---

MVP Features

• Chat Panel:
  • Input box (multi-line, supports slash commands like /check-inventory).
  • Quick action chips under responses (e.g., “Reserve”, “Create RMA”).
  • Citations toggle.
• Action Drawer:
  • Pre-filled fields from conversation.
  • Editable before submit.
  • Progress indicator for multi-step actions.
• UI States:
  • Loading skeletons, error toast, success banner.
• Responsive Layout:
  • Mobile-first (collapsible chat, sticky buttons).
  • Desktop split view (chat left, action panel right).

---

Visual Design

• Branding: Zava colors (psl main to main microsoft/Build-your-own-copilot-Solution-Accelerator#111 primary, #FF4D00 accent).
• Typography: Sans-serif, 14–16px chat text.
• Icons: Material or Fluent icons for actions.

---

Non-Functional (Frontend)

• Performance: <1.5s response render after API call.
• Accessibility: ARIA roles for chat, buttons, drawers.
• Localization-ready: text in resource files.

---

Roadmap

• V0: Chat + Quick Actions + Action Drawer.
• V1: Multi-turn memory in UI, inline previews for actions.
• V2: Role-based UI (Retail vs Support), dashboard for recent actions.

---

Customization Checklist

• Replace Zava branding with your brand.
• Update quick actions to match your workflows.
• Configure knowledge packs for your products/policies.
• Adjust UI layout for your primary channel (Teams, Web, POS).

---

Acceptance Criteria

• Chat renders responses with quick actions in <1.5s.
• Action drawer pre-fills fields from conversation.
• Responsive design works on mobile and desktop.
• MVP flows (Product Q&A + Warranty/RMA) fully functional.