@webinex/chatify 2.0.0-alpha8 → 2.0.0-alpha9

package/package.json

@@ -2,14 +2,21 @@
   "name": "@webinex/chatify",
   "description": "Webinex Chatify",
   "private": false,
-  "version": "2.0.0-alpha8",
+  "version": "2.0.0-alpha9",
   "author": "Webinex Dev",
   "license": "Apache-2.0",
-  "main": "src/index.ts",
-  "targets": {
-    "demo": {
-      "source": "./example/index.html",
-      "isLibrary": false
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./audit": {
+      "import": "./dist/audit.js",
+      "types": "./dist/types/audit/index.d.ts"
     }
   },
   "files": [
@@ -17,28 +24,19 @@
     "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",
-    "build:types": "dts-bundle-generator --project tsconfig.json --out dist/index.d.ts"
+    "dev": "vite",
+    "watch": "vite build --watch",
+    "build": "tsc -b && vite build"
   },
   "devDependencies": {
     "@microsoft/signalr": "^8.0.0",
-    "@parcel/transformer-sass": "2.9.2",
-    "@reduxjs/toolkit": "^2.2.7",
-    "@rollup/plugin-alias": "^5.1.0",
-    "@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",
+    "@reduxjs/toolkit": "^2.6.0",
     "@types/is-hotkey": "^0.1.10",
+    "@types/node": "^24.10.1",
     "@types/react": "^18.0.33",
     "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^4.3.3",
+    "@webinex/asky": "^1.1.0",
     "@webinex/flippo": "^1.0.0",
     "antd": "^5.19.0",
     "axios": "^1.6.2",
@@ -46,49 +44,38 @@
     "classnames": "^2.3.2",
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.7",
-    "dts-bundle-generator": "^9.5.1",
     "eslint": "^8.38.0",
-    "eslint-config-react-app": "^7.0.1",
-    "immer": "^10.0.3",
     "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",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.23.1",
     "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-tsconfig-paths": "^1.5.2",
-    "rollup-plugin-typescript-paths": "^1.5.0",
-    "rollup-plugin-visualizer": "^5.11.0",
-    "rollup-plugin-watch-globs": "^2.0.1",
-    "sass": "^1.66.1",
+    "sass-embedded": "^1.82.0",
     "shallow-equal": "^3.1.0",
     "tslib": "^2.6.2",
-    "typescript": "^5.2.2"
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.10.0",
+    "vite": "^5.4.9",
+    "vite-plugin-dts": "^4.3.0",
+    "vite-plugin-lib-inject-css": "^2.1.1"
   },
   "peerDependencies": {
-    "@ant-design/icons": ">=5",
-    "@microsoft/signalr": ">=8",
-    "@reduxjs/toolkit": ">=2",
-    "@webinex/flippo": ">=1",
-    "antd": ">=5",
-    "axios": ">=1",
-    "classnames": ">=2",
-    "dayjs": ">=1.8",
-    "immer": ">=8",
-    "is-hotkey": ">=0",
-    "react": ">=16",
-    "react-dom": ">=16",
-    "shallow-equal": ">=3"
+    "@ant-design/icons": "^5",
+    "@microsoft/signalr": "^8",
+    "@reduxjs/toolkit": "^2.6.0",
+    "@webinex/asky": "^1.1.0",
+    "@webinex/flippo": "^1",
+    "antd": "^5",
+    "axios": "^1",
+    "classnames": "^2",
+    "dayjs": "^1.8",
+    "is-hotkey": ">=0 <1",
+    "react": ">=16 <=19",
+    "react-dom": ">=16 <=19",
+    "shallow-equal": "^3"
   }
 }

package/src/audit/AuditChatList.tsx

@@ -0,0 +1,25 @@
+import { ChatList, customize } from '@webinex/chatify';
+import { Empty, Skeleton } from 'antd';
+import { AuditChatListItem } from './auditApi';
+
+export interface AuditChatListProps {
+  items: AuditChatListItem[];
+  loading: boolean;
+  selected: string | null;
+  onSelect: (id: string) => void;
+  top?: number;
+}
+
+export const AuditChatList = customize('AuditChatList', (props: AuditChatListProps) => {
+  const { items, selected, onSelect, loading, top } = props;
+
+  if (loading) {
+    return <Skeleton />;
+  }
+
+  if (items.length === 0) {
+    return <Empty />;
+  }
+
+  return <ChatList items={items} selected={selected} onSelect={onSelect} noRead top={top} />;
+});

package/src/audit/AuditConversationPanel.tsx

@@ -0,0 +1,48 @@
+import { Conversation, customize } from '@webinex/chatify';
+import { auditApi } from './auditApi';
+import { useMemo } from 'react';
+
+export interface AuditConversationPanelProps {
+  id: string;
+  onClose?: () => void;
+
+  /**
+   * Number of messages to load per page.
+   * @default 20
+   */
+  pageSize?: number;
+}
+
+export const AuditConversationPanel = customize(
+  'AuditConversationPanel',
+  (props: AuditConversationPanelProps) => {
+    const { id, onClose, pageSize = 20 } = props;
+    const { data: chat } = auditApi.useGetAuditChatQuery({ id });
+
+    const {
+      data: messageSegments,
+      isFetchingNextPage,
+      fetchNextPage,
+      hasNextPage,
+    } = auditApi.useGetAuditChatMessagesInfiniteInfiniteQuery(
+      { id },
+      { initialPageParam: { skip: 0, take: pageSize } },
+    );
+
+    const messages = useMemo(() => messageSegments?.pages.flatMap((x) => x.items) ?? [], [messageSegments]);
+
+    if (!chat) return null;
+
+    return (
+      <Conversation
+        value={{ active: false, id, lastReadMessageId: null, name: chat.name }}
+        nextLoading={isFetchingNextPage}
+        onNext={fetchNextPage}
+        hasMore={!isFetchingNextPage && hasNextPage}
+        messages={messages}
+        noReadTracking
+        onClose={onClose}
+      />
+    );
+  },
+);

package/src/audit/AuditPanel.tsx

@@ -0,0 +1,76 @@
+import classNames from 'classnames';
+import { AuditSearch } from './AuditSearch';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { AuditSearchUtil } from './AuditSearchValue';
+import { auditApi } from './auditApi';
+import { AuditChatList } from './AuditChatList';
+import { CustomizeContext, defaultLocalizer, Localizer, LocalizerContext } from '@webinex/chatify';
+import { AuditConversationPanel } from './AuditConversationPanel';
+import { AuditPanelCustomizeValue } from './AuditPanelCustomizeValue';
+
+export interface AuditPanelProps {
+  className?: string;
+  style?: React.CSSProperties;
+  localizer?: Localizer;
+  customize?: AuditPanelCustomizeValue;
+
+  /**
+   * Maximum number of chats to load.
+   * @default 100
+   */
+  max?: number;
+}
+
+function useData(props: AuditPanelProps, values: string[]) {
+  const { max } = props;
+  const query = useMemo(() => AuditSearchUtil.queryOf(values), [values]);
+
+  const { currentData: chats, isLoading } = auditApi.useGetAuditChatListQuery(
+    {
+      ...query!,
+      pagingRule: { skip: 0, take: max! },
+      includeTotal: true,
+    },
+    { skip: !query },
+  );
+
+  return useMemo(() => ({ chats: chats?.items ?? [], isLoading }), [chats, isLoading]);
+}
+
+const EMPTY = Object.freeze({} as AuditPanelCustomizeValue);
+
+export function AuditPanel(props: AuditPanelProps) {
+  props = { max: 100, customize: EMPTY, ...props };
+  const { className, style, localizer = defaultLocalizer, customize = EMPTY, max } = props;
+  const [values, setValues] = useState<string[]>([]);
+  const { chats, isLoading } = useData(props, values);
+
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const resetSelected = useCallback(() => setSelectedId(null), []);
+
+  useEffect(() => {
+    if (chats.every((x) => x.id !== selectedId)) {
+      setSelectedId(null);
+    }
+  }, [chats, selectedId]);
+
+  return (
+    <CustomizeContext.Provider value={customize}>
+      <LocalizerContext.Provider value={localizer}>
+        <div className={classNames(className, 'wxchtf-audit-panel')} style={style}>
+          <AuditSearch onSearch={setValues} />
+          <div className={classNames('wxchtf-audit-body', { '--conversation-opened': !!selectedId })}>
+            <AuditChatList
+              items={chats}
+              loading={isLoading}
+              selected={selectedId}
+              onSelect={setSelectedId}
+              top={Math.min(chats.length, max!)}
+            />
+            {selectedId && <AuditConversationPanel id={selectedId} onClose={resetSelected} />}
+          </div>
+        </div>
+      </LocalizerContext.Provider>
+    </CustomizeContext.Provider>
+  );
+}

package/src/audit/AuditPanelCustomizeValue.ts

@@ -0,0 +1,11 @@
+import { ChatListCustomizeValue, ConversationCustomizeValue } from '@webinex/chatify';
+import { AuditConversationPanel } from './AuditConversationPanel';
+import { AuditChatList } from './AuditChatList';
+import { AuditSearch } from './AuditSearch';
+
+export type AuditPanelCustomizeValue = ConversationCustomizeValue &
+  ChatListCustomizeValue & {
+    AuditConversationPanel?: typeof AuditConversationPanel.Component;
+    AuditChatList?: typeof AuditChatList.Component;
+    AuditSearch?: typeof AuditSearch.Component;
+  };

package/src/audit/AuditSearch.tsx

@@ -0,0 +1,89 @@
+import { Account, chatifyApi, customize, Localizer, useLocalizer } from '@webinex/chatify';
+import { Select } from 'antd';
+import classNames from 'classnames';
+import { useEffect, useMemo, useState } from 'react';
+import { AuditSearchUtil } from './AuditSearchValue';
+
+export interface AuditSearchProps {
+  className?: string;
+  onSearch?: (values: string[]) => void;
+}
+
+type Value = { label: JSX.Element; value: string };
+
+function* mapOptions(localizer: Localizer, accounts: Account[] | undefined, searchValue: string) {
+  if (searchValue.length === 0) return;
+
+  if (searchValue.length > 0)
+    yield {
+      label: localizer.audit.textSearchOption(searchValue),
+      value: AuditSearchUtil.TEXT_PREFIX + searchValue,
+    };
+
+  for (const account of accounts?.filter((x) =>
+    x.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()),
+  ) ?? []) {
+    yield {
+      label: localizer.audit.memberSearchOption(account),
+      value: AuditSearchUtil.MEMBER_PREFIX + account.id,
+    };
+  }
+}
+
+function useOptions(accounts: Account[] | undefined, searchValue: string) {
+  const localizer = useLocalizer();
+  return useMemo(
+    () => Array.from(mapOptions(localizer, accounts, searchValue)),
+    [localizer, accounts, searchValue],
+  );
+}
+
+export const AuditSearch = customize('AuditSearch', (props: AuditSearchProps) => {
+  const { className, onSearch } = props;
+  const [searchValue, setSearchValue] = useState('');
+  const [values, setValues] = useState<Value[]>([]);
+  const { data: accounts, isLoading } = chatifyApi.useGetAccountListQuery();
+  const options = useOptions(accounts, searchValue);
+  const localizer = useLocalizer();
+
+  useEffect(() => {
+    onSearch?.(values.map((x) => x.value));
+  }, [onSearch, values]);
+
+  return (
+    <div className={classNames('wxchtf-search', className)}>
+      <Select<string[], Value>
+        allowClear
+        className="wxchtf-search-select"
+        mode="multiple"
+        value={values.map((x) => x.value)}
+        options={options.length > 0 ? options : values}
+        searchValue={searchValue}
+        onSearch={setSearchValue}
+        onSelect={(_, option) => {
+          setValues((prev) => {
+            if (AuditSearchUtil.isSearchByText(option.value)) {
+              prev = prev.filter((x) => !AuditSearchUtil.isSearchByText(x.value));
+            }
+
+            return [...prev, option];
+          });
+          setSearchValue('');
+        }}
+        onDeselect={(_, option) => {
+          setValues((prev) => prev.filter((x) => x.value !== option.value));
+          setSearchValue('');
+        }}
+        filterOption={false}
+        onDropdownVisibleChange={() => setSearchValue('')}
+        disabled={isLoading}
+        loading={isLoading}
+        placeholder={localizer.audit.searchPlaceholder}
+        notFoundContent={
+          searchValue.length === 0 ? localizer.audit.noInputBlurb : localizer.audit.noChatFound
+        }
+        size="large"
+      />
+    </div>
+  );
+});

package/src/audit/AuditSearchValue.tsx

@@ -0,0 +1,42 @@
+import { GetAuditChatListQueryArgs } from './auditApi';
+
+export interface AuditSearchOption {
+  label: JSX.Element;
+  value: string;
+}
+
+const MEMBER_PREFIX = 'member://';
+const TEXT_PREFIX = 'text://';
+
+function queryOf(
+  values: string[],
+): Pick<GetAuditChatListQueryArgs, 'containsOneOfMembers' | 'searchString'> | null {
+  let containsOneOfMembers: string[] | null = values
+    .filter(AuditSearchUtil.isSearchByMember)
+    .map((v) => v.slice(MEMBER_PREFIX.length));
+
+  containsOneOfMembers = containsOneOfMembers.length > 0 ? containsOneOfMembers : null;
+
+  const searchStringValues = values
+    .filter(AuditSearchUtil.isSearchByText)
+    .map((v) => v.slice(TEXT_PREFIX.length));
+
+  const searchString = searchStringValues.length > 0 ? searchStringValues.join(' ') : null;
+
+  if (!containsOneOfMembers && !searchString) {
+    return null;
+  }
+
+  return {
+    containsOneOfMembers,
+    searchString,
+  };
+}
+
+export const AuditSearchUtil = Object.freeze({
+  MEMBER_PREFIX,
+  TEXT_PREFIX,
+  isSearchByMember: (value: string) => value.startsWith(MEMBER_PREFIX),
+  isSearchByText: (value: string) => value.startsWith(TEXT_PREFIX),
+  queryOf,
+});

package/src/audit/auditApi.tsx

@@ -0,0 +1,113 @@
+import { PagingRule } from '@webinex/asky';
+import { Account, chatifyApi, File, ListSegment, Optional } from '@webinex/chatify';
+
+export interface GetAuditChatListQueryArgs {
+  containsOneOfMembers: string[] | null;
+  searchString: string | null;
+  pagingRule: PagingRule | null;
+  includeTotal: boolean | null;
+}
+
+export interface AuditChatResponse {
+  id: string;
+  workspaceId: string;
+  name: string;
+  createdAt: string;
+  createdById: string;
+  lastMessage: Optional<AuditChatMessage>;
+}
+
+export interface AuditChatMessage {
+  id: string;
+  authorId: string;
+  sentAt: string;
+  text: string | null;
+  files: File[];
+  sentBy: Account;
+}
+
+export interface AuditChatListItem {
+  id: string;
+  workspaceId: string;
+  name: string;
+  createdAt: string;
+  createdById: string;
+  lastMessage: AuditChatMessage;
+}
+
+export interface AuditChat {
+  id: string;
+  workspaceId: string;
+  name: string;
+  createdAt: string;
+  createdById: string;
+}
+
+function qs(params: Record<string, any>): string {
+  const query = new URLSearchParams();
+  Object.entries(params).forEach(([key, value]) => {
+    if (value !== null && value !== undefined) {
+      query.append(key, typeof value === 'string' ? value : JSON.stringify(value));
+    }
+  });
+
+  return query.toString();
+}
+
+export const auditApi = chatifyApi.injectEndpoints({
+  endpoints: (build) => ({
+    getAuditChatList: build.query<ListSegment<AuditChatListItem>, GetAuditChatListQueryArgs>({
+      queryFn: async (args) =>
+        chatifyApi.settings.client.axios
+          .get<ListSegment<AuditChatResponse>>(`audit/chats?${qs({ query: args })}`)
+          .then(({ data }) => ({
+            data: {
+              total: data.total,
+              items: data.items.map(
+                ({ lastMessage, ...x }): AuditChatListItem => ({ ...x, lastMessage: lastMessage.value! }),
+              ),
+            },
+          }))
+          .catch((error) => ({ error })),
+      providesTags: ['chat', 'message'],
+    }),
+
+    getAuditChat: build.query<AuditChat, { id: string }>({
+      queryFn: async (args) =>
+        chatifyApi.settings.client.axios
+          .get(`audit/chats/${encodeURIComponent(args.id)}`)
+          .then(({ data }) => ({ data }))
+          .catch((error) => ({ error })),
+      providesTags: ['chat'],
+    }),
+
+    getAuditChatMessagesInfinite: build.infiniteQuery<
+      ListSegment<AuditChatMessage>,
+      { id: string },
+      { skip: number; take: number }
+    >({
+      queryFn: async (args) => {
+        const {
+          pageParam,
+          queryArg: { id },
+        } = args;
+
+        return chatifyApi.settings.client.axios
+          .get(`audit/messages?${qs({ query: { chatId: id, pagingRule: pageParam, includeTotal: true } })}`)
+          .then(({ data }) => ({ data }))
+          .catch((error) => ({ error }));
+      },
+      infiniteQueryOptions: {
+        initialPageParam: { skip: 0, take: 20 },
+        getNextPageParam: (lastPage, _, lastPageParam) =>
+          lastPage.total > lastPageParam.skip + lastPageParam.take
+            ? {
+                skip: lastPageParam.skip + lastPageParam.take,
+                take: lastPageParam.take,
+              }
+            : undefined,
+      },
+      providesTags: ['message', 'chat'],
+    }),
+  }),
+});

package/src/audit/index.d.ts

@@ -0,0 +1,18 @@
+import { Account } from '@/core';
+import { AuditPanel } from './AuditPanel';
+
+declare module '@webinex/chatify' {
+  interface ChatifyType {
+    Audit: typeof AuditPanel;
+  }
+
+  interface Localizer {
+    audit: {
+      searchPlaceholder: string;
+      noChatFound: string;
+      noInputBlurb: string;
+      textSearchOption: (searchValue: string) => JSX.Element;
+      memberSearchOption: (account: Account) => JSX.Element;
+    };
+  }
+}

package/src/audit/index.tsx

@@ -0,0 +1,28 @@
+import { Space } from 'antd';
+import { AuditPanel } from './AuditPanel';
+import './index.d';
+import './styles.scss';
+import { Avatar, Chatify, defaultLocalizer } from '@webinex/chatify';
+
+export * from './AuditPanel';
+export * from './AuditPanelCustomizeValue';
+export * from './AuditChatList';
+export * from './AuditSearchValue';
+export * from './AuditSearch';
+export * from './auditApi';
+export * from './AuditConversationPanel';
+
+Chatify.Audit = AuditPanel;
+
+defaultLocalizer.audit = {
+  searchPlaceholder: 'Search chats by chat name or member name',
+  noChatFound: 'No chats found',
+  noInputBlurb: 'Start typing to search',
+  textSearchOption: (text) => <span>{`Chat name includes "${text}"`}</span>,
+  memberSearchOption: (account) => (
+    <Space>
+      <Avatar account={account} />
+      {`Chat includes "${account.name}"`}
+    </Space>
+  ),
+};

package/src/audit/styles.scss

@@ -0,0 +1,72 @@
+@use '../styles/variables.scss' as vars;
+@use '../styles/mixins.scss' as mixins;
+
+.wxchtf-audit-panel {
+  display: flex;
+  flex-flow: column nowrap;
+  background: vars.$background;
+  border-radius: vars.$radius;
+
+  .wxchtf-search {
+    text-align: center;
+    flex: none;
+    padding-block: 0.5rem;
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 50px;
+      pointer-events: none;
+      background: linear-gradient(to top, #006e720a, #0000 30%);
+    }
+
+    .wxchtf-search-select {
+      width: 100%;
+      max-width: 700px;
+    }
+  }
+
+  .wxchtf-chat-list {
+    flex: 1;
+    padding-top: 8px;
+    height: 100%;
+    min-height: 0;
+    border-bottom-left-radius: vars.$radius;
+    border-bottom-right-radius: vars.$radius;
+  }
+
+  .wxchtf-audit-body {
+    min-height: 0;
+
+    .ant-empty {
+      padding-top: 2rem;
+    }
+
+    &.--conversation-opened {
+      display: flex;
+      flex-flow: row nowrap;
+      flex: 1;
+
+      .wxchtf-chat-list {
+        flex: none;
+        height: 100%;
+        min-height: 0;
+        width: 400px;
+        border-bottom-left-radius: vars.$radius;
+        border-bottom-right-radius: 0;
+      }
+
+      .wxchtf-conversation {
+        z-index: 2;
+        min-width: 0;
+        box-shadow: 0px 6px 30px 0px #0cd9e214, 0px 1px 12px 0px #006e720f;
+        border-bottom-right-radius: vars.$radius;
+        overflow: hidden;
+      }
+    }
+  }
+}

package/src/core/client.ts

@@ -160,7 +160,7 @@ export class ChatifyClient {
     return () => this._reconnectSubscribers.filter((x) => x !== subscriber);
   };
 
-  private get axios() {
+  public get axios() {
     return this._config.axios;
   }
 

package/src/core/debounce.ts

@@ -17,7 +17,7 @@ export interface DebounceConfig<T> {
 export class Debounce<T> {
   private _enqueued: DebounceInternalValue<T>[] = [];
   private _processing: DebounceInternalValue<T>[] = [];
-  private _timeoutByGroup: Record<string, NodeJS.Timeout> = {};
+  private _timeoutByGroup: Record<string, number> = {};
   private _subscribers: ((value: Debounce<T>) => any)[] = [];
 
   constructor(public config: DebounceConfig<T>) {}