このページは現在英語版のみで提供されており、日本語版も近日中に提供される予定です。ご利用いただきありがとうございます。

会話アクション

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)
﻿IConversationModel﻿
-
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
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿


﻿

IConversationActionsProps
Parameter Name	Type	Default Value	Indication
conversation(Required)	IConversationModel	-	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.

`enablePin={false}`	`enableDelete={false}`	`enableMute={false}`

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.

before	after

before	after

会話アクション

Basic Usage

Using actionsConfig

Custom ConversationActions

Props

IConversationActionsProps

﻿

﻿

﻿

IConversationActionsConfig

﻿

﻿

﻿

Custom Component

Basic Feature Toggle

Event Response

customConversationActions

IConversationActionItem

UI interface customization