@webinex/chatify 2.0.0-alpha1 → 2.0.0-alpha10

package/dist/types/ui/common/Icon.d.ts

@@ -0,0 +1,21 @@
+export type IconType = keyof typeof ICONS;
+export interface IconProps {
+    type: IconType;
+}
+export declare const ICONS: {
+    attach: import('react').ForwardRefExoticComponent<Omit<import('@ant-design/icons/lib/components/AntdIcon').AntdIconProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+    send: import('react').ForwardRefExoticComponent<Omit<import('@ant-design/icons/lib/components/AntdIcon').AntdIconProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+    'remove-member': import('react').ForwardRefExoticComponent<Omit<import('@ant-design/icons/lib/components/AntdIcon').AntdIconProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+    'remove-member-delete-history': import('react').ForwardRefExoticComponent<Omit<import('@ant-design/icons/lib/components/AntdIcon').AntdIconProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+    'add-member': import('react').ForwardRefExoticComponent<Omit<import('@ant-design/icons/lib/components/AntdIcon').AntdIconProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+    'add-member-with-history': import('react').ForwardRefExoticComponent<Omit<import('@ant-design/icons/lib/components/AntdIcon').AntdIconProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+    members: import('react').ForwardRefExoticComponent<Omit<import('@ant-design/icons/lib/components/AntdIcon').AntdIconProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+    edit: import('react').ForwardRefExoticComponent<Omit<import('@ant-design/icons/lib/components/AntdIcon').AntdIconProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+    close: import('react').ForwardRefExoticComponent<Omit<import('@ant-design/icons/lib/components/AntdIcon').AntdIconProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+    chat: import('react').ForwardRefExoticComponent<Omit<import('@ant-design/icons/lib/components/AntdIcon').AntdIconProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+    watch: import('react').ForwardRefExoticComponent<Omit<import('@ant-design/icons/lib/components/AntdIcon').AntdIconProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+    unwatch: import('react').ForwardRefExoticComponent<Omit<import('@ant-design/icons/lib/components/AntdIcon').AntdIconProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+    'delete-file': import('react').ForwardRefExoticComponent<Omit<import('@ant-design/icons/lib/components/AntdIcon').AntdIconProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+    'open-file': import('react').ForwardRefExoticComponent<Omit<import('@ant-design/icons/lib/components/AntdIcon').AntdIconProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+};
+export declare const Icon: import('../../index.ts').Customizable<import('react').ComponentType<IconProps>>;

package/dist/types/ui/common/MessageSkeleton.d.ts

@@ -0,0 +1,4 @@
+export interface MessageSkeletonProps {
+    count?: number;
+}
+export declare const MessageSkeleton: import('../../index.ts').Customizable<import('react').ComponentType<MessageSkeletonProps>>;

package/dist/{esm/types → types}/ui/common/index.d.ts

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

package/{src → dist}/types/ui/customize.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+import { default as React } from 'react';
 export type Customizable<TComponent extends React.ComponentType<any>> = TComponent & {
     Component: TComponent;
     key: string;
 };
-export declare const CustomizeContext: React.Context<Record<string, React.ComponentType<any> | null | undefined>>;
-export declare function useCustomizeContext(): Record<string, React.ComponentType<any> | null | undefined>;
+export declare const CustomizeContext: React.Context<Record<string, any>>;
+export declare function useCustomizeContext<TValue>(): TValue;
 export declare function useCustomize<TCustom extends Customizable<React.ComponentType<any>>>(custom: TCustom): TCustom["Component"] | null;
 export declare function customize<TComponent extends React.ComponentType<any>>(key: string, Component: TComponent): TComponent extends React.ComponentType<infer X> ? Customizable<React.ComponentType<X>> : never;

package/dist/{esm/types → types}/ui/index.d.ts

@@ -6,6 +6,4 @@ 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 './common';

package/dist/{esm/types → types}/ui/localizer.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import { default as React } from 'react';
 import { SystemMessageText } from '../core';
-export interface Localizer {
+export interface LocalizerBase {
     isToday: (value: string) => boolean;
     timestamp: (value: string) => string;
     dateTime: (value: string) => string;
@@ -29,6 +29,16 @@ export interface Localizer {
     settings: {
         members: () => string;
     };
+    size: {
+        bytes: (value: number) => string;
+        kb: (value: number) => string;
+        mb: (value: number) => string;
+    };
+    chatList: {
+        topShown: (count: number) => string;
+    };
+}
+export interface Localizer extends LocalizerBase {
 }
 export declare const LocalizerContext: React.Context<Localizer>;
 export declare function useLocalizer(): Localizer;

package/dist/types/ui/useFormatter.d.ts

@@ -0,0 +1,3 @@
+export declare function useFormatter(): {
+    size: (value: number) => string;
+};

package/package.json

@@ -1,93 +1,81 @@
-{
-  "name": "@webinex/chatify",
-  "description": "Webinex Chatify",
-  "private": false,
-  "version": "2.0.0-alpha1",
-  "author": "Webinex Dev",
-  "license": "Apache-2.0",
-  "main": "src/index.ts",
-  "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",
-    "build:types": "dts-bundle-generator --project tsconfig.json --out dist/index.d.ts"
-  },
-  "devDependencies": {
-    "@microsoft/signalr": "^8.0.0",
-    "@parcel/transformer-sass": "2.9.2",
-    "@reduxjs/toolkit": "^2.2.5",
-    "@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",
-    "@types/is-hotkey": "^0.1.10",
-    "@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",
-    "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",
-    "shallow-equal": "^3.1.0",
-    "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",
-    "@reduxjs/toolkit": "^2.2.5",
-    "antd": ">=5",
-    "axios": ">=1",
-    "classnames": ">=2",
-    "dayjs": ">=1.8",
-    "immer": ">=8",
-    "is-hotkey": ">=0",
-    "react": ">=16",
-    "react-dom": ">=16",
-    "shallow-equal": ">=3"
-  }
-}
+{
+  "name": "@webinex/chatify",
+  "description": "Webinex Chatify",
+  "private": false,
+  "version": "2.0.0-alpha10",
+  "author": "Webinex Dev",
+  "license": "Apache-2.0",
+  "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": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "watch": "vite build --watch",
+    "build": "tsc -b && vite build"
+  },
+  "devDependencies": {
+    "@microsoft/signalr": "^8.0.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",
+    "buffer": "^5.5.0||^6.0.0",
+    "classnames": "^2.3.2",
+    "cross-env": "^7.0.3",
+    "dayjs": "^1.11.7",
+    "eslint": "^8.38.0",
+    "is-hotkey": "^0.2.0",
+    "postcss": "^8.4.21",
+    "prettier": "^2.8.7",
+    "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-plugin-peer-deps-external": "^2.2.4",
+    "sass-embedded": "^1.82.0",
+    "shallow-equal": "^3.1.0",
+    "tslib": "^2.6.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.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,
+});