Render file reference as link with file preview on hover/click in web app

Overview
- Khoj references files it used in its response as markdown links.
  For example [1](file://path/to/file.txt#line=121)
- Previously these file links were just shown as raw text
- This change renders khoj's inline file references as a proper links
  and shows file content preview (around specified line if deeplink)
  on hover or click in the web app

Details
- Render inline file references as links in chat message on web app.
  Previously references like [1](file://path/to/file.txt#line=120)
  would be shown as plain text. Now they are rendered as links
- Preview file content of referenced files on click or hover.
  If reference uses a deeplink with line number, the file content
  around that line is shown on hover, click. Click allows viewing file
  preview on mobile, unlike hover. Hover is easier with mouse.
This commit is contained in:
Debanjum
2025-08-21 00:06:21 -07:00
parent d8b7e9c8a5
commit e2f377c27b
5 changed files with 454 additions and 4 deletions

View File

@@ -23,6 +23,22 @@ div.chatMessageWrapper a span {
display: revert !important;
}
/* File link styling */
.chatMessageWrapper a.file-link {
color: hsl(var(--primary));
text-decoration: underline;
cursor: pointer;
transition: color 0.2s ease;
}
.chatMessageWrapper a.file-link:hover {
color: hsl(var(--primary-foreground));
background-color: hsl(var(--primary));
text-decoration: none;
padding: 2px 4px;
border-radius: 4px;
}
div.khojfullHistory {
padding-left: 4px;
}