Message Translation Plugin

Adds a ‘Translate’ context menu option to text messages using the CometChat translation extension.

AI Integration Quick Reference

Field	Value
Plugin ID	message-translation
Package	@cometchat/chat-uikit-react
Message Types	(none — enhancer)
Message Categories	(none — enhancer)
Included by Default	No
Bubble Component	None (enhancer only)
Conversation Preview	N/A
Context Menu	Translate (added to text messages)

Overview

The Message Translation plugin is an enhancer plugin — it doesn’t own a message type or render bubbles. Instead, it adds a “Translate” option to the context menu of text messages. When triggered, it calls the CometChat translation extension API to translate the message into the user’s browser language.

---

How It Works

1. User hovers/long-presses a text message → context menu appears
2. “Translate” option is shown (for non-deleted text messages only)
3. User clicks “Translate” → plugin calls the translation extension API
4. Translated text is stored in the message’s metadata (translated_message key)
5. The text bubble re-renders showing the translation below the original

---

Plugin Details

Field	Value
Plugin ID	message-translation
Message Types	[] (none — enhancer only)
Message Categories	[] (none — enhancer only)
Renders Bubble	No (renderBubble returns null)
Provides Options	Yes — “Translate” for text messages

---

Context Menu Option

Option	Condition	Action
Translate	Text messages only, not deleted	Translates to browser language via extension API

The translation target language is detected from navigator.language (e.g., en, fr, de).

---

Conversation Preview

Returns empty string — this plugin doesn’t handle conversation previews.

---

Requirements

The CometChat Message Translation extension must be enabled in your CometChat Dashboard under Extensions.

---

Installation

The Message Translation plugin is NOT included in the default plugins. Add it explicitly:

import { CometChatProvider } from "@cometchat/chat-uikit-react";
import { CometChatMessageTranslationPlugin } from "@cometchat/chat-uikit-react";

<CometChatProvider
  appId="YOUR_APP_ID"
  region="us"
  authKey="YOUR_AUTH_KEY"
  uid="cometchat-uid-1"
  plugins={[CometChatMessageTranslationPlugin]}
>
  <MyChatApp />
</CometChatProvider>