tencent cloud

Feedback

Web & H5 & Uniapp(Vue)

Last updated: 2024-06-12 17:44:13

    Description

    @tencentcloud/chat-uikit-vue support for the C2C conversation "Typing..." feature has been established since the v2.0.0
    
    
    
    Displaying the rule of "Typing...":
    1. Activate the "Typing..." toggle (switched on by default).
    2. In the current C2C conversation, if the other user has sent you a message within the last 30 seconds and is currently inputting text.

    Activating/Deactivating the state of the other party typing

    The "Interlocutor is typing..." is default to be on, so there is no need for repetition in the following steps to enable it.
    import { TUIStore, StoreName } from "@tencentcloud/chat-uikit-engine";
    
    // Enable the 'Typing' feature
    TUIStore.update(StoreName.APP, "enableTyping", true);
    
    // Disable the 'Typing' feature
    TUIStore.update(StoreName.APP, "enableTyping", false);

    Extended Information: How is 'typing ...' implemented within TUIKit?

    Note:
    The following content is merely supplementary reading material. The 'typing' feature is already included in TUIKit by default and does not require manual implementation.
    1. Sender: Monitors the start and end of input, sending an online message to the other party
    In TUIKit/components/TUIChat/message-input/index.vue, you can send a message to start input status via TUIChatService.enterTypingState(), and deliver a message signalling the end of the input state through TUIChatService.leaveTypingState().
    // TUIKit/components/TUIChat/message-input/index.vue
    const onTyping = (inputContentEmpty: boolean, inputBlur: boolean) => {
    sendTyping(inputContentEmpty, inputBlur);
    };
    
    // TUIKit/components/TUIChat/utils/sendMessage.ts
    export const sendTyping = (inputContentEmpty: boolean, inputBlur: boolean) => {
    if (!inputContentEmpty && !inputBlur) {
    TUIChatService.enterTypingState();
    } else {
    TUIChatService.leaveTypingState();
    }
    };
    2. Receiver: Monitor input state of sender and display
    In TUIKit/components/TUIChat/chat-header/index.vue, monitor the input state in the C2C conversation via listening to typingStatus.
    TUIStore.watch(StoreName.CHAT, {
    typingStatus: (status: boolean) => {
    typingStatus.value = status;
    switch (typingStatus.value) {
    case true:
    currentConversationName.value = "Typing...";
    break;
    case false:
    currentConversationName.value =
    currentConversation?.value?.getShowName();
    break;
    }
    },
    });

    FAQs

    Why is there no typing indication from the other party after turning on the switch? What are the rules for displaying "Typing..."?

    1. Turn on the "Typing" switch (it's on by default)
    2. In the current C2C conversation, if the other user has sent you a message within the last 30 seconds and is currently inputting text.

    Contact us

    Join the Telegram technical exchange group or WhatsApp discussion group, benefit from the support of professional engineers, and solve your toughest challenges.
    
    Contact Us

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

    Technical Support

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

    7x24 Phone Support