tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Chat
    Documentation
    Download PDF

    ConverssationActions

    Last updated: 2024-09-29 17:02:09
    Download PDF
      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
      
      
      
      
      
      
      
      
      
      
      
      
      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