Skip to main content

FeedbackMechanism

Package: @synapse-ui/feedback
Selector: synapse-feedback
Status: Stable

Inline validation controls (thumbs up, thumbs down, regenerate) that attach to AI outputs.

Overview​

FeedbackMechanism provides a compact action bar for users to rate AI responses and request regeneration. It is designed to sit below AiStreamContainer output without disrupting the reading flow.

Installation​

npm install @synapse-ui/feedback @synapse-ui/theme

Basic Example​

import { Component } from '@angular/core';
import { Feedback } from '@synapse-ui/feedback';

@Component({
  selector: 'app-feedback',
  standalone: true,
  imports: [Feedback],
  template: ` <synapse-feedback [responseId]="responseId" (feedback)="onFeedback($event)" (regenerate)="onRegenerate()" /> `,
})
export class FeedbackComponent {
  responseId = 'resp-123';

  onFeedback(event: FeedbackEvent): void {
    // Send to your analytics or backend
    console.log(event.rating); // 'positive' | 'negative'
  }

  onRegenerate(): void {
    console.log('Regenerate requested');
  }
}

API Reference (Planned)​

Inputs​

InputTypeDefaultDescription
responseIdstringrequiredIdentifier for the AI response
disabledbooleanfalseDisables all actions
showRegeneratebooleantrueShow regenerate button
compactbooleanfalseIcon-only layout

Outputs​

OutputPayloadDescription
feedbackFeedbackEventUser rated the response
regenerate{ responseId: string }User requested regeneration

Types​

interface FeedbackEvent {
  responseId: string;
  rating: 'positive' | 'negative';
}

Layout​

┌─────────────────────────────────────────┐
│  👍  👎  │  🔄 Regenerate               │
└─────────────────────────────────────────┘

In compact mode, labels are hidden — icons only with tooltip/aria-label.

Backend Integration​

This component is UI-only. It emits events; your application handles persistence:

onFeedback(event: FeedbackEvent): void {
  this.analytics.track('ai_feedback', {
    responseId: event.responseId,
    rating: event.rating,
  });
}

Accessibility​

  • Each button has aria-label (e.g., "Rate response positively").
  • Selected state uses aria-pressed="true".
  • Button group uses role="group" with aria-label="Response feedback".

Theming​

ElementToken
Positive active--synapse-ai-feedback-positive
Negative active--synapse-ai-feedback-negative
Default icon--synapse-text-secondary