Add hover effects for chat messages

src/interface/web/app/chat/page.tsx

@@ -149,9 +149,8 @@ function ChatInputArea(props: ChatInputProps) {
                 <FileArrowUp weight='fill' />
             </Button>
             <div className="grid w-full gap-1.5">
-                {/* <Label htmlFor="message">Your message</Label> */}
                 <Textarea
-                    className='border-none min-h-[60px]'
+                    className='border-none min-h-[20px]'
                     placeholder="Type / to see a list of commands"
                     id="message"
                     value={message}

src/interface/web/app/components/chatMessage/chatMessage.module.css

@@ -61,7 +61,8 @@ div.author {
 
 div.chatFooter {
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
+    min-height: 28px;
 }
 
 div.chatButtons {
@@ -71,7 +72,8 @@ div.chatButtons {
     border-radius: 16px;
     position: relative;
     bottom: -28px;
-    background-color: hsla(var(--background));
+    background-color: hsla(var(--secondary));
+    box-shadow: 0 4px 10px var(--box-shadow-color);
 }
 
 div.chatFooter button {
@@ -88,10 +90,6 @@ div.chatFooter button:hover {
     background-color: hsla(var(--frosted-background-color));
 }
 
-div.chatTimestamp {
-    font-size: small;
-}
-
 button.codeCopyButton {
     cursor: pointer;
     float: right;

src/interface/web/app/components/chatMessage/chatMessage.tsx

@@ -214,6 +214,7 @@ export function TrainOfThought(props: TrainOfThoughtProps) {
 
 export default function ChatMessage(props: ChatMessageProps) {
     const [copySuccess, setCopySuccess] = useState<boolean>(false);
+    const [isHovering, setIsHovering] = useState<boolean>(false);
 
     let message = props.chatMessage.message;
 
@@ -260,12 +261,23 @@ export default function ChatMessage(props: ChatMessageProps) {
     }, [markdownRendered]);
 
     function renderTimeStamp(timestamp: string) {
-        var dateObject = new Date(timestamp);
-        var month = dateObject.getMonth() + 1;
-        var date = dateObject.getDate();
-        var year = dateObject.getFullYear();
-        const formattedDate = `${month}/${date}/${year}`;
-        return `${formattedDate} ${dateObject.toLocaleTimeString()}`;
+        const messageDateTime = new Date(timestamp);
+        const currentDataTime = new Date();
+        const timeDiff = currentDataTime.getTime() - messageDateTime.getTime();
+
+        if (timeDiff < 60000) {
+            return "Just now";
+        }
+
+        if (timeDiff < 3600000) {
+            return `${Math.floor(timeDiff / 60000)}m ago`;
+        }
+
+        if (timeDiff < 86400000) {
+            return `${Math.floor(timeDiff / 3600000)}h ago`;
+        }
+
+        return `${Math.floor(timeDiff / 86400000)}d ago`;
     }
 
     useEffect(() => {
@@ -304,6 +316,8 @@ export default function ChatMessage(props: ChatMessageProps) {
     return (
         <div
             className={constructClasses(props.chatMessage)}
+            onMouseLeave={(event) => setIsHovering(false)}
+            onMouseEnter={(event) => setIsHovering(true)}
             onClick={props.chatMessage.by === "khoj" ? (event) => undefined : undefined}>
             <div className={chatMessageWrapperClasses(props.chatMessage)}>
                 <div ref={messageRef} className={styles.chatMessage} dangerouslySetInnerHTML={{ __html: markdownRendered }} />
@@ -315,16 +329,21 @@ export default function ChatMessage(props: ChatMessageProps) {
                     onlineReferenceCardData={allReferences.onlineReferenceCardData} />
             </div>
             <div className={styles.chatFooter}>
-                {/* <div className={styles.chatTimestamp}>
+                {
+                    isHovering &&
+                    (
+                        <>
+                            <div className={`text-gray-400 relative top-2 left-2`}>
                                 {renderTimeStamp(props.chatMessage.created)}
-                </div> */}
+                            </div>
                             <div className={styles.chatButtons}>
                                 {
-                        <div className={styles.referenceButton}>
+                                    (props.chatMessage.by === "khoj") &&
+                                    (
                                         <button onClick={(event) => console.log("speaker")}>
                                             <SpeakerHifi color='hsl(var(--muted-foreground))' />
                                         </button>
-                        </div>
+                                    )
                                 }
                                 <button className={`${styles.copyButton}`} onClick={() => {
                                     navigator.clipboard.writeText(props.chatMessage.message);
@@ -337,7 +356,7 @@ export default function ChatMessage(props: ChatMessageProps) {
                                     }
                                 </button>
                                 {
-                        props.chatMessage.by === "khoj" &&
+                                    (props.chatMessage.by === "khoj") &&
                                     (
                                         props.chatMessage.intent ?
                                             <FeedbackButtons
@@ -349,6 +368,10 @@ export default function ChatMessage(props: ChatMessageProps) {
                                     )
                                 }
                             </div>
+                        </>
+                    )
+                }
+
             </div>
         </div>
     )

src/interface/web/app/components/referencePanel/referencePanel.tsx

@@ -320,8 +320,8 @@ export default function ReferencePanel(props: ReferencePanelDataProps) {
 
     return (
         <Sheet>
-            <SheetTrigger className='text-balance w-[200px] overflow-hidden break-words p-0 bg-transparent border-none text-gray-400 align-middle justify-center items-center !m-0 inline-flex'
-                    onClick={() => { console.log("showing references") }}>
+            <SheetTrigger
+                className='text-balance w-[200px] overflow-hidden break-words p-0 bg-transparent border-none text-gray-400 align-middle justify-center items-center !m-0 inline-flex'>
                 View references <ArrowRight className='m-1' />
             </SheetTrigger>
             <SheetContent className="overflow-y-scroll">