@webinex/chatify 1.0.0-alpha00

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@webinex/chatify",
+  "description": "Webinex Wispo",
+  "private": false,
+  "version": "1.0.0-alpha00",
+  "author": "Webinex Dev",
+  "license": "Apache-2.0",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "targets": {
+    "demo": {
+      "source": "./example/index.html",
+      "isLibrary": false
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "rimraf dist && rimraf add && rollup -c --environment ENV:production --failAfterWarnings",
+    "start": "rollup -c -w",
+    "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
+    "prettier:write": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
+    "prettier:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
+    "parcel": "parcel --target demo --dist-dir ./dist/demo",
+    "parcel:build": "rimraf ../Webinex.Chatify.Example/wwwroot && cross-env NODE_ENV=production parcel build --target demo --dist-dir ../Webinex.Chatify.Example/wwwroot"
+  },
+  "devDependencies": {
+    "@microsoft/signalr": "^8.0.0",
+    "@parcel/transformer-sass": "2.9.2",
+    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-eslint": "^9.0.3",
+    "@rollup/plugin-image": "^3.0.2",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-typescript": "^11.1.0",
+    "@types/react": "^18.0.33",
+    "@types/react-dom": "^18.0.11",
+    "antd": "^5.11.5",
+    "axios": "^1.6.2",
+    "buffer": "^5.5.0||^6.0.0",
+    "classnames": "^2.3.2",
+    "cross-env": "^7.0.3",
+    "dayjs": "^1.11.7",
+    "eslint": "^8.38.0",
+    "eslint-config-react-app": "^7.0.1",
+    "is-hotkey": "^0.2.0",
+    "parcel": "^2.10.3",
+    "postcss": "^8.4.21",
+    "prettier": "^2.8.7",
+    "process": "^0.11.10",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^5.0.5",
+    "rollup": "^3.20.2",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-dts": "^5.3.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-scss": "^4.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-visualizer": "^5.11.0",
+    "sass": "^1.66.1",
+    "shallow-equal": "^3.1.0",
+    "slate": "^0.94.1",
+    "slate-history": "^0.93.0",
+    "slate-react": "^0.98.3",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "@ant-design/icons": "^5.2.6",
+    "@ctrl/tinycolor": "^4.0.2",
+    "@microsoft/signalr": "^8.0.0",
+    "antd": ">=5",
+    "axios": ">=1",
+    "classnames": ">=2",
+    "dayjs": ">=1.8",
+    "is-hotkey": ">=0",
+    "react": ">=16",
+    "react-dom": ">=16",
+    "shallow-equal": ">=3",
+    "slate": "^0.94.1",
+    "slate-history": "^0.93.0",
+    "slate-react": "^0.98.3"
+  },
+  "dependencies": {}
+}

package/src/ChatifyContext.tsx

@@ -0,0 +1,26 @@
+import React, { PropsWithChildren, useContext } from 'react';
+import { ChatifyClient } from './core';
+
+const MeContext = React.createContext<string>(null!);
+const ClientContext = React.createContext<ChatifyClient>(null!);
+
+export function useClient() {
+  return useContext(ClientContext);
+}
+
+export function useMe() {
+  return useContext(MeContext);
+}
+
+export interface ChatifyContextValue {
+  me: string;
+  client: ChatifyClient;
+}
+
+export function ChatifyContext({ value, children }: PropsWithChildren<{ value: ChatifyContextValue }>) {
+  return (
+    <ClientContext.Provider value={value.client}>
+      <MeContext.Provider value={value.me}>{children}</MeContext.Provider>
+    </ClientContext.Provider>
+  );
+}

package/src/core/action.tsx

@@ -0,0 +1,282 @@
+import type { MutationState, QueryState, State } from './state';
+import { Account, ChatListItem, Message, ReadEvent } from './models';
+import { MessageState } from './useMessages';
+
+function updateQuery<TData>(
+  state: State,
+  key: string,
+  mutation: (queryState: QueryState<TData> | undefined) => QueryState<TData> | undefined,
+) {
+  state = {
+    ...state,
+    query: {
+      ...state.query,
+    },
+  };
+
+  const result = mutation(state.query[key]);
+  if (result) {
+    state.query[key] = result;
+  }
+  return state;
+}
+
+function updateMutation(
+  state: State,
+  key: string,
+  mutation: (mutationState: MutationState | undefined) => MutationState | undefined,
+) {
+  state = {
+    ...state,
+    mutation: {
+      ...state.mutation,
+    },
+  };
+
+  const result = mutation(state.mutation[key]);
+  if (result) {
+    state.mutation[key] = result;
+  }
+  return state;
+}
+
+export const ACTIONS = {
+  query_fetch: (state: State, { key }: { key: string }): State => {
+    return updateQuery(state, key, (x) => ({ ...x, isFetching: true, uninitialized: false }));
+  },
+
+  query_resolve: (state: State, { key, data }: { key: string; data: any[] }): State => {
+    return updateQuery(state, key, (x) => ({ ...x!, isFetching: false, error: undefined, data }));
+  },
+
+  query_reject: (state: State, { key, error }: { key: string; error: any }): State => {
+    return updateQuery(state, key, (x) => ({ ...x!, isFetching: false, error }));
+  },
+
+  mutation_fetch: (state: State, { key }: { key: string }): State => {
+    return updateMutation(state, key, (x) => ({ ...x, isFetching: true }));
+  },
+
+  mutation_resolve: (state: State, { key }: { key: string }): State => {
+    return updateMutation(state, key, (x) => ({ ...x, isFetching: false, error: undefined }));
+  },
+
+  mutation_reject: (state: State, { key, error }: { key: string; error: any }): State => {
+    return updateMutation(state, key, (x) => ({ ...x, isFetching: false, error }));
+  },
+
+  update: (state: State, { mutation }: { mutation: (state: State) => State }): State => {
+    return mutation(state);
+  },
+
+  chat_open: (state: State, { chatId }: { chatId: string }): State => {
+    return { ...state, ui: { ...state.ui, view: 'chat', chatId } };
+  },
+
+  new_chat_open: (state: State): State => {
+    return { ...state, ui: { ...state.ui, view: 'new-chat', chatId: undefined } };
+  },
+
+  chat_settings_open: (state: State, { chatId }: { chatId: string }): State => {
+    return { ...state, ui: { ...state.ui, view: 'chat-settings', chatId } };
+  },
+
+  message_received: (
+    state: State,
+    { message, requestId }: { message: Message; requestId: string },
+  ): State => {
+    if (state.query['messages.' + message.chatId]?.data !== undefined) {
+      state = {
+        ...state,
+        query: {
+          ...state.query,
+          ['messages.' + message.chatId]: {
+            ...state.query['messages.' + message.chatId],
+            data: [{ type: 'message', ...message }, ...state.query['messages.' + message.chatId].data].filter(
+              (x: MessageState) => x.type !== 'sending' || x.requestId !== requestId,
+            ),
+          },
+        },
+      };
+    }
+
+    if (state.query['chat-list'].data !== undefined) {
+      state = {
+        ...state,
+        query: {
+          ...state.query,
+          'chat-list': {
+            ...state.query['chat-list'],
+            data: state.query['chat-list'].data.map((x: ChatListItem) =>
+              x.id === message.chatId
+                ? { ...x, message, unreadCount: message.read ? x.unreadCount : x.unreadCount + 1 }
+                : x,
+            ),
+          },
+        },
+      };
+    }
+
+    return state;
+  },
+
+  chat_created: (state: State, { chat }: { chat: ChatListItem; requestId?: string }): State => {
+    if (state.query['chat-list']?.data === undefined) {
+      return state;
+    }
+
+    return {
+      ...state,
+      query: {
+        ...state.query,
+        'chat-list': {
+          ...state.query['chat-list'],
+          data: [chat, ...state.query['chat-list'].data!],
+        },
+      },
+    };
+  },
+
+  read: (state: State, { id, timestamp }: { id: string; timestamp: number }): State => {
+    return {
+      ...state,
+      read: {
+        ...state.read,
+        queued: [...state.read.queued, id],
+        timestamp,
+      },
+    };
+  },
+
+  read_send: (state: State, { ids }: { ids: string[] }): State => {
+    return {
+      ...state,
+      read: {
+        ...state.read,
+        queued: state.read.queued.filter((x) => !ids.includes(x)),
+        sent: [...state.read.sent, ...ids],
+      },
+    };
+  },
+
+  read_reject: (state: State, { ids, timestamp }: { ids: string[]; timestamp: number }): State => {
+    return {
+      ...state,
+      read: {
+        ...state.read,
+        queued: [...state.read.queued, ...ids],
+        sent: state.read.sent.filter((x) => !ids.includes(x)),
+        timestamp,
+      },
+    };
+  },
+
+  read_received: (state: State, { events }: { events: ReadEvent[] }): State => {
+    const ids = events.map((x) => x.messageId);
+
+    state = {
+      ...state,
+      query: {
+        ...state.query,
+      },
+      read: {
+        ...state.read,
+        sent: state.read.sent.filter((x) => !ids.includes(x)),
+      },
+    };
+
+    Object.keys(state.query)
+      .filter((x) => x.startsWith('messages.'))
+      .forEach((key) => {
+        state.query[key] = { ...state.query[key] };
+        const queryState: QueryState<MessageState[]> = state.query[key];
+
+        queryState.data = queryState.data?.map((x) => {
+          if (x.type === 'message' && ids.includes(x.id)) {
+            return { ...x, read: true };
+          }
+
+          return x;
+        });
+      });
+
+    state.query['chat-list'] = { ...state.query['chat-list'] };
+    const chatListState: QueryState<ChatListItem[]> = state.query['chat-list'];
+    chatListState.data = chatListState.data?.map((x) =>
+      ids.includes(x.message.id) ? { ...x, message: { ...x.message, read: true } } : x,
+    );
+
+    chatListState.data = chatListState.data?.map((chat) => ({
+      ...chat,
+      unreadCount: chat.unreadCount - events.filter((x) => x.chatId === chat.id).length,
+    }));
+
+    return state;
+  },
+
+  member_added: (state: State, { chatId, account }: { chatId: string; account: Account }): State => {
+    state = {
+      ...state,
+      query: {
+        ...state.query,
+      },
+    };
+
+    if (state.query['chat.' + chatId]?.data !== undefined) {
+      state.query['chat.' + chatId] = {
+        ...state.query['chat.' + chatId],
+        data: { ...state.query['chat.' + chatId].data },
+      };
+      state.query['chat.' + chatId].data.members = [...state.query['chat.' + chatId].data.members, account];
+    }
+
+    return state;
+  },
+
+  member_removed: (
+    state: State,
+    {
+      chatId,
+      accountId,
+      deleteHistory,
+      me,
+    }: { chatId: string; accountId: string; deleteHistory: boolean; me: string },
+  ): State => {
+    state = {
+      ...state,
+      query: {
+        ...state.query,
+      },
+    };
+
+    if (state.query['chat.' + chatId]?.data !== undefined) {
+      state.query['chat.' + chatId] = {
+        ...state.query['chat.' + chatId],
+        data: { ...state.query['chat.' + chatId].data },
+      };
+      state.query['chat.' + chatId].data.members = state.query['chat.' + chatId].data.members.filter(
+        (x: Account) => x.id !== accountId,
+      );
+    }
+
+    if (accountId === me && deleteHistory && state.query['chat-list']?.data) {
+      state.query['chat-list'] = { ...state.query['chat-list'] };
+      state.query['chat-list'].data = state.query['chat-list'].data.filter(
+        (x: ChatListItem) => x.id !== chatId,
+      );
+    }
+
+    if (accountId === me && deleteHistory && state.query['chat-list']?.data && state.ui.chatId === chatId) {
+      state.ui = { ...state.ui, chatId: state.query['chat-list']?.data.at(0)?.id };
+    }
+
+    return state;
+  },
+};
+
+export type Action = {
+  [K in keyof typeof ACTIONS]: {
+    type: K;
+    data: Parameters<(typeof ACTIONS)[K]>[1];
+  };
+}[keyof typeof ACTIONS];

package/src/core/client.ts

@@ -0,0 +1,137 @@
+import { AxiosInstance } from 'axios';
+import * as SignalR from '@microsoft/signalr';
+import {
+  Account,
+  AddChatRequest,
+  AddMemberRequest,
+  Chat,
+  ChatListItem,
+  Message,
+  ReadRequest,
+  RemoveMemberRequest,
+  SendMessageRequest,
+} from './models';
+
+export interface ChatifySignalRConfig {
+  hubUri?: string;
+  accessTokenFactory?: () => Promise<string>;
+  headersFactory?: () => Promise<Record<string, string>>;
+}
+
+const DEFAULT_SIGNALR_CONFIG: ChatifySignalRConfig = {
+  hubUri: '/api/chatify/hub',
+  headersFactory: () => Promise.resolve({}),
+};
+
+export interface ChatifyClientConfig {
+  axios: AxiosInstance;
+  signalR: ChatifySignalRConfig;
+}
+
+const METHODS = [
+  'chatify://new-message',
+  'chatify://chat-created',
+  'chatify://read',
+  'chatify://member-added',
+  'chatify://member-removed',
+] as const;
+
+export class ChatifyClient {
+  private _config: ChatifyClientConfig;
+  private _connection: SignalR.HubConnection = null!;
+  private _subscribers: Record<string, ((args: any[]) => void)[]> = {};
+  private _reconnectSubscribers: Array<() => void> = [];
+
+  constructor(config: ChatifyClientConfig) {
+    this._config = {
+      ...config,
+      signalR: {
+        ...DEFAULT_SIGNALR_CONFIG,
+        ...config.signalR,
+      },
+    };
+  }
+
+  public connect = async () => {
+    const headers = await this._config.signalR!.headersFactory!();
+
+    this._connection = new SignalR.HubConnectionBuilder()
+      .withUrl(this._config.signalR!.hubUri!, {
+        accessTokenFactory: this._config.signalR!.accessTokenFactory
+          ? this._config.signalR!.accessTokenFactory
+          : undefined,
+        headers,
+      })
+      .withAutomaticReconnect()
+      .build();
+
+    METHODS.forEach((x) => {
+      this._connection.on(x, (...args) => {
+        this._subscribers[x]?.forEach((s) => s(args));
+      });
+    });
+
+    this._connection.onreconnected(() => this._reconnectSubscribers.forEach((subscriber) => subscriber()));
+
+    await this._connection.start();
+  };
+
+  public subscribe = <T extends any[]>(method: string, subscriber: (args: T) => void) => {
+    this._subscribers[method] = this._subscribers[method] ?? [];
+    this._subscribers[method].push(subscriber as any);
+    return () => this._subscribers[method].filter((x) => x !== subscriber);
+  };
+
+  public subscribeReconnect = (subscriber: () => any) => {
+    this._reconnectSubscribers.push(subscriber);
+    return () => this._reconnectSubscribers.filter((x) => x !== subscriber);
+  };
+
+  private get axios() {
+    return this._config.axios;
+  }
+
+  public accounts = async () => {
+    const { data } = await this.axios.get<Account[]>('account');
+    return data;
+  };
+
+  public chats = async () => {
+    const { data } = await this.axios.get<ChatListItem[]>('chat');
+    return data;
+  };
+
+  public chat = async (id: string) => {
+    const { data } = await this.axios.get<Chat>(`chat/${id}`);
+    return data;
+  };
+
+  public addChat = async (args: AddChatRequest) => {
+    const { data } = await this.axios.post<string>(`chat`, args);
+    return data;
+  };
+
+  public messages = async (args: { chatId: string; skip?: number; take?: number }) => {
+    const { chatId, skip = 0, take = 20 } = args;
+    const pagingRule = encodeURIComponent(JSON.stringify({ skip, take }));
+    const { data } = await this.axios.get<Message[]>(`chat/${chatId}/message?pagingRule=${pagingRule}`);
+    return data;
+  };
+
+  public send = async (request: SendMessageRequest) => {
+    const { chatId, ...rest } = request;
+    await this.axios.post(`chat/${chatId}/message`, rest);
+  };
+
+  public read = async (request: ReadRequest) => {
+    await this.axios.put(`chat/message/read`, request);
+  };
+
+  public removeMember = async (request: RemoveMemberRequest) => {
+    await this.axios.delete(`chat/${request.chatId}/member`, { data: request });
+  };
+
+  public addMember = async (request: AddMemberRequest) => {
+    await this.axios.post(`chat/${request.chatId}/member`, request);
+  };
+}

package/src/core/index.ts

@@ -0,0 +1,14 @@
+export * from './models';
+export * from './client';
+export * from './action';
+export * from './reducer';
+export * from './useChat';
+export * from './useChatList';
+export * from './useLoadMore';
+export * from './useMessages';
+export * from './useSignalR';
+export * from './useAccounts';
+export * from './useAddChat';
+export * from './useReadMonitor';
+export * from './useAddMember';
+export * from './useRemoveMember';

package/src/core/models.tsx

@@ -0,0 +1,75 @@
+export interface File {
+  name: string;
+  bytes: number;
+  ref: string;
+}
+
+export interface Account {
+  id: string;
+  name: string;
+  avatar: string;
+}
+
+export interface Message {
+  id: string;
+  chatId: string;
+  text: string;
+  files: File[];
+  sentAt: string;
+  sentBy: Account;
+  read: boolean;
+  requestId?: string;
+}
+
+export interface Chat {
+  id: string;
+  name: string;
+  members: Account[];
+}
+
+export interface ChatListItem {
+  id: string;
+  name: string;
+  message: Message;
+  unreadCount: number;
+}
+
+export interface SendMessageRequest {
+  chatId: string;
+  text: string;
+  files: File[];
+  requestId: string;
+}
+
+export interface MessageContent {
+  text: string;
+  files: File[];
+}
+
+export interface AddChatRequest {
+  requestId: string;
+  name: string;
+  message?: MessageContent;
+  members: string[];
+}
+
+export interface ReadRequest {
+  ids: string[];
+}
+
+export interface ReadEvent {
+  messageId: string;
+  chatId: string;
+}
+
+export interface RemoveMemberRequest {
+  chatId: string;
+  accountId: string;
+  deleteHistory: boolean;
+}
+
+export interface AddMemberRequest {
+  chatId: string;
+  accountId: string;
+  withHistory: boolean;
+}

package/src/core/reducer.tsx

@@ -0,0 +1,80 @@
+import React, { PropsWithChildren, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { ACTIONS, Action } from './action';
+import { INITIAL_STATE, State } from './state';
+import { shallowEqual } from 'shallow-equal';
+
+function reducer(state: State, action: Action) {
+  const result = ACTIONS[action.type](state, action.data as any);
+  console.debug('[Chatify]: ', action, result);
+  return result;
+}
+
+export type Reducer = ReturnType<typeof useReducer>;
+
+type Subscriber = (state: State) => void;
+
+export function useReducer() {
+  const state = useRef(INITIAL_STATE);
+  const subscribers = useRef<Subscriber[]>([]);
+
+  const dispatch = useCallback((action: Action) => {
+    const newState = reducer(state.current, action);
+    if (shallowEqual(state.current, newState)) {
+      return;
+    }
+
+    state.current = newState;
+    subscribers.current.forEach((s) => s(newState));
+  }, []);
+
+  const subscribe = useCallback((subscriber: Subscriber) => {
+    subscribers.current.push(subscriber);
+    return () => {
+      subscribers.current = subscribers.current.filter((x) => x !== subscriber);
+    };
+  }, []);
+
+  return [state, dispatch, subscribe] as const;
+}
+
+const ReducerContext = React.createContext<Reducer>(null!);
+export function ReducerProvider({ children }: PropsWithChildren<{}>) {
+  const reducer = useReducer();
+  return <ReducerContext.Provider value={reducer}>{children}</ReducerContext.Provider>;
+}
+
+export function useDispatch() {
+  return useContext(ReducerContext)[1];
+}
+
+export function useStateRef() {
+  const [reducerState] = useContext(ReducerContext);
+  return reducerState;
+}
+
+export function useSelect<TResult>(
+  select: (state: State) => TResult,
+
+  // TODO: make deps work
+  deps: any[],
+): TResult {
+  const [reducerState, , subscribe] = useContext(ReducerContext);
+  const prev = useRef(select(reducerState.current));
+  const [state, setState] = useState(prev.current);
+
+  useEffect(() => {
+    return subscribe((state) => {
+      const newValue = select(state);
+      if (shallowEqual<any>(newValue, prev.current)) {
+        return;
+      }
+
+      prev.current = newValue;
+      setState(newValue);
+    });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return state;
+}