SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场cometchat-react-v7-components

cometchat-react-v7-components

前端与建站

查看项目

更新于 10-21 20:29

技能介绍

用途

本技能是 CometChat React v7 UI Kit 的组件目录与组合指南，事实基准为 @cometchat/chat-uikit-react@7。适用于以下场景：选择、组合或替换 UI Kit 组件；确认“有哪些组件存在”；定制列表、消息或气泡。

前置条件与安装

安装、凭据、初始化→登录→渲染以及 Provider 等内容由配套技能 cometchat-react-v7-core 覆盖，本技能假定已具备这些前提，且不新增任何包。

组件目录

以下为封闭列表，若名称不在此列表（且不在 web-v7.json）中，则视为不存在，不应使用。

  • 会话与列表：CometChatConversations、CometChatUsers、CometChatGroups、CometChatGroupMembers。
  • 消息：CometChatMessageHeader、CometChatMessageList、CometChatMessageComposer、CometChatMessageBubble、CometChatThreadHeader、CometChatMessageInformation、CometChatReactions、CometChatReactionList。
  • 消息气泡：CometChatTextBubble、CometChatImagesBubble、CometChatVideosBubble、CometChatAudiosBubble、CometChatVoiceNoteBubble、CometChatFilesBubble、CometChatPollBubble、CometChatStickerBubble、CometChatCollaborativeDocumentBubble、CometChatCollaborativeWhiteboardBubble、CometChatCardBubble、CometChatGroupActionBubble、CometChatCallActionBubble、CometChatCallBubble。
  • 通话 UI：CometChatCallButtons、CometChatIncomingCall、CometChatOutgoingCall、CometChatOngoingCall、CometChatCallLogs。
  • 搜索与 AI：CometChatSearch、CometChatAIAssistantChat、CometChatSmartReplies、CometChatConversationStarter、CometChatConversationSummary。
  • 审核 / 通知流：CometChatModerationView、CometChatNotificationFeed、CometChatFlagMessageDialog（终端用户举报/标记对话框）。
  • 交互 / 对话框：CometChatCreatePoll（投票创建对话框，与 CometChatPollBubble 配对）。
  • 基础 / 工具：CometChatProvider、CometChatAvatar、CometChatButton、CometChatFullScreenViewer、CometChatConfirmDialog、CometChatContextMenu、CometChatErrorBoundary。

已移除的幻影组件（2026-07-30 审计，对照已安装的 @cometchat/chat-uikit-react@7.1.0 的 .d.ts）：CometChatTypingIndicator（输入状态渲染在 CometChatMessageHeader 内；CometChatTypingDisplay 是类型而非组件）、CometChatEmojiKeyboard（表情是 CometChatMessageComposer 内置的 EMOJI 按钮）、CometChatMediaRecorder（语音录制内置于 CometChatMessageComposer，hideVoiceRecordingButton 默认 false）、CometChatListItem（列表项是列表组件的内部 item-view）、CometChatToast（没有独立 toast 组件）。注意 CometChatNotifications 是 Chat SDK 类（@cometchat/chat-sdk-javascript，推送令牌注册），不是 UI Kit 组件，不要渲染它。

替换 / 组合插槽

v7 组件是复合组件：通过命名空间子组件（如 Root、View、EmptyState）和 prop 驱动的插槽来组合行为，而非深层 prop 扩散。在输出前，应从组件的 .md 孪生文档获取确切的组合 API 与 props，不要读取 .d.ts。

自定义 UI 应放在组件的 view 插槽内，而不是作为同级元素叠加在其上。四个 drop-in 的稳定 props 与 view 插槽已内置：Conversations 的 headerView/searchView，MessageHeader 的 trailingView/auxiliaryButtonView，MessageList 的 headerView/footerView，Composer 的 auxiliaryButtonView/headerView。在手工实现或将控件挂在组件外部之前，应优先使用这些插槽。

优先配置最高层组件（如 CometChatConversations），而不是用基础组件重建它。

在手工实现 UI 之前，先复用内置触发器。将每个请求的动作首先映射到已有的 prop/回调/插槽；只有在不存在时才添加自定义按钮。发现顺序：文档中的 prop 表及每个 prop 的“何时使用”说明 → 若未描述，获取组件的 .md 孪生文档 → 最后才自定义。已知接线点：CometChatMessageHeader 的 onItemClick（点击头部打开用户/群组资料）与 onSearchOptionClicked（内置搜索按钮，showSearchOption 默认 true）；CometChatConversations 的 onSearchBarClicked（会话搜索）；CometChatMessageList 的 onThreadRepliesClick（线程面板）。

创建群组（宿主自行组合，无 Kit 组件）

v7 不提供 CometChatCreateGroup 组件，创建群组表单由宿主自行构建。应依据 guide-group-chat-setup 指南构建完整表单，且必须提供全部三种群组类型：公开、私有、密码保护，而不仅是公开/私有。密码类型必须包含密码字段，并使用 Chat SDK 创建群组：

import { CometChat } from "@cometchat/chat-sdk-javascript";
// type ∈ CometChat.GROUP_TYPE.PUBLIC | .PRIVATE | .PASSWORD   ("public" | "private" | "password")
const group = new CometChat.Group(guid, groupName, CometChat.GROUP_TYPE.PASSWORD, password); // 4th arg = password (REQUIRED for the PASSWORD type)
await CometChat.createGroup(group);

仅在选择密码类型时显示密码输入框，并在提交前要求填写（公开/私有无需密码）。省略密码选项（只提供公开/私有）属于创建群组缺陷，因为 SDK（Group(guid, name, type, password?)、GROUP_TYPE.PASSWORD）与指南均支持该类型。

被封禁成员——查看与解除封禁（SDK 回退，无 Kit 组件或 UI Kit 文档）

群组详情契约要求可查看被封禁成员，但 v7 不提供被封禁成员的 drop-in：CometChatGroupMembers 仅显示活跃成员（它通过 hideBanMemberOption 暴露封禁动作，而非被封禁视图），UI Kit 指南/组件文档也未覆盖查看被封禁用户。因此需通过 Chat SDK 呈现（UI Kit 优先 → SDK 回退；符号已对照已安装的 7.x SDK 验证，并记录于 sdk/javascript/group-kick-ban-members）。在群组详情中添加受范围限制的“被封禁成员”入口（仅管理员/群主可见）：

import { CometChat } from "@cometchat/chat-sdk-javascript";

// FETCH — paginate by calling fetchNext() again on the SAME request object (max limit 100)
const req = new CometChat.BannedMembersRequestBuilder(guid).setLimit(30).build(); // .setSearchKeyword(kw) optional
const banned = await req.fetchNext();          // Promise<CometChat.GroupMember[]>

// UNBAN (admin/owner only), then refresh the list
await CometChat.unbanGroupMember(guid, uid);   // Promise<boolean>

整个入口应以登录用户的群组范围（管理员/群主）为门槛，普通成员不应看到。被封禁列表每行渲染“解除封禁”动作（成功后刷新）。这与官方示例应用的“Banned Members”部分一致，闭合了封禁往返：封禁（在 CometChatGroupMembers 中）→ 查看被封禁 → 解除封禁。

常见陷阱

  • 默认开启但需接线的功能：drop-in 可能默认渲染一个看似可用的控件，但在宿主接线回调与配套面板之前不会生效。获取 props 时应标记这些项，并选择接线或隐藏，绝不让其成为死胡同。已知情况（v7）：CometChatConversations 的 showSearchBar（默认 true）仅对已加载名称做客户端过滤 → 接线 onSearchBarClicked→CometChatSearch 或设置 showSearchBar={false}；CometChatMessageList 的线程回复指示器 → 接线 onThreadRepliesClick 与线程面板，或设置 hideReplyInThreadOption。
  • 输出契约组件（如 CometChatConversations、CometChatGroupMembers）时未包含其完整的 contracts.json min_capabilities，会得到不完整/不一致的界面——每次都应包含完整最低能力（群组详情界面必须包含 view/add/kick/ban/banned/scope）。
  • 创建群组表单只提供公开/私有：由于没有 Kit 创建群组组件，表单由宿主构建，必须包含密码保护类型（提交时要求密码字段），而不仅是公开/私有。
  • 引用不在目录中的组件（幻影）。在存在 prop/插槽时用基础部件重建 drop-in。假设 v6 的 prop 名称——v7 改变了组合模型，应获取当前 props。

验证是否生效

组件应能渲染且数据填充（列表填充、消息发送）。若为空，确认它位于 CometChatProvider 内且用户已登录。