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

Make chats print friendly to share via print to PDF etc. from browser

Browse Source 
Add print specific styling to hide side panels and chat input footers.
Add heading with khoj logo, conversation title, agent and date.
This commit is contained in:
Debanjum
2025-07-08 11:57:11 -07:00
parent 8fb38d9e1e
commit 254207b010
7 changed files with 591 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,6 +24,7 @@ import { AgentData } from "@/app/components/agentCard/agentCard";
import React from "react";
import { useIsMobileWidth } from "@/app/common/utils";
import { Button } from "@/components/ui/button";
import { KhojLogo } from "../logo/khojLogo";
interface ChatResponse {
status: string;
@@ -536,6 +537,27 @@ export default function ChatHistory(props: ChatHistoryProps) {
ref={scrollAreaRef}
>
<div ref={scrollableContentWrapperRef}>
{/* Print-only header with conversation info */}
<div className="print-only-header">
<div className="print-header-content">
<div className="print-header-left">
<KhojLogo className="print-logo" />
</div>
<div className="print-header-right">
<h1>{data?.slug || "Conversation with Khoj"}</h1>
<div className="conversation-meta">
<p>
<strong>Agent:</strong> {constructAgentName()}
</p>
<p>
<strong>Printed On:</strong> {new Date().toLocaleDateString()}
</p>
</div>
</div>
</div>
<hr />
</div>
<div className={`${styles.chatHistory} ${props.customClassName}`}>
<div ref={sentinelRef} style={{ height: "1px" }}>
{fetchingData && <InlineLoading className="opacity-50" />}