Use Obsidian font sizes. Improve input field, reference indexing

- Give space in the input field. Too narrow previously
- References should be indexed from 1 instead of 0
- Use Obsidian font size variables to scale fonts in chat appropriately
This commit is contained in:
Debanjum Singh Solanky
2023-03-29 22:12:11 +07:00
parent 23bd737f6b
commit 3d616c8d65
2 changed files with 8 additions and 10 deletions

View File

@@ -49,7 +49,7 @@ export class KhojChatModal extends Modal {
type: "text", type: "text",
id: "khoj-chat-input", id: "khoj-chat-input",
autofocus: "autofocus", autofocus: "autofocus",
placeholder: "What is the meaning of life? [Hit Enter to send message]", placeholder: "Chat with Khoj 🦅 [Hit Enter to send message]",
class: "khoj-chat-input option" class: "khoj-chat-input option"
} }
}) })
@@ -75,7 +75,7 @@ export class KhojChatModal extends Modal {
renderMessageWithReferences(message: string, sender: string, context?: [string], dt?: Date) { renderMessageWithReferences(message: string, sender: string, context?: [string], dt?: Date) {
let messageEl = this.renderMessage(message, sender, dt); let messageEl = this.renderMessage(message, sender, dt);
if (context && !!messageEl) { if (context && !!messageEl) {
context.map((reference, index) => this.generateReference(messageEl, reference, index)); context.map((reference, index) => this.generateReference(messageEl, reference, index+1));
} }
} }

View File

@@ -18,7 +18,7 @@ If your plugin does not need CSS, delete this file.
color: var(--text-normal); 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: var(--font-ui-large);
font-weight: 300; font-weight: 300;
line-height: 1.5em; line-height: 1.5em;
} }
@@ -33,7 +33,7 @@ If your plugin does not need CSS, delete this file.
} }
#khoj-chat-body { #khoj-chat-body {
font-size: medium; font-size: var(--font-ui-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 */
@@ -42,7 +42,7 @@ If your plugin does not need CSS, delete this file.
.khoj-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: var(--font-ui-smaller);
color: var(--text-muted); color: var(--text-muted);
margin: -12px 7px 0 -5px; margin: -12px 7px 0 -5px;
} }
@@ -112,16 +112,14 @@ If your plugin does not need CSS, delete this file.
} }
#khoj-chat-footer > * { #khoj-chat-footer > * {
padding: 15px; padding: 15px;
border-radius: 5px;
border: 1px solid var(--khoj-chat-dark-grey);
background: #f9fafc background: #f9fafc
} }
#khoj-chat-input.option:hover { #khoj-chat-input.option:hover {
box-shadow: 0 0 11px var(--background-modifier-box-shadow); box-shadow: 0 0 11px var(--background-modifier-box-shadow);
} }
#khoj-chat-input { #khoj-chat-input {
font-size: medium; font-size: var(--font-ui-medium);
} padding: 25px 20px;
} }
@media (pointer: coarse), (hover: none) { @media (pointer: coarse), (hover: none) {
@@ -143,7 +141,7 @@ If your plugin does not need CSS, delete this file.
color: var(--text-muted); color: var(--text-muted);
border-radius: 2px; border-radius: 2px;
box-shadow: 1px 1px 4px 0 var(--background-modifier-box-shadow); box-shadow: 1px 1px 4px 0 var(--background-modifier-box-shadow);
font-size: 14px; font-size: var(--font-ui-small);
padding: 2px 4px; padding: 2px 4px;
} }
} }