@linktr.ee/messaging-react 3.9.0-rc-1783472582 → 3.9.0-rc-1783568295

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-IkikzyWM.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-C1Zaiccm.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -405,18 +405,13 @@ export declare interface ChannelViewProps {
 }
 
 export declare interface ComposerCardProps extends LockedAttachmentBaseProps {
-    /**
-     * The message's own text, shown as-is (not redacted yet — the message
-     * hasn't been sent). Only used when `contentType` is `"text"`.
-     */
-    text?: string;
+    /** Placeholder shown in the title slot before the composer types one. */
+    placeholderTitle?: string;
     /** Placeholder shown in the amount slot before one is configured. */
     placeholderAmountText?: string;
     /**
-     * Renders a persistent dismiss X on the thumbnail (media) or next to the
-     * text (text mode); called to remove the draft attachment. Unrelated to
-     * `TextCardProps.onDismiss`, which only appears for `isMine` after a
-     * failed payment.
+     * When provided, renders a dismiss X in the thumbnail corner. Called when
+     * the composer clicks it to remove the attachment.
      */
     onDismiss?: () => void;
     /** Fired the first time the composer taps the thumbnail to preview. */
@@ -425,9 +420,8 @@ export declare interface ComposerCardProps extends LockedAttachmentBaseProps {
      * Lazily loads the underlying source so the composer can preview the
      * attachment they're about to send. Called the first time the thumbnail is
      * tapped; the returned source is cached and reused on subsequent toggles.
-     * Ignored when `contentType` is `"text"`.
      */
-    onFetchSource?: FetchSourceHandler;
+    onFetchSource?: () => Promise<LockedAttachmentSource | void>;
     /**
      * When provided, renders a pencil button in the body bottom-right that the
      * composer can use to edit the attachment metadata (e.g. open the price /
@@ -442,6 +436,12 @@ declare interface ComposerExtras {
     onDismiss?: () => void;
 }
 
+/**
+ * @deprecated Renamed to `SentCardProps`. Drafting usages (with `onDismiss`)
+ * should migrate to `ComposerCardProps`.
+ */
+export declare type CreatorCardProps = SentCardProps;
+
 export declare const CustomMessageProvider: Provider<Partial<CustomMessageRegistry>>;
 
 export declare interface CustomMessageRegistry {
@@ -479,13 +479,6 @@ export declare interface FaqListProps {
     avatarName?: string;
 }
 
-/**
- * Lazily fetches the underlying source (URL/thumbnail) for a locked
- * attachment. Returns `void` to signal "no source available" — the card
- * stays locked. Shared by `ComposerCardProps`/`MediaCardProps.onFetchSource`.
- */
-declare type FetchSourceHandler = () => Promise<LockedAttachmentSource | void>;
-
 declare interface FileAttachmentSharedProps extends MessageAttachmentBaseProps {
     /** Source URL of the file (used as the download target). */
     src?: string;
@@ -737,45 +730,33 @@ export declare interface LinkAttachmentSentCardProps extends LinkAttachmentBaseP
 
 export declare const LockedAttachment: {
     Composer: (props: ComposerCardProps) => JSX_2.Element;
-    Text: (props: LockedAttachmentTextCardProps) => JSX_2.Element;
-    Media: (props: LockedAttachmentMediaCardProps) => JSX_2.Element;
+    Sent: (props: SentCardProps) => JSX_2.Element;
+    Received: (props: ReceivedCardProps) => JSX_2.Element;
+    Creator: (props: SentCardProps) => JSX_2.Element;
+    Visitor: (props: ReceivedCardProps) => JSX_2.Element;
 };
 
 declare interface LockedAttachmentBaseProps {
     title?: string;
-    /** Dimmed fallback shown in the title slot when `title` is unset (no attachment metadata yet — still drafting). */
-    placeholderTitle?: string;
     mimeType?: string;
     thumbnailUrl?: string;
     detail?: string;
     amountText?: string;
+    paymentStatus?: PaymentStatus;
     /**
      * When provided with 2+ items, the card renders as a mixed-media carousel
      * (e.g. a couple of photos + a video) instead of a single thumbnail. Each
      * item brings its own thumbnail and optional source so that
-     * `LockedAttachment.Composer` / `.Media` can share the same carousel
-     * chrome.
+     * `LockedAttachment.Composer` / `.Sent` / `.Received` can all share the
+     * same carousel chrome.
      */
     gallery?: LockedAttachmentGalleryItem[];
-    /**
-     * "text" renders the card as a locked/plain chat bubble showing the
-     * message's own text (skeleton-blurred until purchased) instead of a media
-     * thumbnail card — for a paid text-only message. Media-only props
-     * (`mimeType`, `thumbnailUrl`, `title`, `detail`, `gallery`) are ignored in
-     * this mode. Defaults to `"media"`.
-     */
-    contentType?: 'text' | 'media';
 }
 
 export declare interface LockedAttachmentContextValue {
     isUnlocking: (id: string) => boolean;
     onUnlockClick?: (message: LocalMessage, channel: Channel) => void;
     onDownloadClick?: (message: LocalMessage, channel: Channel) => void;
-    /**
-     * Reveal the locked media's underlying source (URL/thumbnail). Not used
-     * for a paid text message — the backend writes the real text directly onto
-     * the message on purchase and `message.text` alone drives that reveal.
-     */
     onFetchSource?: (message: LocalMessage, channel: Channel) => Promise<LockedAttachmentSource | void>;
 }
 
@@ -788,31 +769,6 @@ export declare interface LockedAttachmentGalleryItem {
     sourceUrl?: string;
 }
 
-export declare type LockedAttachmentMediaCardProps = (MediaCardSharedProps & {
-    isMine: true;
-    /** Dimmed fallback shown in the title slot when `title` is unset. */
-    placeholderTitle?: string;
-    /** Fired the first time the sender taps the thumbnail to preview their own attachment. */
-    onPreviewClick?: () => void;
-}) | (MediaCardSharedProps & {
-    isMine: false;
-    /**
-     * When true, shows a loading spinner on the Unlock button. Driven by
-     * the LockedAttachmentContext (e.g. checkout in progress).
-     */
-    isUnlocking?: boolean;
-    /**
-     * Called when the recipient clicks Unlock on an unpaid attachment.
-     * Use this to open a checkout flow. Omit to hide the Unlock button.
-     */
-    onUnlockClick?: () => void;
-    /**
-     * Called when the recipient clicks Download on an unlocked card.
-     * Omit to hide the Download button.
-     */
-    onDownloadClick?: () => void;
-});
-
 export declare interface LockedAttachmentSource {
     /** Proxied URL used by the media player for in-app playback. */
     sourceUrl: string;
@@ -822,33 +778,6 @@ export declare interface LockedAttachmentSource {
     thumbnailUrl?: string;
 }
 
-export declare type LockedAttachmentTextCardProps = (TextCardSharedProps & {
-    isMine: true;
-}) | (TextCardSharedProps & {
-    isMine: false;
-    /**
-     * Called when the recipient clicks Unlock on an unpaid attachment.
-     * Use this to open a checkout flow. Omit to hide the Unlock button.
-     */
-    onUnlockClick?: () => void;
-    /**
-     * When true, shows a loading spinner on the Unlock button. Driven by
-     * the LockedAttachmentContext (e.g. checkout in progress).
-     */
-    isUnlocking?: boolean;
-});
-
-declare interface MediaCardSharedProps {
-    title?: string;
-    mimeType?: string;
-    thumbnailUrl?: string;
-    detail?: string;
-    amountText?: string;
-    paymentStatus?: PaymentStatus;
-    gallery?: LockedAttachmentGalleryItem[];
-    onFetchSource?: FetchSourceHandler;
-}
-
 export declare const MediaMessage: default_2.FC<MediaMessageProps> & {
     Creator: default_2.FC<{
         message: LocalMessage;
@@ -1255,7 +1184,6 @@ export declare interface MessageMetadata {
     amount_text?: string;
     payment_status?: PaymentStatus;
     attachment_title?: string;
-    attachment_content_type?: 'text' | 'media';
     attachment_mime_type?: string;
     attachment_thumbnail?: string;
     attachment_detail?: string;
@@ -1468,6 +1396,31 @@ declare interface PdfAttachmentSharedProps extends MessageAttachmentBaseProps {
     onClick?: (index: number) => boolean | void;
 }
 
+export declare interface ReceivedCardProps extends LockedAttachmentBaseProps {
+    /**
+     * Called when the recipient clicks Unlock on an unpaid attachment.
+     * Use this to open a checkout flow. Omit to hide the Unlock button.
+     */
+    onUnlockClick?: () => void;
+    /**
+     * Called to fetch the attachment source — fired automatically when
+     * `paymentStatus` transitions to `'paid'`, or immediately on click when
+     * `paymentStatus` is already `'paid'`. Return a `LockedAttachmentSource`
+     * to unlock the card.
+     */
+    onFetchSource?: () => Promise<LockedAttachmentSource | void>;
+    /**
+     * Called when the recipient clicks Download on an unlocked card.
+     * Omit to hide the Download button.
+     */
+    onDownloadClick?: () => void;
+    /**
+     * When true, shows a loading spinner on the Unlock button.
+     * Driven by the LockedAttachmentContext (e.g. checkout in progress).
+     */
+    isUnlocking?: boolean;
+}
+
 /**
  * Resolves the member to display as the conversation's "other party".
  *
@@ -1490,16 +1443,17 @@ export declare function resolveMediaFromMessage(message: LocalMessage): MediaMes
  */
 export declare function resolveParticipantDisplayName(user?: ParticipantDisplayUser | null): string;
 
-declare interface TextCardSharedProps {
-    amountText?: string;
-    paymentStatus?: PaymentStatus;
+export declare interface SentCardProps extends LockedAttachmentBaseProps {
+    /** Placeholder shown in the title slot when no title is set. */
+    placeholderTitle?: string;
+    /** Fired the first time the sender taps the thumbnail to preview their own attachment. */
+    onPreviewClick?: () => void;
     /**
-     * The message's real, revealed content — shown instead of the skeleton
-     * loader once `paymentStatus` is `'paid'`. Ignored otherwise. Lets the
-     * caller supply its own text renderer (e.g. Stream's `MessageText`)
-     * without `LockedAttachment` depending on it.
+     * Lazily loads the underlying source so the sender can preview the attachment.
+     * Called the first time the thumbnail is tapped; the returned source is cached
+     * and reused on subsequent toggles.
      */
-    children?: default_2.ReactNode;
+    onFetchSource?: () => Promise<LockedAttachmentSource | void>;
 }
 
 /**
@@ -1570,6 +1524,9 @@ declare interface VideoAttachmentSharedProps extends MessageAttachmentBaseProps
     onClick?: (index: number) => boolean | void;
 }
 
+/** @deprecated Renamed to `ReceivedCardProps`. */
+export declare type VisitorCardProps = ReceivedCardProps;
+
 export declare type VoteSelection = 'up' | 'down' | null;
 
 export { }

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as d, m as p, n as v, o as C, p as A, q as k, s as F, t as P, u as b, v as f, w as x, x as y, y as S, z as q, B as z, D as B, E as D, G as E } from "./index-B8gqCioX.js";
+import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as d, m as p, n as v, o as C, p as A, q as k, s as F, t as P, u as b, v as f, w as x, x as y, y as S, z as q, B as z, D as B, E as D, G as E } from "./index-Bv79lb0u.js";
 export {
   e as ActionButton,
   t as Avatar,

package/dist/testing.d.ts

@@ -47,7 +47,6 @@ export declare interface MessageMetadata {
     amount_text?: string;
     payment_status?: PaymentStatus;
     attachment_title?: string;
-    attachment_content_type?: 'text' | 'media';
     attachment_mime_type?: string;
     attachment_thumbnail?: string;
     attachment_detail?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.9.0-rc-1783472582",
+  "version": "3.9.0-rc-1783568295",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "2.3.0-rc-1783472582",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1783568295",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/CustomMessage/CustomMessage.stories.tsx

@@ -126,7 +126,6 @@ interface TemplateProps {
       attachment_mime_type?: string
       attachment_thumbnail?: string
       attachment_detail?: string
-      attachment_content_type?: 'text' | 'media'
     }
   }>
 }
@@ -417,59 +416,7 @@ LockedAttachment.args = {
   ],
 }
 
-export const LockedTextAttachment: StoryFn<TemplateProps> = Template.bind({})
-LockedTextAttachment.args = {
-  messages: [
-    {
-      id: 'msg-1',
-      text: 'Can you send me the details privately?',
-      user: storyUsers.visitor,
-    },
-    {
-      id: 'msg-2',
-      // Empty text: the real content is redacted server-side until purchase,
-      // so the bubble renders the blurred placeholder instead.
-      text: '',
-      user: storyUsers.creator,
-      metadata: {
-        custom_type: 'MESSAGE_ATTACHMENT',
-        amount_text: 'AU$4.99',
-        attachment_content_type: 'text',
-      },
-    },
-    {
-      id: 'msg-3',
-      text: '',
-      user: storyUsers.creator,
-      metadata: {
-        custom_type: 'MESSAGE_ATTACHMENT',
-        amount_text: 'AU$4.99',
-        payment_status: 'paid',
-        attachment_content_type: 'text',
-      },
-    },
-    {
-      id: 'msg-4',
-      // Buyer reveal: backend writes the real text back onto the message.
-      text: "Here's the address — see you Thursday at 7!",
-      user: storyUsers.creator,
-      metadata: {
-        custom_type: 'MESSAGE_ATTACHMENT',
-        amount_text: 'AU$4.99',
-        payment_status: 'paid',
-        attachment_content_type: 'text',
-      },
-    },
-  ],
-}
-LockedTextAttachment.parameters = {
-  docs: {
-    description: {
-      story:
-        'A paid text-only message renders as a regular bubble with blurred placeholder copy (msg-2: pending, msg-3: purchased-but-not-yet-revealed) until the real text is revealed (msg-4).',
-    },
-  },
-}
+
 
 export const ChatbotVariants: StoryFn<TemplateProps> = Template.bind({})
 ChatbotVariants.args = {

package/src/components/CustomMessage/MessageTag.tsx

@@ -47,14 +47,6 @@ export const isAttachmentMessage = (message: LocalMessage): boolean => {
   return message.metadata?.custom_type === 'MESSAGE_ATTACHMENT'
 }
 
-export const isTextAttachmentMessage = (message: LocalMessage): boolean => {
-  return isAttachmentMessage(message) && message.metadata?.attachment_content_type === 'text'
-}
-
-export const isMediaAttachmentMessage = (message: LocalMessage): boolean => {
-  return isAttachmentMessage(message) && message.metadata?.attachment_content_type !== 'text'
-}
-
 /** Check if a message has a tip/paid tag (both render the same) */
 export const isTipOrPaidMessage = (message: LocalMessage): boolean => {
   return isTipMessage(message) || isPaidMessage(message)

package/src/components/CustomMessage/index.tsx

@@ -34,15 +34,15 @@ import { getMessageDisplayText } from '../../utils/getMessageDisplayText'
 import { Avatar } from '../Avatar'
 import LockedAttachment from '../LockedAttachment'
 import { isLinkAttachment } from '../MediaMessage'
-import { bubbleGroupPositionFromStream as messageAttachmentGroupPositionFromStream } from '../MessageAttachment'
+import {
+  bubbleGroupPositionFromStream as messageAttachmentGroupPositionFromStream,
+} from '../MessageAttachment'
 
 import { useCustomMessage } from './context'
 import {
   MessageTag,
   isAttachmentMessage,
   isChatbotMessage,
-  isMediaAttachmentMessage,
-  isTextAttachmentMessage,
   isTipOnlyMessage,
 } from './MessageTag'
 import { MessageVoteButtons } from './MessageVoteButtons'
@@ -276,51 +276,12 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             marginInlineStart: 0,
           }}
         >
-          {isTipOnly ? (
-            <MessageTag message={message} standalone />
-          ) : isTextAttachmentMessage(message) ? (
-            <div className="str-chat__message-bubble-wrapper">
-              <div className="flex items-center gap-2">
-                {isMine && MessageActions && <MessageActions />}
-                {isMine ? (
-                  <LockedAttachment.Text
-                    isMine={true}
-                    amountText={message.metadata?.amount_text}
-                    paymentStatus={message.metadata?.payment_status}
-                  >
-                    {message.text && (
-                      <MessageText
-                        message={displayMessage}
-                        renderText={renderText}
-                      />
-                    )}
-                  </LockedAttachment.Text>
-                ) : (
-                  <LockedAttachment.Text
-                    isMine={false}
-                    amountText={message.metadata?.amount_text}
-                    paymentStatus={message.metadata?.payment_status}
-                    isUnlocking={isUnlocking(message.id)}
-                    onUnlockClick={() => onUnlockClick?.(message, channel)}
-                  >
-                    {message.text && (
-                      <MessageText
-                        message={displayMessage}
-                        renderText={renderText}
-                      />
-                    )}
-                  </LockedAttachment.Text>
-                )}
-                {!isMine && MessageActions && <MessageActions />}
-              </div>
-            </div>
-          ) : isMediaAttachmentMessage(message) ? (
+          {isAttachment ? (
             <div className="str-chat__message-bubble-wrapper">
-              <div className="flex items-center gap-2">
-                {isMine && MessageActions && <MessageActions />}
-                {isMine ? (
-                  <LockedAttachment.Media
-                    isMine={true}
+              {isMine ? (
+                <div className="flex items-center gap-2">
+                  {MessageActions && <MessageActions />}
+                  <LockedAttachment.Sent
                     title={message.metadata?.attachment_title}
                     mimeType={message.metadata?.attachment_mime_type}
                     thumbnailUrl={message.metadata?.attachment_thumbnail}
@@ -328,15 +289,14 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
                     detail={message.metadata?.attachment_detail}
                     paymentStatus={message.metadata?.payment_status}
                     onPreviewClick={() => onUnlockClick?.(message, channel)}
-                    onFetchSource={
-                      onFetchSource
-                        ? () => onFetchSource(message, channel)
-                        : undefined
+                    onFetchSource={async () =>
+                      await onFetchSource?.(message, channel)
                     }
                   />
-                ) : (
-                  <LockedAttachment.Media
-                    isMine={false}
+                </div>
+              ) : (
+                <div className="flex items-center gap-2">
+                  <LockedAttachment.Received
                     title={message.metadata?.attachment_title}
                     mimeType={message.metadata?.attachment_mime_type}
                     thumbnailUrl={message.metadata?.attachment_thumbnail}
@@ -345,16 +305,14 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
                     paymentStatus={message.metadata?.payment_status}
                     isUnlocking={isUnlocking(message.id)}
                     onUnlockClick={() => onUnlockClick?.(message, channel)}
-                    onFetchSource={
-                      onFetchSource
-                        ? () => onFetchSource(message, channel)
-                        : undefined
+                    onFetchSource={async () =>
+                      await onFetchSource?.(message, channel)
                     }
                     onDownloadClick={() => onDownloadClick?.(message, channel)}
                   />
-                )}
-                {!isMine && MessageActions && <MessageActions />}
-              </div>
+                  {MessageActions && <MessageActions />}
+                </div>
+              )}
               {message.text && (
                 <div className="str-chat__message-bubble">
                   <MessageText
@@ -364,6 +322,9 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
                 </div>
               )}
             </div>
+          ) : isTipOnly ? (
+            /* Tip-only messages render as a standalone bubble */
+            <MessageTag message={message} standalone />
           ) : canRenderAttachmentsInToolkit ? (
             <div className="str-chat__message-bubble-wrapper">
               <div

package/src/components/CustomMessageInput/index.tsx

@@ -86,6 +86,9 @@ const CustomMessageInputInner: React.FC = () => {
             // gain focus automatically.
             // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus={!disabled}
+            // Enter sends (Shift+Enter inserts a newline), so label the
+            // on-screen keyboard's return key accordingly.
+            enterKeyHint="send"
             maxRows={4}
             readOnly={disabled}
             tabIndex={disabled ? -1 : undefined}