@webinex/chatify 2.0.1-alpha1 → 2.0.2-alpha2

package/src/ui/Conversation/SystemMessage/SystemMessageRow.tsx

@@ -1,28 +1,28 @@
-import { Ref } from 'react';
-import { customize } from '../../customize';
-import { Localizer, useLocalizer } from '../../localizer';
-import { MessageBase } from '../../../core';
-
-export interface SystemMessageRowProps {
-  message: MessageBase;
-  containerRef?: Ref<HTMLDivElement>;
-}
-
-export function formatSystemMessage(localizer: Localizer, text: string): React.ReactNode {
-  const [key, payload] = text.split('::', 2);
-  const data = payload ? JSON.parse(payload) : null;
-  return localizer.system[key as keyof Localizer['system']](key as any, data);
-}
-
-export const SystemMessageRow = customize('SystemMessageRow', (props: SystemMessageRowProps) => {
-  const { message, containerRef } = props;
-  const { text, sentAt } = message;
-  const localizer = useLocalizer();
-
-  return (
-    <div ref={containerRef} className="wxchtf-system-message">
-      <div className="wxchtf-text">{formatSystemMessage(localizer, text)}</div>
-      <div className="wxchtf-timestamp">{localizer.timestamp(sentAt)}</div>
-    </div>
-  );
-});
+import { Ref } from 'react';
+import { customize } from '../../customize';
+import { Localizer, useLocalizer } from '../../localizer';
+import { MessageBase } from '../../../core';
+
+export interface SystemMessageRowProps {
+  message: MessageBase;
+  containerRef?: Ref<HTMLDivElement>;
+}
+
+export function formatSystemMessage(localizer: Localizer, text: string): React.ReactNode {
+  const [key, payload] = text.split('::', 2);
+  const data = payload ? JSON.parse(payload) : null;
+  return localizer.system[key as keyof Localizer['system']](key as any, data);
+}
+
+export const SystemMessageRow = customize('SystemMessageRow', (props: SystemMessageRowProps) => {
+  const { message, containerRef } = props;
+  const { text, sentAt } = message;
+  const localizer = useLocalizer();
+
+  return (
+    <div ref={containerRef} className="wxchtf-system-message">
+      <div className="wxchtf-text">{formatSystemMessage(localizer, text)}</div>
+      <div className="wxchtf-timestamp">{localizer.timestamp(sentAt)}</div>
+    </div>
+  );
+});

package/src/ui/Conversation/SystemMessage/index.ts

@@ -1,10 +1,10 @@
-import { SystemMessageBox } from './SystemMessageBox';
-import { SystemMessageRow } from './SystemMessageRow';
-
-export * from './SystemMessageBox';
-export * from './SystemMessageRow';
-
-export interface SystemMessageCustomizeValue {
-  SystemMessageBox?: typeof SystemMessageBox.Component | null;
-  SystemMessageRow?: typeof SystemMessageRow.Component | null;
-}
+import { SystemMessageBox } from './SystemMessageBox';
+import { SystemMessageRow } from './SystemMessageRow';
+
+export * from './SystemMessageBox';
+export * from './SystemMessageRow';
+
+export interface SystemMessageCustomizeValue {
+  SystemMessageBox?: typeof SystemMessageBox.Component | null;
+  SystemMessageRow?: typeof SystemMessageRow.Component | null;
+}

package/src/ui/Conversation/index.ts

@@ -1,13 +1,13 @@
-export * from './InputBox';
-export * from './Message';
-export * from './NextObserver';
-export * from './ReadObserver';
-export * from './SendingMessage';
-export * from './SystemMessage';
-
-export * from './ConversationActions';
-export * from './ConversationBody';
-export * from './ConversationHeader';
-export * from './ConversationName';
-export * from './ConversationContext';
-export * from './Conversation';
+export * from './InputBox';
+export * from './Message';
+export * from './NextObserver';
+export * from './ReadObserver';
+export * from './SendingMessage';
+export * from './SystemMessage';
+
+export * from './ConversationActions';
+export * from './ConversationBody';
+export * from './ConversationHeader';
+export * from './ConversationName';
+export * from './ConversationContext';
+export * from './Conversation';

package/src/ui/Thread/ThreadActions.tsx

@@ -1,22 +1,22 @@
-import { Button, Tooltip } from 'antd';
-import { customize } from '../customize';
-import { useThreadContext } from './ThreadContext';
-import { Icon } from '../common/Icon';
-
-export const ThreadActions = customize('ThreadActions', () => {
-  const { watch, onWatch } = useThreadContext();
-
-  if (!watch) {
-    return (
-      <Tooltip title="Watch thread">
-        <Button type="link" icon={<Icon type="watch" />} onClick={() => onWatch(true)} />
-      </Tooltip>
-    );
-  }
-
-  return (
-    <Tooltip title="Unwatch thread">
-      <Button type="link" icon={<Icon type="unwatch" />} onClick={() => onWatch(false)} />
-    </Tooltip>
-  );
-});
+import { Button, Tooltip } from 'antd';
+import { customize } from '../customize';
+import { useThreadContext } from './ThreadContext';
+import { Icon } from '../common/Icon';
+
+export const ThreadActions = customize('ThreadActions', () => {
+  const { watch, onWatch } = useThreadContext();
+
+  if (!watch) {
+    return (
+      <Tooltip title="Watch thread">
+        <Button type="link" icon={<Icon type="watch" />} onClick={() => onWatch(true)} />
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Tooltip title="Unwatch thread">
+      <Button type="link" icon={<Icon type="unwatch" />} onClick={() => onWatch(false)} />
+    </Tooltip>
+  );
+});

package/src/ui/Thread/ThreadContext.ts

@@ -1,13 +1,13 @@
-import React from 'react';
-
-export interface ThreadContextValue {
-  id: string;
-  watch: boolean;
-  onWatch: (value: boolean) => void;
-}
-
-export const ThreadContext = React.createContext<ThreadContextValue>(null!);
-
-export function useThreadContext() {
-  return React.useContext(ThreadContext);
-}
+import React from 'react';
+
+export interface ThreadContextValue {
+  id: string;
+  watch: boolean;
+  onWatch: (value: boolean) => void;
+}
+
+export const ThreadContext = React.createContext<ThreadContextValue>(null!);
+
+export function useThreadContext() {
+  return React.useContext(ThreadContext);
+}

package/src/ui/Thread/ThreadPanel.tsx

@@ -1,127 +1,127 @@
-import { useCallback, useEffect, useMemo } from 'react';
-import { MessageBody, chatifyApi, parseThreadMessageId } from '../../core';
-import { Conversation, ConversationCustomizeValue, ConversationProps } from '../Conversation';
-import { ThreadContext, ThreadContextValue } from './ThreadContext';
-import { Localizer, LocalizerContext, defaultLocalizer } from '../localizer';
-import { CustomizeContext } from '../customize';
-import { ThreadActions } from './ThreadActions';
-import { CommonCustomizeValue } from '../common';
-
-export interface ThreadCustomizeValue extends ConversationCustomizeValue, CommonCustomizeValue {
-  ThreadActions?: typeof ThreadActions.Component | null;
-}
-
-export interface ThreadPanelProps {
-  threadId: string;
-  className?: string;
-  customize?: ThreadCustomizeValue;
-  localizer?: Localizer;
-}
-
-function usePanelState(props: ThreadPanelProps) {
-  const { threadId } = props;
-  const { data: thread } = chatifyApi.useGetThreadQuery({ id: threadId });
-  const { data: messageList } = chatifyApi.useGetThreadMessageListQuery({ threadId });
-  const { id, name, archive, lastReadMessageId, watch } = thread ?? {};
-  const { messages, hasMore } = messageList ?? {};
-
-  const [read] = chatifyApi.useReadThreadMessageMutation();
-  const onRead = useCallback((id: string) => read({ id }), [read]);
-
-  const [fetchNext, { isLoading: isFetchNextLoading }] = chatifyApi.useFetchNextThreadMessageListMutation();
-  const onNext = useCallback(() => fetchNext({ threadId }), [fetchNext, threadId]);
-
-  const [send] = chatifyApi.useSendThreadMessageMutation();
-  const onSend = useCallback(
-    (message: MessageBody) => send({ body: message, threadId }).unwrap(),
-    [threadId, send],
-  );
-
-  const { data: readQueue } = chatifyApi.useGetThreadMessageReadQueueQuery();
-
-  const conversation = useMemo(() => {
-    if (!id) {
-      return null;
-    }
-
-    const result: ConversationProps = {
-      value: { id: id!, name: name!, active: !archive, lastReadMessageId: lastReadMessageId ?? null },
-      messages,
-      hasMore,
-      onNext,
-      nextLoading: isFetchNextLoading,
-      onRead,
-      onSend,
-      noReadTracking: !watch,
-      isReading: (id: string) =>
-        readQueue!.some(
-          (unit) => parseThreadMessageId(unit.value)[0] === parseThreadMessageId(id)[0] && id <= unit.value,
-        ),
-    };
-
-    return result;
-  }, [
-    onNext,
-    onRead,
-    onSend,
-    isFetchNextLoading,
-    id,
-    name,
-    archive,
-    messages,
-    hasMore,
-    lastReadMessageId,
-    readQueue,
-    watch,
-  ]);
-
-  const [watchThread] = chatifyApi.useWatchThreadMutation();
-
-  const threadContext = useMemo<ThreadContextValue | null>(
-    () =>
-      thread
-        ? {
-            id: thread.id,
-            watch: thread.watch,
-            onWatch: (value) => watchThread({ id: thread.id, watch: value }).unwrap(),
-          }
-        : null,
-    [thread, watchThread],
-  );
-
-  return [conversation, threadContext] as const;
-}
-
-const DEFAULT_CUSTOMIZE: ThreadCustomizeValue = {
-  ConversationActions: () => <ThreadActions />,
-};
-
-export function ThreadPanel(props: ThreadPanelProps) {
-  const { threadId, customize, localizer = defaultLocalizer, className = '' } = props;
-  const [conversation, threadContext] = usePanelState(props);
-  const customizeMergeValue = useMemo(() => ({ ...DEFAULT_CUSTOMIZE, ...customize }), [customize]);
-
-  useEffect(() => {
-    chatifyApi.settings.client.connectToThread(threadId);
-
-    return () => {
-      chatifyApi.settings.client.disconnectFromThread(threadId);
-    };
-  }, [threadId]);
-
-  if (!conversation || !threadContext) {
-    return null;
-  }
-
-  return (
-    <LocalizerContext.Provider value={localizer}>
-      <ThreadContext.Provider value={threadContext}>
-        <CustomizeContext.Provider value={customizeMergeValue as any}>
-          <div className={`wxchtf-chatify wxchtf-thread ${className}`}>
-            {conversation && <Conversation {...conversation} />}
-          </div>
-        </CustomizeContext.Provider>
-      </ThreadContext.Provider>
-    </LocalizerContext.Provider>
-  );
-}
+import { useCallback, useEffect, useMemo } from 'react';
+import { MessageBody, chatifyApi, parseThreadMessageId } from '../../core';
+import { Conversation, ConversationCustomizeValue, ConversationProps } from '../Conversation';
+import { ThreadContext, ThreadContextValue } from './ThreadContext';
+import { Localizer, LocalizerContext, defaultLocalizer } from '../localizer';
+import { CustomizeContext } from '../customize';
+import { ThreadActions } from './ThreadActions';
+import { CommonCustomizeValue } from '../common';
+
+export interface ThreadCustomizeValue extends ConversationCustomizeValue, CommonCustomizeValue {
+  ThreadActions?: typeof ThreadActions.Component | null;
+}
+
+export interface ThreadPanelProps {
+  threadId: string;
+  className?: string;
+  customize?: ThreadCustomizeValue;
+  localizer?: Localizer;
+}
+
+function usePanelState(props: ThreadPanelProps) {
+  const { threadId } = props;
+  const { data: thread } = chatifyApi.useGetThreadQuery({ id: threadId });
+  const { data: messageList } = chatifyApi.useGetThreadMessageListQuery({ threadId });
+  const { id, name, archive, lastReadMessageId, watch } = thread ?? {};
+  const { messages, hasMore } = messageList ?? {};
+
+  const [read] = chatifyApi.useReadThreadMessageMutation();
+  const onRead = useCallback((id: string) => read({ id }), [read]);
+
+  const [fetchNext, { isLoading: isFetchNextLoading }] = chatifyApi.useFetchNextThreadMessageListMutation();
+  const onNext = useCallback(() => fetchNext({ threadId }), [fetchNext, threadId]);
+
+  const [send] = chatifyApi.useSendThreadMessageMutation();
+  const onSend = useCallback(
+    (message: MessageBody) => send({ body: message, threadId }).unwrap(),
+    [threadId, send],
+  );
+
+  const { data: readQueue } = chatifyApi.useGetThreadMessageReadQueueQuery();
+
+  const conversation = useMemo(() => {
+    if (!id) {
+      return null;
+    }
+
+    const result: ConversationProps = {
+      value: { id: id!, name: name!, active: !archive, lastReadMessageId: lastReadMessageId ?? null },
+      messages,
+      hasMore,
+      onNext,
+      nextLoading: isFetchNextLoading,
+      onRead,
+      onSend,
+      noReadTracking: !watch,
+      isReading: (id: string) =>
+        readQueue!.some(
+          (unit) => parseThreadMessageId(unit.value)[0] === parseThreadMessageId(id)[0] && id <= unit.value,
+        ),
+    };
+
+    return result;
+  }, [
+    onNext,
+    onRead,
+    onSend,
+    isFetchNextLoading,
+    id,
+    name,
+    archive,
+    messages,
+    hasMore,
+    lastReadMessageId,
+    readQueue,
+    watch,
+  ]);
+
+  const [watchThread] = chatifyApi.useWatchThreadMutation();
+
+  const threadContext = useMemo<ThreadContextValue | null>(
+    () =>
+      thread
+        ? {
+            id: thread.id,
+            watch: thread.watch,
+            onWatch: (value) => watchThread({ id: thread.id, watch: value }).unwrap(),
+          }
+        : null,
+    [thread, watchThread],
+  );
+
+  return [conversation, threadContext] as const;
+}
+
+const DEFAULT_CUSTOMIZE: ThreadCustomizeValue = {
+  ConversationActions: () => <ThreadActions />,
+};
+
+export function ThreadPanel(props: ThreadPanelProps) {
+  const { threadId, customize, localizer = defaultLocalizer, className = '' } = props;
+  const [conversation, threadContext] = usePanelState(props);
+  const customizeMergeValue = useMemo(() => ({ ...DEFAULT_CUSTOMIZE, ...customize }), [customize]);
+
+  useEffect(() => {
+    chatifyApi.settings.client.connectToThread(threadId);
+
+    return () => {
+      chatifyApi.settings.client.disconnectFromThread(threadId);
+    };
+  }, [threadId]);
+
+  if (!conversation || !threadContext) {
+    return null;
+  }
+
+  return (
+    <LocalizerContext.Provider value={localizer}>
+      <ThreadContext.Provider value={threadContext}>
+        <CustomizeContext.Provider value={customizeMergeValue as any}>
+          <div className={`wxchtf-chatify wxchtf-thread ${className}`}>
+            {conversation && <Conversation {...conversation} />}
+          </div>
+        </CustomizeContext.Provider>
+      </ThreadContext.Provider>
+    </LocalizerContext.Provider>
+  );
+}

package/src/ui/Thread/index.tsx

@@ -1,3 +1,3 @@
-export * from './ThreadActions';
-export * from './ThreadPanel';
-export * from './ThreadContext';
+export * from './ThreadActions';
+export * from './ThreadPanel';
+export * from './ThreadContext';

package/src/ui/color.ts

@@ -1,20 +1,20 @@
-interface ColorOptions {
-  saturation?: number;
-  lightness?: number;
-}
-
-const DEFAULT_COLOR_OPTIONS: ColorOptions = {
-  saturation: 100,
-  lightness: 75,
-};
-
-export function color(value: string, options: ColorOptions = {}) {
-  options = Object.assign({}, DEFAULT_COLOR_OPTIONS, options);
-
-  let hash = 0;
-  for (let i = 0; i < value.length; i++) {
-    hash = value.charCodeAt(i) + ((hash << 5) - hash);
-    hash = hash & hash;
-  }
-  return `hsl(${hash % 360}, ${options.saturation}%, ${options.lightness}%)`;
-}
+interface ColorOptions {
+  saturation?: number;
+  lightness?: number;
+}
+
+const DEFAULT_COLOR_OPTIONS: ColorOptions = {
+  saturation: 100,
+  lightness: 75,
+};
+
+export function color(value: string, options: ColorOptions = {}) {
+  options = Object.assign({}, DEFAULT_COLOR_OPTIONS, options);
+
+  let hash = 0;
+  for (let i = 0; i < value.length; i++) {
+    hash = value.charCodeAt(i) + ((hash << 5) - hash);
+    hash = hash & hash;
+  }
+  return `hsl(${hash % 360}, ${options.saturation}%, ${options.lightness}%)`;
+}

package/src/ui/common/Avatar.tsx

@@ -1,20 +1,20 @@
-import { FC, ForwardedRef, forwardRef } from 'react';
-import { Account } from '../../core';
-import { Avatar as AntdAvatar } from 'antd';
-import { customize } from '../customize';
-
-export interface AvatarProps {
-  account: Account;
-}
-
-const _Avatar: FC<AvatarProps> = forwardRef(
-  (props: AvatarProps, forwardRef: ForwardedRef<HTMLSpanElement>) => {
-    const { account } = props;
-
-    return <AntdAvatar ref={forwardRef} src={account.avatar} />;
-  },
-);
-
-_Avatar.displayName = 'Avatar';
-
-export const Avatar = customize('Avatar', _Avatar);
+import { FC, ForwardedRef, forwardRef } from 'react';
+import { Account } from '../../core';
+import { Avatar as AntdAvatar } from 'antd';
+import { customize } from '../customize';
+
+export interface AvatarProps {
+  account: Account;
+}
+
+const _Avatar: FC<AvatarProps> = forwardRef(
+  (props: AvatarProps, forwardRef: ForwardedRef<HTMLSpanElement>) => {
+    const { account } = props;
+
+    return <AntdAvatar ref={forwardRef} src={account.avatar} />;
+  },
+);
+
+_Avatar.displayName = 'Avatar';
+
+export const Avatar = customize('Avatar', _Avatar);

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>
+      ))}
+    </>
+  );
+});