update view message

src/components/message.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Box, Paper, Textarea, Tooltip } from "@mantine/core";
+import { ActionIcon, Box, Paper, Tooltip } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { IconEye, IconEyeOff, IconTrash } from "@tabler/icons-react";
 import { useEffect, useMemo, useState } from "react";
@@ -37,7 +37,10 @@ export default function Message({ data, onDelete }: IMessageProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  console.log(data);
+
   return (
+    <Tooltip label={data.recipient_type === 1 ? "Personal" : "Group"}>
       <Paper
         shadow="xs"
         radius="md"
@@ -50,23 +53,23 @@ export default function Message({ data, onDelete }: IMessageProps) {
         <div className="flex items-center w-full flex-col">
           <Box className="flex items-center justify-between w-full">
             <div className="text-xs font-bold">
-            {data.recipient.length > 0 && <span>{data.recipient}</span>}
+              {data.recipient_name.length > 0 && (
+                <span>{data.recipient_name}</span>
+              )}
             </div>
             <span className="text-xs">
               {dayjs(data.time).format("HH:mm D/M/YYYY")}
             </span>
           </Box>
 
-        <Box className="w-full flex items-center">
+          <Box className="w-full flex items-center gap-2">
-          <Textarea
+            <div className="text-xs w-full min-h-[60px] py-2 break-words">
-            defaultValue={`${
+              <span className="font-bold">{data.sender_name || ""}:</span>{" "}
-              data.sender.split("@")[0] || ""
+              <span className="text-sm whitespace-pre-wrap break-all max-w-[300px]">
-            }: ${messageContent}`}
+                {messageContent}
-            value={`${data.sender.split("@")[0] || ""}: ${messageContent}`}
+              </span>
-            className="flex-1"
+            </div>
-            variant="unstyled"
+
-            readOnly
-          />
             <Box className="flex gap-2">
               <Tooltip label="View">
                 <ActionIcon onClick={toggle} variant="light" size="sm">
@@ -85,15 +88,8 @@ export default function Message({ data, onDelete }: IMessageProps) {
               </Tooltip>
             </Box>
           </Box>
-
-        {/* <Box className="flex items-center justify-start w-full">
-          <span className="text-xs text-left">
-            {data.sender.split("@")[0]
-              ? `From: ${data.sender.split("@")[0]}`
-              : ""}
-          </span>
-        </Box> */}
         </div>
       </Paper>
+    </Tooltip>
   );
 }

src/pages/main.tsx

@@ -6,7 +6,7 @@ import {
   LoadingOverlay,
   ScrollAreaAutosize,
   Tooltip,
-  useMantineColorScheme
+  useMantineColorScheme,
 } from "@mantine/core";
 import { useDisclosure, useViewportSize } from "@mantine/hooks"; // 🔥 thêm cái này
 import { IconDotsVertical } from "@tabler/icons-react";
@@ -96,7 +96,11 @@ function MainPage() {
   return (
     <Box className="flex flex-col !overflow-hidden h-full">
       {/* Header */}
-      <header className={`px-4 py-2 flex items-center justify-between sticky top-0 border-b z-10 ${colorScheme === 'dark' ? '': 'border-gray-100 pb-2 bg-white'}`}>
+      <header
+        className={`px-4 py-2 flex items-center justify-between sticky top-0 border-b z-10 ${
+          colorScheme === "dark" ? "" : "border-gray-100 pb-2 bg-white"
+        }`}
+      >
         {/* <Tooltip label="Mail">
           <ActionIcon
             onClick={() => {

src/vite-env.d.ts

@@ -10,12 +10,23 @@ declare global {
   }
 }
 
+// interface IMessage {
+//   id: number;
+//   sender: string;
+//   time: number;
+//   message: string;
+//   recipient:string
+// }
+
 interface IMessage {
   id: number;
-  sender: string;
-  time: number;
   message: string;
-  recipient:string
+  sender_email: string;
+  sender_name: string;
+  recipient_email: null | string;
+  recipient_name: string;
+  recipient_type: 1 | 2;
+  time: number;
 }
 
 interface IEmail {