@webinex/chatify 2.0.0-alpha12 → 2.0.0-alpha14

package/src/audit/AuditChatList.tsx

@@ -1,25 +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} />;
-});
+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

@@ -1,48 +1,49 @@
-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}
-      />
-    );
-  },
-);
+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}
+        compact={false}
+      />
+    );
+  },
+);

package/src/audit/AuditPanel.tsx

@@ -1,76 +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>
-  );
-}
+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

@@ -1,11 +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;
-  };
+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

@@ -1,89 +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>
-  );
-});
+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

@@ -1,42 +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,
-});
+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,
+});