@sendbird/uikit-utils 1.0.0-rc.1

package/src/index.ts

@@ -0,0 +1,57 @@
+export { Logger } from './shared/logger';
+export { default as arrayToMap, arrayToMapWithGetter } from './shared/arrayToMap';
+export { createPubSub } from './shared/pubsub';
+export { default as conditionChaining } from './shared/conditionChaining';
+export {
+  urlRegexStrict,
+  urlRegexRough,
+  newLineRegex,
+  audioExtRegex,
+  videoExtRegex,
+  imageExtRegex,
+  getFileType,
+  getFileExtension,
+  replaceUrlAsComponents,
+} from './shared/regex';
+
+export * from './hooks';
+export * from './ui-format/groupChannel';
+export * from './ui-format/common';
+export * from './sendbird/channel';
+export * from './sendbird/message';
+export * from './sendbird/attrs';
+
+export const NOOP: () => void = () => void 0;
+export const ASYNC_NOOP = async () => void 0;
+export const PASS = <T>(val: T) => val;
+export type {
+  FilterByValueType,
+  UnionToIntersection,
+  OmittedValues,
+  PartialDeep,
+  Optional,
+  ContextValue,
+  SendbirdMessage,
+  SendbirdChatSDK,
+  SendbirdChannel,
+  SendbirdBaseChannel,
+  SendbirdGroupChannel,
+  SendbirdOpenChannel,
+  SendbirdUser,
+  SendbirdMember,
+  SendbirdBaseMessage,
+  SendbirdUserMessage,
+  SendbirdFileMessage,
+  SendbirdAdminMessage,
+  SendbirdGroupChannelParams,
+  SendbirdFileMessageParams,
+  SendbirdUserMessageParams,
+  SendbirdError,
+  SendbirdMessageCollection,
+  SendbirdGroupChannelCollection,
+  NotificationFiles,
+  NotificationMentionedUsers,
+  NotificationTranslations,
+  PartialNullable,
+  SendbirdDataPayload,
+} from './types';

package/src/sendbird/attrs.ts

@@ -0,0 +1,44 @@
+export enum ApplicationAttributes {
+  reactions = 'reactions',
+  message_search_v3 = 'message_search_v3',
+  enable_og_tag = 'enable_og_tag',
+  use_last_seen_at = 'use_last_seen_at',
+  enable_message_threading = 'enable_message_threading',
+  allow_message_update_from_sdk = 'allow_message_update_from_sdk',
+  allow_group_channel_create_from_sdk = 'allow_group_channel_create_from_sdk',
+  allow_migration_api = 'allow_migration_api',
+  allow_only_operator_sdk_to_update_group_channel_image = 'allow_only_operator_sdk_to_update_group_channel_image',
+  allow_user_update_from_sdk = 'allow_user_update_from_sdk',
+  allow_broadcast_channel = 'allow_broadcast_channel',
+  allow_sdk_file_message_urls = 'allow_sdk_file_message_urls',
+  allow_group_channel_leave_from_sdk = 'allow_group_channel_leave_from_sdk',
+  allow_user_list_from_sdk = 'allow_user_list_from_sdk',
+  allow_group_channel_invite_from_sdk = 'allow_group_channel_invite_from_sdk',
+  allow_only_operator_sdk_to_update_group_channel_name = 'allow_only_operator_sdk_to_update_group_channel_name',
+  allow_group_channel_update_from_sdk = 'allow_group_channel_update_from_sdk',
+  allow_super_group_channel = 'allow_super_group_channel',
+  allow_non_operators_to_mention_channel = 'allow_non_operators_to_mention_channel',
+  allow_file_messages_from_sdk = 'allow_file_messages_from_sdk',
+  allow_open_channel_create_from_sdk = 'allow_open_channel_create_from_sdk',
+  allow_anonymous_message_update = 'allow_anonymous_message_update',
+  allow_group_channel_delete_from_sdk = 'allow_group_channel_delete_from_sdk',
+  allow_operators_to_ban_operators = 'allow_operators_to_ban_operators',
+  allow_operators_to_edit_operators = 'allow_operators_to_edit_operators',
+}
+
+export enum PremiumFeatures {
+  reactions = 'reactions',
+  moderation_group = 'moderation_group',
+  message_search_v3 = 'message_search_v3',
+  data_export = 'data_export',
+  migration = 'migration',
+  delivery_receipt = 'delivery_receipt',
+  auto_thumbnail = 'auto_thumbnail',
+  image_moderation = 'image_moderation',
+  super_group_channel = 'super_group_channel',
+  announcement = 'announcement',
+  moderation_open = 'moderation_open',
+  desk = 'desk',
+  bot_interface = 'bot_interface',
+  auto_trans = 'auto_trans',
+}

package/src/sendbird/channel.ts

@@ -0,0 +1,37 @@
+import type { SendbirdBaseChannel, SendbirdGroupChannel } from '../types';
+
+/**
+ * Default sort comparator for channel
+ * @param {SendbirdBaseChannel} a
+ * @param {SendbirdBaseChannel} b
+ * @returns {number}
+ * */
+export function channelComparator<T extends SendbirdBaseChannel>(a: T, b: T): number {
+  if (a.isGroupChannel() && b.isGroupChannel()) {
+    return (b.lastMessage?.createdAt ?? b.createdAt) - (a.lastMessage?.createdAt ?? a.createdAt);
+  }
+  return b.createdAt - a.createdAt;
+}
+
+/**
+ * Diff utils for channel
+ * @param {SendbirdBaseChannel} [a]
+ * @param {SendbirdBaseChannel} [b]
+ * @returns {boolean}
+ * */
+export function isDifferentChannel<T extends SendbirdBaseChannel>(a?: T, b?: T): boolean {
+  if (!a || !b) return true;
+  return a.url !== b.url;
+}
+
+export const groupChannelChatUnavailable = (channel: SendbirdGroupChannel) => {
+  return channel.myMutedState === 'muted' || (channel.isFrozen && channel.myRole !== 'operator');
+};
+
+export function isDefaultCoverImage(coverUrl: string) {
+  return coverUrl === '' || coverUrl.startsWith('https://static.sendbird.com/sample/cover');
+}
+
+export function getMembersExcludeMe(channel: SendbirdGroupChannel, currentUserId?: string) {
+  return channel.members.filter((m) => m.userId !== currentUserId);
+}

package/src/sendbird/message.ts

@@ -0,0 +1,101 @@
+import type { SendbirdDataPayload, SendbirdFileMessage, SendbirdMessage } from '../types';
+import { messageTime } from '../ui-format/common';
+
+export function isNewMessage(msg: SendbirdMessage, currentUserId?: string) {
+  const myMessage = isMyMessage(msg, currentUserId);
+  if (myMessage) return false;
+  if (msg.isAdminMessage()) return false;
+  return msg.updatedAt === 0;
+}
+
+export function isMyMessage(msg: SendbirdMessage, currentUserId = '##__USER_ID_IS_NOT_PROVIDED__##') {
+  return (
+    ('sender' in msg && msg.sender?.userId === currentUserId) ||
+    msg.sendingStatus === 'pending' ||
+    msg.sendingStatus === 'failed' ||
+    msg.sendingStatus === 'canceled'
+  );
+}
+
+export function messageKeyExtractor(message: SendbirdMessage): string {
+  return getMessageUniqId(message);
+}
+
+// |-------------------|-------------------|-----------------|-------------------|
+// |   sending status  |       reqId       |    messageId    |     createdAt     |
+// |-------------------|-------------------|-----------------|-------------------|
+// |     pending       |    timestamp(A)   |        0        |    timestamp(B)   |
+// |     canceled      |    timestamp(A)   |        0        |         ?         |
+// |     failed        |    timestamp(A)   |        0        |         ?         |
+// |     succeeded     | timestamp(A) / '' |    id from DB   |    timestamp(C)   |
+// |-------------------|-------------------|-----------------|-------------------|
+export function messageComparator<T extends SendbirdMessage>(a: T, b: T) {
+  let aStatusOffset = 0;
+  let bStatusOffset = 0;
+
+  if (a.sendingStatus !== 'succeeded') aStatusOffset = 999999;
+  if (b.sendingStatus !== 'succeeded') bStatusOffset = 999999;
+
+  return b.createdAt + bStatusOffset - (a.createdAt + aStatusOffset);
+}
+
+export function hasSameSender(a?: SendbirdMessage, b?: SendbirdMessage) {
+  if (!a || !b) return false;
+  if ('sender' in a && 'sender' in b) return a.sender?.userId === b.sender?.userId;
+  return false;
+}
+
+export function calcMessageGrouping(
+  groupEnabled: boolean,
+  curr: SendbirdMessage,
+  prev?: SendbirdMessage,
+  next?: SendbirdMessage,
+) {
+  const getPrev = () => {
+    if (!groupEnabled) return false;
+    if (!prev) return false;
+    if (curr.isAdminMessage()) return false;
+    if (!hasSameSender(curr, prev)) return false;
+    if (messageTime(new Date(curr.createdAt)) !== messageTime(new Date(prev.createdAt))) return false;
+    return true;
+  };
+
+  const getNext = () => {
+    if (!groupEnabled) return false;
+    if (!next) return false;
+    if (curr.isAdminMessage()) return false;
+    if (!hasSameSender(curr, next)) return false;
+    if (messageTime(new Date(curr.createdAt)) !== messageTime(new Date(next.createdAt))) return false;
+    return true;
+  };
+
+  return { groupWithPrev: getPrev(), groupWithNext: getNext() };
+}
+
+export function getMessageUniqId(msg: SendbirdMessage) {
+  if (msg.isUserMessage() || msg.isFileMessage()) {
+    if (msg.sendingStatus === 'succeeded') return String(msg.messageId);
+    return msg.reqId;
+  }
+
+  return String(msg.messageId);
+}
+
+export function getAvailableUriFromFileMessage(message: SendbirdFileMessage) {
+  if (!message.url && message.messageParams && 'uri' in message.messageParams.file) {
+    return message.messageParams.file.uri;
+  }
+  return message.url;
+}
+
+type RawSendbirdDataPayload = { sendbird: string | object };
+export function isSendbirdNotification(dataPayload?: {
+  [key: string]: string | object;
+}): dataPayload is RawSendbirdDataPayload {
+  if (!dataPayload) return false;
+  return Boolean(dataPayload['sendbird']);
+}
+
+export function parseSendbirdNotification(dataPayload: RawSendbirdDataPayload): SendbirdDataPayload {
+  return typeof dataPayload.sendbird === 'string' ? JSON.parse(dataPayload.sendbird) : dataPayload.sendbird;
+}

package/src/shared/arrayToMap.ts

@@ -0,0 +1,70 @@
+import type { FilterByValueType } from '../types';
+
+export default function arrayToMap<T extends Record<K, unknown>, K extends keyof T = keyof T>(
+  arr: T[],
+  selector: keyof FilterByValueType<T, string | number>,
+): Record<string, T>;
+
+export default function arrayToMap<T extends Record<K, unknown>, K extends keyof T = keyof T>(
+  arr: T[],
+  selector: string,
+  fallbackSelector: K,
+): Record<string, T>;
+
+export default function arrayToMap<T extends Record<K, unknown>, K extends keyof T = keyof T>(
+  arr: T[],
+  selector: string,
+  selector2: string,
+  combineKey: true,
+): Record<string, T>;
+
+/**
+ * Convert Array of the object to Object
+ * @param {object[]} arr
+ * @param {keyof object} selector
+ * @param {keyof object} [fallbackSelector]
+ * @param {boolean} [combine]
+ * @returns {Record<keyof object, object>}
+ * @example
+ * ```
+ *  const arr = [{name: 'john'}, {name: 'chris'}, {name: 'sravan'}, {name: 'hoon'}];
+ *  const obj = arrayToMap(arr, 'name');
+ *
+ *  console.log(obj);
+ *  // {
+ *  //  'john': {name: 'john'},
+ *  //  'chris': {name: 'chris'},
+ *  //  'sravan': {name: 'sravan'},
+ *  //  'hoon': {name: 'hoon'}
+ *  // }
+ * ```
+ * */
+export default function arrayToMap<T extends Record<K, unknown>, K extends keyof T = keyof T>(
+  arr: T[],
+  selector: K,
+  fallbackSelector?: K,
+  combine?: boolean,
+) {
+  return arr.reduce((accum, curr) => {
+    if (combine && fallbackSelector) {
+      const _key = curr[selector] + (curr[fallbackSelector] as string);
+      accum[_key] = curr;
+    } else {
+      const _key = (curr[selector] || curr[fallbackSelector as K]) as string;
+      accum[_key] = curr;
+    }
+
+    return accum;
+  }, {} as Record<string, T>);
+}
+
+export function arrayToMapWithGetter<T extends Record<K, unknown>, K extends keyof T = keyof T>(
+  arr: T[],
+  getSelector: (item: T) => string,
+) {
+  return arr.reduce((accum, curr) => {
+    const _key = getSelector(curr);
+    accum[_key] = curr;
+    return accum;
+  }, {} as Record<string, T>);
+}

package/src/shared/conditionChaining.ts

@@ -0,0 +1,6 @@
+const conditionChaining = <T, V>(conditions: T[], values: V[]) => {
+  const idx = conditions.findIndex((state) => Boolean(state));
+  return idx > -1 ? values[idx] : values[values.length - 1];
+};
+
+export default conditionChaining;

package/src/shared/logger.ts

@@ -0,0 +1,59 @@
+/* eslint-disable no-console */
+
+const LogLevelEnum = {
+  'none': 0,
+  'log': 1,
+  'error': 2,
+  'warn': 3,
+  'info': 4,
+  'debug': 5,
+};
+type LogLevel = keyof typeof LogLevelEnum;
+
+const createLogger = (level: LogLevel = 'warn') => {
+  let _logLevel = level;
+  let _title = '[UIKit]';
+
+  return {
+    setTitle(title: string) {
+      _title = title;
+    },
+    setLogLevel(lv: LogLevel) {
+      _logLevel = lv;
+    },
+    getLogLevel() {
+      return _logLevel;
+    },
+    log(...args: unknown[]) {
+      if (LogLevelEnum[_logLevel] < LogLevelEnum.log) return LogLevelEnum.none;
+      console.log(_title, ...args);
+      return LogLevelEnum[_logLevel];
+    },
+    error(...args: unknown[]) {
+      if (LogLevelEnum[_logLevel] < LogLevelEnum.error) return LogLevelEnum.none;
+      console.error(_title, ...args);
+      return LogLevelEnum[_logLevel];
+    },
+    warn(...args: unknown[]) {
+      if (LogLevelEnum[_logLevel] < LogLevelEnum.warn) return LogLevelEnum.none;
+      console.warn(_title, ...args);
+      return LogLevelEnum[_logLevel];
+    },
+    info(...args: unknown[]) {
+      if (LogLevelEnum[_logLevel] < LogLevelEnum.info) return LogLevelEnum.none;
+      console.info(_title, ...args);
+      return LogLevelEnum[_logLevel];
+    },
+    debug(...args: unknown[]) {
+      if (LogLevelEnum[_logLevel] < LogLevelEnum.debug) return LogLevelEnum.none;
+      console.log(_title, ...args);
+      return LogLevelEnum[_logLevel];
+    },
+  };
+};
+
+export const Logger = {
+  ...createLogger(),
+  LogLevelEnum,
+  create: createLogger,
+};

package/src/shared/pubsub.ts

@@ -0,0 +1,42 @@
+export type SubscribeListener = ((...args: unknown[]) => void) & { onError?: (error: unknown) => void };
+export type SubscribeListenerPool = Record<symbol, SubscribeListener>;
+
+export const createPubSub = (label = 'pubsub') => {
+  const eventPool: Record<string, SubscribeListenerPool> = {};
+
+  const getSubscribeListenerPool = (event: string) => {
+    if (!eventPool[event]) eventPool[event] = {};
+    return eventPool[event];
+  };
+
+  return {
+    subscribe: (event: string, listener: SubscribeListener, subscriber = '') => {
+      const name = `${label}_${event}_${subscriber}`;
+      const id = Symbol(name);
+
+      const subscribeListenerPool = getSubscribeListenerPool(event);
+      subscribeListenerPool[id] = listener;
+
+      return () => {
+        delete getSubscribeListenerPool(event)[id];
+      };
+    },
+    publish: (event: string, ...args: unknown[]) => {
+      const subscribeListenerPool = getSubscribeListenerPool(event);
+      const ids = Object.getOwnPropertySymbols(subscribeListenerPool);
+      setTimeout(() => {
+        ids.forEach((id) => {
+          const listener = subscribeListenerPool[id];
+          try {
+            listener(...args);
+          } catch (err: unknown) {
+            if (listener.onError) {
+              (err as Error).stack += `\npubsub error: ${id.description}`;
+              listener.onError(err);
+            }
+          }
+        });
+      }, 0);
+    },
+  };
+};

package/src/shared/regex.ts

@@ -0,0 +1,74 @@
+// For iOS 12 backwards compatibility
+require('string.prototype.matchall').shim();
+
+export const urlRegexStrict =
+  /(https?:\/\/|www\.)[-a-zA-Z0-9@:%._+~#=]{1,256}\.(xn--)?[a-z0-9-]{2,20}\b([-a-zA-Z0-9@:%_+[\],.~#?&/=]*[-a-zA-Z0-9@:%_+\]~#?&/=])*/g;
+export const urlRegexRough =
+  /(https?:\/\/|www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/g;
+export const phoneRegex = /[+]?[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4,7}/;
+export const emailRegex = /\S+@\S+\.\S+/;
+export const newLineRegex = /\r\n|\r|\n/g;
+
+// const cases = [
+//   {
+//     type: 'urlStrict',
+//     regex: urlRegexStrict,
+//   },
+//   {
+//     type: 'urlRough',
+//     regex: urlRegexStrict,
+//   },
+//   {
+//     type: 'email',
+//     regex: emailRegex,
+//   },
+//   {
+//     type: 'phone',
+//     regex: urlRegexStrict,
+//   },
+// ];
+
+export const replaceUrlAsComponents = <T>(originText: string, replacer: (url: string) => T, strict?: boolean) => {
+  const matches = [...originText.matchAll(strict ? urlRegexStrict : urlRegexRough)];
+  const founds = matches.map((value) => {
+    const text = value[0];
+    const start = value.index ?? 0;
+    const end = start + text.length;
+    return { text, start, end };
+  });
+
+  const items: Array<string | T> = [originText];
+  let cursor = 0;
+  founds.forEach(({ text, start, end }) => {
+    const restText = items.pop() as string;
+    const head = restText.slice(0, start - cursor);
+    const mid = replacer(text);
+    const tail = restText.slice(end - cursor);
+    items.push(head, mid, tail);
+    cursor = end;
+  });
+  return items;
+};
+
+export const imageExtRegex = /jpeg|jpg|png|webp|gif/i;
+export const audioExtRegex = /3gp|aac|aax|act|aiff|flac|gsm|m4a|m4b|m4p|tta|wma|mp3|webm|wav/i;
+export const videoExtRegex = /mov|vod|mp4|avi/i;
+export const getFileType = (extOrType: string) => {
+  if (extOrType.indexOf('/') > -1) {
+    const type = extOrType.split('/')[0];
+    if (type === 'video') return 'video';
+    if (type === 'audio') return 'audio';
+    if (type === 'image') return 'image';
+    return 'file';
+  }
+
+  if (extOrType.match(imageExtRegex)) return 'image';
+  if (extOrType.match(audioExtRegex)) return 'audio';
+  if (extOrType.match(videoExtRegex)) return 'video';
+  return 'file';
+};
+export function getFileExtension(filePath: string) {
+  const idx = filePath.lastIndexOf('.');
+  if (idx === -1) return '';
+  return filePath.slice(idx - filePath.length).toLowerCase();
+}

package/src/types.ts

@@ -0,0 +1,101 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/* eslint-disable @typescript-eslint/no-empty-interface */
+import type React from 'react';
+import type Sendbird from 'sendbird';
+
+export type FilterByValueType<T extends object, Type> = {
+  [K in keyof T as T[K] extends Type ? K : never]: T[K];
+};
+
+export type UnionToIntersection<U> = (U extends unknown ? (k: U) => void : never) extends (k: infer I) => void
+  ? I
+  : never;
+
+export type OmittedValues<T, K extends keyof T> = Omit<T, K>[keyof Omit<T, K>];
+
+export type PartialDeep<T> = T extends object
+  ? T extends Function
+    ? T
+    : {
+        [P in keyof T]?: PartialDeep<T[P]>;
+      }
+  : T;
+
+export type PartialNullable<T> = {
+  [P in keyof T]?: T[P] | null;
+};
+
+export type Optional<T> = T | undefined;
+
+export type ContextValue<T extends React.Context<any>> = T extends React.Context<infer V> ? V : never;
+
+// for v4 migration
+export type SendbirdChatSDK = Sendbird.SendBirdInstance;
+export type SendbirdMessage =
+  | Sendbird.BaseMessageInstance
+  | Sendbird.FileMessage
+  | Sendbird.UserMessage
+  | Sendbird.AdminMessage;
+export type SendbirdChannel = Sendbird.BaseChannel | Sendbird.GroupChannel | Sendbird.OpenChannel;
+export type SendbirdUserMessage = Sendbird.UserMessage;
+export type SendbirdFileMessage = Sendbird.FileMessage;
+export type SendbirdAdminMessage = Sendbird.AdminMessage;
+export type SendbirdBaseMessage = Sendbird.BaseMessageInstance;
+export type SendbirdFileMessageParams = Sendbird.FileMessageParams;
+export type SendbirdUserMessageParams = Sendbird.UserMessageParams;
+export type SendbirdError = Sendbird.SendBirdError;
+export type SendbirdGroupChannelParams = Sendbird.GroupChannelParams;
+export type SendbirdUser = Sendbird.User;
+export type SendbirdMember = Sendbird.Member;
+export type SendbirdGroupChannel = Sendbird.GroupChannel;
+export type SendbirdBaseChannel = Sendbird.BaseChannel;
+export type SendbirdOpenChannel = Sendbird.OpenChannel;
+export type SendbirdGroupChannelCollection = Sendbird.GroupChannelCollection;
+export type SendbirdMessageCollection = Sendbird.MessageCollection;
+
+export interface SendbirdDataPayload {
+  app_id: string;
+  audience_type: string;
+  category: string;
+  channel: {
+    channel_unread_message_count: number;
+    channel_url: string;
+    custom_type: string;
+    name: string;
+  };
+  channel_type: string;
+  created_at: number;
+  custom_type: string;
+  files: NotificationFiles[];
+  mentioned_users: NotificationMentionedUsers[];
+  message: string;
+  message_id: number;
+  push_sound: string;
+  push_title: null;
+  recipient: {
+    id: string;
+    name: string;
+    push_template: string;
+  };
+  sender?: {
+    id: string;
+    name: string;
+    profile_url: string;
+    require_auth_for_profile_image: boolean;
+  };
+  sqs_ts: number;
+  translations: NotificationTranslations;
+  type: 'ADMM' | 'MESG' | 'FILE' | string;
+  unread_message_count: number;
+}
+export interface NotificationFiles {
+  type: string;
+  url: string;
+  name: string;
+  size: number;
+  require_auth: boolean;
+}
+
+export interface NotificationTranslations {}
+export interface NotificationMentionedUsers {}

package/src/ui-format/common.ts

@@ -0,0 +1,73 @@
+import type { Locale } from 'date-fns';
+import format from 'date-fns/format';
+
+type TruncateMode = 'head' | 'mid' | 'tail';
+type TruncateOption = { mode: TruncateMode; maxLen: number; separator: string };
+const defaultOpts: TruncateOption = { mode: 'mid', maxLen: 40, separator: '...' };
+
+/**
+ * String truncate util
+ * @param {string} str
+ * @param {Object} opts Options for truncate
+ * @param {'head' | 'mid' | 'tail'} opts.mode  default "mid"
+ * @param {number} opts.maxLen  default 40
+ * @param {string} opts.separator default "..."
+ * @returns {string}
+ * */
+export const truncate = (str: string, opts: Partial<TruncateOption> = defaultOpts): string => {
+  const options = { ...defaultOpts, ...opts };
+  const { maxLen, mode, separator } = options;
+
+  if (str.length <= maxLen) return str;
+
+  if (mode === 'head') {
+    return separator + str.slice(-maxLen);
+  }
+
+  if (mode === 'mid') {
+    const lead = Math.ceil(maxLen / 2);
+    const trail = Math.floor(maxLen / 2);
+    return str.slice(0, lead) + separator + str.slice(-trail);
+  }
+
+  if (mode === 'tail') {
+    return str.slice(0, maxLen) + separator;
+  }
+
+  throw new Error('Invalid truncate mode: ' + mode);
+};
+
+/**
+ * Badge count truncate util
+ * If count exceed the limit, it comes in the form of "MAX+"
+ *
+ * @param {number} count
+ * @param {number} MAX default 99
+ * @returns {string}
+ * */
+export const truncatedBadgeCount = (count: number, MAX = 99) => {
+  if (count >= MAX) return `${MAX}+`;
+  return `${count}`;
+};
+
+/**
+ * Messages date separator format
+ *
+ * @param {Date} date
+ * @param {Locale} [locale]
+ * @returns {string}
+ * */
+export const dateSeparator = (date: Date, locale?: Locale): string => {
+  return format(date, 'E, LLL dd', { locale });
+};
+
+/**
+ * Message time format
+ *
+ * @param {Date} date
+ * @param {Locale} [locale]
+ * @returns {string}
+ * */
+export const messageTime = (date: Date, locale?: Locale): string => {
+  return format(date, 'p', { locale });
+};