From cfe46fd9f5b9036400ac5becdaa2c6ff7e317efd Mon Sep 17 00:00:00 2001 From: Debanjum Singh Solanky Date: Tue, 25 Jun 2024 11:16:00 +0530 Subject: [PATCH] Add Border Color instead of BG Color for Chat Message in Obsidian --- src/interface/obsidian/src/chat_view.ts | 8 ++- src/interface/obsidian/src/utils.ts | 2 +- src/interface/obsidian/styles.css | 70 ++++++------------------- 3 files changed, 20 insertions(+), 60 deletions(-) diff --git a/src/interface/obsidian/src/chat_view.ts b/src/interface/obsidian/src/chat_view.ts index e666e6be..4a4bf0ae 100644 --- a/src/interface/obsidian/src/chat_view.ts +++ b/src/interface/obsidian/src/chat_view.ts @@ -578,8 +578,7 @@ export class KhojChatView extends KhojPaneView { let editConversationTitleButtonEl = this.contentEl.createEl('button'); setIcon(editConversationTitleButtonEl, "edit"); editConversationTitleButtonEl.title = "Rename"; - editConversationTitleButtonEl.classList.add("edit-title-button"); - editConversationTitleButtonEl.classList.add("three-dot-menu-button-item"); + editConversationTitleButtonEl.classList.add("edit-title-button", "three-dot-menu-button-item", "clickable-icon"); if (selectedConversation) editConversationTitleButtonEl.classList.add("selected-conversation"); editConversationTitleButtonEl.addEventListener('click', (event) => { event.stopPropagation(); @@ -607,7 +606,7 @@ export class KhojChatView extends KhojPaneView { let editConversationTitleSaveButtonEl = this.contentEl.createEl('button'); conversationSessionTitleEl.replaceWith(editConversationTitleInputEl); editConversationTitleSaveButtonEl.innerHTML = "Save"; - editConversationTitleSaveButtonEl.classList.add("three-dot-menu-button-item"); + editConversationTitleSaveButtonEl.classList.add("three-dot-menu-button-item", "clickable-icon"); if (selectedConversation) editConversationTitleSaveButtonEl.classList.add("selected-conversation"); editConversationTitleSaveButtonEl.addEventListener('click', (event) => { event.stopPropagation(); @@ -654,8 +653,7 @@ export class KhojChatView extends KhojPaneView { let deleteConversationButtonEl = this.contentEl.createEl('button'); setIcon(deleteConversationButtonEl, "trash"); deleteConversationButtonEl.title = "Delete"; - deleteConversationButtonEl.classList.add("delete-conversation-button"); - deleteConversationButtonEl.classList.add("three-dot-menu-button-item"); + deleteConversationButtonEl.classList.add("delete-conversation-button", "three-dot-menu-button-item", "clickable-icon"); if (selectedConversation) deleteConversationButtonEl.classList.add("selected-conversation"); deleteConversationButtonEl.addEventListener('click', () => { // Ask for confirmation before deleting chat session diff --git a/src/interface/obsidian/src/utils.ts b/src/interface/obsidian/src/utils.ts index e539f739..5f3e5acb 100644 --- a/src/interface/obsidian/src/utils.ts +++ b/src/interface/obsidian/src/utils.ts @@ -226,7 +226,7 @@ export async function populateHeaderPane(headerEl: Element, setting: KhojSetting // Add Khoj title to header element const titleEl = headerEl.createDiv(); titleEl.className = 'khoj-logo'; - titleEl.textContent = "Khoj" + titleEl.textContent = "KHOJ" // Populate the header element with the navigation pane // Create the nav element diff --git a/src/interface/obsidian/styles.css b/src/interface/obsidian/styles.css index cff4ee35..a79e0116 100644 --- a/src/interface/obsidian/styles.css +++ b/src/interface/obsidian/styles.css @@ -77,13 +77,13 @@ If your plugin does not need CSS, delete this file. text-align: left; user-select: text; color: var(--text-normal); + background-color: var(--active-bg); } /* color chat bubble by khoj blue */ .khoj-chat-message-text.khoj { - color: var(--text-normal); + border: 1px solid var(--khoj-sun); margin-left: auto; white-space: pre-line; - background-color: var(--active-bg); } /* add left protrusion to khoj chat bubble */ .khoj-chat-message-text.khoj:after { @@ -97,7 +97,7 @@ If your plugin does not need CSS, delete this file. } /* color chat bubble by you dark grey */ .khoj-chat-message-text.you { - color: var(--text-normal); + border: 1px solid var(--color-accent); margin-right: auto; } /* add right protrusion to you chat bubble */ @@ -158,6 +158,7 @@ div.expanded.reference-section { } button.reference-button { border: 1px solid var(--khoj-storm-grey); + background-color: transparent; border-radius: 5px; padding: 4px; font-size: 14px; @@ -197,6 +198,7 @@ button.reference-button[aria-expanded="true"]::before { transform: rotate(90deg); } button.reference-expand-button { + background-color: transparent; border: 1px solid var(--khoj-storm-grey); border-radius: 5px; padding: 8px; @@ -209,8 +211,8 @@ button.reference-expand-button { text-align: left; } button.reference-expand-button:hover { - background: var(--khoj-sun); - color: var(--khoj-storm-grey); + background: var(--background-modifier-active-hover); + color: var(--text-normal); } a.inline-chat-link { color: #475569; @@ -222,15 +224,6 @@ a.inline-chat-link { 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; -} img { max-width: 60%; } @@ -263,19 +256,8 @@ div.conversation-session { grid-template-columns: 1fr auto; } -.three-dot-menu { - display: block; - /* background: var(--background-color); */ - /* border: 1px solid var(--main-text-color); */ - border-radius: 5px; - /* position: relative; */ -} - -button.selected-conversation { - background: var(--interactive-accent-hover); -} button.three-dot-menu-button-item { - color: var(--color-base-90); + color: var(--text-accent); border: none; box-shadow: none; font-size: 14px; @@ -289,26 +271,7 @@ button.three-dot-menu-button-item { } button.three-dot-menu-button-item:hover { - background: var(--khoj-storm-grey); - color: var(--khoj-winter-sun); -} - -.three-dot-menu-button { - background: var(--khoj-winter-sun); - border: none; - box-shadow: none; - font-size: 14px; - font-weight: 300; - line-height: 1.5em; - cursor: pointer; - transition: background 0.3s ease-in-out; - font-family: var(--font-family); - border-radius: 4px; - right: 0; -} - -.conversation-button:hover .three-dot-menu { - display: block; + background: var(--background-modifier-active-hover); } div.conversation-menu { @@ -515,9 +478,11 @@ span.khoj-nav-item-text { /* Copy button */ button.copy-button { + display: block; border-radius: 4px; - background-color: var(--background-color); - border: 1px solid var(--main-text-color); + color: var(--text-muted); + background-color: transparent; + border: 1px solid var(--khoj-storm-grey); text-align: center; font-size: 16px; transition: all 0.5s; @@ -537,12 +502,9 @@ img.copy-icon { height: 16px; } -.you button.copy-button:hover { - color: var(--khoj-storm-grey); - background: var(--text-on-accent); -} -.khoj button.copy-button:hover { - background: var(--text-on-accent); +button.copy-button:hover { + background-color: var(--background-modifier-active-hover); + color: var(--text-normal); } /* Loading Spinner */