MessageFeedbackDialog Component

The MessageFeedbackDialog component provides user feedback collection for AI assistant responses with Langfuse integration.

Overview

This component enables users to rate assistant responses on a 5-point scale with optional comments. It integrates with Langfuse for tracking and analytics, providing detailed feedback scoring and automatic dialog management.

Location

src/components/MessageFeedbackDialog.tsx

Features

Structured Feedback System

  • 5-point Rating Scale: From “Helpful & Accurate” (1.0) to “Incorrect/Problematic” (0.0)
  • Visual Star Indicators: Each option shows corresponding star rating
  • Optional Comments: Free-text field for detailed feedback
  • Predefined Options: Consistent rating categories for analytics

Langfuse Integration

  • Automatic Score Submission: Submits scores to Langfuse with trace ID
  • Comment Tracking: Includes user comments in feedback data
  • Message ID Association: Links feedback to specific messages when provided
  • Error Handling: Graceful handling of submission failures

User Experience

  • Modal Dialog Interface: Non-intrusive feedback collection
  • Loading States: Shows submission progress
  • Success Confirmation: Thank you message with auto-close
  • State Management: Prevents multiple submissions

Props Interface

interface MessageFeedbackDialogProps {
  traceId: string;        // Langfuse trace ID for tracking
  messageId?: string;     // Optional message identifier
  className?: string;     // Custom CSS classes
}

Feedback Options

const feedbackOptions = [
  { value: "helpful", label: "Helpful & Accurate", score: 1.0 },
  { value: "mostly_helpful", label: "Mostly Helpful", score: 0.75 },
  { value: "partially_helpful", label: "Partially Helpful", score: 0.5 },
  { value: "not_helpful", label: "Not Helpful", score: 0.25 },
  { value: "problematic", label: "Incorrect/Problematic", score: 0 },
];

Usage Example

import { MessageFeedbackDialog } from '@/components/MessageFeedbackDialog';

function MessageItem({ message, traceId }) {
  return (
    <div className="message">
      <div className="content">{message.text}</div>
      <div className="actions">
        <MessageFeedbackDialog
          traceId={traceId}
          messageId={message.id}
          className="ml-2"
        />
      </div>
    </div>
  );
}

Implementation Details

Langfuse Configuration

const langfuseWeb = new LangfuseWeb({
  publicKey: process.env.NEXT_PUBLIC_LANGFUSE_PUBLIC_KEY,
  baseUrl: process.env.NEXT_PUBLIC_LANGFUSE_BASE_URL || "https://cloud.langfuse.com"
});

Score Submission

await langfuseWeb.score({
  traceId: traceId,
  name: "user-feedback",
  value: score,
  comment: `${selectedOption?.label}${additionalComments ? ` - ${additionalComments}` : ''}${messageId ? ` (Message ID: ${messageId})` : ''}`
});

State Management

  • selectedFeedback: Currently selected rating option
  • additionalComments: User’s optional text feedback
  • isSubmitting: Loading state during submission
  • hasSubmitted: Success state after submission

Dependencies

  • langfuse - Feedback submission and analytics
  • lucide-react - Icons (MessageCircle, Star)
  • Custom UI components: Dialog, Button, Textarea, Label, RadioGroup
  • @/lib/utils - Utility functions for styling

Environment Variables

NEXT_PUBLIC_LANGFUSE_PUBLIC_KEY=your_public_key
NEXT_PUBLIC_LANGFUSE_BASE_URL=https://cloud.langfuse.com

Error Handling

  • Submission Failures: Logged to console, user experience unaffected
  • Network Issues: Graceful degradation without blocking UI
  • Missing Environment Variables: Component still renders but submissions fail silently

Accessibility

  • Radio Group Navigation: Keyboard navigation through options
  • Form Labels: Proper labeling for screen readers
  • Button States: Clear indication of disabled/loading states
  • Modal Semantics: Proper dialog role and focus management

Analytics Integration

Tracked Metrics

  • Response Quality Scores: 0.0 to 1.0 scale
  • User Comments: Qualitative feedback text
  • Message Association: Links feedback to specific responses
  • Timestamp: Automatic submission timing

Data Structure

{
  traceId: string,
  name: "user-feedback",
  value: number,        // 0.0 to 1.0
  comment: string       // Includes label and optional user comment
}

Best Practices

  1. Provide Trace IDs: Always include valid Langfuse trace IDs
  2. Include Message IDs: When available, for better tracking
  3. Monitor Submission Rates: Track feedback completion rates
  4. Review Comments Regularly: Use qualitative feedback for improvements
  • Chat message components that display AI responses
  • Langfuse debugging and analytics interfaces
  • User feedback collection systems