add back bump typing to CompositionBox 7 show bubbles on direct convo

js/ConversationController.d.ts

@@ -8,4 +8,6 @@ export type ConversationControllerType = {
   getOrCreateAndWait: (id: string, type: string) => Promise<ConversationModel>;
   getOrCreate: (id: string, type: string) => Promise<ConversationModel>;
   dangerouslyCreateAndAdd: (any) => any;
+  getContactProfileNameOrShortenedPubKey: (id: string) => string;
+  getContactProfileNameOrFullPubKey: (id: string) => string;
 };

js/models/conversations.d.ts

@@ -62,6 +62,7 @@ export interface ConversationModel
   isClosable: () => boolean;
   isOnline: () => boolean;
   isModerator: (id?: string) => boolean;
+  throttledBumpTyping: () => void;
 
   lastMessage: string;
   messageCollection: Backbone.Collection<MessageModel>;

js/models/conversations.js

@@ -346,7 +346,7 @@
       );
 
       // send the message to a single recipient if this is a session chat
-      if (this.isPrivate) {
+      if (this.isPrivate()) {
         const device = new libsession.Types.PubKey(recipientId);
         libsession
           .getMessageQueue()

js/views/conversation_view.js

@@ -850,19 +850,6 @@
       }
     },
 
-    onKeyUp() {
-      this.maybeBumpTyping();
-    },
-
-    // Called whenever the user changes the message composition field. But only
-    //   fires if there's content in the message field after the change.
-    maybeBumpTyping() {
-      const messageText = this.$messageField.val();
-      if (messageText.length) {
-        this.model.throttledBumpTyping();
-      }
-    },
-
     handleDeleteOrBackspace(event, isDelete) {
       const $input = this.$messageField[0];
       const text = this.$messageField.val();

stylesheets/_conversation.scss

@@ -46,14 +46,6 @@
   padding-inline-end: 10px;
 }
 
-.session-message {
-  display: flow-root;
-  padding-bottom: 4px;
-  padding-top: 4px;
-  padding-inline-start: 16px;
-  padding-inline-end: 16px;
-}
-
 .group-invitation-container {
   display: flex;
   flex-direction: column;

ts/components/conversation/TypingBubble.tsx

@@ -3,67 +3,65 @@ import classNames from 'classnames';
 
 import { TypingAnimation } from './TypingAnimation';
 import { Avatar } from '../Avatar';
+import styled from 'styled-components';
 
-import { LocalizerType } from '../../types/Util';
+interface TypingBubbleProps {
-
-interface Props {
   avatarPath?: string;
-  color: string;
-  name: string;
   phoneNumber: string;
-  profileName: string;
+  displayedName: string | null;
   conversationType: string;
-  i18n: LocalizerType;
+  isTyping: boolean;
 }
 
-export class TypingBubble extends React.Component<Props> {
+const TypingBubbleContainer = styled.div<TypingBubbleProps>`
-  public renderAvatar() {
+  height: ${props => (props.isTyping ? 'auto' : '0px')};
-    const {
+  display: flow-root;
-      avatarPath,
+  padding-bottom: ${props => (props.isTyping ? '4px' : '0px')};
-      name,
+  padding-top: ${props => (props.isTyping ? '4px' : '0px')};
-      phoneNumber,
+  transition: ${props => props.theme.common.animations.defaultDuration};
-      profileName,
+  padding-inline-end: 16px;
-      conversationType,
+  overflow: hidden;
-    } = this.props;
+`;
+
+export const TypingBubble = (props: TypingBubbleProps) => {
+  const renderAvatar = () => {
+    const { avatarPath, displayedName, conversationType, phoneNumber } = props;
 
     if (conversationType !== 'group') {
       return;
     }
-    const userName = name || profileName || phoneNumber;
 
     return (
       <div className="module-message__author-avatar">
         <Avatar
           avatarPath={avatarPath}
-          name={userName}
+          name={displayedName || phoneNumber}
           size={36}
           pubkey={phoneNumber}
         />
       </div>
     );
-  }
+  };
 
-  public render() {
+  if (props.conversationType === 'group') {
-    const { i18n, color } = this.props;
+    return <></>;
+  }
 
-    return (
+  return (
-      <div className="session-message">
+    <TypingBubbleContainer {...props}>
+      <div className={classNames('module-message', 'module-message--incoming')}>
         <div
-          className={classNames('module-message', 'module-message--incoming')}
+          className={classNames(
+            'module-message__container',
+            'module-message__container--incoming'
+          )}
         >
-          <div
+          <div className="module-message__typing-container">
-            className={classNames(
+            <TypingAnimation i18n={window.i18n} />
-              'module-message__container',
-              'module-message__container--incoming'
-            )}
-          >
-            <div className="module-message__typing-container">
-              <TypingAnimation color={color} i18n={i18n} />
-            </div>
-            {this.renderAvatar()}
           </div>
+          {renderAvatar()}
         </div>
       </div>
-    );
+    </TypingBubbleContainer>
-  }
+  );
-}
+};

ts/components/session/conversation/SessionCompositionBox.tsx

@@ -128,6 +128,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
   private linkPreviewAbortController?: AbortController;
   private container: any;
   private readonly mentionsRegex = /@\u{FFD2}05[0-9a-f]{64}:[^\u{FFD2}]+\u{FFD2}/gu;
+  private lastBumpTypingMessageLength: number = 0;
 
   constructor(props: any) {
     super(props);
@@ -167,6 +168,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
 
     // Events
     this.onKeyDown = this.onKeyDown.bind(this);
+    this.onKeyUp = this.onKeyUp.bind(this);
     this.onChange = this.onChange.bind(this);
     this.focusCompositionBox = this.focusCompositionBox.bind(this);
 
@@ -190,6 +192,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
     // reset the state on new conversation key
     if (prevProps.conversationKey !== this.props.conversationKey) {
       this.setState(getDefaultState(), this.focusCompositionBox);
+      this.lastBumpTypingMessageLength = 0;
     } else if (
       this.props.stagedAttachments?.length !==
       prevProps.stagedAttachments?.length
@@ -360,6 +363,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
         value={message}
         onChange={this.onChange}
         onKeyDown={this.onKeyDown}
+        onKeyUp={this.onKeyUp}
         placeholder={messagePlaceHolder}
         spellCheck={false}
         inputRef={this.textarea}
@@ -723,6 +727,24 @@ export class SessionCompositionBox extends React.Component<Props, State> {
     }
   }
 
+  private async onKeyUp(event: any) {
+    const { message } = this.state;
+    // Called whenever the user changes the message composition field. But only
+    //   fires if there's content in the message field after the change.
+    // Also, check for a message length change before firing it up, to avoid
+    // catching ESC, tab, or whatever which is not typing
+    if (message.length && message.length !== this.lastBumpTypingMessageLength) {
+      const conversationModel = window.ConversationController.get(
+        this.props.conversationKey
+      );
+      if (!conversationModel) {
+        return;
+      }
+      conversationModel.throttledBumpTyping();
+      this.lastBumpTypingMessageLength = message.length;
+    }
+  }
+
   private parseEmojis(value: string) {
     const emojisArray = toArray(value);
 

ts/components/session/conversation/SessionMessagesList.tsx

@@ -16,6 +16,7 @@ import { MessageModel } from '../../../../js/models/messages';
 import { SessionLastSeenIndicator } from './SessionLastSeedIndicator';
 import { VerificationNotification } from '../../conversation/VerificationNotification';
 import { ToastUtils } from '../../../session/utils';
+import { TypingBubble } from '../../conversation/TypingBubble';
 
 interface State {
   showScrollButton: boolean;
@@ -119,15 +120,29 @@ export class SessionMessagesList extends React.Component<Props, State> {
   }
 
   public render() {
-    const { messages } = this.props;
+    const { conversationKey, conversation, messages } = this.props;
     const { showScrollButton } = this.state;
 
+    let displayedName = null;
+    if (conversation.type === 'direct') {
+      displayedName = window.ConversationController.getContactProfileNameOrShortenedPubKey(
+        conversationKey
+      );
+    }
+
     return (
       <div
         className="messages-container"
         onScroll={this.handleScroll}
         ref={this.messageContainerRef}
       >
+        <TypingBubble
+          phoneNumber={conversationKey}
+          conversationType={conversation.type}
+          displayedName={displayedName}
+          isTyping={conversation.isTyping}
+        />
+
         {this.renderMessages(messages)}
 
         <SessionScrollButton