@cometchat/chat-uikit-react 6.3.13 → 6.4.0

package/dist/styles/components/CometChatTextBubble.css

@@ -16,12 +16,33 @@
     word-break: break-word;
     text-align: left;
     white-space: pre-line;
-    overflow: auto;
+    overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    overflow: hidden;
     padding-top:var(--cometchat-padding-1);
+}
+
+/* When text contains block-level elements like lists or blockquotes,
+   switch from -webkit-box to block display so list markers render properly.
+   Use max-height for truncation since -webkit-line-clamp doesn't work with display: block */
+.cometchat-text-bubble__body-text:has(ol),
+.cometchat-text-bubble__body-text:has(ul),
+.cometchat-text-bubble__body-text:has(blockquote),
+.cometchat-text-bubble__body-text:has(pre) {
+    display: block;
+    overflow: hidden;
+    white-space: normal;
+    /* 4 lines * line-height (~22px for body-regular) = ~88px */
+    max-height: 88px;
+}
 
+/* When expanded, remove max-height restriction for block-level content */
+.cometchat-text-bubble__body-text.cometchat-text-bubble__body-text--expanded:has(ol),
+.cometchat-text-bubble__body-text.cometchat-text-bubble__body-text--expanded:has(ul),
+.cometchat-text-bubble__body-text.cometchat-text-bubble__body-text--expanded:has(blockquote),
+.cometchat-text-bubble__body-text.cometchat-text-bubble__body-text--expanded:has(pre) {
+    max-height: none;
+    overflow: visible;
 }
 
 /* Incoming text bubble specific styles */
@@ -94,4 +115,247 @@
     .cometchat-text-bubble {
         max-width: 280px;
     }
-}
+}
+
+/* Rich Text Formatting Styles */
+
+/* Bold */
+.cometchat-text-bubble__body-text b,
+.cometchat-text-bubble__body-text strong {
+    font-weight: var(--cometchat-font-weight-bold, 700);
+}
+
+/* Italic */
+.cometchat-text-bubble__body-text i,
+.cometchat-text-bubble__body-text em {
+    font-style: italic;
+}
+
+/* Strikethrough */
+.cometchat-text-bubble__body-text s,
+.cometchat-text-bubble__body-text strike,
+.cometchat-text-bubble__body-text del {
+    text-decoration: line-through;
+}
+
+/* Underline */
+.cometchat-text-bubble__body-text u {
+    text-decoration: underline;
+}
+
+/* Inline code */
+.cometchat-text-bubble__body-text code {
+    font-family: 'Roboto Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;
+    font-size: 14px;
+    font-weight: 400;
+    font-style: normal;
+    background: var(--cometchat-background-color-03);
+    color: var(--cometchat-text-color-highlight);
+    padding: 0 var(--cometchat-padding);
+    border-radius: var(--cometchat-radius);
+    border: 1px solid var(--cometchat-border-color-default);
+    white-space: pre-wrap;
+    word-break: break-word;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* Code color for incoming messages */
+.cometchat-text-bubble-incoming .cometchat-text-bubble__body-text code {
+    color: var(--cometchat-text-color-highlight);
+    border-radius: var(--cometchat-radius);
+    border: 1px solid var(--cometchat-border-color-dark);
+    background: var(--cometchat-background-color-03);
+    font-family: 'Roboto Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;
+    font-size: 14px;
+    font-weight: 400;
+    font-style: normal;
+    padding: 0 var(--cometchat-padding);
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* Code color for outgoing messages */
+.cometchat-text-bubble-outgoing .cometchat-text-bubble__body-text code {
+    color: var(--cometchat-static-white);
+    background: rgba(255, 255, 255, 0.20);
+    border: 1px solid rgba(245, 245, 245, 0.10);
+    border-radius: var(--cometchat-radius);
+    padding: 0 var(--cometchat-padding);
+    font-family: 'Roboto Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;
+    font-size: 14px;
+    font-weight: 400;
+    font-style: normal;
+}
+
+/* Code block */
+.cometchat-text-bubble__body-text pre {
+    display: block;
+    font-family: 'Roboto Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;
+    font-size: 14px;
+    font-weight: 400;
+    font-style: normal;
+    background: var(--cometchat-background-color-02);
+    border: 1px solid var(--cometchat-border-color-light);
+    border-radius: var(--cometchat-radius-2, 8px);
+    padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
+    margin: 0;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-x: auto;
+}
+
+.cometchat-text-bubble-outgoing .cometchat-text-bubble__body-text pre {
+    background: rgba(255, 255, 255, 0.10);
+    border: none;
+    border-radius: var(--cometchat-radius-2, 8px);
+    color: var(--cometchat-static-white);
+}
+
+.cometchat-text-bubble__body-text pre code,
+.cometchat-text-bubble-incoming .cometchat-text-bubble__body-text pre code,
+.cometchat-text-bubble-outgoing .cometchat-text-bubble__body-text pre code {
+    background: transparent;
+    color: inherit;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    display: inline;
+    font-family: inherit !important;
+}
+
+/* Blockquote */
+.cometchat-text-bubble__body-text blockquote {
+    display: block;
+    border-left: 3px solid var(--cometchat-border-color-default);
+    padding: var(--cometchat-padding-2);
+    border-radius: var(--cometchat-radius-1);
+    margin: 0;
+    font-style: normal;
+    min-width: 100px;
+}
+
+.cometchat-text-bubble-incoming .cometchat-text-bubble__body-text blockquote {
+    color: var(--cometchat-text-color-secondary);
+    background: var(--cometchat-neutral-color-400);
+    border-left-color: var(--cometchat-primary-color);
+}
+
+.cometchat-text-bubble-outgoing .cometchat-text-bubble__body-text blockquote {
+    color: rgba(255, 255, 255, 0.8);
+    background: rgba(255, 255, 255, 0.10);
+    border-left-color: var(--cometchat-static-white);
+}
+
+/* Links */
+.cometchat-text-bubble__body-text a {
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.cometchat-text-bubble-incoming .cometchat-text-bubble__body-text a {
+    color: var(--cometchat-primary-color, #3399ff);
+}
+
+.cometchat-text-bubble-outgoing .cometchat-text-bubble__body-text a {
+    color: var(--cometchat-static-white);
+}
+
+.cometchat-text-bubble__body-text a:hover {
+    text-decoration: underline;
+    opacity: 0.8;
+}
+
+/* List items */
+.cometchat-text-bubble__body-text li {
+    display: list-item;
+    margin: 0;
+    padding: 0;
+    white-space: normal;
+}
+
+.cometchat-text-bubble__body-text ol,
+.cometchat-text-bubble__body-text ul {
+    margin: 0;
+    padding: 0;
+    padding-left: var(--cometchat-padding-3, 12px);
+    white-space: normal;
+}
+
+/* Nested list styling progression */
+.cometchat-text-bubble__body-text ol { list-style-type: decimal; }
+.cometchat-text-bubble__body-text ol ol { list-style-type: lower-alpha; }
+.cometchat-text-bubble__body-text ol ol ol { list-style-type: lower-roman; }
+.cometchat-text-bubble__body-text ul { list-style-type: disc; }
+.cometchat-text-bubble__body-text ul ul { list-style-type: circle; }
+.cometchat-text-bubble__body-text ul ul ul { list-style-type: square; }
+.cometchat-text-bubble__body-text li > ol,
+.cometchat-text-bubble__body-text li > ul {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+
+/* Mention styles in text bubbles */
+
+/* Base mention styling - incoming bubbles */
+.cometchat-text-bubble-incoming .cometchat-text-bubble__body-text .cometchat-mentions {
+    border-radius: var(--cometchat-radius, 2px);
+    background: rgba(104, 82, 214, 0.20);
+    padding: 0px var(--cometchat-padding, 2px);
+}
+
+.cometchat-text-bubble-incoming .cometchat-text-bubble__body-text .cometchat-mentions > span {
+    color: var(--cometchat-text-color-highlight, #6852D6);
+    font: var(--cometchat-font-body-regular);
+    font-weight: normal;
+    font-style: normal;
+    text-decoration: none;
+}
+
+/* "You" mention styling - incoming bubbles */
+.cometchat-text-bubble-incoming .cometchat-text-bubble__body-text .cometchat-mentions-you {
+    border-radius: var(--cometchat-radius, 2px);
+    background: rgba(255, 171, 0, 0.20);
+    padding: 0px var(--cometchat-padding, 2px);
+}
+
+.cometchat-text-bubble-incoming .cometchat-text-bubble__body-text .cometchat-mentions-you > span {
+    color: var(--cometchat-warning-color, #FFAB00);
+    font: var(--cometchat-font-body-regular);
+    font-weight: normal;
+    font-style: normal;
+    text-decoration: none;
+}
+
+/* Base mention styling - outgoing bubbles */
+.cometchat-text-bubble-outgoing .cometchat-text-bubble__body-text .cometchat-mentions {
+    border-radius: var(--cometchat-radius, 2px);
+    background: rgba(255, 255, 255, 0.20);
+    padding: 0px var(--cometchat-padding, 2px);
+}
+
+.cometchat-text-bubble-outgoing .cometchat-text-bubble__body-text .cometchat-mentions > span {
+    color: var(--cometchat-static-white);
+    font: var(--cometchat-font-body-regular);
+    font-weight: normal;
+    font-style: normal;
+    text-decoration: none;
+}
+
+/* "You" mention styling - outgoing bubbles */
+.cometchat-text-bubble-outgoing .cometchat-text-bubble__body-text .cometchat-mentions-you {
+    border-radius: var(--cometchat-radius, 2px);
+    background: rgba(255, 255, 255, 0.20);
+    padding: 0px var(--cometchat-padding, 2px);
+}
+
+.cometchat-text-bubble-outgoing .cometchat-text-bubble__body-text .cometchat-mentions-you > span {
+    color: var(--cometchat-static-white);
+    font: var(--cometchat-font-body-regular);
+    font-weight: normal;
+    font-style: normal;
+    text-decoration: none;
+}

package/dist/styles/components/LinkPreview.css

@@ -67,7 +67,7 @@
   font-style: normal;
 }
 
-.cometchat-link-bubble-incoming .cometchat-link-bubble__preview-body-content-title {
+.cometchat-link-bubble-incoming .cometchat-link-bubble__preview-body-content-description {
   color: var(--cometchat-neutral-color-900, #141414);
 }
 

package/dist/styles/components/index.css

@@ -42,6 +42,7 @@
 @import url('./CometChatGroups.css');
 @import url('./CometChatMessageHeader.css');
 @import url('./CometChatMessageComposer.css');
+@import url('./CometChatCompactMessageComposer.css');
 @import url('./CometChatMessageList.css');
 @import url('./CometChatOutgoingCall.css');
 @import url('./CometChatActionBubble.css');
@@ -64,6 +65,10 @@
 @import url('./CometChatMessagePreview.css');
 @import url('./CometChatFlagMessageDialog.css');
 @import url('./CometChatUserMemberWrapper.css');
+@import url('./CometChatFormattingToolbar.css');
+@import url('./CometChatLinkDialog.css');
+@import url('./CometChatLinkPopover.css');
+@import url('./CometChatMarkdownFormatter.css');
 /* @import url('./CometChatToolCallResultBubble.css');
 @import url('./CometChatToolCallArgumentBubble.css'); */
 .cometchat * {
@@ -73,7 +78,7 @@
 
 .cometchat-mentions > span{
     color: var(--cometchat-text-color-highlight);
-font:var(--cometchat-font-body-regular);
+    font: var(--cometchat-font-body-regular);
 }
 .cometchat-mentions{
     display: inline-block;
@@ -101,19 +106,15 @@ font:var(--cometchat-font-body-regular);
 }
 .cometchat-mentions-outgoing.cometchat-mentions-you > span{
     color: var(--cometchat-warning-color);
-
 }
 .cometchat-mentions-outgoing.cometchat-mentions-other > span{
     color: var(--cometchat-static-white);
-
 }
 .cometchat-mentions-incoming.cometchat-mentions-you > span{
     color: var(--cometchat-warning-color);
-
 }
 .cometchat-mentions-incoming.cometchat-mentions-other > span{
     color: var(--cometchat-text-color-highlight);
-
 }
 .cometchat-text-bubble-incoming .cometchat-url{
     color: var(--cometchat-info-color);

package/dist/styles/css-variables.css

@@ -1,4 +1,5 @@
 @import url('./components/index.css');
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');
 
 @font-face {
   font-family: 'Roboto';

package/dist/styles/index.css

@@ -42,6 +42,7 @@
 @import url('./CometChatGroups.css');
 @import url('./CometChatMessageHeader.css');
 @import url('./CometChatMessageComposer.css');
+@import url('./CometChatCompactMessageComposer.css');
 @import url('./CometChatMessageList.css');
 @import url('./CometChatOutgoingCall.css');
 @import url('./CometChatActionBubble.css');
@@ -64,6 +65,10 @@
 @import url('./CometChatMessagePreview.css');
 @import url('./CometChatFlagMessageDialog.css');
 @import url('./CometChatUserMemberWrapper.css');
+@import url('./CometChatFormattingToolbar.css');
+@import url('./CometChatLinkDialog.css');
+@import url('./CometChatLinkPopover.css');
+@import url('./CometChatMarkdownFormatter.css');
 /* @import url('./CometChatToolCallResultBubble.css');
 @import url('./CometChatToolCallArgumentBubble.css'); */
 .cometchat * {
@@ -73,7 +78,7 @@
 
 .cometchat-mentions > span{
     color: var(--cometchat-text-color-highlight);
-font:var(--cometchat-font-body-regular);
+    font: var(--cometchat-font-body-regular);
 }
 .cometchat-mentions{
     display: inline-block;
@@ -101,19 +106,15 @@ font:var(--cometchat-font-body-regular);
 }
 .cometchat-mentions-outgoing.cometchat-mentions-you > span{
     color: var(--cometchat-warning-color);
-
 }
 .cometchat-mentions-outgoing.cometchat-mentions-other > span{
     color: var(--cometchat-static-white);
-
 }
 .cometchat-mentions-incoming.cometchat-mentions-you > span{
     color: var(--cometchat-warning-color);
-
 }
 .cometchat-mentions-incoming.cometchat-mentions-other > span{
     color: var(--cometchat-text-color-highlight);
-
 }
 .cometchat-text-bubble-incoming .cometchat-url{
     color: var(--cometchat-info-color);

package/dist/types/CometChatUIKit/CometChatUIKitUtility.d.ts

@@ -60,12 +60,25 @@ export declare class CometChatUIKitUtility {
      * @returns The extension data if found.
      */
     static checkMessageForExtensionsData: (message: CometChat.BaseMessage | null, extensionKey: string) => (object & MessageExtensionType) | undefined;
+    /**
+     * Convert known rich-text HTML formatting tags to markdown.
+     * This handles messages that arrive with raw HTML (from other platforms or older clients)
+     * so they can be processed by the markdown formatter on the bubble side.
+     * Also handles HTML-entity-escaped tags (e.g., <i>text</i>).
+     * Only converts recognized formatting tags; unknown/dangerous HTML is left for sanitizeText.
+     */
+    static convertFormattingHtmlToMarkdown(text: string): string;
     /**
      * Process and sanitize text to escape dangerous HTML while preserving mention formatting
      * @param text The text string that may contain HTML and mentions
      * @returns Sanitized string with dangerous HTML escaped but mentions preserved
      */
     static sanitizeText(text: string): string;
+    /**
+     * Strips markdown formatting syntax from text, leaving only the plain text content.
+     * Preserves mention tokens (<@uid:...> and <@all:...>) and line breaks.
+     */
+    static stripMarkdownFormatting(text: string): string;
     static convertBlobToWav: (audioBlob: {
         arrayBuffer: () => any;
     }) => Promise<{

package/dist/types/components/CometChatCompactMessageComposer/CometChatCompactMessageComposer.d.ts

@@ -0,0 +1,247 @@
+import { JSX } from "react";
+import { CometChatTextFormatter } from "../../formatters/CometChatFormatters/CometChatTextFormatter";
+import { CometChatMessageComposerAction } from "../../modals";
+import { EnterKeyBehavior, PreviewMessageMode } from "../../Enums/Enums";
+export type ContentToDisplay = "attachments" | "emojiKeyboard" | "voiceRecording" | "ai" | "none";
+export type ActionOnClickType = (() => void) | null;
+interface MessageComposerProps {
+    /**
+     * The initial text pre-filled in the message input when the component mounts.
+     * @defaultValue ""
+     */
+    initialComposerText?: string;
+    /**
+     * Disables the typing indicator for the current message composer.
+     * @defaultValue `false`
+     */
+    disableTypingEvents?: boolean;
+    /**
+     * Disables the mentions functionality in the message composer.
+     * @defaultValue `false`
+     */
+    disableMentions?: boolean;
+    /**
+     * Hides the image attachment option in the message composer.
+     * @defaultValue `false`
+     */
+    hideImageAttachmentOption?: boolean;
+    /**
+     * Hides the video attachment option in the message composer.
+     * @defaultValue `false`
+     */
+    hideVideoAttachmentOption?: boolean;
+    /**
+     * Hides the audio attachment option in the message composer.
+     * @defaultValue `false`
+     */
+    hideAudioAttachmentOption?: boolean;
+    /**
+     * Hides the file attachment option in the message composer.
+     * @defaultValue `false`
+     */
+    hideFileAttachmentOption?: boolean;
+    /**
+     * Hides the polls option in the message composer.
+     * @defaultValue `false`
+     */
+    hidePollsOption?: boolean;
+    /**
+     * Hides the collaborative document option in the message composer.
+     * @defaultValue `false`
+     */
+    hideCollaborativeDocumentOption?: boolean;
+    /**
+     * Hides the collaborative whiteboard option in the message composer.
+     * @defaultValue `false`
+     */
+    hideCollaborativeWhiteboardOption?: boolean;
+    /**
+     * Hides the attachment button in the message composer.
+     * @defaultValue `false`
+     */
+    hideAttachmentButton?: boolean;
+    /**
+     * Hides the voice recording button in the message composer.
+     * @defaultValue `false`
+     */
+    hideVoiceRecordingButton?: boolean;
+    /**
+     * Hides the emoji keyboard button in the message composer.
+     * @defaultValue `false`
+     */
+    hideEmojiKeyboardButton?: boolean;
+    /**
+     * Hides the stickers button in the message composer.
+     * @defaultValue `false`
+     */
+    hideStickersButton?: boolean;
+    /**
+     * Hides the send button in the message composer.
+     * @defaultValue `false`
+     */
+    hideSendButton?: boolean;
+    /**
+     * The user to send messages to. This prop specifies the recipient of the message.
+     */
+    user?: CometChat.User;
+    /**
+     * The group to send messages to.
+     * @remarks This prop is used if the `user` prop is not provided.
+     */
+    group?: CometChat.Group;
+    /**
+     * The ID of the parent message. This is used for threading or replying to a specific message.
+     */
+    parentMessageId?: number;
+    /**
+     * Options for default attachments, including various attachment types available in the composer.
+     */
+    attachmentOptions?: CometChatMessageComposerAction[];
+    /**
+     * Array of text formatters to apply to the message text for customization and styling.
+     */
+    textFormatters?: Array<CometChatTextFormatter>;
+    /**
+     * Determines the behavior of the Enter key in the composer (e.g., send message or add a new line).
+     * @default EnterKeyBehavior.SendMessage
+     */
+    enterKeyBehavior?: EnterKeyBehavior;
+    /**
+     * Disables sound for incoming messages.
+     * @defaultValue `false`
+     */
+    disableSoundForMessage?: boolean;
+    /**
+     * Custom audio sound for incoming messages.
+     */
+    customSoundForMessage?: string;
+    /**
+     * Callback function triggered when the message input text changes.
+     * @param text - The current text value of the message input.
+     * @returns void
+     */
+    onTextChange?: (text: string) => void;
+    /**
+     * Callback function triggered when the message composer encounters an error.
+     * @param error - An instance of `CometChat.CometChatException` representing the error.
+     * @returns void
+     */
+    onError?: ((error: CometChat.CometChatException) => void) | null;
+    /**
+     * Callback function triggered when the send button is clicked.
+     * @param message - The message that was sent.
+     * @param previewMessageMode - Optionally, specify if the message is in preview mode.
+     */
+    onSendButtonClick?: (message: CometChat.BaseMessage, previewMessageMode?: PreviewMessageMode) => void;
+    /**
+     * A custom view for the send button to customize its appearance or behavior.
+     */
+    sendButtonView?: JSX.Element;
+    /**
+     * A custom view for an auxiliary button, which can be used alongside the send button.
+     */
+    auxiliaryButtonView?: JSX.Element;
+    /**
+     * A custom header section displayed at the top of the message composer.
+     */
+    headerView?: JSX.Element;
+    /**
+     * Controls the visibility of the scrollbar in the list.
+     * @defaultValue `false`
+     */
+    showScrollbar?: boolean;
+    /**
+     * The placeholder text to display in the message input field when it is empty.
+     * @defaultValue ""
+     */
+    placeholderText?: string;
+    /**
+     * Boolean to show or hide "@all" mention functionality in group chats.
+     * @defaultValue `false`
+     */
+    disableMentionAll?: boolean;
+    /**
+     * The mentionAll label for the app used to render "@all" mentions
+     * @defaultValue "all"
+     */
+    mentionAllLabel?: string;
+    /**
+     * Custom request builder for mentions user list.
+     * @defaultValue `undefined` - Uses default internal request builder.
+     */
+    mentionsUsersRequestBuilder?: CometChat.UsersRequestBuilder;
+    /**
+     * Custom request builder for mentions group members list.
+     * @defaultValue `undefined` - Uses default internal request builder
+     */
+    mentionsGroupMembersRequestBuilder?: CometChat.GroupMembersRequestBuilder;
+    /**
+     * Enables rich text editing capabilities in the message composer.
+     * @defaultValue `true`
+     */
+    enableRichTextEditor?: boolean;
+    /**
+     * Show floating toolbar when text is selected.
+     * NOTE: Ignored on mobile devices - falls back to fixed toolbar.
+     * @defaultValue false
+     */
+    showToolbarOnSelection?: boolean;
+    /**
+     * Hides the rich text formatting options (e.g., bold, italic, lists, links)
+     * in the message composer.
+     * @defaultValue false
+     */
+    hideRichTextFormattingOptions?: boolean;
+}
+/**
+ * Represents the state of the message composer.
+ */
+type State = {
+    text: string;
+    addToMsgInputText: string;
+    textMessageToEdit: CometChat.TextMessage | null;
+    messageToReply: CometChat.BaseMessage | null;
+    contentToDisplay: ContentToDisplay;
+    loggedInUser: CometChat.User | null;
+    showPoll: boolean;
+    showMentionsCountWarning: boolean;
+    showValidationError: boolean;
+};
+/**
+ * Represents the possible actions that can be dispatched to update the state.
+ */
+export type Action = {
+    type: "setText";
+    text: State["text"];
+} | {
+    type: "setAddToMsgInputText";
+    addToMsgInputText: State["addToMsgInputText"];
+} | {
+    type: "setTextMessageToEdit";
+    textMessageToEdit: State["textMessageToEdit"];
+} | {
+    type: "setMessageToReply";
+    messageToReply: State["messageToReply"];
+} | {
+    type: "setContentToDisplay";
+    contentToDisplay: ContentToDisplay;
+} | {
+    type: "setLoggedInUser";
+    loggedInUser: CometChat.User;
+} | {
+    type: "setShowPoll";
+    showPoll: boolean;
+} | {
+    type: "setShowMentionsCountWarning";
+    showMentionsCountWarning: boolean;
+} | {
+    type: "setShowValidationError";
+    showValidationError: boolean;
+};
+/**
+ * CometChatCompactMessageComposer - A single-line horizontal layout variant of the message composer.
+ * All UI elements (attachment button, text input, emoji button, voice recording button, stickers button,
+ * and send button) are arranged horizontally in one line.
+ */
+export declare function CometChatCompactMessageComposer(props: MessageComposerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/CometChatFormattingToolbar/CometChatFormattingToolbar.d.ts

@@ -0,0 +1,29 @@
+import React, { JSX } from 'react';
+import { FormatType, createRichTextFormatter } from '../../utils/RichTextFormatting';
+export interface FormattingToolbarProps {
+    /** Reference to the text input element for applying formatting */
+    textInputRef: React.RefObject<HTMLDivElement>;
+    /** Rich text formatter instance - can be null if rich text is disabled */
+    richTextFormatter: ReturnType<typeof createRichTextFormatter> | null;
+    /** Whether the toolbar is in floating mode (vs fixed) */
+    isFloating?: boolean;
+    /** Position for floating toolbar */
+    position?: {
+        top: number;
+        left: number;
+    };
+    /** Callback when toolbar visibility should change */
+    onVisibilityChange?: (visible: boolean) => void;
+    /** Currently active formats at caret position */
+    activeFormats?: FormatType[];
+    /** Callback when link button is clicked (to show link input) */
+    onLinkClick?: () => void;
+    /** Callback when formatting is applied - parent should update activeFormats */
+    onFormatApplied?: () => void;
+}
+/**
+ * CometChatFormattingToolbar - A formatting toolbar component
+ * Provides rich text formatting options including bold, italic, underline,
+ * strikethrough, links, lists, blockquote, and code formatting.
+ */
+export declare function CometChatFormattingToolbar(props: FormattingToolbarProps): JSX.Element | null;