@webinex/chatify 2.0.0-alpha1 → 2.0.0-alpha12

package/src/ui/Chat/ChatView.tsx

@@ -1,115 +1,115 @@
-import { CustomizeContext, customize, useCustomizeContext } from '../customize';
-import { MessageBody, chatId, chatifyApi } from '../../core';
-import {
-  Conversation,
-  ConversationCustomizeValue,
-  ConversationProps,
-  ConversationValue,
-} from '../Conversation';
-import { useCallback, useMemo } from 'react';
-import { ChatEditableHeaderName } from './ChatEditableHeaderName';
-import { ChatHeaderActions } from './ChatHeaderActions';
-import { ChatMembersCustomizeValue, ChatMembersPanel } from './Members';
-import { ChatContext, useChatContext } from './ChatContext';
-
-export interface ChatProps {
-  value: ChatValue;
-}
-
-export interface ChatValue extends ConversationValue {}
-
-export interface ChatViewCustomizeValue extends ConversationCustomizeValue, ChatMembersCustomizeValue {
-  ChatEditableHeaderName?: typeof ChatEditableHeaderName.Component | null;
-  ChatHeaderActions?: typeof ChatHeaderActions.Component | null;
-  ChatView?: typeof ChatView.Component | null;
-}
-
-export const DEFAULT_CHAT_VIEW_CUSTOMIZE_VALUE: ConversationCustomizeValue = {
-  ConversationName: () => <ChatEditableHeaderName />,
-  ConversationActions: () => <ChatHeaderActions />,
-};
-
-function useConversation(props: ChatProps) {
-  const { value: chat } = props;
-  const { id, name, active, lastReadMessageId } = chat;
-
-  const { data: messageList } = chatifyApi.useGetChatMessageListQuery({ chatId: id });
-  const { messages, hasMore } = messageList ?? {};
-
-  const [fetchNext, { isLoading: isFetchNextLoading }] = chatifyApi.useFetchNextChatMessageListMutation();
-  const onNext = useCallback(() => fetchNext({ chatId: id }), [fetchNext, id]);
-
-  const [read] = chatifyApi.useReadChatMessageMutation();
-  const onRead = useCallback((id: string) => read({ id }), [read]);
-
-  const [send] = chatifyApi.useSendChatMessageMutation();
-  const onSend = useCallback((message: MessageBody) => send({ ...message, chatId: id }).unwrap(), [id, send]);
-
-  const { data: readQueue } = chatifyApi.useGetChatMessageReadQueueQuery();
-
-  const conversation = useMemo(() => {
-    if (!id) {
-      return null;
-    }
-
-    const result: ConversationProps = {
-      value: { id: id!, name: name!, active: active!, lastReadMessageId: lastReadMessageId! },
-      messages,
-      hasMore,
-      onNext,
-      nextLoading: isFetchNextLoading,
-      onRead,
-      onSend,
-      isReading: (id: string) => readQueue!.some((x) => chatId(x.value) === chatId(id) && id <= x.value),
-    };
-
-    return result;
-  }, [
-    onNext,
-    onRead,
-    onSend,
-    isFetchNextLoading,
-    id,
-    name,
-    active,
-    messages,
-    hasMore,
-    lastReadMessageId,
-    readQueue,
-  ]);
-
-  return conversation;
-}
-
-function Content(props: ChatProps) {
-  const conversation = useConversation(props);
-  const { showMembers } = useChatContext();
-
-  if (!conversation) {
-    return null;
-  }
-
-  return (
-    <div className="wxchtf-chat">
-      <Conversation {...conversation} />
-      {showMembers && <ChatMembersPanel />}
-    </div>
-  );
-}
-
-export const ChatView = customize('ChatView', (props: ChatProps) => {
-  const { value } = props;
-  const customized = useCustomizeContext();
-  const customize = useMemo(
-    () => ({ ...(customized ?? {}), ...DEFAULT_CHAT_VIEW_CUSTOMIZE_VALUE }),
-    [customized],
-  );
-
-  return (
-    <CustomizeContext.Provider value={customize}>
-      <ChatContext id={value.id}>
-        <Content value={value} />
-      </ChatContext>
-    </CustomizeContext.Provider>
-  );
-});
+import { CustomizeContext, customize, useCustomizeContext } from '../customize';
+import { MessageBody, chatId, chatifyApi } from '../../core';
+import {
+  Conversation,
+  ConversationCustomizeValue,
+  ConversationProps,
+  ConversationValue,
+} from '../Conversation';
+import { useCallback, useMemo } from 'react';
+import { ChatEditableHeaderName } from './ChatEditableHeaderName';
+import { ChatHeaderActions } from './ChatHeaderActions';
+import { ChatMembersCustomizeValue, ChatMembersPanel } from './Members';
+import { ChatContext, useChatContext } from './ChatContext';
+
+export interface ChatProps {
+  value: ChatValue;
+}
+
+export interface ChatValue extends ConversationValue {}
+
+export interface ChatViewCustomizeValue extends ConversationCustomizeValue, ChatMembersCustomizeValue {
+  ChatEditableHeaderName?: typeof ChatEditableHeaderName.Component | null;
+  ChatHeaderActions?: typeof ChatHeaderActions.Component | null;
+  ChatView?: typeof ChatView.Component | null;
+}
+
+export const DEFAULT_CHAT_VIEW_CUSTOMIZE_VALUE: ConversationCustomizeValue = {
+  ConversationName: () => <ChatEditableHeaderName />,
+  ConversationActions: () => <ChatHeaderActions />,
+};
+
+function useConversation(props: ChatProps) {
+  const { value: chat } = props;
+  const { id, name, active, lastReadMessageId } = chat;
+
+  const { data: messageList } = chatifyApi.useGetChatMessageListQuery({ chatId: id });
+  const { messages, hasMore } = messageList ?? {};
+
+  const [fetchNext, { isLoading: isFetchNextLoading }] = chatifyApi.useFetchNextChatMessageListMutation();
+  const onNext = useCallback(() => fetchNext({ chatId: id }), [fetchNext, id]);
+
+  const [read] = chatifyApi.useReadChatMessageMutation();
+  const onRead = useCallback((id: string) => read({ id }), [read]);
+
+  const [send] = chatifyApi.useSendChatMessageMutation();
+  const onSend = useCallback((message: MessageBody) => send({ ...message, chatId: id }).unwrap(), [id, send]);
+
+  const { data: readQueue } = chatifyApi.useGetChatMessageReadQueueQuery();
+
+  const conversation = useMemo(() => {
+    if (!id) {
+      return null;
+    }
+
+    const result: ConversationProps = {
+      value: { id: id!, name: name!, active: active!, lastReadMessageId: lastReadMessageId! },
+      messages,
+      hasMore,
+      onNext,
+      nextLoading: isFetchNextLoading,
+      onRead,
+      onSend,
+      isReading: (id: string) => readQueue!.some((x) => chatId(x.value) === chatId(id) && id <= x.value),
+    };
+
+    return result;
+  }, [
+    onNext,
+    onRead,
+    onSend,
+    isFetchNextLoading,
+    id,
+    name,
+    active,
+    messages,
+    hasMore,
+    lastReadMessageId,
+    readQueue,
+  ]);
+
+  return conversation;
+}
+
+function Content(props: ChatProps) {
+  const conversation = useConversation(props);
+  const { showMembers } = useChatContext();
+
+  if (!conversation) {
+    return null;
+  }
+
+  return (
+    <div className="wxchtf-chat">
+      <Conversation {...conversation} />
+      {showMembers && <ChatMembersPanel />}
+    </div>
+  );
+}
+
+export const ChatView = customize('ChatView', (props: ChatProps) => {
+  const { value } = props;
+  const customized = useCustomizeContext();
+  const customize: ChatViewCustomizeValue = useMemo(
+    () => ({ ...(customized ?? {}), ...DEFAULT_CHAT_VIEW_CUSTOMIZE_VALUE }),
+    [customized],
+  );
+
+  return (
+    <CustomizeContext.Provider value={customize}>
+      <ChatContext id={value.id}>
+        <Content value={value} />
+      </ChatContext>
+    </CustomizeContext.Provider>
+  );
+});

package/src/ui/Chat/Members/ChatMembersButton.tsx

@@ -1,9 +1,9 @@
-import { Button } from 'antd';
-import { customize } from '../../customize';
-import { Icon } from '../../common/Icon';
-import { useChatContext } from '../ChatContext';
-
-export const ChatMembersButton = customize('ChatMembersButton', () => {
-  const { showMembers, onShowMembers } = useChatContext();
-  return <Button onClick={() => onShowMembers(!showMembers)} type="link" icon={<Icon type="members" />} />;
-});
+import { Button } from 'antd';
+import { customize } from '../../customize';
+import { Icon } from '../../common/Icon';
+import { useChatContext } from '../ChatContext';
+
+export const ChatMembersButton = customize('ChatMembersButton', () => {
+  const { showMembers, onShowMembers } = useChatContext();
+  return <Button onClick={() => onShowMembers(!showMembers)} type="link" icon={<Icon type="members" />} />;
+});

package/src/ui/Chat/Members/ChatMembersPanel.tsx

@@ -1,112 +1,112 @@
-import { Button, List, Space, Tooltip } from 'antd';
-import { chatifyApi } from '../../../core';
-import { customize } from '../../customize';
-import { useCallback, useMemo } from 'react';
-import { Icon } from '../../common/Icon';
-import { Avatar } from '../../common/Avatar';
-import { useChatContext } from '../ChatContext';
-
-interface ChatMemberListItemProps {
-  id: string;
-  chatId: string;
-}
-
-function useAdd(chatId: string, accountId: string, withHistory: boolean) {
-  const [add, state] = chatifyApi.useAddChatMemberMutation();
-  const onAdd = useCallback(
-    () => add({ chatId, accountId, withHistory }),
-    [add, chatId, accountId, withHistory],
-  );
-  return [onAdd, state] as const;
-}
-
-function useRemove(chatId: string, accountId: string, deleteHistory: boolean) {
-  const [remove, state] = chatifyApi.useRemoveChatMemberMutation();
-  const onRemove = useCallback(
-    () => remove({ chatId, accountId, deleteHistory }),
-    [remove, chatId, accountId, deleteHistory],
-  );
-  return [onRemove, state] as const;
-}
-
-const ChatMemberListItem = customize('ChatMemberListItem', (props: ChatMemberListItemProps) => {
-  const { chatId } = props;
-  const { data: chat } = chatifyApi.useGetChatQuery({ id: chatId });
-  const { data: accounts } = chatifyApi.useGetAccountListQuery();
-  const account = accounts!.find((x) => x.id === props.id)!;
-  const isMember = chat!.members.some((x) => x.id === account.id);
-  const [onAddWithoutHistory] = useAdd(chatId, account.id, false);
-  const [onAddWithHistory] = useAdd(chatId, account.id, true);
-  const [onRemoveKeepHistory] = useRemove(chatId, account.id, false);
-  const [onRemoveDeleteHistory] = useRemove(chatId, account.id, true);
-
-  return (
-    <List.Item
-      className="wxchtf-chat-members-list-item"
-      actions={
-        isMember
-          ? [
-              <Tooltip key="remove" title="Remove (keep history)">
-                <Button onClick={onRemoveKeepHistory} type="link" icon={<Icon type="remove-member" />} />
-              </Tooltip>,
-              <Tooltip key="remove_delete_history" title="Remove (delete history)">
-                <Button
-                  onClick={onRemoveDeleteHistory}
-                  type="link"
-                  icon={<Icon type="remove-member-delete-history" />}
-                />
-              </Tooltip>,
-            ]
-          : [
-              <Tooltip key="add_no_history" title="Add (no history)">
-                <Button onClick={onAddWithoutHistory} type="link" icon={<Icon type="add-member" />} />
-              </Tooltip>,
-              <Tooltip key="add" title="Add (share history)">
-                <Button
-                  onClick={onAddWithHistory}
-                  type="link"
-                  icon={<Icon type="add-member-with-history" />}
-                />
-              </Tooltip>,
-            ]
-      }
-    >
-      <Space>
-        <Avatar account={account} />
-        <span>{account.name}</span>
-      </Space>
-    </List.Item>
-  );
-});
-
-export const ChatMembersPanel = customize('ChatMembersPanel', () => {
-  const { id } = useChatContext();
-  const { data: chat } = chatifyApi.useGetChatQuery({ id });
-  const { data: accounts } = chatifyApi.useGetAccountListQuery();
-  const ordered = useMemo(
-    () =>
-      accounts
-        ?.slice()
-        .sort(
-          (a, b) =>
-            (chat?.members.some((m) => m.id === a.id) ? -100 : 0) -
-            (chat?.members.some((m) => m.id === b.id) ? -100 : 0) +
-            a.name.localeCompare(b.name),
-        ),
-    [accounts, chat],
-  );
-
-  if (!chat?.members || !accounts) {
-    return null;
-  }
-
-  return (
-    <div className="wxchtf-chat-members-panel">
-      <List
-        className="wxchtf-chat-members-list"
-        dataSource={ordered}
-        renderItem={(item) => <ChatMemberListItem id={item.id} chatId={id} />}
-      />
-    </div>
-  );
-});
+import { Button, List, Space, Tooltip } from 'antd';
+import { chatifyApi } from '../../../core';
+import { customize } from '../../customize';
+import { useCallback, useMemo } from 'react';
+import { Icon } from '../../common/Icon';
+import { Avatar } from '../../common/Avatar';
+import { useChatContext } from '../ChatContext';
+
+interface ChatMemberListItemProps {
+  id: string;
+  chatId: string;
+}
+
+function useAdd(chatId: string, accountId: string, withHistory: boolean) {
+  const [add, state] = chatifyApi.useAddChatMemberMutation();
+  const onAdd = useCallback(
+    () => add({ chatId, accountId, withHistory }),
+    [add, chatId, accountId, withHistory],
+  );
+  return [onAdd, state] as const;
+}
+
+function useRemove(chatId: string, accountId: string, deleteHistory: boolean) {
+  const [remove, state] = chatifyApi.useRemoveChatMemberMutation();
+  const onRemove = useCallback(
+    () => remove({ chatId, accountId, deleteHistory }),
+    [remove, chatId, accountId, deleteHistory],
+  );
+  return [onRemove, state] as const;
+}
+
+const ChatMemberListItem = customize('ChatMemberListItem', (props: ChatMemberListItemProps) => {
+  const { chatId } = props;
+  const { data: chat } = chatifyApi.useGetChatQuery({ id: chatId });
+  const { data: accounts } = chatifyApi.useGetAccountListQuery({});
+  const account = accounts!.find((x) => x.id === props.id)!;
+  const isMember = chat!.members.some((x) => x.id === account.id);
+  const [onAddWithoutHistory] = useAdd(chatId, account.id, false);
+  const [onAddWithHistory] = useAdd(chatId, account.id, true);
+  const [onRemoveKeepHistory] = useRemove(chatId, account.id, false);
+  const [onRemoveDeleteHistory] = useRemove(chatId, account.id, true);
+
+  return (
+    <List.Item
+      className="wxchtf-chat-members-list-item"
+      actions={
+        isMember
+          ? [
+              <Tooltip key="remove" title="Remove (keep history)">
+                <Button onClick={onRemoveKeepHistory} type="link" icon={<Icon type="remove-member" />} />
+              </Tooltip>,
+              <Tooltip key="remove_delete_history" title="Remove (delete history)">
+                <Button
+                  onClick={onRemoveDeleteHistory}
+                  type="link"
+                  icon={<Icon type="remove-member-delete-history" />}
+                />
+              </Tooltip>,
+            ]
+          : [
+              <Tooltip key="add_no_history" title="Add (no history)">
+                <Button onClick={onAddWithoutHistory} type="link" icon={<Icon type="add-member" />} />
+              </Tooltip>,
+              <Tooltip key="add" title="Add (share history)">
+                <Button
+                  onClick={onAddWithHistory}
+                  type="link"
+                  icon={<Icon type="add-member-with-history" />}
+                />
+              </Tooltip>,
+            ]
+      }
+    >
+      <Space>
+        <Avatar account={account} />
+        <span>{account.name}</span>
+      </Space>
+    </List.Item>
+  );
+});
+
+export const ChatMembersPanel = customize('ChatMembersPanel', () => {
+  const { id } = useChatContext();
+  const { data: chat } = chatifyApi.useGetChatQuery({ id });
+  const { data: accounts } = chatifyApi.useGetAccountListQuery({});
+  const ordered = useMemo(
+    () =>
+      accounts
+        ?.slice()
+        .sort(
+          (a, b) =>
+            (chat?.members.some((m) => m.id === a.id) ? -100 : 0) -
+            (chat?.members.some((m) => m.id === b.id) ? -100 : 0) +
+            a.name.localeCompare(b.name),
+        ),
+    [accounts, chat],
+  );
+
+  if (!chat?.members || !accounts) {
+    return null;
+  }
+
+  return (
+    <div className="wxchtf-chat-members-panel">
+      <List
+        className="wxchtf-chat-members-list"
+        dataSource={ordered}
+        renderItem={(item) => <ChatMemberListItem id={item.id} chatId={id} />}
+      />
+    </div>
+  );
+});

package/src/ui/Chat/Members/ChatMembersPreview.tsx

@@ -1,25 +1,25 @@
-import { chatifyApi } from '../../../core';
-import { Tooltip } from 'antd';
-import { customize } from '../../customize';
-import { Avatar as AntdAvatar } from 'antd';
-import { Avatar } from '../../common/Avatar';
-import { useChatContext } from '../ChatContext';
-
-export const ChatMembersPreview = customize('ChatMembersPreview', () => {
-  const { id } = useChatContext();
-  const { data: chat } = chatifyApi.useGetChatQuery({ id });
-
-  if (!chat?.members) {
-    return null;
-  }
-
-  return (
-    <AntdAvatar.Group maxCount={5}>
-      {chat.members.map((x) => (
-        <Tooltip key={x.id} title={x.name}>
-          <Avatar account={x} />
-        </Tooltip>
-      ))}
-    </AntdAvatar.Group>
-  );
-});
+import { chatifyApi } from '../../../core';
+import { Tooltip } from 'antd';
+import { customize } from '../../customize';
+import { Avatar as AntdAvatar } from 'antd';
+import { Avatar } from '../../common/Avatar';
+import { useChatContext } from '../ChatContext';
+
+export const ChatMembersPreview = customize('ChatMembersPreview', () => {
+  const { id } = useChatContext();
+  const { data: chat } = chatifyApi.useGetChatQuery({ id });
+
+  if (!chat?.members) {
+    return null;
+  }
+
+  return (
+    <AntdAvatar.Group max={{ count: 5 }}>
+      {chat.members.map((x) => (
+        <Tooltip key={x.id} title={x.name}>
+          <Avatar account={x} />
+        </Tooltip>
+      ))}
+    </AntdAvatar.Group>
+  );
+});

package/src/ui/Chat/Members/index.ts

@@ -1,13 +1,13 @@
-import { ChatMembersButton } from './ChatMembersButton';
-import { ChatMembersPanel } from './ChatMembersPanel';
-import { ChatMembersPreview } from './ChatMembersPreview';
-
-export * from './ChatMembersButton';
-export * from './ChatMembersPanel';
-export * from './ChatMembersPreview';
-
-export interface ChatMembersCustomizeValue {
-  ChatMembersButton?: typeof ChatMembersButton.Component | null;
-  ChatMembersPanel?: typeof ChatMembersPanel.Component | null;
-  ChatMembersPreview?: typeof ChatMembersPreview.Component | null;
-}
+import { ChatMembersButton } from './ChatMembersButton';
+import { ChatMembersPanel } from './ChatMembersPanel';
+import { ChatMembersPreview } from './ChatMembersPreview';
+
+export * from './ChatMembersButton';
+export * from './ChatMembersPanel';
+export * from './ChatMembersPreview';
+
+export interface ChatMembersCustomizeValue {
+  ChatMembersButton?: typeof ChatMembersButton.Component | null;
+  ChatMembersPanel?: typeof ChatMembersPanel.Component | null;
+  ChatMembersPreview?: typeof ChatMembersPreview.Component | null;
+}

package/src/ui/Chat/index.ts

@@ -1,6 +1,6 @@
-export * from './Members';
-export * from './ChatView';
-export * from './ChatContext';
-export * from './ChatEditableHeaderName';
-export * from './ChatHeaderActions';
-export * from './ChatPanel';
+export * from './Members';
+export * from './ChatView';
+export * from './ChatContext';
+export * from './ChatEditableHeaderName';
+export * from './ChatHeaderActions';
+export * from './ChatPanel';

package/src/ui/ChatGroup/AutoReply/AutoReplyButton.tsx

@@ -0,0 +1,21 @@
+import { Button } from 'antd';
+import { customize } from '../../customize';
+import { useChatGroupContext } from '../ChatGroupContext';
+import { useLocalizer } from '../../localizer';
+import { Icon } from '../../common/Icon';
+
+export const AutoReplyButton = customize('AutoReplyButton', () => {
+  const { toggleAutoReply } = useChatGroupContext();
+  const localizer = useLocalizer();
+  const titleText = localizer.autoReply.buttonTitle();
+
+  return (
+    <Button
+      className="wxchtf-add-btn-settings"
+      onClick={toggleAutoReply}
+      icon={<Icon type="settings" />}
+      title={titleText}
+      aria-label={titleText}
+    />
+  );
+});

package/src/ui/ChatGroup/AutoReply/AutoReplyForm.tsx

@@ -0,0 +1,50 @@
+import { Button, Form } from 'antd';
+import { Dayjs } from 'dayjs';
+import { customize } from '../../customize';
+import { useLocalizer } from '../../localizer';
+import { AutoReplyPeriodInput } from './AutoReplyPeriodInput';
+import { AutoReplyTextInput } from './AutoReplyTextInput';
+import { useEffect } from 'react';
+
+export interface AutoReplyFormValue {
+  period: [Dayjs, Dayjs];
+  text: string;
+}
+
+export interface AutoReplyFormProps {
+  value: AutoReplyFormValue;
+  onSubmit: (value: AutoReplyFormValue) => void;
+  busy?: boolean;
+}
+
+export const AUTO_REPLY_FORM_INITIAL_VALUE: AutoReplyFormValue = {
+  period: [] as unknown as [Dayjs, Dayjs],
+  text: '',
+};
+
+export const AutoReplyForm = customize('AutoReplyForm', (props: AutoReplyFormProps) => {
+  const { value, busy = false, onSubmit } = props;
+  const localizer = useLocalizer();
+
+  const [form] = Form.useForm<AutoReplyFormValue>();
+
+  useEffect(() => {
+    form.setFieldsValue(value);
+  }, [value, form]);
+
+  return (
+    <Form<AutoReplyFormValue>
+      form={form}
+      layout="vertical"
+      onFinish={onSubmit}
+      disabled={busy}
+      initialValues={value}
+    >
+      <AutoReplyPeriodInput name="period" />
+      <AutoReplyTextInput name="text" />
+      <Button loading={busy} type="primary" block htmlType="submit">
+        {localizer.autoReply.submitBtn()}
+      </Button>
+    </Form>
+  );
+});