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

ConversationActions

ConversationActions component is responsible for operations on a single conversation, supporting conversation deletion, pin/unpin conversation, and mute/unmute conversation features by default.

Basic Usage

When using ConversationList with ConversationActions, you can directly customize through the ConversationList top-level actionsConfig parameter. actionsConfig supports feature switches, event responses, adding new custom operations, basic UI customization, etc.
If you need more advanced customization, you can create new components through ConversationActions.

Using actionsConfig

import { UIKitProvider, ConversationList } from "@tencentcloud/chat-uikit-react";

const App = () => {
  return (
    <UIKitProvider>
      <ConversationList
        actionsConfig={{
          enablePin: false,
          onConversationDelete: (conversation: IConversationModel) => { console.log('Delete conversation success'); },
          customConversationActions: {
            'custom-actions-1': {
               label: 'custom-actions',
               onClick: (conversation: IConversationModel) => { console.log(conversation); },
             },
          },
      }}/>
    </UIKitProvider>
  );
}

Custom ConversationActions

import { UIKitProvider, ConversationList, ConversationActions, IConversationActionsProps } from "@tencentcloud/chat-uikit-react";

const CustomConversationActions = (props: IConversationActionsProps) => {
  return <ConversationActions {...props} enableDelete={false} />;
};

const App = () => {
  return (
    <UIKitProvider>
      <ConversationList
        style={{ maxWidth: '300px', height: '600px' }}
        ConversationActions={CustomConversationActions}
      />
    </UIKitProvider>
  );
}

Props

ConversationActions component interface type IConversationActionsProps is extended based on the IConversationActionsConfig interface.
IConversationActionsProps
Parameter Name
Type
Default Value
Indication
conversation(Required)
-
Required parameter, indicating the conversation corresponding to the current rendered conversation action.
className
String
-
Class Name from the Definition root element.
style
React.CSSProperties
-
Style from the Definition root element.
IConversationActionsConfig
Parameter Name
Type
Default Value
Indication
enablePin
Boolean
true
Whether to display the pin feature button.
enableMute
Boolean
true
Whether to display the Do Not Disturb feature button.
enableDelete
Boolean
true
Whether to display the delete feature button.
onConversationPin
(conversation: IConversationModel, e?: React.MouseEvent) => void
-
Behavior from the Definition for pinning/unpinning a conversation.
onConversationMute
(conversation: IConversationModel, e?: React.MouseEvent)
=> void
-
Behavior from the Definition for enabling/disabling Do Not Disturb for a conversation.
onConversationDelete
(conversation: IConversationModel, e?: React.MouseEvent) => void
-
Behavior from the Definition for deleting a conversation.
customConversationActions
Record<string, IConversationActionItem>
-
Action Items in Custom Conversation.
PopupIcon
ReactElement
-
Icon of the Custom Action Pop-up Window.
PopupElements
ReactElement[]
-
Content of the Custom Action Pop-up Window.
onClick
(e: React.MouseEvent, key?: string, conversation?: IConversationModel) => void
-
Callback Function when clicking on Action Items.

Custom Component

Basic Feature Toggle

By setting enablePin, enableDelete, and enableMute parameters, you can flexibly control the display of the ConversationActions feature in Conversation Pin, Conversation Delete, and Conversation Mute.
<ConversationActions enablePin={false} />
<ConversationActions enableDelete={false} />
<ConversationActions enableMute={false} />
enablePin={false}
enableDelete={false}
enableMute={false}










Event Response

ConversationActions component by default supports conversation deletion, conversation pinning/unpinning, and conversation do not disturb/cancel do not disturb feature. If the default feature event response does not meet your needs, you can define custom event response handling functions to override them; besides supporting custom event responses for feature events, you can also get basic click event responses via onClick.
import { ConversationList, ConversationActions, IConversationActionsProps, Toast } from '@tencentcloud/chat-uikit-react';
import { IConversationModel } from '@tencentcloud/chat-uikit-engine';

const CustomConversationActions = (props: IConversationActionsProps) => {
  return (
    <ConversationActions
      {...props}
      onConversationDelete={(conversation: IConversationModel) => {
        conversation.deleteConversation().then(() => {
          Toast({ text: 'delete conversation successfully!', type: 'info' });
        }).catch(() => {
          Toast({ text: 'delete conversation failed!', type: 'error' });
        });
      }}
    />
  );
};

<ConversationList ConversationActions={CustomConversationActions} />

customConversationActions

customConversationActions is used to add a list of custom action items to the ConversationActions.
Record<string, IConversationActionItem>
IConversationActionItem
Parameter Name
Type
Default Value
Indication
enable
Boolean
true
Enable custom action items.
label
String
-
Display content of custom action items.
onClick
(conversation: IConversationModel, e?: React.MouseEvent) => void
-
Callback function when clicking on a custom Operation Item.
Here is an example of adding a custom Operation Item using customConversationActions:
import { ConversationList, ConversationActions, IConversationActionsProps } from '@tencentcloud/chat-uikit-react';

const CustomConversationActions = (props: IConversationActionsProps) => {
  return (
    <ConversationActions 
      {...props} 
      customConversationActions={{
        'custom-actions-1': {
           label: 'custom-actions',
           onClick: (conversation: IConversationModel) => { console.log(conversation); },
         },
      }}
    />
  );
};
     
<ConversationList ConversationActions={CustomConversationActions} />
before
after







UI interface customization

You can customize the popup button style through the PopupIcon parameter, and customize the popup content through PopupElements.
Here is a code example of secondary development based on the default ConversationActions component, customizing a new popup button style:
import { ConversationList, ConversationActions, IConversationActionsProps, Icon, IconTypes } from '@tencentcloud/chat-uikit-react';

const CustomConversationActions = (props: IConversationActionsProps) => {
  const customIcon = <Icon type={IconTypes.ADD} width={16} height={16} />;
  return (
    <ConversationActions {...props} PopupIcon={customIcon} />
  );
};
     
<ConversationList ConversationActions={CustomConversationActions} />
before
after