Autocomplete Suggestions

import {
  filterRenderTextMentionEntitiesByChannelCapabilities,
  isMentionTypeAllowedByChannelCapabilities,
  MENTION_TYPE_CAPABILITY,
  MessageList,
  renderText,
  useChannelStateContext,
} from "stream-chat-react";

const CustomMessageList = () => {
  // `channelCapabilities` is a `Record<string, boolean>` of the current user's
  // allowed permissions on the active channel (sourced from `own_capabilities`).
  const { channelCapabilities } = useChannelStateContext();

  // Check a single mention type. `user` is always allowed; the others require the
  // matching capability, which you can look up in `MENTION_TYPE_CAPABILITY`
  // (for example, `MENTION_TYPE_CAPABILITY.user_group` is "notify-group").
  const canMentionChannel = isMentionTypeAllowedByChannelCapabilities(
    "channel",
    channelCapabilities,
  );

  // Build mention metadata yourself and drop the types this channel isn't allowed
  // to use, then forward the survivors to `renderText` as `messageMentionEntities`
  // so only permitted mentions get highlighted in rendered message text.
  const customRenderText = (text, mentionedUsers, options) =>
    renderText(text, mentionedUsers, {
      ...options,
      messageMentionEntities:
        filterRenderTextMentionEntitiesByChannelCapabilities(
          [
            { id: "channel", mentionType: "channel", name: "channel" },
            { id: "admin", mentionType: "role", name: "admin" },
          ],
          channelCapabilities,
        ),
    });

  return canMentionChannel ? (
    <MessageList renderText={customRenderText} />
  ) : null;
};

import { SearchIndex } from "emoji-mart";
import type { MentionSuggestion } from "stream-chat";
import {
  Avatar,
  Channel,
  MentionItem,
  MessageComposer,
  SuggestionList,
  type SuggestionListItemComponentProps,
  type SuggestionListProps,
  type UserItemProps,
  defaultComponents,
  WithComponents,
} from "stream-chat-react";

const CustomUserItem = ({ entity, focused, ...buttonProps }: UserItemProps) => {
  const title = entity.name ?? entity.id;
  if (!title) return null;

  return (
    <button
      {...buttonProps}
      className={`suggestion-list__item ${focused ? "suggestion-list__item--selected" : ""}`}
    >
      <Avatar imageUrl={entity.image} size={32} userName={title} />
      <span>{title}</span>
    </button>
  );
};

const CustomMentionItem = (props: SuggestionListItemComponentProps) => (
  <MentionItem
    {...props}
    entity={props.entity as MentionSuggestion}
    UserItem={CustomUserItem}
  />
);

const CustomSuggestionList = (props: SuggestionListProps) => (
  <SuggestionList
    {...props}
    suggestionItemComponents={{
      ...defaultComponents,
      "@": CustomMentionItem,
    }}
  />
);

const App = () => (
  <WithComponents
    overrides={{
      AutocompleteSuggestionList: CustomSuggestionList,
      emojiSearchIndex: SearchIndex,
    }}
  >
    <Channel>
      <MessageComposer />
    </Channel>
  </WithComponents>
);

import type { UserGroupMentionSuggestion } from "stream-chat";
import {
  MentionItem,
  type SuggestionListItemComponentProps,
  type UserGroupItemProps,
} from "stream-chat-react";

const CustomUserGroupItem = ({
  entity,
  focused,
  ...buttonProps
}: UserGroupItemProps) => (
  <button
    {...buttonProps}
    className={`suggestion-list__item ${focused ? "suggestion-list__item--selected" : ""}`}
  >
    <span>👥 {entity.name}</span>
  </button>
);

const CustomMentionItem = (props: SuggestionListItemComponentProps) => (
  <MentionItem
    {...props}
    entity={props.entity as UserGroupMentionSuggestion}
    UserGroupItem={CustomUserGroupItem}
  />
);

import { SuggestionList, type SuggestionListProps } from "stream-chat-react";

const SuggestionListWithHeader = (props: SuggestionListProps) => (
  <div className="suggestion-list-shell">
    <div className="suggestion-list-shell__header">Suggestions</div>
    <SuggestionList {...props} />
  </div>
);

<WithComponents
  overrides={{ AutocompleteSuggestionList: SuggestionListWithHeader }}
>
  <Channel>
    <MessageComposer />
  </Channel>
</WithComponents>

import {
  SuggestionListItem,
  type SuggestionItemProps,
} from "stream-chat-react";

const CustomAutocompleteSuggestionItem = (props: SuggestionItemProps) => (
  <SuggestionListItem
    {...props}
    className="custom-autocomplete-suggestion-item"
  />
);