@webinex/chatify 2.0.0-alpha1 → 2.0.0-alpha12

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

@@ -0,0 +1,94 @@
+import dayjs from 'dayjs';
+import { useCallback, useMemo } from 'react';
+import { Button } from 'antd';
+import { customize } from '../../customize';
+import { useLocalizer } from '../../localizer';
+import { useChatGroupContext } from '../ChatGroupContext';
+import { Icon } from '../../common/Icon';
+import { AutoReply } from '../../../core';
+import { chatifyApi } from '../../../core';
+import { AUTO_REPLY_FORM_INITIAL_VALUE, AutoReplyForm, AutoReplyFormValue } from './AutoReplyForm';
+
+function mapToFormValue(autoReply?: AutoReply | null): AutoReplyFormValue {
+  if (!autoReply) {
+    return AUTO_REPLY_FORM_INITIAL_VALUE;
+  }
+
+  return {
+    period: [dayjs(autoReply.period.start), dayjs(autoReply.period.end)],
+    text: autoReply.text,
+  };
+}
+
+function useValue() {
+  const { data: me } = chatifyApi.useGeCurrentUserAccountQuery();
+
+  const value = useMemo<AutoReplyFormValue>(() => {
+    return mapToFormValue(me?.autoReply);
+  }, [me]);
+
+  return value;
+}
+
+function useAutoReplyActions() {
+  const meId = chatifyApi.settings.me();
+  const [updateAccount, { isLoading }] = chatifyApi.useUpdateAccountMutation();
+
+  const onSubmit = useCallback(
+    (value: AutoReplyFormValue) =>
+      updateAccount({
+        id: meId,
+        autoReply: {
+          hasValue: true,
+          value: {
+            text: value.text,
+            period: {
+              start: value.period[0].toISOString(),
+              end: value.period[1].toISOString(),
+            },
+          },
+        },
+      }).unwrap(),
+    [updateAccount, meId],
+  );
+
+  const onClear = useCallback(
+    () =>
+      updateAccount({
+        id: meId,
+        autoReply: {
+          hasValue: true,
+          value: null,
+        },
+      }).unwrap(),
+    [updateAccount, meId],
+  );
+
+  return [onSubmit, isLoading, onClear] as const;
+}
+
+export const AutoReplyPanel = customize('AutoReplyPanel', () => {
+  const localizer = useLocalizer();
+  const { toggleAutoReply } = useChatGroupContext();
+  const value = useValue();
+  const [onSubmit, submitting, onClear] = useAutoReplyActions();
+
+  return (
+    <div className="wxchtf-auto-reply-panel">
+      <Button
+        onClick={toggleAutoReply}
+        className="wxchtf-auto-reply-panel-close"
+        type="link"
+        icon={<Icon type="close" />}
+      />
+      <div className="wxchtf-auto-reply-panel-header">
+        <h3>{localizer.autoReply.title()}</h3>
+        <Button type="link" onClick={onClear} disabled={submitting} className="wxchtf-auto-reply-panel-clear">
+          {localizer.autoReply.clearBtn()}
+        </Button>
+      </div>
+
+      <AutoReplyForm value={value} busy={submitting ?? false} onSubmit={onSubmit} />
+    </div>
+  );
+});

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

@@ -0,0 +1,22 @@
+import { DatePicker, Form } from 'antd';
+import { customize } from '../../customize';
+import { useLocalizer } from '../../localizer';
+
+export interface AutoReplyPeriodInputProps {
+  name: string;
+}
+
+export const AutoReplyPeriodInput = customize('AutoReplyPeriodInput', (props: AutoReplyPeriodInputProps) => {
+  const { name } = props;
+  const localizer = useLocalizer();
+
+  return (
+    <Form.Item
+      label={localizer.autoReply.period.label()}
+      name={name}
+      rules={[{ required: true, message: localizer.autoReply.period.required() }]}
+    >
+      <DatePicker.RangePicker format={localizer.autoReply.period.format()} />
+    </Form.Item>
+  );
+});

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

@@ -0,0 +1,22 @@
+import { Form, Input } from 'antd';
+import { customize } from '../../customize';
+import { useLocalizer } from '../../localizer';
+
+export interface AutoReplyTextInputProps {
+  name: string;
+}
+
+export const AutoReplyTextInput = customize('AutoReplyTextInput', (props: AutoReplyTextInputProps) => {
+  const { name } = props;
+  const localizer = useLocalizer();
+
+  return (
+    <Form.Item
+      label={localizer.autoReply.text.label()}
+      name={name}
+      rules={[{ required: true, message: localizer.autoReply.text.required() }]}
+    >
+      <Input.TextArea rows={4} />
+    </Form.Item>
+  );
+});

package/src/ui/ChatGroup/AutoReply/index.ts

@@ -0,0 +1,19 @@
+import { AutoReplyButton } from './AutoReplyButton';
+import { AutoReplyForm } from './AutoReplyForm';
+import { AutoReplyPanel } from './AutoReplyPanel';
+import { AutoReplyPeriodInput } from './AutoReplyPeriodInput';
+import { AutoReplyTextInput } from './AutoReplyTextInput';
+
+export * from './AutoReplyButton';
+export * from './AutoReplyForm';
+export * from './AutoReplyPanel';
+export * from './AutoReplyPeriodInput';
+export * from './AutoReplyTextInput';
+
+export interface AutoReplyCustomizeValue {
+  AutoReplyButton?: typeof AutoReplyButton.Component | null;
+  AutoReplyForm?: typeof AutoReplyForm.Component | null;
+  AutoReplyPanel?: typeof AutoReplyPanel.Component | null;
+  AutoReplyPeriodInput?: typeof AutoReplyPeriodInput.Component | null;
+  AutoReplyTextInput?: typeof AutoReplyTextInput.Component | null;
+}

package/src/ui/ChatGroup/ChatGroupContext.tsx

@@ -1,50 +1,61 @@
-import React, { PropsWithChildren, useContext, useMemo, useState } from 'react';
-
-export interface ChatGroupContext {
-  view: 'chat' | 'new-chat' | null;
-  chatId: string | null;
-  showMembers: boolean;
-
-  none(): void;
-  openChat(chatId: string): void;
-  toggleNewChat(): void;
-  toggleMembers(): void;
-}
-
-const ChatGroupReactContext = React.createContext<ChatGroupContext>(null!);
-
-export function useChatGroupContext() {
-  return useContext(ChatGroupReactContext);
-}
-
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-export function ChatGroupContext(props: PropsWithChildren<{}>) {
-  const { children } = props;
-  const [state, setState] = useState<Pick<ChatGroupContext, 'view' | 'chatId' | 'showMembers'>>({
-    chatId: null,
-    view: null,
-    showMembers: false,
-  });
-
-  const value = useMemo<ChatGroupContext>(
-    () => ({
-      ...state,
-      openChat: (chatId: string) => setState((prev) => ({ ...prev, view: 'chat', chatId })),
-      none: () => setState((prev) => ({ ...prev, view: null, chatId: null })),
-      toggleMembers: () => setState((prev) => ({ ...prev, showMembers: !prev.showMembers })),
-      toggleNewChat: () =>
-        setState((prev) => {
-          if (prev.view === 'new-chat' && !prev.chatId) {
-            return { ...prev, view: null };
-          } else if (prev.view === 'new-chat' && prev.chatId) {
-            return { ...prev, view: 'chat' };
-          } else {
-            return { ...prev, view: 'new-chat' };
-          }
-        }),
-    }),
-    [state],
-  );
-
-  return <ChatGroupReactContext.Provider value={value}>{children}</ChatGroupReactContext.Provider>;
-}
+import React, { PropsWithChildren, useContext, useMemo, useState } from 'react';
+
+export interface ChatGroupContext {
+  view: 'chat' | 'new-chat' | 'auto-reply' | null;
+  chatId: string | null;
+  showMembers: boolean;
+
+  none(): void;
+  openChat(chatId: string): void;
+  toggleNewChat(): void;
+  toggleMembers(): void;
+  toggleAutoReply(): void;
+}
+
+const ChatGroupReactContext = React.createContext<ChatGroupContext>(null!);
+
+export function useChatGroupContext() {
+  return useContext(ChatGroupReactContext);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export function ChatGroupContext(props: PropsWithChildren<{}>) {
+  const { children } = props;
+  const [state, setState] = useState<Pick<ChatGroupContext, 'view' | 'chatId' | 'showMembers'>>({
+    chatId: null,
+    view: null,
+    showMembers: false,
+  });
+
+  const value = useMemo<ChatGroupContext>(
+    () => ({
+      ...state,
+      openChat: (chatId: string) => setState((prev) => ({ ...prev, view: 'chat', chatId })),
+      none: () => setState((prev) => ({ ...prev, view: null, chatId: null })),
+      toggleMembers: () => setState((prev) => ({ ...prev, showMembers: !prev.showMembers })),
+      toggleNewChat: () =>
+        setState((prev) => {
+          if (prev.view === 'new-chat' && !prev.chatId) {
+            return { ...prev, view: null };
+          } else if (prev.view === 'new-chat' && prev.chatId) {
+            return { ...prev, view: 'chat' };
+          } else {
+            return { ...prev, view: 'new-chat' };
+          }
+        }),
+      toggleAutoReply: () =>
+        setState((prev) => {
+          if (prev.view === 'auto-reply' && prev.chatId) {
+            return { ...prev, view: 'chat' };
+          } else if (prev.view === 'auto-reply' && !prev.chatId) {
+            return { ...prev, view: null };
+          } else {
+            return { ...prev, view: 'auto-reply' };
+          }
+        }),
+    }),
+    [state],
+  );
+
+  return <ChatGroupReactContext.Provider value={value}>{children}</ChatGroupReactContext.Provider>;
+}

package/src/ui/ChatGroup/ChatGroupPanel.tsx

@@ -1,73 +1,75 @@
-import { CSSProperties, FC, useEffect, useMemo, useRef } from 'react';
-import { Localizer, LocalizerContext, defaultLocalizer } from '../localizer';
-import { CreateChatPanelCustomizeValue } from './Create';
-import { ChatGroupBody, ChatGroupFooter, ChatGroupHeader, ChatGroupLayoutCustomizeValue } from './Layout';
-import { ChatListCustomizeValue } from './List';
-import { ChatGroupContext, useChatGroupContext } from './ChatGroupContext';
-import { chatifyApi } from '../../core';
-import { CustomizeContext } from '../customize';
-import { ChatViewCustomizeValue } from '../Chat';
-
-export interface ChatGroupCustomizeValue
-  extends ChatViewCustomizeValue,
-    CreateChatPanelCustomizeValue,
-    ChatListCustomizeValue,
-    ChatGroupLayoutCustomizeValue {}
-
-export interface ChatifyProps {
-  className?: string;
-  style?: CSSProperties;
-  localizer?: Localizer;
-  customize?: ChatGroupCustomizeValue;
-}
-
-function Content(props: Pick<ChatifyProps, 'className' | 'style'>) {
-  const { className = '', style } = props;
-  const { data: chats } = chatifyApi.useGetChatListQuery();
-  const { openChat, none, chatId } = useChatGroupContext();
-  const openFirstChatRef = useRef(false);
-
-  useEffect(() => {
-    if (chats && !chats.some((x) => x.id === chatId)) {
-      chats.length ? openChat(chats[0].id) : none();
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chats, chatId]);
-
-  useEffect(() => {
-    if (chats && !openFirstChatRef.current) {
-      openFirstChatRef.current = true;
-      chats.length && openChat(chats[0].id);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chats]);
-
-  return (
-    <div className={className + ' wxchtf-chatify wxchtf-chat-group'} style={style}>
-      <ChatGroupHeader />
-      <ChatGroupBody />
-      <ChatGroupFooter />
-    </div>
-  );
-}
-
-const DEFAULT_CUSTOMIZE: ChatGroupCustomizeValue = {
-  ChatGroupHeader: null,
-  ChatGroupFooter: null,
-};
-
-export const ChatGroupPanel: FC<ChatifyProps> = (props) => {
-  const { localizer = defaultLocalizer, customize = DEFAULT_CUSTOMIZE } = props;
-  const customizeValue = useMemo(() => Object.assign({}, DEFAULT_CUSTOMIZE, customize), [customize]);
-
-  return (
-    <LocalizerContext.Provider value={localizer}>
-      <CustomizeContext.Provider value={customizeValue as any}>
-        <ChatGroupContext>
-          <Content {...props} />
-        </ChatGroupContext>
-      </CustomizeContext.Provider>
-    </LocalizerContext.Provider>
-  );
-};
+import { CSSProperties, FC, useEffect, useMemo, useRef } from 'react';
+import { Localizer, LocalizerContext, defaultLocalizer } from '../localizer';
+import { CreateChatPanelCustomizeValue } from './Create';
+import { ChatGroupBody, ChatGroupFooter, ChatGroupHeader, ChatGroupLayoutCustomizeValue } from './Layout';
+import { ChatListPanelCustomizeValue } from './List';
+import { ChatGroupContext, useChatGroupContext } from './ChatGroupContext';
+import { chatifyApi } from '../../core';
+import { CustomizeContext } from '../customize';
+import { ChatViewCustomizeValue } from '../Chat';
+import { AutoReplyCustomizeValue } from './AutoReply';
+
+export interface ChatGroupCustomizeValue
+  extends ChatViewCustomizeValue,
+    AutoReplyCustomizeValue,
+    CreateChatPanelCustomizeValue,
+    ChatListPanelCustomizeValue,
+    ChatGroupLayoutCustomizeValue {}
+
+export interface ChatifyProps {
+  className?: string;
+  style?: CSSProperties;
+  localizer?: Localizer;
+  customize?: ChatGroupCustomizeValue;
+}
+
+function Content(props: Pick<ChatifyProps, 'className' | 'style'>) {
+  const { className = '', style } = props;
+  const { data: chats } = chatifyApi.useGetChatListQuery();
+  const { openChat, none, chatId } = useChatGroupContext();
+  const openFirstChatRef = useRef(false);
+
+  useEffect(() => {
+    if (chats && !chats.some((x) => x.id === chatId)) {
+      chats.length ? openChat(chats[0].id) : none();
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chats, chatId]);
+
+  useEffect(() => {
+    if (chats && !openFirstChatRef.current) {
+      openFirstChatRef.current = true;
+      chats.length && openChat(chats[0].id);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chats]);
+
+  return (
+    <div className={className + ' wxchtf-chatify wxchtf-chat-group'} style={style}>
+      <ChatGroupHeader />
+      <ChatGroupBody />
+      <ChatGroupFooter />
+    </div>
+  );
+}
+
+const DEFAULT_CUSTOMIZE: ChatGroupCustomizeValue = {
+  ChatGroupHeader: null,
+  ChatGroupFooter: null,
+};
+
+export const ChatGroupPanel: FC<ChatifyProps> = (props) => {
+  const { localizer = defaultLocalizer, customize = DEFAULT_CUSTOMIZE } = props;
+  const customizeValue = useMemo(() => Object.assign({}, DEFAULT_CUSTOMIZE, customize), [customize]);
+
+  return (
+    <LocalizerContext.Provider value={localizer}>
+      <CustomizeContext.Provider value={customizeValue as any}>
+        <ChatGroupContext>
+          <Content {...props} />
+        </ChatGroupContext>
+      </CustomizeContext.Provider>
+    </LocalizerContext.Provider>
+  );
+};

package/src/ui/ChatGroup/Create/CreateChatButton.tsx

@@ -1,15 +1,15 @@
-import { Button } from 'antd';
-import { customize } from '../../customize';
-import { useChatGroupContext } from '../ChatGroupContext';
-
-export const CreateChatButton = customize('CreateChatButton', () => {
-  const { toggleNewChat } = useChatGroupContext();
-
-  return (
-    <span className="wxchtf-add-btn-wrapper">
-      <Button className="wxchtf-add-btn" onClick={toggleNewChat} icon="+">
-        Add chat
-      </Button>
-    </span>
-  );
-});
+import { Button } from 'antd';
+import { customize } from '../../customize';
+import { useChatGroupContext } from '../ChatGroupContext';
+
+export const CreateChatButton = customize('CreateChatButton', () => {
+  const { toggleNewChat } = useChatGroupContext();
+
+  return (
+    <span className="wxchtf-add-btn-wrapper">
+      <Button className="wxchtf-add-btn" onClick={toggleNewChat} icon="+">
+        Add chat
+      </Button>
+    </span>
+  );
+});

package/src/ui/ChatGroup/Create/CreateChatForm.tsx

@@ -1,36 +1,36 @@
-import { Button, Form } from 'antd';
-import { customize } from '../../customize';
-import { CreateChatNameInput } from './CreateChatNameInput';
-import { CreateChatMemberInput } from './CreateChatMemberInput';
-import { useLocalizer } from '../../localizer';
-
-export interface CreateChatFormValue {
-  name: string;
-  members: string[];
-}
-
-export interface CreateChatFormProps {
-  value?: CreateChatFormValue;
-  onSubmit: (value: CreateChatFormValue) => void;
-  busy?: boolean;
-}
-
-const INITIAL_VALUE: CreateChatFormValue = {
-  name: '',
-  members: [],
-};
-
-export const CreateChatForm = customize('CreateChatForm', (props: CreateChatFormProps) => {
-  const { value = INITIAL_VALUE, onSubmit, busy = false } = props;
-  const localizer = useLocalizer();
-
-  return (
-    <Form onFinish={onSubmit} layout="vertical" disabled={busy} initialValues={value}>
-      <CreateChatNameInput name="name" />
-      <CreateChatMemberInput name="members" />
-      <Button loading={busy} type="primary" block htmlType="submit">
-        {localizer.addChat.submitBtn()}
-      </Button>
-    </Form>
-  );
-});
+import { Button, Form } from 'antd';
+import { customize } from '../../customize';
+import { CreateChatNameInput } from './CreateChatNameInput';
+import { CreateChatMemberInput } from './CreateChatMemberInput';
+import { useLocalizer } from '../../localizer';
+
+export interface CreateChatFormValue {
+  name: string;
+  members: string[];
+}
+
+export interface CreateChatFormProps {
+  value?: CreateChatFormValue;
+  onSubmit: (value: CreateChatFormValue) => void;
+  busy?: boolean;
+}
+
+const INITIAL_VALUE: CreateChatFormValue = {
+  name: '',
+  members: [],
+};
+
+export const CreateChatForm = customize('CreateChatForm', (props: CreateChatFormProps) => {
+  const { value = INITIAL_VALUE, onSubmit, busy = false } = props;
+  const localizer = useLocalizer();
+
+  return (
+    <Form onFinish={onSubmit} layout="vertical" disabled={busy} initialValues={value}>
+      <CreateChatNameInput name="name" />
+      <CreateChatMemberInput name="members" />
+      <Button loading={busy} type="primary" block htmlType="submit">
+        {localizer.addChat.submitBtn()}
+      </Button>
+    </Form>
+  );
+});

package/src/ui/ChatGroup/Create/CreateChatMemberInput.tsx

@@ -1,65 +1,65 @@
-import { useMemo } from 'react';
-import { chatifyApi } from '../../../core';
-import { customize } from '../../customize';
-import { Checkbox, Form, List } from 'antd';
-import { useLocalizer } from '../../localizer';
-import { Avatar } from '../../common/Avatar';
-
-export interface CreateChatMemberInputProps {
-  name: string;
-}
-
-interface CheckboxListProps {
-  value?: string[];
-  onChange?: (value: string[]) => void;
-}
-
-function CheckboxList(props: CheckboxListProps) {
-  const { value, onChange } = props;
-  const { data: accounts, isFetching } = chatifyApi.useGetAccountListQuery();
-  const me = chatifyApi.settings.me();
-  const dataSource = useMemo(() => accounts?.filter((x) => x.id !== me) ?? [], [accounts, me]);
-
-  return (
-    <List
-      rowKey="id"
-      className="wxchtf-create-chat-member-input-list"
-      loading={isFetching}
-      dataSource={dataSource}
-      renderItem={(x) => {
-        const checked = value!.includes(x.id);
-
-        return (
-          <List.Item className={checked ? '--selected' : ''}>
-            <Checkbox
-              checked={checked}
-              onChange={() =>
-                onChange!(value!.includes(x.id) ? value!.filter((y) => y !== x.id) : [...value!, x.id])
-              }
-            >
-              <List.Item.Meta avatar={<Avatar account={x} />} title={x.name} />
-            </Checkbox>
-          </List.Item>
-        );
-      }}
-    />
-  );
-}
-
-export const CreateChatMemberInput = customize(
-  'CreateChatMemberInput',
-  (props: CreateChatMemberInputProps) => {
-    const { name } = props;
-    const localizer = useLocalizer();
-
-    return (
-      <Form.Item
-        label={localizer.addChat.members.label()}
-        rules={[{ required: true, message: localizer.addChat.members.required() }]}
-        name={name}
-      >
-        <CheckboxList />
-      </Form.Item>
-    );
-  },
-);
+import { useMemo } from 'react';
+import { chatifyApi } from '../../../core';
+import { customize } from '../../customize';
+import { Checkbox, Form, List } from 'antd';
+import { useLocalizer } from '../../localizer';
+import { Avatar } from '../../common/Avatar';
+
+export interface CreateChatMemberInputProps {
+  name: string;
+}
+
+interface CheckboxListProps {
+  value?: string[];
+  onChange?: (value: string[]) => void;
+}
+
+function CheckboxList(props: CheckboxListProps) {
+  const { value, onChange } = props;
+  const { data: accounts, isFetching } = chatifyApi.useGetAccountListQuery({});
+  const me = chatifyApi.settings.me();
+  const dataSource = useMemo(() => accounts?.filter((x) => x.id !== me) ?? [], [accounts, me]);
+
+  return (
+    <List
+      rowKey="id"
+      className="wxchtf-create-chat-member-input-list"
+      loading={isFetching}
+      dataSource={dataSource}
+      renderItem={(x) => {
+        const checked = value!.includes(x.id);
+
+        return (
+          <List.Item className={checked ? '--selected' : ''}>
+            <Checkbox
+              checked={checked}
+              onChange={() =>
+                onChange!(value!.includes(x.id) ? value!.filter((y) => y !== x.id) : [...value!, x.id])
+              }
+            >
+              <List.Item.Meta avatar={<Avatar account={x} />} title={x.name} />
+            </Checkbox>
+          </List.Item>
+        );
+      }}
+    />
+  );
+}
+
+export const CreateChatMemberInput = customize(
+  'CreateChatMemberInput',
+  (props: CreateChatMemberInputProps) => {
+    const { name } = props;
+    const localizer = useLocalizer();
+
+    return (
+      <Form.Item
+        label={localizer.addChat.members.label()}
+        rules={[{ required: true, message: localizer.addChat.members.required() }]}
+        name={name}
+      >
+        <CheckboxList />
+      </Form.Item>
+    );
+  },
+);