feat: tweak UXs

src/common/component/Message/Commands.js

@@ -0,0 +1,53 @@
+// import React from 'react'
+import styled from "styled-components";
+import toast from "react-hot-toast";
+
+const StyledCmds = styled.ul`
+  position: absolute;
+  right: 10px;
+  top: 0;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 6px;
+  background-color: #fff;
+  visibility: hidden;
+  .cmd {
+    cursor: pointer;
+    padding: 4px;
+    img {
+      width: 24px;
+      height: 24px;
+    }
+  }
+`;
+// https://static.nicegoodthings.com/project/rustchat/icon.forward.svg
+// https://static.nicegoodthings.com/project/rustchat/icon.edit.svg
+export default function Commands() {
+  const handleClick = () => {
+    toast.success("cooming soon");
+  };
+  return (
+    <StyledCmds className="cmds">
+      <li className="cmd" onClick={handleClick}>
+        <img
+          src="https://static.nicegoodthings.com/project/rustchat/icon.reply.svg"
+          alt="icon emoji"
+        />
+      </li>
+      <li className="cmd" onClick={handleClick}>
+        <img
+          src="https://static.nicegoodthings.com/project/rustchat/icon.edit.svg"
+          alt="icon emoji"
+        />
+      </li>
+      <li className="cmd" onClick={handleClick}>
+        <img
+          src="https://static.nicegoodthings.com/project/rustchat/icon.dots.svg"
+          alt="icon emoji"
+        />
+      </li>
+    </StyledCmds>
+  );
+}

src/common/component/Message/index.js

@@ -0,0 +1,90 @@
+import { useEffect, useRef } from "react";
+import dayjs from "dayjs";
+import { useDispatch } from "react-redux";
+import { useInViewRef } from "rooks";
+import Tippy from "@tippyjs/react";
+import Profile from "../Profile";
+import Avatar from "../Avatar";
+import BASE_URL from "../../../app/config";
+import { useGetContactsQuery } from "../../../app/services/contact";
+import { setChannelMsgRead } from "../../../app/slices/message.channel";
+import { setUserMsgRead } from "../../../app/slices/message.user";
+import StyledWrapper from "./styled";
+import Commands from "./Commands";
+const renderContent = (type, content) => {
+  let ctn = null;
+  switch (type) {
+    case "text/plain":
+      ctn = content;
+      break;
+    case "image/jpeg":
+      ctn = (
+        <img
+          className="img"
+          src={`${BASE_URL}/resource/image?id=${encodeURIComponent(content)}`}
+        />
+      );
+      break;
+
+    default:
+      break;
+  }
+  return ctn;
+};
+export default function Message({
+  gid = "",
+  mid = "",
+  uid,
+  fromUid,
+  time,
+  content,
+  content_type = "text/plain",
+  unread = false,
+  pending,
+}) {
+  const [myRef, inView] = useInViewRef();
+  const disptach = useDispatch();
+  const avatarRef = useRef(null);
+  const { data: contacts } = useGetContactsQuery();
+  useEffect(() => {
+    if (!unread) {
+      avatarRef.current?.scrollIntoView();
+    }
+  }, [unread]);
+
+  useEffect(() => {
+    if (inView) {
+      if (unread) {
+        const setMsgRead = gid ? setChannelMsgRead : setUserMsgRead;
+        disptach(setMsgRead({ id: gid || uid, mid }));
+      }
+    }
+  }, [gid, mid, uid, unread, inView]);
+
+  if (!contacts) return null;
+  const currUser = contacts.find((c) => c.uid == fromUid) || {};
+  return (
+    <StyledWrapper ref={myRef}>
+      <Tippy
+        interactive
+        placement="left"
+        trigger="click"
+        content={<Profile data={currUser} type="card" />}
+      >
+        <div className="avatar" data-uid={uid} ref={avatarRef}>
+          <Avatar url={currUser.avatar} id={fromUid} name={currUser.name} />
+        </div>
+      </Tippy>
+      <div className="details">
+        <div className="up">
+          <span className="name">{currUser.name}</span>
+          <i className="time">{dayjs(time).format("YYYY-MM-DD h:mm:ss A")}</i>
+        </div>
+        <div className={`down ${pending ? "pending" : ""}`}>
+          {renderContent(content_type, content)}
+        </div>
+      </div>
+      <Commands />
+    </StyledWrapper>
+  );
+}

src/common/component/Message/styled.js

@@ -0,0 +1,63 @@
+import styled from "styled-components";
+const StyledMsg = styled.div`
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 4px;
+  margin: 8px 0;
+  border-radius: 8px;
+  &:hover {
+    background: #f5f6f7;
+    .cmds {
+      visibility: visible;
+    }
+  }
+  .avatar {
+    cursor: pointer;
+    img {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+    }
+  }
+  .details {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    .up {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-weight: 500;
+      .name {
+        color: #06b6d4;
+        font-style: normal;
+        font-size: 14px;
+        line-height: 20px;
+      }
+      .time {
+        color: #bfbfbf;
+        font-size: 12px;
+        line-height: 18px;
+      }
+    }
+    .down {
+      user-select: text;
+      color: #374151;
+      font-weight: normal;
+      font-size: 14px;
+      line-height: 20px;
+      word-break: break-all;
+      white-space: break-spaces;
+      &.pending {
+        opacity: 0.5;
+      }
+      .img {
+        max-width: 400px;
+      }
+    }
+  }
+`;
+
+export default StyledMsg;