New exm

exm-web/app/(main)/chats/detail/page.tsx

@@ -13,11 +13,15 @@ export default function Detail() {
 
   return (
     <>
-      <div className="w-message border-r shrink-0">
-        <Messages setShowSidebar={handleToggle} showSidebar={showSidebar} />
+      <div
+        className={`${
+          showSidebar ? "w-[calc(60%-230px)]" : "w-[calc(80%-230px)]"
+        } border-r shrink-0`}
+      >
+        <Messages setShowSidebar={handleToggle} />
       </div>
       {showSidebar && (
-        <div className="flex h-full w-1/4 flex-col">
+        <div className="flex w-1/5 flex-col">
           <RightSideBar
             setShowSidebar={handleToggle}
             showSidebar={showSidebar}

exm-web/app/(main)/chats/layout.tsx

@@ -13,7 +13,7 @@ interface ILayoutProps {
 export default function ChatLayout({ children }: ILayoutProps) {
   return (
     <>
-      <div className="flex h-full w-1/4 flex-col border-r shrink-0">
+      <div className="flex h-full w-1/5 flex-col border-r shrink-0">
         <ChatList />
       </div>
       {children}

exm-web/app/(main)/detail/page.tsx

@@ -2,9 +2,6 @@
 
 import dynamic from "next/dynamic"
 
-const RightSideBar = dynamic(
-  () => import("@/modules/feed/component/RightSideBar")
-)
 const PostItem = dynamic(() => import("@/modules/feed/component/PostItem"))
 const EventItem = dynamic(() => import("@/modules/feed/component/EventItem"))
 
@@ -25,8 +22,7 @@ export default function Detail() {
   return (
     <>
       <div className="flex h-full w-[calc(100%-230px)] flex-col">
-        <div className="h-[65px] border-b border-[#eee] shrink-0" />
-        <div className="bg-[#F8F9FA] h-full px-[25px]">
+        <div className="h-full px-[25px] pt-4">
           {renderDetail()}
         </div>
       </div>

exm-web/app/(main)/layout.tsx

@@ -18,7 +18,7 @@ export default function RootLayout({ children }: ILayoutProps) {
       <CheckAuth>
         <ExmProvider>
           <div className="relative flex h-screen flex-col">
-            <section className="flex flex-auto justify-between bg-white border-b border-exm">
+            <section className="flex justify-between bg-white border-b border-exm ">
               <div className="flex justify-center w-[230px] h-[67px] items-center border-r border-exm">
                 <Image
                   alt=""

exm-web/components/FilePreview.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react"
 import AudioVisualizer from "@/modules/chat/component/messages/AudioVisualizer"
-import { ExternalLinkIcon, XCircle } from "lucide-react"
+import FormAttachments from "@/modules/feed/component/form/FormAttachments"
+import { ExternalLinkIcon, X, XCircle } from "lucide-react"
 
 import { readFile } from "@/lib/utils"
 
@@ -59,54 +60,32 @@ export const FilePreview = ({
 
   const renderFile = () => {
     return (
-      <div className="relative">
-        {deleteImage && fileIndex && (
-          <button
-            type="button"
-            className="absolute -top-2 -right-2 bg-white rounded-full"
-            onClick={() => onDelete(fileIndex)}
-          >
-            <XCircle size={18} />
-          </button>
-        )}
-
-        {isDownload ? (
-          <a href={readFile(fileUrl)}>
-            <div className="w-full p-2 rounded-md bg-[#F0F0F0]">
-              <div className="flex gap-2 items-center font-semibold text-[#444] break-words">
-                <ExternalLinkIcon size={18} /> {fileName}
-              </div>
-            </div>
-          </a>
-        ) : (
-          <div className="p-2 rounded-md bg-[#F0F0F0] ">
-            <div className="flex gap-2 items-center font-semibold text-[#444] break-words">
-              <ExternalLinkIcon size={18} /> {fileName}
-            </div>
-          </div>
-        )}
-      </div>
+      <FormAttachments
+        attachments={[attachments && attachments[fileIndex]]}
+        deleteWithIndex={onDelete}
+        type="form"
+      />
     )
   }
 
   const renderImagePreview = () => {
     if (deleteImage && fileIndex + 1) {
       return (
-        <div className="relative shrink-0 w-14 h-14">
+        <div className="relative shrink-0 w-full h-[100px] mb-[12px] px-[6px]">
           <button
             type="button"
-            className="absolute -top-2 -right-2 bg-white rounded-full"
+            className="absolute top-[6px] bg-[#c1c1c1] bg-opacity-40 p-[2px] right-[10px] rounded-full cursor-pointer"
             onClick={() => onDelete(fileIndex)}
           >
-            <XCircle size={18} />
+            <X size={16} />
           </button>
 
           <Image
             alt="image"
             src={fileUrl || ""}
             width={100}
             height={100}
-            className="object-cover rounded-md w-14 h-14"
+            className="object-cover rounded-md w-full h-[100px]"
           />
         </div>
       )
@@ -179,14 +158,14 @@ export const FilePreview = ({
     return (
       <AudioVisualizer
         url={readFile(fileUrl)}
-        waveColor={"#b5b4b4"}
+        waveColor={isMe ? "#2970FF" : "#fff"}
         progressColor={`${isMe ? "#fff" : "#8771D5"}`}
         from="message"
       />
     )
   }
 
-  const fileExtension = fileUrl.split(".").pop()
+  const fileExtension = fileUrl.toLowerCase().split(".").pop()
 
   let filePreview
 

exm-web/modules/chat/component/AddParticipant.tsx

@@ -4,7 +4,7 @@ import { useState } from "react"
 import { currentUserAtom } from "@/modules/JotaiProiveder"
 import { IUser } from "@/modules/auth/types"
 import { useAtomValue } from "jotai"
-import { PlusCircle } from "lucide-react"
+import { UserPlus } from "lucide-react"
 
 import { Button } from "@/components/ui/button"
 import {
@@ -20,7 +20,7 @@ import SelectUsers from "@/components/select/SelectUsers"
 import useChatsMutation from "../hooks/useChatsMutation"
 import { IChat } from "../types"
 
-const AddParticipant = ({ chat, type }: { chat: IChat; type?: string }) => {
+const AddParticipant = ({ chat }: { chat: IChat }) => {
   const currentUser = useAtomValue(currentUserAtom) || ({} as IUser)
   const [userIds, setUserIds] = useState(
     chat.participantUsers.map((user) => user._id) || ([] as any)
@@ -52,7 +52,7 @@ const AddParticipant = ({ chat, type }: { chat: IChat; type?: string }) => {
         <DialogContent className="p-0 gap-0 max-w-md">
           <DialogHeader className="border-b p-4">
             <DialogTitle className="flex justify-around">
-              Add people
+              Add new member
             </DialogTitle>
           </DialogHeader>
 
@@ -81,22 +81,23 @@ const AddParticipant = ({ chat, type }: { chat: IChat; type?: string }) => {
     }
 
     const renderTrigger = () => {
-      if (type === "small") {
-        return (
-          <div className="flex flex-col items-center">
-            <div className="bg-[#E6E6E6] rounded-lg p-3 text-[#9A9A9A] cursor-pointer">
-              <PlusCircle size={16} />
+      return (
+        <div className="mb-4">
+          <div className="flex items-center justify-between mb-2 p-2">
+            <div className="flex items-center cursor-pointer">
+              <div className="items-end flex mr-2">
+                <div className="w-10 h-10 rounded-full bg-[#F2F4F7] flex justify-center items-center">
+                  <UserPlus />
+                </div>
+              </div>
+
+              <div className="">
+                <p className="text-sm font-semibold text-[#444]">
+                  Add new member
+                </p>
+              </div>
             </div>
-            Add
           </div>
-        )
-      }
-
-      return (
-        <div className="p-3 cursor-pointer bg-primary-light rounded-lg">
-          <p className="text-sm font-medium text-white w-full text-center">
-            Add People
-          </p>
         </div>
       )
     }

exm-web/modules/chat/component/ChatItem.tsx

@@ -58,21 +58,18 @@ export const ChatItem = ({
   const searchParams = useSearchParams()
 
   const [open, setOpen] = useState(false)
+  const [showActionBtn, setShowActionBtn] = useState(false)
 
   const chatId = searchParams.get("id")
 
+  const isSeen = chat && chat.isSeen ? chat.isSeen : false
+
   const users: any[] = chat?.participantUsers || []
   const user: any =
     users?.length > 1
       ? users?.filter((u) => u._id !== currentUser?._id)[0]
       : users?.[0]
 
-  const isSeen = chat
-    ? chat.lastMessage?.createdUser?._id === currentUser?._id
-      ? true
-      : chat.isSeen
-    : true
-
   const handleClick = () => {
     if (chat) {
       router.push(`/chats/detail?id=${chat._id}`)
@@ -118,7 +115,9 @@ export const ChatItem = ({
     return (
       <Popover>
         <PopoverTrigger asChild={true}>
-          <MoreVerticalIcon size={16} />
+          <div className="shrink-0 bg-[#F2F4F7] p-1 rounded-full border border-exm ml-auto">
+            <MoreVerticalIcon size={16} />
+          </div>
         </PopoverTrigger>
         <PopoverContent className="w-44 p-3" align="start">
           <div
@@ -194,7 +193,7 @@ export const ChatItem = ({
           alt="avatar"
           width={60}
           height={60}
-          className="w-12 h-12 rounded-full object-cover border border-primary"
+          className="w-12 h-12 rounded-full object-cover"
         />
       )
     }
@@ -210,7 +209,7 @@ export const ChatItem = ({
         alt="avatar"
         width={60}
         height={60}
-        className="w-12 h-12 rounded-full object-cover border border-primary"
+        className="w-12 h-12 rounded-full object-cover"
       />
     )
   }
@@ -245,42 +244,49 @@ export const ChatItem = ({
     }
 
     return (
-      <div className={`text-sm text-[#444] w-9/12`}>
+      <div
+        className={`text-sm text-[#444] ${
+          showActionBtn ? "w-[calc(100%-90px)]" : "w-[calc(100%-60px)]"
+        }`}
+      >
         <div className="flex justify-between">
-          <p className="w-4/5 truncate">{renderName()}</p>
+          <p className="w-[calc(100%-14px)] text-[16px] truncate font-bold flex">
+            {!handleForward && isPinned && (
+              <Pin size={16} color="#6A45E6" className="shrink-0" />
+            )}
+            <span className="w-1/2 truncate">{renderName()}</span>
+            <span className="w-1/2 truncate text-sm">
+              {chat.type === "direct" && user?.details.position && (
+                <>
+                  <span className="text-[18px] text-black">&nbsp;∙&nbsp;</span>
+                  <span className="font-normal">{user?.details.position}</span>
+                </>
+              )}
+            </span>
+          </p>
           {!handleForward &&
             chat &&
             chat.muteUserIds.includes(currentUser._id) && <BellOff size={14} />}
         </div>
-        <div className="flex justify-between w-full text-xs">
-          <p className="w-1/2 truncate">
-            {chat.type === "direct" ? (
-              user?.details.position ? (
-                <span className="text-[10px]"> ({user?.details.position})</span>
-              ) : (
-                "(Active now)"
-              )
-            ) : (
-              "(Active now)"
-            )}
-          </p>
-          {!handleForward && (
-            <p className="text-primary-light text-[10px]">
+        {!handleForward && (
+          <div className="flex justify-between w-full text-sm text-[#667085]">
+            <p
+              className="truncate max-w-[150px]"
+              dangerouslySetInnerHTML={{
+                __html:
+                  (chat?.lastMessage &&
+                    (chat?.lastMessage.content === ""
+                      ? "Media message"
+                      : chat?.lastMessage.content)) ||
+                  "",
+              }}
+            />
+            <p>
               {chat.lastMessage &&
                 chat.lastMessage.createdAt &&
-                "⋅" + dayjs(chat.lastMessage.createdAt).fromNow()}
+                dayjs(chat.lastMessage.createdAt).fromNow(true)}
             </p>
-          )}
-        </div>
-        {!handleForward && (
-          <p
-            className="truncate max-w-[150px]"
-            dangerouslySetInnerHTML={
-              {
-                __html: (chat?.lastMessage && chat?.lastMessage.content) || "",
-              } || ""
-            }
-          />
+          </div>
         )}
       </div>
     )
@@ -290,12 +296,12 @@ export const ChatItem = ({
     <Card
       className={`${
         !handleForward && chatId === chat._id
-          ? "bg-[#f0eef9]"
+          ? "bg-[#F2F4F7] border border-exm"
           : "bg-transparent"
-      } ${
-        isSeen ? "" : "font-bold"
-      } px-5 rounded-none py-2.5 cursor-pointer flex items-center shadow-none border-none hover:bg-[#F0F0F0] mb-3 sm:rounded-lg `}
+      } px-3 rounded-none py-4 cursor-pointer flex items-center shadow-none border-none mb-3 relative`}
       onClick={handleClick}
+      onMouseEnter={() => setShowActionBtn(true)}
+      onMouseLeave={() => setShowActionBtn(false)}
     >
       <div className="items-end flex mr-3">
         <div className="w-12 h-12 rounded-full relative">
@@ -306,8 +312,14 @@ export const ChatItem = ({
 
       {renderInfo()}
 
-      {!handleForward && renderChatActions()}
+      {!handleForward && showActionBtn && renderChatActions()}
       {handleForward && renderForwardAction()}
+
+      {!isSeen && (
+        <span className="rounded-full bg-primary absolute top-[10px] right-[10px] w-2.5 h-2.5">
+          &nbsp;
+        </span>
+      )}
     </Card>
   )
 }