Documentation

User Message

Compact card-style component for displaying user messages with inline editing, text truncation, and hover-activated actions.

Installation 

1import { UserMessageComponent } from '@angular-ai-kit/core';

Live Demo

Short message:

Hello, how are you?

Medium message:

Can you help me understand how signals work in Angular? I have been reading the documentation but I still have some questions about computed signals.

Long message (with truncation):

This is a much longer message that demonstrates the truncation feature. When messages exceed the maximum character limit (default is 200 characters), they will be truncated with an ellipsis and a "Sho...

Hover over any message to see the action buttons (copy and edit).

Features

  • Compact card design (max 80% width, right-aligned)
  • Hover-activated action buttons (copy, edit)
  • Inline editing with Save/Cancel buttons
  • Text truncation with "Show more/less" toggle
  • Copy to clipboard functionality
  • Smooth transitions and hover effects

API Reference

Inputs

Prop Type Default Description
message UserMessage required The user message to display
maxChars number 200 Maximum characters before truncation
showCopy boolean true Show copy button
showEdit boolean true Show edit button
showAvatar boolean true Show user avatar
customClasses string '' Additional CSS classes

Outputs

Prop Type Description
copy string Emits message content when copy is clicked
edit EditEvent Emits when message is edited and saved

Usage Example 

1<ai-user-message2  [message]="userMessage"3  [maxChars]="200"4  (copy)="handleCopy($event)"5  (edit)="handleEdit($event)"6/>

Interfaces 

1interface UserMessage {2  id: string;3  role: 'user';4  content: string;5  timestamp: Date;6  status?: 'pending' | 'sent' | 'delivered' | 'failed' | 'streaming';7  attachments?: File[];8}9 10interface EditEvent {11  originalContent: string;12  newContent: string;13}

Accessibility

  • Uses semantic article element with ARIA label
  • Action buttons have aria-labels for screen readers
  • Supports keyboard navigation (Tab, Enter, Escape)
  • Edit mode accessible via keyboard (Ctrl+Enter to save, Escape to cancel)
  • Actions are hidden from screen readers when not visible