# @lg-chat/chat-window

> lg-chat Chat Window

Latest version **6.0.3** (published 2026-10-02) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @lg-chat/chat-window
pnpm add @lg-chat/chat-window
yarn add @lg-chat/chat-window
bun add @lg-chat/chat-window
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 6.0.3 |
| Published | 2026-10-02 |
| First published | 2024-03-14 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 839.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| Maintainers | aitchpgm, stephl3, thesonofthomp, _tsck, shaneeza |

## Links

- npm: https://www.npmjs.com/package/@lg-chat/chat-window
- Repository: https://github.com/mongodb/leafygreen-ui
- Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/chat/chat-window
- Issues: https://jira.mongodb.org/projects/LG/summary
- npm.io page: https://npm.io/package/@lg-chat/chat-window

## Dependencies (6)

- [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.7.1
- [@lg-chat/title-bar](https://npm.io/package/@lg-chat/title-bar.md) ^5.0.3
- [@leafygreen-ui/tokens](https://npm.io/package/@leafygreen-ui/tokens.md) ^4.2.3
- [@leafygreen-ui/emotion](https://npm.io/package/@leafygreen-ui/emotion.md) ^5.2.1
- [@leafygreen-ui/palette](https://npm.io/package/@leafygreen-ui/palette.md) ^5.0.3
- [react-keyed-flatten-children](https://npm.io/package/react-keyed-flatten-children.md) ^2.2.1

## Recent versions

- 6.0.3 (latest) — 2026-10-02
- 6.0.2 — 2026-02-06
- 6.0.1 — 2026-01-21
- 6.0.0 — 2025-11-13
- 5.2.0 — 2025-11-06
- 5.1.0 — 2025-10-31
- 5.0.0 — 2025-10-21
- 4.1.6 — 2025-10-07
- 4.1.5 — 2025-09-25
- 4.1.4 — 2025-09-10
- 4.1.3 — 2025-09-03
- 4.1.2 — 2025-08-28
- 4.1.1 — 2025-08-15
- 4.1.0 — 2025-07-31
- 4.0.4 — 2025-07-18
- … 22 more at https://npm.io/package/@lg-chat/chat-window/versions

## README

# Chat Window

## Installation

### PNPM

```shell
pnpm add @lg-chat/chat-window
```

### Yarn

```shell
yarn add @lg-chat/chat-window
```

### NPM

```shell
npm install @lg-chat/chat-window
```

## Example

```tsx
import { ChatWindow } from '@lg-chat/chat-window';
import { LeafyGreenChatProvider } from '@lg-chat/leafygreen-chat-provider';
import { Message } from '@lg-chat/message';
import { MessageFeed } from '@lg-chat/message-feed';
import { InputBar } from '@lg-chat/input-bar';

const Example = props => {
  const [messages, setMessages] = useState<Array<any>>(baseMessages);

  const handleMessageSend = (messageBody: string) => {
    const newMessage = {
      messageBody,
    };
    setMessages(messages => [...messages, newMessage]);
  };

  return (
    <LeafyGreenChatProvider>
      <ChatWindow title="LG Chat Demo" badgeText="Beta" {...props}>
        <MessageFeed>
          {messages.map(messageFields => (
            <Message key={messageFields.id} {...messageFields} />
          ))}
        </MessageFeed>
        <InputBar onMessageSend={handleMessageSend} />
      </ChatWindow>
    </LeafyGreenChatProvider>
  );
};
```

## Properties

| Prop       | Type                      | Description                                            | Default |
| ---------- | ------------------------- | ------------------------------------------------------ | ------- |
| `darkMode` | `boolean`                 | Determines if the component should render in dark mode | `false` |
| `...`      | `HTMLElementProps<'div'>` | Props spread on root element                           |         |

---
_Source: https://npm.io/package/@lg-chat/chat-window · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._