Sentiment Alert

AI
Monitoring

Tone detection indicator showing positive, neutral, negative, or hostile sentiment with score display.

Badge Variant

Compact inline sentiment indicators

Positive(+75)
Neutral(0)
Negative(-45)
Hostile(-85)

Banner Variant

Full-width alerts with messages

Positive Tone Detected
User feedback is constructive and appreciative
+75
Neutral Tone Detected
Standard professional communication
0
Negative Tone Detected
User expressing frustration or disappointment
-45
Hostile Tone Detected
Aggressive language detected - consider escalation
-85

Usage

Basic implementation example

import { SentimentAlertIndicator } from '@/components/ui/sentiment-alert'

// Badge variant (compact)
<SentimentAlertIndicator
  sentiment="positive"
  score={75}
  variant="badge"
/>

// Banner variant (with message)
<SentimentAlertIndicator
  sentiment="hostile"
  score={-85}
  message="Aggressive language detected - consider escalation"
  variant="banner"
/>

Features

Built-in functionality

  • Four sentiment levels - Positive, neutral, negative, and hostile detection
  • Score display - Numeric score from -100 to +100
  • Two variants - Badge for inline use, banner for prominent alerts
  • Emoji indicators - Universal visual cues for quick recognition
  • Custom messages - Optional contextual message in banner variant

API Reference

Component props

sentiment-"positive" | "neutral" | "negative" | "hostile" - Detected sentiment
score-number - Optional sentiment score (-100 to 100)
message-string - Optional contextual message
variant-"badge" | "banner" - Display variant (default: "badge")