upstream-jitsi-meet/react/features/chat/functions.ts

// @ts-expect-error
import aliases from 'react-emoji-render/data/aliases';
// eslint-disable-next-line lines-around-comment
// @ts-expect-error
import emojiAsciiAliases from 'react-emoji-render/data/asciiAliases';
import { createSelector } from 'reselect';

import { IReduxState } from '../app/types';
import { getLocalizedDateFormatter } from '../base/i18n/dateUtil';
import i18next from '../base/i18n/i18next';
import { MEET_FEATURES } from '../base/jwt/constants';
import { isJwtFeatureEnabled } from '../base/jwt/functions';
import { getParticipantById, isPrivateChatEnabled } from '../base/participants/functions';
import { IParticipant } from '../base/participants/types';
import { escapeRegexp } from '../base/util/helpers';
import { arePollsDisabled } from '../conference/functions.any';
import { getCustomPanelWidth } from '../custom-panel/functions';
import { isFileSharingEnabled } from '../file-sharing/functions.any';
import { getParticipantsPaneWidth } from '../participants-pane/functions';
import { isCCTabEnabled } from '../subtitles/functions.any';
import { VIDEO_SPACE_MIN_SIZE } from '../video-layout/constants';
import { IVisitorChatParticipant } from '../visitors/types';

import { ChatTabs, MAX_PENDING_EDITS, MESSAGE_TYPE_ERROR, MESSAGE_TYPE_LOCAL, TIMESTAMP_FORMAT } from './constants';
import { IMessage, IPendingEdit, IPendingEditsMap } from './types';

/**
 * An ASCII emoticon regexp array to find and replace old-style ASCII
 * emoticons (such as :O) with the new Unicode representation, so that
 * devices and browsers that support them can render these natively
 * without a 3rd party component.
 *
 * NOTE: this is currently only used on mobile, but it can be used
 * on web too once we drop support for browsers that don't support
 * unicode emoji rendering.
 */
const ASCII_EMOTICON_REGEXP_ARRAY: Array<[RegExp, string]> = [];

/**
 * An emoji regexp array to find and replace alias emoticons
 * (such as :smiley:) with the new Unicode representation, so that
 * devices and browsers that support them can render these natively
 * without a 3rd party component.
 *
 * NOTE: this is currently only used on mobile, but it can be used
 * on web too once we drop support for browsers that don't support
 * unicode emoji rendering.
 */
const SLACK_EMOJI_REGEXP_ARRAY: Array<[RegExp, string]> = [];

(function() {
    for (const [ key, value ] of Object.entries(aliases)) {

        // Add ASCII emoticons
        const asciiEmoticons = emojiAsciiAliases[key];

        if (asciiEmoticons) {
            const asciiEscapedValues = asciiEmoticons.map((v: string) => escapeRegexp(v));

            const asciiRegexp = `(${asciiEscapedValues.join('|')})`;

            // Escape urls
            const formattedAsciiRegexp = key === 'confused'
                ? `(?=(${asciiRegexp}))(:(?!//).)`
                : asciiRegexp;

            ASCII_EMOTICON_REGEXP_ARRAY.push([ new RegExp(formattedAsciiRegexp, 'g'), value as string ]);
        }

        // Add slack-type emojis
        const emojiRegexp = `\\B(${escapeRegexp(`:${key}:`)})\\B`;

        SLACK_EMOJI_REGEXP_ARRAY.push([ new RegExp(emojiRegexp, 'g'), value as string ]);
    }
})();

/**
 * Replaces ASCII and other non-unicode emoticons with unicode emojis to let the emojis be rendered
 * by the platform native renderer.
 *
 * @param {string} message - The message to parse and replace.
 * @returns {string}
 */
export function replaceNonUnicodeEmojis(message: string): string {
    let replacedMessage = message;

    for (const [ regexp, replaceValue ] of SLACK_EMOJI_REGEXP_ARRAY) {
        replacedMessage = replacedMessage.replace(regexp, replaceValue);
    }

    for (const [ regexp, replaceValue ] of ASCII_EMOTICON_REGEXP_ARRAY) {
        replacedMessage = replacedMessage.replace(regexp, replaceValue);
    }

    return replacedMessage;
}

/**
 * Selector for calculating the number of unread chat messages.
 *
 * @param {IReduxState} state - The redux state.
 * @returns {number} The number of unread messages.
 */
export function getUnreadCount(state: IReduxState): number {
    const { lastReadMessage, messages } = state['features/chat'];
    const messagesCount = messages.length;

    if (!messagesCount) {
        return 0;
    }

    let reactionMessages = 0;
    let lastReadIndex: number;

    if (navigator.product === 'ReactNative') {
        // React native stores the messages in a reversed order.
        lastReadIndex = messages.indexOf(<IMessage>lastReadMessage);

        for (let i = 0; i < lastReadIndex; i++) {
            if (messages[i].isReaction) {
                reactionMessages++;
            }
        }

        return lastReadIndex - reactionMessages;
    }

    lastReadIndex = messages.lastIndexOf(<IMessage>lastReadMessage);

    for (let i = lastReadIndex + 1; i < messagesCount; i++) {
        if (messages[i].isReaction) {
            reactionMessages++;
        }
    }

    return messagesCount - (lastReadIndex + 1) - reactionMessages;
}

/**
 * Gets the unread files count.
 *
 * @param {IReduxState} state - The redux state.
 * @returns {number} The number of unread files.
 */
export function getUnreadFilesCount(state: IReduxState): number {
    return state['features/chat']?.unreadFilesCount || 0;
}

/**
 * Get whether the chat smileys are disabled or not.
 *
 * @param {IReduxState} state - The redux state.
 * @returns {boolean} The disabled flag.
 */
export function areSmileysDisabled(state: IReduxState): boolean {
    const disableChatSmileys = state['features/base/config']?.disableChatSmileys === true;

    return disableChatSmileys;
}

/**
 * Returns whether the chat feature is disabled.
 *
 * @param {IReduxState} state - The redux state.
 * @returns {boolean} True if chat is disabled, false otherwise.
 */
export function isChatDisabled(state: IReduxState): boolean {
    return Boolean(state['features/base/config']?.disableChat);
}

/**
 * Gets the default focused tab based on what features are enabled.
 * Returns the first available tab in priority order: CHAT -> POLLS -> FILE_SHARING -> CLOSED_CAPTIONS.
 *
 * @param {IReduxState} state - The redux state.
 * @returns {ChatTabs | undefined} The default focused tab.
 */
export function getDefaultFocusedTab(state: IReduxState): ChatTabs | undefined {
    if (!isChatDisabled(state)) {
        return ChatTabs.CHAT;
    }

    if (!arePollsDisabled(state)) {
        return ChatTabs.POLLS;
    }

    if (isFileSharingEnabled(state)) {
        return ChatTabs.FILE_SHARING;
    }

    if (isCCTabEnabled(state)) {
        return ChatTabs.CLOSED_CAPTIONS;
    }

    return undefined;
}

/**
 * Returns the currently focused tab or the default focused tab if none is set.
 *
 * @param {IReduxState} state - The redux state.
 * @returns {ChatTabs | undefined} The focused tab or undefined if no tabs are available.
 */
export function getFocusedTab(state: IReduxState): ChatTabs | undefined {
    return state['features/chat'].focusedTab || getDefaultFocusedTab(state);
}

/**
 * Returns the timestamp to display for the message.
 *
 * @param {IMessage} message - The message from which to get the timestamp.
 * @returns {string}
 */
export function getFormattedTimestamp(message: IMessage): string {
    return getLocalizedDateFormatter(new Date(message.timestamp))
        .format(TIMESTAMP_FORMAT);
}

/**
 * Generates the message text to be rendered in the component.
 *
 * @param {IMessage} message - The message from which to get the text.
 * @returns {string}
 */
export function getMessageText(message: IMessage): string {
    return message.messageType === MESSAGE_TYPE_ERROR
        ? i18next.t('chat.error', {
            error: message.message
        })
        : message.message;
}

/**
 * Escapes regexp special characters in a string.
 *
 * @param {string} value - The string to escape.
 * @returns {string}
 */
export function escapeSearchRegExp(value: string): string {
    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

/**
 * Splits message text into segments, flagging which ones match the search
 * query (case-insensitive), so callers can render matches with a highlight
 * style. Shared between web and native so both wrap matches identically.
 *
 * @param {string} text - The message text.
 * @param {string} query - The search query.
 * @returns {Array<Object>}
 */
export function getHighlightSegments(text: string, query: string): Array<{ match: boolean; text: string; }> {
    if (!query) {
        return [ { match: false,
            text } ];
    }

    const regexp = new RegExp(`(${escapeSearchRegExp(query)})`, 'gi');

    return text
        .split(regexp)
        .filter(part => part.length > 0)
        .map(part => ({
            match: part.toLowerCase() === query.toLowerCase(),
            text: part
        }));
}

/**
 * Returns whether a message can be replied to.
 *
 * @param {IReduxState} state - The redux state.
 * @param {IMessage} message - The message to be checked.
 * @returns {boolean}
 */
export function getCanReplyToMessage(state: IReduxState, message: IMessage): boolean {
    const { knocking } = state['features/lobby'];
    const participant = getParticipantById(state, message.participantId);

    // Check if basic reply conditions are met
    const basicCanReply = (Boolean(participant) || message.isFromVisitor)
        && (message.privateMessage || (message.lobbyChat && !knocking))
        && message.messageType !== MESSAGE_TYPE_LOCAL;

    if (!basicCanReply) {
        return false;
    }

    // Check private chat configuration for visitor messages
    if (message.isFromVisitor) {
        const visitorParticipant = { id: message.participantId, name: message.displayName, isVisitor: true as const };

        return isPrivateChatEnabled(visitorParticipant, state);
    }

    // For non-visitor messages, use the regular participant
    return isPrivateChatEnabled(participant, state);
}

/**
 * Returns the message that is displayed as a notice for private messages.
 *
 * @param {IMessage} message - The message to be checked.
 * @returns {string}
 */
export function getPrivateNoticeMessage(message: IMessage): string {
    let recipient;

    if (message.messageType === MESSAGE_TYPE_LOCAL) {
        // For messages sent by local user, show the recipient name
        // For visitor messages, use the visitor's display name with indicator
        recipient = message.sentToVisitor ? `${message.recipient} ${i18next.t('visitors.chatIndicator')}` : message.recipient;
    } else {
        // For messages received from others, show "you"
        recipient = i18next.t('chat.you');
    }

    return i18next.t('chat.privateNotice', {
        recipient
    });
}


/**
 * Check if participant is not allowed to send group messages.
 *
 * @param {IReduxState} state - The redux state.
 * @returns {boolean} - Returns true if the participant is not allowed to send group messages.
 */
export function isSendGroupChatDisabled(state: IReduxState): boolean {
    const { groupChatRequiresPermission } = state['features/dynamic-branding'];

    if (!groupChatRequiresPermission) {
        return false;
    }

    return !isJwtFeatureEnabled(state, MEET_FEATURES.SEND_GROUPCHAT, false);
}

/**
 * Calculates the maximum width available for the chat panel based on the current window size
 * and other UI elements.
 *
 * @param {IReduxState} state - The Redux state containing the application's current state.
 * @returns {number} The maximum width in pixels available for the chat panel. Returns 0 if there
 * is no space available.
 */
export function getChatMaxSize(state: IReduxState): number {
    const { clientWidth } = state['features/base/responsive-ui'];

    return Math.max(
        clientWidth - getParticipantsPaneWidth(state) - getCustomPanelWidth(state) - VIDEO_SPACE_MIN_SIZE,
        0
    );
}

/**
 * Type guard to check if a participant is a visitor chat participant.
 *
 * @param {IParticipant | IVisitorChatParticipant | undefined} participant - The participant to check.
 * @returns {boolean} - True if the participant is a visitor chat participant.
 */
export function isVisitorChatParticipant(
        participant?: IParticipant | IVisitorChatParticipant
): participant is IVisitorChatParticipant {
    return Boolean(participant && 'isVisitor' in participant && participant.isVisitor === true);
}

/**
 * Returns a suffix to be appended to the display name based on the message origin.
 *
 * @param {IMessage} message - The message.
 * @returns {string} The suffix, if any.
 */
export function getDisplayNameSuffix(message: IMessage): string {
    let suffix = '';

    if (message.isFromVisitor) {
        suffix = ` ${i18next.t('visitors.chatIndicator')}`;
    } else if (message.isFromGuest) {
        suffix = ` ${i18next.t('chat.guestsChatIndicator')}`;
    }

    return suffix;
}

/**
 * Checks if a message is a file message by verifying the presence of file metadata.
 *
 * @param {IMessage} message - The message to check.
 * @returns {boolean} True if the message contains file metadata, false otherwise.
 */
export function isFileMessage(message: IMessage): boolean {
    return Boolean(message?.fileMetadata);
}

/**
 * Inserts a pending edit into the map, evicting the oldest entry if the cap is exceeded.
 *
 * @param {IPendingEditsMap} pendingEdits - The current pending edits map.
 * @param {string} messageId - The id of the message the edit targets.
 * @param {IPendingEdit} edit - The pending edit to insert.
 * @returns {IPendingEditsMap} The updated pending edits map.
 */
export function addPendingEdit(
        pendingEdits: IPendingEditsMap,
        messageId: string,
        edit: IPendingEdit
): IPendingEditsMap {
    const next = { ...pendingEdits, [messageId]: edit };
    const keys = Object.keys(next);

    if (keys.length > MAX_PENDING_EDITS) {
        // Object key order is insertion order for string keys in JS, so the first key is the oldest.
        delete next[keys[0]];
    }

    return next;
}

/*
 * Returns the current chat search query.
 *
 * @param {IReduxState} state - The redux state.
 * @returns {string}
 */
export function getChatSearchQuery(state: IReduxState): string {
    return state['features/chat'].searchQuery || '';
}

/**
 * Stable empty-array reference returned when there is no active search query, so repeated
 * "no query" calls return the same reference instead of a new empty array each time.
 */
const NO_SEARCH_MATCHES: IMessage[] = [];

const _getMessages = (state: IReduxState) => state['features/chat'].messages;

/**
 * Returns all messages matching the current search query, in display order.
 * Reaction and file messages are excluded since they have no searchable text.
 * Memoized: only recomputes when messages or the search query change.
 *
 * @returns {IMessage[]}
 */
export const getChatSearchMatches = createSelector(
    _getMessages,
    getChatSearchQuery,
    (messages, searchQuery): IMessage[] => {
        const query = searchQuery?.trim().toLowerCase();

        if (!query) {
            return NO_SEARCH_MATCHES;
        }

        return messages.filter(message =>
            !message.isReaction
            && !isFileMessage(message)
            && getMessageText(message).toLowerCase().includes(query));
    }
);

/**
 * Returns the index of the currently focused search match.
 *
 * @param {IReduxState} state - The redux state.
 * @returns {number}
 */
export function getChatSearchMatchIndex(state: IReduxState): number {
    return state['features/chat'].searchMatchIndex || 0;
}

/**
 * Returns the message that is the currently focused search match, if any.
 * Memoized via getChatSearchMatches — this is called from every ChatMessage's
 * mapStateToProps, so keeping it cheap matters.
 *
 * @returns {IMessage | undefined}
 */
export const getActiveChatSearchMatch = createSelector(
    getChatSearchMatches,
    getChatSearchMatchIndex,
    (matches, index): IMessage | undefined => matches[index]
);