diff --git a/src/interface/obsidian/src/chat_view.ts b/src/interface/obsidian/src/chat_view.ts index 1dcea196..86d5e1f9 100644 --- a/src/interface/obsidian/src/chat_view.ts +++ b/src/interface/obsidian/src/chat_view.ts @@ -464,7 +464,7 @@ export class KhojChatView extends KhojPaneView { let virtualChatMessageBodyTextEl = document.createElement("div"); // 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 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 { let message_time = this.formatDate(dt ?? new Date()); - let emojified_sender = sender == "khoj" ? "🏮 Khoj" : "🤔 You"; // Append message to conversation history HTML element. // The chat logs should display above the message input box to follow standard UI semantics let chatMessageEl = chatBodyEl.createDiv({ attr: { - "data-meta": `${emojified_sender} at ${message_time}`, + "data-meta": message_time, class: `khoj-chat-message ${sender}` }, }) @@ -598,7 +597,7 @@ export class KhojChatView extends KhojPaneView { let chatBodyEl = this.contentEl.getElementsByClassName("khoj-chat-body")[0]; let chatMessageEl = chatBodyEl.createDiv({ attr: { - "data-meta": `🏮 Khoj at ${messageTime}`, + "data-meta": messageTime, class: `khoj-chat-message khoj` }, }) @@ -687,7 +686,7 @@ export class KhojChatView extends KhojPaneView { return this.getChatHistory(chatBodyEl); } chatBodyEl.innerHTML = ""; - const sidePanelEl = this.contentEl.createDiv("side-panel"); + const sidePanelEl = chatBodyEl.createDiv("side-panel"); const newConversationEl = sidePanelEl.createDiv("new-conversation"); const conversationHeaderTitleEl = newConversationEl.createDiv("conversation-header-title"); conversationHeaderTitleEl.textContent = "Conversations"; @@ -745,7 +744,6 @@ export class KhojChatView extends KhojPaneView { conversationSessionEl.appendChild(conversationMenuEl); conversationListBodyEl.appendChild(conversationSessionEl); - chatBodyEl.appendChild(sidePanelEl); } } } catch (err) { @@ -1114,6 +1112,7 @@ export class KhojChatView extends KhojPaneView { rawQuery: query, rawResponse: "", isVoice: isVoice, + generatedAssets: "", }; let response = await fetch(chatUrl, { diff --git a/src/interface/obsidian/styles.css b/src/interface/obsidian/styles.css index dea8c7f2..0d2ea1d4 100644 --- a/src/interface/obsidian/styles.css +++ b/src/interface/obsidian/styles.css @@ -50,12 +50,12 @@ If your plugin does not need CSS, delete this file. overflow-y: scroll; /* Make chat body scroll to see history */ } /* add chat metatdata to bottom of bubble */ -.khoj-chat-message::after { +.khoj-chat-message.khoj::after { content: attr(data-meta); display: block; font-size: var(--font-ui-smaller); color: var(--text-muted); - margin: -12px 7px 0 -5px; + margin: -12px 7px 0 0px; } /* move message by khoj to left */ .khoj-chat-message.khoj { @@ -82,7 +82,7 @@ If your plugin does not need CSS, delete this file. } /* color chat bubble by khoj blue */ .khoj-chat-message-text.khoj { - border-top: 1px solid var(--khoj-sun); + border-left: 2px solid var(--khoj-sun); border-radius: 0px; margin-left: auto; white-space: pre-line; @@ -242,6 +242,10 @@ div.new-conversation { grid-auto-flow: column; grid-template-columns: 1fr auto; margin-bottom: 16px; + position: sticky; + top: 0; + z-index: 10; + background-color: var(--background-primary) } div.conversation-header-title { text-align: left; @@ -316,6 +320,9 @@ div.selected-conversation { background: var(--background-primary); margin: 0 0 0 -8px; align-items: center; + position: sticky; + bottom: 0; + z-index: 10; } #khoj-chat-input.option:hover { box-shadow: 0 0 11px var(--background-modifier-box-shadow);