Skip to content

Pending Review

Pending Review from User Experience (UX)

Chat Window Component

Overview

The PWC Chat Window is a container component in the Progress Web Components design system. It provides a scrollable, auto-updating chat interface that manages multiple chat messages with automatic scroll behavior and optimized layout for conversation flows across React and Angular applications.

Core Capabilities

  • Auto-Scroll Management - Automatic scrolling to the latest message when new content is added to the conversation
  • Smooth Scroll Behavior - Built-in smooth scrolling animations for natural conversation flow transitions
  • Vertical Layout Management - Optimized flex column layout with proper spacing between chat messages
  • Overflow Handling - Scrollable container that maintains chat history while keeping the latest messages visible
  • Slot-Based Architecture - Flexible content system that accepts any chat components or custom message layouts
  • Performance Optimization - Efficient DOM updates with lifecycle-aware scroll management

When to use Chat Window:

  • Build complete chat interfaces that need to manage multiple messages in a scrollable container
  • Create conversation flows where new messages should automatically scroll into view
  • Design chat applications that require consistent spacing and layout between message bubbles
  • Implement messaging interfaces that need to maintain chat history with proper scroll behavior

When not to use Chat Window:

  • Single message displays where scrolling behavior is not needed
  • Static message layouts that don't require dynamic content updates
  • Complex chat interfaces that need custom scroll management or virtual scrolling

Basic Implementation

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

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

  return (
      <div style={{ width: '400px', height: '300px', border: '1px solid #ddd', borderRadius: '8px' }}>
        <PwcChatWindow>
          {messages.map(message => (
            <PwcChat key={message.id} me={message.isMe}>
              <div style={{ padding: '8px' }}>
                {message.text}
              </div>
            </PwcChat>
          ))}
        </PwcChatWindow>
      </div>
  );
}

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

function LiveChat() {
  const [messages, setMessages] = useState([
    { id: 1, text: "Welcome! How can I help?", isMe: false, time: "10:00" },
    { id: 2, text: "I have a question about pricing.", isMe: true, time: "10:01" }
  ]);

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

  const addMessage = useCallback(() => {
    if (newMessage.trim()) {
      const message = {
        id: Date.now(),
        text: newMessage,
        isMe: true,
        time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
      };
      setMessages(prev => [...prev, message]);
      setNewMessage('');
    }
  }, [newMessage]);

  return (
      <div style={{ width: '350px', height: '400px', display: 'flex', flexDirection: 'column', border: '1px solid #ddd', borderRadius: '8px' }}>
        <div style={{ padding: '12px', backgroundColor: '#f8f9fa', borderBottom: '1px solid #ddd' }}>
          <h4 style={{ margin: 0 }}>Live Support</h4>
        </div>

        <pwc-chat-window style={{ flex: 1 }}>
          {messages.map(msg => (
            <pwc-chat key={msg.id} me={msg.isMe}>
              <div>
                <div style={{ fontSize: '0.75rem', color: '#666', marginBottom: '4px' }}>
                  {msg.isMe ? 'You' : 'Agent'} - {msg.time}
                </div>
                {msg.text}
              </div>
            </pwc-chat>
          ))}
        </pwc-chat-window>

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

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

@Component({
  selector: 'chat-window-demo',
  template: `
    <pwc-chat-window>
      <pwc-chat [me]="false">
        <p>Welcome to the team chat!</p>
      </pwc-chat>
      <pwc-chat *ngFor="let message of messages" [me]="message.isMe">
        <p>{{message.text}}</p>
      </pwc-chat>
    </pwc-chat-window>
    <pwc-button label="Add Message" (pwc-click)="addMessage()"></pwc-button>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class ChatWindowDemo {
  messages = [
    { text: "Hi everyone!", isMe: true },
    { text: "Hello! How's the project?", isMe: false }
  ];

  addMessage() {
    const newMessages = [
      "Great progress on the features!",
      "Thanks for the update.",
      "Looking forward to the demo.",
      "Should be ready by Friday."
    ];
    const randomMessage = newMessages[Math.floor(Math.random() * newMessages.length)];
    this.messages.push({
      text: randomMessage,
      isMe: Math.random() > 0.5
    });
  }
}

// Create chat window with auto-scroll
const chatWindow = document.createElement('pwc-chat-window');
chatWindow.style.width = '300px';
chatWindow.style.height = '200px';
chatWindow.style.border = '1px solid #ddd';

// Create chat messages
const message1 = document.createElement('pwc-chat');
message1.setAttribute('me', 'false');
message1.textContent = 'Hello! How can I help you?';

const message2 = document.createElement('pwc-chat');
message2.setAttribute('me', 'true');
message2.textContent = 'I need help with my account.';

// Add messages to window (auto-scrolls to bottom)
chatWindow.appendChild(message1);
chatWindow.appendChild(message2);

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

Usage Patterns

  • Customer Support Systems - Build complete support chat interfaces with automatic scrolling to new messages and agent responses
  • Team Collaboration Platforms - Create real-time messaging interfaces where team members can share updates and collaborate effectively
  • Interactive Help Centers - Design guided conversation flows that automatically scroll users through help content and responses
  • Live Chat Widgets - Implement embedded chat widgets that maintain conversation flow and provide smooth user interactions

Best Practices

Content Strategy Guidelines

  • Message Organization - Structure chat content with consistent message headers, timestamps, and sender identification for clear conversation flow
  • Content Hierarchy - Use proper spacing and visual hierarchy to distinguish between different message types and importance levels
  • Progressive Loading - Load initial messages efficiently and implement pagination for longer conversation histories
  • Contextual Information - Include relevant metadata like delivery status, read receipts, and typing indicators when appropriate

Performance Optimization

  • Efficient Scrolling - Leverage the built-in smooth scrolling behavior rather than implementing custom scroll management
  • Virtual Scrolling - For very long conversations, consider implementing virtual scrolling to limit DOM elements
  • Message Batching - Load and render messages in batches to prevent performance issues with large conversation histories
  • Lazy Loading - Implement lazy loading for media content and attachments within chat messages

Integration Architecture

  • State Management - Integrate with application state systems to maintain conversation persistence across sessions
  • Real-time Updates - Connect with WebSocket or similar technologies for live message updates and delivery
  • Accessibility Support - Ensure proper ARIA labels and semantic structure for screen reader compatibility
  • Responsive Design - Design chat windows that adapt gracefully to different screen sizes and orientations

Common Use Cases

Customer Support Interfaces

  • Implement live support chat systems with automatic message scrolling and agent response management
  • Create help desk interfaces that maintain conversation context and provide seamless user assistance
  • Design escalation workflows that preserve chat history when transferring between support agents

Team Communication Tools

  • Build internal messaging platforms with channel-based conversations and real-time collaboration features
  • Create project discussion interfaces that maintain thread context and support file sharing
  • Design notification systems that alert users to new messages while maintaining conversation flow

Interactive Tutorial Systems

  • Develop onboarding chat interfaces that guide users through product features with automated responses
  • Create conversational help systems that provide contextual assistance based on user interactions
  • Build interactive FAQ systems that maintain conversation context while providing relevant information

Troubleshooting

Common Issues

Auto-Scroll Not Working

Problem: New messages don't automatically scroll into view when added to the chat window.

Solution:

  • Ensure the chat window component is properly updated after new content is added. The component automatically handles scrolling in the updated lifecycle method, so verify that DOM updates are triggering component re-renders correctly.

Performance Issues with Long Conversations

Problem: Chat window becomes slow or unresponsive with many messages.

Solution:

  • Implement virtual scrolling or message pagination to limit rendered DOM elements. Consider removing older messages from the DOM while maintaining them in state, and only render messages within the viewport plus a buffer zone.

Scroll Position Jumping

Problem: Scroll position jumps unexpectedly when new messages are added or when content changes.

Solution:

  • Check that the smooth scroll behavior is not conflicting with other scroll management code. Ensure that only the chat window component is managing scroll position, and avoid manual scroll manipulation that might interfere with the built-in behavior.

Layout Issues with Dynamic Content

Problem: Chat window layout breaks when messages contain varying content types or sizes.

Solution:

  • Verify that the flex column layout is properly configured and that child chat components have appropriate sizing. Use consistent spacing and ensure that dynamic content like images or attachments have proper constraints to prevent layout overflow.

Implementation Support

  • Storybook Examples - Interactive examples showcasing different chat window configurations and message types
  • Performance Guidelines - Best practices for handling large conversations and optimizing scroll behavior
  • Integration Patterns - Common patterns for connecting chat windows with real-time messaging systems and state management

Resources

Storybook Documentation

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

For additional implementation guidance or framework-specific questions, consult the PWC Design System documentation or reach out to the component library team.