npm package: @spenlep-amzn/amazon-connect-chat-react-components
Description: React component library for building Amazon Connect chat interfaces
Author: Amazon Connect Chat
Latest version: 1.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.

[![NPM Version](https://img.shields.io/npm/v/@spenlep-amzn/amazon-connect-chat-react-components)](https://www.npmjs.com/package/@spenlep-amzn/amazon-connect-chat-react-components)
![Apache 2.0 license](https://img.shields.io/badge/license-Apache%202.0-blue?style=flat-square)
![TypeScript](https://img.shields.io/badge/TypeScript-Ready-green.svg)
![Package size](https://img.shields.io/bundlephobia/minzip/@spenlep-amzn/amazon-connect-chat-react-components)

## 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

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

## Basic Usage

```jsx
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

```jsx
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

```jsx
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](./LICENSE)