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

Use obsidian theme colors for bg, text. Restrict css namespace via prefix

Browse Source
This commit is contained in:
Debanjum Singh Solanky
2023-03-28 18:49:28 +07:00
parent 001ac7b5eb
commit 59ff1ae27f
2 changed files with 32 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/interface/obsidian/src/chat_modal.ts
View File

@@ -16,10 +16,10 @@ export class KhojChatModal extends Modal {
contentEl.addClass("khoj-chat"); contentEl.addClass("khoj-chat");
// Add title to the Khoj Chat modal // Add title to the Khoj Chat modal
contentEl.createEl("h1", ({ attr: { id: "chat-title" }, text: "Khoj Chat" })); contentEl.createEl("h1", ({ attr: { id: "khoj-chat-title" }, text: "Khoj Chat" }));
// Create area for chat logs // Create area for chat logs
contentEl.createDiv({ attr: { id: "chat-body", class: "chat-body" } }); contentEl.createDiv({ attr: { id: "khoj-chat-body", class: "khoj-chat-body" } });
// Get conversation history from Khoj backend // Get conversation history from Khoj backend
let chatUrl = `${this.setting.khojUrl}/api/chat?`; let chatUrl = `${this.setting.khojUrl}/api/chat?`;
@@ -37,6 +37,7 @@ export class KhojChatModal extends Modal {
}) })
.addButton((btn) => btn .addButton((btn) => btn
.setButtonText("Send") .setButtonText("Send")
.setClass("khoj-chat-input-button")
.setCta() .setCta()
.onClick(async () => { await this.getChatResponse(this.result) })); .onClick(async () => { await this.getChatResponse(this.result) }));
} }
@@ -67,15 +68,15 @@ export class KhojChatModal extends Modal {
// Append message to conversation history HTML element. // Append message to conversation history HTML element.
// The chat logs should display above the message input box to follow standard UI semantics // The chat logs should display above the message input box to follow standard UI semantics
let chat_body_el = this.contentEl.getElementsByClassName("chat-body")[0]; let chat_body_el = this.contentEl.getElementsByClassName("khoj-chat-body")[0];
let chat_message_el = chat_body_el.createDiv({ let chat_message_el = chat_body_el.createDiv({
attr: { attr: {
"data-meta": `${emojified_sender} at ${message_time}`, "data-meta": `${emojified_sender} at ${message_time}`,
class: `chat-message ${sender}` class: `khoj-chat-message ${sender}`
}, },
}).createDiv({ }).createDiv({
attr: { attr: {
class: `chat-message-text ${sender}` class: `khoj-chat-message-text ${sender}`
}, },
text: `${message}` text: `${message}`
}) })

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

@@ -10,13 +10,12 @@ If your plugin does not need CSS, delete this file.
:root { :root {
--khoj-chat-blue: #017eff; --khoj-chat-blue: #017eff;
--khoj-chat-dark-grey: #475569; --khoj-chat-dark-grey: #475569;
--khoj-chat-light-grey: #aaa;
--khoj-chat-white: #f8fafc;
} }
.khoj-chat { .khoj-chat {
display: grid; display: grid;
color: var(--khoj-chat-dark-grey); background: var(--background-primary);
color: var(--text-normal);
text-align: center; text-align: center;
font-family: roboto, karma, segoe ui, sans-serif; font-family: roboto, karma, segoe ui, sans-serif;
font-size: 20px; font-size: 20px;
@@ -28,37 +27,37 @@ If your plugin does not need CSS, delete this file.
margin: 10px; margin: 10px;
} }
#chat-title { #khoj-chat-title {
font-weight: 200; font-weight: 200;
color: var(--khoj-chat-blue); color: var(--khoj-chat-blue);
} }
#chat-body { #khoj-chat-body {
font-size: medium; font-size: medium;
margin: 0px; margin: 0px;
line-height: 20px; line-height: 20px;
overflow-y: scroll; /* Make chat body scroll to see history */ overflow-y: scroll; /* Make chat body scroll to see history */
} }
/* add chat metatdata to bottom of bubble */ /* add chat metatdata to bottom of bubble */
.chat-message::after { .khoj-chat-message::after {
content: attr(data-meta); content: attr(data-meta);
display: block; display: block;
font-size: x-small; font-size: x-small;
color: var(--khoj-chat-dark-grey); color: var(--text-muted);
margin: -12px 7px 0 -5px; margin: -12px 7px 0 -5px;
} }
/* move message by khoj to left */ /* move message by khoj to left */
.chat-message.khoj { .khoj-chat-message.khoj {
margin-left: auto; margin-left: auto;
text-align: left; text-align: left;
} }
/* move message by you to right */ /* move message by you to right */
.chat-message.you { .khoj-chat-message.you {
margin-right: auto; margin-right: auto;
text-align: right; text-align: right;
} }
/* basic style chat message text */ /* basic style chat message text */
.chat-message-text { .khoj-chat-message-text {
margin: 10px; margin: 10px;
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 10px;
@@ -68,14 +67,14 @@ If your plugin does not need CSS, delete this file.
text-align: left; text-align: left;
} }
/* color chat bubble by khoj blue */ /* color chat bubble by khoj blue */
.chat-message-text.khoj { .khoj-chat-message-text.khoj {
color: var(--khoj-chat-white); color: var(--text-on-accent);
background: var(--khoj-chat-blue); background: var(--khoj-chat-blue);
margin-left: auto; margin-left: auto;
white-space: pre-line; white-space: pre-line;
} }
/* add left protrusion to khoj chat bubble */ /* add left protrusion to khoj chat bubble */
.chat-message-text.khoj:after { .khoj-chat-message-text.khoj:after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: -2px; bottom: -2px;
@@ -86,13 +85,13 @@ If your plugin does not need CSS, delete this file.
transform: rotate(-60deg); transform: rotate(-60deg);
} }
/* color chat bubble by you dark grey */ /* color chat bubble by you dark grey */
.chat-message-text.you { .khoj-chat-message-text.you {
color: var(--khoj-chat-white); color: var(--text-on-accent);
background: var(--khoj-chat-dark-grey); background: var(--khoj-chat-dark-grey);
margin-right: auto; margin-right: auto;
} }
/* add right protrusion to you chat bubble */ /* add right protrusion to you chat bubble */
.chat-message-text.you:after { .khoj-chat-message-text.you:after {
content: ''; content: '';
position: absolute; position: absolute;
top: 91%; top: 91%;
@@ -104,32 +103,33 @@ If your plugin does not need CSS, delete this file.
transform: rotate(-60deg) transform: rotate(-60deg)
} }
#chat-footer { #khoj-chat-footer {
padding: 0; padding: 0;
display: grid; display: grid;
grid-template-columns: minmax(70px, 100%); grid-template-columns: minmax(70px, 100%);
grid-column-gap: 10px; grid-column-gap: 10px;
grid-row-gap: 10px; grid-row-gap: 10px;
} }
#chat-footer > * { #khoj-chat-footer > * {
padding: 15px; padding: 15px;
border-radius: 5px; border-radius: 5px;
border: 1px solid var(--khoj-chat-dark-grey); border: 1px solid var(--khoj-chat-dark-grey);
background: #f9fafc background: #f9fafc
} }
#chat-input.option:hover { #khoj-chat-input.option:hover {
box-shadow: 0 0 11px var(--khoj-chat-light-grey); box-shadow: 0 0 11px var(--background-modifier-box-shadow);
} }
#chat-input { #khoj-chat-input {
font-size: medium; font-size: medium;
} }
}
@media (pointer: coarse), (hover: none) { @media (pointer: coarse), (hover: none) {
#chat-body.abbr[title] { #khoj-chat-body.abbr[title] {
position: relative; position: relative;
padding-left: 4px; /* space references out to ease tapping */ padding-left: 4px; /* space references out to ease tapping */
} }
#chat-body.abbr[title]:focus:after { #khoj-chat-body.abbr[title]:focus:after {
content: attr(title); content: attr(title);
/* position tooltip */ /* position tooltip */
@@ -139,10 +139,10 @@ If your plugin does not need CSS, delete this file.
z-index: 1; /* show tooltip above chat messages */ z-index: 1; /* show tooltip above chat messages */
/* style tooltip */ /* style tooltip */
background-color: #aaa; background-color: var(--background-secondary);
color: var(--khoj-chat-white); color: var(--text-muted);
border-radius: 2px; border-radius: 2px;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.4); box-shadow: 1px 1px 4px 0 var(--background-modifier-box-shadow);
font-size: 14px; font-size: 14px;
padding: 2px 4px; padding: 2px 4px;
} }