@webinex/chatify 1.0.0-alpha03 → 1.0.0-alpha05

package/src/ui/styles/index.scss

@@ -62,7 +62,8 @@
         padding-right: 30%;
       }
 
-      .wxchtf-message {
+      .wxchtf-message,
+      .wxchtf-sending-message {
         display: flex;
         flex-flow: row nowrap;
         width: 100%;
@@ -81,7 +82,8 @@
             margin-left: 15px;
           }
 
-          .wxchtf-message-body {
+          .wxchtf-message-body,
+          .wxchtf-sending-message-body {
             direction: ltr;
             border-bottom-left-radius: 10px;
             border-bottom-right-radius: 0;
@@ -98,7 +100,8 @@
           }
         }
 
-        .wxchtf-message-body {
+        .wxchtf-message-body,
+        .wxchtf-sending-message-body {
           min-width: 300px;
           max-width: 70%;
           border-radius: $messageBorderRadius;
@@ -111,12 +114,13 @@
           white-space: pre-wrap;
           overflow-wrap: break-word;
 
-          .wxchtf-message-info-box {
+          .wxchtf-message-info-box,
+          .wxchtf-sending-message-info-box {
             text-align: right;
 
             .wxchtf-message-sent-at,
             .wxchtf-message-read-box,
-            .wxchtf-message-sending-box {
+            .wxchtf-sending-message-sending-box {
               display: inline-block;
               font-style: italic;
               font-size: 0.75em;
@@ -125,7 +129,7 @@
             }
 
             .wxchtf-message-read-box,
-            .wxchtf-message-sending-box {
+            .wxchtf-sending-message-sending-box {
               margin-left: 5px;
             }
           }
@@ -150,6 +154,7 @@
       }
 
       .wxchtf-message,
+      .wxchtf-sending-message,
       .wxchtf-system-message,
       .wxchtf-message-skeleton {
         margin-bottom: 2rem;

package/dist/cjs/types/ui/MessageMd.d.ts

@@ -1,13 +0,0 @@
-import { Account, File } from '../core';
-import React from 'react';
-export interface MessageMdProps {
-    author?: Account;
-    text: string;
-    files: File[];
-    my: boolean;
-    read?: boolean;
-    sending?: boolean;
-    reading?: boolean;
-    timestamp: string;
-}
-export declare const MessageMd: React.ForwardRefExoticComponent<MessageMdProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,13 +0,0 @@
-import { Account, File } from '../core';
-import React from 'react';
-export interface MessageMdProps {
-    author?: Account;
-    text: string;
-    files: File[];
-    my: boolean;
-    read?: boolean;
-    sending?: boolean;
-    reading?: boolean;
-    timestamp: string;
-}
-export declare const MessageMd: React.ForwardRefExoticComponent<MessageMdProps & React.RefAttributes<HTMLDivElement>>;

package/src/ui/MessageMd.tsx

@@ -1,47 +0,0 @@
-import { Account, File } from '../core';
-import { Avatar } from './Avatar';
-import { useLocalizer } from './localizer';
-import React from 'react';
-
-export interface MessageMdProps {
-  author?: Account;
-  text: string;
-  files: File[];
-  my: boolean;
-  read?: boolean;
-  sending?: boolean;
-  reading?: boolean;
-  timestamp: string;
-}
-
-export const MessageMd = React.forwardRef(
-  (props: MessageMdProps, forwardRef: React.ForwardedRef<HTMLDivElement>) => {
-    const { author, text, my, read, reading, sending, timestamp } = props;
-    const localizer = useLocalizer();
-
-    return (
-      <div
-        ref={forwardRef}
-        className={'wxchtf-message' + (my ? ' --my' : '') + (sending ? ' --sending' : '')}
-      >
-        {author && (
-          <div className="wxchtf-message-author">
-            <Avatar account={author} />
-          </div>
-        )}
-        <div className="wxchtf-message-body">
-          <div className="wxchtf-message-text">{text}</div>
-          <div className="wxchtf-message-info-box">
-            <div className="wxchtf-message-sent-at">{localizer.timestamp(timestamp)}</div>
-            {read !== undefined && !my && (
-              <div className="wxchtf-message-read-box">
-                {reading ? localizer.message.reading() : localizer.message.read()}
-              </div>
-            )}
-            {sending && <div className="wxchtf-message-sending-box">{localizer.message.sending()}</div>}
-          </div>
-        </div>
-      </div>
-    );
-  },
-);