@sendbird/uikit-react-native 2.1.0 → 2.2.0

package/src/hooks/useMentionTextInput.ts

@@ -0,0 +1,139 @@
+import { useEffect, useRef, useState } from 'react';
+import type { NativeSyntheticEvent, TextInput, TextInputSelectionChangeEventData } from 'react-native';
+import { Platform } from 'react-native';
+
+import { SendbirdFileMessage, SendbirdUserMessage, replace, useFreshCallback } from '@sendbird/uikit-utils';
+
+import type { MentionedUser } from '../types';
+import { useSendbirdChat } from './useContext';
+
+const useMentionTextInput = (params: { messageToEdit?: SendbirdUserMessage | SendbirdFileMessage }) => {
+  const { mentionManager } = useSendbirdChat();
+
+  const mentionedUsersRef = useRef<MentionedUser[]>([]);
+  const textInputRef = useRef<TextInput>();
+
+  const [text, setText] = useState('');
+  const [selection, setSelection] = useState({ start: 0, end: 0 });
+
+  // TODO: Refactor text edit logic more clearly
+  useEffect(() => {
+    if (mentionManager.shouldUseMentionedMessageTemplate(params.messageToEdit)) {
+      const result = mentionManager.templateToTextAndMentionedUsers(
+        params.messageToEdit.mentionedMessageTemplate,
+        params.messageToEdit.mentionedUsers,
+      );
+
+      mentionedUsersRef.current = result.mentionedUsers;
+      setText(result.mentionedText);
+    } else {
+      mentionedUsersRef.current = [];
+      if (params.messageToEdit?.isUserMessage()) {
+        setText(params.messageToEdit.message);
+      }
+    }
+  }, [params.messageToEdit]);
+
+  const onChangeText = useFreshCallback((_nextText: string, addedMentionedUser?: MentionedUser) => {
+    const prevText = text;
+    let nextText = _nextText;
+    let offset = nextText.length - prevText.length;
+
+    // Text clear
+    if (nextText === '') {
+      mentionedUsersRef.current = [];
+    }
+    // Text add
+    else if (offset > 0) {
+      /** Add mentioned user **/
+      if (addedMentionedUser) mentionedUsersRef.current.push(addedMentionedUser);
+
+      /** Reconcile mentioned users range on the right side of the selection **/
+      mentionedUsersRef.current = mentionManager.reconcileRangeOfMentionedUsers(
+        offset,
+        selection.end,
+        mentionedUsersRef.current,
+      );
+    }
+    // Text remove
+    else if (offset < 0) {
+      // Ranged remove
+      if (selection.start !== selection.end) {
+        /** Filter mentioned users in selection range **/
+        const { filtered, lastSelection } = mentionManager.removeMentionedUsersInSelection(
+          selection,
+          mentionedUsersRef.current,
+        );
+
+        /** Reconcile mentioned users range on the right side of the selection **/
+        mentionedUsersRef.current = mentionManager.reconcileRangeOfMentionedUsers(
+          offset,
+          Math.max(selection.end, lastSelection),
+          filtered,
+        );
+      }
+      // Single remove
+      else {
+        /** Find mentioned user who ranges in removed selection **/
+        const foundIndex = mentionedUsersRef.current.findIndex((it) =>
+          mentionManager.rangeHelpers.overlaps(it.range, selection, 'underMore'),
+        );
+        /** If found, remove from the mentioned user list and remove remainder text **/
+        if (foundIndex > -1) {
+          const it = mentionedUsersRef.current[foundIndex];
+          const remainderLength = it.range.end - it.range.start + offset;
+
+          offset = -remainderLength + offset;
+          nextText = replace(nextText, it.range.start, it.range.start + remainderLength, '');
+
+          mentionedUsersRef.current.splice(foundIndex, 1);
+        }
+
+        /** Reconcile mentioned users range on the right side of the selection **/
+        mentionedUsersRef.current = mentionManager.reconcileRangeOfMentionedUsers(
+          offset,
+          selection.end,
+          mentionedUsersRef.current,
+        );
+      }
+    }
+
+    setText(nextText);
+  });
+
+  return {
+    textInputRef,
+    selection,
+    onSelectionChange: useFreshCallback((e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
+      const nativeSelection = { ...e.nativeEvent.selection };
+
+      // NOTE: To synchronize call onSelectionChange after onChangeText called on each platform.
+      setTimeout(() => {
+        const mentionedUser = mentionedUsersRef.current.find((it) =>
+          mentionManager.rangeHelpers.overlaps(it.range, nativeSelection),
+        );
+
+        // Selection should be blocked if changed into mentioned area
+        if (mentionedUser) {
+          const selectionBlock = { start: mentionedUser.range.start, end: mentionedUser.range.end };
+          textInputRef.current?.setNativeProps({ selection: selectionBlock });
+          // BUG: setNativeProps called again when invoked onChangeText
+          //  https://github.com/facebook/react-native/issues/33520
+          if (Platform.OS === 'android') {
+            setTimeout(() => {
+              textInputRef.current?.setNativeProps({ selection: { start: 0 } });
+            }, 250);
+          }
+          setSelection(selectionBlock);
+        } else {
+          setSelection(nativeSelection);
+        }
+      }, 10);
+    }),
+    text,
+    onChangeText,
+    mentionedUsers: mentionedUsersRef.current,
+  };
+};
+
+export default useMentionTextInput;

package/src/index.ts

@@ -4,6 +4,8 @@ import { Platform } from 'react-native';
 import { Logger } from '@sendbird/uikit-utils';
 
 export { default as MessageRenderer } from './components/MessageRenderer';
+export { ReactionAddons } from './components/ReactionAddons';
+export { ReactionBottomSheets } from './components/ReactionBottomSheets';
 export { default as ChannelCover } from './components/ChannelCover';
 export { default as ChatFlatList } from './components/ChatFlatList';
 export { default as FileViewer } from './components/FileViewer';
@@ -27,6 +29,7 @@ export { default as createGroupChannelOperatorsFragment } from './fragments/crea
 export { default as createGroupChannelRegisterOperatorFragment } from './fragments/createGroupChannelRegisterOperatorFragment';
 export { default as createGroupChannelMutedMembersFragment } from './fragments/createGroupChannelMutedMembersFragment';
 export { default as createGroupChannelBannedUsersFragment } from './fragments/createGroupChannelBannedUsersFragment';
+export { default as createGroupChannelNotificationsFragment } from './fragments/createGroupChannelNotificationsFragment';
 
 /** Context **/
 export { SendbirdChatContext, SendbirdChatProvider } from './contexts/SendbirdChatCtx';
@@ -37,7 +40,7 @@ export { LocalizationContext, LocalizationProvider } from './contexts/Localizati
 /** Hooks **/
 export { default as useConnection } from './hooks/useConnection';
 export { default as usePushTokenRegistration } from './hooks/usePushTokenRegistration';
-export { useLocalization, usePlatformService, useSendbirdChat, useUserProfile } from './hooks/useContext';
+export * from './hooks/useContext';
 
 /** Localization **/
 export { default as StringSetEn } from './localization/StringSet.en';
@@ -97,9 +100,17 @@ export type {
   GroupChannelListContextsType,
 } from './domain/groupChannelList/types';
 
+export * from './domain/groupChannelNotifications';
+export {
+  GroupChannelNotificationsProps,
+  GroupChannelNotificationsContextsType,
+  GroupChannelNotificationsFragment,
+  GroupChannelNotificationsModule,
+} from './domain/groupChannelNotifications/types';
+
+export * from './domain/groupChannelUserList/types';
 export * from './domain/userList';
 export type { UserListProps, UserListModule, UserListContextsType } from './domain/userList/types';
-export * from './domain/groupChannelUserList/types';
 
 /** UIKit **/
 export { default as SendbirdUIKitContainer, SendbirdUIKit } from './containers/SendbirdUIKitContainer';

package/src/libs/EmojiManager.ts

@@ -0,0 +1,80 @@
+import type { SendbirdEmoji, SendbirdEmojiCategory, SendbirdEmojiContainer } from '@sendbird/uikit-utils';
+
+import type { LocalCacheStorage } from '../types';
+import InternalLocalCacheStorage from './InternalLocalCacheStorage';
+
+class MemoryStorage implements LocalCacheStorage {
+  _data: Record<string, string> = {};
+
+  async getAllKeys(): Promise<readonly string[] | string[]> {
+    return Object.keys(this._data);
+  }
+
+  async getItem(key: string): Promise<string | null> {
+    return this._data[key];
+  }
+
+  async removeItem(key: string): Promise<void> {
+    delete this._data[key];
+  }
+
+  async setItem(key: string, value: string): Promise<void> {
+    this._data[key] = value;
+  }
+}
+
+class EmojiManager {
+  static key = 'sendbird-uikit@emoji-manager';
+
+  constructor(
+    private internalStorage: InternalLocalCacheStorage = new InternalLocalCacheStorage(new MemoryStorage()),
+  ) {}
+
+  private emojiStorage = {
+    data: null as null | SendbirdEmojiContainer,
+    get: async () => {
+      if (!this.emojiStorage.data) {
+        const strItem = await this.internalStorage.getItem(EmojiManager.key);
+        if (strItem) this.emojiStorage.data = Object.freeze(JSON.parse(strItem));
+      }
+      return this.emojiStorage.data;
+    },
+    set: async (data: SendbirdEmojiContainer) => {
+      this.emojiStorage.data = Object.freeze(data);
+      await this.internalStorage.setItem(EmojiManager.key, JSON.stringify(data));
+    },
+  };
+
+  private _emojiCategoryMap: Record<string, SendbirdEmojiCategory> = {};
+  public get emojiCategoryMap() {
+    return this._emojiCategoryMap;
+  }
+
+  private _allEmojiMap: Record<string, SendbirdEmoji> = {};
+  public get allEmojiMap() {
+    return this._allEmojiMap;
+  }
+
+  private _allEmoji: SendbirdEmoji[] = [];
+  public get allEmoji() {
+    return this._allEmoji;
+  }
+
+  public init = async (emojiContainer?: SendbirdEmojiContainer) => {
+    if (emojiContainer) await this.emojiStorage.set(emojiContainer);
+
+    const container = await this.emojiStorage.get();
+
+    if (container) {
+      for (const category of container.emojiCategories) {
+        this._emojiCategoryMap[category.id] = category;
+        for (const emoji of category.emojis) {
+          this._allEmojiMap[emoji.key] = emoji;
+        }
+      }
+      this._allEmoji = Object.values(this._allEmojiMap);
+    }
+  };
+}
+
+export default EmojiManager;

package/src/libs/MentionConfig.ts

@@ -0,0 +1,40 @@
+export interface MentionConfigInterface {
+  mentionLimit: number;
+  suggestionLimit: number;
+  debounceMills: number;
+  delimiter: string;
+  trigger: string;
+}
+
+class MentionConfig {
+  static DEFAULT = {
+    MENTION_LIMIT: 10,
+    SUGGESTION_LIMIT: 15,
+    DEBOUNCE_MILLS: 300,
+    DELIMITER: ' ',
+    TRIGGER: '@',
+  };
+  constructor(private _config: MentionConfigInterface) {}
+
+  get mentionLimit() {
+    return this._config.mentionLimit;
+  }
+
+  get suggestionLimit() {
+    return this._config.suggestionLimit;
+  }
+
+  get delimiter() {
+    return this._config.delimiter;
+  }
+
+  get debounceMills() {
+    return this._config.debounceMills;
+  }
+
+  get trigger() {
+    return this._config.trigger;
+  }
+}
+
+export default MentionConfig;

package/src/libs/MentionManager.tsx

@@ -0,0 +1,240 @@
+import React from 'react';
+
+import { Text, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
+import type { SendbirdFileMessage, SendbirdUser, SendbirdUserMessage } from '@sendbird/uikit-utils';
+import { createMentionTemplateRegex, replaceWithRegex } from '@sendbird/uikit-utils';
+
+import type { MentionedUser, Range } from '../types';
+import type { MentionConfigInterface } from './MentionConfig';
+
+class MentionManager {
+  private _invalidStartsKeywords: string[];
+  private _templateRegex: RegExp;
+
+  constructor(public config: MentionConfigInterface, public mentionEnabled: boolean) {
+    this._invalidStartsKeywords = [this.config.trigger, this.config.delimiter];
+    this._templateRegex = createMentionTemplateRegex(this.config.trigger);
+  }
+
+  public rangeHelpers = {
+    inRangeUnderOver(start: number, num: number, end: number) {
+      return start < num && num < end;
+    },
+    inRangeUnderMore(start: number, num: number, end: number) {
+      return start < num && num <= end;
+    },
+    inRangeLessOver(start: number, num: number, end: number) {
+      return start <= num && num < end;
+    },
+    inRangeLessMore(start: number, num: number, end: number) {
+      return start <= num && num <= end;
+    },
+    overlaps(a: Range, b: Range, compare: 'underOver' | 'underMore' | 'lessOver' | 'lessMore' = 'underOver') {
+      const inRange = {
+        underOver: this.inRangeUnderOver,
+        underMore: this.inRangeUnderMore,
+        lessOver: this.inRangeLessOver,
+        lessMore: this.inRangeLessMore,
+      }[compare];
+
+      return inRange(a.start, b.start, a.end) || inRange(a.start, b.end, a.end);
+    },
+  };
+
+  public get templateRegex() {
+    return this._templateRegex;
+  }
+
+  public getSearchString = (text: string, selectionIndex: number) => {
+    const lastSpan = text.slice(0, selectionIndex).split(this.config.delimiter).pop() ?? '';
+    const triggerIdx = lastSpan.indexOf(this.config.trigger);
+    const mentionSpan = triggerIdx === -1 ? lastSpan : lastSpan.slice(triggerIdx);
+    const searchString = mentionSpan.slice(this.config.trigger.length);
+
+    return {
+      searchString,
+      isTriggered: () => mentionSpan.startsWith(this.config.trigger),
+      isValidSearchString: () => this._invalidStartsKeywords.every((it) => !searchString.startsWith(it)),
+    };
+  };
+
+  /**
+   * @description Reconcile the range by offset in the mentioned users
+   * */
+  public reconcileRangeOfMentionedUsers = (offset: number, selectionIndex: number, mentionedUsers: MentionedUser[]) => {
+    return mentionedUsers.map((it) => {
+      // Changes only on the right text of selection.
+      if (selectionIndex <= it.range.start) {
+        return {
+          ...it,
+          range: {
+            start: it.range.start + offset,
+            end: it.range.end + offset,
+          },
+        };
+      }
+
+      return it;
+    });
+  };
+
+  /**
+   * @description Remove users who in a range
+   * */
+  public removeMentionedUsersInSelection = (selection: Range, mentionedUsers: MentionedUser[]) => {
+    let lastSelection = 0;
+    let removedOffset = 0;
+    const filtered = mentionedUsers.filter((it) => {
+      const shouldRemove = this.rangeHelpers.overlaps(selection, it.range, 'lessMore');
+      if (shouldRemove) {
+        lastSelection = Math.max(lastSelection, it.range.end);
+        removedOffset -= it.range.end - it.range.start;
+      }
+      return !shouldRemove;
+    });
+
+    return { filtered, lastSelection, removedOffset };
+  };
+
+  public getSearchStringRangeInText = (selectionIndex: number, searchString: string): Range => {
+    return {
+      start: selectionIndex - searchString.length - this.config.trigger.length,
+      end: selectionIndex,
+    };
+  };
+
+  /**
+   * @description User to @{user.id} template format
+   * */
+  public asMentionedMessageTemplate = (user: SendbirdUser, delimiter = false) => {
+    return `${this.config.trigger}{${user.userId}}` + (delimiter ? this.config.delimiter : '');
+  };
+
+  /**
+   * @description User to @user.nickname text format
+   * */
+  public asMentionedMessageText = (user: SendbirdUser, delimiter = false) => {
+    return `${this.config.trigger}${user.nickname}` + (delimiter ? this.config.delimiter : '');
+  };
+
+  /**
+   * @description Bold @user.nickname
+   * */
+  public textToMentionedComponents = (text: string, mentionedUsers: MentionedUser[]) => {
+    if (!this.mentionEnabled || mentionedUsers.length === 0) return text;
+
+    const { leftText, components } = mentionedUsers
+      .sort((a, b) => b.range.start - a.range.start)
+      .reduce(
+        ({ leftText, components }, curr, currentIndex) => {
+          const leftSpan = leftText.slice(0, curr.range.start);
+          const mentionSpan = leftText.slice(curr.range.start, curr.range.end);
+          const rightSpan = leftText.slice(curr.range.end);
+
+          return {
+            leftText: leftSpan,
+            components: [
+              <Text key={mentionSpan + currentIndex} style={styles.mentionedText}>
+                {mentionSpan}
+              </Text>,
+              rightSpan,
+              ...components,
+            ],
+          };
+        },
+        { leftText: text, components: [] as (string | JSX.Element)[] },
+      );
+
+    return [leftText, ...components];
+  };
+
+  public textToMentionedMessageTemplate = (text: string, mentionedUsers: MentionedUser[]) => {
+    if (!this.mentionEnabled) return text;
+
+    const { leftText, strings } = mentionedUsers
+      .sort((a, b) => b.range.start - a.range.start)
+      .reduce(
+        ({ leftText, strings }, curr) => {
+          const leftSpan = leftText.slice(0, curr.range.start);
+          const templateSpan = this.asMentionedMessageTemplate(curr.user);
+          const rightSpan = leftText.slice(curr.range.end);
+
+          return {
+            leftText: leftSpan,
+            strings: [templateSpan, rightSpan, ...strings],
+          };
+        },
+        { leftText: text, strings: [] as string[] },
+      );
+
+    return [leftText, ...strings].join('');
+  };
+
+  /**
+   * @description Convert @{user.id} template to @user.nickname text and MentionedUser[] array.
+   * */
+  public templateToTextAndMentionedUsers = (template: string, mentionedUsers: SendbirdUser[]) => {
+    const actualMentionedUsers: MentionedUser[] = [];
+
+    let offsetToMove = 0;
+    const mentionedText = replaceWithRegex(
+      template,
+      this.templateRegex,
+      ({ match, matchIndex, groups }) => {
+        const user = mentionedUsers.find((it) => it.userId === groups[2]);
+        if (user && typeof matchIndex === 'number') {
+          const userIdSpan = match;
+          const userNicknameSpan = this.asMentionedMessageText(user);
+
+          const offsetAfterConverted = userNicknameSpan.length - userIdSpan.length;
+
+          const originalRange: Range = {
+            start: matchIndex,
+            end: matchIndex + userIdSpan.length,
+          };
+
+          const convertedRange: Range = {
+            start: Math.max(0, originalRange.start + offsetToMove),
+            end: originalRange.end + offsetToMove + offsetAfterConverted,
+          };
+
+          offsetToMove += offsetAfterConverted;
+
+          actualMentionedUsers.push({ range: convertedRange, user });
+          return userNicknameSpan;
+        }
+        return match;
+      },
+      '',
+    ).join('');
+
+    return {
+      mentionedText,
+      mentionedUsers: actualMentionedUsers,
+    };
+  };
+
+  public shouldUseMentionedMessageTemplate = (
+    message?: SendbirdUserMessage | SendbirdFileMessage,
+  ): message is RequiredSpecific<
+    SendbirdUserMessage | SendbirdFileMessage,
+    'mentionedMessageTemplate' | 'mentionedUsers' | 'mentionedUserIds' | 'mentionType'
+  > => {
+    return Boolean(
+      this.mentionEnabled &&
+        message?.mentionedMessageTemplate &&
+        message?.mentionedUsers &&
+        message?.mentionedUsers.length > 0,
+    );
+  };
+}
+
+type RequiredSpecific<T, K extends keyof T> = T & {
+  [P in K]-?: T[P];
+};
+
+const styles = createStyleSheet({
+  mentionedText: { fontWeight: 'bold' },
+});
+
+export default MentionManager;

package/src/localization/StringSet.type.ts

@@ -9,11 +9,11 @@ import type {
   SendbirdUser,
 } from '@sendbird/uikit-utils';
 import {
-  dateSeparator,
+  getDateSeparatorFormat,
   getGroupChannelLastMessage,
   getGroupChannelPreviewTime,
   getGroupChannelTitle,
-  messageTime,
+  getMessageTimeFormat,
 } from '@sendbird/uikit-utils';
 
 /**
@@ -44,6 +44,9 @@ export interface StringSet {
     INPUT_EDIT_OK: string;
     INPUT_EDIT_CANCEL: string;
 
+    /** GroupChannel > Suggested mention list */
+    MENTION_LIMITED: (mentionLimit: number) => string;
+
     /** GroupChannel > Dialog > Message */
     DIALOG_MESSAGE_COPY: string;
     DIALOG_MESSAGE_EDIT: string;
@@ -69,9 +72,12 @@ export interface StringSet {
 
     /** GroupChannelSettings > Menu */
     MENU_MODERATION: string;
-    MENU_NOTIFICATION: string;
     MENU_MEMBERS: string;
     MENU_LEAVE_CHANNEL: string;
+    MENU_NOTIFICATION: string;
+    MENU_NOTIFICATION_LABEL_ON: string;
+    MENU_NOTIFICATION_LABEL_OFF: string;
+    MENU_NOTIFICATION_LABEL_MENTION_ONLY: string;
 
     /** GroupChannelSettings > Dialog */
     DIALOG_CHANGE_NAME: string;
@@ -84,6 +90,16 @@ export interface StringSet {
     DIALOG_CHANGE_IMAGE_MENU_CAMERA: string;
     DIALOG_CHANGE_IMAGE_MENU_PHOTO_LIBRARY: string;
   };
+  GROUP_CHANNEL_NOTIFICATIONS: {
+    /** GroupChannelNotifications > Header */
+    HEADER_TITLE: string;
+
+    /** GroupChannelNotifications > Menu */
+    MENU_NOTIFICATIONS: string;
+    MENU_NOTIFICATIONS_DESC: string;
+    MENU_NOTIFICATIONS_OPTION_ALL: string;
+    MENU_NOTIFICATIONS_OPTION_MENTION_ONLY: string;
+  };
   GROUP_CHANNEL_MODERATION: {
     /** GroupChannelModeration > Header */
     HEADER_TITLE: string;
@@ -237,10 +253,10 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
       HEADER_TITLE: (currentUserId, channel) =>
         getGroupChannelTitle(currentUserId, channel, USER_NO_NAME, CHANNEL_NO_MEMBERS),
       LIST_BANNER_FROZEN: 'Channel is frozen',
-      LIST_DATE_SEPARATOR: (date, locale) => dateSeparator(date, locale ?? dateLocale),
+      LIST_DATE_SEPARATOR: (date, locale) => getDateSeparatorFormat(date, locale ?? dateLocale),
       LIST_BUTTON_NEW_MSG: (newMessages) => `${newMessages.length} new messages`,
 
-      MESSAGE_BUBBLE_TIME: (message, locale) => messageTime(new Date(message.createdAt), locale ?? dateLocale),
+      MESSAGE_BUBBLE_TIME: (message, locale) => getMessageTimeFormat(new Date(message.createdAt), locale ?? dateLocale),
       MESSAGE_BUBBLE_FILE_TITLE: (message) => message.name,
       MESSAGE_BUBBLE_EDITED_POSTFIX: ' (edited)',
       MESSAGE_BUBBLE_UNKNOWN_TITLE: () => '(Unknown message type)',
@@ -252,6 +268,8 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
       INPUT_EDIT_OK: 'Save',
       INPUT_EDIT_CANCEL: 'Cancel',
 
+      MENTION_LIMITED: (mentionLimit) => `You can have up to ${mentionLimit} mentions per message.`,
+
       DIALOG_MESSAGE_COPY: 'Copy',
       DIALOG_MESSAGE_EDIT: 'Edit',
       DIALOG_MESSAGE_SAVE: 'Save',
@@ -271,9 +289,12 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
       HEADER_TITLE: 'Channel information',
       HEADER_RIGHT: 'Edit',
       MENU_MODERATION: 'Moderation',
-      MENU_NOTIFICATION: 'Notifications',
       MENU_MEMBERS: 'Members',
       MENU_LEAVE_CHANNEL: 'Leave channel',
+      MENU_NOTIFICATION: 'Notifications',
+      MENU_NOTIFICATION_LABEL_ON: 'On',
+      MENU_NOTIFICATION_LABEL_OFF: 'Off',
+      MENU_NOTIFICATION_LABEL_MENTION_ONLY: 'Mentions only',
       DIALOG_CHANGE_NAME: 'Change channel name',
       DIALOG_CHANGE_NAME_PROMPT_TITLE: 'Change channel name',
       DIALOG_CHANGE_NAME_PROMPT_PLACEHOLDER: 'Enter name',
@@ -285,6 +306,15 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
       DIALOG_CHANGE_IMAGE_MENU_PHOTO_LIBRARY: 'Choose photo',
       ...overrides?.GROUP_CHANNEL_SETTINGS,
     },
+    GROUP_CHANNEL_NOTIFICATIONS: {
+      HEADER_TITLE: 'Notifications',
+      MENU_NOTIFICATIONS: 'Notifications',
+      MENU_NOTIFICATIONS_DESC:
+        'Turn on push notifications if you wish to be notified when messages are delivered to this channel.',
+      MENU_NOTIFICATIONS_OPTION_ALL: 'All new messages',
+      MENU_NOTIFICATIONS_OPTION_MENTION_ONLY: 'Mentions only',
+      ...overrides?.GROUP_CHANNEL_NOTIFICATIONS,
+    },
     GROUP_CHANNEL_MODERATION: {
       HEADER_TITLE: 'Moderation',
       MENU_OPERATORS: 'Operators',
@@ -382,7 +412,7 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
     },
     FILE_VIEWER: {
       TITLE: (message) => message.sender?.nickname || USER_NO_NAME,
-      SUBTITLE: (message) => messageTime(new Date(message.createdAt), dateLocale),
+      SUBTITLE: (message) => getMessageTimeFormat(new Date(message.createdAt), dateLocale),
     },
     PLACEHOLDER: {
       NO_BANNED_USERS: 'No banned users',
@@ -402,7 +432,7 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
       ALERT_DEFAULT_OK: 'OK',
       ALERT_PERMISSIONS_TITLE: 'Allow access?',
       ALERT_PERMISSIONS_MESSAGE: (permission, appName = 'Application') => {
-        return `${appName} need permission to access your ${permission}. Go to Settings to allow access`;
+        return `${appName} need permission to access your ${permission}.`;
       },
       ALERT_PERMISSIONS_OK: 'Go to settings',
       PROMPT_DEFAULT_OK: 'Submit',

package/src/types.ts

@@ -1,5 +1,7 @@
 import type { ErrorInfo, ReactNode } from 'react';
 
+import type { SendbirdUser } from '@sendbird/uikit-utils';
+
 export type KeyValuePairGet = [string, string | null];
 export type KeyValuePairSet = [string, string];
 export interface LocalCacheStorage {
@@ -16,3 +18,13 @@ export interface LocalCacheStorage {
 export type ErrorBoundaryProps = { error: Error; errorInfo: ErrorInfo; reset: () => void };
 
 export type CommonComponent<P = {}> = (props: P & { children?: ReactNode }) => null | JSX.Element; //ReactNode;
+
+export type MentionedUser = {
+  range: Range;
+  user: SendbirdUser;
+};
+
+export type Range = {
+  start: number;
+  end: number;
+};