@webinex/chatify 1.0.2-rc3 → 1.0.3-rc3

package/src/ui/CreateChatPanel/CreateChatPanel.tsx

@@ -1,31 +1,47 @@
-import { useAddChatMutation } from '../../core';
+import { useAddChatMutation, useDispatch } from '../../core';
 import { useCallback } from 'react';
 import { uniqId } from '../../util';
 import { useLocalizer } from '../localizer';
 import { CreateChatForm, CreateChatFormValue } from './CreateChatForm';
 import { customize } from '../customize';
+import { Button } from 'antd';
+import { Icon } from '../Icon';
 
 function useSubmit() {
   const [add, { isFetching }] = useAddChatMutation();
+  const dispatch = useDispatch();
+
   const onSubmit = useCallback(
     (value: CreateChatFormValue) =>
       add({
         name: value.name,
         members: value.members,
         requestId: uniqId(),
-      }),
-    [add],
+      }).then((id) => dispatch({ type: 'chat_open', data: { chatId: id } })),
+    [add, dispatch],
   );
 
   return [onSubmit, isFetching] as const;
 }
 
+function useOnClose() {
+  const dispatch = useDispatch();
+  return useCallback(() => dispatch({ type: 'new_chat_close', data: undefined }), [dispatch]);
+}
+
 export const CreateChatPanel = customize('CreateChatPanel', () => {
   const localizer = useLocalizer();
   const [onSubmit, submitting] = useSubmit();
+  const onClose = useOnClose();
 
   return (
-    <div className="wxchtf-create-chat">
+    <div className="wxchtf-create-chat-panel">
+      <Button
+        onClick={onClose}
+        className="wxchtf-create-chat-panel-close"
+        type="link"
+        icon={<Icon type="close" />}
+      />
       <h3>{localizer.addChat.title()}</h3>
       <CreateChatForm busy={submitting ?? false} onSubmit={onSubmit} />
     </div>

package/src/ui/Icon.tsx

@@ -8,6 +8,7 @@ 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';
+import CloseOutlined from '@ant-design/icons/CloseOutlined';
 
 export type IconType = keyof typeof ICONS;
 
@@ -18,12 +19,13 @@ export interface IconProps {
 export const ICONS = {
   attach: PaperClipOutlined,
   send: SendOutlined,
-  remove: UserDeleteOutlined,
-  remove_delete_history: UsergroupDeleteOutlined,
-  add: UserAddOutlined,
-  add_with_history: UsergroupAddOutlined,
-  team: TeamOutlined,
+  'remove-member': UserDeleteOutlined,
+  'remove-member-delete-history': UsergroupDeleteOutlined,
+  'add-member': UserAddOutlined,
+  'add-member-with-history': UsergroupAddOutlined,
+  members: TeamOutlined,
   edit: EditOutlined,
+  close: CloseOutlined,
 };
 
 export const Icon = customize<FC<IconProps>>('Icon', (props) => {

package/src/ui/InputBox/InputTextBox.tsx

@@ -3,6 +3,7 @@ import { customize } from '../customize';
 import isHotkey from 'is-hotkey';
 import { memo, useCallback } from 'react';
 import { useLocalizer } from '../localizer';
+import { TextAreaProps } from 'antd/es/input';
 
 export interface TextInputBoxProps {
   value: string;
@@ -12,7 +13,7 @@ export interface TextInputBoxProps {
 
 const isSend = isHotkey('ctrl+enter');
 
-const AUTO_SIZE = { maxRows: 5 };
+const AUTO_SIZE: TextAreaProps['autoSize'] = { maxRows: 5, minRows: 1 };
 
 export const InputTextBox = customize(
   'InputTextBox',

package/src/ui/Layout/Aside.tsx

@@ -1,9 +1,11 @@
 import { customize } from '../customize';
 import { ChatList } from '../ChatList';
+import { AddChatButton } from '../AddChatButton';
 
 export const Aside = customize('Aside', () => {
   return (
     <div className="wxchtf-aside">
+      <AddChatButton />
       <ChatList />
     </div>
   );

package/src/ui/Layout/Header.tsx

@@ -1,10 +1,5 @@
-import { AddChatButton } from '../AddChatButton';
 import { customize } from '../customize';
 
 export const Header = customize('Header', () => {
-  return (
-    <div className="wxchtf-header">
-      <AddChatButton />
-    </div>
-  );
+  return <div className="wxchtf-header"></div>;
 });

package/src/ui/Message/MessageContent.tsx

@@ -1,13 +1,11 @@
 import { customize } from '../customize';
 import { MessageText } from './MessageText';
-import { MessageInfoBox } from './MessageInfoBox';
 import type { MessageBoxProps } from './MessageBox';
 
 export const MessageContent = customize('MessageContent', (props: MessageBoxProps) => {
   return (
     <div className="wxchtf-message-content">
       <MessageText {...props} />
-      <MessageInfoBox {...props} />
     </div>
   );
 });

package/src/ui/Message/MessageInfoBox.tsx

@@ -14,6 +14,7 @@ export const MessageInfoBox = customize('MessageInfoBox', (props: MessageBoxProp
 
   return (
     <div className="wxchtf-message-info-box">
+      {!my && <div className="wxchtf-message-author-name">{sentBy.name},</div>}
       <div className="wxchtf-message-sent-at">{localizer.timestamp(sentAt)}</div>
       {!my && (
         <div className="wxchtf-message-read-box">

package/src/ui/Message/MessageRow.tsx

@@ -4,6 +4,7 @@ import { customize } from '../customize';
 import { MessageAuthor } from './MessageAuthor';
 import { MessageContent } from './MessageContent';
 import { MessageBoxProps } from './MessageBox';
+import { MessageInfoBox } from './MessageInfoBox';
 
 export interface MessageRowProps extends MessageBoxProps {
   containerRef?: Ref<HTMLDivElement>;
@@ -18,7 +19,10 @@ export const MessageRow = customize('MessageRow', (props: MessageRowProps) => {
   return (
     <div ref={containerRef} className={'wxchtf-message' + (my ? ' --my' : '')}>
       <MessageAuthor {...props} />
-      <MessageContent {...props} />
+      <div>
+        <MessageInfoBox {...props} />
+        <MessageContent {...props} />
+      </div>
     </div>
   );
 });

package/src/ui/localizer.tsx

@@ -2,7 +2,9 @@ import dayjs from 'dayjs';
 import React, { useContext } from 'react';
 
 export interface Localizer {
+  isToday: (value: string) => boolean;
   timestamp: (value: string) => string;
+  dateTime: (value: string) => string;
   system: {
     chatCreated: () => string;
     memberAdded: () => string;
@@ -44,7 +46,9 @@ export function useLocalizer() {
 }
 
 export const defaultLocalizer: Localizer = {
+  isToday: (value: string) => dayjs(value).isSame(dayjs(), 'day'),
   timestamp: (value: string) => dayjs(value).format('HH:mm'),
+  dateTime: (value: string) => dayjs(value).format('DD/MM/YYYY HH:mm'),
   message: {
     read: () => 'Read',
     reading: () => 'Reading...',

package/src/styles/settings.scss

@@ -1,5 +0,0 @@
-.wxchtf-chatify {
-  .wxchtf-chat-settings {
-    padding-inline: 1rem;
-  }
-}