@webinex/chatify 1.0.0-alpha07 → 1.0.0-build1

package/dist/esm/types/core/models.d.ts

@@ -35,14 +35,14 @@ export interface SendMessageRequest {
     files: File[];
     requestId: string;
 }
-export interface MessageContent {
+export interface MessageBody {
     text: string;
     files: File[];
 }
 export interface AddChatRequest {
     requestId: string;
     name: string;
-    message?: MessageContent;
+    message?: MessageBody;
     members: string[];
 }
 export interface ReadRequest {

package/dist/esm/types/ui/Chatify.d.ts

@@ -8,8 +8,9 @@ import { AddChatButton } from './AddChatButton';
 import { Footer } from './Footer';
 import { ChatName } from './ChatName';
 import { ChatListItemBox, ChatListItemLastMessage, ChatListItemLastMessageAuthor, ChatListItemLastMessageContent, ChatListItemName, ChatListItemUnreadCount } from './ChatListItem';
-import { SendingMessage, SendingMessageBody, SendingMessageInfoBox, SendingMessageText } from './SendingMessage';
-import { MessageAuthor, MessageBody, MessageBox, MessageInfoBox, MessageReadObserver, MessageRow, MessageText } from './Message';
+import { SendingMessage, SendingMessageContent, SendingMessageInfoBox, SendingMessageText } from './SendingMessage';
+import { MessageAuthor, MessageContent, MessageBox, MessageInfoBox, MessageReadObserver, MessageRow, MessageText } from './Message';
+import { Icon } from './Icon';
 export interface ChatifyCustomizeValue {
     Avatar?: typeof Avatar.Component | null;
     Header?: typeof Header.Component | null;
@@ -25,16 +26,17 @@ export interface ChatifyCustomizeValue {
     ChatListItemLastMessageAuthor?: typeof ChatListItemLastMessageAuthor.Component | null;
     ChatListItemLastMessageContent?: typeof ChatListItemLastMessageContent.Component | null;
     SendingMessage?: typeof SendingMessage.Component | null;
-    SendingMessageBody?: typeof SendingMessageBody.Component | null;
+    SendingMessageBody?: typeof SendingMessageContent.Component | null;
     SendingMessageInfoBox?: typeof SendingMessageInfoBox.Component | null;
     SendingMessageText?: typeof SendingMessageText.Component | null;
     MessageBox?: typeof MessageBox.Component | null;
     MessageReadObserver?: typeof MessageReadObserver.Component | null;
     MessageRow?: typeof MessageRow.Component | null;
-    MessageBody?: typeof MessageBody.Component | null;
+    MessageContent?: typeof MessageContent.Component | null;
     MessageInfoBox?: typeof MessageInfoBox.Component | null;
     MessageText?: typeof MessageText.Component | null;
     MessageAuthor?: typeof MessageAuthor.Component | null;
+    Icon?: typeof Icon.Component | null;
 }
 export interface ChatifyProps {
     className?: string;

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

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export type IconType = 'attach' | 'send';
+export interface IconProps {
+    type: IconType;
+}
+export declare const ICONS: Record<IconType, React.ComponentType>;
+export declare const Icon: import("../util").Customizable<FC<IconProps>, string>;

package/dist/esm/types/ui/Message.d.ts

@@ -9,7 +9,7 @@ export interface MessageRowProps extends MessageBoxProps {
 export declare const MessageAuthor: import("../util").Customizable<FC<MessageBoxProps>, string>;
 export declare const MessageText: import("../util").Customizable<FC<MessageBoxProps>, string>;
 export declare const MessageInfoBox: import("../util").Customizable<FC<MessageBoxProps>, string>;
-export declare const MessageBody: import("../util").Customizable<FC<MessageBoxProps>, string>;
+export declare const MessageContent: import("../util").Customizable<FC<MessageBoxProps>, string>;
 export declare const MessageRow: import("../util").Customizable<FC<MessageRowProps>, string>;
 export declare const MessageBox: import("../util").Customizable<FC<MessageBoxProps>, string>;
 export interface MessageReadObserverProps extends MessageBoxProps {

package/dist/esm/types/ui/SendingMessage.d.ts

@@ -6,5 +6,5 @@ export interface SendingMessageProps {
 }
 export declare const SendingMessageText: import("../util").Customizable<FC<SendingMessageProps>, string>;
 export declare const SendingMessageInfoBox: import("../util").Customizable<FC<SendingMessageProps>, string>;
-export declare const SendingMessageBody: import("../util").Customizable<FC<SendingMessageProps>, string>;
+export declare const SendingMessageContent: import("../util").Customizable<FC<SendingMessageProps>, string>;
 export declare const SendingMessage: import("../util").Customizable<FC<SendingMessageProps>, string>;

package/dist/esm/types/ui/index.d.ts

@@ -8,3 +8,4 @@ export * from './ChatHeaderMembers';
 export * from './ChatListItem';
 export * from './Message';
 export * from './SystemMessage';
+export * from './Icon';

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

@@ -3,6 +3,7 @@ export interface Localizer {
     timestamp: (value: string) => string;
     system: {
         chatCreated: () => string;
+        memberAdded: () => string;
     };
     message: {
         read: () => React.ReactNode;
@@ -22,6 +23,9 @@ export interface Localizer {
         };
         submitBtn: () => React.ReactNode;
     };
+    input: {
+        placeholder: () => string;
+    };
 }
 export declare const LocalizerContext: React.Context<Localizer>;
 export declare function useLocalizer(): Localizer;

package/dist/index.d.ts

@@ -7,6 +7,7 @@ interface Localizer {
     timestamp: (value: string) => string;
     system: {
         chatCreated: () => string;
+        memberAdded: () => string;
     };
     message: {
         read: () => React$1.ReactNode;
@@ -26,6 +27,9 @@ interface Localizer {
         };
         submitBtn: () => React$1.ReactNode;
     };
+    input: {
+        placeholder: () => string;
+    };
 }
 declare const LocalizerContext: React$1.Context<Localizer>;
 declare function useLocalizer(): Localizer;
@@ -73,14 +77,14 @@ interface SendMessageRequest {
     files: File[];
     requestId: string;
 }
-interface MessageContent {
+interface MessageBody {
     text: string;
     files: File[];
 }
 interface AddChatRequest {
     requestId: string;
     name: string;
-    message?: MessageContent;
+    message?: MessageBody;
     members: string[];
 }
 interface ReadRequest {
@@ -214,9 +218,12 @@ declare const ACTIONS: {
     read_received: (state: State, { events }: {
         events: ReadEvent[];
     }) => State;
-    member_added: (state: State, { chatId, account }: {
+    member_added: (state: State, { chatId, chatName, account, me, message, }: {
         chatId: string;
+        chatName: string;
         account: Account;
+        me: string;
+        message: Message;
     }) => State;
     member_removed: (state: State, { chatId, accountId, deleteHistory, me, }: {
         chatId: string;
@@ -318,7 +325,7 @@ interface SendingMessageProps {
 }
 declare const SendingMessageText: Customizable<FC<SendingMessageProps>, string>;
 declare const SendingMessageInfoBox: Customizable<FC<SendingMessageProps>, string>;
-declare const SendingMessageBody: Customizable<FC<SendingMessageProps>, string>;
+declare const SendingMessageContent: Customizable<FC<SendingMessageProps>, string>;
 declare const SendingMessage: Customizable<FC<SendingMessageProps>, string>;
 
 interface MessageBoxProps {
@@ -330,7 +337,7 @@ interface MessageRowProps extends MessageBoxProps {
 declare const MessageAuthor: Customizable<FC<MessageBoxProps>, string>;
 declare const MessageText: Customizable<FC<MessageBoxProps>, string>;
 declare const MessageInfoBox: Customizable<FC<MessageBoxProps>, string>;
-declare const MessageBody: Customizable<FC<MessageBoxProps>, string>;
+declare const MessageContent: Customizable<FC<MessageBoxProps>, string>;
 declare const MessageRow: Customizable<FC<MessageRowProps>, string>;
 declare const MessageBox: Customizable<FC<MessageBoxProps>, string>;
 interface MessageReadObserverProps extends MessageBoxProps {
@@ -338,6 +345,13 @@ interface MessageReadObserverProps extends MessageBoxProps {
 }
 declare const MessageReadObserver: Customizable<FC<MessageReadObserverProps>, string>;
 
+type IconType = 'attach' | 'send';
+interface IconProps {
+    type: IconType;
+}
+declare const ICONS: Record<IconType, React.ComponentType>;
+declare const Icon: Customizable<FC<IconProps>, string>;
+
 interface ChatifyCustomizeValue {
     Avatar?: typeof Avatar.Component | null;
     Header?: typeof Header.Component | null;
@@ -353,16 +367,17 @@ interface ChatifyCustomizeValue {
     ChatListItemLastMessageAuthor?: typeof ChatListItemLastMessageAuthor.Component | null;
     ChatListItemLastMessageContent?: typeof ChatListItemLastMessageContent.Component | null;
     SendingMessage?: typeof SendingMessage.Component | null;
-    SendingMessageBody?: typeof SendingMessageBody.Component | null;
+    SendingMessageBody?: typeof SendingMessageContent.Component | null;
     SendingMessageInfoBox?: typeof SendingMessageInfoBox.Component | null;
     SendingMessageText?: typeof SendingMessageText.Component | null;
     MessageBox?: typeof MessageBox.Component | null;
     MessageReadObserver?: typeof MessageReadObserver.Component | null;
     MessageRow?: typeof MessageRow.Component | null;
-    MessageBody?: typeof MessageBody.Component | null;
+    MessageContent?: typeof MessageContent.Component | null;
     MessageInfoBox?: typeof MessageInfoBox.Component | null;
     MessageText?: typeof MessageText.Component | null;
     MessageAuthor?: typeof MessageAuthor.Component | null;
+    Icon?: typeof Icon.Component | null;
 }
 interface ChatifyProps {
     className?: string;
@@ -394,4 +409,4 @@ declare function ChatifyContext({ value, children }: PropsWithChildren<{
     value: ChatifyContextValue;
 }>): react_jsx_runtime.JSX.Element;
 
-export { ACTIONS, Account, Action, AddChatButton, AddChatRequest, AddMemberRequest, Avatar, AvatarProps, Chat, ChatHeader, ChatHeaderMembers, ChatHeaderMembersProps, ChatHeaderProps, ChatListItem, ChatListItemBox, ChatListItemBoxProps, ChatListItemLastMessage, ChatListItemLastMessageAuthor, ChatListItemLastMessageContent, ChatListItemName, ChatListItemUnreadCount, Chatify, ChatifyClient, ChatifyClientConfig, ChatifyContext, ChatifyContextValue, ChatifyCustomizeValue, ChatifyProps, ChatifySignalRConfig, File, Header, Localizer, LocalizerContext, Message, MessageAuthor, MessageBody, MessageBox, MessageBoxProps, MessageContent, MessageInfoBox, MessageReadObserver, MessageReadObserverProps, MessageRow, MessageRowProps, MessageState, MessageText, ReadEvent, ReadRequest, Reducer, ReducerProvider, RemoveMemberRequest, SendMessageRequest, SystemMessage, SystemMessageProps, defaultLocalizer, formatSystemMessage, useAccounts, useAddChat, useAddMember, useChat, useChatList, useClient, useDispatch, useLoadMore, useLocalizer, useMe, useMessages, useReadMonitor, useReducer, useRemoveMember, useSelect, useSignalRMonitor, useStateRef };
+export { ACTIONS, Account, Action, AddChatButton, AddChatRequest, AddMemberRequest, Avatar, AvatarProps, Chat, ChatHeader, ChatHeaderMembers, ChatHeaderMembersProps, ChatHeaderProps, ChatListItem, ChatListItemBox, ChatListItemBoxProps, ChatListItemLastMessage, ChatListItemLastMessageAuthor, ChatListItemLastMessageContent, ChatListItemName, ChatListItemUnreadCount, Chatify, ChatifyClient, ChatifyClientConfig, ChatifyContext, ChatifyContextValue, ChatifyCustomizeValue, ChatifyProps, ChatifySignalRConfig, File, Header, ICONS, Icon, IconProps, IconType, Localizer, LocalizerContext, Message, MessageAuthor, MessageBody, MessageBox, MessageBoxProps, MessageContent, MessageInfoBox, MessageReadObserver, MessageReadObserverProps, MessageRow, MessageRowProps, MessageState, MessageText, ReadEvent, ReadRequest, Reducer, ReducerProvider, RemoveMemberRequest, SendMessageRequest, SystemMessage, SystemMessageProps, defaultLocalizer, formatSystemMessage, useAccounts, useAddChat, useAddMember, useChat, useChatList, useClient, useDispatch, useLoadMore, useLocalizer, useMe, useMessages, useReadMonitor, useReducer, useRemoveMember, useSelect, useSignalRMonitor, useStateRef };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@webinex/chatify",
   "description": "Webinex Wispo",
   "private": false,
-  "version": "1.0.0-alpha07",
+  "version": "1.0.0-build1",
   "author": "Webinex Dev",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",

package/src/core/action.tsx

@@ -214,7 +214,16 @@ export const ACTIONS = {
     return state;
   },
 
-  member_added: (state: State, { chatId, account }: { chatId: string; account: Account }): State => {
+  member_added: (
+    state: State,
+    {
+      chatId,
+      chatName,
+      account,
+      me,
+      message,
+    }: { chatId: string; chatName: string; account: Account; me: string; message: Message },
+  ): State => {
     state = {
       ...state,
       query: {
@@ -230,6 +239,34 @@ export const ACTIONS = {
       state.query['chat.' + chatId].data.members = [...state.query['chat.' + chatId].data.members, account];
     }
 
+    if (state.query['messages.' + chatId]?.data !== undefined) {
+      state.query['messages.' + chatId] = {
+        ...state.query['messages.' + chatId],
+        data: [{ type: 'message', ...message }, ...state.query['messages.' + chatId].data],
+      };
+    }
+
+    if (account.id !== me && state.query['chat-list'].data !== undefined) {
+      state.query['chat-list'] = { ...state.query['chat-list'] };
+      state.query['chat-list'].data = state.query['chat-list'].data.map((x: ChatListItem) =>
+        x.id === chatId ? { ...x, message: { ...message } } : x,
+      );
+    }
+
+    if (account.id === me && state.query['chat-list'].data !== undefined) {
+      const listItem: ChatListItem = {
+        id: chatId,
+        name: chatName,
+        message: { ...message },
+        unreadCount: 0,
+      };
+
+      state.query['chat-list'] = {
+        ...state.query['chat-list'],
+        data: [...state.query['chat-list'].data, listItem],
+      };
+    }
+
     return state;
   },
 

package/src/core/models.tsx

@@ -41,7 +41,7 @@ export interface SendMessageRequest {
   requestId: string;
 }
 
-export interface MessageContent {
+export interface MessageBody {
   text: string;
   files: File[];
 }
@@ -49,7 +49,7 @@ export interface MessageContent {
 export interface AddChatRequest {
   requestId: string;
   name: string;
-  message?: MessageContent;
+  message?: MessageBody;
   members: string[];
 }
 

package/src/core/useSignalRMonitor.tsx

@@ -26,9 +26,12 @@ export function useSignalRMonitor(me: string, client: ChatifyClient) {
         }),
       );
       unsubscribes.push(
-        client.subscribe('chatify://member-added', ([chatId, account]: [string, Account]) => {
-          dispatch({ type: 'member_added', data: { chatId, account } });
-        }),
+        client.subscribe(
+          'chatify://member-added',
+          ([chatId, chatName, account, message]: [string, string, Account, Message]) => {
+            dispatch({ type: 'member_added', data: { chatId, chatName, account, me, message } });
+          },
+        ),
       );
       unsubscribes.push(
         client.subscribe(

package/src/ui/ChatSettings.tsx

@@ -9,7 +9,7 @@ function Member(props: { account: Account; chatId: string }) {
   const [remove] = useRemoveMember();
 
   const onRemoveClick = useCallback(
-    () => remove({ chatId, accountId: account.id, deleteHistory: true }),
+    () => remove({ chatId, accountId: account.id, deleteHistory: false }),
     [remove, chatId, account.id],
   );
 

package/src/ui/Chatify.tsx

@@ -21,19 +21,20 @@ import {
 } from './ChatListItem';
 import {
   SendingMessage,
-  SendingMessageBody,
+  SendingMessageContent,
   SendingMessageInfoBox,
   SendingMessageText,
 } from './SendingMessage';
 import {
   MessageAuthor,
-  MessageBody,
+  MessageContent,
   MessageBox,
   MessageInfoBox,
   MessageReadObserver,
   MessageRow,
   MessageText,
 } from './Message';
+import { Icon } from './Icon';
 
 export interface ChatifyCustomizeValue {
   Avatar?: typeof Avatar.Component | null;
@@ -50,16 +51,17 @@ export interface ChatifyCustomizeValue {
   ChatListItemLastMessageAuthor?: typeof ChatListItemLastMessageAuthor.Component | null;
   ChatListItemLastMessageContent?: typeof ChatListItemLastMessageContent.Component | null;
   SendingMessage?: typeof SendingMessage.Component | null;
-  SendingMessageBody?: typeof SendingMessageBody.Component | null;
+  SendingMessageBody?: typeof SendingMessageContent.Component | null;
   SendingMessageInfoBox?: typeof SendingMessageInfoBox.Component | null;
   SendingMessageText?: typeof SendingMessageText.Component | null;
   MessageBox?: typeof MessageBox.Component | null;
   MessageReadObserver?: typeof MessageReadObserver.Component | null;
   MessageRow?: typeof MessageRow.Component | null;
-  MessageBody?: typeof MessageBody.Component | null;
+  MessageContent?: typeof MessageContent.Component | null;
   MessageInfoBox?: typeof MessageInfoBox.Component | null;
   MessageText?: typeof MessageText.Component | null;
   MessageAuthor?: typeof MessageAuthor.Component | null;
+  Icon?: typeof Icon.Component | null;
 }
 
 export interface ChatifyProps {

package/src/ui/Icon.tsx

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { customize } from '../util';
+import SendOutlined from '@ant-design/icons/SendOutlined';
+import FileAddOutlined from '@ant-design/icons/FileAddOutlined';
+
+export type IconType = 'attach' | 'send';
+
+export interface IconProps {
+  type: IconType;
+}
+
+export const ICONS: Record<IconType, React.ComponentType> = {
+  attach: FileAddOutlined,
+  send: SendOutlined,
+};
+
+export const Icon = customize<FC<IconProps>, string>('Icon', (props) => {
+  const { type } = props;
+  const IconComponent = ICONS[type];
+  return IconComponent ? <IconComponent /> : null;
+});

package/src/ui/InputForm.tsx

@@ -1,16 +1,19 @@
 import { Button, Input } from 'antd';
-import SendOutlined from '@ant-design/icons/SendOutlined';
-import FileAddOutlined from '@ant-design/icons/FileAddOutlined';
 import { useCallback, useState } from 'react';
 import isHotkey from 'is-hotkey';
 import { useAddMessage } from '../core/useAddMessage';
 import { uniqId } from '../util';
 import { useSelect } from '../core';
+import { useLocalizer } from './localizer';
+import { Icon } from './Icon';
+
+const isSend = isHotkey('ctrl+enter');
 
 export function InputForm() {
   const chatId = useSelect((x) => x.ui.chatId!, []);
   const [add] = useAddMessage({ chatId });
   const [text, setText] = useState('');
+  const localizer = useLocalizer();
 
   const onSend = useCallback(() => {
     setText('');
@@ -23,7 +26,7 @@ export function InputForm() {
     <div className="wxchtf-input-form">
       <div className="wxchtf-input-box">
         <div className="wxchtf-add-files-box">
-          <Button type="link" icon={<FileAddOutlined />} className="wxchtf-add-files-btn" />
+          <Button type="link" icon={<Icon type="attach" />} className="wxchtf-add-files-btn" />
         </div>
         <div className="wxchtf-text-input-box">
           <Input.TextArea
@@ -31,16 +34,16 @@ export function InputForm() {
             onChange={(e) => setText(e.target.value)}
             autoSize={{ maxRows: 5 }}
             className="wxchtf-text-input-textarea"
-            placeholder="Start typing (Ctrl/⌘Cmd + Enter to send) ..."
+            placeholder={localizer.input.placeholder()}
             onKeyDown={(event) => {
-              if (isHotkey('ctrl+enter')(event)) {
+              if (isSend(event)) {
                 onSend();
               }
             }}
           />
         </div>
         <div className="wxchtf-submit-btn-box">
-          <Button onClick={onSend} type="link" icon={<SendOutlined />} className="wxchtf-submit-btn" />
+          <Button onClick={onSend} type="link" icon={<Icon type="send" />} className="wxchtf-submit-btn" />
         </div>
       </div>
     </div>

package/src/ui/Message.tsx

@@ -48,9 +48,9 @@ export const MessageInfoBox = customize<FC<MessageBoxProps>, string>('MessageInf
   );
 });
 
-export const MessageBody = customize<FC<MessageBoxProps>, string>('MessageBody', (props) => {
+export const MessageContent = customize<FC<MessageBoxProps>, string>('MessageContent', (props) => {
   return (
-    <div className="wxchtf-message-body">
+    <div className="wxchtf-message-content">
       <MessageText {...props} />
       <MessageInfoBox {...props} />
     </div>
@@ -66,7 +66,7 @@ export const MessageRow = customize<FC<MessageRowProps>, string>('MessageRow', (
   return (
     <div ref={containerRef} className={'wxchtf-message' + (my ? ' --my' : '')}>
       <MessageAuthor {...props} />
-      <MessageBody {...props} />
+      <MessageContent {...props} />
     </div>
   );
 });

package/src/ui/SendingMessage.tsx

@@ -29,11 +29,11 @@ export const SendingMessageInfoBox = customize<FC<SendingMessageProps>, string>(
   },
 );
 
-export const SendingMessageBody = customize<FC<SendingMessageProps>, string>(
-  'SendingMessageBody',
+export const SendingMessageContent = customize<FC<SendingMessageProps>, string>(
+  'SendingMessageContent',
   (props) => {
     return (
-      <div className="wxchtf-sending-message-body">
+      <div className="wxchtf-sending-message-content">
         <SendingMessageText {...props} />
         <SendingMessageInfoBox {...props} />
       </div>
@@ -44,7 +44,7 @@ export const SendingMessageBody = customize<FC<SendingMessageProps>, string>(
 export const SendingMessage = customize<FC<SendingMessageProps>, string>('SendingMessage', (props) => {
   return (
     <div className="wxchtf-sending-message">
-      <SendingMessageBody {...props} />
+      <SendingMessageContent {...props} />
     </div>
   );
 });

package/src/ui/SystemMessage.tsx

@@ -10,7 +10,11 @@ export function formatSystemMessage(localizer: Localizer, text: string): React.R
     return localizer.system.chatCreated();
   }
 
-  throw new Error(`Unknown system message ${text}`);
+  if (text.startsWith('chatify://member-added::')) {
+    return localizer.system.memberAdded();
+  }
+
+  return text;
 }
 
 export function SystemMessage(props: SystemMessageProps) {

package/src/ui/index.ts

@@ -8,3 +8,4 @@ export * from './ChatHeaderMembers';
 export * from './ChatListItem';
 export * from './Message';
 export * from './SystemMessage';
+export * from './Icon';

package/src/ui/localizer.tsx

@@ -5,6 +5,7 @@ export interface Localizer {
   timestamp: (value: string) => string;
   system: {
     chatCreated: () => string;
+    memberAdded: () => string;
   };
   message: {
     read: () => React.ReactNode;
@@ -24,6 +25,10 @@ export interface Localizer {
     };
     submitBtn: () => React.ReactNode;
   };
+
+  input: {
+    placeholder: () => string;
+  };
 }
 
 export const LocalizerContext = React.createContext<Localizer>(null!);
@@ -54,5 +59,10 @@ export const defaultLocalizer: Localizer = {
   },
   system: {
     chatCreated: () => 'Chat created',
+    memberAdded: () => 'New member added',
+  },
+
+  input: {
+    placeholder: () => 'Start typing (Ctrl/⌘Cmd + Enter to send) ...',
   },
 };

package/src/ui/styles/index.scss

@@ -69,10 +69,6 @@
         width: 100%;
         align-items: flex-end;
 
-        &.--sending {
-          animation: fadeInFromNone 0.5s ease-out;
-        }
-
         &.--my {
           direction: rtl;
           justify-content: flex-start;
@@ -82,8 +78,8 @@
             margin-left: 15px;
           }
 
-          .wxchtf-message-body,
-          .wxchtf-sending-message-body {
+          .wxchtf-message-content,
+          .wxchtf-sending-message-content {
             direction: ltr;
             border-bottom-left-radius: 10px;
             border-bottom-right-radius: 0;
@@ -100,8 +96,8 @@
           }
         }
 
-        .wxchtf-message-body,
-        .wxchtf-sending-message-body {
+        .wxchtf-message-content,
+        .wxchtf-sending-message-content {
           min-width: 300px;
           max-width: 70%;
           border-radius: $messageBorderRadius;