From 5b692523372d8720bbc0cca47b0dd505a4296c26 Mon Sep 17 00:00:00 2001
From: sabaimran <narmiabas@gmail.com>
Date: Tue, 9 Jul 2024 14:56:57 +0530
Subject: [PATCH] Add hover effects for chat messages

---
 src/interface/web/app/chat/page.tsx           |   3 +-
 .../chatMessage/chatMessage.module.css        |  10 +-
 .../components/chatMessage/chatMessage.tsx    | 103 +++++++++++-------
 .../referencePanel/referencePanel.tsx         |   8 +-
 4 files changed, 72 insertions(+), 52 deletions(-)

diff --git a/src/interface/web/app/chat/page.tsx b/src/interface/web/app/chat/page.tsx
index f73567a5..ca03eb32 100644
--- a/src/interface/web/app/chat/page.tsx
+++ b/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}
diff --git a/src/interface/web/app/components/chatMessage/chatMessage.module.css b/src/interface/web/app/components/chatMessage/chatMessage.module.css
index 3343c674..20871831 100644
--- a/src/interface/web/app/components/chatMessage/chatMessage.module.css
+++ b/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;
diff --git a/src/interface/web/app/components/chatMessage/chatMessage.tsx b/src/interface/web/app/components/chatMessage/chatMessage.tsx
index 79b008ff..e828c1a7 100644
--- a/src/interface/web/app/components/chatMessage/chatMessage.tsx
+++ b/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,40 +329,49 @@ export default function ChatMessage(props: ChatMessageProps) {
                     onlineReferenceCardData={allReferences.onlineReferenceCardData} />
             </div>
             <div className={styles.chatFooter}>
-                {/* <div className={styles.chatTimestamp}>
-                    {renderTimeStamp(props.chatMessage.created)}
-                </div> */}
-                <div className={styles.chatButtons}>
-                    {
-                        <div className={styles.referenceButton}>
-                            <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);
-                        setCopySuccess(true);
-                    }}>
-                        {
-                            copySuccess ?
-                                <Copy color='green' />
-                                : <Copy color='hsl(var(--muted-foreground))' />
-                        }
-                    </button>
-                    {
-                        props.chatMessage.by === "khoj" &&
-                        (
-                            props.chatMessage.intent ?
-                                <FeedbackButtons
-                                    uquery={props.chatMessage.intent.query}
-                                    kquery={props.chatMessage.message} />
-                                : <FeedbackButtons
-                                    uquery={props.chatMessage.rawQuery || props.chatMessage.message}
-                                    kquery={props.chatMessage.message} />
-                        )
-                    }
-                </div>
+                {
+                    isHovering &&
+                    (
+                        <>
+                            <div className={`text-gray-400 relative top-2 left-2`}>
+                                {renderTimeStamp(props.chatMessage.created)}
+                            </div>
+                            <div className={styles.chatButtons}>
+                                {
+                                    (props.chatMessage.by === "khoj") &&
+                                    (
+                                        <button onClick={(event) => console.log("speaker")}>
+                                            <SpeakerHifi color='hsl(var(--muted-foreground))' />
+                                        </button>
+                                    )
+                                }
+                                <button className={`${styles.copyButton}`} onClick={() => {
+                                    navigator.clipboard.writeText(props.chatMessage.message);
+                                    setCopySuccess(true);
+                                }}>
+                                    {
+                                        copySuccess ?
+                                            <Copy color='green' />
+                                            : <Copy color='hsl(var(--muted-foreground))' />
+                                    }
+                                </button>
+                                {
+                                    (props.chatMessage.by === "khoj") &&
+                                    (
+                                        props.chatMessage.intent ?
+                                            <FeedbackButtons
+                                                uquery={props.chatMessage.intent.query}
+                                                kquery={props.chatMessage.message} />
+                                            : <FeedbackButtons
+                                                uquery={props.chatMessage.rawQuery || props.chatMessage.message}
+                                                kquery={props.chatMessage.message} />
+                                    )
+                                }
+                            </div>
+                        </>
+                    )
+                }
+
             </div>
         </div>
     )
diff --git a/src/interface/web/app/components/referencePanel/referencePanel.tsx b/src/interface/web/app/components/referencePanel/referencePanel.tsx
index fddff7e1..fd8102d2 100644
--- a/src/interface/web/app/components/referencePanel/referencePanel.tsx
+++ b/src/interface/web/app/components/referencePanel/referencePanel.tsx
@@ -59,7 +59,7 @@ function NotesContextReferenceCard(props: NotesContextReferenceCardProps) {
                         onMouseEnter={() => setIsHovering(true)}
                         onMouseLeave={() => setIsHovering(false)}
                         className={`${props.showFullContent ? 'w-auto' : 'w-[200px]'} overflow-hidden break-words text-balance rounded-lg p-2 bg-muted border-none`}
-                        >
+                    >
                         <h3 className={`${props.showFullContent ? 'block' : 'line-clamp-1'} text-muted-foreground}`}>
                             <File className='w-6 h-6 text-muted-foreground inline-flex' />
                             {props.title}
@@ -320,9 +320,9 @@ 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") }}>
-                    View references <ArrowRight className='m-1' />
+            <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">
                 <SheetHeader>