message container use column reverse to order messages from bottom to

top

stylesheets/_session_conversation.scss

@@ -169,7 +169,7 @@
 .messages-container {
   display: flex;
   flex-grow: 1;
-  flex-direction: column;
+  flex-direction: column-reverse;
   position: relative;
   overflow-y: auto;
   overflow-x: hidden;

stylesheets/themes.scss

@@ -9,7 +9,7 @@ $accentDarkTheme: #00f782;
 $borderLightTheme: #f1f1f1; // search for references on ts TODO: make this exposed on ts
 $borderDarkTheme: rgba($white, 0.06);
 
-$borderAvatarColor: #00000059; // search for references on ts TODO: make this exposed on ts
+$borderAvatarColor: unquote('#00000059'); // search for references on ts TODO: make this exposed on ts
 
 $themes: (
   light: (

ts/components/session/conversation/SessionCompositionBox.tsx

@@ -497,17 +497,20 @@ export class SessionCompositionBox extends React.Component<Props, State> {
       'attachments'
     );
 
+    const linkPreviews = stagedLinkPreview && [_.pick(stagedLinkPreview, 'url', 'image', 'title')] || [];
+
     try {
       const attachments = await this.getFiles();
       await this.props.sendMessage(
         messagePlaintext,
         attachments,
         extractedQuotedMessageProps,
-        [_.pick(stagedLinkPreview, 'url', 'image', 'title')],
+        linkPreviews,
         null,
         {}
       );
 
+
       // Message sending sucess
       this.props.onMessageSuccess();
 
@@ -518,6 +521,13 @@ export class SessionCompositionBox extends React.Component<Props, State> {
       });
       // Empty stagedAttachments
       this.props.clearAttachments();
+      if (stagedLinkPreview && stagedLinkPreview.url) {
+        this.setState({
+          stagedLinkPreview: undefined,
+          ignoredLink: undefined,
+        });
+
+      }
     } catch (e) {
       // Message sending failed
       window.log.error(e);

ts/components/session/conversation/SessionConversation.tsx

@@ -342,7 +342,7 @@ export class SessionConversation extends React.Component<Props, State> {
       }
     );
 
-    const messages = messageSet.models.reverse();
+    const messages = messageSet.models;
     const messageFetchTimestamp = Date.now();
 
     this.setState({ messages, messageFetchTimestamp }, () => {
@@ -381,7 +381,7 @@ export class SessionConversation extends React.Component<Props, State> {
     );
 
     // Set first member of series here.
-    const messageModels = messageSet.models.reverse();
+    const messageModels = messageSet.models;
 
     const messages = [];
     let previousSender;

ts/components/session/conversation/SessionConversationMessagesList.tsx

@@ -90,10 +90,6 @@ export class SessionConversationMessagesList extends React.Component<
     )?.messageCollection;
   }
 
-  public async componentWillReceiveProps(nextProps: any) {
-    return;
-  }
-
   public render() {
     const { messages } = this.props;