klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-02 21:19:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use document style ux when print conversations to pdf

Browse Source 
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.
This commit is contained in:
Debanjum
2025-07-10 12:23:46 -07:00
parent c28e90f388
commit 7b637d3432
3 changed files with 32 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/interface/web/app/components/chatHistory/chatHistory.tsx
View File

@@ -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>

36
src/interface/web/app/components/chatMessage/chatMessage.module.css
View File

@@ -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,

1
src/interface/web/app/components/chatMessage/chatMessage.tsx
View File

@@ -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 && (