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,63 +37,59 @@ export default function Message({ data, onDelete }: IMessageProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  console.log(data);
+
   return (
-    <Paper
-      shadow="xs"
-      radius="md"
-      p="xs"
-      withBorder
-      className={`flex items-center relative gap-3 w-full transition-all duration-300 ${
-        animation ? "animate-pulse !bg-blue-100" : ""
-      }`}
-    >
-      <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>}
-          </div>
-          <span className="text-xs">
-            {dayjs(data.time).format("HH:mm D/M/YYYY")}
-          </span>
-        </Box>
-
-        <Box className="w-full flex items-center">
-          <Textarea
-            defaultValue={`${
-              data.sender.split("@")[0] || ""
-            }: ${messageContent}`}
-            value={`${data.sender.split("@")[0] || ""}: ${messageContent}`}
-            className="flex-1"
-            variant="unstyled"
-            readOnly
-          />
-          <Box className="flex gap-2">
-            <Tooltip label="View">
-              <ActionIcon onClick={toggle} variant="light" size="sm">
-                {show ? <IconEyeOff size={16} /> : <IconEye size={16} />}
-              </ActionIcon>
-            </Tooltip>
-            <Tooltip label="Delete">
-              <ActionIcon
-                onClick={onDelete}
-                variant="light"
-                size="sm"
-                color="red"
-              >
-                <IconTrash size={16} />
-              </ActionIcon>
-            </Tooltip>
+    <Tooltip label={data.recipient_type === 1 ? "Personal" : "Group"}>
+      <Paper
+        shadow="xs"
+        radius="md"
+        p="xs"
+        withBorder
+        className={`flex items-center relative gap-3 w-full transition-all duration-300 ${
+          animation ? "animate-pulse !bg-blue-100" : ""
+        }`}
+      >
+        <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_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>
 
-        {/* <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>
+          <Box className="w-full flex items-center gap-2">
+            <div className="text-xs w-full min-h-[60px] py-2 break-words">
+              <span className="font-bold">{data.sender_name || ""}:</span>{" "}
+              <span className="text-sm whitespace-pre-wrap break-all max-w-[300px]">
+                {messageContent}
+              </span>
+            </div>
+
+            <Box className="flex gap-2">
+              <Tooltip label="View">
+                <ActionIcon onClick={toggle} variant="light" size="sm">
+                  {show ? <IconEyeOff size={16} /> : <IconEye size={16} />}
+                </ActionIcon>
+              </Tooltip>
+              <Tooltip label="Delete">
+                <ActionIcon
+                  onClick={onDelete}
+                  variant="light"
+                  size="sm"
+                  color="red"
+                >
+                  <IconTrash size={16} />
+                </ActionIcon>
+              </Tooltip>
+            </Box>
+          </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";
@@ -22,7 +22,7 @@ function MainPage() {
   const { height } = useViewportSize(); // lấy kích thước cửa sổ
   const [clickMessage, setClickMessage] = useState<IMessage | null>(null);
 
-  const {colorScheme} = useMantineColorScheme();
+  const { colorScheme } = useMantineColorScheme();
 
   const scrollToBottom = () => {
     const viewport = viewportRef.current;
@@ -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={() => {
@@ -112,7 +116,7 @@ function MainPage() {
         </Tooltip> */}
 
         <Avatar radius="sm" src={"./assets/icon-1.png"} />
-{/* 
+        {/* 
         <div className="text-xl font-semibold">Zulip Notes</div> */}
 
         <Settings

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 {