The Chat component provides a full-featured chat interface with message display, input controls, headers, and support for AI reasoning visualization.
Usage
The Chat component is composed of several sub-components that work together to create a complete chat experience.
Basic Chat
With AI Reasoning
<div class="chat-container">
<flx-chat-header
title="Customer Support"
subtitle="Online">
</flx-chat-header>
<div class="chat-messages">
<flx-chat-message
*ngFor="let message of messages"
[content]="message.content"
[sender]="message.sender"
[timestamp]="message.timestamp">
</flx-chat-message>
</div>
<flx-chat-input
placeholder="Type your message..."
(messageSent)="onMessageSent($event)">
</flx-chat-input>
</div>
<div class="chat-container">
<flx-chat-header title="AI Assistant"></flx-chat-header>
<div class="chat-messages">
<flx-chat-message
*ngFor="let message of messages"
[content]="message.content"
[sender]="message.sender"
[avatar]="message.avatar">
</flx-chat-message>
<flx-chat-reasoning
*ngIf="showReasoning"
[steps]="reasoningSteps"
[expanded]="true">
</flx-chat-reasoning>
</div>
<flx-chat-input
[disabled]="isProcessing"
(messageSent)="onMessageSent($event)">
</flx-chat-input>
</div>
Components
Displays the chat title, subtitle, and optional actions.
Selector
Properties
Main title displayed in the chat header.
Secondary text displayed below the title (e.g., status, participant count).
URL or path to an avatar image displayed in the header.
Template reference for custom action buttons in the header.
Example
<flx-chat-header
title="Product Team"
subtitle="5 members online"
[actions]="headerActions">
</flx-chat-header>
<ng-template #headerActions>
<button flxButton appearance="ghost" icon="phone">Call</button>
<button flxButton appearance="ghost" icon="info">Info</button>
</ng-template>
Chat Message
Displays individual messages with sender information and timestamps.
Selector
Properties
The message text content. Supports plain text and HTML.
sender
'user' | 'bot' | 'system'
required
Identifies who sent the message, affecting styling and alignment.
When the message was sent. Displayed in a human-readable format.
Avatar image for the message sender.
status
'sending' | 'sent' | 'delivered' | 'read' | 'failed'
Message delivery status indicator.
Array of reaction emojis for the message.
Example
<flx-chat-message
content="How can I help you today?"
sender="bot"
[timestamp]="message.timestamp"
avatar="/assets/bot-avatar.png"
status="delivered">
</flx-chat-message>
<flx-chat-message
content="I need help with my order"
sender="user"
[timestamp]="message.timestamp"
status="sent">
</flx-chat-message>
Selector
Properties
placeholder
string
default:"'Type a message...'"
Placeholder text displayed when the input is empty.
Disables the input and send button.
Maximum character length for messages.
Shows an attachment button for file uploads.
Shows an emoji picker button.
Automatically resizes the input as content grows.
Events
Emitted when the user sends a message (clicks send or presses Enter).
Emitted when a file is selected for attachment.
Emitted when the user starts or stops typing.
Example
<flx-chat-input
placeholder="Send a message to support..."
[maxLength]="500"
[showAttachment]="true"
[showEmoji]="true"
[disabled]="!isConnected"
(messageSent)="handleMessage($event)"
(attachmentSelected)="handleAttachment($event)"
(typing)="handleTyping($event)">
</flx-chat-input>
Chat Reasoning
Displays AI reasoning steps or thinking process, typically used in AI-powered chats.
Selector
Properties
Array of reasoning steps to display. Each step has a title and description.
Whether the reasoning section is expanded by default.
Whether users can collapse/expand the reasoning section.
title
string
default:"'Reasoning'"
Header text for the reasoning section.
Example
import { Component } from '@angular/core';
interface ReasoningStep {
title: string;
description: string;
status?: 'pending' | 'complete' | 'error';
}
@Component({
selector: 'app-ai-chat',
template: `
<flx-chat-reasoning
title="AI Thinking Process"
[steps]="reasoningSteps"
[expanded]="true"
[collapsible]="true">
</flx-chat-reasoning>
`
})
export class AiChatComponent {
reasoningSteps: ReasoningStep[] = [
{
title: 'Analyzing query',
description: 'Understanding user intent and context',
status: 'complete'
},
{
title: 'Searching knowledge base',
description: 'Finding relevant information from documentation',
status: 'complete'
},
{
title: 'Generating response',
description: 'Crafting a helpful answer based on findings',
status: 'pending'
}
];
}
Complete example
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
interface ChatMessage {
id: string;
content: string;
sender: 'user' | 'bot';
timestamp: Date;
avatar?: string;
}
@Component({
selector: 'app-support-chat',
standalone: true,
imports: [CommonModule],
template: `
<div class="chat-wrapper">
<flx-chat-header
title="Customer Support"
[subtitle]="connectionStatus">
</flx-chat-header>
<div class="chat-messages" #messageContainer>
<flx-chat-message
*ngFor="let msg of messages"
[content]="msg.content"
[sender]="msg.sender"
[timestamp]="msg.timestamp"
[avatar]="msg.avatar">
</flx-chat-message>
<div *ngIf="isTyping" class="typing-indicator">
Support is typing...
</div>
</div>
<flx-chat-input
placeholder="How can we help you?"
[disabled]="!isConnected"
[showAttachment]="true"
(messageSent)="sendMessage($event)">
</flx-chat-input>
</div>
`,
styles: [`
.chat-wrapper {
display: flex;
flex-direction: column;
height: 600px;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 16px;
background: #f9f9f9;
}
.typing-indicator {
color: #666;
font-style: italic;
padding: 8px;
}
`]
})
export class SupportChatComponent {
messages: ChatMessage[] = [];
isConnected = true;
isTyping = false;
get connectionStatus(): string {
return this.isConnected ? 'Online' : 'Connecting...';
}
sendMessage(content: string): void {
const userMessage: ChatMessage = {
id: this.generateId(),
content,
sender: 'user',
timestamp: new Date()
};
this.messages.push(userMessage);
// Simulate bot response
this.isTyping = true;
setTimeout(() => {
this.isTyping = false;
const botMessage: ChatMessage = {
id: this.generateId(),
content: 'Thank you for your message. How can I assist you?',
sender: 'bot',
timestamp: new Date(),
avatar: '/assets/support-avatar.png'
};
this.messages.push(botMessage);
}, 2000);
}
private generateId(): string {
return Math.random().toString(36).substring(7);
}
}
Styling
The chat components are designed to be flexible and can be styled using CSS to match your brand.
/* Custom chat styling */
.chat-wrapper {
--flxTheme-chat-headerBackground: #4f46e5;
--flxTheme-chat-headerColor: #ffffff;
--flxTheme-chat-userMessageBackground: #4f46e5;
--flxTheme-chat-userMessageColor: #ffffff;
--flxTheme-chat-botMessageBackground: #f3f4f6;
--flxTheme-chat-botMessageColor: #111827;
--flxTheme-chat-inputBorderColor: #d1d5db;
}
Accessibility
- All interactive elements support keyboard navigation
- ARIA labels are provided for screen readers
- Message timestamps include full date/time in accessible format
- Focus management ensures smooth keyboard-only usage
The chat input automatically scrolls messages into view when new content is added.