Custom messages

Register custom message types before ready() with registerCustomMessages and an array of ChatUICustomMessageRegistration so ChatUI can parse and render them.

tip

Register custom message types before app.ready().

ChatUICustomMessageRegistration

Common fields (see the API reference for the full shape):

Property	Type	Required	Description
messageType	string	Yes	Custom name; avoid colliding with reserved built-in message type prefixes. Use an application namespace such as custom:.
isPersisted	boolean	No	When false, items may not appear in history; handle via ChatUIEvents such as UNSCHEDULED_MESSAGES.
isCounted	boolean	No	Whether the message increments unread counts.
digest	function	No	Channel list preview string; pairs with CustomMessageComponent.
component	CustomMessageComponent	No	Bubble Web Component: tagName + elementClass.

Bubbles and Web Components

Implement bubbles by subclassing HTMLElement (optionally with Lit) and register tagName / elementClass on component.

ChatUI prefixes the runtime DOM tag with nc-c-, so tagName: 'gift-message' becomes nc-c-gift-message.

The digest callback receives (message, language). Following the same en_US vs en_UK convention as the Localization page, you can branch preview text per locale id:

TypeScript

import {
  ChatUICustomMessageRegistration,
  ChatUIEvents,
} from '@nexconn/chatui';

class GiftMessageElement extends HTMLElement {
  connectedCallback() {
    this.textContent = '[Gift]';
  }
}

const registration: ChatUICustomMessageRegistration = {
  messageType: 'custom:gift',
  isPersisted: true,
  isCounted: true,
  digest: (_message, language) =>
    language === 'en_UK' ? '[Gift] UK' : '[Gift]',
  component: {
    tagName: 'gift-message',
    elementClass: GiftMessageElement,
  },
};

app.registerCustomMessages([registration]);

Send a custom message

After registration, send through sendMessage with the appropriate SendMessageParams subclass from @nexconn/chat (see Message management).