From 7b637d343206b3ccca21607a5c71729ce02a7454 Mon Sep 17 00:00:00 2001
From: Debanjum <debanjum@gmail.com>
Date: Thu, 10 Jul 2025 12:23:46 -0700
Subject: [PATCH] Use document style ux when print conversations to pdf

Inspired by my previous turnstyle ux explorations.

But basically user message becomes section title and khoj message
becomes section body with the timestamp being used a section title,
body divider.
---
 .../components/chatHistory/chatHistory.tsx    |  3 --
 .../chatMessage/chatMessage.module.css        | 36 ++++++++++++++++---
 .../components/chatMessage/chatMessage.tsx    |  1 +
 3 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/interface/web/app/components/chatHistory/chatHistory.tsx b/src/interface/web/app/components/chatHistory/chatHistory.tsx
index 82b1b3b1..18810a93 100644
--- a/src/interface/web/app/components/chatHistory/chatHistory.tsx
+++ b/src/interface/web/app/components/chatHistory/chatHistory.tsx
@@ -549,9 +549,6 @@ export default function ChatHistory(props: ChatHistoryProps) {
                                 <p>
                                     <strong>Agent:</strong> {constructAgentName()}
                                 </p>
-                                <p>
-                                    <strong>Printed On:</strong> {new Date().toLocaleDateString()}
-                                </p>
                             </div>
                         </div>
                     </div>
diff --git a/src/interface/web/app/components/chatMessage/chatMessage.module.css b/src/interface/web/app/components/chatMessage/chatMessage.module.css
index aedce822..dd09e98a 100644
--- a/src/interface/web/app/components/chatMessage/chatMessage.module.css
+++ b/src/interface/web/app/components/chatMessage/chatMessage.module.css
@@ -207,11 +207,20 @@ div.trainOfThoughtElement ul {
         border-radius: 8px !important;
         margin: 0.5rem 0 !important;
         padding: 0.5rem !important;
-        page-break-inside: avoid;
         width: 100% !important;
         max-width: none !important;
     }
 
+    div.chatMessageContainer.you {
+        margin: 1rem 0 0 0 !important;
+        background: transparent !important;
+        border: none !important;
+    }
+
+    div.chatMessageContainer.khoj {
+        margin: 0 !important;
+    }
+
     div.chatMessageWrapper {
         padding-left: 0.5rem !important;
         padding-bottom: 0.5rem !important;
@@ -219,12 +228,18 @@ div.trainOfThoughtElement ul {
         max-width: none !important;
     }
 
+    div.you div.chatMessageWrapper {
+        padding: 0 !important;
+    }
+
     div.you {
-        background-color: #f5f5f5 !important;
+        background-color: transparent !important;
         color: #000 !important;
-        width: 100% !important;
-        max-width: none !important;
-        align-self: stretch !important;
+        font-size: 16pt !important;
+        font-weight: 500 !important;
+        padding: 0.8rem 0 0.1rem 0 !important;
+        align-self: flex-start !important;
+        text-align: left !important;
     }
 
     div.khoj {
@@ -246,6 +261,17 @@ div.trainOfThoughtElement ul {
         font-size: 0.7rem !important;
     }
 
+    /* Add timestamp as divider between title and body */
+    div.you.chatMessageContainer::after {
+        content: "🕐 " attr(data-created) !important;
+        display: block !important;
+        color: #888 !important;
+        font-size: 9pt !important;
+        font-weight: normal !important;
+        margin: 0.2rem 0 0.6rem 0 !important;
+        padding-bottom: 0.4rem !important;
+    }
+
     /* Hide interactive elements */
     div.chatFooter,
     div.chatButtons,
diff --git a/src/interface/web/app/components/chatMessage/chatMessage.tsx b/src/interface/web/app/components/chatMessage/chatMessage.tsx
index 890aec9b..eaec7d85 100644
--- a/src/interface/web/app/components/chatMessage/chatMessage.tsx
+++ b/src/interface/web/app/components/chatMessage/chatMessage.tsx
@@ -713,6 +713,7 @@ const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>((props, ref) =>
             className={constructClasses(props.chatMessage)}
             onMouseLeave={(event) => setIsHovering(false)}
             onMouseEnter={(event) => setIsHovering(true)}
+            data-created={formatDate(props.chatMessage.created)}
         >
             <div className={chatMessageWrapperClasses(props.chatMessage)}>
                 {props.chatMessage.queryFiles && props.chatMessage.queryFiles.length > 0 && (