IMKit 集成

IMKit 在 IMLib 之上提供开箱即用的 UI 组件。你只需要挂载组件并传入数据，即可获得标准聊天界面。

组件能力​

组件作用关键能力
ConversationListView会话列表置顶、未读角标、@ 提醒、免打扰、空态与骨架
ChatView会话页面消息列表 + 输入区 + 下拉加载历史
MessageList消息列表时间分割、气泡、状态、撤回、已读
MessageInput输入区文本、表情、图片、文件、语音、@ 成员
MessageBubble消息气泡按消息类型渲染、长按菜单
Avatar / UnreadBadge / TimeSeparator / MessageStatusIndicator基础元素头像、角标、时间分割、发送状态

快速接入​

import { IMKit } from '@ni-paas/im-web/imkit';

IMKit.mount(document.getElementById('app'), IMKit.ConversationListView, {
  conversations: await client.getConversationList(),
  onSelect: (conversation) => {
    IMKit.mount(document.getElementById('app'), IMKit.ChatView, {
      client,
      conversationType: conversation.conversationType,
      targetId: conversation.targetId,
    });
  },
});
import 'package:impaas_imkit/impaas_imkit.dart';

class ConversationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ConversationListView(
      conversations: conversations,
      onSelect: (conversation) => Navigator.of(context).push(MaterialPageRoute(
        builder: (_) => ChatView(
          client: engine,
          conversationType: conversation.conversationType,
          targetId: conversation.targetId,
        ),
      )),
    );
  }
}
val fragment = ConversationListFragment.newInstance()
supportFragmentManager.beginTransaction()
    .replace(R.id.container, fragment)
    .commit()

主题与定制​

IMKit 通过 Theme 对象统一控制颜色、字体、圆角与间距；组件支持属性级覆盖，不需要修改源码。

IMKit.mount(container, IMKit.ChatView, {
  client,
  conversationType: 1,
  targetId: 'user2',
  theme: { primaryColor: '#2160fd', radius: 8, darkMode: true },
});
ChatView(
  client: engine,
  conversationType: 1,
  targetId: 'user2',
  theme: IMKitTheme(primaryColor: Color(0xFF2160FD), radius: 8),
)

事件与数据源​

  • 会话列表：IMLib.getConversationList + CONVERSATION 事件增量更新；
  • 会话页面：getHistoryMessages 分页 + MESSAGES 事件实时追加；
  • 发送：sendTextMessage / sendImageMessage / sendFileMessage；
  • 未读：clearUnreadCount 清零并同步角标。

平台文档​