stream-chat-react-native-core 9.4.0-beta.10 → 9.4.0-beta.11

package/src/components/AutoCompleteInput/mentionItems/MentionBroadcastItem.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import type { ChannelMentionSuggestion, HereMentionSuggestion } from 'stream-chat';
+
+import { EnhancedMentionContent } from './EnhancedMentionContent';
+import { EnhancedMentionIcon } from './EnhancedMentionIcon';
+import { MentionItem } from './MentionItem';
+
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { Megaphone } from '../../../icons/megaphone';
+
+export type MentionBroadcastItemProps = {
+  entity: ChannelMentionSuggestion | HereMentionSuggestion;
+};
+
+// @channel and @here are literal SDK command keywords (matching mentioned_channel
+// and mentioned_here on the wire). The title is not localized; only the
+// description below it is.
+const TITLE = { channel: '@channel', here: '@here' } as const;
+const SUBTITLE_KEY = {
+  channel: 'mention/Channel Description',
+  here: 'mention/Here Description',
+} as const;
+
+export const MentionBroadcastItem = ({ entity }: MentionBroadcastItemProps) => {
+  const { t } = useTranslationContext();
+  return (
+    <MentionItem leading={<EnhancedMentionIcon Icon={Megaphone} />}>
+      <EnhancedMentionContent
+        subtitle={t(SUBTITLE_KEY[entity.mentionType])}
+        testID='mentions-item-name'
+        title={TITLE[entity.mentionType]}
+      />
+    </MentionItem>
+  );
+};

package/src/components/AutoCompleteInput/mentionItems/MentionItem.tsx

@@ -0,0 +1,59 @@
+import React, { PropsWithChildren, ReactNode, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { primitives } from '../../../theme';
+
+export type MentionItemProps = PropsWithChildren<{
+  /**
+   * Leading visual rendered to the left of the row. UserAvatar for user
+   * mentions, an `EnhancedMentionIcon` for the rest.
+   */
+  leading?: ReactNode;
+  testID?: string;
+}>;
+
+/**
+ * Layout primitive for every mention-suggestion row: `[leading | content]`.
+ * The per-type content (tokenized user name, or `EnhancedMentionContent` for
+ * channel/here/role/user_group) is passed as children. Container and column
+ * styles come from `theme.messageComposer.suggestions.mention`.
+ */
+export const MentionItem = ({ children, leading, testID }: MentionItemProps) => {
+  const {
+    theme: {
+      messageComposer: {
+        suggestions: {
+          mention: { column, container },
+        },
+      },
+    },
+  } = useTheme();
+  const styles = useStyles();
+
+  return (
+    <View style={[styles.container, container]} testID={testID}>
+      {leading}
+      <View style={[styles.column, column]}>{children}</View>
+    </View>
+  );
+};
+
+const useStyles = () =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        column: {
+          flex: 1,
+          justifyContent: 'space-evenly',
+        },
+        container: {
+          alignItems: 'center',
+          flexDirection: 'row',
+          paddingHorizontal: primitives.spacingXs,
+          paddingVertical: primitives.spacingXs,
+          gap: primitives.spacingSm,
+        },
+      }),
+    [],
+  );

package/src/components/AutoCompleteInput/mentionItems/MentionRoleItem.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import type { RoleMentionSuggestion } from 'stream-chat';
+
+import { EnhancedMentionContent } from './EnhancedMentionContent';
+import { EnhancedMentionIcon } from './EnhancedMentionIcon';
+import { MentionItem } from './MentionItem';
+
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { Shield } from '../../../icons/shield';
+
+export type MentionRoleItemProps = {
+  entity: RoleMentionSuggestion;
+};
+
+export const MentionRoleItem = ({ entity }: MentionRoleItemProps) => {
+  const { t } = useTranslationContext();
+  return (
+    <MentionItem leading={<EnhancedMentionIcon Icon={Shield} />}>
+      <EnhancedMentionContent
+        subtitle={t('Notify all {{ role }} members', { role: entity.name })}
+        testID='mentions-item-name'
+        title={`@${entity.name}`}
+      />
+    </MentionItem>
+  );
+};

package/src/components/AutoCompleteInput/mentionItems/MentionUserGroupItem.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import type { UserGroupMentionSuggestion } from 'stream-chat';
+
+import { EnhancedMentionContent } from './EnhancedMentionContent';
+import { EnhancedMentionIcon } from './EnhancedMentionIcon';
+import { MentionItem } from './MentionItem';
+
+import { PeopleIcon } from '../../../icons/users';
+
+export type MentionUserGroupItemProps = {
+  entity: UserGroupMentionSuggestion;
+};
+
+export const MentionUserGroupItem = ({ entity }: MentionUserGroupItemProps) => (
+  <MentionItem leading={<EnhancedMentionIcon Icon={PeopleIcon} />}>
+    <EnhancedMentionContent
+      subtitle={entity.description}
+      testID='mentions-item-name'
+      title={`@${entity.name}`}
+    />
+  </MentionItem>
+);

package/src/components/AutoCompleteInput/mentionItems/MentionUserItem.tsx

@@ -0,0 +1,55 @@
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+
+import type { UserSuggestion } from 'stream-chat';
+
+import { MentionItem } from './MentionItem';
+import { TokenizedSuggestionParts } from './TokenizedSuggestionParts';
+
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { primitives } from '../../../theme';
+import { UserAvatar } from '../../ui/Avatar/UserAvatar';
+
+export type MentionUserItemProps = {
+  entity: UserSuggestion;
+};
+
+export const MentionUserItem = ({ entity }: MentionUserItemProps) => {
+  const styles = useStyles();
+
+  return (
+    <MentionItem
+      leading={
+        <View importantForAccessibility='no-hide-descendants'>
+          <UserAvatar showOnlineIndicator={!!entity.online} size='md' user={entity} />
+        </View>
+      }
+    >
+      <TokenizedSuggestionParts
+        fallback={entity.name || entity.id}
+        matchStyle={styles.match}
+        style={styles.name}
+        testID='mentions-item-name'
+        tokenizedDisplayName={entity.tokenizedDisplayName}
+      />
+    </MentionItem>
+  );
+};
+
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  return useMemo(
+    () => ({
+      match: { fontWeight: primitives.typographyFontWeightBold },
+      name: {
+        color: semantics.textPrimary,
+        fontSize: primitives.typographyFontSizeMd,
+        lineHeight: primitives.typographyLineHeightNormal,
+        paddingBottom: 2,
+      },
+    }),
+    [semantics.textPrimary],
+  );
+};

package/src/components/AutoCompleteInput/mentionItems/TokenizedSuggestionParts.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { StyleProp, Text, TextStyle } from 'react-native';
+
+import type { TokenizationPayload } from 'stream-chat';
+
+export type TokenizedSuggestionPartsProps = {
+  /**
+   * Token + parts payload produced by the stream-chat-js text composer search
+   * source. When the consumer matches against a display name the source splits
+   * the name into substrings around the matched token; we render each part and
+   * bold whichever part case-insensitively equals the token.
+   */
+  tokenizedDisplayName?: TokenizationPayload['tokenizedDisplayName'];
+  /**
+   * Fallback string rendered when the tokenized payload is absent (or empty).
+   */
+  fallback?: string;
+  style?: StyleProp<TextStyle>;
+  matchStyle?: StyleProp<TextStyle>;
+  testID?: string;
+};
+
+const partMatchesToken = (part: string, token: string) =>
+  token.length > 0 && part.toLowerCase() === token.toLowerCase();
+
+export const TokenizedSuggestionParts = ({
+  fallback,
+  matchStyle,
+  style,
+  tokenizedDisplayName,
+  testID,
+}: TokenizedSuggestionPartsProps) => {
+  if (!tokenizedDisplayName || tokenizedDisplayName.parts.length === 0) {
+    if (!fallback) return null;
+    return (
+      <Text style={style} testID={testID}>
+        {fallback}
+      </Text>
+    );
+  }
+
+  const { parts, token } = tokenizedDisplayName;
+  return (
+    <Text style={style} testID={testID}>
+      {parts.map((part, index) =>
+        partMatchesToken(part, token) ? (
+          <Text key={index} style={matchStyle}>
+            {part}
+          </Text>
+        ) : (
+          part
+        ),
+      )}
+    </Text>
+  );
+};

package/src/components/AutoCompleteInput/mentionItems/__tests__/MentionItems.test.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+
+import { cleanup, render } from '@testing-library/react-native';
+
+// UserAvatar pulls in ComponentsContext defaults which transitively load
+// stream-chat-js's CJS dist; that fails to resolve @babel/runtime when the
+// SDK is consumed from a workspace symlink during tests. The avatar itself
+// isn't what we assert on here, so substitute a no-op.
+jest.mock('../../../ui/Avatar/UserAvatar', () => ({
+  UserAvatar: () => null,
+}));
+
+// Same reason — useMessageComposer (used by AutoCompleteSuggestionItem) pulls
+// stream-chat-js's CJS dist at module load. The dispatcher we're testing
+// doesn't use these hooks itself, so stub them.
+jest.mock('../../../../contexts/messageInputContext/hooks/useMessageComposer', () => ({
+  useMessageComposer: () => ({ textComposer: { handleSelect: () => {} } }),
+}));
+jest.mock('../../../../contexts/messageInputContext/hooks/useIsCommandDisabled', () => ({
+  useIsCommandDisabled: () => false,
+}));
+
+import type {
+  ChannelMentionSuggestion,
+  HereMentionSuggestion,
+  RoleMentionSuggestion,
+  UserGroupMentionSuggestion,
+  UserSuggestion,
+} from 'stream-chat';
+
+import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
+import { MentionSuggestionItem } from '../../AutoCompleteSuggestionItem';
+
+const wrap = (ui: React.ReactElement) =>
+  render(<ThemeProvider theme={defaultTheme}>{ui}</ThemeProvider>);
+
+const userEntity: UserSuggestion = {
+  id: 'u1',
+  mentionType: 'user',
+  name: 'Alice',
+  tokenizedDisplayName: { parts: ['Alice'], token: '' },
+} as unknown as UserSuggestion;
+
+const channelEntity: ChannelMentionSuggestion = {
+  id: 'channel',
+  mentionType: 'channel',
+  name: 'channel',
+  tokenizedDisplayName: { parts: ['channel'], token: '' },
+} as unknown as ChannelMentionSuggestion;
+
+const hereEntity: HereMentionSuggestion = {
+  id: 'here',
+  mentionType: 'here',
+  name: 'here',
+  tokenizedDisplayName: { parts: ['here'], token: '' },
+} as unknown as HereMentionSuggestion;
+
+const roleEntity: RoleMentionSuggestion = {
+  id: 'admin',
+  mentionType: 'role',
+  name: 'admin',
+  tokenizedDisplayName: { parts: ['admin'], token: '' },
+} as unknown as RoleMentionSuggestion;
+
+const groupEntity: UserGroupMentionSuggestion = {
+  description: 'Engineering org',
+  id: 'eng',
+  memberCount: 42,
+  mentionType: 'user_group',
+  name: 'engineering',
+  tokenizedDisplayName: { parts: ['engineering'], token: '' },
+} as unknown as UserGroupMentionSuggestion;
+
+describe('MentionSuggestionItem', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders a user row with the display name', () => {
+    const { getByText } = wrap(<MentionSuggestionItem {...userEntity} />);
+    expect(getByText('Alice')).toBeTruthy();
+  });
+
+  it('renders a broadcast row for @channel with description subtitle', () => {
+    const { getByText } = wrap(<MentionSuggestionItem {...channelEntity} />);
+    expect(getByText('@channel')).toBeTruthy();
+    expect(getByText('mention/Channel Description')).toBeTruthy();
+  });
+
+  it('renders a broadcast row for @here with description subtitle', () => {
+    const { getByText } = wrap(<MentionSuggestionItem {...hereEntity} />);
+    expect(getByText('@here')).toBeTruthy();
+    expect(getByText('mention/Here Description')).toBeTruthy();
+  });
+
+  it('renders a role row with the role name and the notify subtitle', () => {
+    const { getByText } = wrap(<MentionSuggestionItem {...roleEntity} />);
+    expect(getByText('@admin')).toBeTruthy();
+    // The test translation context echoes the i18n key; the {{ role }}
+    // interpolation is left as-is, which is enough to assert the right key
+    // was selected with the right argument.
+    expect(getByText(/Notify all .* members/)).toBeTruthy();
+  });
+
+  it('renders a user group row with name + description', () => {
+    const { getByText } = wrap(<MentionSuggestionItem {...groupEntity} />);
+    expect(getByText('@engineering')).toBeTruthy();
+    expect(getByText('Engineering org')).toBeTruthy();
+  });
+
+  it('omits the subtitle slot when a user group has no description', () => {
+    const { queryByText } = wrap(
+      <MentionSuggestionItem
+        {...({ ...groupEntity, description: undefined } as UserGroupMentionSuggestion)}
+      />,
+    );
+    expect(queryByText('Engineering org')).toBeNull();
+  });
+
+  it('renders nothing for an unknown mention type', () => {
+    const { toJSON } = wrap(
+      <MentionSuggestionItem
+        {...({ id: 'x', mentionType: 'unknown' } as unknown as ChannelMentionSuggestion)}
+      />,
+    );
+    expect(toJSON()).toBeNull();
+  });
+});

package/src/components/AutoCompleteInput/mentionItems/__tests__/TokenizedSuggestionParts.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { cleanup, render } from '@testing-library/react-native';
+
+import { TokenizedSuggestionParts } from '../TokenizedSuggestionParts';
+
+describe('TokenizedSuggestionParts', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders the fallback when no tokenized payload is provided', () => {
+    const { getByText } = render(<TokenizedSuggestionParts fallback='Jane Doe' />);
+    expect(getByText('Jane Doe')).toBeTruthy();
+  });
+
+  it('renders nothing when neither tokenized payload nor fallback is provided', () => {
+    const { toJSON } = render(<TokenizedSuggestionParts />);
+    expect(toJSON()).toBeNull();
+  });
+
+  it('renders all parts when the tokenized payload is present', () => {
+    const { queryByText } = render(
+      <TokenizedSuggestionParts tokenizedDisplayName={{ parts: ['Al', 'i', 'ce'], token: 'i' }} />,
+    );
+    // The full name still reads through because RN concatenates nested Text children.
+    expect(queryByText('Alice')).toBeTruthy();
+  });
+
+  it('wraps the matched part in a separate Text node so it can be styled', () => {
+    const matchStyle = { fontWeight: 'bold' as const };
+    const { UNSAFE_root } = render(
+      <TokenizedSuggestionParts
+        matchStyle={matchStyle}
+        tokenizedDisplayName={{ parts: ['Al', 'ice', 'son'], token: 'ice' }}
+      />,
+    );
+    // The matched substring is rendered inside a nested Text — the only one
+    // carrying our matchStyle — so the count of styled descendants equals the
+    // number of matching parts (case-insensitive).
+    const matchedNodes = UNSAFE_root.findAll(
+      (node) =>
+        typeof node.type !== 'string' &&
+        Array.isArray(node.props?.style) === false &&
+        node.props?.style === matchStyle,
+    );
+    expect(matchedNodes.length).toBe(1);
+  });
+
+  it('matches case-insensitively', () => {
+    const matchStyle = { fontWeight: 'bold' as const };
+    const { UNSAFE_root } = render(
+      <TokenizedSuggestionParts
+        matchStyle={matchStyle}
+        tokenizedDisplayName={{ parts: ['Channel'], token: 'channel' }}
+      />,
+    );
+    const matchedNodes = UNSAFE_root.findAll(
+      (node) => typeof node.type !== 'string' && node.props?.style === matchStyle,
+    );
+    expect(matchedNodes.length).toBe(1);
+  });
+});

package/src/components/AutoCompleteInput/mentionItems/index.ts

@@ -0,0 +1,16 @@
+export { EnhancedMentionContent } from './EnhancedMentionContent';
+export type { EnhancedMentionContentProps } from './EnhancedMentionContent';
+export { EnhancedMentionIcon } from './EnhancedMentionIcon';
+export type { EnhancedMentionIconProps } from './EnhancedMentionIcon';
+export { MentionBroadcastItem } from './MentionBroadcastItem';
+export type { MentionBroadcastItemProps } from './MentionBroadcastItem';
+export { MentionItem } from './MentionItem';
+export type { MentionItemProps } from './MentionItem';
+export { MentionRoleItem } from './MentionRoleItem';
+export type { MentionRoleItemProps } from './MentionRoleItem';
+export { MentionUserGroupItem } from './MentionUserGroupItem';
+export type { MentionUserGroupItemProps } from './MentionUserGroupItem';
+export { MentionUserItem } from './MentionUserItem';
+export type { MentionUserItemProps } from './MentionUserItem';
+export { TokenizedSuggestionParts } from './TokenizedSuggestionParts';
+export type { TokenizedSuggestionPartsProps } from './TokenizedSuggestionParts';

package/src/components/Message/Message.tsx

@@ -11,7 +11,7 @@ import {
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Portal } from 'react-native-teleport';
 
-import type { Attachment, LocalMessage, UserResponse } from 'stream-chat';
+import type { Attachment, LocalMessage, MentionEntity, UserResponse } from 'stream-chat';
 
 import { useCreateMessageContext } from './hooks/useCreateMessageContext';
 import { useMessageActionHandlers } from './hooks/useMessageActionHandlers';
@@ -94,7 +94,19 @@ export type TouchableEmitter =
   | 'messageReplies'
   | 'reactionList';
 
-export type TextMentionTouchableHandlerAdditionalInfo = { user?: UserResponse };
+export type TextMentionTouchableHandlerAdditionalInfo = {
+  /**
+   * The typed mention entity for the pressed mention (user / channel / here /
+   * role / user_group). Always populated by the default renderText pipeline;
+   * undefined only when a custom renderer doesn't resolve a match.
+   */
+  mentionedEntity?: MentionEntity;
+  /**
+   * Back-compat: still populated when the mention is a user, so existing
+   * integrators reading `additionalInfo.user` keep working.
+   */
+  user?: UserResponse;
+};
 
 export type TextMentionTouchableHandlerPayload = {
   emitter: 'textMention';

package/src/components/Message/MessageItemView/MessageTextContainer.tsx

@@ -166,6 +166,31 @@ const areEqual = (
     return false;
   }
 
+  // Enhanced mention sources (channel/here/roles/groups) — without these the
+  // renderText cache would refresh on a new entity but this comparator would
+  // short-circuit it away and the highlight would not appear until something
+  // else re-rendered the row.
+  const mentionedBroadcastEqual =
+    prevMessage.mentioned_channel === nextMessage.mentioned_channel &&
+    prevMessage.mentioned_here === nextMessage.mentioned_here;
+  if (!mentionedBroadcastEqual) {
+    return false;
+  }
+
+  const joinIds = (values?: string[]) => (values ?? []).join('|');
+  const mentionedRolesEqual =
+    joinIds(prevMessage.mentioned_roles) === joinIds(nextMessage.mentioned_roles);
+  if (!mentionedRolesEqual) {
+    return false;
+  }
+
+  const groupIds = (m: typeof prevMessage) =>
+    joinIds(m.mentioned_groups?.map((g) => g.id) ?? m.mentioned_group_ids);
+  const mentionedGroupsEqual = groupIds(prevMessage) === groupIds(nextMessage);
+  if (!mentionedGroupsEqual) {
+    return false;
+  }
+
   // stringify could be an expensive operation, so lets rule out the obvious
   // possibilities first such as different object reference or empty objects etc.
   // Also keeping markdown equality check at the last to make sure other less