Message Translation Plugin

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.

Live Preview — text bubble with translation applied.Open in Storybook ↗

How It Works

User hovers/long-presses a text message → context menu appears
“Translate” option is shown (for non-deleted text messages only)
User clicks “Translate” → plugin calls the translation extension API
Translated text is stored in the message’s metadata (translated_message key)
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

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>

​Overview

​How It Works

​Plugin Details

​Context Menu Option

​Conversation Preview

​Requirements

​Installation

Overview

How It Works

Plugin Details

Context Menu Option

Conversation Preview

Requirements

Installation