• UIKit
  • SDK
  • 서버 API
Chat/
UIKit/
Web/
Features/
UIKit
  • 개요
  • 설치
    • TUIKit
      • React
      • Vue
    • TUIChat만
      • React
      • Vue
  • Features
    • 반응
    • 읽음 확인
    • 입력 상태
    • 사용자 온라인 상태
    • Message Search
    • Quote Reply
    • Voice Message To Text
    • Translate Message
  • 주제
    • UI 스타일 설정
      • Web
      • 모바일
  • 맞춤화
    • 메시지 맞춤화
    • Customize Emoji and Stickers
  • 현지화
  • Guideline for Beginners
  • 콘솔 안내
    • 애플리케이션 생성 및 업그레이드
    • 기본 구성
    • 기능 구성
    • 계정 관리
    • 그룹 관리
    • 콜백 구성
  • 제품 소개
    • 메시지 관리
      • 1대1 메시지
      • 메시지 저장
      • 오프라인 푸시
      • 그룹 메시지
      • 메시지 포맷
    • 계정 시스템
      • 로그인 인증
      • 온라인 상태 관리
    • 그룹 관련
      • 그룹 시스템
      • 그룹 관리
    • 사용자 정보 및 관계망
      • 정보 관리
      • 관계망 관리
  • 구매 가이드
    • 과금 개요
    • 가격
  • 에러코드
이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.

입력 상태

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.