@droppii-org/chat-mobile 0.2.80 → 0.2.82

package/lib/typescript/src/utils/url.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"url.d.ts","sourceRoot":"","sources":["../../../../src/utils/url.ts"],"names":[],"mappings":"AA+BA,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAElD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,UAKvC;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAGjD"}
+{"version":3,"file":"url.d.ts","sourceRoot":"","sources":["../../../../src/utils/url.ts"],"names":[],"mappings":"AA+BA,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAElD;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;CAChB;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,CAgB3E;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,UAKvC;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAGjD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@droppii-org/chat-mobile",
-  "version": "0.2.80",
+  "version": "0.2.82",
   "description": "Droppii chat mobile",
   "keywords": [
     "react-native",
@@ -100,6 +100,7 @@
     "@types/react-native-snap-carousel": "^3.8.5",
     "@types/react-query": "^1.2.9",
     "commitlint": "^20.5.0",
+    "dayjs": "1.11.18",
     "del-cli": "^7.0.0",
     "deprecated-react-native-prop-types": "5.0.0",
     "eslint": "^9.39.4",
@@ -143,6 +144,7 @@
     "@react-native-community/netinfo": "*",
     "@react-native-documents/picker": "*",
     "@tanstack/react-query": "*",
+    "dayjs": "*",
     "react": "*",
     "react-native": "*",
     "react-native-blob-util": "*",

package/src/build-ignore.d.ts

@@ -8,6 +8,7 @@ declare module '@droppii/libs' {
   export type KToastBarProps = any;
   export type KListItemBaseItemProps = any;
   export type KSpacing = any;
+  export type KTagsChoiceSlideBarItemProps = any;
 
   export const KColors: any;
   export const KSpacingValue: any;
@@ -26,4 +27,5 @@ declare module '@droppii/libs' {
   export const KFonts: any;
   export const KBadge: any;
   export const KNavigation: any;
+  export const KTagsChoiceSlideBar: any;
 }

package/src/components/ThreadCard/MentionBadge.tsx

@@ -0,0 +1,28 @@
+import { memo } from 'react';
+import { KLabel, KColors } from '@droppii/libs';
+import { GroupAtType } from '@droppii/openim-rn-client-sdk';
+
+interface MentionBadgeProps {
+  groupAtType?: GroupAtType;
+}
+
+// Figma (node 15177-302069): "@" renders as a standalone bold glyph, no
+// background — same color token as the composer/bubble mention highlight
+// (KColors.palette.primary.w400), not a new one-off value.
+export const MentionBadge = memo(({ groupAtType }: MentionBadgeProps) => {
+  if (groupAtType === undefined || groupAtType === GroupAtType.AtNormal) {
+    return null;
+  }
+
+  return (
+    <KLabel.Text
+      typo="TextNmBold"
+      color={KColors.palette.primary.w400}
+      marginL="0.5rem"
+    >
+      @
+    </KLabel.Text>
+  );
+});
+
+MentionBadge.displayName = 'MentionBadge';

package/src/components/ThreadCard/ThreadCard.tsx

@@ -6,6 +6,7 @@ import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
 import { AvatarSection } from './AvatarSection';
 import { NamePrefixIcon } from './NamePrefixIcon';
 import { UnreadBadge } from './UnreadBadge';
+import { MentionBadge } from './MentionBadge';
 import { formatTimestamp } from '../../utils/dateTimeUtils';
 import {
   getLastMessageText,
@@ -44,6 +45,7 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
     latestMsgSendTime,
     latestMsg,
     groupID,
+    groupAtType,
   } = conversation || {};
 
   const { data: isJoinedGroup } = useIsJoinedGroup(groupID);
@@ -183,6 +185,7 @@ const ThreadCard = memo(({ item, onPress }: ThreadCardProps) => {
                 />
               </KContainer.View>
             </KContainer.VisibleView>
+            <MentionBadge groupAtType={groupAtType} />
             <UnreadBadge count={unreadCount} />
           </KContainer.View>
         </KContainer.View>

package/src/components/messages/linkMessage/LinkPreviewCard.tsx

@@ -0,0 +1,92 @@
+import { memo } from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  KContainer,
+  KImage,
+  KLabel,
+  KColors,
+  KSpacingValue,
+} from '@droppii/libs';
+import type { IUrlMetadata } from '../../../types/common';
+
+interface LinkPreviewCardProps {
+  metadata: IUrlMetadata;
+  onPressUrl?: (url: string) => void;
+}
+
+/**
+ * The rich link-preview card (thumbnail/title/url/description) — shared by
+ * LinkMessage (message.urlTextElem, a plain URL message) and TextMessage
+ * (mention+URL combo: message.ex.urlMetadata attached to an AtTextMessage,
+ * since OpenIM's AtTextMessage/UrlTextMessage content types are mutually
+ * exclusive — see useSendMessage.ts's doc comment for why the mention wins
+ * the content type and the URL card rides along in `ex` instead).
+ */
+export const LinkPreviewCard = memo(
+  ({ metadata, onPressUrl }: LinkPreviewCardProps) => (
+    <KContainer.Touchable
+      style={styles.card}
+      onPress={() => metadata.url && onPressUrl?.(metadata.url)}
+    >
+      {!!metadata.image && (
+        <KContainer.View style={styles.cardThumb}>
+          <KImage.Base
+            uri={metadata.image}
+            style={StyleSheet.absoluteFill}
+            resizeMode="cover"
+          />
+        </KContainer.View>
+      )}
+      <KContainer.View style={styles.cardBody}>
+        {!!metadata.title && (
+          <KLabel.Text
+            typo="TextNmMedium"
+            color={KColors.palette.gray.w900}
+            numberOfLines={1}
+          >
+            {metadata.title}
+          </KLabel.Text>
+        )}
+        {!!metadata.url && (
+          <KLabel.Text
+            typo="TextXsMedium"
+            color={KColors.palette.primary.w400}
+            numberOfLines={1}
+          >
+            {metadata.url}
+          </KLabel.Text>
+        )}
+        {!!metadata.description && (
+          <KLabel.Text
+            typo="TextXsNormal"
+            color={KColors.gray.normal}
+            numberOfLines={2}
+          >
+            {metadata.description}
+          </KLabel.Text>
+        )}
+      </KContainer.View>
+    </KContainer.Touchable>
+  )
+);
+
+LinkPreviewCard.displayName = 'LinkPreviewCard';
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: KSpacingValue['0.75rem'],
+    borderWidth: 1,
+    borderColor: 'rgba(57,62,64,0.1)',
+    backgroundColor: KColors.white,
+    overflow: 'hidden',
+  },
+  cardThumb: {
+    width: '100%',
+    aspectRatio: 16 / 9,
+  },
+  cardBody: {
+    paddingHorizontal: KSpacingValue['0.75rem'],
+    paddingVertical: KSpacingValue['0.5rem'],
+    gap: 2,
+  },
+});

package/src/components/messages/linkMessage/index.tsx

@@ -1,16 +1,12 @@
 import { memo } from 'react';
 import { StyleSheet } from 'react-native';
-import {
-  KContainer,
-  KImage,
-  KLabel,
-  KColors,
-  KSpacingValue,
-} from '@droppii/libs';
+import { KContainer, KLabel, KColors, KSpacingValue } from '@droppii/libs';
 import type { BaseLegendMessageProps } from '../types';
 import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
 import { parseUrlMetadata } from '../../../utils/messageUtils';
+import { splitTextByUrls } from '../../../utils/url';
 import { messageStyles } from '../styles';
+import { LinkPreviewCard } from './LinkPreviewCard';
 import { getTailCornerStyle } from '../bubbleTail.utils';
 import { BubbleTailRow } from '../BubbleTailRow';
 
@@ -18,45 +14,26 @@ const renderTextWithLinks = (
   content: string,
   urls: string[],
   onPressUrl?: (url: string) => void
-) => {
-  if (!urls.length) {
-    return <KLabel.Text typo="TextMdNormal">{content}</KLabel.Text>;
-  }
-
-  const parts: { text: string; isUrl: boolean }[] = [];
-  let remaining = content;
-
-  for (const url of urls) {
-    const idx = remaining.indexOf(url);
-    if (idx === -1) continue;
-    if (idx > 0) parts.push({ text: remaining.slice(0, idx), isUrl: false });
-    parts.push({ text: url, isUrl: true });
-    remaining = remaining.slice(idx + url.length);
-  }
-
-  if (remaining) parts.push({ text: remaining, isUrl: false });
-
-  return (
-    <KLabel.Text typo="TextMdNormal">
-      {parts.map((part, i) =>
-        part.isUrl ? (
-          <KLabel.Text
-            key={i}
-            onPress={() => onPressUrl?.(part.text)}
-            color={KColors.primary.normal}
-            typo="TextMdMedium"
-          >
-            {part.text}
-          </KLabel.Text>
-        ) : (
-          <KLabel.Text typo="TextMdNormal" key={i}>
-            {part.text}
-          </KLabel.Text>
-        )
-      )}
-    </KLabel.Text>
-  );
-};
+) => (
+  <KLabel.Text typo="TextMdNormal">
+    {splitTextByUrls(content, urls).map((part, i) =>
+      part.isUrl ? (
+        <KLabel.Text
+          key={i}
+          onPress={() => onPressUrl?.(part.text)}
+          color={KColors.primary.normal}
+          typo="TextMdMedium"
+        >
+          {part.text}
+        </KLabel.Text>
+      ) : (
+        <KLabel.Text typo="TextMdNormal" key={i}>
+          {part.text}
+        </KLabel.Text>
+      )
+    )}
+  </KLabel.Text>
+);
 
 export const LinkMessage = memo(
   ({
@@ -87,49 +64,7 @@ export const LinkMessage = memo(
           )}
 
           {!!metadata && (
-            <KContainer.Touchable
-              style={styles.card}
-              onPress={() => metadata.url && onPressUrl?.(metadata.url)}
-            >
-              {!!metadata.image && (
-                <KContainer.View style={styles.cardThumb}>
-                  <KImage.Base
-                    uri={metadata.image}
-                    style={StyleSheet.absoluteFill}
-                    resizeMode="cover"
-                  />
-                </KContainer.View>
-              )}
-              <KContainer.View style={styles.cardBody}>
-                {!!metadata.title && (
-                  <KLabel.Text
-                    typo="TextNmMedium"
-                    color={KColors.palette.gray.w900}
-                    numberOfLines={1}
-                  >
-                    {metadata.title}
-                  </KLabel.Text>
-                )}
-                {!!metadata.url && (
-                  <KLabel.Text
-                    typo="TextXsMedium"
-                    color={KColors.palette.primary.w400}
-                    numberOfLines={1}
-                  >
-                    {metadata.url}
-                  </KLabel.Text>
-                )}
-                {!!metadata.description && (
-                  <KLabel.Text
-                    typo="TextXsNormal"
-                    color={KColors.gray.normal}
-                    numberOfLines={2}
-                  >
-                    {metadata.description}
-                  </KLabel.Text>
-                )}
-              </KContainer.View>
-            </KContainer.Touchable>
+            <LinkPreviewCard metadata={metadata} onPressUrl={onPressUrl} />
           )}
         </KContainer.View>
       </BubbleTailRow>
@@ -157,6 +92,7 @@ const styles = StyleSheet.create({
   textRow: {
     paddingHorizontal: KSpacingValue['0.25rem'],
   },
+  timeLabel: { gap: 4, marginTop: 2 },
   card: {
     borderRadius: KSpacingValue['0.75rem'],
     borderWidth: 1,

package/src/components/messages/quotedMessage/QuotedMessagePreviewStrip.tsx

@@ -0,0 +1,168 @@
+import { memo, useCallback, useMemo } from 'react';
+import { DeviceEventEmitter, StyleSheet } from 'react-native';
+import {
+  KColors,
+  KContainer,
+  KImage,
+  KLabel,
+  KRadiusValue,
+  KSpacingValue,
+} from '@droppii/libs';
+import { MessageType, type MessageItem } from '@droppii/openim-rn-client-sdk';
+import {
+  getMessagePreviewParts,
+  getReplySenderName,
+  parseUrlMetadata,
+} from '../../../utils/messageUtils';
+import { getFileIcon, getMimeType } from '../../../utils/imageUtils';
+import { useUserStore } from '../../../store';
+import { useChatDetailContext } from '../../../context';
+import { ChatEvent } from '../../../types/events';
+
+interface QuotedMessagePreviewStripProps {
+  quotedMessage?: MessageItem;
+}
+
+/**
+ * The "replying to ..." strip — shared by QuotedMessage (message.quoteElem)
+ * and TextMessage (message.atTextElem?.quoteMessage, for the mention+quote
+ * combo). Extracted so both content types render the exact same preview
+ * instead of two copies drifting apart.
+ */
+export const QuotedMessagePreviewStrip = memo(
+  ({ quotedMessage }: QuotedMessagePreviewStripProps) => {
+    const { conversation } = useChatDetailContext();
+    const currentUserId = useUserStore((s) => s.user?.userID);
+    const messagePreview = getMessagePreviewParts(quotedMessage);
+
+    const imageUrl = useMemo(() => {
+      switch (quotedMessage?.contentType) {
+        case MessageType.PictureMessage:
+          return quotedMessage?.pictureElem?.snapshotPicture?.url || '';
+        case MessageType.VideoMessage:
+          return quotedMessage?.videoElem?.snapshotUrl || '';
+        case MessageType.UrlTextMessage: {
+          const metadata = parseUrlMetadata(quotedMessage?.ex);
+          return metadata?.image || '';
+        }
+        default:
+          return '';
+      }
+    }, [quotedMessage]);
+
+    const iconSource = useMemo(() => {
+      if (quotedMessage?.contentType !== MessageType.FileMessage) return '';
+      const mimeType = getMimeType(quotedMessage?.fileElem?.fileName || '');
+      return getFileIcon(mimeType);
+    }, [quotedMessage]);
+
+    const handlePress = useCallback(() => {
+      DeviceEventEmitter.emit(ChatEvent.ScrollToMessage, {
+        clientMessageId: quotedMessage?.clientMsgID || '',
+      });
+    }, [quotedMessage]);
+
+    return (
+      <KContainer.Touchable
+        style={styles.quotedContainer}
+        onPress={handlePress}
+      >
+        <KContainer.View style={styles.dot} />
+        <KContainer.VisibleView visible={!!imageUrl}>
+          <KContainer.View style={styles.imageContainer}>
+            <KImage.Base uri={imageUrl} style={styles.imageContainer} />
+            <KContainer.VisibleView
+              visible={quotedMessage?.contentType === MessageType.VideoMessage}
+            >
+              <KContainer.View style={styles.playIconContainer}>
+                <KContainer.View style={styles.playIcon}>
+                  <KImage.VectorIcons
+                    name="play-b"
+                    size={12}
+                    color={KColors.white}
+                  />
+                </KContainer.View>
+              </KContainer.View>
+            </KContainer.VisibleView>
+          </KContainer.View>
+        </KContainer.VisibleView>
+        <KContainer.VisibleView visible={!!iconSource}>
+          <KImage.Base
+            uri={iconSource}
+            style={styles.icon}
+            resizeMode="contain"
+          />
+        </KContainer.VisibleView>
+        <KContainer.View flexS={1} style={styles.content}>
+          <KLabel.Text typo="TextNmMedium" numberOfLines={1}>
+            {getReplySenderName(
+              quotedMessage,
+              currentUserId,
+              conversation,
+              true
+            )}
+          </KLabel.Text>
+          <KLabel.Text
+            typo="TextSmNormal"
+            color={KColors.gray.light}
+            numberOfLines={1}
+            {...messagePreview.textProps}
+          >
+            {messagePreview.text}
+          </KLabel.Text>
+        </KContainer.View>
+      </KContainer.Touchable>
+    );
+  }
+);
+
+QuotedMessagePreviewStrip.displayName = 'QuotedMessagePreviewStrip';
+
+const styles = StyleSheet.create({
+  quotedContainer: {
+    backgroundColor: KColors.white,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: KSpacingValue['0.5rem'],
+    borderTopRightRadius: KRadiusValue['3x'],
+    borderBottomRightRadius: KRadiusValue['3x'],
+    paddingRight: KSpacingValue['0.5rem'],
+    maxWidth: '100%',
+  },
+  dot: {
+    width: 3,
+    height: '100%',
+    backgroundColor: KColors.palette.grayCool.w200,
+    borderRadius: KRadiusValue.x,
+    marginRight: -2,
+  },
+  content: {
+    paddingHorizontal: KSpacingValue['0.25rem'],
+    paddingVertical: KSpacingValue['0.25rem'],
+  },
+  icon: {
+    width: 24,
+    height: 24,
+  },
+  imageContainer: {
+    width: 42,
+    height: 42,
+    borderRadius: KRadiusValue['2x'],
+  },
+  playIconContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  playIcon: {
+    borderRadius: 8,
+    padding: KSpacingValue['0.25rem'],
+    backgroundColor: KColors.hexToRgba(KColors.black, 0.6),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/components/messages/textMessage/index.tsx

@@ -1,29 +1,116 @@
-import { memo } from 'react';
-import { KContainer, KLabel } from '@droppii/libs';
+import { memo, useMemo } from 'react';
+import { Text } from 'react-native';
+import { MessageType } from '@droppii/openim-rn-client-sdk';
+import { KContainer, KLabel, KColors } from '@droppii/libs';
 import { getMessageText } from '../../../utils/legendListMessage';
 import { CHAT_BUBBLE_COLORS } from '../../../screens/chat-detail/constants';
 import { messageStyles } from '../styles';
 import { getTailCornerStyle } from '../bubbleTail.utils';
 import { BubbleTailRow } from '../BubbleTailRow';
 import type { BaseLegendMessageProps } from '../types';
+import { StyleSheet } from 'react-native';
+import { tokenize } from '../../../utils/mentions';
+import { deserializeMentionRanges } from '../../../utils/mentionSerializer';
+import type { IMessageItemEx } from '../../../types/chat';
+import { QuotedMessagePreviewStrip } from '../quotedMessage/QuotedMessagePreviewStrip';
+import { LinkPreviewCard } from '../linkMessage/LinkPreviewCard';
+import { extractUrls, splitTextByUrls } from '../../../utils/url';
+
+const parseMessageEx = (ex?: string): IMessageItemEx | undefined => {
+  if (!ex) return undefined;
+  try {
+    return JSON.parse(ex) as IMessageItemEx;
+  } catch {
+    return undefined;
+  }
+};
+
 export const TextMessage = memo(
   ({
     message,
     isOutgoing,
     isHighlighted,
+    onPressUrl,
     groupPosition,
-  }: BaseLegendMessageProps) => {
+  }: BaseLegendMessageProps & { onPressUrl?: (url: string) => void }) => {
     const messageText = getMessageText(message);
 
+    const isAtTextMessage = message.contentType === MessageType.AtTextMessage;
+
+    // Both the reply-preview strip and the link-preview card below piggyback
+    // on an AtTextMessage instead of getting their own content type — OpenIM
+    // content types are mutually exclusive (AtText vs Quote vs UrlText), so
+    // once mention picks AtText (to keep native tag/notify semantics — see
+    // useSendMessage.ts), quote rides along via the native
+    // AtTextElem.quoteMessage field and the URL card rides along via our own
+    // ex.urlMetadata channel (already attached unconditionally on send).
+    const quotedMessage = isAtTextMessage
+      ? message.atTextElem?.quoteMessage
+      : undefined;
+
+    const parsedEx = useMemo(
+      () => (isAtTextMessage ? parseMessageEx(message.ex) : undefined),
+      [isAtTextMessage, message.ex]
+    );
+    const urlMetadata = parsedEx?.urlMetadata;
+
+    const mentions = useMemo(() => {
+      if (!isAtTextMessage || !message.atTextElem) return [];
+      // Wrapped under `offsets` — matches the wire shape other Droppii
+      // clients (e.g. the web/CRM app) already send (see
+      // IMessageItemEx.mentions doc comment for how this was confirmed).
+      return deserializeMentionRanges(
+        message.atTextElem,
+        parsedEx?.mentions?.offsets
+      );
+    }, [isAtTextMessage, message.atTextElem, parsedEx]);
+
+    const segments = useMemo(
+      () => (mentions.length > 0 ? tokenize(messageText, mentions) : null),
+      [mentions, messageText]
+    );
+
+    // Scoped to the mention+URL combo only (`segments` implies mentions are
+    // present) — a plain TextMessage with no mention falls through to
+    // `messageText` unchanged below, same as before this feature existed.
+    // Widening this to auto-linkify every TextMessage is a separate,
+    // deliberate product decision, not a side effect of this fix.
+    const urls = useMemo(
+      () => (segments ? extractUrls(messageText) : []),
+      [segments, messageText]
+    );
+
     if (!messageText?.trim()) {
       return null;
     }
 
+    // A plain-text run (the space between two mentions) may itself contain
+    // a URL — split further so it gets the same tappable/colored treatment
+    // LinkMessage gives a pure URL message, instead of sitting there as
+    // unstyled black text next to a colored mention.
+    const renderTextRun = (text: string, keyPrefix: string) => {
+      if (!urls.length) return <Text key={keyPrefix}>{text}</Text>;
+      return splitTextByUrls(text, urls).map((part, i) =>
+        part.isUrl ? (
+          <Text
+            key={`${keyPrefix}-url-${i}`}
+            style={urlTextStyle}
+            onPress={() => onPressUrl?.(part.text)}
+          >
+            {part.text}
+          </Text>
+        ) : (
+          <Text key={`${keyPrefix}-text-${i}`}>{part.text}</Text>
+        )
+      );
+    };
+
     return (
       <BubbleTailRow isOutgoing={isOutgoing} groupPosition={groupPosition}>
         <KContainer.View
           style={[
             messageStyles.bubble,
+            styles.bubbleContent,
             isOutgoing
               ? messageStyles.bubbleSent
               : messageStyles.bubbleReceived,
@@ -31,9 +118,25 @@ export const TextMessage = memo(
             getTailCornerStyle(isOutgoing, groupPosition),
           ]}
         >
+          {quotedMessage && (
+            <QuotedMessagePreviewStrip quotedMessage={quotedMessage} />
+          )}
           <KLabel.Text typo="TextMdNormal" color={CHAT_BUBBLE_COLORS.text}>
-            {messageText}
+            {segments
+              ? segments.map((segment, index) =>
+                  segment.type === 'mention' ? (
+                    <Text key={segment.mention.id} style={mentionTextStyle}>
+                      {`@${segment.mention.displayName}`}
+                    </Text>
+                  ) : (
+                    renderTextRun(segment.text, `seg-${index}`)
+                  )
+                )
+              : messageText}
           </KLabel.Text>
+          {!!urlMetadata && (
+            <LinkPreviewCard metadata={urlMetadata} onPressUrl={onPressUrl} />
+          )}
         </KContainer.View>
       </BubbleTailRow>
     );
@@ -41,3 +144,20 @@ export const TextMessage = memo(
 );
 
 TextMessage.displayName = 'TextMessage';
+
+const styles = StyleSheet.create({
+  bubbleContent: { gap: 4 },
+  timeLabel: { gap: 4, marginTop: 2 },
+});
+
+// Same highlight color as the composer (MentionHighlightAdapter) and the
+// Figma screenshots. This is a read-only <Text>, not an editable
+// TextInput, so none of the nested-Text-in-TextInput bug class applies —
+// nesting styled Text here is unconditionally safe.
+const mentionTextStyle = { color: KColors.palette.primary.w400 };
+
+// Same color LinkMessage uses for a URL substring — a mention message's
+// plain-text run can contain a URL too (mention+URL combo, see
+// useSendMessage.ts's doc comment), and it should look tappable/colored
+// the same way there as it does in a pure UrlTextMessage.
+const urlTextStyle = { color: KColors.primary.normal };

package/src/config/api-endpoints.ts

@@ -22,6 +22,7 @@ export interface ApiEndpoints {
   stickerHistory: string;
   messagesResources: string;
   messages: string;
+  contacts: string;
 }
 
 const DEFAULT_ENDPOINTS: ApiEndpoints = {
@@ -35,6 +36,7 @@ const DEFAULT_ENDPOINTS: ApiEndpoints = {
   stickerHistory: '/chat-service/v1/app/stickers/history',
   messagesResources: '/chat-service/v1/app/messages/resources',
   messages: '/chat-service/v1/app/messages',
+  contacts: '/chat-service/v1/app/contacts',
 };
 
 let endpoints: ApiEndpoints = { ...DEFAULT_ENDPOINTS };