Plugins

Message { type: "image", category: "message" }
  → Registry scans plugins in order
  → CometChatImagePlugin matches (messageTypes: ["image"], messageCategories: ["message"])
  → ImagePlugin.renderBubble() is called

import { CometChatProvider } from "@cometchat/chat-uikit-react";
import { CometChatAIPlugin } from "@cometchat/chat-uikit-react/plugins/ai";

function App() {
  return (
    <CometChatProvider
      appId="YOUR_APP_ID"
      region="us"
      authKey="YOUR_AUTH_KEY"
      uid="cometchat-uid-1"
      plugins={[CometChatAIPlugin]}
    >
      <MyChatApp />
    </CometChatProvider>
  );
}

import React from "react";
import type { CometChat } from "@cometchat/chat-sdk-javascript";
import type {
  CometChatMessagePlugin,
  CometChatMessagePluginContext,
  CometChatMessageOption,
} from "@cometchat/chat-uikit-react";

export const LocationPlugin: CometChatMessagePlugin = {
  id: "location",
  messageTypes: ["location"],
  messageCategories: ["custom"],

  renderBubble(message: CometChat.BaseMessage, context: CometChatMessagePluginContext) {
    const customMessage = message as CometChat.CustomMessage;
    const data = customMessage.getData() as { customData?: { latitude: number; longitude: number } };
    const { latitude, longitude } = data.customData ?? { latitude: 0, longitude: 0 };

    return React.createElement("div", { className: "location-bubble" },
      React.createElement("img", {
        src: `https://maps.googleapis.com/maps/api/staticmap?center=${latitude},${longitude}&zoom=15&size=300x200&key=YOUR_KEY`,
        alt: "Location",
        style: { borderRadius: 8, width: "100%" },
      }),
      React.createElement("p", { style: { margin: "8px 0 0", fontSize: 12 } },
        `${latitude.toFixed(4)}, ${longitude.toFixed(4)}`
      )
    );
  },

  getOptions(message: CometChat.BaseMessage, context: CometChatMessagePluginContext): CometChatMessageOption[] {
    // Minimal options — just delete for sender
    return [
      {
        id: "delete",
        title: context.getLocalizedString?.("delete") ?? "Delete",
        senderOnly: true,
        onClick: (msg) => context.onDeleteMessage?.(msg),
      },
    ];
  },

  getLastMessagePreview(): string {
    return "📍 Location";
  },
};

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

interface CometChatMessagePlugin {
  /** Unique plugin identifier. */
  id: string;

  /** SDK message types this plugin handles (e.g., ["text"], ["image"]). */
  messageTypes: string[];

  /** SDK message categories this plugin handles (e.g., ["message"], ["custom"]). */
  messageCategories: string[];

  /** Render the bubble content for a message. */
  renderBubble(message: BaseMessage, context: PluginContext): ReactNode;

  /** Return context menu options for a message. */
  getOptions?(message: BaseMessage, context: PluginContext): MessageOption[];

  /** Return plain-text preview for the conversation list subtitle. */
  getLastMessagePreview?(message: BaseMessage, loggedInUser: User, t?: (key: string) => string): string;

  /** Return text formatters (only relevant for text plugin). */
  getTextFormatters?(): CometChatTextFormatter[];

  // --- View Slot Methods (optional) ---
  /** Custom leading view (avatar area). */
  renderLeadingView?(message: BaseMessage, context: PluginContext): ReactNode;
  /** Custom header view (sender name area). */
  renderHeaderView?(message: BaseMessage, context: PluginContext): ReactNode;
  /** Custom footer view (reactions area). */
  renderFooterView?(message: BaseMessage, context: PluginContext): ReactNode;
  /** Custom bottom view (moderation area). */
  renderBottomView?(message: BaseMessage, context: PluginContext): ReactNode;
  /** Custom status info view (timestamp + receipts). */
  renderStatusInfoView?(message: BaseMessage, context: PluginContext): ReactNode;
  /** Custom reply view (quoted message preview). */
  renderReplyView?(message: BaseMessage, context: PluginContext): ReactNode;
  /** Custom thread view (reply count indicator). */
  renderThreadView?(message: BaseMessage, context: PluginContext): ReactNode;
}