(feat): improved chat ui

packages/chat/src/components/message.tsx

@@ -3,54 +3,97 @@ import type { RawMessage } from "../values";
 import Text from "@tensamin/markdown/text";
 import { AlertTriangle } from "lucide-react";
 
-import { cn, Tooltip, TooltipContent, TooltipTrigger } from "@tensamin/ui";
-import { useIsMobile } from "@tensamin/ui";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  cn,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@tensamin/ui";
 import {
   ContextMenu,
   ContextMenuContent,
   ContextMenuItem,
   ContextMenuTrigger,
 } from "@tensamin/ui";
+import Wrapper from "@tensamin/user/wrapper";
+import { useChat } from "../context";
 
 function MessageComponent({
+  grouped,
   message,
 }: {
+  grouped: boolean;
   message: RawMessage & {
     failed?: boolean;
   };
 }) {
-  const isMobile = useIsMobile();
+  const { userId } = useChat();
   const actuallyFailed = message.failed && message.message_state === "awaiting";
 
   return (
     <div
-      className={`w-full flex justify-start transition-opacity duration-150 ${actuallyFailed || message.message_state === "awaiting" ? "opacity-50" : ""}`}
+      className={`${grouped ? "" : "pt-3"} w-full flex justify-start transition-opacity duration-150 ${actuallyFailed || message.message_state === "awaiting" ? "opacity-50" : ""}`}
     >
       <ContextMenu>
         <ContextMenuTrigger
           render={
             <div
               className={cn(
-                "selection-foreground flex gap-1 items-center justify-center max-w-[80%] rounded-lg px-2 py-px whitespace-pre-wrap break-all",
+                "group hover:bg-muted/50 select-text! justify-start flex gap-1 items-center w-full px-2 whitespace-pre-wrap break-all",
                 {
-                  "bg-(--destructive)/75 text-destructive-foreground":
+                  "bg-(--destructive)/15 text-destructive-foreground":
                     actuallyFailed,
-                  "bg-primary text-primary-foreground":
-                    !actuallyFailed && message.sent_by_self,
-                  "bg-muted": !message.sent_by_self,
-                  "select-none": isMobile,
                 },
               )}
             >
-              {message.failed && message.message_state === "awaiting" && (
-                <Tooltip>
-                  <TooltipContent>
-                    <p>Failed to send message</p>
-                  </TooltipContent>
-                  <TooltipTrigger render={<AlertTriangle size={17} />} />
-                </Tooltip>
-              )}
-              <Text value={message.content} />
+              <Wrapper
+                loading={"State not achievable"}
+                userId={message.sent_by_self ? "own" : userId}
+                component={(user) => (
+                  <>
+                    {grouped ? (
+                      <p className="w-9 text-xs group-hover:visible invisible text-muted-foreground">
+                        {new Date(message.send_time).toLocaleString([], {
+                          hour: "2-digit",
+                          minute: "2-digit",
+                        })}
+                      </p>
+                    ) : (
+                      <Avatar className="mr-1 mb-auto mt-1 w-10">
+                        <AvatarImage src={user.avatar} />
+                        <AvatarFallback>
+                          {user.display.slice(0, 2).toUpperCase()}
+                        </AvatarFallback>
+                      </Avatar>
+                    )}
+                    {message.failed && message.message_state === "awaiting" && (
+                      <Tooltip>
+                        <TooltipContent>
+                          <p>Failed to send message</p>
+                        </TooltipContent>
+                        <TooltipTrigger render={<AlertTriangle size={17} />} />
+                      </Tooltip>
+                    )}
+                    <div className="flex flex-col">
+                      {!grouped && (
+                        <div className="flex items-center gap-1">
+                          <p className="font-medium">{user.display}</p>
+                          <p className="text-xs text-muted-foreground">
+                            {new Date(message.send_time).toLocaleString([], {
+                              hour: "2-digit",
+                              minute: "2-digit",
+                            })}
+                          </p>
+                        </div>
+                      )}
+                      <Text value={message.content} />
+                    </div>
+                  </>
+                )}
+              />
             </div>
           }
         />