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

Render Khoj chat streaming response as md & show refs in Obsidian

Browse Source 
- Use new style references for Khoj chat modal in Obsidian
- Khoj Chat responses in Obsidian had regressed to not show references
  for new questions after modal has been opened. Now even those are
  rendered, and use new references style
- Render chat response as markdown while it's being streamed
This commit is contained in:
Debanjum Singh Solanky
2023-11-27 18:42:10 -08:00
parent 0430fa67b6
commit 1a31a2efcf
2 changed files with 249 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/interface/obsidian/styles.css
View File

@@ -13,6 +13,13 @@ If your plugin does not need CSS, delete this file.
--khoj-storm-grey: #475569;
}
.khoj-chat p {
margin: 0;
}
.khoj-chat pre {
text-wrap: unset;
}
.khoj-chat {
display: grid;
background: var(--background-primary);
@@ -104,6 +111,113 @@ If your plugin does not need CSS, delete this file.
transform: rotate(-60deg)
}
.option-enabled {
box-shadow: 0 0 12px rgb(119, 156, 46);
}
code.chat-response {
background: var(--khoj-sun);
color: var(--khoj-storm-grey);
border-radius: 5px;
padding: 5px;
font-size: 14px;
font-weight: 300;
line-height: 1.5em;
}
div.collapsed {
display: none;
}
div.expanded {
display: block;
}
div.reference {
display: grid;
grid-template-rows: auto;
grid-auto-flow: row;
grid-column-gap: 10px;
grid-row-gap: 10px;
margin: 10px;
}
div.expanded.reference-section {
display: grid;
grid-template-rows: auto;
grid-auto-flow: row;
grid-column-gap: 10px;
grid-row-gap: 10px;
margin: 10px;
}
button.reference-button {
background: var(--color-base-00);
color: var(--color-base-100);
border: 1px solid var(--khoj-storm-grey);
border-radius: 5px;
padding: 5px;
font-size: 14px;
font-weight: 300;
line-height: 1.5em;
cursor: pointer;
transition: background 0.2s ease-in-out;
text-align: left;
max-height: 75px;
height: auto;
transition: max-height 0.3s ease-in-out;
overflow: hidden;
display: inline-block;
text-wrap: inherit;
}
button.reference-button.expanded {
height: auto;
max-height: none;
}
button.reference-button::before {
content: "▶";
margin-right: 5px;
display: inline-block;
transition: transform 0.3s ease-in-out;
}
button.reference-button:active:before,
button.reference-button[aria-expanded="true"]::before {
transform: rotate(90deg);
}
button.reference-expand-button {
background: var(--color-base-00);
color: var(--color-base-100);
border: 1px solid var(--khoj-storm-grey);
border-radius: 5px;
padding: 5px;
font-size: 14px;
font-weight: 300;
line-height: 1.5em;
cursor: pointer;
transition: background 0.2s ease-in-out;
text-align: left;
}
button.reference-expand-button:hover {
background: var(--khoj-sun);
color: var(--color-base-00);
}
a.inline-chat-link {
color: #475569;
text-decoration: none;
border-bottom: 1px dotted #475569;
}
a.reference-link {
color: var(--khoj-storm-grey);
border-bottom: 1px dotted var(--khoj-storm-grey);
}
button.copy-button {
display: block;
border-radius: 4px;
background-color: var(--color-base-00);
}
button.copy-button:hover {
background: #f5f5f5;
cursor: pointer;
}
#khoj-chat-footer {
padding: 0;
display: grid;