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

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, {

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);