feat: beta feedback widget — frictionless in-session feedback
Full-stack beta feedback system: Backend: - BetaFeedback model with reaction, category, text, page context - POST /feedback/beta (any auth user), GET /feedback/beta (admin, filtered) - Alembic migration 065 with indexes on user_id, reaction, created_at Frontend: - Persistent "Feedback" tab on right edge of all authenticated pages - Slide-out panel: quick reaction (👍😐👎), category pills, optional text - Auto-captures page URL and FlowPilot session ID - Hidden on mobile (<640px), closes on Escape/outside click - Shows "Thanks!" confirmation then auto-closes Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
290
frontend/src/components/common/FeedbackWidget.tsx
Normal file
290
frontend/src/components/common/FeedbackWidget.tsx
Normal file
@@ -0,0 +1,290 @@
|
||||
import { useState, useEffect, useRef, useCallback } from 'react'
|
||||
import { MessageSquare, X } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { toast } from '@/lib/toast'
|
||||
import { betaFeedbackApi } from '@/api/betaFeedback'
|
||||
|
||||
const REACTIONS = [
|
||||
{ value: 'positive', emoji: '👍', label: 'Good' },
|
||||
{ value: 'neutral', emoji: '😐', label: 'Okay' },
|
||||
{ value: 'negative', emoji: '👎', label: 'Bad' },
|
||||
] as const
|
||||
|
||||
const CATEGORIES = ['Bug', 'Feature Idea', 'Confusing', 'Praise'] as const
|
||||
|
||||
type Reaction = (typeof REACTIONS)[number]['value']
|
||||
type Category = (typeof CATEGORIES)[number]
|
||||
|
||||
export function FeedbackWidget() {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [reaction, setReaction] = useState<Reaction | null>(null)
|
||||
const [category, setCategory] = useState<Category | null>(null)
|
||||
const [text, setText] = useState('')
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
const panelRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const resetForm = useCallback(() => {
|
||||
setReaction(null)
|
||||
setCategory(null)
|
||||
setText('')
|
||||
setSubmitted(false)
|
||||
}, [])
|
||||
|
||||
const closePanel = useCallback(() => {
|
||||
setOpen(false)
|
||||
// Reset form after close animation
|
||||
setTimeout(resetForm, 200)
|
||||
}, [resetForm])
|
||||
|
||||
// Close on Escape
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
const handleKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') closePanel()
|
||||
}
|
||||
document.addEventListener('keydown', handleKey)
|
||||
return () => document.removeEventListener('keydown', handleKey)
|
||||
}, [open, closePanel])
|
||||
|
||||
// Close on click outside
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
const handleClick = (e: MouseEvent) => {
|
||||
if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
|
||||
closePanel()
|
||||
}
|
||||
}
|
||||
// Delay to avoid the opening click triggering immediate close
|
||||
const timer = setTimeout(() => {
|
||||
document.addEventListener('mousedown', handleClick)
|
||||
}, 0)
|
||||
return () => {
|
||||
clearTimeout(timer)
|
||||
document.removeEventListener('mousedown', handleClick)
|
||||
}
|
||||
}, [open, closePanel])
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!reaction) return
|
||||
setSubmitting(true)
|
||||
|
||||
const pageUrl = window.location.pathname
|
||||
// Extract session ID if on a FlowPilot page
|
||||
let sessionId: string | undefined
|
||||
if (pageUrl.includes('/pilot')) {
|
||||
const match = pageUrl.match(/\/pilot\/([^/]+)/)
|
||||
if (match) sessionId = match[1]
|
||||
}
|
||||
|
||||
try {
|
||||
await betaFeedbackApi.submit({
|
||||
reaction,
|
||||
category: category ?? undefined,
|
||||
text: text.trim() || undefined,
|
||||
page_url: pageUrl,
|
||||
session_id: sessionId,
|
||||
})
|
||||
setSubmitted(true)
|
||||
setTimeout(closePanel, 1200)
|
||||
} catch {
|
||||
toast.error('Failed to send feedback')
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Floating tab - hidden on mobile (<640px) */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
resetForm()
|
||||
setOpen(true)
|
||||
}}
|
||||
className={cn(
|
||||
'fixed right-0 top-1/2 z-40 hidden sm:flex items-center gap-1.5 px-2.5 py-1.5',
|
||||
'text-xs font-medium tracking-wide uppercase',
|
||||
'rounded-l-md transition-colors',
|
||||
'origin-right',
|
||||
open && 'pointer-events-none opacity-0'
|
||||
)}
|
||||
style={{
|
||||
background: 'var(--color-bg-card)',
|
||||
borderTop: '1px solid var(--color-border-default)',
|
||||
borderBottom: '1px solid var(--color-border-default)',
|
||||
borderLeft: '1px solid var(--color-border-default)',
|
||||
color: 'var(--color-text-secondary)',
|
||||
writingMode: 'vertical-rl',
|
||||
transform: 'translateY(-50%) rotate(180deg)',
|
||||
}}
|
||||
aria-label="Open feedback panel"
|
||||
>
|
||||
<MessageSquare size={12} />
|
||||
Feedback
|
||||
</button>
|
||||
|
||||
{/* Slide-out panel */}
|
||||
<div
|
||||
ref={panelRef}
|
||||
className={cn(
|
||||
'fixed right-0 top-0 bottom-0 z-50 w-[280px] flex flex-col',
|
||||
'transition-transform duration-200 ease-out',
|
||||
open ? 'translate-x-0' : 'translate-x-full'
|
||||
)}
|
||||
style={{
|
||||
background: 'var(--color-bg-card)',
|
||||
borderLeft: '1px solid var(--color-border-default)',
|
||||
}}
|
||||
aria-hidden={!open}
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
className="flex items-center justify-between px-4 py-3"
|
||||
style={{ borderBottom: '1px solid var(--color-border-default)' }}
|
||||
>
|
||||
<h3 className="font-heading text-sm font-semibold" style={{ color: 'var(--color-text-heading)' }}>
|
||||
How's it going?
|
||||
</h3>
|
||||
<button
|
||||
type="button"
|
||||
onClick={closePanel}
|
||||
className="rounded p-1 transition-colors"
|
||||
style={{ color: 'var(--color-text-muted)' }}
|
||||
aria-label="Close feedback panel"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{submitted ? (
|
||||
/* Thank you state */
|
||||
<div className="flex flex-1 items-center justify-center">
|
||||
<p className="font-heading text-base font-semibold" style={{ color: 'var(--color-text-heading)' }}>
|
||||
Thanks!
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
/* Form */
|
||||
<div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4">
|
||||
{/* Quick reactions */}
|
||||
<div>
|
||||
<p
|
||||
className="mb-2 text-[10px] font-semibold uppercase tracking-[1.2px]"
|
||||
style={{ color: 'var(--color-text-muted)' }}
|
||||
>
|
||||
Quick reaction
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
{REACTIONS.map((r) => (
|
||||
<button
|
||||
key={r.value}
|
||||
type="button"
|
||||
onClick={() => setReaction(reaction === r.value ? null : r.value)}
|
||||
className={cn(
|
||||
'flex flex-1 flex-col items-center gap-1 rounded-lg py-2.5 text-lg transition-colors',
|
||||
)}
|
||||
style={{
|
||||
background: reaction === r.value ? 'var(--color-accent-dim)' : 'var(--color-bg-elevated)',
|
||||
border: reaction === r.value
|
||||
? '1px solid var(--color-accent)'
|
||||
: '1px solid var(--color-border-default)',
|
||||
}}
|
||||
title={r.label}
|
||||
>
|
||||
<span>{r.emoji}</span>
|
||||
<span
|
||||
className="text-[10px] font-medium"
|
||||
style={{ color: reaction === r.value ? 'var(--color-accent-text)' : 'var(--color-text-secondary)' }}
|
||||
>
|
||||
{r.label}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Category pills */}
|
||||
<div>
|
||||
<p
|
||||
className="mb-2 text-[10px] font-semibold uppercase tracking-[1.2px]"
|
||||
style={{ color: 'var(--color-text-muted)' }}
|
||||
>
|
||||
Category (optional)
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{CATEGORIES.map((c) => (
|
||||
<button
|
||||
key={c}
|
||||
type="button"
|
||||
onClick={() => setCategory(category === c ? null : c)}
|
||||
className={cn(
|
||||
'rounded-[20px] px-3 py-1 text-xs font-medium transition-colors',
|
||||
)}
|
||||
style={{
|
||||
background: category === c ? 'var(--color-accent-dim)' : 'var(--color-bg-elevated)',
|
||||
border: category === c
|
||||
? '1px solid var(--color-accent)'
|
||||
: '1px solid var(--color-border-default)',
|
||||
color: category === c ? 'var(--color-accent-text)' : 'var(--color-text-secondary)',
|
||||
}}
|
||||
>
|
||||
{c}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Text area */}
|
||||
<div>
|
||||
<p
|
||||
className="mb-2 text-[10px] font-semibold uppercase tracking-[1.2px]"
|
||||
style={{ color: 'var(--color-text-muted)' }}
|
||||
>
|
||||
Details (optional)
|
||||
</p>
|
||||
<textarea
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
placeholder="Tell us more..."
|
||||
rows={3}
|
||||
className="w-full resize-none rounded-[5px] px-3 py-2 text-sm outline-none transition-colors placeholder:text-[var(--color-text-muted)]"
|
||||
style={{
|
||||
background: 'var(--color-bg-card)',
|
||||
border: '1px solid var(--color-border-default)',
|
||||
color: 'var(--color-text-primary)',
|
||||
}}
|
||||
onFocus={(e) => {
|
||||
e.currentTarget.style.borderColor = 'var(--color-accent)'
|
||||
e.currentTarget.style.boxShadow = '0 0 0 2px var(--color-accent-dim)'
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
e.currentTarget.style.borderColor = 'var(--color-border-default)'
|
||||
e.currentTarget.style.boxShadow = 'none'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Submit button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSubmit}
|
||||
disabled={!reaction || submitting}
|
||||
className={cn(
|
||||
'mt-auto w-full rounded-[5px] px-4 py-2 text-sm font-medium transition-opacity',
|
||||
(!reaction || submitting) && 'cursor-not-allowed opacity-50'
|
||||
)}
|
||||
style={{
|
||||
background: 'var(--color-accent)',
|
||||
color: '#ffffff',
|
||||
}}
|
||||
>
|
||||
{submitting ? 'Sending...' : 'Submit Feedback'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user