mirror of
https://github.com/khoj-ai/khoj.git
synced 2024-12-19 10:57:45 +00:00
Reduce clutter in chat message ux on Obsidian
- Move khoj message border to left like in web ui - Remove user, sender emojis and name - Ensure conversation title always at top of chat sessions view, even if no chat sessions loaded yet, instead of causing layout shift on chat sessions load
This commit is contained in:
parent
1ec1eff57e
commit
40e4f2ec2e
2 changed files with 15 additions and 9 deletions
|
@ -464,7 +464,7 @@ export class KhojChatView extends KhojPaneView {
|
||||||
let virtualChatMessageBodyTextEl = document.createElement("div");
|
let virtualChatMessageBodyTextEl = document.createElement("div");
|
||||||
|
|
||||||
// Convert the message to html
|
// Convert the message to html
|
||||||
MarkdownRenderer.renderMarkdown(markdownText, virtualChatMessageBodyTextEl, '', component);
|
MarkdownRenderer.render(this.app, markdownText, virtualChatMessageBodyTextEl, '', component);
|
||||||
|
|
||||||
// Remove image HTML elements with any non whitelisted src prefix
|
// Remove image HTML elements with any non whitelisted src prefix
|
||||||
virtualChatMessageBodyTextEl.innerHTML = virtualChatMessageBodyTextEl.innerHTML.replace(
|
virtualChatMessageBodyTextEl.innerHTML = virtualChatMessageBodyTextEl.innerHTML.replace(
|
||||||
|
@ -552,13 +552,12 @@ export class KhojChatView extends KhojPaneView {
|
||||||
|
|
||||||
renderMessage(chatBodyEl: Element, message: string, sender: string, dt?: Date, raw: boolean = false, willReplace: boolean = true): Element {
|
renderMessage(chatBodyEl: Element, message: string, sender: string, dt?: Date, raw: boolean = false, willReplace: boolean = true): Element {
|
||||||
let message_time = this.formatDate(dt ?? new Date());
|
let message_time = this.formatDate(dt ?? new Date());
|
||||||
let emojified_sender = sender == "khoj" ? "🏮 Khoj" : "🤔 You";
|
|
||||||
|
|
||||||
// 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 chatMessageEl = chatBodyEl.createDiv({
|
let chatMessageEl = chatBodyEl.createDiv({
|
||||||
attr: {
|
attr: {
|
||||||
"data-meta": `${emojified_sender} at ${message_time}`,
|
"data-meta": message_time,
|
||||||
class: `khoj-chat-message ${sender}`
|
class: `khoj-chat-message ${sender}`
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
@ -598,7 +597,7 @@ export class KhojChatView extends KhojPaneView {
|
||||||
let chatBodyEl = this.contentEl.getElementsByClassName("khoj-chat-body")[0];
|
let chatBodyEl = this.contentEl.getElementsByClassName("khoj-chat-body")[0];
|
||||||
let chatMessageEl = chatBodyEl.createDiv({
|
let chatMessageEl = chatBodyEl.createDiv({
|
||||||
attr: {
|
attr: {
|
||||||
"data-meta": `🏮 Khoj at ${messageTime}`,
|
"data-meta": messageTime,
|
||||||
class: `khoj-chat-message khoj`
|
class: `khoj-chat-message khoj`
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
@ -687,7 +686,7 @@ export class KhojChatView extends KhojPaneView {
|
||||||
return this.getChatHistory(chatBodyEl);
|
return this.getChatHistory(chatBodyEl);
|
||||||
}
|
}
|
||||||
chatBodyEl.innerHTML = "";
|
chatBodyEl.innerHTML = "";
|
||||||
const sidePanelEl = this.contentEl.createDiv("side-panel");
|
const sidePanelEl = chatBodyEl.createDiv("side-panel");
|
||||||
const newConversationEl = sidePanelEl.createDiv("new-conversation");
|
const newConversationEl = sidePanelEl.createDiv("new-conversation");
|
||||||
const conversationHeaderTitleEl = newConversationEl.createDiv("conversation-header-title");
|
const conversationHeaderTitleEl = newConversationEl.createDiv("conversation-header-title");
|
||||||
conversationHeaderTitleEl.textContent = "Conversations";
|
conversationHeaderTitleEl.textContent = "Conversations";
|
||||||
|
@ -745,7 +744,6 @@ export class KhojChatView extends KhojPaneView {
|
||||||
|
|
||||||
conversationSessionEl.appendChild(conversationMenuEl);
|
conversationSessionEl.appendChild(conversationMenuEl);
|
||||||
conversationListBodyEl.appendChild(conversationSessionEl);
|
conversationListBodyEl.appendChild(conversationSessionEl);
|
||||||
chatBodyEl.appendChild(sidePanelEl);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
|
@ -1114,6 +1112,7 @@ export class KhojChatView extends KhojPaneView {
|
||||||
rawQuery: query,
|
rawQuery: query,
|
||||||
rawResponse: "",
|
rawResponse: "",
|
||||||
isVoice: isVoice,
|
isVoice: isVoice,
|
||||||
|
generatedAssets: "",
|
||||||
};
|
};
|
||||||
|
|
||||||
let response = await fetch(chatUrl, {
|
let response = await fetch(chatUrl, {
|
||||||
|
|
|
@ -50,12 +50,12 @@ If your plugin does not need CSS, delete this file.
|
||||||
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 */
|
||||||
.khoj-chat-message::after {
|
.khoj-chat-message.khoj::after {
|
||||||
content: attr(data-meta);
|
content: attr(data-meta);
|
||||||
display: block;
|
display: block;
|
||||||
font-size: var(--font-ui-smaller);
|
font-size: var(--font-ui-smaller);
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
margin: -12px 7px 0 -5px;
|
margin: -12px 7px 0 0px;
|
||||||
}
|
}
|
||||||
/* move message by khoj to left */
|
/* move message by khoj to left */
|
||||||
.khoj-chat-message.khoj {
|
.khoj-chat-message.khoj {
|
||||||
|
@ -82,7 +82,7 @@ If your plugin does not need CSS, delete this file.
|
||||||
}
|
}
|
||||||
/* color chat bubble by khoj blue */
|
/* color chat bubble by khoj blue */
|
||||||
.khoj-chat-message-text.khoj {
|
.khoj-chat-message-text.khoj {
|
||||||
border-top: 1px solid var(--khoj-sun);
|
border-left: 2px solid var(--khoj-sun);
|
||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
white-space: pre-line;
|
white-space: pre-line;
|
||||||
|
@ -242,6 +242,10 @@ div.new-conversation {
|
||||||
grid-auto-flow: column;
|
grid-auto-flow: column;
|
||||||
grid-template-columns: 1fr auto;
|
grid-template-columns: 1fr auto;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 10;
|
||||||
|
background-color: var(--background-primary)
|
||||||
}
|
}
|
||||||
div.conversation-header-title {
|
div.conversation-header-title {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
@ -316,6 +320,9 @@ div.selected-conversation {
|
||||||
background: var(--background-primary);
|
background: var(--background-primary);
|
||||||
margin: 0 0 0 -8px;
|
margin: 0 0 0 -8px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
position: sticky;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
#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);
|
||||||
|
|
Loading…
Reference in a new issue