plant-disease-id/tasks/multi-image-user-feedback/07-post-evaluation-feedback-component.md

07. Post-Diagnosis Feedback Component (Accuracy / Unsure / Store Consent)

meta: id: multi-image-user-feedback-07 feature: multi-image-user-feedback priority: P1 depends_on: [multi-image-user-feedback-01, multi-image-user-feedback-06] tags: [ui, frontend, feedback]

objective:

• Create a feedback panel that appears after the diagnosis results, asking the user to rate accuracy (✓ / ✗ / ?) and optionally consent to storing their images for model retraining.

deliverables:

• src/components/PostDiagnosisFeedback.tsx — new feedback component
• src/components/ResultsDashboard.tsx — updated to include feedback panel

steps:

1. Create src/components/PostDiagnosisFeedback.tsx:

   Component structure (vertically stacked in a card):

   ┌─────────────────────────────────────────────┐
   │  💬 How accurate was this diagnosis?         │
   │                                              │
   │  [ ✅ Correct ] [ ❌ Incorrect ] [ ❓ Unsure ] │
   │                                              │
   │  ── (if Incorrect or Unsure selected) ──     │
   │  What did you expect? (optional)              │
   │  [_____________________________] text input  │
   │                                              │
   │  ──────────────────────────────────────────── │
   │                                              │
   │  ☐ Allow us to store these images to         │
   │    improve future diagnoses?                  │
   │  (Your privacy matters — images stored         │
   │   securely and never shared)                  │
   │                                              │
   │  [ Submit Feedback ] → sent to /api/feedback  │
   │                                              │
   │  ───── (after submission) ─────              │
   │  ✓ Thank you! Your feedback helps us improve. │
   └─────────────────────────────────────────────┘
   

   Props: { sessionId: string, imageIds: string[], predictedDiseaseId: string, userSpecies?: string, modelVersion: string, onSubmit?: () => void }

   States:

   • Pending: not yet rated, three large buttons (✓/✗/?)
   • Rated: accuracy selected, showing optional text input + consent checkbox
   • Submitting: loading spinner on submit button
   • Submitted: success message with thank-you text
   • Error: submission failed, retry button

   Implementation details:

   • Accuracy buttons are large and touch-friendly (min 48px tap target)
   • Selected button fills with its color: green (✓), red (✗), amber (?)
   • Text input is an optional free-text field for user comments
   • Consent checkbox has a brief privacy notice below it
   • Submit button disabled until accuracy is rated
   • On submit, POST to /api/feedback with DiagnosisFeedback body
   • Animated transitions between states

2. Update src/components/ResultsDashboard.tsx:

   • Import and render PostDiagnosisFeedback at the bottom of the results area
   • Pass sessionId (generated from first imageId), imageIds, predictedDiseaseId, userSpecies
   • Show feedback panel after all prediction cards
   • If no predictions at all, still show feedback (they may want to tell us the model was wrong)

3. Handle edge cases:

   • Feedback submission fails → show inline error with retry
   • User refreshes page → already-submitted state persists if submission completed (could use sessionStorage)
   • Consent unchecked → still submit feedback (just with consent=false)
   • No predictions returned → show feedback anyway with "No disease identified" context

tests:

• Unit: all four states render correctly (pending/rated/submitting/submitted)
• Unit: accuracy selection toggles correctly (only one selected at a time)
• Unit: submit button disabled until accuracy is rated
• Unit: consent checkbox unchecked by default
• Unit: text input only shown when accuracy is "incorrect" or "unsure"
• Unit: submission calls /api/feedback with correct payload shape
• Integration: feedback flow from rating to submission to success

acceptance_criteria:

• Three accuracy rating buttons are always visible after results
• Rating is required before submission
• Optional text input appears for "Incorrect" or "Unsure" ratings
• Consent checkbox allows opting in to image storage
• Submit sends correct payload to /api/feedback
• Success message shown after submission
• Error state with retry if submission fails

validation:

• npx tsc --noEmit passes
• Manual test: rate accuracy, type notes, toggle consent, submit
• Manual test: verify API receives correct data
• A11y: verify all interactive elements have accessible labels

notes:

• The sessionId ties together upload → identify → feedback for the same session
• Privacy notice text should be reviewed for legal compliance
• Consider adding a "Share with the community" option in a future iteration
• Debounce the submit button to prevent double-submission