> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-platform-docs-release.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Message Translation Plugin

> Adds a 'Translate' context menu option to text messages using the CometChat translation extension.

<Accordion title="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) |
</Accordion>

## 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.

<Info>
  **Live Preview** — text bubble with translation applied.

  [Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble-text--with-translation)
</Info>

<iframe src="https://storybook.cometchat.io/react/iframe.html?id=components-bubbles-message-bubble-text--with-translation&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "350px", border: "1px solid #e0e0e0"}} title="CometChat Text Bubble — With Translation" allow="clipboard-write" />

***

## 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](https://app.cometchat.com) under Extensions.

***

## Installation

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

```tsx theme={null}
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>
```