refactor: file message UI in expired mode

src/components/FileMessage/AudioMessage.tsx

@@ -26,21 +26,18 @@ const AudioMessage = ({ url, name, size, download }: Props) => {
   return (
     <div
       className={clsx(
-        "md:w-96 flex flex-col gap-2 px-3 py-2 rounded-md border overflow-hidden bg-stone-100 dark:bg-stone-900",
+        "md:w-96 flex flex-col gap-2 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-500 overflow-hidden bg-stone-100 dark:bg-stone-900"
-        error ? "border-red-100 dark:border-red-900/50" : "border-gray-300 dark:border-gray-500"
+        // error ? "border-red-100 dark:border-red-900/50" : "border-gray-300 dark:border-gray-500"
       )}
     >
       <div className="flex justify-between z-30 overflow-hidden">
         <div className="flex gap-2 ">
-          <IconAudio className="w-9 h-auto" />
+          <IconAudio className={clsx("w-9 h-auto", error && "grayscale")} />
-          <div className="flex flex-col gap-1 text-sm text-gray-700 dark:text-gray-300">
+          <div className="flex flex-col gap-1 text-sm text-gray-900 dark:text-gray-100">
-            <span
+            <span title={name} className={clsx("font-bold truncate w-[240px]")}>
-              title={name}
+              {error ? "File not Found" : name}
-              className={clsx("font-bold truncate", error ? "w-56 text-red-500" : " w-[240px]")}
-            >
-              {name}
             </span>
-            <span>{_size}</span>
+            <span className="text-gray-400">{error ? "File expired or deleted" : _size}</span>
           </div>
         </div>
         {error ? (

src/components/FileMessage/OtherFileMessage.tsx

@@ -13,7 +13,7 @@ const ExpireTip = () => {
   const { t } = useTranslation("chat");
   return (
     <span className="text-red-500 text-xs whitespace-nowrap flex items-center gap-1">
-      <IconInfo className="stroke-red-500 w-4 h-4" /> {t("file_expired")}
+      <IconInfo className="stroke-gray-600 w-6 h-6" />
     </span>
   );
 };
@@ -42,7 +42,7 @@ const OtherFileMessage = ({
   handleCancel
 }: Props) => {
   const [error, setError] = useState(false);
-  const icon = getFileIcon(content_type, name, "w-9 shrink-0 h-auto");
+  const icon = getFileIcon(content_type, name, `w-9 shrink-0 h-auto ${error ? "grayscale" : ""}`);
   useEffect(() => {
     if (content) {
       fetch(content)
@@ -62,9 +62,9 @@ const OtherFileMessage = ({
   return (
     <div
       className={clsx(
-        `bg-stone-100 dark:bg-stone-900 border box-border md:w-96 rounded-md`,
+        `bg-stone-100 dark:bg-stone-900 border box-border md:w-96 rounded-md border-gray-300 dark:border-gray-500`,
-        sending && "opacity-90",
+        sending && "opacity-90"
-        error ? "border-red-100 dark:border-red-900/50" : "border-gray-300 dark:border-gray-500"
+        // error ? "border-red-100 dark:border-red-900/50" : "border-gray-300 dark:border-gray-500"
       )}
     >
       <div className="px-3 py-2 flex items-center justify-between gap-2">
@@ -72,15 +72,17 @@ const OtherFileMessage = ({
         <div className="flex flex-col gap-1 w-full overflow-hidden">
           <span
             className={clsx(
-              "font-semibold text-sm truncate",
+              "font-semibold text-sm truncate text-gray-800 dark:text-gray-100"
-              error ? "text-red-500" : "text-gray-800 dark:text-gray-100"
+              // error ? "text-red-500" : "text-gray-800 dark:text-gray-100"
             )}
           >
-            {name}
+            {error ? "File not Found" : name}
           </span>
           <span className="hidden md:flex whitespace-nowrap text-xs text-gray-500 dark:text-gray-300 gap-4">
             {sending ? (
               <Progress value={progress} width={"80%"} />
+            ) : error ? (
+              <strong>File expired or deleted</strong>
             ) : (
               <>
                 <strong>{formatBytes(size)}</strong>

src/components/FileMessage/VideoMessage.tsx

@@ -43,10 +43,8 @@ const VideoMessage = ({ url, name, size, download }: Props) => {
   return (
     <div
       className={clsx(
-        "w-60 md:w-96 relative rounded-md border overflow-hidden group",
+        "w-60 md:w-96 relative rounded-md border overflow-hidden group border-gray-300 dark:border-gray-500",
-        error
+        error ? "bg-stone-100 dark:bg-stone-900" : "h-32 md:h-52"
-          ? "bg-stone-100 dark:bg-stone-900 border-red-100 dark:border-red-900/50"
-          : "border-gray-300 dark:border-gray-500 h-32 md:h-52"
       )}
     >
       {!error && (
@@ -54,23 +52,23 @@ const VideoMessage = ({ url, name, size, download }: Props) => {
       )}
       <div
         className={clsx(
-          "w-full flex justify-between z-30 px-3 py-2 overflow-hidden group-hover:bg-black/20",
+          "w-full flex justify-between z-30 px-3 py-2 overflow-hidden",
           error ? "" : "absolute top-0 left-0 "
         )}
       >
         <div className="flex gap-2 ">
-          <IconVideo className="hidden md:block w-9 h-auto" />
+          <IconVideo className={clsx("hidden md:block w-9 h-auto", error && "grayscale")} />
-          <div className="flex flex-col gap-1 text-sm text-white">
+          <div className="flex flex-col gap-1 text-sm dark:text-white text-gray-900">
             <span
               title={name}
               className={clsx(
-                "font-bold truncate",
+                "font-bold truncate w-56 md:w-[240px]"
-                error ? "w-56 text-red-500" : "w-56 md:w-[240px]"
+                // error ? "w-56 text-red-500" : "w-56 md:w-[240px]"
               )}
             >
-              {name}
+              {error ? "File not Found" : name}
             </span>
-            <span>{_size}</span>
+            <span className="text-gray-400">{error ? "File expired or deleted" : _size}</span>
           </div>
         </div>
         {error ? (

src/components/VoiceMessage.tsx

@@ -121,7 +121,7 @@ const VoiceMessage = ({ file_path }: { file_path: string }) => {
           <IconPlay className="stroke-primary-500" />
         )}
       </button>
-      <div ref={containerRef} className={clsx("flex-1 h-8 min-w-[100px]")}>
+      <div ref={containerRef} className={clsx("flex-1 h-8 min-w-[100px] flex items-center")}>
         {status == "loading" && <span className="text-xs">Loading voice message...</span>}
         {status == "error" && (
           <span className="text-xs text-red-800">Load voice message error</span>