mirror of
https://github.com/khoj-ai/khoj.git
synced 2025-02-17 08:04:21 +00:00
Use obsidian theme colors for bg, text. Restrict css namespace via prefix
This commit is contained in:
Debanjum Singh Solanky
parent
001ac7b5eb
commit
59ff1ae27f
2 changed files with 32 additions and 31 deletions
|
|
@ -16,10 +16,10 @@ export class KhojChatModal extends Modal {
|
|||
contentEl.addClass("khoj-chat");
|
||||
|
||||
// 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
|
||||
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
|
||||
let chatUrl = `${this.setting.khojUrl}/api/chat?`;
|
||||
|
|
@ -37,6 +37,7 @@ export class KhojChatModal extends Modal {
|
|||
})
|
||||
.addButton((btn) => btn
|
||||
.setButtonText("Send")
|
||||
.setClass("khoj-chat-input-button")
|
||||
.setCta()
|
||||
.onClick(async () => { await this.getChatResponse(this.result) }));
|
||||
}
|
||||
|
|
@ -67,15 +68,15 @@ export class KhojChatModal extends Modal {
|
|||
|
||||
// Append message to conversation history HTML element.
|
||||
// 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({
|
||||
attr: {
|
||||
"data-meta": `${emojified_sender} at ${message_time}`,
|
||||
class: `chat-message ${sender}`
|
||||
class: `khoj-chat-message ${sender}`
|
||||
},
|
||||
}).createDiv({
|
||||
attr: {
|
||||
class: `chat-message-text ${sender}`
|
||||
class: `khoj-chat-message-text ${sender}`
|
||||
},
|
||||
text: `${message}`
|
||||
})
|
||||
|
|
|
|||
|
|
@ -10,13 +10,12 @@ If your plugin does not need CSS, delete this file.
|
|||
:root {
|
||||
--khoj-chat-blue: #017eff;
|
||||
--khoj-chat-dark-grey: #475569;
|
||||
--khoj-chat-light-grey: #aaa;
|
||||
--khoj-chat-white: #f8fafc;
|
||||
}
|
||||
|
||||
.khoj-chat {
|
||||
display: grid;
|
||||
color: var(--khoj-chat-dark-grey);
|
||||
background: var(--background-primary);
|
||||
color: var(--text-normal);
|
||||
text-align: center;
|
||||
font-family: roboto, karma, segoe ui, sans-serif;
|
||||
font-size: 20px;
|
||||
|
|
@ -28,37 +27,37 @@ If your plugin does not need CSS, delete this file.
|
|||
margin: 10px;
|
||||
}
|
||||
|
||||
#chat-title {
|
||||
#khoj-chat-title {
|
||||
font-weight: 200;
|
||||
color: var(--khoj-chat-blue);
|
||||
}
|
||||
|
||||
#chat-body {
|
||||
#khoj-chat-body {
|
||||
font-size: medium;
|
||||
margin: 0px;
|
||||
line-height: 20px;
|
||||
overflow-y: scroll; /* Make chat body scroll to see history */
|
||||
}
|
||||
/* add chat metatdata to bottom of bubble */
|
||||
.chat-message::after {
|
||||
.khoj-chat-message::after {
|
||||
content: attr(data-meta);
|
||||
display: block;
|
||||
font-size: x-small;
|
||||
color: var(--khoj-chat-dark-grey);
|
||||
color: var(--text-muted);
|
||||
margin: -12px 7px 0 -5px;
|
||||
}
|
||||
/* move message by khoj to left */
|
||||
.chat-message.khoj {
|
||||
.khoj-chat-message.khoj {
|
||||
margin-left: auto;
|
||||
text-align: left;
|
||||
}
|
||||
/* move message by you to right */
|
||||
.chat-message.you {
|
||||
.khoj-chat-message.you {
|
||||
margin-right: auto;
|
||||
text-align: right;
|
||||
}
|
||||
/* basic style chat message text */
|
||||
.chat-message-text {
|
||||
.khoj-chat-message-text {
|
||||
margin: 10px;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
|
|
@ -68,14 +67,14 @@ If your plugin does not need CSS, delete this file.
|
|||
text-align: left;
|
||||
}
|
||||
/* color chat bubble by khoj blue */
|
||||
.chat-message-text.khoj {
|
||||
color: var(--khoj-chat-white);
|
||||
.khoj-chat-message-text.khoj {
|
||||
color: var(--text-on-accent);
|
||||
background: var(--khoj-chat-blue);
|
||||
margin-left: auto;
|
||||
white-space: pre-line;
|
||||
}
|
||||
/* add left protrusion to khoj chat bubble */
|
||||
.chat-message-text.khoj:after {
|
||||
.khoj-chat-message-text.khoj:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
|
|
@ -86,13 +85,13 @@ If your plugin does not need CSS, delete this file.
|
|||
transform: rotate(-60deg);
|
||||
}
|
||||
/* color chat bubble by you dark grey */
|
||||
.chat-message-text.you {
|
||||
color: var(--khoj-chat-white);
|
||||
.khoj-chat-message-text.you {
|
||||
color: var(--text-on-accent);
|
||||
background: var(--khoj-chat-dark-grey);
|
||||
margin-right: auto;
|
||||
}
|
||||
/* add right protrusion to you chat bubble */
|
||||
.chat-message-text.you:after {
|
||||
.khoj-chat-message-text.you:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 91%;
|
||||
|
|
@ -104,32 +103,33 @@ If your plugin does not need CSS, delete this file.
|
|||
transform: rotate(-60deg)
|
||||
}
|
||||
|
||||
#chat-footer {
|
||||
#khoj-chat-footer {
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(70px, 100%);
|
||||
grid-column-gap: 10px;
|
||||
grid-row-gap: 10px;
|
||||
}
|
||||
#chat-footer > * {
|
||||
#khoj-chat-footer > * {
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--khoj-chat-dark-grey);
|
||||
background: #f9fafc
|
||||
}
|
||||
#chat-input.option:hover {
|
||||
box-shadow: 0 0 11px var(--khoj-chat-light-grey);
|
||||
#khoj-chat-input.option:hover {
|
||||
box-shadow: 0 0 11px var(--background-modifier-box-shadow);
|
||||
}
|
||||
#chat-input {
|
||||
#khoj-chat-input {
|
||||
font-size: medium;
|
||||
}
|
||||
}
|
||||
|
||||
@media (pointer: coarse), (hover: none) {
|
||||
#chat-body.abbr[title] {
|
||||
#khoj-chat-body.abbr[title] {
|
||||
position: relative;
|
||||
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);
|
||||
|
||||
/* position tooltip */
|
||||
|
|
@ -139,10 +139,10 @@ If your plugin does not need CSS, delete this file.
|
|||
z-index: 1; /* show tooltip above chat messages */
|
||||
|
||||
/* style tooltip */
|
||||
background-color: #aaa;
|
||||
color: var(--khoj-chat-white);
|
||||
background-color: var(--background-secondary);
|
||||
color: var(--text-muted);
|
||||
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;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue