`ConversationPreview` 用于对于会话列表中单条会话内容进行预览，组件负责显示会话信息、未读计数以及提供会话操作功能。

借助原子化的信息展示组件，您可以自由地设计和组合出您所期望的 `ConversationPreview` 布局。

同时，您还可以通过 `onConversationSelect` 函数来自定义选中会话时的行为。

### 基础使用

您可以使用 `ConversationList` 的 `Preview` 属性来自定义会话列表中每个单独会话的预览项，如果没有指定 `Preview` 属性，系统将自动采用 `ConversationPreviewUI` 组件作为默认值。
``` typescript
import { ConversationList, ConversationPreviewUI } from '@tencentcloud/chat-uikit-react';
import type { ConversationPreviewUIProps } from '@tencentcloud/chat-uikit-react';

const CustomConversationPreview = (props: ConversationPreviewUIProps) => {
  const { Title } = props;
  return (
    <ConversationPreviewUI {...props}>
      {Title}
      <div>Your custom preview UI</div>
    </ConversationPreviewUI>
  );
};

<ConversationList Preview={CustomConversationPreviewUI}></ConversationList>
```

### Props
| **参数名** | **类型** | **默认值** | **说明** |
| --- | --- | --- | --- |
| **conversation*****(Required)*** | `ConversationModel` | - | 必选参数，标识当前渲染的会话列表项。 |
| isSelected | `Boolean` | `false` | 控制会话列表项 UI 是否处于选中状态。 |
| enableActions | `Boolean` | `true` | 控制会话操作功能是否显示。 |
| actionsConfig | ConversationActionsConfig | - | 用于自定义会话操作配置。 |
| highlightMatchString | `String` | - | 会话列表项 Title 高亮匹配关键词，常用于会话搜索结果高亮。 |
| Title | `String \\| JSX.Element` | `ConversationPreviewTitle` | 渲染会话列表项标题区域。 |
| LastMessageAbstract | `String \\| JSX.Element` | `ConversationPreviewAbstract` | 渲染会话列表项最新消息摘要区域。 |
| LastMessageTimestamp | `String \\| JSX.Element` | `ConversationPreviewTimestamp` | 渲染会话列表项最新消息时间戳区域。 |
| Unread | `String \\| JSX.Element` | `ConversationPreviewUnread` | 渲染会话列表项消息未读标识区域。 |
| ConversationActions | `ReactElement` | `ConversationActions` | 渲染会话列表项会话操作区域。 |
| Avatar | `ReactElement` | `Avatar` | 渲染会话列表项头像区域。 |
| onConversationSelect | `(conversation: ConversationModel) => void;` | - | 指定在选择对话列表中的对话时接收回调的属性。 |
| className | `String` | - | 指定根元素类的 CSS 自定义名称。 |
| style | `React.CSSProperties` | - | 指定根元素样式的自定义样式。 |

## 自定义案例

### 类 Discord 风格

Discord 是一个流行的聊天应用程序，类似于 Skype 或 Telegram。Discord 中的聊天内容如下图所示:

通过对 `ConversationPreview` 布局、功能以及样式的定制，我们可以快速实现类 Discord 效果。

【React】
1. 定制 `ConversationListPreview`

2. 切换主题到深色模式

``` typescript
import { UIKitProvider, ConversationList, ConversationPreviewUI } from '@tencentcloud/chat-uikit-react';
import type { ConversationPreviewUIProps } from '@tencentcloud/chat-uikit-react';

const CustomConversationPreview = (props: ConversationPreviewUIProps) => {
  const { Title } = props;
  return (
    <ConversationPreviewUI {...props}>
      <span> # </span>
      <span>{Title}</span>
    </ConversationPreviewUI>
  );
};

const App = () => {
    <UIKitProvider theme={'dark'}>
      <ConversationList
        style={{ maxWidth: '300px', height: '600px' }}
        Preview={CustomConversationPreviewUI}
       />
      ...
    </UIKitProvider>
}
```

【CSS】
``` scss
.custom-preview-ui {
  height: 34px;
  border-radius: 6px;
  padding: 10px;
  margin: 0 10px;
  .custom-preview-ui__tag {
    margin-right: 10px;
    font-size: 16px;
    color: #b3b3b4;
  }
  .custom-preview-ui__title {
    font-size: 14px;
    color: #b3b3b4;
  }
  &.uikit-conversation-preview--active {
    background-color: #3b3d43;
    .custom-preview-ui__tag {
      color: #ffffff;
    }
    .custom-preview-ui__title {
      .uikit-conversation-preview__title {
        color: #ffffff;
      }
    }
  }
}
```

`ConversationListPreview` 定制后效果如下：
| **修改前** | **修改后** |
| --- | --- |
|  |  |