feat: analytics dashboards & two-tier feedback system (#78)
* docs: add analytics & user feedback design document Covers team analytics, personal analytics, flow analytics, step-level thumbs up/down feedback, and flow CSAT ratings. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * docs: add analytics & feedback implementation plan 12-task TDD plan covering session ratings, step feedback, team/personal/flow analytics endpoints, and frontend pages. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add session_ratings table and analytics indexes Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add SessionRating model and analytics schemas Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add session CSAT rating endpoint with tests Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add step thumbs feedback and /ratings alias routes Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add team, personal, and flow analytics endpoints Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add recharts, analytics types, and API client Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add inline step thumbs up/down feedback during sessions Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add CSAT rating modal after session completion Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add Team Analytics page with charts and leaderboards Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add Flow Analytics panel with step dropoff and CSAT data Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add My Analytics page with personal stats and charts Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit was merged in pull request #78.
This commit is contained in:
chihlasm
118
frontend/src/components/session/CSATModal.tsx
Normal file
118
frontend/src/components/session/CSATModal.tsx
Normal file
@@ -0,0 +1,118 @@
|
||||
import { useState } from 'react'
|
||||
import { Star } from 'lucide-react'
|
||||
import { Modal } from '@/components/common/Modal'
|
||||
import { analyticsApi } from '@/api'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface CSATModalProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
sessionId: string
|
||||
}
|
||||
|
||||
const RATED_SESSIONS_KEY = 'rf-rated-sessions'
|
||||
|
||||
function getRatedSessions(): string[] {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem(RATED_SESSIONS_KEY) || '[]')
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
function markSessionRated(sessionId: string) {
|
||||
const rated = getRatedSessions()
|
||||
rated.push(sessionId)
|
||||
localStorage.setItem(RATED_SESSIONS_KEY, JSON.stringify(rated.slice(-100)))
|
||||
}
|
||||
|
||||
export function hasBeenRated(sessionId: string): boolean {
|
||||
return getRatedSessions().includes(sessionId)
|
||||
}
|
||||
|
||||
export function CSATModal({ isOpen, onClose, sessionId }: CSATModalProps) {
|
||||
const [rating, setRating] = useState(0)
|
||||
const [hoveredRating, setHoveredRating] = useState(0)
|
||||
const [comment, setComment] = useState('')
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (rating === 0 || submitting) return
|
||||
setSubmitting(true)
|
||||
try {
|
||||
await analyticsApi.rateSession(sessionId, rating, comment || undefined)
|
||||
markSessionRated(sessionId)
|
||||
onClose()
|
||||
} catch {
|
||||
// Silently fail — still close
|
||||
onClose()
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSkip = () => {
|
||||
markSessionRated(sessionId)
|
||||
onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={handleSkip} title="How was this flow?" size="sm">
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Your feedback helps flow authors improve troubleshooting paths.
|
||||
</p>
|
||||
|
||||
{/* Star rating */}
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
{[1, 2, 3, 4, 5].map((value) => (
|
||||
<button
|
||||
key={value}
|
||||
onClick={() => setRating(value)}
|
||||
onMouseEnter={() => setHoveredRating(value)}
|
||||
onMouseLeave={() => setHoveredRating(0)}
|
||||
className="p-1 transition-colors"
|
||||
>
|
||||
<Star
|
||||
size={28}
|
||||
className={cn(
|
||||
'transition-colors',
|
||||
(hoveredRating || rating) >= value
|
||||
? 'fill-yellow-400 text-yellow-400'
|
||||
: 'fill-none text-muted-foreground'
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Comment */}
|
||||
<textarea
|
||||
value={comment}
|
||||
onChange={(e) => setComment(e.target.value)}
|
||||
placeholder="Any comments? (optional)"
|
||||
maxLength={500}
|
||||
rows={3}
|
||||
className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20 resize-none"
|
||||
/>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-between">
|
||||
<button
|
||||
onClick={handleSkip}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
Skip
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={rating === 0 || submitting}
|
||||
className="rounded-lg bg-gradient-brand px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-primary/20 hover:opacity-90 transition-opacity disabled:opacity-50"
|
||||
>
|
||||
{submitting ? 'Submitting...' : 'Submit'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
77
frontend/src/components/session/StepFeedback.tsx
Normal file
77
frontend/src/components/session/StepFeedback.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { ThumbsUp, ThumbsDown } from 'lucide-react'
|
||||
import { analyticsApi } from '@/api'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface StepFeedbackProps {
|
||||
stepId: string
|
||||
sessionId: string
|
||||
}
|
||||
|
||||
const HINT_KEY = 'rf-step-feedback-hint-dismissed'
|
||||
|
||||
export function StepFeedback({ stepId, sessionId }: StepFeedbackProps) {
|
||||
const [feedback, setFeedback] = useState<boolean | null>(null)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [showHint, setShowHint] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!localStorage.getItem(HINT_KEY)) {
|
||||
setShowHint(true)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleFeedback = async (wasHelpful: boolean) => {
|
||||
if (submitting) return
|
||||
setSubmitting(true)
|
||||
try {
|
||||
const newValue = feedback === wasHelpful ? null : wasHelpful
|
||||
if (newValue !== null) {
|
||||
await analyticsApi.submitStepFeedback(stepId, sessionId, newValue)
|
||||
}
|
||||
setFeedback(newValue)
|
||||
if (showHint) {
|
||||
setShowHint(false)
|
||||
localStorage.setItem(HINT_KEY, '1')
|
||||
}
|
||||
} catch {
|
||||
// Silently fail — feedback is non-critical
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
{showHint && (
|
||||
<span className="text-xs text-muted-foreground">Was this step helpful?</span>
|
||||
)}
|
||||
<button
|
||||
onClick={() => handleFeedback(true)}
|
||||
disabled={submitting}
|
||||
className={cn(
|
||||
'rounded-md p-1.5 transition-colors',
|
||||
feedback === true
|
||||
? 'text-emerald-400 bg-emerald-400/10'
|
||||
: 'text-muted-foreground hover:text-emerald-400 hover:bg-accent'
|
||||
)}
|
||||
title="Helpful"
|
||||
>
|
||||
<ThumbsUp size={14} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleFeedback(false)}
|
||||
disabled={submitting}
|
||||
className={cn(
|
||||
'rounded-md p-1.5 transition-colors',
|
||||
feedback === false
|
||||
? 'text-red-400 bg-red-400/10'
|
||||
: 'text-muted-foreground hover:text-red-400 hover:bg-accent'
|
||||
)}
|
||||
title="Not helpful"
|
||||
>
|
||||
<ThumbsDown size={14} />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user