tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Chat
    Documentation
    Download PDF

    ConversationPreview

    Last updated: 2024-09-29 16:56:17
    Download PDF
      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
      
      
      
      
      
      
      Contact Us

      Contact our sales team or business advisors to help your business.

      Contact Us
      Technical Support

      Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

      Submit a Ticket
      7x24 Phone Support
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy