概述
Chat 组件是聊天界面的容器组件，负责管理聊天区域的显示逻辑。它会根据当前是否有活跃会话来决定显示聊天内容还是空状态占位符。
一般用于承载 ChatHeader、MessageList、MessageInput 组件。
功能特性
会话状态管理：自动检测当前是否有激活的会话。
空状态处理：当没有激活的会话时，支持自定义空状态占位符组件。
响应式布局：默认使用 flex 布局，且默认的
flex-direction 为 column。Props 速查表
属性 | 类型 | 默认值 | 描述 |
PlaceholderEmpty | Component | null | null | 当没有活跃会话时显示的空状态组件。 |
基础用法
Chat 主要用于承载 ChatHeader、MessageList、MessageInput 组件。当没有激活的会话时，Chat 组件返回
null，即不渲染任何 DOM 结构。<template><Chat><ChatHeader /><MessageList /><MessageInput /></Chat></template><script setup lang="ts">import { Chat, ChatHeader, MessageList, MessageInput } from '@tencentcloud/chat-uikit-vue3';</script>
添加自定义空状态
当没有激活的会话时，希望展示一些提示，可以使用
PlaceholderEmpty 属性。
<template><div class="all-container"><ConversationList class="conversation-list-container"/><Chat :PlaceholderEmpty="EmptyChatPlaceholder"><ChatHeader /><MessageList /><MessageInput /></Chat></div></template><script setup lang="ts">import { Chat, ChatHeader, MessageList, MessageInput, ConversationList } from 'chat-uikit-vue3';import EmptyChatPlaceholder from './EmptyChatPlaceholder.vue';</script><style scoped>.all-chat-container {margin: 10vh 20vw;display: flex;flex-direction: row;box-shadow: 0 4px 24px rgba(0,0,0,0.08), inset 0 -1px 0 rgba(255,255,255,0.05);border-radius: 16px;}.conversation-list-container {flex: 1;overflow-y: auto;min-height: 0;max-width: 360px;}</style>
<template><div class="empty-placeholder"><div class="empty-icon">💬</div><h3>Select a conversaton to start chatting</h3><p>Select a conversation from the list on the left or create a new one</p></div></template><style scoped>.empty-placeholder {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100%;color: #999;}.empty-icon {font-size: 48px;margin-bottom: 16px;}</style>
扩展阅读：Chat 组件的渲染逻辑
