@webinex/chatify 2.0.0-alpha10 → 2.0.0-alpha12

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

@@ -32,7 +32,7 @@ function useRemove(chatId: string, accountId: string, deleteHistory: boolean) {
 const ChatMemberListItem = customize('ChatMemberListItem', (props: ChatMemberListItemProps) => {
   const { chatId } = props;
   const { data: chat } = chatifyApi.useGetChatQuery({ id: chatId });
-  const { data: accounts } = chatifyApi.useGetAccountListQuery();
+  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);
@@ -82,7 +82,7 @@ const ChatMemberListItem = customize('ChatMemberListItem', (props: ChatMemberLis
 export const ChatMembersPanel = customize('ChatMembersPanel', () => {
   const { id } = useChatContext();
   const { data: chat } = chatifyApi.useGetChatQuery({ id });
-  const { data: accounts } = chatifyApi.useGetAccountListQuery();
+  const { data: accounts } = chatifyApi.useGetAccountListQuery({});
   const ordered = useMemo(
     () =>
       accounts

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

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,7 +1,7 @@
 import React, { PropsWithChildren, useContext, useMemo, useState } from 'react';
 
 export interface ChatGroupContext {
-  view: 'chat' | 'new-chat' | null;
+  view: 'chat' | 'new-chat' | 'auto-reply' | null;
   chatId: string | null;
   showMembers: boolean;
 
@@ -9,6 +9,7 @@ export interface ChatGroupContext {
   openChat(chatId: string): void;
   toggleNewChat(): void;
   toggleMembers(): void;
+  toggleAutoReply(): void;
 }
 
 const ChatGroupReactContext = React.createContext<ChatGroupContext>(null!);
@@ -42,6 +43,16 @@ export function ChatGroupContext(props: PropsWithChildren<{}>) {
             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],
   );

package/src/ui/ChatGroup/ChatGroupPanel.tsx

@@ -7,9 +7,11 @@ 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 {}

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

@@ -16,7 +16,7 @@ interface CheckboxListProps {
 
 function CheckboxList(props: CheckboxListProps) {
   const { value, onChange } = props;
-  const { data: accounts, isFetching } = chatifyApi.useGetAccountListQuery();
+  const { data: accounts, isFetching } = chatifyApi.useGetAccountListQuery({});
   const me = chatifyApi.settings.me();
   const dataSource = useMemo(() => accounts?.filter((x) => x.id !== me) ?? [], [accounts, me]);
 

package/src/ui/ChatGroup/Layout/ChatGroupActions.tsx

@@ -0,0 +1,15 @@
+import { Space } from 'antd';
+import { CreateChatButton } from '../Create';
+import { AutoReplyButton } from '../AutoReply/AutoReplyButton';
+import { customize } from '../../customize';
+
+export const ChatGroupActions = customize('ChatGroupActions', () => {
+  return (
+    <span className="wxchtf-add-btn-wrapper">
+      <Space.Compact className="wxchtf-add-btn-group">
+        <CreateChatButton />
+        <AutoReplyButton />
+      </Space.Compact>
+    </span>
+  );
+});

package/src/ui/ChatGroup/Layout/ChatGroupAside.tsx

@@ -1,11 +1,11 @@
 import { customize } from '../../customize';
 import { ChatListPanel } from '../List';
-import { CreateChatButton } from '../Create/CreateChatButton';
+import { ChatGroupActions } from './ChatGroupActions';
 
 export const ChatGroupAside = customize('ChatGroupAside', () => {
   return (
     <div className="wxchtf-aside">
-      <CreateChatButton />
+      <ChatGroupActions />
       <ChatListPanel />
     </div>
   );

package/src/ui/ChatGroup/Layout/ChatGroupMain.tsx

@@ -3,6 +3,7 @@ import { CreateChatPanel } from '../Create';
 import { ChatView } from '../../Chat';
 import { useChatGroupContext } from '../ChatGroupContext';
 import { chatifyApi } from '../../../core';
+import { AutoReplyPanel } from '../AutoReply';
 
 export const ChatGroupMain = customize('ChatGroupMain', () => {
   const { chatId, view } = useChatGroupContext();
@@ -12,6 +13,7 @@ export const ChatGroupMain = customize('ChatGroupMain', () => {
     <div className="wxchtf-main">
       {view === 'chat' && chat && <ChatView value={chat} key={chatId} />}
       {view === 'new-chat' && <CreateChatPanel />}
+      {view === 'auto-reply' && <AutoReplyPanel />}
     </div>
   );
 });

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

@@ -1,9 +1,11 @@
+import { ChatGroupActions } from './ChatGroupActions';
 import { ChatGroupAside } from './ChatGroupAside';
 import { ChatGroupHeader } from './ChatGroupHeader';
 import { ChatGroupFooter } from './ChatGroupFooter';
 import { ChatGroupMain } from './ChatGroupMain';
 import { ChatGroupBody } from './ChatGroupBody';
 
+export * from './ChatGroupActions';
 export * from './ChatGroupAside';
 export * from './ChatGroupHeader';
 export * from './ChatGroupFooter';
@@ -11,6 +13,7 @@ export * from './ChatGroupMain';
 export * from './ChatGroupBody';
 
 export interface ChatGroupLayoutCustomizeValue {
+  ChatGroupActions?: typeof ChatGroupActions.Component | null;
   ChatGroupAside?: typeof ChatGroupAside.Component | null;
   ChatGroupHeader?: typeof ChatGroupHeader.Component | null;
   ChatGroupFooter?: typeof ChatGroupFooter.Component | null;

package/src/ui/ChatGroup/index.ts

@@ -1,3 +1,4 @@
+export * from './AutoReply';
 export * from './Create';
 export * from './Layout';
 export * from './List';

package/src/ui/common/Icon.tsx

@@ -14,6 +14,7 @@ import {
   EyeOutlined,
   DeleteOutlined,
   DownloadOutlined,
+  SettingOutlined,
 } from '@ant-design/icons';
 
 export type IconType = keyof typeof ICONS;
@@ -37,6 +38,7 @@ export const ICONS = {
   unwatch: EyeInvisibleOutlined,
   'delete-file': DeleteOutlined,
   'open-file': DownloadOutlined,
+  settings: SettingOutlined,
 };
 
 export const Icon = customize<FC<IconProps>>('Icon', (props) => {

package/src/ui/localizer.tsx

@@ -43,6 +43,22 @@ export interface LocalizerBase {
   chatList: {
     topShown: (count: number) => string;
   };
+
+  autoReply: {
+    buttonTitle: () => string;
+    title: () => React.ReactNode;
+    period: {
+      label: () => React.ReactNode;
+      required: () => string;
+      format: () => string;
+    };
+    text: {
+      label: () => React.ReactNode;
+      required: () => string;
+    };
+    submitBtn: () => React.ReactNode;
+    clearBtn: () => React.ReactNode;
+  };
 }
 
 export interface Localizer extends LocalizerBase {}
@@ -103,6 +119,19 @@ const base: LocalizerBase = {
   chatList: {
     topShown: (count: number) => `Latest active ${count} chat${count !== 1 ? 's' : ''} shown`,
   },
+
+  autoReply: {
+    buttonTitle: () => 'Auto-reply',
+    title: () => 'Auto-reply',
+    period: {
+      label: () => 'Period',
+      required: () => 'Please select start and end date',
+      format: () => 'DD/MM/YYYY',
+    },
+    text: { label: () => 'Message', required: () => 'Please enter message' },
+    submitBtn: () => 'Submit',
+    clearBtn: () => 'Clear',
+  },
 };
 
 export const defaultLocalizer: Localizer = base as unknown as Localizer;