@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/components/messages/message-compose.tsx

@@ -1,24 +1,31 @@
-import { deviceVar, Observable, observable, Subscription, userVar } from "@peers-app/peers-sdk";
-
-import { IFile, IMessage, newid, PersistentVar } from "@peers-app/peers-sdk";
-import React, { useEffect, useState } from 'react';
-import { me } from '../../globals';
+import {
+  deviceVar,
+  type IFile,
+  type IMessage,
+  newid,
+  type Observable,
+  observable,
+  type PersistentVar,
+  type Subscription,
+  userVar,
+} from "@peers-app/peers-sdk";
+import React, { useCallback, useEffect, useState } from "react";
+import { me } from "../../globals";
 import { useObservable } from "../../hooks";
-import { IEditorEffects, MarkdownEditor } from '../markdown-editor/editor';
-
+import { type IEditorEffects, MarkdownEditor } from "../markdown-editor/editor";
 
 const pVarCache: { [key: string]: PersistentVar<string> } = {};
 
 export function getContentPersistenceValue(channelId: string, threadId?: string) {
-  const contentPersistenceName = `messageCompose-channel-${channelId}${threadId ? '-thread-' + threadId : ''}`;
+  const contentPersistenceName = `messageCompose-channel-${channelId}${threadId ? `-thread-${threadId}` : ""}`;
   if (!pVarCache[contentPersistenceName]) {
-    const pVar = userVar<string>(contentPersistenceName, { defaultValue: '' });
+    const pVar = userVar<string>(contentPersistenceName, { defaultValue: "" });
     pVarCache[contentPersistenceName] = pVar;
-    
+
     // Auto-delete the pvar when content is cleared (message sent or editor cleared)
     // This ensures drafts don't accumulate in the database
     pVar.loadingPromise.then(() => {
-      pVar.subscribe(value => {
+      pVar.subscribe((value) => {
         if (!value) {
           pVar.delete();
         }
@@ -29,31 +36,31 @@ export function getContentPersistenceValue(channelId: string, threadId?: string)
 }
 
 interface IProps {
-  channelId: string
-  threadId?: string
-  onMessageSubmit: (message: IMessage, files?: IFile[]) => any
-  initialMessage?: string
+  channelId: string;
+  threadId?: string;
+  onMessageSubmit: (message: IMessage, files?: IFile[]) => void | Promise<void>;
+  initialMessage?: string;
 }
 
 export const MessageCompose = (props: IProps) => {
   const { channelId, threadId, onMessageSubmit, initialMessage } = props;
 
-  const [contentObs] = useState(() => observable(''));
+  const [contentObs] = useState(() => observable(""));
   const [mdEffects] = useState<IEditorEffects>(() => ({}));
   const composeBottomRef = React.useRef<HTMLDivElement>(null);
 
-  function scrollToBottom() {
+  const scrollToBottom = useCallback(() => {
     if (composeBottomRef?.current) {
-      composeBottomRef.current.scrollIntoView({ behavior: 'instant' });
+      composeBottomRef.current.scrollIntoView({ behavior: "instant" });
     }
-  }
+  }, []);
 
   useEffect(() => {
     let disposed = false;
     let sub: Subscription | undefined;
-    getContentPersistenceValue(channelId, threadId).loadingPromise.then(pVar => {
+    getContentPersistenceValue(channelId, threadId).loadingPromise.then((pVar) => {
       if (!disposed) {
-        const persistedValue = pVar() ?? '';
+        const persistedValue = pVar() ?? "";
         contentObs(initialMessage ?? persistedValue);
         sub = contentObs.subscribe(() => pVar(contentObs()));
         setTimeout(() => scrollToBottom(), 100);
@@ -62,17 +69,17 @@ export const MessageCompose = (props: IProps) => {
     return () => {
       disposed = true;
       sub?.dispose();
-    }
-  }, [channelId, threadId]);
+    };
+  }, [channelId, threadId, contentObs, initialMessage, scrollToBottom]);
 
   useEffect(() => {
     const sub = contentObs.subscribe(() => scrollToBottom());
     return () => sub.dispose();
-  }, [contentObs]);
+  }, [contentObs, scrollToBottom]);
 
   function submitMessage() {
-    const markdown = contentObs() ?? '';
-    contentObs('');
+    const markdown = contentObs() ?? "";
+    contentObs("");
     if (!markdown.trim()) {
       return;
     }
@@ -83,51 +90,48 @@ export const MessageCompose = (props: IProps) => {
       channelId,
       messageParentId: threadId,
       createdAt: new Date(),
-    }
+    };
     onMessageSubmit(userMessage);
   }
 
   return (
-    <div className="border rounded border-dark-subtle" style={{ overflowY: 'auto' }}>
+    <div className="border rounded border-dark-subtle" style={{ overflowY: "auto" }}>
       <MarkdownEditor
         value={contentObs}
         effects={mdEffects}
         autoFocus={!!threadId}
-        maxHeight={'50vh'}
-      />
-      <BottomControls
-        submitMessage={submitMessage}
-        contentObs={contentObs}
-        mdEffects={mdEffects}
+        maxHeight={"50vh"}
       />
+      <BottomControls submitMessage={submitMessage} contentObs={contentObs} mdEffects={mdEffects} />
       <div ref={composeBottomRef} />
     </div>
-  )
-}
+  );
+};
 
 const BottomControls = (props: {
-  submitMessage: () => void,
-  contentObs: Observable<string>,
-  mdEffects: any,
+  submitMessage: () => void;
+  contentObs: Observable<string>;
+  mdEffects: IEditorEffects;
 }) => {
   const { submitMessage, contentObs } = props;
   const [content] = useObservable(contentObs, [contentObs]);
 
-  const [submitOnEnter] = useState(() => deviceVar<boolean>(`messageCompose-submitOnEnter`, { defaultValue: true }));
+  const [submitOnEnter] = useState(() =>
+    deviceVar<boolean>(`messageCompose-submitOnEnter`, { defaultValue: true }),
+  );
   useObservable(submitOnEnter);
   if (isMobile()) {
     submitOnEnter(false);
   }
 
-  function onKeyDown(evt: KeyboardEvent) {
-    if (evt.code === 'Enter' && !evt.ctrlKey && !evt.shiftKey && !evt.altKey && !evt.metaKey) {
+  function onKeyDown(evt: React.KeyboardEvent) {
+    if (evt.code === "Enter" && !evt.ctrlKey && !evt.shiftKey && !evt.altKey && !evt.metaKey) {
       if (submitOnEnter()) {
         submitMessage();
         evt.preventDefault();
         return true;
       }
-    }
-    else if (evt.code === 'Enter' && (evt.ctrlKey || evt.metaKey)) {
+    } else if (evt.code === "Enter" && (evt.ctrlKey || evt.metaKey)) {
       if (!submitOnEnter()) {
         submitMessage();
         evt.preventDefault();
@@ -139,37 +143,50 @@ const BottomControls = (props: {
 
   return (
     <div>
-      <div className='float-end small'>
-        <span className='small' hidden={isMobile()}>
-          <input type="checkbox" id="sendOnEnter" checked={!!submitOnEnter()} onChange={evt => submitOnEnter(evt.target.checked)} /> Send on Enter
+      <div className="float-end small">
+        <span className="small" hidden={isMobile()}>
+          <input
+            type="checkbox"
+            id="sendOnEnter"
+            checked={!!submitOnEnter()}
+            onChange={(evt) => submitOnEnter(evt.target.checked)}
+          />{" "}
+          Send on Enter
         </span>
         &nbsp;&nbsp;
-
-        {content.trim()?.length === 0
-          ? (
-            <button className="btn btn-sm btn-outline" type="button" disabled>
-              Send &nbsp;
-              <i className="bi bi-send-fill"></i>
-            </button>
-          )
-          : (
-            <button className="btn btn-sm btn-success" type="button" onClick={props.submitMessage}>
-              Send &nbsp;
-              <i className="bi bi-send-fill"></i>
-            </button>
-          )
-        }
+        {content.trim()?.length === 0 ? (
+          <button className="btn btn-sm btn-outline" type="button" disabled>
+            Send &nbsp;
+            <i className="bi bi-send-fill"></i>
+          </button>
+        ) : (
+          <button className="btn btn-sm btn-success" type="button" onClick={props.submitMessage}>
+            Send &nbsp;
+            <i className="bi bi-send-fill"></i>
+          </button>
+        )}
       </div>
     </div>
-  )
-}
+  );
+};
 
 export function isMobile() {
-  if ((navigator as any)?.userAgentData?.mobile) {
+  const nav = navigator as Navigator & { userAgentData?: { mobile?: boolean } };
+  if (nav.userAgentData?.mobile) {
     return true;
   }
   let check = false;
-  // @ts-ignore
-  (function (a) { if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true; })(navigator.userAgent || navigator.vendor || window.opera);
+  const legacyWindow = window as Window & { opera?: string };
+  ((a: string) => {
+    if (
+      /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
+        a,
+      ) ||
+      /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(
+        a.substr(0, 4),
+      )
+    )
+      check = true;
+  })(navigator.userAgent || navigator.vendor || legacyWindow.opera || "");
   return check;
 }

package/src/components/messages/message-display.tsx

@@ -1,19 +1,25 @@
-import React, { useEffect, useState } from 'react';
-import { Avatar } from './avatar';
 // import { FileListDisplay } from './file-list-display';
-import { Assistants, IMessage, IUser, Messages, Observable, observable } from "@peers-app/peers-sdk";
-import moment from 'moment';
-import { openThread, openThreads } from '../../globals';
-import { useObservable, usePromise, useSubscription } from '../../hooks';
-import { MarkdownWithMentions } from '../markdown-with-mentions';
-import { MessageLogs } from '../message-logs/message-logs';
-
+import {
+  Assistants,
+  type IMessage,
+  type IUser,
+  Messages,
+  type Observable,
+  observable,
+} from "@peers-app/peers-sdk";
+import moment from "moment";
+import { useEffect, useState } from "react";
+import { openThread } from "../../globals";
+import { useObservable, usePromise } from "../../hooks";
+import { MarkdownWithMentions } from "../markdown-with-mentions";
+import { MessageLogs } from "../message-logs/message-logs";
+import { Avatar } from "./avatar";
 
 interface IProps {
-  message: IMessage
-  messageAbove?: IMessage
-  isThreadParent?: boolean
-  index?: number
+  message: IMessage;
+  messageAbove?: IMessage;
+  isThreadParent?: boolean;
+  index?: number;
 }
 
 export const MessageDisplay = (props: IProps) => {
@@ -21,19 +27,23 @@ export const MessageDisplay = (props: IProps) => {
 
   const [messageId, setMessageId] = useState(message.messageId);
 
-  useSubscription(openThreads, () => {
-
-  })
-
   const [user, setUser] = useState<IUser>();
   const [messageChangedTime, setMessageChangedTime] = useState(0);
-  const assistant = usePromise(async () => {
-    if (message.assistantId) {
-      return Assistants().get(message.assistantId);
-    }
-  }, undefined, [message.assistantId]);
+  const assistant = usePromise(
+    async () => {
+      if (message.assistantId) {
+        return Assistants().get(message.assistantId);
+      }
+    },
+    undefined,
+    [message.assistantId],
+  );
 
-  const countReplies = usePromise(() => Messages().count({ messageParentId: messageId }), 1, [messageId, messageChangedTime])!;
+  const countReplies = usePromise(() => Messages().count({ messageParentId: messageId }), 0, [
+    messageId,
+    messageChangedTime,
+  ]);
+  const replyCount = countReplies ?? 0;
 
   const [showMenu] = useState(() => observable(false));
 
@@ -47,13 +57,13 @@ export const MessageDisplay = (props: IProps) => {
     });
     return () => {
       sub.unsubscribe();
-    }
-  }, [message]);
+    };
+  }, [message, messageId]);
 
   // calculate short time string
-  const messageDate = new Date(message.createdAt)
-  let hour: any = messageDate.getHours();
-  const minute = messageDate.getMinutes().toString().padStart(2, '0');
+  const messageDate = new Date(message.createdAt);
+  let hour = messageDate.getHours();
+  const minute = messageDate.getMinutes().toString().padStart(2, "0");
   let ampm = "AM";
   if (hour > 11) {
     ampm = "PM";
@@ -61,34 +71,35 @@ export const MessageDisplay = (props: IProps) => {
   if (hour > 12) {
     hour = hour - 12;
   }
-  let timeStr = `${hour || 12}:${minute} ${ampm}`
-  
-  const showDateDivider = messageAbove
-    && messageDate.toDateString() !== (new Date(messageAbove.createdAt)).toDateString();
-  const showUserInfo = showDateDivider
-    || !messageAbove || !message
-    || messageAbove.userId !== message.userId
-    || messageAbove.assistantId !== message.assistantId
-    || messageDate.getHours() !== (new Date(messageAbove.createdAt)).getHours()
-    || countReplies > 0;
-
+  let timeStr = `${hour || 12}:${minute} ${ampm}`;
+
+  const showDateDivider =
+    messageAbove && messageDate.toDateString() !== new Date(messageAbove.createdAt).toDateString();
+  const showUserInfo =
+    showDateDivider ||
+    !messageAbove ||
+    !message ||
+    messageAbove.userId !== message.userId ||
+    messageAbove.assistantId !== message.assistantId ||
+    messageDate.getHours() !== new Date(messageAbove.createdAt).getHours() ||
+    replyCount > 0;
 
   // // show time of this message if hour is different than last message
-  // const showTime = !showUserInfo 
-  //   && messageDate.getHours() !== (new Date(messageAbove.modified)).getHours(); 
+  // const showTime = !showUserInfo
+  //   && messageDate.getHours() !== (new Date(messageAbove.modified)).getHours();
 
   const isThreadView = isThreadParent || message.messageParentId;
 
-  const dateTimeStr = moment(message.createdAt).calendar().split(' at ')[0] + ' ' + timeStr;
+  const dateTimeStr = `${moment(message.createdAt).calendar().split(" at ")[0]} ${timeStr}`;
   if (isThreadParent) {
     timeStr = dateTimeStr;
   }
 
-  let messageParsed = message.message.trim();
+  const messageParsed = message.message.trim();
 
   return (
     <div
-      className={isThreadParent ? '' : `peers-message-container`}
+      className={isThreadParent ? "" : `peers-message-container`}
       onMouseEnter={() => showMenu(true)}
       onMouseLeave={() => showMenu(false)}
     >
@@ -99,20 +110,18 @@ export const MessageDisplay = (props: IProps) => {
           <hr />
           <div className="d-flex justify-content-center">
             <span
-              className='message-display-list-date'
+              className="message-display-list-date"
               style={{
-                position: 'relative',
-                top: '-29px',
-                paddingLeft: '11px',
-                paddingRight: '11px',
-                fontSize: '16px',
-                borderRadius: '20px',
+                position: "relative",
+                top: "-29px",
+                paddingLeft: "11px",
+                paddingRight: "11px",
+                fontSize: "16px",
+                borderRadius: "20px",
               }}
             >
               <strong>
-                {
-                  moment(message.createdAt).calendar().split(' at ')[0].replace('Last', '')
-                }
+                {moment(message.createdAt).calendar().split(" at ")[0].replace("Last", "")}
               </strong>
             </span>
           </div>
@@ -120,40 +129,44 @@ export const MessageDisplay = (props: IProps) => {
       )}
 
       {/* new block so add some padding */}
-      {showUserInfo && (
-        <div style={{ marginTop: '15px' }}></div>
-      )}
+      {showUserInfo && <div style={{ marginTop: "15px" }}></div>}
 
       <div className="d-flex">
-        <div className="p-0 flex-shrink-0 justify-content-center align-items-center"
+        <div
+          className="p-0 flex-shrink-0 justify-content-center align-items-center"
           style={{
-            width: '46px',
-            height: '20px',
-            overflow: 'visible',
+            width: "46px",
+            height: "20px",
+            overflow: "visible",
             // zIndex: message.modified,
-            position: 'relative',
-            top: '4px',
-            left: '3px',
+            position: "relative",
+            top: "4px",
+            left: "3px",
           }}
         >
-          {showUserInfo && <Avatar userId={message.userId} assistantId={message.assistantId} setUser={setUser} />}
+          {showUserInfo && (
+            <Avatar userId={message.userId} assistantId={message.assistantId} setUser={setUser} />
+          )}
         </div>
-        <div 
+        <div
           className="p-1 flex-grow-1 justify-content-start text-break"
           style={{
-            maxWidth: 'calc(100% - 50px)',
+            maxWidth: "calc(100% - 50px)",
           }}
         >
-
           {showUserInfo && (
             <div className="peers-message">
-              <span style={{ fontSize: '9pt' }}>
-                <b>
-                  {assistant?.name || message?.assistantId || user?.name || message.userId}
-                </b>
+              <span style={{ fontSize: "9pt" }}>
+                <b>{assistant?.name || message?.assistantId || user?.name || message.userId}</b>
               </span>
               {/* TODO show status */}
-              <span className="text-muted sub-sup-font-size" style={{ fontSize: '8pt' }} title={dateTimeStr}>&nbsp;&nbsp;{timeStr}</span>
+              <span
+                className="text-muted sub-sup-font-size"
+                style={{ fontSize: "8pt" }}
+                title={dateTimeStr}
+              >
+                &nbsp;&nbsp;{timeStr}
+              </span>
             </div>
           )}
 
@@ -166,7 +179,7 @@ export const MessageDisplay = (props: IProps) => {
           <MessageLogs key={messageId} messageId={messageId} />
 
           {/* replies info and link */}
-          {!isThreadView && countReplies > 0 && (
+          {!isThreadView && replyCount > 0 && (
             <div className="d-inline">
               {/* this space prevents the logs and replies indicator from being included when selecting and copying a message text */}
               &nbsp;
@@ -175,27 +188,28 @@ export const MessageDisplay = (props: IProps) => {
                 onClick={() => openThread(message.messageParentId || messageId)}
                 tabIndex={props.index}
               >
-                {countReplies === 1 ? '1 reply' : countReplies + ' replies'}
+                {replyCount === 1 ? "1 reply" : `${replyCount} replies`}
               </button>
             </div>
-          )}          
-
+          )}
         </div>
       </div>
 
-      {message?.fileIds?.length && (
-        <div style={{ marginLeft: '46px' }}>
+      {(message?.fileIds?.length && (
+        <div style={{ marginLeft: "46px" }}>
           {/* <FileListDisplay files={message.fileIds} /> */}
         </div>
-      ) || undefined}
-
-
+      )) ||
+        undefined}
     </div>
-  )
-}
-
-const MessageMenu = (props: { message: IMessage, showMenu: Observable<boolean>, isThreadView: boolean }) => {
-
+  );
+};
+
+const MessageMenu = (props: {
+  message: IMessage;
+  showMenu: Observable<boolean>;
+  isThreadView: boolean;
+}) => {
   const { message, isThreadView, showMenu } = props;
   useObservable(showMenu);
 
@@ -213,5 +227,5 @@ const MessageMenu = (props: { message: IMessage, showMenu: Observable<boolean>,
         </div>
       )}
     </>
-  )
-}
+  );
+};