@webinex/chatify 2.0.0-alpha1 → 2.0.0-alpha3

package/src/ui/common/Icon.tsx

@@ -1,40 +1,44 @@
-import { FC } from 'react';
-import { customize } from '../customize';
-import SendOutlined from '@ant-design/icons/SendOutlined';
-import PaperClipOutlined from '@ant-design/icons/PaperClipOutlined';
-import UserAddOutlined from '@ant-design/icons/UserAddOutlined';
-import UsergroupAddOutlined from '@ant-design/icons/UsergroupAddOutlined';
-import UserDeleteOutlined from '@ant-design/icons/UserDeleteOutlined';
-import UsergroupDeleteOutlined from '@ant-design/icons/UsergroupDeleteOutlined';
-import TeamOutlined from '@ant-design/icons/TeamOutlined';
-import EditOutlined from '@ant-design/icons/EditOutlined';
-import CloseOutlined from '@ant-design/icons/CloseOutlined';
-import EyeInvisibleOutlined from '@ant-design/icons/EyeInvisibleOutlined';
-import EyeOutlined from '@ant-design/icons/EyeOutlined';
-
-export type IconType = keyof typeof ICONS;
-
-export interface IconProps {
-  type: IconType;
-}
-
-export const ICONS = {
-  attach: PaperClipOutlined,
-  send: SendOutlined,
-  'remove-member': UserDeleteOutlined,
-  'remove-member-delete-history': UsergroupDeleteOutlined,
-  'add-member': UserAddOutlined,
-  'add-member-with-history': UsergroupAddOutlined,
-  members: TeamOutlined,
-  edit: EditOutlined,
-  close: CloseOutlined,
-  chat: TeamOutlined,
-  watch: EyeOutlined,
-  unwatch: EyeInvisibleOutlined,
-};
-
-export const Icon = customize<FC<IconProps>>('Icon', (props) => {
-  const { type } = props;
-  const IconComponent = ICONS[type];
-  return IconComponent ? <IconComponent /> : null;
-});
+import { FC } from 'react';
+import { customize } from '../customize';
+import SendOutlined from '@ant-design/icons/SendOutlined';
+import PaperClipOutlined from '@ant-design/icons/PaperClipOutlined';
+import UserAddOutlined from '@ant-design/icons/UserAddOutlined';
+import UsergroupAddOutlined from '@ant-design/icons/UsergroupAddOutlined';
+import UserDeleteOutlined from '@ant-design/icons/UserDeleteOutlined';
+import UsergroupDeleteOutlined from '@ant-design/icons/UsergroupDeleteOutlined';
+import TeamOutlined from '@ant-design/icons/TeamOutlined';
+import EditOutlined from '@ant-design/icons/EditOutlined';
+import CloseOutlined from '@ant-design/icons/CloseOutlined';
+import EyeInvisibleOutlined from '@ant-design/icons/EyeInvisibleOutlined';
+import EyeOutlined from '@ant-design/icons/EyeOutlined';
+import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
+import DownloadOutlined from '@ant-design/icons/DownloadOutlined';
+
+export type IconType = keyof typeof ICONS;
+
+export interface IconProps {
+  type: IconType;
+}
+
+export const ICONS = {
+  attach: PaperClipOutlined,
+  send: SendOutlined,
+  'remove-member': UserDeleteOutlined,
+  'remove-member-delete-history': UsergroupDeleteOutlined,
+  'add-member': UserAddOutlined,
+  'add-member-with-history': UsergroupAddOutlined,
+  members: TeamOutlined,
+  edit: EditOutlined,
+  close: CloseOutlined,
+  chat: TeamOutlined,
+  watch: EyeOutlined,
+  unwatch: EyeInvisibleOutlined,
+  'delete-file': DeleteOutlined,
+  'open-file': DownloadOutlined,
+};
+
+export const Icon = customize<FC<IconProps>>('Icon', (props) => {
+  const { type } = props;
+  const IconComponent = ICONS[type];
+  return IconComponent ? <IconComponent /> : null;
+});

package/src/ui/common/MessageSkeleton.tsx

@@ -1,20 +1,20 @@
-import { Skeleton } from 'antd';
-import { customize } from '../customize';
-
-export interface MessageSkeletonProps {
-  count?: number;
-}
-
-export const MessageSkeleton = customize('MessageSkeleton', (props: MessageSkeletonProps) => {
-  const { count = 1 } = props;
-  return (
-    <>
-      {Array.from(Array(count)).map((_, index) => (
-        <div className="wxchtf-message-skeleton" key={index}>
-          <Skeleton.Avatar className="wxchtf-avatar" active />
-          <Skeleton.Button active className="wxchtf-content" />
-        </div>
-      ))}
-    </>
-  );
-});
+import { Skeleton } from 'antd';
+import { customize } from '../customize';
+
+export interface MessageSkeletonProps {
+  count?: number;
+}
+
+export const MessageSkeleton = customize('MessageSkeleton', (props: MessageSkeletonProps) => {
+  const { count = 1 } = props;
+  return (
+    <>
+      {Array.from(Array(count)).map((_, index) => (
+        <div className="wxchtf-message-skeleton" key={index}>
+          <Skeleton.Avatar className="wxchtf-avatar" active />
+          <Skeleton.Button active className="wxchtf-content" />
+        </div>
+      ))}
+    </>
+  );
+});

package/src/ui/common/index.ts

@@ -1,13 +1,13 @@
-import { Avatar } from './Avatar';
-import { Icon } from './Icon';
-import { MessageSkeleton } from './MessageSkeleton';
-
-export * from './Avatar';
-export * from './Icon';
-export * from './MessageSkeleton';
-
-export interface CommonCustomizeValue {
-  Avatar?: typeof Avatar.Component | null;
-  Icon?: typeof Icon.Component | null;
-  MessageSkeleton?: typeof MessageSkeleton.Component | null;
-}
+import { Avatar } from './Avatar';
+import { Icon } from './Icon';
+import { MessageSkeleton } from './MessageSkeleton';
+
+export * from './Avatar';
+export * from './Icon';
+export * from './MessageSkeleton';
+
+export interface CommonCustomizeValue {
+  Avatar?: typeof Avatar.Component | null;
+  Icon?: typeof Icon.Component | null;
+  MessageSkeleton?: typeof MessageSkeleton.Component | null;
+}

package/src/ui/customize.tsx

@@ -1,53 +1,51 @@
-import React, { FC, useContext } from 'react';
-
-export type Customizable<TComponent extends React.ComponentType<any>> = TComponent & {
-  Component: TComponent;
-  key: string;
-};
-
-export const CustomizeContext = React.createContext<
-  Record<string, React.ComponentType<any> | null | undefined>
->(null!);
-
-export function useCustomizeContext() {
-  return useContext(CustomizeContext);
-}
-
-function useCustom<TComponent extends React.ComponentType>(key: string): TComponent | undefined | null {
-  const value = useContext(CustomizeContext);
-  return value ? (value[key] as TComponent | null | undefined) : undefined;
-}
-
-export function useCustomize<TCustom extends Customizable<React.ComponentType<any>>>(custom: TCustom) {
-  const Custom = useCustom<TCustom['Component']>(custom.key);
-
-  if (Custom == null) {
-    return null;
-  }
-
-  return Custom ?? custom.Component;
-}
-
-export function customize<TComponent extends React.ComponentType<any>>(
-  key: string,
-  Component: TComponent,
-): TComponent extends React.ComponentType<infer X> ? Customizable<React.ComponentType<X>> : never {
-  const Result: FC<any> = React.forwardRef<TComponent, any>((props: any, forwardRef) => {
-    const Custom = useCustom(key);
-
-    if (Custom === null) {
-      return null;
-    }
-
-    if (Custom) {
-      return <Custom {...props} ref={forwardRef} />;
-    }
-
-    return <Component {...props} ref={forwardRef} />;
-  });
-
-  Component.displayName = Component.displayName || key;
-  Result.displayName = 'Customizable.' + Component.displayName;
-
-  return Object.assign(Result, { key, Component }) as any;
-}
+import React, { FC, useContext } from 'react';
+
+export type Customizable<TComponent extends React.ComponentType<any>> = TComponent & {
+  Component: TComponent;
+  key: string;
+};
+
+export const CustomizeContext = React.createContext<Record<string, any>>(null!);
+
+export function useCustomizeContext<TValue>() {
+  return useContext(CustomizeContext) as TValue;
+}
+
+function useCustom<TComponent extends React.ComponentType>(key: string): TComponent | undefined | null {
+  const value = useContext(CustomizeContext);
+  return value ? (value[key] as TComponent | null | undefined) : undefined;
+}
+
+export function useCustomize<TCustom extends Customizable<React.ComponentType<any>>>(custom: TCustom) {
+  const Custom = useCustom<TCustom['Component']>(custom.key);
+
+  if (Custom == null) {
+    return null;
+  }
+
+  return Custom ?? custom.Component;
+}
+
+export function customize<TComponent extends React.ComponentType<any>>(
+  key: string,
+  Component: TComponent,
+): TComponent extends React.ComponentType<infer X> ? Customizable<React.ComponentType<X>> : never {
+  const Result: FC<any> = React.forwardRef<TComponent, any>((props: any, forwardRef) => {
+    const Custom = useCustom(key);
+
+    if (Custom === null) {
+      return null;
+    }
+
+    if (Custom) {
+      return <Custom {...props} ref={forwardRef} />;
+    }
+
+    return <Component {...props} ref={forwardRef} />;
+  });
+
+  Component.displayName = Component.displayName || key;
+  Result.displayName = 'Customizable.' + Component.displayName;
+
+  return Object.assign(Result, { key, Component }) as any;
+}

package/src/ui/index.ts

@@ -1,11 +1,11 @@
-export * from './color';
-export * from './customize';
-export * from './Chatify';
-export * from './localizer';
-export * from './Chat';
-export * from './ChatGroup';
-export * from './Conversation';
-export * from './Thread';
-export * from './common/Icon';
-export * from './common/Avatar';
-export * from './common/MessageSkeleton';
+export * from './color';
+export * from './customize';
+export * from './Chatify';
+export * from './localizer';
+export * from './Chat';
+export * from './ChatGroup';
+export * from './Conversation';
+export * from './Thread';
+export * from './common/Icon';
+export * from './common/Avatar';
+export * from './common/MessageSkeleton';

package/src/ui/localizer.tsx

@@ -1,81 +1,96 @@
-import dayjs from 'dayjs';
-import React, { useContext } from 'react';
-import { SystemMessageText } from '../core';
-
-export interface Localizer {
-  isToday: (value: string) => boolean;
-  timestamp: (value: string) => string;
-  dateTime: (value: string) => string;
-  system: Record<SystemMessageText, (key: SystemMessageText, payload: any | null) => string>;
-  message: {
-    read: () => React.ReactNode;
-    reading: () => React.ReactNode;
-    sending: () => React.ReactNode;
-  };
-  addChat: {
-    title: () => React.ReactNode;
-    name: {
-      label: () => React.ReactNode;
-      required: () => string;
-      max250: () => string;
-    };
-    members: {
-      label: () => React.ReactNode;
-      required: () => string;
-    };
-    submitBtn: () => React.ReactNode;
-  };
-
-  input: {
-    placeholder: () => string;
-  };
-
-  settings: {
-    members: () => string;
-  };
-}
-
-export const LocalizerContext = React.createContext<Localizer>(null!);
-
-export function useLocalizer() {
-  return useContext(LocalizerContext);
-}
-
-export const defaultLocalizer: Localizer = {
-  isToday: (value: string) => dayjs(value).isSame(dayjs(), 'day'),
-  timestamp: (value: string) => dayjs(value).format('HH:mm'),
-  dateTime: (value: string) => dayjs(value).format('DD/MM/YYYY HH:mm'),
-  message: {
-    read: () => 'Read',
-    reading: () => 'Reading...',
-    sending: () => 'Sending...',
-  },
-  addChat: {
-    title: () => 'Add chat',
-    name: {
-      label: () => 'Name',
-      required: () => `Name is required`,
-      max250: () => 'Max 250 characters allowed',
-    },
-    members: {
-      label: () => 'Members',
-      required: () => 'Members is required',
-    },
-    submitBtn: () => 'Submit',
-  },
-  system: {
-    'chatify://chat-created': () => 'Chat created',
-    'chatify://member-added': () => 'New member added',
-    'chatify://member-removed': () => 'Member removed',
-    'chatify://chat-name-changed': (_, { newName }: { newName: string }) =>
-      `Chat name changed to '${newName}'`,
-  },
-
-  input: {
-    placeholder: () => 'Start typing (Ctrl/⌘Cmd + Enter to send) ...',
-  },
-
-  settings: {
-    members: () => 'Members',
-  },
-};
+import dayjs from 'dayjs';
+import React, { useContext } from 'react';
+import { SystemMessageText } from '../core';
+
+export interface Localizer {
+  isToday: (value: string) => boolean;
+  timestamp: (value: string) => string;
+  dateTime: (value: string) => string;
+  system: Record<SystemMessageText, (key: SystemMessageText, payload: any | null) => string>;
+  message: {
+    read: () => React.ReactNode;
+    reading: () => React.ReactNode;
+    sending: () => React.ReactNode;
+  };
+  addChat: {
+    title: () => React.ReactNode;
+    name: {
+      label: () => React.ReactNode;
+      required: () => string;
+      max250: () => string;
+    };
+    members: {
+      label: () => React.ReactNode;
+      required: () => string;
+    };
+    submitBtn: () => React.ReactNode;
+  };
+
+  input: {
+    placeholder: () => string;
+  };
+
+  settings: {
+    members: () => string;
+  };
+
+  size: {
+    bytes: (value: number) => string;
+    kb: (value: number) => string;
+    mb: (value: number) => string;
+  };
+}
+
+export const LocalizerContext = React.createContext<Localizer>(null!);
+
+export function useLocalizer() {
+  return useContext(LocalizerContext);
+}
+
+export const defaultLocalizer: Localizer = {
+  isToday: (value: string) => dayjs(value).isSame(dayjs(), 'day'),
+  timestamp: (value: string) => dayjs(value).format('HH:mm'),
+  dateTime: (value: string) => dayjs(value).format('DD/MM/YYYY HH:mm'),
+  message: {
+    read: () => 'Read',
+    reading: () => 'Reading...',
+    sending: () => 'Sending...',
+  },
+  addChat: {
+    title: () => 'Add chat',
+    name: {
+      label: () => 'Name',
+      required: () => `Name is required`,
+      max250: () => 'Max 250 characters allowed',
+    },
+    members: {
+      label: () => 'Members',
+      required: () => 'Members is required',
+    },
+    submitBtn: () => 'Submit',
+  },
+  system: {
+    'chatify://chat-created': () => 'Chat created',
+    'chatify://member-added': () => 'New member added',
+    'chatify://member-removed': () => 'Member removed',
+    'chatify://chat-name-changed': (_, { newName }: { newName: string }) =>
+      `Chat name changed to '${newName}'`,
+  },
+
+  input: {
+    placeholder: () => 'Start typing (Ctrl/⌘Cmd + Enter to send) ...',
+  },
+
+  settings: {
+    members: () => 'Members',
+  },
+
+  size: {
+    bytes: (value: number) =>
+      `${value.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} bytes`,
+    kb: (value: number) =>
+      `${value.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} KB`,
+    mb: (value: number) =>
+      `${value.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} MB`,
+  },
+};

package/src/ui/useFormatter.tsx

@@ -0,0 +1,17 @@
+import { useLocalizer } from './localizer';
+
+export function useFormatter() {
+  const localizer = useLocalizer();
+
+  return {
+    size: (value: number) => {
+      if (value < 1024) {
+        return localizer.size.bytes(value);
+      } else if (value < 1024 * 1024) {
+        return localizer.size.kb(value / 1024);
+      } else {
+        return localizer.size.mb(value / 1024 / 1024);
+      }
+    },
+  };
+}

package/dist/esm/types/core/api/accountApi.d.ts

@@ -1,5 +0,0 @@
-import { BaseApiEndpointBuilder } from './baseApi';
-import { Account } from '../types';
-export declare function accountEndpoints(builder: BaseApiEndpointBuilder): {
-    getAccountList: import("@reduxjs/toolkit/query").QueryDefinition<void, import("@reduxjs/toolkit/query").BaseQueryFn, "chat" | "account" | "message" | "thread" | "thread-message", Account[], "chatify">;
-};

package/dist/esm/types/core/api/chatApi.d.ts

@@ -1,16 +0,0 @@
-import { BaseApiEndpointBuilder } from './baseApi';
-import { Chat } from '../types';
-export declare function chatEndpoints(builder: BaseApiEndpointBuilder): {};
-export declare const __chatApi: import("@reduxjs/toolkit/query").Api<import("@reduxjs/toolkit/query").BaseQueryFn, {
-    getChat: import("@reduxjs/toolkit/query").QueryDefinition<{
-        id: string;
-    }, import("@reduxjs/toolkit/query").BaseQueryFn, "chat" | "account" | "message" | "thread" | "thread-message", Chat, "chatify">;
-    addChat: import("@reduxjs/toolkit/query").MutationDefinition<{
-        name: string;
-        members: string[];
-    }, import("@reduxjs/toolkit/query").BaseQueryFn, "chat" | "account" | "message" | "thread" | "thread-message", string, "chatify">;
-    updateChatName: import("@reduxjs/toolkit/query").MutationDefinition<{
-        id: string;
-        name: string;
-    }, import("@reduxjs/toolkit/query").BaseQueryFn, "chat" | "account" | "message" | "thread" | "thread-message", void, "chatify">;
-}, "chatify", "chat" | "account" | "message" | "thread" | "thread-message", typeof import("@reduxjs/toolkit/query").coreModuleName | typeof import("@reduxjs/toolkit/dist/query/react").reactHooksModuleName>;

package/dist/esm/types/core/api/chatListApi.d.ts

@@ -1,5 +0,0 @@
-import { BaseApiEndpointBuilder } from './baseApi';
-import { ChatListItem } from '../types';
-export declare function chatListEndpoints(builder: BaseApiEndpointBuilder): {
-    getChatList: import("@reduxjs/toolkit/query").QueryDefinition<void, import("@reduxjs/toolkit/query").BaseQueryFn, "chat" | "account" | "message" | "thread" | "thread-message", ChatListItem[], "chatify">;
-};

package/dist/esm/types/core/api/chatMemberApi.d.ts

@@ -1,6 +0,0 @@
-import { AddChatMemberRequest, RemoveChatMemberRequest } from '../types';
-import { BaseApiEndpointBuilder } from './baseApi';
-export declare function chatMemberEndpoints(builder: BaseApiEndpointBuilder): {
-    removeChatMember: import("@reduxjs/toolkit/query").MutationDefinition<RemoveChatMemberRequest, import("@reduxjs/toolkit/query").BaseQueryFn, "chat" | "account" | "message" | "thread" | "thread-message", void, "chatify">;
-    addChatMember: import("@reduxjs/toolkit/query").MutationDefinition<AddChatMemberRequest, import("@reduxjs/toolkit/query").BaseQueryFn, "chat" | "account" | "message" | "thread" | "thread-message", void, "chatify">;
-};

package/dist/esm/types/core/api/chatMessageApi.d.ts

@@ -1,3 +0,0 @@
-import { BaseApiEndpointBuilder } from './baseApi';
-export declare function chatMessageEndpoints(builder: BaseApiEndpointBuilder): {};
-export declare const __chatMessageApi: import("@reduxjs/toolkit/query").Api<import("@reduxjs/toolkit/query").BaseQueryFn, {}, "chatify", "chat" | "account" | "message" | "thread" | "thread-message", typeof import("@reduxjs/toolkit/query").coreModuleName | typeof import("@reduxjs/toolkit/dist/query/react").reactHooksModuleName>;

package/dist/esm/types/core/api/threadApi.d.ts

@@ -1 +0,0 @@
-export declare const __threadApi: import("@reduxjs/toolkit/query").Api<import("@reduxjs/toolkit/query").BaseQueryFn, {}, "chatify", "chat" | "account" | "message" | "thread" | "thread-message", typeof import("@reduxjs/toolkit/query").coreModuleName | typeof import("@reduxjs/toolkit/dist/query/react").reactHooksModuleName>;

package/dist/esm/types/core/api/threadMessageApi.d.ts

@@ -1,6 +0,0 @@
-import { ThreadMessage } from '../types';
-export interface ThreadMessageList {
-    messages: ThreadMessage[];
-    hasMore: boolean;
-}
-export declare const __threadMessageApi: import("@reduxjs/toolkit/query").Api<import("@reduxjs/toolkit/query").BaseQueryFn, {}, "chatify", "chat" | "account" | "message" | "thread" | "thread-message", typeof import("@reduxjs/toolkit/query").coreModuleName | typeof import("@reduxjs/toolkit/dist/query/react").reactHooksModuleName>;

package/src/core/api/accountApi.ts

@@ -1,11 +0,0 @@
-import { BaseApiEndpointBuilder, __settings } from './baseApi';
-import { Account } from '../types';
-
-export function accountEndpoints(builder: BaseApiEndpointBuilder) {
-  return {
-    getAccountList: builder.query<Account[], void>({
-      queryFn: async () => ({ data: await __settings.client.accounts() }),
-      providesTags: ['account'],
-    }),
-  };
-}

package/src/core/api/chatApi.ts

@@ -1,87 +0,0 @@
-import { BaseApiEndpointBuilder, __baseApi, __settings } from './baseApi';
-import { unsubscribe } from '../client';
-import { Chat } from '../types';
-
-export function chatEndpoints(builder: BaseApiEndpointBuilder) {
-  return {};
-}
-
-const chatApi = __baseApi.injectEndpoints({
-  endpoints: (builder) => ({
-    getChat: builder.query<Chat, { id: string }>({
-      queryFn: async ({ id }) => ({ data: await __settings.client.chat(id) }),
-      providesTags: ['chat', 'account'],
-      onCacheEntryAdded: async ({ id }, { cacheEntryRemoved, cacheDataLoaded, updateCachedData }) => {
-        await cacheDataLoaded;
-
-        unsubscribe(
-          __settings.client.subscribe(
-            'chatify://chat-member-added',
-            ([chatId, _, account, message, , read]) =>
-              chatId === id &&
-              updateCachedData((chat) => {
-                chat.members.push(account);
-                chat.lastReadMessageId = read ? message.id : chat.lastReadMessageId;
-              }),
-          ),
-          __settings.client.subscribe(
-            'chatify://chat-member-removed',
-            ([chatId, accountId, , message, read]) =>
-              id === chatId &&
-              updateCachedData((chat) => {
-                chat.members = chat.members.filter((x) => x.id !== accountId);
-                chat.lastReadMessageId = read ? message.id : chat.lastReadMessageId;
-              }),
-          ),
-          __settings.client.subscribe(
-            'chatify://chat-name-changed',
-            ([chatId, newName, message, read]) =>
-              id === chatId &&
-              updateCachedData((chat) => {
-                chat.name = newName;
-                chat.lastReadMessageId = read ? message.id : chat.lastReadMessageId;
-              }),
-          ),
-          __settings.client.subscribe(
-            'chatify://chat-new-message',
-            ([message]) =>
-              id === message.chatId &&
-              updateCachedData((chat) => {
-                chat.lastReadMessageId =
-                  message.sentBy.id === __settings.me() ? message.id : chat.lastReadMessageId;
-              }),
-          ),
-          __settings.client.subscribe(
-            'chatify://chat-message-read',
-            ([events]) =>
-              events.find((x) => x.chatId === id) &&
-              updateCachedData((chat) => {
-                const event = events.find((x) => x.chatId === id)!;
-                chat.lastReadMessageId = event.newLastReadMessageId;
-              }),
-          ),
-        ).when(cacheEntryRemoved);
-      },
-    }),
-
-    addChat: builder.mutation<string, { name: string; members: string[] }>({
-      queryFn: async ({ name, members }) => {
-        const chatId = await __settings.client.addChat({
-          name,
-          members,
-          requestId: new Date().getTime().toString(),
-        });
-        return { data: chatId };
-      },
-    }),
-
-    updateChatName: builder.mutation<void, { id: string; name: string }>({
-      queryFn: async ({ id, name }) => {
-        await __settings.client.updateChatName({ id, name });
-        return { data: null! };
-      },
-    }),
-  }),
-});
-
-export const __chatApi = chatApi;