# Chat 组件文档

## 概述

Chat 组件负责渲染聊天界面，包含聊天窗口头部组件 ChatHeader 、消息列表组件 MessageList、 消息输入组件 MessageInput。

## 组件构成

Chat 组件包含以下内容：
- **ChatHeader**：聊天窗口头部组件

- **MessageList**：消息列表组件,消息列表组件中包含消息操作能力，组件详细的属性需要查阅 MessageList 组件文档。

- **MessageInput**：消息输入组件

## 基础用法

Chat 组件无需任何必需属性即可使用。
``` typescript
<template>
<UIKitProvider>
  <Chat style="flex: 1;">
    <ChatHeader />
    <MessageList />
    <MessageInput />
  </Chat>
</UIKitProvider>
</template>
<script setup lang="ts">
import {
  UIKitProvider,
  Chat,
  ChatHeader,
  MessageList,
  MessageInput,
} from '@tencentcloud/chat-uikit-react';
</script>
```