@webinex/chatify 1.0.0-rc2 → 1.0.0-rc3

package/src/ui/ChatPanel/ChatHeaderName.tsx

@@ -0,0 +1,67 @@
+import { Input, Tooltip } from 'antd';
+import { useSelect, useUpdateChatNameMutation } from '../../core';
+import { ChatName } from '../ChatName';
+import { customize } from '../customize';
+import { useEffect, useState } from 'react';
+import isHotkey from 'is-hotkey';
+
+export interface ChatHeaderNameProps {
+  id: string;
+}
+
+const isEscape = isHotkey('escape');
+const isEnter = isHotkey('enter');
+
+function useUpdateChatName(id: string, value: string) {
+  const [updateChatName] = useUpdateChatNameMutation();
+  return () => updateChatName({ id, name: value });
+}
+
+export const ChatHeaderName = customize('ChatHeaderName', (props: ChatHeaderNameProps) => {
+  const { id } = props;
+  const chat = useSelect((x) => x.query.chatList.data!.find((x) => x.id === id)!, [id]);
+  const name = chat.name;
+  const [editNameValue, setEditNameValue] = useState('');
+  const [edit, setEdit] = useState(false);
+  const updateChatName = useUpdateChatName(id, editNameValue);
+
+  useEffect(() => {
+    if (edit) {
+      setEditNameValue(name);
+    }
+  }, [edit, name]);
+
+  if (!chat.active) {
+    return <span className="wxchtf-chat-name">{name}</span>;
+  }
+
+  if (edit) {
+    return (
+      <Input
+        value={editNameValue}
+        onChange={(e) => setEditNameValue(e.target.value)}
+        onBlur={() => setEdit(false)}
+        onKeyDown={(e) => {
+          if (isEscape(e)) {
+            setEdit(false);
+          } else if (isEnter(e)) {
+            setEdit(false);
+
+            if (editNameValue !== name) {
+              updateChatName();
+            }
+          }
+        }}
+        autoFocus
+      />
+    );
+  }
+
+  return (
+    <Tooltip title="Click to edit name...">
+      <span className="wxchtf-chat-name --editable" onClick={() => setEdit(true)}>
+        <ChatName name={name} />
+      </span>
+    </Tooltip>
+  );
+});

package/src/ui/ChatPanel/ChatMembersButton.tsx

@@ -0,0 +1,21 @@
+import { useDispatch } from '../../core';
+import { Button } from 'antd';
+import { useCallback } from 'react';
+import { customize } from '../customize';
+import { Icon } from '../Icon';
+
+export interface ChatMembersButtonProps {
+  id: string;
+}
+
+export const ChatMembersButton = customize('ChatMembersButton', (_: ChatMembersButtonProps) => {
+  const dispatch = useDispatch();
+  const onSettingsClick = useCallback(
+    () => dispatch({ type: 'toggle_members_view', data: void 0 }),
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dispatch],
+  );
+
+  return <Button onClick={onSettingsClick} type="link" icon={<Icon type="team" />} />;
+});

package/src/ui/ChatPanel/ChatMembersPanel.tsx

@@ -0,0 +1,117 @@
+import { Button, List, Space, Tooltip } from 'antd';
+import {
+  useAddMemberMutation,
+  useGetAccountsQuery,
+  useGetChatQuery,
+  useRemoveMemberMutation,
+} from '../../core';
+import { customize } from '../customize';
+import { useCallback, useMemo } from 'react';
+import { Icon } from '../Icon';
+import { Avatar } from '../Avatar';
+
+export interface ChatMembersPanelProps {
+  id: string;
+}
+
+interface ChatMemberListItemProps {
+  id: string;
+  chatId: string;
+}
+
+function useAdd(chatId: string, accountId: string, withHistory: boolean) {
+  const [add, state] = useAddMemberMutation();
+  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] = useRemoveMemberMutation();
+  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 } = useGetChatQuery({ chatId });
+  const { data: accounts } = useGetAccountsQuery();
+  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" />} />
+              </Tooltip>,
+              <Tooltip key="remove_delete_history" title="Remove (delete history)">
+                <Button
+                  onClick={onRemoveDeleteHistory}
+                  type="link"
+                  icon={<Icon type="remove_delete_history" />}
+                />
+              </Tooltip>,
+            ]
+          : [
+              <Tooltip key="add_no_history" title="Add (no history)">
+                <Button onClick={onAddWithoutHistory} type="link" icon={<Icon type="add" />} />
+              </Tooltip>,
+              <Tooltip key="add" title="Add (share history)">
+                <Button onClick={onAddWithHistory} type="link" icon={<Icon type="add_with_history" />} />
+              </Tooltip>,
+            ]
+      }
+    >
+      <Space>
+        <Avatar account={account} />
+        <span>{account.name}</span>
+      </Space>
+    </List.Item>
+  );
+});
+
+export const ChatMembersPanel = customize('ChatMembersPanel', (props: ChatMembersPanelProps) => {
+  const { id } = props;
+
+  const { data: chat } = useGetChatQuery({ chatId: id });
+  const { data: accounts } = useGetAccountsQuery();
+  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/ChatPanel/ChatPanel.tsx

@@ -0,0 +1,27 @@
+import { ChatHeader } from './ChatHeader';
+import { ChatBody } from './ChatBody';
+import { InputBox } from '../InputBox/InputBox';
+import { useSelect } from '../../core';
+import { customize } from '../customize';
+import { ChatMembersPanel } from './ChatMembersPanel';
+
+export interface ChatPanelProps {
+  id: string;
+}
+
+export const ChatPanel = customize('ChatPanel', (props: ChatPanelProps) => {
+  const { id } = props;
+  const chat = useSelect((x) => x.query.chatList.data!.find((x) => x.id === id)!, [id]);
+  const chatMembersOpen = useSelect((x) => x.ui.showMembers, []);
+
+  return (
+    <div className="wxchtf-chat-panel">
+      <div className="wxchtf-chat-main">
+        <ChatHeader id={id} />
+        <ChatBody id={id} />
+        {chat.active && <InputBox />}
+      </div>
+      {chatMembersOpen && <ChatMembersPanel id={id} />}
+    </div>
+  );
+});

package/src/ui/ChatPanel/index.ts

@@ -0,0 +1,6 @@
+export * from './ChatBody';
+export * from './ChatHeader';
+export * from './ChatHeaderMembers';
+export * from './ChatHeaderName';
+export * from './ChatPanel';
+export * from './ChatMembersButton';

package/src/ui/Chatify.tsx

@@ -1,68 +1,113 @@
 import { CSSProperties, FC } from 'react';
 import { useReadMonitor } from '../core';
-import { Aside } from './Aside';
-import { Main } from './Main';
 import { Localizer, LocalizerContext, defaultLocalizer } from './localizer';
 import { Avatar } from './Avatar';
-import { CustomizeProvider } from '../util';
-import { ChatHeaderMembers } from './ChatHeaderMembers';
-import { ChatSettingsButton } from './ChatHeaderSettingsButton';
-import { Header } from './Header';
+import { CustomizeProvider } from './customize';
+import { ChatHeaderMembers } from './ChatPanel/ChatHeaderMembers';
+import { ChatMembersButton } from './ChatPanel/ChatMembersButton';
 import { AddChatButton } from './AddChatButton';
-import { Footer } from './Footer';
 import { ChatName } from './ChatName';
+
+import { Aside, Main, Body, Footer, Header } from './Layout';
+
 import {
   ChatListItemBox,
-  ChatListItemLastMessage,
-  ChatListItemLastMessageAuthor,
   ChatListItemLastMessageContent,
-  ChatListItemName,
+  ChatListItemLastMessageAuthor,
+  ChatListItemLastMessage,
   ChatListItemUnreadCount,
-} from './ChatListItem';
+  ChatListItemName,
+} from './ChatList';
+
 import {
-  SendingMessage,
+  SendingMessageBox,
   SendingMessageContent,
   SendingMessageInfoBox,
   SendingMessageText,
 } from './SendingMessage';
+
 import {
-  MessageAuthor,
-  MessageContent,
   MessageBox,
-  MessageInfoBox,
-  MessageReadObserver,
   MessageRow,
+  MessageContent,
   MessageText,
+  MessageAuthor,
+  MessageInfoBox,
 } from './Message';
+
+import { MessageReadObserver } from './MessageReadObserver';
 import { Icon } from './Icon';
-import { SystemMessage } from './SystemMessage';
+import { SystemMessageRow } from './SystemMessage/SystemMessageRow';
+import { ChatList } from './ChatList';
+import { ChatBody, ChatHeader, ChatHeaderName, ChatPanel } from './ChatPanel';
+import { InputBox, InputFilesBox, InputSubmitButtonBox, InputTextBox } from './InputBox';
+import { SystemMessageBox } from './SystemMessage';
+import {
+  CreateChatForm,
+  CreateChatMemberInput,
+  CreateChatNameInput,
+  CreateChatPanel,
+} from './CreateChatPanel';
 
 export interface ChatifyCustomizeValue {
-  Avatar?: typeof Avatar.Component | null;
-  Header?: typeof Header.Component | null;
-  Footer?: typeof Footer.Component | null;
-  AddChatButton?: typeof AddChatButton.Component | null;
-  ChatHeaderMembers?: typeof ChatHeaderMembers.Component | null;
-  ChatSettingsButton?: typeof ChatSettingsButton.Component | null;
-  ChatName?: typeof ChatName.Component | null;
+  // ./ChatList
+  ChatList?: typeof ChatList.Component | null;
   ChatListItemBox?: typeof ChatListItemBox.Component | null;
   ChatListItemName?: typeof ChatListItemName.Component | null;
   ChatListItemUnreadCount?: typeof ChatListItemUnreadCount.Component | null;
   ChatListItemLastMessage?: typeof ChatListItemLastMessage.Component | null;
   ChatListItemLastMessageAuthor?: typeof ChatListItemLastMessageAuthor.Component | null;
   ChatListItemLastMessageContent?: typeof ChatListItemLastMessageContent.Component | null;
-  SystemMessage?: typeof SystemMessage.Component | null;
-  SendingMessage?: typeof SendingMessage.Component | null;
-  SendingMessageBody?: typeof SendingMessageContent.Component | null;
-  SendingMessageInfoBox?: typeof SendingMessageInfoBox.Component | null;
-  SendingMessageText?: typeof SendingMessageText.Component | null;
+
+  // ./Layout
+  Header?: typeof Header.Component | null;
+  Footer?: typeof Footer.Component | null;
+  Body?: typeof Body.Component | null;
+  Main?: typeof Main.Component | null;
+  Aside?: typeof Aside.Component | null;
+
+  // ./Message
+  MessageAuthor?: typeof MessageAuthor.Component | null;
   MessageBox?: typeof MessageBox.Component | null;
-  MessageReadObserver?: typeof MessageReadObserver.Component | null;
-  MessageRow?: typeof MessageRow.Component | null;
   MessageContent?: typeof MessageContent.Component | null;
   MessageInfoBox?: typeof MessageInfoBox.Component | null;
+  MessageRow?: typeof MessageRow.Component | null;
   MessageText?: typeof MessageText.Component | null;
-  MessageAuthor?: typeof MessageAuthor.Component | null;
+
+  // ./SendingMessage
+  SendingMessageBox?: typeof SendingMessageBox.Component | null;
+  SendingMessageContent?: typeof SendingMessageContent.Component | null;
+  SendingMessageInfoBox?: typeof SendingMessageInfoBox.Component | null;
+  SendingMessageText?: typeof SendingMessageText.Component | null;
+
+  // ./ChatPanel
+  ChatBody?: typeof ChatBody.Component | null;
+  ChatHeader?: typeof ChatHeader.Component | null;
+  ChatHeaderMembers?: typeof ChatHeaderMembers.Component | null;
+  ChatHeaderName?: typeof ChatHeaderName.Component | null;
+  ChatPanel?: typeof ChatPanel.Component | null;
+  ChatMembersButton?: typeof ChatMembersButton.Component | null;
+
+  // ./InputBox
+  InputBox?: typeof InputBox.Component | null;
+  InputFilesBox?: typeof InputFilesBox.Component | null;
+  InputSubmitButtonBox?: typeof InputSubmitButtonBox.Component | null;
+  InputTextBox?: typeof InputTextBox.Component | null;
+
+  // ./SystemMessage
+  SystemMessageBox?: typeof SystemMessageBox.Component | null;
+  SystemMessageRow?: typeof SystemMessageRow.Component | null;
+
+  // ./CreateChatPanel
+  CreateChatForm?: typeof CreateChatForm.Component | null;
+  CreateChatMemberInput?: typeof CreateChatMemberInput.Component | null;
+  CreateChatNameInput?: typeof CreateChatNameInput.Component | null;
+  CreateChatPanel?: typeof CreateChatPanel.Component | null;
+
+  MessageReadObserver?: typeof MessageReadObserver.Component | null;
+  Avatar?: typeof Avatar.Component | null;
+  AddChatButton?: typeof AddChatButton.Component | null;
+  ChatName?: typeof ChatName.Component | null;
   Icon?: typeof Icon.Component | null;
 }
 
@@ -80,10 +125,7 @@ function Content(props: Pick<ChatifyProps, 'className' | 'style'>) {
   return (
     <div className={className + ' wxchtf-chatify'} style={style}>
       <Header />
-      <div className="wxchtf-body">
-        <Aside />
-        <Main />
-      </div>
+      <Body />
       <Footer />
     </div>
   );

package/src/ui/CreateChatPanel/CreateChatForm.tsx

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

package/src/ui/CreateChatPanel/CreateChatMemberInput.tsx

@@ -0,0 +1,66 @@
+import { useMemo } from 'react';
+import { useGetAccountsQuery } from '../../core';
+import { customize } from '../customize';
+import { Checkbox, Form, List } from 'antd';
+import { useLocalizer } from '../localizer';
+import { useMe } from '../../ChatifyContext';
+import { Avatar } from '../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 } = useGetAccountsQuery();
+  const me = useMe();
+  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>
+    );
+  },
+);

package/src/ui/CreateChatPanel/CreateChatNameInput.tsx

@@ -0,0 +1,25 @@
+import { Form, Input } from 'antd';
+import { customize } from '../customize';
+import { useLocalizer } from '../localizer';
+
+export interface CreateChatNameInputProps {
+  name: string;
+}
+
+export const CreateChatNameInput = customize('CreateChatNameInput', (props: CreateChatNameInputProps) => {
+  const { name } = props;
+  const localizer = useLocalizer();
+
+  return (
+    <Form.Item
+      name={name}
+      label={localizer.addChat.name.label()}
+      rules={[
+        { required: true, message: localizer.addChat.name.required() },
+        { max: 250, message: localizer.addChat.name.max250() },
+      ]}
+    >
+      <Input />
+    </Form.Item>
+  );
+});

package/src/ui/CreateChatPanel/CreateChatPanel.tsx

@@ -0,0 +1,33 @@
+import { useAddChatMutation } from '../../core';
+import { useCallback } from 'react';
+import { uniqId } from '../../util';
+import { useLocalizer } from '../localizer';
+import { CreateChatForm, CreateChatFormValue } from './CreateChatForm';
+import { customize } from '../customize';
+
+function useSubmit() {
+  const [add, { isFetching }] = useAddChatMutation();
+  const onSubmit = useCallback(
+    (value: CreateChatFormValue) =>
+      add({
+        name: value.name,
+        members: value.members,
+        requestId: uniqId(),
+      }),
+    [add],
+  );
+
+  return [onSubmit, isFetching] as const;
+}
+
+export const CreateChatPanel = customize('CreateChatPanel', () => {
+  const localizer = useLocalizer();
+  const [onSubmit, submitting] = useSubmit();
+
+  return (
+    <div className="wxchtf-create-chat">
+      <h3>{localizer.addChat.title()}</h3>
+      <CreateChatForm busy={submitting ?? false} onSubmit={onSubmit} />
+    </div>
+  );
+});

package/src/ui/CreateChatPanel/index.ts

@@ -0,0 +1,4 @@
+export * from './CreateChatForm';
+export * from './CreateChatMemberInput';
+export * from './CreateChatNameInput';
+export * from './CreateChatPanel';

package/src/ui/Icon.tsx

@@ -1,20 +1,32 @@
 import { FC } from 'react';
-import { customize } from '../util';
+import { customize } from './customize';
 import SendOutlined from '@ant-design/icons/SendOutlined';
-import FileAddOutlined from '@ant-design/icons/FileAddOutlined';
+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';
 
-export type IconType = 'attach' | 'send';
+export type IconType = keyof typeof ICONS;
 
 export interface IconProps {
   type: IconType;
 }
 
-export const ICONS: Record<IconType, React.ComponentType> = {
-  attach: FileAddOutlined,
+export const ICONS = {
+  attach: PaperClipOutlined,
   send: SendOutlined,
+  remove: UserDeleteOutlined,
+  remove_delete_history: UsergroupDeleteOutlined,
+  add: UserAddOutlined,
+  add_with_history: UsergroupAddOutlined,
+  team: TeamOutlined,
+  edit: EditOutlined,
 };
 
-export const Icon = customize<FC<IconProps>, string>('Icon', (props) => {
+export const Icon = customize<FC<IconProps>>('Icon', (props) => {
   const { type } = props;
   const IconComponent = ICONS[type];
   return IconComponent ? <IconComponent /> : null;

package/src/ui/InputBox/InputBox.tsx

@@ -0,0 +1,38 @@
+import { useCallback, useState } from 'react';
+import { useSelect, useSendMutation } from '../../core';
+import { uniqId } from '../../util';
+import { InputFilesBox } from './InputFilesBox';
+import { InputTextBox } from './InputTextBox';
+import { customize } from '../customize';
+import { InputSubmitButtonBox } from './InputSubmitButtonBox';
+
+function useSend(text: string, setText: (value: string) => void) {
+  const chatId = useSelect((x) => x.ui.chatId!, []);
+  const [add] = useSendMutation();
+
+  return useCallback(() => {
+    if (text.length === 0) {
+      return;
+    }
+
+    setText('');
+    add({ chatId, text: text, files: [], requestId: uniqId() });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chatId, text]);
+}
+
+export const InputBox = customize('InputBox', () => {
+  const [text, setText] = useState('');
+  const onSend = useSend(text, setText);
+
+  return (
+    <div className="wxchtf-input-form">
+      <div className="wxchtf-input-box">
+        <InputFilesBox />
+        <InputTextBox value={text} onSend={onSend} onChange={setText} />
+        <InputSubmitButtonBox onSubmit={onSend} />
+      </div>
+    </div>
+  );
+});

package/src/ui/InputBox/InputFilesBox.tsx

@@ -0,0 +1,9 @@
+import { Button } from 'antd';
+import { customize } from '../customize';
+import { Icon } from '../Icon';
+
+export const InputFilesBox = customize('InputFilesBox', () => (
+  <div className="wxchtf-add-files-box">
+    <Button type="link" icon={<Icon type="attach" />} className="wxchtf-add-files-btn" />
+  </div>
+));

package/src/ui/InputBox/InputSubmitButtonBox.tsx

@@ -0,0 +1,17 @@
+import { Button } from 'antd';
+import { customize } from '../customize';
+import { Icon } from '../Icon';
+
+export interface InputSubmitButtonBoxProps {
+  onSubmit: () => void;
+}
+
+export const InputSubmitButtonBox = customize('InputSubmitButtonBox', (props: InputSubmitButtonBoxProps) => {
+  const { onSubmit } = props;
+
+  return (
+    <div className="wxchtf-submit-btn-box">
+      <Button onClick={onSubmit} type="link" icon={<Icon type="send" />} className="wxchtf-submit-btn" />
+    </div>
+  );
+});