## class: `WyMessengerConversations`, `wy-messenger-conversations`

Weavy messenger component to render multiple one-to-one conversations, group chats or agent conversations.

**Component Layout**

The component is [block-level](https://developer.mozilla.org/en-US/docs/Glossary/Block-level_content) with pre-defined CSS styling to adapt to flex- and grid-layouts as well as traditional flow-layouts.
It's usually recommended to use a proper flex-layout for the container you are placing the component in for a smooth layout integration.

The height grows with the content per default. Content is automatically loaded during scrolling when the last content becomes visible (aka infinite scrolling).
If placed in a flex- or grid-layout or if an explicit height is set, the component becomes scrollable.

The content within the components is per default aligned to the edges of it's own *box* and designed to not be placed next to a edge or border.
It's recommended to adjust the layout with your default padding. Setting the `--wy-padding-outer` to your default padding will allow the component to still fill the are where it's placed,
but with proper padding within the scrollable area of the component.
If you want to make the component go all the way to the edges without padding or any outermost roundness instead,
set `--wy-padding-outer: 0;` and `--wy-border-radius-outer: 0;` to make the component fit nicely with the edge.

You can add additional styling using *CSS Custom Properties* and *CSS Shadow Parts* and further customization using *slots*.

**Used sub components:**

*   [`<wy-conversation-list>`](./components/wy-conversation-list)
*   [`<wy-conversation-new>`](./components/wy-conversation-new)

### Fields

| Name             | Type                          | Default            | Description                                                                                                            | Inherited From     |
| ---------------- | ----------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------- | ------------------ |
| `agent`          | `string \| undefined`         |                    | Agent uid filter. When set, conversations are limited to the agent chat.                                               | WeavyTypeComponent |
| `unread`         | `number`                      |                    | Current unread conversation count.                                                                                     |                    |
| `conversationId` | `number \| null \| undefined` | `null`             | Active conversation id.                                                                                                |                    |
| `link`           | `LinkType \| undefined`       |                    | Any provided link that should be loaded, shown and highlighted.                                                        | WeavyTypeComponent |
| `features`       | `string \| undefined`         |                    | Config for enabling/disabling specific features in the weavy component.&#xA;Prefix a feature with minus to disable it. | WeavyTypeComponent |
| `contextualData` | `string \| undefined`         |                    | Contextual data for agents to reference. Provide descriptive data for optimal results.&#xA;&#xA;### Examples           | WeavyTypeComponent |
| `annotations`    | `AnnotationsAppearanceType`   | `"buttons-inline"` | Appearance of annotations.                                                                                             | WeavyTypeComponent |
| `enterToSend`    | `EnterToSend`                 | `"auto"`           | Enter-to-send keymap in the editor. \`"modifier"\` is \`Enter\` combined with \`Ctrl\` or \`Cmd\`.                     | WeavyTypeComponent |
| `reactions`      | `string`                      | `"😍 😎 😉 😜 👍"` | A space separated string of available reaction emojis in unicode.                                                      | WeavyTypeComponent |
| `weavy`          | `WeavyType \| undefined`      |                    | The consumed weavy context.                                                                                            | WeavyComponent     |
| `contextId`      | `ContextIdType`               |                    | Contextual guid that is unique for the client context.                                                                 | WeavyComponent     |
| `user`           | `UserType \| undefined`       |                    | The current user.                                                                                                      | WeavyComponent     |

### Methods

| Name                 | Description                                                                                   | Parameters                | Return                    | Inherited From |
| -------------------- | --------------------------------------------------------------------------------------------- | ------------------------- | ------------------------- | -------------- |
| `createConversation` | Creates a new conversation.&#xA;&#xA;When in agent mode, a conversation is created instantly. | `members: MemberIdType[]` |                           |                |
| `selectMembers`      | Opens the select member dialog to let the user choose members.                                |                           |                           |                |
| `whenUser`           | Resolves when current user data is available.                                                 |                           | `Promise<UserType>`       | WeavyComponent |
| `whenWeavy`          | Resolves when a weavy context is available.                                                   |                           | `Promise<WeavyType>`      | WeavyComponent |
| `whenReady`          | Resolves when the component has rendered first time.                                          |                           | `Promise<WeavyComponent>` | WeavyComponent |

### Events

| Name        | Type                | Description                                                                         | Inherited From |
| ----------- | ------------------- | ----------------------------------------------------------------------------------- | -------------- |
| `wy-action` | `WyActionEventType` | Emitted when a conversation is created or an action is performed on a conversation. |                |
| `wy-unread` | `WyUnreadEventType` | Fired when the number of unread notifications change.                               |                |
| `ready`     | `CustomEvent`       | When the component has rendered.                                                    | WeavyComponent |

### Attributes

| Name             | Field          | Inherited From     |
| ---------------- | -------------- | ------------------ |
| `agent`          | agent          | WeavyTypeComponent |
| `conversationId` | conversationId |                    |
| `link`           | link           | WeavyTypeComponent |
| `features`       | features       | WeavyTypeComponent |
| `contextualData` | contextualData | WeavyTypeComponent |
| `annotations`    | annotations    | WeavyTypeComponent |
| `enterToSend`    | enterToSend    | WeavyTypeComponent |
| `reactions`      | reactions      | WeavyTypeComponent |

### Slots

| Name               | Description                                                      |
| ------------------ | ---------------------------------------------------------------- |
| `actions`          | Buttons placed in the top right of the conversation list.        |
| `conversation-new` | The button for creating a new conversation. Replaces the button. |

<details><summary>Private API</summary>

### Fields

| Name                         | Privacy   | Type                                                               | Default                                                                                                                   | Description                                        | Inherited From     |
| ---------------------------- | --------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------------------ |
| `componentTypes`             | protected | `AppTypeGuid[]`                                                    | `[AppTypeGuid.ChatRoom, AppTypeGuid.PrivateChat]`                                                                         | Conversation types included in the messenger list. | WeavyTypeComponent |
| `visibilityElement`          | protected | `Element \| undefined`                                             |                                                                                                                           | Element to match visibility on.                    | WeavyTypeComponent |
| `#data`                      | private   | `ContextDataType[] \| undefined`                                   |                                                                                                                           |                                                    | WeavyTypeComponent |
| `#annotations`               | private   | `WeavyComponentSettingProps["annotations"] \| undefined`           |                                                                                                                           |                                                    | WeavyTypeComponent |
| `#enterToSend`               | private   | `EnterToSend \| undefined`                                         |                                                                                                                           |                                                    | WeavyTypeComponent |
| `#reactions`                 | private   | `WeavyComponentSettingProps["reactions"] \| undefined`             |                                                                                                                           |                                                    | WeavyTypeComponent |
| `#resolveContextDataBlobs`   | private   | `(blobs: ContextDataBlobsType) => void \| undefined`               |                                                                                                                           |                                                    | WeavyTypeComponent |
| `#whenContextDataBlobs`      | private   |                                                                    | `new Promise<ContextDataBlobsType>((r) => { this.#resolveContextDataBlobs = r; })`                                        |                                                    | WeavyTypeComponent |
| `#resolveComponentFeatures`  | private   | `(componentFeatures: ComponentFeaturePolicy) => void \| undefined` |                                                                                                                           |                                                    | WeavyTypeComponent |
| `#whenComponentFeatures`     | private   |                                                                    | `new Promise<ComponentFeaturePolicy>((r) => { this.#resolveComponentFeatures = r; })`                                     |                                                    | WeavyTypeComponent |
| `#resolveLink`               | private   | `(link: LinkType) => void \| undefined`                            |                                                                                                                           |                                                    | WeavyTypeComponent |
| `#whenLink`                  | private   |                                                                    | `new Promise<LinkType>((r) => { this.#resolveLink = r; })`                                                                |                                                    | WeavyTypeComponent |
| `#resolveSettings`           | private   | `(settings: WeavyComponentSettingsType) => void \| undefined`      |                                                                                                                           |                                                    | WeavyTypeComponent |
| `#whenSettings`              | private   |                                                                    | `new Promise<WeavyComponentSettingsType>((r) => { this.#resolveSettings = r; })`                                          |                                                    | WeavyTypeComponent |
| `#contextDataRefs`           | private   | `Map<ContextDataType, DataRefType>`                                | `new Map()`                                                                                                               |                                                    | WeavyTypeComponent |
| `#uploadContextDataMutation` | private   |                                                                    | `new MutationController<BlobType, Error, MutateFileProps, FileMutationContextType>(this)`                                 |                                                    | WeavyTypeComponent |
| `#mutatingContextData`       | private   |                                                                    | `new MutationStateController< BlobType \| FileType \| EmbedType, Error, MutateFileProps, FileMutationContextType >(this)` |                                                    | WeavyTypeComponent |
| `#resolveContextId`          | private   | `(contextId: ContextIdType) => void \| undefined`                  |                                                                                                                           |                                                    | WeavyComponent     |
| `#whenContextId`             | private   |                                                                    | `new Promise<ContextIdType>((r) => { this.#resolveContextId = r; })`                                                      |                                                    | WeavyComponent     |
| `#resolveUser`               | private   | `(user: UserType) => void \| undefined`                            |                                                                                                                           |                                                    | WeavyComponent     |
| `#whenUser`                  | private   |                                                                    | `new Promise<UserType>((r) => { this.#resolveUser = r; })`                                                                |                                                    | WeavyComponent     |
| `#resolveWeavy`              | private   | `(weavy: WeavyType) => void \| undefined`                          |                                                                                                                           |                                                    | WeavyComponent     |
| `#whenWeavy`                 | private   |                                                                    | `new Promise<WeavyType>((r) => { this.#resolveWeavy = r; })`                                                              |                                                    | WeavyComponent     |
| `#resolveReady`              | private   | `(component: WeavyComponent) => void \| undefined`                 |                                                                                                                           |                                                    | WeavyComponent     |
| `#whenReady`                 | private   |                                                                    | `new Promise<WeavyComponent>((r) => { this.#resolveReady = r; })`                                                         |                                                    | WeavyComponent     |
| `#userQuery`                 | private   |                                                                    | `new QueryController<UserType>(this)`                                                                                     |                                                    | WeavyComponent     |

</details>

<hr/>

## Exports

| Kind                        | Name                         | Declaration              | Module                            | Package |
| --------------------------- | ---------------------------- | ------------------------ | --------------------------------- | ------- |
| `js`                        | `WyMessengerConversations`   | WyMessengerConversations | lib/wy-messenger-conversations.ts |         |
| `custom-element-definition` | `wy-messenger-conversations` | WyMessengerConversations | lib/wy-messenger-conversations.ts |         |
