Show responders name

app/src/components/Chat/ChatPost.tsx

@@ -1,28 +1,56 @@
 import { IonItem } from "@ionic/react";
 import { Post } from "@mattermost/types/posts";
+import { User } from "../../api/types";
+import { useMemo } from "react";
 
 interface Props {
   post: Post;
   isMe: boolean;
+  users: User[];
+  prevPost: Post | null;
 }
 
-export default function ChatPost({ post, isMe }: Props) {
+export default function ChatPost({ post, isMe, users, prevPost }: Props) {
+  const { username, message } = useMemo(() => {
+    let username = post.props.username;
+    let message = post.message;
+    for (let user of users) {
+      if (user.uid === post.props.username) {
+        username = user.name;
+      }
+      message = message.replaceAll(user.uid, user.name);
+    }
+    return { username, message };
+  }, [users, post]);
+
+  const isSameUserAsPrev = post.user_id === prevPost?.user_id;
+
   return (
-    <IonItem
-      lines="none"
-      color="light"
-      className={`tw-shrink-0 tw-rounded-tl-2xl tw-rounded-tr-2xl ${
-        post.is_following ? "" : "tw-mb-2"
-      } ${
-        isMe
-          ? "tw-rounded-bl-2xl tw-float-right tw-ml-8 tw-mr-4"
-          : "tw-rounded-br-2xl tw-mr-8 tw-ml-4 tw-float-left"
-      }`}
-    >
-      <div className="tw-py-2">
-        <div className="tw-font-bold">{post.props.username}</div>
-        <div>{post.message}</div>
-      </div>
-    </IonItem>
+    <>
+      {!isSameUserAsPrev ? (
+        <div className="tw-sticky tw-top-0 tw-font-bold tw-text-center tw-bg-[#ffffffa0]">
+          {username}
+        </div>
+      ) : null}
+      {post.type != "" ? (
+        <div className="tw-flex tw-justify-center">
+          <div className="tw-rounded tw-bg-light tw-max-w-xs tw-text-center tw-p-1 tw-my-2">
+            {message}
+          </div>
+        </div>
+      ) : (
+        <div className={` tw-shrink-0  ${post.is_following ? "" : "tw-mb-2"} `}>
+          <div
+            className={`tw-rounded-tl-2xl tw-rounded-tr-2xl tw-bg-light tw-p-2 ${
+              isMe
+                ? "tw-rounded-bl-2xl tw-float-right tw-ml-8 tw-mr-4"
+                : "tw-rounded-br-2xl tw-mr-8 tw-ml-4 tw-float-left"
+            }`}
+          >
+            {message}
+          </div>
+        </div>
+      )}
+    </>
   );
 }

app/src/components/Chat/ChatWindow.tsx

@@ -30,7 +30,7 @@ interface Props {
 // This follows the controller / view component pattern
 export default function ChatWindow(props: Props) {
   const { t } = useTranslation();
-  const { isChainAdmin, chain } = useContext(StoreContext);
+  const { isChainAdmin, chain, chainUsers } = useContext(StoreContext);
   const slowTriggerScrollTop = useDebouncedCallback(() => {
     const lastPostId = props.postList.order.at(-1);
     if (lastPostId) {
@@ -187,27 +187,25 @@ export default function ChatWindow(props: Props) {
             </button>
           );
         })}
-        {isChainAdmin ? (
-          <IonActionSheet
-            header={t("chatRoomOptions")}
-            isOpen={isActionSheetOpen}
-            onDidDismiss={() => setIsActionSheetOpen(false)}
-            buttons={[
-              {
-                text: "Rename",
-                handler: () => handleOptionSelect("rename"),
-              },
-              {
-                text: "Delete",
-                handler: () => handleOptionSelect("delete"),
-              },
-              {
-                text: "Cancel",
-                role: "cancel",
-              },
-            ]}
-          ></IonActionSheet>
-        ) : null}
+        <IonActionSheet
+          header={t("chatRoomOptions")}
+          isOpen={isActionSheetOpen}
+          onDidDismiss={() => setIsActionSheetOpen(false)}
+          buttons={[
+            {
+              text: "Rename",
+              handler: () => handleOptionSelect("rename"),
+            },
+            {
+              text: "Delete",
+              handler: () => handleOptionSelect("delete"),
+            },
+            {
+              text: "Cancel",
+              role: "cancel",
+            },
+          ]}
+        ></IonActionSheet>
         <div key="plus" className="tw-p-2 tw-me-4 tw-flex tw-shrink-0">
           <button
             id="create_channel_btn"
@@ -239,8 +237,18 @@ export default function ChatWindow(props: Props) {
       >
         {props.postList.order.map((item, i) => {
           const post = props.postList.posts[item];
+          const prevPostID = props.postList.order.at(i - 1);
+          const prevPost = prevPostID ? props.postList.posts[prevPostID] : null;
           const isMe = post.user_id === props.authUser.uid;
-          return <ChatPost post={post} key={post.id} isMe={isMe} />;
+          return (
+            <ChatPost
+              post={post}
+              prevPost={prevPost}
+              key={post.id}
+              isMe={isMe}
+              users={chainUsers}
+            />
+          );
           // return <span>{post.id}</span>;
         })}
         <span key="top" ref={refScrollTop}></span>