From c4a1ae93758bca13471f22f7b1621fa660a339f8 Mon Sep 17 00:00:00 2001 From: sabaimran Date: Wed, 19 Jun 2024 12:20:44 +0530 Subject: [PATCH 1/5] Make the Khoj Obsidian plugin more user theme friendly Use the CSS variables from the theme for the Khoj UI components --- src/interface/obsidian/src/utils.ts | 2 +- src/interface/obsidian/styles.css | 25 +++++++++---------------- src/interface/obsidian/yarn.lock | 15 +++++++++++++++ 3 files changed, 25 insertions(+), 17 deletions(-) diff --git a/src/interface/obsidian/src/utils.ts b/src/interface/obsidian/src/utils.ts index 5f3e5acb..e539f739 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 31314271..a566e45b 100644 --- a/src/interface/obsidian/styles.css +++ b/src/interface/obsidian/styles.css @@ -74,16 +74,17 @@ If your plugin does not need CSS, delete this file. padding: 10px; position: relative; display: inline-block; - max-width: 80%; text-align: left; user-select: text; + color: var(--text-normal); } /* color chat bubble by khoj blue */ .khoj-chat-message-text.khoj { - color: var(--khoj-storm-grey); - background: var(--khoj-winter-sun); + color: var(--text-normal); margin-left: auto; white-space: pre-line; + background-color: var(--code-background); + /* background-color: var(--background-modifier-active-hover); */ } /* add left protrusion to khoj chat bubble */ .khoj-chat-message-text.khoj:after { @@ -92,14 +93,12 @@ If your plugin does not need CSS, delete this file. bottom: -2px; left: -7px; border: 10px solid transparent; - border-top-color: var(--khoj-winter-sun); border-bottom: 0; transform: rotate(-60deg); } /* color chat bubble by you dark grey */ .khoj-chat-message-text.you { - color: var(--text-on-accent); - background: var(--khoj-storm-grey); + color: var(--text-normal); margin-right: auto; } /* add right protrusion to you chat bubble */ @@ -109,7 +108,6 @@ If your plugin does not need CSS, delete this file. top: 91%; right: -2px; border: 10px solid transparent; - border-left-color: var(--khoj-storm-grey); border-right: 0; margin-top: -10px; transform: rotate(-60deg) @@ -488,7 +486,7 @@ div.khoj-logo { } .khoj-nav a { - color: var(--main-text-color); + color: var(--text-normal); text-decoration: none; font-size: small; font-weight: normal; @@ -498,11 +496,11 @@ div.khoj-logo { margin: 0; } .khoj-nav a:hover { - background-color: var(--khoj-sun); + background-color: var(--background-modifier-active-hover); color: var(--main-text-color); } a.khoj-nav-selected { - background-color: var(--khoj-winter-sun); + background-color: var(--background-modifier-active-hover); } #similar-nav-icon-svg, .khoj-nav-icon { @@ -542,12 +540,7 @@ img.copy-icon { width: 16px; height: 16px; } -.you button.copy-button { - color: var(--text-on-accent); -} -.khoj button.copy-button { - color: var(--khoj-storm-grey); -} + .you button.copy-button:hover { color: var(--khoj-storm-grey); background: var(--text-on-accent); diff --git a/src/interface/obsidian/yarn.lock b/src/interface/obsidian/yarn.lock index 8fd89209..14af6b3e 100644 --- a/src/interface/obsidian/yarn.lock +++ b/src/interface/obsidian/yarn.lock @@ -215,6 +215,21 @@ esbuild-darwin-64@0.14.47: resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.47.tgz#e0da6c244f497192f951807f003f6a423ed23188" integrity sha512-R6oaW0y5/u6Eccti/TS6c/2c1xYTb1izwK3gajJwi4vIfNs1s8B1dQzI1UiC9T61YovOQVuePDcfqHLT3mUZJA== +esbuild-android-64@0.14.47: + version "0.14.47" + resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.47.tgz#ef95b42c67bcf4268c869153fa3ad1466c4cea6b" + integrity sha512-R13Bd9+tqLVFndncMHssZrPWe6/0Kpv2/dt4aA69soX4PRxlzsVpCvoJeFE8sOEoeVEiBkI0myjlkDodXlHa0g== + +esbuild-android-arm64@0.14.47: + version "0.14.47" + resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.47.tgz#4ebd7ce9fb250b4695faa3ee46fd3b0754ecd9e6" + integrity sha512-OkwOjj7ts4lBp/TL6hdd8HftIzOy/pdtbrNA4+0oVWgGG64HrdVzAF5gxtJufAPOsEjkyh1oIYvKAUinKKQRSQ== + +esbuild-darwin-64@0.14.47: + version "0.14.47" + resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.47.tgz#e0da6c244f497192f951807f003f6a423ed23188" + integrity sha512-R6oaW0y5/u6Eccti/TS6c/2c1xYTb1izwK3gajJwi4vIfNs1s8B1dQzI1UiC9T61YovOQVuePDcfqHLT3mUZJA== + esbuild-darwin-arm64@0.14.47: version "0.14.47" resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.47.tgz#cd40fd49a672fca581ed202834239dfe540a9028" From da5b07e9135e5aa1b8c9d06f932714b771722ef6 Mon Sep 17 00:00:00 2001 From: sabaimran Date: Wed, 19 Jun 2024 12:23:27 +0530 Subject: [PATCH 2/5] Remove custom styling on the reference buttons --- src/interface/obsidian/styles.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/interface/obsidian/styles.css b/src/interface/obsidian/styles.css index a566e45b..c8942ddd 100644 --- a/src/interface/obsidian/styles.css +++ b/src/interface/obsidian/styles.css @@ -84,7 +84,6 @@ If your plugin does not need CSS, delete this file. margin-left: auto; white-space: pre-line; background-color: var(--code-background); - /* background-color: var(--background-modifier-active-hover); */ } /* add left protrusion to khoj chat bubble */ .khoj-chat-message-text.khoj:after { @@ -158,8 +157,6 @@ div.expanded.reference-section { margin: 10px 0; } button.reference-button { - background: var(--khoj-winter-sun); - color: var(--khoj-storm-grey); border: 1px solid var(--khoj-storm-grey); border-radius: 5px; padding: 4px; @@ -200,8 +197,6 @@ button.reference-button[aria-expanded="true"]::before { transform: rotate(90deg); } button.reference-expand-button { - background: var(--khoj-winter-sun); - color: var(--khoj-storm-grey); border: 1px solid var(--khoj-storm-grey); border-radius: 5px; padding: 8px; From a4b25525406ba857b36ce88f82df32eefb7070b7 Mon Sep 17 00:00:00 2001 From: sabaimran Date: Wed, 19 Jun 2024 12:40:03 +0530 Subject: [PATCH 3/5] Update conversation session selection menu to use Obsidian theme colors as well --- src/interface/obsidian/styles.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/interface/obsidian/styles.css b/src/interface/obsidian/styles.css index c8942ddd..b2ed18b1 100644 --- a/src/interface/obsidian/styles.css +++ b/src/interface/obsidian/styles.css @@ -272,7 +272,7 @@ div.conversation-session { } button.selected-conversation { - background: var(--khoj-winter-sun); + background: var(--interactive-accent-hover); } button.three-dot-menu-button-item { color: var(--color-base-90); @@ -318,13 +318,15 @@ div.conversation-menu { text-align: right; border-radius: 5px; padding: 5px; + display: grid; + grid-gap: 4px; + grid-auto-flow: column; } div.conversation-session:hover { transform: scale(1.03); } div.selected-conversation { - background: var(--khoj-winter-sun) !important; - color: var(--khoj-storm-grey) !important; + background: var(--background-modifier-active-hover) !important; } #khoj-chat-footer { @@ -366,9 +368,8 @@ div.selected-conversation { position: relative; } #khoj-chat-send .lucide-arrow-up-circle { - background: var(--khoj-sun); + background: var(--background-modifier-active-hover); border-radius: 50%; - color: #222; } #khoj-chat-send .lucide-stop-circle { transform: rotateY(-180deg) rotateZ(-90deg); From fb818ead6063605ab2d8dbc852e9dee51b81a680 Mon Sep 17 00:00:00 2001 From: sabaimran Date: Wed, 19 Jun 2024 19:13:05 +0530 Subject: [PATCH 4/5] Use active bg instead of code background for khoj response --- src/interface/obsidian/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/interface/obsidian/styles.css b/src/interface/obsidian/styles.css index b2ed18b1..cff4ee35 100644 --- a/src/interface/obsidian/styles.css +++ b/src/interface/obsidian/styles.css @@ -83,7 +83,7 @@ If your plugin does not need CSS, delete this file. color: var(--text-normal); margin-left: auto; white-space: pre-line; - background-color: var(--code-background); + background-color: var(--active-bg); } /* add left protrusion to khoj chat bubble */ .khoj-chat-message-text.khoj:after { From cfe46fd9f5b9036400ac5becdaa2c6ff7e317efd Mon Sep 17 00:00:00 2001 From: Debanjum Singh Solanky Date: Tue, 25 Jun 2024 11:16:00 +0530 Subject: [PATCH 5/5] 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 */