Update the chat panel theme some

src/public/app/widgets/llm_chat_panel.ts

@@ -4,6 +4,12 @@ import server from "../services/server.js";
 import appContext from "../components/app_context.js";
 import utils from "../services/utils.js";
 import { t } from "../services/i18n.js";
+import libraryLoader from "../services/library_loader.js";
+
+// Import the LLM Chat CSS
+(async function() {
+    await libraryLoader.requireCss('stylesheets/llm_chat.css');
+})();
 
 interface ChatResponse {
     id: string;
@@ -42,33 +48,33 @@ export default class LlmChatPanel extends BasicWidget {
                 </div>
 
                 <div class="sources-container p-2 border-top" style="display: none;">
-                    <h6 class="m-0 p-1">
+                    <h6 class="m-0 p-1 d-flex align-items-center">
-                        <i class="bx bx-link-alt"></i> ${t('ai.sources')}
+                        <i class="bx bx-link-alt me-1"></i> ${t('ai.sources')}
-                        <span class="badge bg-secondary rounded-pill ms-2 sources-count"></span>
+                        <span class="badge bg-primary rounded-pill ms-2 sources-count"></span>
                     </h6>
                     <div class="sources-list mt-2"></div>
                 </div>
 
                 <form class="note-context-chat-form d-flex flex-column border-top p-2">
-                    <div class="d-flex mb-2 align-items-center">
+                    <div class="d-flex mb-2 align-items-center context-option-container">
                         <div class="form-check form-switch">
-                            <input class="form-check-input use-advanced-context-checkbox" type="checkbox" id="useAdvancedContext" checked>
+                            <input class="form-check-input use-advanced-context-checkbox" type="checkbox" id="useEnhancedContext" checked>
-                            <label class="form-check-label" for="useAdvancedContext">
+                            <label class="form-check-label" for="useEnhancedContext">
-                                ${t('ai.use_advanced_context')}
+                                ${t('ai.use_enhanced_context')}
                             </label>
                         </div>
                         <div class="ms-2 small text-muted">
                             <i class="bx bx-info-circle"></i>
-                            <span>${t('ai.advanced_context_helps')}</span>
+                            <span>${t('ai.enhanced_context_description')}</span>
                         </div>
                     </div>
-                    <div class="d-flex">
+                    <div class="d-flex chat-input-container">
                         <textarea
                             class="form-control note-context-chat-input"
                             placeholder="${t('ai.enter_message')}"
-                            rows="3"
+                            rows="2"
                         ></textarea>
-                        <button type="submit" class="btn btn-primary note-context-chat-send-button ms-2">
+                        <button type="submit" class="btn btn-primary note-context-chat-send-button ms-2 d-flex align-items-center justify-content-center">
                             <i class="bx bx-send"></i>
                         </button>
                     </div>
@@ -256,26 +262,30 @@ export default class LlmChatPanel extends BasicWidget {
 
     private addMessageToChat(role: 'user' | 'assistant', content: string) {
         const messageElement = document.createElement('div');
-        messageElement.className = `chat-message ${role}-message mb-3`;
+        messageElement.className = `chat-message ${role}-message mb-3 d-flex`;
 
         const avatarElement = document.createElement('div');
-        avatarElement.className = 'message-avatar';
+        avatarElement.className = 'message-avatar d-flex align-items-center justify-content-center me-2';
-        avatarElement.innerHTML = role === 'user'
+
-            ? '<i class="bx bx-user"></i>'
+        if (role === 'user') {
-            : '<i class="bx bx-bot"></i>';
+            avatarElement.innerHTML = '<i class="bx bx-user"></i>';
+            avatarElement.classList.add('user-avatar');
+        } else {
+            avatarElement.innerHTML = '<i class="bx bx-bot"></i>';
+            avatarElement.classList.add('assistant-avatar');
+        }
 
         const contentElement = document.createElement('div');
-        contentElement.className = 'message-content p-3';
+        contentElement.className = 'message-content p-3 rounded flex-grow-1';
 
-        // Use a simple markdown formatter if utils.formatMarkdown is not available
+        if (role === 'user') {
-        let formattedContent = content
+            contentElement.classList.add('user-content', 'bg-light');
-            .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
+        } else {
-            .replace(/`([^`]+)`/g, '<code>$1</code>')
+            contentElement.classList.add('assistant-content');
-            .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+        }
-            .replace(/\*([^*]+)\*/g, '<em>$1</em>')
-            .replace(/\n/g, '<br>');
 
-        contentElement.innerHTML = formattedContent;
+        // Format the content with markdown
+        contentElement.innerHTML = this.formatMarkdown(content);
 
         messageElement.appendChild(avatarElement);
         messageElement.appendChild(contentElement);
@@ -297,16 +307,17 @@ export default class LlmChatPanel extends BasicWidget {
 
         sources.forEach(source => {
             const sourceElement = document.createElement('div');
-            sourceElement.className = 'source-item p-2 mb-1 border rounded';
+            sourceElement.className = 'source-item p-2 mb-1 border rounded d-flex align-items-center';
 
             // Create the direct link to the note
             sourceElement.innerHTML = `
-                <div class="d-flex align-items-center">
+                <div class="d-flex align-items-center w-100">
                     <a href="#root/${source.noteId}"
                        data-note-id="${source.noteId}"
-                       class="source-link text-truncate"
+                       class="source-link text-truncate d-flex align-items-center"
                        title="Open note: ${source.title}">
-                        <i class="bx bx-file"></i> ${source.title}
+                        <i class="bx bx-file-blank me-1"></i>
+                        <span class="source-title">${source.title}</span>
                     </a>
                 </div>`;
 

src/public/stylesheets/llm_chat.css

@@ -0,0 +1,119 @@
+/* LLM Chat Panel Styles */
+.note-context-chat {
+    background-color: var(--main-background-color);
+}
+
+/* Message Styling */
+.chat-message {
+    margin-bottom: 1rem;
+}
+
+.message-avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    font-size: 1.25rem;
+    flex-shrink: 0;
+}
+
+.user-avatar {
+    background-color: var(--input-background-color);
+    color: var(--cmd-button-icon-color);
+}
+
+.assistant-avatar {
+    background-color: var(--subtle-border-color, var(--main-border-color));
+    color: var(--hover-item-text-color);
+}
+
+.message-content {
+    max-width: calc(100% - 50px);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+    color: var(--main-text-color);
+}
+
+.user-content {
+    border-radius: 0.5rem 0.5rem 0 0.5rem !important;
+    background-color: var(--input-background-color) !important;
+}
+
+.assistant-content {
+    border-radius: 0.5rem 0.5rem 0.5rem 0 !important;
+    background-color: var(--main-background-color);
+    border: 1px solid var(--subtle-border-color, var(--main-border-color));
+}
+
+/* Sources Styling */
+.sources-container {
+    background-color: var(--accented-background-color, var(--main-background-color));
+    border-top: 1px solid var(--main-border-color);
+    color: var(--main-text-color);
+}
+
+.source-item {
+    transition: all 0.2s ease;
+    background-color: var(--main-background-color);
+    border-color: var(--subtle-border-color, var(--main-border-color)) !important;
+}
+
+.source-item:hover {
+    background-color: var(--link-hover-background, var(--hover-item-background-color));
+}
+
+.source-link {
+    color: var(--link-color, var(--hover-item-text-color));
+    text-decoration: none;
+    display: block;
+    width: 100%;
+}
+
+.source-link:hover {
+    color: var(--link-hover-color, var(--hover-item-text-color));
+}
+
+/* Input Area Styling */
+.note-context-chat-form {
+    background-color: var(--main-background-color);
+    border-top: 1px solid var(--main-border-color);
+}
+
+.context-option-container {
+    padding: 0.5rem 0;
+    border-bottom: 1px solid var(--subtle-border-color, var(--main-border-color));
+    color: var(--main-text-color);
+}
+
+.chat-input-container {
+    padding-top: 0.5rem;
+}
+
+.note-context-chat-input {
+    border-color: var(--subtle-border-color, var(--main-border-color));
+    background-color: var(--input-background-color) !important;
+    color: var(--input-text-color) !important;
+    resize: none;
+    transition: all 0.2s ease;
+    min-height: 50px;
+    max-height: 150px;
+}
+
+.note-context-chat-input:focus {
+    border-color: var(--input-focus-outline-color, var(--main-border-color));
+    box-shadow: 0 0 0 0.25rem var(--input-focus-outline-color, rgba(13, 110, 253, 0.25));
+}
+
+.note-context-chat-send-button {
+    width: 40px;
+    height: 40px;
+    align-self: flex-end;
+    background-color: var(--cmd-button-background-color) !important;
+    color: var(--cmd-button-text-color) !important;
+}
+
+/* Loading Indicator */
+.loading-indicator {
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    color: var(--muted-text-color);
+} 

src/public/translations/en/translation.json

@@ -1759,7 +1759,9 @@
   "ai": {
     "sources": "Sources",
     "enter_message": "Enter your message...",
-    "use_advanced_context": "Use Advanced Context",
+    "use_advanced_context": "Use Enhanced Note Context",
-    "advanced_context_helps": "Helps with large knowledge bases and limited context windows"
+    "advanced_context_helps": "Helps with large knowledge bases and limited context windows",
+    "use_enhanced_context": "Use Enhanced Note Context",
+    "enhanced_context_description": "Improves answers by including more relevant note content"
   }
 }