@webinex/chatify 2.0.0-alpha10 → 2.0.0-alpha13

package/dist/types/core/client.d.ts

@@ -52,7 +52,10 @@ export declare class ChatifyClient {
     subscribe: <TMethod extends ChatifySignalRMethod>(method: TMethod, subscriber: (args: ChatifySignalRArgsByMethod[TMethod]) => void) => () => ((args: any[]) => void)[];
     subscribeReconnect: (subscriber: () => any) => () => (() => void)[];
     get axios(): AxiosInstance;
-    accounts: () => Promise<Account[]>;
+    accounts: (args: {
+        ids?: string[];
+    }) => Promise<Account[]>;
+    currentUserAccount: () => Promise<Account>;
     updateAccount: (request: UpdateAccountRequest) => Promise<void>;
     chats: () => Promise<ChatListItem[]>;
     chat: (id: string) => Promise<Chat>;

package/dist/types/ui/ChatGroup/AutoReply/AutoReplyButton.d.ts

@@ -0,0 +1 @@
+export declare const AutoReplyButton: import('../../../index.ts').Customizable<import('react').ComponentType<unknown>>;

package/dist/types/ui/ChatGroup/AutoReply/AutoReplyForm.d.ts

@@ -0,0 +1,12 @@
+import { Dayjs } from 'dayjs';
+export interface AutoReplyFormValue {
+    period: [Dayjs, Dayjs];
+    text: string;
+}
+export interface AutoReplyFormProps {
+    value: AutoReplyFormValue;
+    onSubmit: (value: AutoReplyFormValue) => void;
+    busy?: boolean;
+}
+export declare const AUTO_REPLY_FORM_INITIAL_VALUE: AutoReplyFormValue;
+export declare const AutoReplyForm: import('../../../index.ts').Customizable<import('react').ComponentType<AutoReplyFormProps>>;

package/dist/types/ui/ChatGroup/AutoReply/AutoReplyPanel.d.ts

@@ -0,0 +1 @@
+export declare const AutoReplyPanel: import('../../../index.ts').Customizable<import('react').ComponentType<unknown>>;

package/dist/types/ui/ChatGroup/AutoReply/AutoReplyPeriodInput.d.ts

@@ -0,0 +1,4 @@
+export interface AutoReplyPeriodInputProps {
+    name: string;
+}
+export declare const AutoReplyPeriodInput: import('../../../index.ts').Customizable<import('react').ComponentType<AutoReplyPeriodInputProps>>;

package/dist/types/ui/ChatGroup/AutoReply/AutoReplyTextInput.d.ts

@@ -0,0 +1,4 @@
+export interface AutoReplyTextInputProps {
+    name: string;
+}
+export declare const AutoReplyTextInput: import('../../../index.ts').Customizable<import('react').ComponentType<AutoReplyTextInputProps>>;

package/dist/types/ui/ChatGroup/AutoReply/index.d.ts

@@ -0,0 +1,17 @@
+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/dist/types/ui/ChatGroup/ChatGroupContext.d.ts

@@ -1,12 +1,13 @@
 import { PropsWithChildren } from 'react';
 export interface ChatGroupContext {
-    view: 'chat' | 'new-chat' | null;
+    view: 'chat' | 'new-chat' | 'auto-reply' | null;
     chatId: string | null;
     showMembers: boolean;
     none(): void;
     openChat(chatId: string): void;
     toggleNewChat(): void;
     toggleMembers(): void;
+    toggleAutoReply(): void;
 }
 export declare function useChatGroupContext(): ChatGroupContext;
 export declare function ChatGroupContext(props: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;

package/dist/types/ui/ChatGroup/ChatGroupPanel.d.ts

@@ -4,7 +4,8 @@ import { CreateChatPanelCustomizeValue } from './Create';
 import { ChatGroupLayoutCustomizeValue } from './Layout';
 import { ChatListPanelCustomizeValue } from './List';
 import { ChatViewCustomizeValue } from '../Chat';
-export interface ChatGroupCustomizeValue extends ChatViewCustomizeValue, CreateChatPanelCustomizeValue, ChatListPanelCustomizeValue, ChatGroupLayoutCustomizeValue {
+import { AutoReplyCustomizeValue } from './AutoReply';
+export interface ChatGroupCustomizeValue extends ChatViewCustomizeValue, AutoReplyCustomizeValue, CreateChatPanelCustomizeValue, ChatListPanelCustomizeValue, ChatGroupLayoutCustomizeValue {
 }
 export interface ChatifyProps {
     className?: string;

package/dist/types/ui/ChatGroup/Layout/ChatGroupActions.d.ts

@@ -0,0 +1 @@
+export declare const ChatGroupActions: import('../../../index.ts').Customizable<import('react').ComponentType<unknown>>;

package/dist/types/ui/ChatGroup/Layout/index.d.ts

@@ -1,14 +1,17 @@
+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';
 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/dist/types/ui/ChatGroup/index.d.ts

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

package/dist/types/ui/common/Icon.d.ts

@@ -17,5 +17,6 @@ export declare const ICONS: {
     unwatch: import('react').ForwardRefExoticComponent<Omit<import('@ant-design/icons/lib/components/AntdIcon').AntdIconProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
     'delete-file': import('react').ForwardRefExoticComponent<Omit<import('@ant-design/icons/lib/components/AntdIcon').AntdIconProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
     'open-file': import('react').ForwardRefExoticComponent<Omit<import('@ant-design/icons/lib/components/AntdIcon').AntdIconProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+    settings: import('react').ForwardRefExoticComponent<Omit<import('@ant-design/icons/lib/components/AntdIcon').AntdIconProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
 };
 export declare const Icon: import('../../index.ts').Customizable<import('react').ComponentType<IconProps>>;

package/dist/types/ui/localizer.d.ts

@@ -37,6 +37,21 @@ 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 {
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@webinex/chatify",
   "description": "Webinex Chatify",
   "private": false,
-  "version": "2.0.0-alpha10",
+  "version": "2.0.0-alpha13",
   "author": "Webinex Dev",
   "license": "Apache-2.0",
   "type": "module",

package/src/audit/AuditSearch.tsx

@@ -42,7 +42,7 @@ 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 { data: accounts, isLoading } = chatifyApi.useGetAccountListQuery({});
   const options = useOptions(accounts, searchValue);
   const localizer = useLocalizer();
 

package/src/core/api/api.ts

@@ -1,4 +1,4 @@
-import { DEFAULT_MESSAGE_LIST_TAKE, __baseApi, __settings } from './baseApi';
+import { ChatifyApiSettings, DEFAULT_MESSAGE_LIST_TAKE, __baseApi, __settings } from './baseApi';
 import { useSelector } from 'react-redux';
 import {
   Account,
@@ -12,6 +12,7 @@ import {
   Thread,
   ThreadMessage,
   ThreadWatchListItem,
+  UpdateAccountRequest,
   calcThreadListUnreadCount,
   chatId,
   parseThreadMessageId,
@@ -50,11 +51,24 @@ const __chatifyApi = __baseApi.injectEndpoints({
     // ==============     ACCOUNT    ======================
     // ====================================================
 
-    getAccountList: builder.query<Account[], void>({
-      queryFn: async () => ({ data: await __settings.client.accounts() }),
+    getAccountList: builder.query<Account[], { ids?: string[] }>({
+      queryFn: async (args) => ({ data: await __settings.client.accounts(args) }),
       providesTags: ['account'],
     }),
 
+    geCurrentUserAccount: builder.query<Account | null, void>({
+      queryFn: async () => ({ data: await __settings.client.currentUserAccount() }),
+      providesTags: ['account'],
+    }),
+
+    updateAccount: builder.mutation<void, UpdateAccountRequest>({
+      queryFn: async (request) => {
+        await __settings.client.updateAccount(request);
+        return { data: null! };
+      },
+      invalidatesTags: ['account'],
+    }),
+
     // ====================================================
     // ================     CHAT    =======================
     // ====================================================
@@ -648,7 +662,13 @@ export function useUnreadThreadMessageCount() {
   return [count, state] as const;
 }
 
-export const chatifyApi = Object.assign(__chatifyApi, {
+type ChatifyApi = typeof __chatifyApi & {
+  settings: ChatifyApiSettings;
+  useChatListItem: typeof useChatListItem;
+  useUnreadThreadMessageCount: typeof useUnreadThreadMessageCount;
+};
+
+export const chatifyApi: ChatifyApi = Object.assign(__chatifyApi, {
   settings: __settings,
   useChatListItem,
   useUnreadThreadMessageCount,

package/src/core/client.ts

@@ -164,8 +164,19 @@ export class ChatifyClient {
     return this._config.axios;
   }
 
-  public accounts = async () => {
-    const { data } = await this.axios.get<Account[]>('account');
+  public accounts = async (args: { ids?: string[] }) => {
+    const searchParams = new URLSearchParams();
+
+    args?.ids?.forEach((id) => {
+      searchParams.append('ids', encodeURIComponent(id));
+    });
+
+    const { data } = await this.axios.get<Account[]>(`account?${searchParams.toString()}`);
+    return data;
+  };
+
+  public currentUserAccount = async () => {
+    const { data } = await this.axios.get<Account>('account/me');
     return data;
   };
 

package/src/styles/index.scss

@@ -83,18 +83,51 @@
     padding-inline: 0.5rem;
     margin-bottom: 1rem;
 
-    .wxchtf-add-btn {
+    .wxchtf-add-btn,
+    .wxchtf-add-btn-settings {
       border: none;
       background-color: #e4f7f7;
       height: 50px;
-      padding: 0;
       line-height: 50px;
-      min-width: 150px;
-      border-radius: 50px;
       font-weight: 600;
       opacity: 0.9;
       box-shadow: none;
     }
+
+    > .wxchtf-add-btn {
+      padding: 0 24px;
+      min-width: 150px;
+      border-radius: 50px;
+    }
+
+    > .wxchtf-add-btn-settings {
+      padding: 0 16px;
+      min-width: 50px;
+      border-radius: 50px;
+    }
+
+    > .wxchtf-add-btn-group {
+      display: inline-flex;
+
+      .wxchtf-add-btn-wrapper {
+        width: auto;
+        padding-inline: 0;
+        margin-bottom: 0;
+      }
+
+      .wxchtf-add-btn {
+        padding: 0 18px;
+        min-width: 120px;
+        border-radius: 50px 0 0 50px;
+      }
+
+      .wxchtf-add-btn-settings {
+        padding: 0 14px;
+        min-width: 44px;
+        border-radius: 0 50px 50px 0;
+        border-left: 1px solid rgba(0, 0, 0, 0.06);
+      }
+    }
   }
 }
 
@@ -108,7 +141,8 @@
   z-index: 2;
   min-width: 0;
 
-  .wxchtf-create-chat-panel {
+  .wxchtf-create-chat-panel,
+  .wxchtf-auto-reply-panel {
     display: flex;
     flex-flow: column nowrap;
     justify-content: center;
@@ -116,7 +150,8 @@
     height: 100%;
     position: relative;
 
-    .wxchtf-create-chat-panel-close {
+    .wxchtf-create-chat-panel-close,
+    .wxchtf-auto-reply-panel-close {
       position: absolute;
       right: 25px;
       top: 25px;
@@ -126,7 +161,31 @@
       padding: 2rem;
       max-width: 700px;
       width: 100%;
+    }
+  }
 
+  .wxchtf-auto-reply-panel {
+    .wxchtf-auto-reply-panel-header {
+      width: 100%;
+      max-width: 700px;
+      padding: 0 2rem;
+      margin-bottom: 0.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      h3 {
+        margin: 0;
+      }
+
+      .wxchtf-auto-reply-panel-clear {
+        padding: 0;
+      }
+    }
+  }
+
+  .wxchtf-create-chat-panel {
+    form {
       .wxchtf-create-chat-member-input-list {
         max-height: 15rem;
         overflow-y: auto;

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]);