Pending Review

Pending Review from User Experience (UX)

Chat Component

Overview

The PWC Chat is a conversation bubble component in the Progress Web Components design system. It provides consistent styling for chat messages and conversation interfaces with support for sender identification and adaptive message alignment across React and Angular applications.

Core Capabilities

• Message Bubble Styling - Consistent visual treatment for chat messages with rounded corners and appropriate spacing
• Sender Identification - Built-in support for distinguishing between user messages and other participants
• Adaptive Alignment - Automatic message positioning based on sender (right-aligned for user, left-aligned for others)
• Flexible Content - Slot-based content system supporting text, media, and interactive elements within messages
• Theme Integration - Seamless integration with design system colors and spacing tokens
• Responsive Design - Adaptive layout that works across desktop and mobile chat interfaces

When to use Chat:

• Build conversational interfaces like customer support chat systems
• Create messaging applications with multiple participants and message threading
• Display chat-like interactions in collaborative tools or comment systems
• Present dialogue or conversation flows in help systems or tutorials

When not to use Chat:

• Simple comment systems where traditional comment styling would be more appropriate
• One-way communication displays like notifications or alerts
• Complex multimedia content that requires custom layout beyond basic chat bubbles

Basic Implementation

React 18React 19+AngularPure JavaScript

import React, { useState } from 'react';
import { PwcChat } from "@progress-i360/pwc-react";

function ChatExample() {
  const [messages, setMessages] = useState([
    { id: 1, text: "Hello! How can I help you?", isMe: false },
    { id: 2, text: "I need help with my account.", isMe: true },
    { id: 3, text: "I'd be happy to assist you.", isMe: false }
  ]);

  return (
      <div style={{ width: '400px', padding: '16px' }}>
        {messages.map(message => (
          <PwcChat key={message.id} me={message.isMe}>
            <div style={{ padding: '8px' }}>
              <div style={{ fontSize: '0.875rem', fontWeight: '500', marginBottom: '4px' }}>
                {message.isMe ? 'You' : 'Support'}
              </div>
              <div>{message.text}</div>
            </div>
          </PwcChat>
        ))}
      </div>
  );
}

import { useState, useCallback } from 'react';
import '@progress-i360/progress-web-components/chat';
import '@progress-i360/progress-web-components/input';
import '@progress-i360/progress-web-components/button';

function TeamChatDemo() {
  const [messages, setMessages] = useState([
    { id: 1, text: "Welcome to the team!", user: "Alice", isMe: false },
    { id: 2, text: "Thanks! Excited to be here.", user: "You", isMe: true },
    { id: 3, text: "Let's get started on the project.", user: "Bob", isMe: false }
  ]);

  const [newMessage, setNewMessage] = useState('');

  const sendMessage = useCallback(() => {
    if (newMessage.trim()) {
      setMessages(prev => [...prev, {
        id: Date.now(),
        text: newMessage,
        user: "You", 
        isMe: true
      }]);
      setNewMessage('');
    }
  }, [newMessage]);

  return (
      <div style={{ width: '350px', height: '400px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '12px', borderBottom: '1px solid #eee' }}>
          <h4 style={{ margin: 0 }}>Team Chat</h4>
        </div>

        <div style={{ flex: 1, overflowY: 'auto', padding: '8px' }}>
          {messages.map(msg => (
            <pwc-chat key={msg.id} me={msg.isMe}>
              <div>
                <strong>{msg.user}:</strong> {msg.text}
              </div>
            </pwc-chat>
          ))}
        </div>

        <div style={{ padding: '12px', borderTop: '1px solid #eee', display: 'flex', gap: '8px' }}>
          <pwc-input
            value={newMessage}
            placeholder="Type message..."
            onInput={(event) => setNewMessage((event.target as HTMLInputElement).value)}
            onKeyDown={(event) => event.key === 'Enter' && sendMessage()}
          ></pwc-input>
          <pwc-button label="Send" onPwcClick={sendMessage}></pwc-button>
        </div>
      </div>
  );
}

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@progress-i360/progress-web-components/chat';
import '@progress-i360/progress-web-components/button';

@Component({
  selector: 'chat-demo',
  template: `
    <pwc-chat [me]="true">
      <p>{{myMessage}}</p>
    </pwc-chat>
    <pwc-chat [me]="false">
      <p>That's a great idea! Let me think about it.</p>
    </pwc-chat>
    <pwc-button label="Send Reply" (pwc-click)="sendReply()"></pwc-button>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class ChatDemo {
  myMessage = "Hello! How's the project coming along?";

  sendReply() {
    const replies = [
      "Thanks for asking! Making good progress.",
      "Almost finished with the current milestone.",
      "Should have an update by end of week."
    ];
    this.myMessage = replies[Math.floor(Math.random() * replies.length)];
  }
}

// Create chat messages with different senders
const userMessage = document.createElement('pwc-chat');
userMessage.setAttribute('me', 'true'); // Message from current user
userMessage.textContent = 'Hello! How can I help you today?';

const otherMessage = document.createElement('pwc-chat');
otherMessage.setAttribute('me', 'false'); // Message from other person
otherMessage.textContent = 'Thanks for reaching out! I have a question.';

// Create chat container
const chatContainer = document.createElement('div');
chatContainer.style.width = '300px';
chatContainer.style.padding = '16px';

// Add messages to container
chatContainer.appendChild(otherMessage);
chatContainer.appendChild(userMessage);

// Add to page
document.body.appendChild(chatContainer);

Usage Patterns

• Customer Support Interfaces - Build responsive chat systems for customer service with agent and customer message differentiation
• Team Collaboration Tools - Create internal messaging interfaces for project discussions and team communication
• Help and Tutorial Systems - Design conversational help interfaces that guide users through processes step-by-step
• Interactive Comment Systems - Implement threaded conversations and discussions with proper visual hierarchy

Best Practices

Content Strategy Guidelines

• Clear Sender Identification - Always provide clear visual distinction between different message senders using the me property
• Consistent Message Structure - Maintain consistent content structure within chat bubbles including timestamps and sender information
• Accessible Content - Ensure message content is properly structured for screen readers and keyboard navigation
• Message Grouping - Consider grouping consecutive messages from the same sender to reduce visual clutter

Performance Optimization

• Virtual Scrolling - Implement virtual scrolling for chat interfaces with large message histories to maintain performance
• Message Batching - Load messages in batches rather than all at once to improve initial render times
• Efficient Updates - Use proper key props and avoid unnecessary re-renders when adding new messages
• Image and Media Optimization - Optimize images and media content within chat messages for faster loading

Integration Architecture

• State Management - Integrate with your application's state management system for persistent chat history
• Real-time Updates - Implement WebSocket or similar real-time communication for live message updates
• Message Threading - Design message data structures to support threading and conversation organization
• Accessibility Support - Ensure proper ARIA labels and semantic structure for chat interfaces

Common Use Cases

Customer Support Chat Systems

• Implement live chat widgets for customer service with proper agent identification and response management
• Design escalation flows that allow seamless handoffs between automated systems and human agents
• Create chat history persistence that allows customers to resume conversations across sessions

Team Communication Platforms

• Build internal messaging systems with support for channels, direct messages, and group conversations
• Implement mention systems and notification management for team collaboration workflows
• Design message search and filtering capabilities for large conversation histories

Interactive Help Systems

• Create conversational onboarding flows that guide new users through product features
• Build FAQ chat interfaces that provide contextual help based on user questions
• Design tutorial systems that use chat-like interactions to teach complex processes

Troubleshooting

Common Issues

Message Alignment Problems

Problem: Messages don't align properly or the me property doesn't affect visual positioning. Solution: Verify that the me boolean property is correctly set for each chat component. Check that CSS styles aren't overriding the default alignment behavior. Ensure parent containers have adequate width for proper message positioning.

Content Overflow Issues

Problem: Long messages or wide content breaks the chat bubble layout. Solution: Implement proper word-wrapping and text overflow handling within chat message content. Use CSS word-wrap: break-word and overflow-wrap: break-word to handle long text strings. Consider implementing truncation for very long messages.

Scroll Behavior Problems

Problem: Chat container doesn't auto-scroll to new messages or scroll position is inconsistent. Solution: Implement proper scroll-to-bottom logic when new messages are added. Use scrollIntoView() or manual scrollTop management. Consider using IntersectionObserver to detect when users have scrolled up to prevent auto-scrolling interruptions.

Performance with Large Message History

Problem: Chat interface becomes slow or unresponsive with many messages. Solution: Implement virtual scrolling or pagination to limit rendered messages. Use proper React keys or Angular trackBy functions to optimize re-renders. Consider lazy loading older messages and unloading messages outside the viewport.

Implementation Support

• Storybook Examples - Interactive chat component examples with different message types and conversation flows
• Design System Integration - Consistent styling and spacing that aligns with PWC design tokens and theming
• Accessibility Guidelines - Complete WCAG compliance support with proper semantic markup and keyboard navigation

Resources

Storybook Documentation

For comprehensive API documentation, interactive examples, and testing tools: 📖 View Complete API Documentation in Storybook →

---

This guide provides high-level implementation guidance. For detailed API specifications and interactive examples, visit our Storybook documentation.