概述
Chat 聊天容器组件是聊天功能的核心容器组件，负责管理聊天界面的整体布局和状态。组件会根据当前活跃会话的状态来决定是否渲染聊天内容，当没有活跃会话时显示占位符内容。组件内部使用 ChatProvider 提供聊天上下文，为子组件提供会话相关的状态和方法。
Chat 组件具有自动检测是否有激活的会话的能力，如果当前没有任何激活的会话，将会展示
PlaceholderEmpty 的内容。功能特性
会话状态管理：自动检测当前是否有激活的会话。
空状态处理：当没有激活的会话时，支持自定义空状态占位符组件。
响应式布局：默认使用 flex 布局，且默认的
flex-direction 为 column。Props 速查表
字段 | 类型 | 默认值 | 描述 |
React.ReactNode | null | 无活跃会话时的占位符组件 | |
string | undefined | 自定义 CSS 类名 | |
React.CSSProperties | undefined | 自定义内联样式 |
Props 详细介绍
PlaceholderEmpty
类型：React.ReactNode
描述：当没有活跃会话时显示的占位符组件，用于提供友好的空状态提示，默认值为
null，不渲染任何内容。示例：展示欢迎页
import React from 'react';import { Chat } from '@tencentcloud/chat-uikit-react';// 简单的占位符组件const EmptyPlaceholder: React.FC = () => (<div className="empty-placeholder"><div className="empty-icon">💬</div><h3>暂无会话</h3><p>请选择一个会话开始聊天</p></div>);const ChatApp: React.FC = () => {return (<div className="chat-app"><ChatPlaceholderEmpty={<EmptyPlaceholder />}className="main-chat"><ChatHeader /><MessageList /><MessageInput /></Chat></div>);};export default ChatApp;
示例效果：
className
类型：string
详细说明：自定义 CSS 类名，用于添加额外的样式定制，会与组件默认的样式类合并，默认值为
undefined。style
类型：React.CSSProperties
详细说明：自定义内联样式对象，用于精确控制组件的外观样式，默认值为
undefined。children
类型：React.ReactNode
详细说明：子组件内容，通常包含聊天相关的子组件例如 ChatHeader、MessageList、MessageInput 等，默认值为
undefined。示例: 完整的聊天界面组合
import React from 'react';import {Chat,ChatHeader,MessageList,MessageInput} from '@tencentcloud/chat-uikit-react';const ChatPage: React.FC = () => {return (<div className="chat-page"><Chat className="chat-container">{/* 聊天头部组件 */}<ChatHeader />{/* 消息列表组件 */}<MessageList className="message-list" />{/* 消息输入组件 */}<MessageInputclassName="message-input"placeholder="请输入消息..."/></Chat></div>);};export default ChatPage;
说明：
当业务场景不需要使用
ConversationList 组件时，请使用 useConversationListState hook 中的 setActiveConversation 函数来手动激活会话。详情请参考：仅集成聊天。扩展阅读：Chat 组件的渲染逻辑
