greeneclipse
8580c996c3
Drop one-shot tmp/axe scripts and agent i18n scratch so the Gitea tree is deployable.
84 lines
3.0 KiB
Markdown
84 lines
3.0 KiB
Markdown
# 07 — User support detail UI (rich tickets)
|
||
|
||
**Agent:** 7/10 (`support-auto`)
|
||
**Date:** 2026-08-05
|
||
**Contract:** [02-contract.md](./02-contract.md) §2 / §4.4 / §9
|
||
**Surfaces:** `/support/new`, `/support/[ticketId]` (list labels shared)
|
||
|
||
---
|
||
|
||
## Outcome
|
||
|
||
Customer Support Center UX for richer tickets:
|
||
|
||
1. **Create form** — category help text, priority help, optional SKU + tags (disclosure), existing subject/body counters.
|
||
2. **Thread** — distinct bubbles for you / human support / automated (KB|template) / AI-assisted / system; badges never impersonate a named agent.
|
||
3. **Progress** — status + `auto_reply_status` drive a polite “we're on it” / “quick answer sent” banner.
|
||
4. **CSAT** — unchanged (`SupportTicketRating` when resolved/closed).
|
||
|
||
Polish: `aria-describedby` on category/priority/optional fields; thread remains `role="log"` + visibility-aware 20s poll.
|
||
|
||
---
|
||
|
||
## Client changes
|
||
|
||
| File | Intent |
|
||
|------|--------|
|
||
| `apps/web/src/lib/support/types.ts` | Taxonomy categories + help; auto message/ticket fields; create `tags` / `related_sku` |
|
||
| `apps/web/src/lib/support/display.ts` | Labels, tag normalize, `messageKind*`, `ticketProgressState` |
|
||
| `apps/web/src/lib/support/api.ts` | Parse additive fields; POST optional tags/SKU |
|
||
| `apps/web/src/routes/support/new/+page.svelte` | Clearer create form |
|
||
| `apps/web/src/routes/support/[ticketId]/+page.svelte` | Thread + progress banner + tags/SKU chips |
|
||
| `apps/web/src/routes/support/+page.svelte` | Shared category/priority labels |
|
||
|
||
**ASSUMPTION:** Backend agent 5 exposes additive JSON (`tags`, `related_sku`, `auto_reply_status`, message `is_auto_reply` / `auto_source`). UI tolerates missing fields (progress falls back to status-only; bubbles fall back to role).
|
||
|
||
**ASSUMPTION:** Internal AI drafts (`ai_draft` / internal notes) stay stripped by existing `asTicket` filter — customers never see drafts.
|
||
|
||
---
|
||
|
||
## Message labeling (customer)
|
||
|
||
| Kind | Detection | Badge |
|
||
|------|-----------|-------|
|
||
| You | `author_role=user` | — |
|
||
| Support | `author_role=agent` | — |
|
||
| Automated | `is_auto_reply` + source `kb`/`template` (or system auto) | Automated answer |
|
||
| AI-assisted | `auto_source=ai` | AI-assisted |
|
||
| System | other `system` | — |
|
||
|
||
---
|
||
|
||
## Progress copy
|
||
|
||
| Condition | Title |
|
||
|-----------|-------|
|
||
| `closed` | Ticket closed |
|
||
| `resolved` | Marked resolved |
|
||
| `auto_reply_status` ∈ matched \| ai_sent | Quick answer sent |
|
||
| handed_off \| failed \| `pending` | We're on it |
|
||
| `open` (else) | Ticket received |
|
||
|
||
---
|
||
|
||
## Verification
|
||
|
||
```bash
|
||
cd apps/web && npm run check
|
||
```
|
||
|
||
Manual:
|
||
|
||
1. `/support/new` — change category/priority; help text updates; optional details expand; create with SKU/tags.
|
||
2. Thread — mock or real auto/AI system messages show distinct styles + badges.
|
||
3. Open → pending → resolved — progress banner + CSAT still submits.
|
||
4. Plan gate — `support.ticket_create` upgrade panel unchanged.
|
||
|
||
---
|
||
|
||
## Out of scope
|
||
|
||
- Staff approve/edit AI drafts (agent 8)
|
||
- Admin KB settings UI (agent 6)
|
||
- Backend match/AI (agents 3–5)
|