用途
该技能解决的是“CometChat 聊天放在 React 应用的什么位置、每种布局如何接线”的问题。它基于 @cometchat/chat-uikit-react@7，只使用 cometchat-react-v7-core/-components 中定义的组件。它假定已阅读并掌握 cometchat-react-v7-core（安装、init→login→render、provider）与 cometchat-react-v7-components（组件目录）。
适用触发场景包括：构建完整聊天应用、添加用户/群组/通话标签页与侧面板、将聊天作为侧边栏、全屏聊天页面、聊天弹窗组件、将聊天嵌入仪表盘。注意：无明确范围的“添加聊天”默认采用核心界面（列表 ↔ 消息面板），仅在用户要求时才扩展为组合应用。
主要能力（放置模式）
核心界面（无明确范围“添加聊天”的默认）：在 CometChatErrorBoundary → 单个 CometChatProvider 内，采用两栏布局：CometChatConversations 列表 ↔ 消息面板（CometChatMessageHeader + CometChatMessageList + CometChatMessageComposer）。会话串回复面板与聊天内限定范围的消息搜索默认接线（仅可选择性关闭），全局会话搜索栏接线或隐藏，移动端折叠为单面板。由一个小型宿主状态对象协调 {选中的会话、当前侧视图（会话串 | 聊天内搜索 | 无）}。
扩展为完整组合应用（按需）：在 CometChatErrorBoundary → 单个 CometChatProvider 下，采用三栏布局：选择器列（当前标签页的列表——CometChatConversations / CometChatUsers / CometChatGroups / CometChatCallLogs——加标签栏）、消息面板、互斥的侧面板（用户/群组详情、会话串 CometChatThreadHeader + 列表/输入框，或限定范围的 CometChatSearch），并在根节点挂载 CometChatIncomingCall。由宿主状态对象协调 {活动标签页、选中的用户/群组、会话串父级、当前侧面板}。
侧边栏/分栏：会话列表固定在侧面板，消息面板填充其余区域，选择状态连接列表与消息面板。
弹窗/浮动组件：切换按钮将聊天面板挂载到覆盖层；CometChatProvider 保持在应用根节点，使 init/login 在打开/关闭间持续。
嵌入面板：将消息组件放入现有页面区域，复用宿主布局/容器。
使用方式
两个生产级配方（完整 TSX + 三栏 CSS）位于 references/recipes.md，构建时加载：核心界面配方（默认）与组合应用配方（扩展目标）。两者编码相同的不变量：选择有三项义务——渲染面板、在列表中反映选中（传 activeConversation/activeUser/activeGroup 使行高亮）、每个打开的侧面板可关闭（接线 onBack/onClose）。列表头部操作（“新聊天”/“创建群组”）放在列表的 headerView 中，该属性会替换默认头部，因此需在内部同时渲染标题与按钮。
响应式/移动端（任何多面板布局强制要求）：每个显示多个面板的模式在小视口必须折叠为单屏。移动端为导航栈：会话列表 → 点击会话 → 消息面板全屏替换列表 → 点击头部 → 资料/会话串面板替换消息面板。宽视口下同一状态并排渲染。复用内置返回按钮：CometChatMessageHeader 提供 hideBackButton（默认 false）与 onBack()。移动端将 onBack 接线为清除选择（返回列表）并保持按钮可见；宽屏设置 hideBackButton。技能提供 SSR 防护的 useIsMobile 断点钩子。原生（RN/Flutter）使用平台导航器（栈导航），每路由一屏，而非 Web 分栏视图。
布局接线：每种放置都需满足无回流表面标准——固定与内容无关的高度（全屏 → 100dvh；侧边栏/分栏 → 视口或 flex/grid 提供的高度；弹窗/嵌入 → 固定高度如 600px 或已定尺寸的 grid/flex 单元，绝不用 min-height/auto），准备祖先链，用 min-height:0/overflow:hidden 设定列尺寸。CometChatProvider 保持在稳定祖先（不随路由/切换重新挂载）。在宿主状态中管理选中的会话/用户/群组并传给消息组件。复用应用现有路由/布局，只添加接线，不重写。覆盖层/伴随面板应在其触发所在的面板内打开，而非全屏；仅移动端单面板时全屏替换才正确。
适用场景
需要决定聊天在 React 应用中的位置并接线布局的开发者；需要全屏聊天页、侧边栏/分栏、弹窗/浮动组件或嵌入面板的场景；需要从核心界面扩展为含标签页、侧面板与来电的完整聊天应用的场景。
限制
基于 @cometchat/chat-uikit-react@7，仅使用 cometchat-react-v7-core/-components 中定义的组件。技能本身不引入新包（安装由 core 覆盖）。组件套件没有响应式外壳（无 WithMessages/CometChatUI），需自行组合。具体选择属性需从组件的 .md 孪生文件获取。常见陷阱包括：每次路由/切换重新挂载 CometChatProvider、在选中会话前渲染消息面板、嵌套多个 provider、发布无小视口折叠的固定并排布局、未用 CometChatErrorBoundary 包裹、表面随内容加载而增长、在普通“添加聊天”时过度交付完整组合应用。构建完成后以共享的三选项可选菜单结束并等待选择：① 添加另一功能 · ② 自定义主题 · ③ 手动测试。