Docs Overview/
Chat/
UIKit/
Web/
UI Components/
Conversation List/
ConversationPreview/

ConversationPreview

ConversationPreview is used to preview individual conversation content in the conversation list. The component is responsible for displaying conversation information, unread counts, and providing conversation operation features.
With the atomic information display component, you can freely design and combine the ConversationPreview layout as you wish.
Additionally, you can define the behavior when a conversation is selected through the onConversationSelect function.

Basic Usage

You can use the ConversationList Preview attribute to define the preview item for each individual conversation in the conversation list. If the Preview attribute is not specified, the system will automatically use the ConversationPreviewUI component as the default.
import { ConversationList, ConversationPreviewUI, IConversationPreviewUIProps } from '@tencentcloud/chat-uikit-react';

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

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

Props

Parameter Name
Type
Default Value
Indication
conversation(Required)
-
Required parameter, identifies the currently rendered conversation list item.
isSelected
Boolean
false
Control whether the conversation list item UI is in a selected state
enableActions
Boolean
true
Control whether the conversation operation feature is displayed
actionsConfig
-
Used for defining conversation operation configuration
highlightMatchString
String
-
Highlighting matching keywords in the conversation list item title, often used to highlight search results.
Title
String \ JSX.Element
ConversationPreviewTitle
Render the title area of the conversation list item.
LastMessageAbstract
String \ JSX.Element
ConversationPreviewAbstract
Render the latest message abstract area of the conversation list item.
LastMessageTimestamp
String \ JSX.Element
ConversationPreviewTimestamp
Render the latest message timestamp area of the conversation list item.
Unread
String \ JSX.Element
ConversationPreviewUnread
Render the unread indicator area of the conversation list item.
ConversationActions
ReactElement
ConversationActions
Render the conversation operations area of the conversation list item.
Avatar
ReactElement
Avatar
Render the avatar area of the conversation list item.
onConversationSelect
(conversation: IConversationModel) => void;
-
Specify the attribute to receive a callback when a conversation is selected in the conversation list.
className
String
-
Specify the custom CSS name for the root element class.
style
React.CSSProperties
-
Specify the custom style for the root element.

Custom Example

Discord Style

Discord is a popular chat application similar to Skype or Telegram. The chat content in Discord is shown in the figure below:



By customizing the ConversationPreview layout, feature, and style, we can quickly achieve a Discord-like effect.
React
CSS
1. Customization ConversationListPreview
2. Switch theme to Dark Mode
import { UIKitProvider, ConversationList, ConversationPreviewUI, IConversationPreviewUIProps } from '@tencentcloud/chat-uikit-react';

const CustomConversationPreview = (props: IConversationPreviewUIProps) => {
  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>
}
.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 The effect after customization is as follows:
before
after