• UIKit
  • SDK
  • 서버 API
  • 개요
  • 설치
    • 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 메시지
      • 메시지 저장
      • 오프라인 푸시
      • 그룹 메시지
      • 메시지 포맷
    • 계정 시스템
      • 로그인 인증
      • 온라인 상태 관리
    • 그룹 관련
      • 그룹 시스템
      • 그룹 관리
    • 사용자 정보 및 관계망
      • 정보 관리
      • 관계망 관리
  • 구매 가이드
    • 과금 개요
    • 가격
  • 에러코드
이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.

Quote Reply

Feature Description

In TUIChat sessions, you can quote previous messages to indicate a reply to a specific message. After replying, you can also click the quoted message to jump to the original message, which will highlight flashing.

Message Quotation

Quoting a Message

On the web version, right-click a message; on the mobile version, long press a message. A message toolbar will pop up on the message. Click the Quote button in the toolbar to quote the message.

Canceling Message Quotation

When a message is quoted but not yet sent, clicking the close button after the quote allows you to cancel the message quotation.

Viewing Quoted Message

Clicking the citation content of a quoted message will locate the original message, which will highlight and flash:
When the quoted message is within the screen, clicking the citation content of the quoted message will only cause it to highlight and flash.
When the quoted message is not within the screen but is in the message list, clicking the citation content will automatically scroll the message list to the original message, and it will highlight and flash.
When the quoted message is neither within the screen nor in the message list, clicking the citation content will neither jump to the original message nor cause it to highlight and flash.

Extended Reading

The following content serves as supplementary reading material only. The message quotation feature is already included in TUIKit by default and does not require manual implementation by users.

How to Implement Message Quotation

Quoting a Message

When clicking the Quote button, the quoteMessage() method corresponding to the message will be called, and the message's quotation record will be stored in the Store.
function quoteMessage(message) {

Displaying Quoted Messages and Canceling Quotation

Monitor changes in the TUIStore quotation record in the input box component, and the quoted message can be obtained through the callback function.
const quoteMessage = ref<IMessageModel>();

onMounted(() => {
TUIStore.watch(StoreName.CHAT, {
quoteMessage: (options: { message: IMessageModel, type: string }) => {
if (options.message && options.type === "quote") {
// Detected a new message quotation.
quoteMessage.value = options.message;
} else {
// Detected cancellation of message quotation.
quoteMessage.value = undefined;
When canceling the quotation, simply delete the quotation record from the TUIStore.
function cancelQuote() {
TUIStore.update(StoreName.CHAT, "quoteMessage", { message: undefined, type: "quote" });


How do I disable the quotation feature?

In the file TUIKit/components/TUIChat/message-list/message-tool/index.vue, comment out the citation part in the object array actionItems as follows:
actionItems = [
// {
// text: TUITranslateService.t("TUIChat.Citation"),
// iconUrl: quoteIcon,
// renderCondition() {
// if (!message.value) return false;
// const _message = TUIStore.getMessageModel(message.value.ID);
// return message.value?.status === "success" && !_message.getSignalingInfo();
// },
// clickEvent: quoteMessage,
// }

Exchange and Feedback

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