# Direct Chat Plugin

The DirectChat plugin toggles the contacts pane in a direct chat widget.

##### Usage

This plugin is activated via data attributes.

Data API

Add `data-lte-toggle="chat-pane"` to a button inside a `.direct-chat` container to toggle the contacts list.

    <div class="card direct-chat">
      <div class="card-header">
        <h3 class="card-title">Direct Chat</h3>
        <div class="card-tools">
          <button type="button" class="btn btn-tool" data-lte-toggle="chat-pane" title="Toggle Contacts">
            <i class="bi bi-people-fill"></i>
          </button>
        </div>
      </div>
      <div class="card-body">
        <div class="direct-chat-messages">
          <!-- Chat messages go here -->
        </div>
        <div class="direct-chat-contacts">
          <!-- Contacts list goes here -->
        </div>
      </div>
    </div>

##### Events

Event | Description
--- | ---
`expanded.lte.direct-chat` | Fired when the contacts pane is opened.
`collapsed.lte.direct-chat` | Fired when the contacts pane is closed.

##### CSS Classes

Class | Description
--- | ---
`direct-chat-contacts-open` | Applied to the `.direct-chat` container when the contacts pane is visible.

##### Programmatic API

    import { DirectChat } from "admin-lte"

    const chat = document.querySelector(".direct-chat")
    const dc = new DirectChat(chat)

    dc.toggle()  // show or hide the contacts pane

###### Methods

Method | Returns | Description
--- | --- | ---
`toggle()` | `void` | Toggles the `direct-chat-contacts-open` class on the `.direct-chat` container. Fires `expanded.lte.direct-chat` or `collapsed.lte.direct-chat`.

The constructor takes no config object — pass only the `.direct-chat` element.