Message Preview

Inline preview component shown in the message composer when replying to or editing a message, with dismiss functionality.

AI Integration Quick Reference

{
  "component": "CometChatMessagePreview",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatMessagePreview } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "Inline preview component shown in the message composer when replying to or editing a message, with dismiss functionality.",
  "cssRootClass": ".cometchat-message-preview",
  "primaryOutput": {
    "prop": "onClose",
    "type": "() => void"
  },
  "props": {
    "data": {
      "messageText": { "type": "string", "required": true, "description": "The message text to preview" },
      "title": { "type": "string", "default": "undefined", "description": "Contextual title (e.g., 'Replying to John' or 'Editing message')" }
    },
    "callbacks": {
      "onClose": { "type": "() => void", "required": true, "description": "Callback to dismiss the preview" }
    }
  },
  "events": [],
  "sdkListeners": [],
  "types": {}
}

Where It Fits

CometChatMessagePreview is a base component that renders above the message composer input when a user initiates a reply or edit action. It displays a snippet of the original message text along with a contextual title and a close button to cancel the action.

This component does not integrate with the CometChat SDK directly — it receives all data via props from its parent (typically CometChatMessageComposer). The composer controls the preview lifecycle based on user actions from the message context menu.

import { useState } from "react";
import { CometChatMessagePreview } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function ComposerWithReply() {
  const [replyMessage, setReplyMessage] = useState<string | null>(
    "Hey, are we still meeting tomorrow?"
  );

  return (
    <div>
      {replyMessage && (
        <CometChatMessagePreview
          title="Replying to Sarah"
          messageText={replyMessage}
          onClose={() => setReplyMessage(null)}
        />
      )}
      <input placeholder="Type a message..." />
    </div>
  );
}

---

Minimal Render

import { CometChatMessagePreview } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function MessagePreviewDemo() {
  return (
    <CometChatMessagePreview
      messageText="This is the message being replied to"
      onClose={() => console.log("Preview dismissed")}
    />
  );
}

export default MessagePreviewDemo;

Root CSS class: .cometchat-message-preview

---

Actions and Events

Callback Props

onClose

Fires when the user clicks the close/dismiss button on the preview. The parent should respond by clearing the reply or edit state and removing the preview from the DOM.

import { useState } from "react";
import { CometChatMessagePreview } from "@cometchat/chat-uikit-react";

function EditPreview() {
  const [editing, setEditing] = useState(true);
  return editing ? (
    <CometChatMessagePreview
      title="Editing message"
      messageText="Original message text here"
      onClose={() => setEditing(false)}
    />
  ) : null;
}

---

Common Patterns

Reply preview in composer

import { useState } from "react";
import { CometChatMessagePreview } from "@cometchat/chat-uikit-react";

function ReplyPreview() {
  const [replyTo, setReplyTo] = useState<{
    sender: string;
    text: string;
  } | null>({ sender: "John", text: "Let's catch up later today" });

  return (
    <div>
      {replyTo && (
        <CometChatMessagePreview
          title={`Replying to ${replyTo.sender}`}
          messageText={replyTo.text}
          onClose={() => setReplyTo(null)}
        />
      )}
      <input placeholder="Type a reply..." />
    </div>
  );
}

Edit preview in composer

import { useState } from "react";
import { CometChatMessagePreview } from "@cometchat/chat-uikit-react";

function EditMessagePreview() {
  const [editText, setEditText] = useState<string | null>(
    "This is the message I want to edit"
  );

  return (
    <div>
      {editText && (
        <CometChatMessagePreview
          title="Editing message"
          messageText={editText}
          onClose={() => setEditText(null)}
        />
      )}
      <input defaultValue={editText ?? ""} placeholder="Edit message..." />
    </div>
  );
}

---

CSS Architecture

The component uses CSS custom properties (design tokens) defined in @cometchat/chat-uikit-react/css-variables.css. The cascade:

1. Global tokens set on the .cometchat root wrapper.
2. Component CSS (.cometchat-message-preview) consumes these tokens via var().
3. Overrides target .cometchat-message-preview descendant selectors.

Key Selectors

Target	Selector
Root	.cometchat-message-preview
Title	.cometchat-message-preview__title
Message text	.cometchat-message-preview__text
Close button	.cometchat-message-preview__close

Example: Custom-styled preview

.cometchat .cometchat-message-preview {
  background: var(--cometchat-background-color-03, #f5f5f5);
  border-left: 3px solid var(--cometchat-primary-color, #3399ff);
  border-radius: 4px;
}

.cometchat .cometchat-message-preview .cometchat-message-preview__title {
  color: var(--cometchat-primary-color, #3399ff);
  font-weight: 600;
}

Customization Matrix

What to change	Where	Property/API	Example
Set preview text	Component props	messageText	messageText="Hello world"
Set contextual title	Component props	title	title="Replying to John"
Handle dismissal	Component props	onClose callback	onClose={() => clearReply()}
Change colors, shape	Global CSS	.cometchat-message-preview selectors	See example above

---

Props

---

messageText

The message text to display in the preview. This is typically the content of the message being replied to or edited.

Type	string
Required	Yes

---

onClose

Callback fired when the user dismisses the preview by clicking the close button. The parent should clear the reply/edit state.

Type	() => void
Required	Yes

---

title

Contextual title displayed above the message text. Used to indicate the action context, such as “Replying to John” or “Editing message”.

Type	string
Default	undefined

---

CSS Selectors

Target	Selector
Root container	.cometchat-message-preview
Title text	.cometchat-message-preview__title
Message text content	.cometchat-message-preview__text
Close button	.cometchat-message-preview__close
Close button hover	.cometchat-message-preview__close:hover
Close button focus	.cometchat-message-preview__close:focus-visible
Close icon	.cometchat-message-preview__close-icon