@spenlep-amzn/amazon-connect-chat-react-components v1.0.0-beta

📣 Notice: this is an unofficial project, please do not use in production

Amazon Connect Chat React Components

A modular React component library for building chat interfaces that work with Amazon Connect.

Features

• 🧩 Modular Building Blocks: Use individual components or compose them together
• 🔄 State Management Hooks: Ready-to-use chat session management
• 🎨 Customizable Theming: Style components to match your branding
• ♿ Accessibility: Built with a11y in mind
• 🚀 Lightweight: Optimized bundle size with tree-shakeable imports

Roadmap

• Build and release src/components
• Build and release src/hooks
• Build and release src/themes
• Create documentation in docs/ (auto-generated from JSDoc comments)
• Add jest-axe for a11y testing and eslint a11y

Installation

npm install amazon-connect-chat-react-components
# or
yarn add amazon-connect-chat-react-components

Basic Usage

import React, { useState } from "react";
import {
  ChatContainer,
  ChatTranscript,
  ChatComposer,
  Header,
  useChatSession,
  defaultTheme,
} from "amazon-connect-chat-react-components";

const ChatWidget = () => {
  const { status, messages, initializeChat, sendMessage, endChat } =
    useChatSession();

  const [inputText, setInputText] = useState("");

  const handleSendMessage = (e) => {
    e.preventDefault();
    if (inputText.trim()) {
      sendMessage(inputText);
      setInputText("");
    }
  };

  const handleStartChat = () => {
    initializeChat({
      instanceId: "your-instance-id",
      contactFlowId: "your-contact-flow-id",
      apiGatewayEndpoint: "your-api-endpoint",
      name: "Customer Name",
    });
  };

  return (
    <ChatContainer theme={defaultTheme}>
      <Header
        title="Customer Support"
        onClose={status === "connected" ? endChat : undefined}
      />

      {status === "idle" && (
        <button onClick={handleStartChat}>Start Chat</button>
      )}

      {(status === "connecting" || status === "connected") && (
        <>
          <ChatTranscript
            messages={messages}
            customerName="Customer Name"
            agentName="Support Agent"
          />

          <ChatComposer
            value={inputText}
            onChange={(e) => setInputText(e.target.value)}
            onSubmit={handleSendMessage}
            placeholder="Type a message..."
            disabled={status !== "connected"}
          />
        </>
      )}
    </ChatContainer>
  );
};

export default ChatWidget;

Advanced Customization

You can customize the appearance of all components through:

• Theme objects: Pass custom theme properties
• @emotion/styled: Extend the default styles
• CSS classes: Override styles with your own classes

import {
  MessageBubble,
  defaultTheme,
} from "amazon-connect-chat-react-components";

// Customize via theme
const customTheme = {
  ...defaultTheme,
  colors: {
    ...defaultTheme.colors,
    customerBubble: "#FF5722",
    customerText: "#FFFFFF",
  },
};

// Use the component with custom theme
<MessageBubble content="Hello there!" isCustomer={true} theme={customTheme} />;

Styling with Emotion

import styled from "@emotion/styled";
import { MessageBubble } from "amazon-connect-chat-react-components";

// Extend an existing component with custom styles
const CustomMessageBubble = styled(MessageBubble)`
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  margin: 8px 0;

  &:hover {
    transform: translateY(-2px);
  }
`;

License

Apache 2.0