Class NCChatUIApplication

// Enable message read status display
app.setCommandSwitch(ChatUICommand.SHOW_MESSAGE_STATE, true);

// Enable @all functionality in groups
app.setCommandSwitch(ChatUICommand.AT_ALL, true);

const isEnabled = app.getCommandSwitch(ChatUICommand.SHOW_MESSAGE_STATE);
console.log('Message state display:', isEnabled);

// Hide channel bar on mobile
app.setChannelBarSwitch(false);

// Hide back button in channel detail
app.setChannelDetailBackSwitch(false);

// Set custom title
app.setChannelBarTitle('My Conversations');

// Reset to default
app.setChannelBarTitle(undefined);

app.registerCustomMessages([
  {
    messageType: 'custom:gift',
    isPersisted: true,
    isCounted: true,
    digest: (message, language) => {
      return language === 'en_US' ? '[Gift]' : '[礼物]';
    },
    component: {
      tag: 'custom-gift-message',
      constructor: CustomGiftMessageElement
    }
  }
]);

const enEntries = app.cloneLanguageEntries('en_US');
console.log(enEntries['message.menu.item.copy']); // "Copy"

// Register custom language
app.registerLanguagePack('fr_FR', {
  'message.menu.item.copy': 'Copier',
  'message.menu.item.delete': 'Supprimer',
  // ... more entries
}, 'ltr');

// Override existing entries
app.registerLanguagePack('en_US', {
  'message.menu.item.copy': 'Copy Message'
});

// Switch to English
app.setLanguage('en_US');

// Switch to Chinese
app.setLanguage('zh_CN');

const currentLang = app.getLanguage();
console.log('Current language:', currentLang); // "en_US"

const languages = app.getSupportedLanguages();
console.log('Supported languages:', languages); // ["en_US", "zh_CN"]

app.setPushConfigHook((message) => {
  return {
    pushTitle: `New message from ${message.senderUserId}`,
    pushContent: message.content?.text || '[Message]',
    pushData: JSON.stringify({ messageId: message.messageUId })
  };
});

app.updateUserProfile({
  userId: 'user123',
  name: 'John Doe',
  portraitUri: 'https://example.com/avatar.png'
});

app.updateGroupProfile({
  groupId: 'group456',
  name: 'Project Team',
  portraitUri: 'https://example.com/group.png',
  memberCount: 10
});

// Set user as online
app.updateUserOnlineStatus('user123', true);

// Set user as offline
app.updateUserOnlineStatus('user123', false);

This operation only affects local cache and UI display, does not send requests to server.

app.updateGroupMembers('group456', [
  { userId: 'user1', nickname: 'Alice' },
  { userId: 'user2', nickname: 'Bob' },
  { userId: 'user3', nickname: 'Charlie' }
]);

This operation only affects local cache and UI display, does not send requests to server.

app.addGroupMembers('group456', [
  { userId: 'user4', nickname: 'David' },
  { userId: 'user5', nickname: 'Eve' }
]);

This operation only affects local cache and UI display, does not send requests to server.

app.removeGroupMembers('group456', ['user4', 'user5']);

const menu = app.cloneChannelsMenu();
console.log('Channel menu items:', menu);

const menu = app.cloneChannelsMenu();
menu.items.push({
  {
    id: 'custom:archive',
    icon: 'archive-icon.svg'
  }
]);
app.setChannelsMenu(menu);

const menu = app.cloneMessageMenu();
console.log('Message menu items:', menu);

const menu = app.cloneMessageMenu();
menu.items.push({
  {
    id: 'custom:translate',
    icon: 'translate-icon.svg'
  }
});
app.setMessageMenu(menu);

// Open a private chat
await app.openChannel(new DirectChannelIdentifier('user123'), true);

// Open a group chat
await app.openChannel(new GroupChannelIdentifier('group456'), true);

await app.deleteChannel(channelIdentifier);

const channel = app.getOpenedChannel();
if (channel) {
  console.log('Current channel:', channel.channelIdentifier);
}

When users click an extension, the ChatUIEvents.CHANNEL_PANEL_EXTENSION_TOUCH event will be dispatched.

app.setChannelPanelExtensions([
  {
    id: 'video-call',
    icon: 'video-icon.svg',
    filter: (model) => model.channelType === ChannelType.PRIVATE
  },
  {
    id: 'group-settings',
    icon: 'settings-icon.svg',
    filter: (model) => model.channelType === ChannelType.GROUP
  }
]);

// Listen to extension clicks
app.addEventListener(ChatUIEvents.CHANNEL_PANEL_EXTENSION_TOUCH, (event) => {
  console.log('Extension clicked:', event.data.id);
});

const menu = app.cloneInputMenu();
console.log('Input menu items:', menu.items);

const menu = app.cloneInputMenu();
menu.items.push({
  id: 'custom:location',
  order: 10,
  icon: 'location-icon.svg'
});
app.setInputMenu(menu);

const config = app.cloneMessageBubbleConfig();
console.log('Bubble configuration:', config);

app.setMessageBubbleConfig({
  layout: BubbleLayout.LEFT_RIGHT,
  redius: 12,
  backgroundColorForMyself: 0x007AFF,
  backgroundColorForOthers: 0xE5E5EA,
  showMyProfileInGroupChannel: true,
  showOthersNameInGroupChannel: true
});

const config = app.cloneChannelsItemConfig();
console.log('Channel item config:', config);

const config = app.cloneChannelsItemConfig();
config.showUnreadBadge = true;
config.showTimestamp = true;
app.setChannelsItemConfig(config);

const libraries = app.cloneImageEmojiLibraries();
console.log('Emoji libraries:', libraries);

const libraries = app.cloneImageEmojiLibraries();
libraries.push({
  id: 'custom-emoji-1',
  icon: 'emoji-lib-icon.svg',
  itemWidth: 60,
  itemHeight: 60,
  order: 0,
  items: [
    {
      thumbnail: 'data:image/png;base64,...',
      thunbnailWidth: 60,
      thunbnailHeight: 60,
      url: 'https://example.com/emoji1.png',
      width: 120,
      height: 120
    }
  ]
});
app.setImageEmojiLibraries(libraries);

const library = app.cloneChatEmojiLibrary();
console.log('Emoji library:', library);

const library = app.cloneChatEmojiLibrary();
library.items.push('😀', '😃', '😄', '😁', '😆');
app.setChatEmojiLibrary(library);

This method registers all custom elements and marks the application as ready. Must be called after all configuration methods.

const app = NCChatUIApplication.initialize({ ... });

// Configure before ready
app.setCommandSwitch(ChatUICommand.SHOW_MESSAGE_STATE, true);
app.setMessageBubbleCfg({ layout: BubbleLayout.LEFT_RIGHT });

// Mark as ready
app.ready();

// Now you can call after-ready methods
await app.openChannel(new DirectChannelIdentifier('user123'));

if (app.ifReady()) {
  console.log('App is ready');
  await app.openChannel({ ... });
} else {
  console.log('App is not ready yet');
}

const userId = app.getCurrenUserId();
console.log('Current user:', userId);

Removes all event listeners and destroys internal modules

// Clean up when unmounting
app.destroy();