(feat): improve chat ui

apps/web/src/components/navbar.tsx

@@ -96,7 +96,7 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
                 </Popover>
               )
             }
-            loading={<Skeleton className="ml-3 w-40 h-5" />}
+            loading={<Skeleton className="w-30 h-5" />}
           />
         )}
       </div>

packages/chat/src/components/message.tsx

@@ -21,9 +21,7 @@ import {
   Card,
   cn,
   Separator,
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
+  Skeleton,
 } from "@tensamin/ui";
 import MessageContextMenu from "./messageContextMenu";
 import Media from "./media";
@@ -44,13 +42,15 @@ function MessageComponent({
   };
   user: User | null;
 }) {
-  const actuallyFailed = message.failed && message.MessageState === "awaiting";
+  const [decryptionFailed, setDecryptionFailed] = useState(false);
+  const actuallyFailed =
+    (message.failed && message.MessageState === "awaiting") || decryptionFailed;
 
   // Fade-in
   const [hasFadedIn, setHasFadedIn] = useState(false);
   const opacityClass = !hasFadedIn
     ? "opacity-0"
-    : actuallyFailed || message.MessageState === "awaiting"
+    : message.MessageState === "awaiting"
       ? "opacity-50"
       : "opacity-100";
   useEffect(() => {
@@ -63,19 +63,6 @@ function MessageComponent({
     };
   }, []);
 
-  // Check if message is a url
-  const [isValidURL, setIsValidURL] = useState(false);
-  useEffect(() => {
-    try {
-      if (message.Content.split(" ").length > 1) throw new Error();
-
-      new URL(message.Content);
-      setIsValidURL(true);
-    } catch {
-      setIsValidURL(false);
-    }
-  }, [message.Content]);
-
   // Message states
   const { load } = useStorage();
   const { send } = useMTP();
@@ -141,20 +128,32 @@ function MessageComponent({
       (err) => {
         toast("error", "Failed to decrypt message", String(err));
         log(1, "chat", "red", err);
+        setDecryptionFailed(true);
       },
     );
   }, [chatSecret, message.Content]);
 
+  // Check if message is a url
+  const [isValidURL, setIsValidURL] = useState(false);
+  useEffect(() => {
+    if (!decryptedContent) return;
+
+    try {
+      if (decryptedContent.split(" ").length > 1) throw new Error();
+
+      new URL(decryptedContent);
+      setIsValidURL(true);
+    } catch {
+      setIsValidURL(false);
+    }
+  }, [decryptedContent]);
+
   return (
     <div
       // pt-3 is to get a gap between messages
       className={`${grouped ? "" : "pt-3"} w-full flex justify-start transition-opacity duration-150 ${opacityClass}`}
     >
-      {user && decryptedContent ? (
-        <MessageContextMenu
-          content={message.Content}
-          messageId={message.SendTime}
-        >
+      {user ? (
         <div
           className={cn(
             "group hover:bg-muted/50 select-text! relative justify-start flex gap-1 items-center w-full px-2 whitespace-pre-wrap break-all",
@@ -180,14 +179,6 @@ function MessageComponent({
                 </AvatarFallback>
               </Avatar>
             )}
-              {message.failed && message.MessageState === "awaiting" && (
-                <Tooltip>
-                  <TooltipContent>
-                    <p>Failed to send message</p>
-                  </TooltipContent>
-                  <TooltipTrigger render={<AlertTriangle size={17} />} />
-                </Tooltip>
-              )}
             <div className="flex flex-col group">
               <Card className="absolute right-4 -top-3 opacity-0 group-hover:opacity-100 flex flex-row justify-end gap-0! z-10 p-0! shadow-lg rounded-lg!">
                 {[0, 1, 2].map((item) => (
@@ -217,12 +208,9 @@ function MessageComponent({
                       minute: "2-digit",
                     })}
                   </p>
-                    <div>
+                  <div className="flex items-center justify-start gap-1">
                     {message.MessageState === "read" ? (
-                        <Check
-                          size={12}
-                          color="var(--primary-foreground-alt)"
-                        />
+                      <Check size={12} color="var(--primary-foreground-alt)" />
                     ) : message.MessageState === "received" ? (
                       <Check size={12} color="var(--muted-foreground)" />
                     ) : message.MessageState === "sent" ? (
@@ -230,20 +218,36 @@ function MessageComponent({
                     ) : message.MessageState === "sending" ? (
                       <Ellipse size={12} color="var(--muted-foreground)" />
                     ) : null}
+                    {actuallyFailed && (
+                      <AlertTriangle color="var(--destructive)" size={12} />
+                    )}
                   </div>
                 </div>
               )}
+
+              {decryptedContent ? (
+                <MessageContextMenu
+                  content={decryptedContent}
+                  messageId={message.SendTime}
+                >
                   {isValidURL ? (
-                  <Media link={message.Content} />
+                    <Media link={decryptedContent} />
                   ) : (
-                  <Text value={message.Content} />
+                    <Text value={decryptedContent} />
+                  )}
+                </MessageContextMenu>
+              ) : decryptionFailed ? (
+                <Text value="Failed to decrypt message" />
+              ) : (
+                <Skeleton
+                  className={`w-25 h-5 ${grouped ? "my-1" : "mb-1"} rounded-sm!`}
+                />
               )}
             </div>
           </>
         </div>
-        </MessageContextMenu>
       ) : (
-        "Loading"
+        <Skeleton className="h-10 w-30" />
       )}
     </div>
   );