feat: send file message

src/common/component/Message/FileBox.js

@@ -0,0 +1,81 @@
+// import React from 'react'
+import styled from "styled-components";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import { useSelector } from "react-redux";
+import { getFileIcon, formatBytes } from "../../utils";
+import IconDownload from "../../../assets/icons/download.svg";
+dayjs.extend(relativeTime);
+const Styled = styled.div`
+  padding: 8px;
+  background: #f3f4f6;
+  border: 1px solid #d4d4d4;
+  box-sizing: border-box;
+  border-radius: 6px;
+  width: 370px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  .icon {
+    width: 36px;
+    height: 48px;
+  }
+  .info {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    width: 100%;
+    .name {
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 20px;
+      color: #1c1c1e;
+    }
+    .details {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 18px;
+      color: #616161;
+      display: flex;
+      gap: 16px;
+      .from strong {
+        font-weight: bold;
+      }
+    }
+  }
+  .download {
+    white-space: nowrap;
+  }
+`;
+export default function FileBox({
+  file_type,
+  name,
+  size,
+  created_at,
+  from_uid,
+  content,
+}) {
+  const fromUser = useSelector((store) => store.contacts.byId[from_uid]);
+  const icon = getFileIcon(file_type, name);
+  if (!content || !fromUser || !name) return null;
+  console.log("file content", content, name);
+  return (
+    <Styled>
+      {icon}
+      <div className="info">
+        <span className="name">{name}</span>
+        <span className="details">
+          <i className="size">{formatBytes(size)}</i>
+          <i className="time">{dayjs(created_at).fromNow()}</i>
+          <i className="from">
+            by <strong>{fromUser.name}</strong>
+          </i>
+        </span>
+      </div>
+      <a className="download" download={name} href={content}>
+        <IconDownload />
+      </a>
+    </Styled>
+  );
+}

src/common/component/Message/Reply.js

@@ -2,6 +2,7 @@
 import styled from "styled-components";
 import { useSelector } from "react-redux";
 import { ContentTypes } from "../../../app/config";
+import { getFileIcon } from "../../utils";
 import Avatar from "../Avatar";
 const Styled = styled.div`
   cursor: pointer;
@@ -37,15 +38,26 @@ const Styled = styled.div`
     font-size: 14px;
     line-height: 20px;
     color: #616161;
+    display: flex;
+    align-items: center;
     .pic {
       display: inherit;
       max-width: 34px;
     }
+    .icon {
+      width: 15px;
+      height: 20px;
+    }
+    .name {
+      margin-left: 5px;
+      font-size: 10px;
+      color: #555;
+    }
   }
   /* padding-left: 10px; */
 `;
 const renderContent = (data) => {
-  const { content_type, content, thumbnail } = data;
+  const { content_type, content, thumbnail, properties } = data;
   let res = null;
   switch (content_type) {
     case ContentTypes.text:
@@ -55,6 +67,18 @@ const renderContent = (data) => {
     case ContentTypes.imageJPG:
       res = <img className="pic" src={thumbnail} />;
       break;
+    case ContentTypes.file:
+      {
+        const { file_type, name } = properties;
+        const icon = getFileIcon(file_type, name);
+        res = (
+          <>
+            {icon}
+            <span className="name">{name}</span>
+          </>
+        );
+      }
+      break;
 
     default:
       break;

src/common/component/Message/index.js

@@ -99,6 +99,8 @@ function Message({ contextId = 0, mid = "", context = "user" }) {
             />
           ) : (
             renderContent({
+              from_uid: fromUid,
+              created_at: time,
               content_type,
               properties,
               content,

src/common/component/Message/renderContent.js

@@ -2,7 +2,10 @@ import Linkify from "react-linkify";
 import dayjs from "dayjs";
 import MrakdownRender from "../MrakdownRender";
 import { getDefaultSize } from "../../utils";
+import FileBox from "./FileBox";
 const renderContent = ({
+  from_uid,
+  created_at,
   properties,
   content_type,
   content,
@@ -53,7 +56,22 @@ const renderContent = ({
             className="img preview"
             style={{ width: `${width}px`, height: `${height}px` }}
             data-origin={content}
-            src={thumbnail}
+            src={thumbnail || content}
+          />
+        );
+      }
+      break;
+    case "rustchat/file":
+      {
+        const { size, name, file_type } = properties;
+        ctn = (
+          <FileBox
+            from_uid={from_uid}
+            created_at={created_at}
+            content={content}
+            size={size}
+            name={name}
+            file_type={file_type}
           />
         );
       }

src/common/component/Message/styled.js

@@ -30,7 +30,7 @@ const StyledMsg = styled.div`
       border-radius: 50%;
     }
   }
-  .details {
+  > .details {
     width: 100%;
     display: flex;
     flex-direction: column;
@@ -74,8 +74,9 @@ const StyledMsg = styled.div`
         cursor: pointer;
       }
       a {
+        text-decoration: none;
         border-radius: 2px;
-        background-color: #f5feff;
+        /* background-color: #f5feff; */
         padding: 2px;
         color: #1fe1f9;
       }