From c386e34c33afd2bd4bd22fd12d67c5956882373f Mon Sep 17 00:00:00 2001 From: perf3ct Date: Mon, 10 Mar 2025 17:34:31 +0000 Subject: [PATCH] Update the chat panel theme some --- src/public/app/widgets/llm_chat_panel.ts | 69 +++++++----- src/public/stylesheets/llm_chat.css | 119 ++++++++++++++++++++ src/public/translations/en/translation.json | 6 +- 3 files changed, 163 insertions(+), 31 deletions(-) create mode 100644 src/public/stylesheets/llm_chat.css diff --git a/src/public/app/widgets/llm_chat_panel.ts b/src/public/app/widgets/llm_chat_panel.ts index 40f176e8c..b157fb83f 100644 --- a/src/public/app/widgets/llm_chat_panel.ts +++ b/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 {
-
+
- -
- ${t('ai.advanced_context_helps')} + ${t('ai.enhanced_context_description')}
-
+
-
@@ -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.innerHTML = role === 'user' - ? '' - : ''; + avatarElement.className = 'message-avatar d-flex align-items-center justify-content-center me-2'; + + if (role === 'user') { + avatarElement.innerHTML = ''; + avatarElement.classList.add('user-avatar'); + } else { + avatarElement.innerHTML = ''; + 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 - let formattedContent = content - .replace(/```([\s\S]*?)```/g, '
$1
') - .replace(/`([^`]+)`/g, '$1') - .replace(/\*\*([^*]+)\*\*/g, '$1') - .replace(/\*([^*]+)\*/g, '$1') - .replace(/\n/g, '
'); + if (role === 'user') { + contentElement.classList.add('user-content', 'bg-light'); + } else { + contentElement.classList.add('assistant-content'); + } - 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 = ` -
+ `; diff --git a/src/public/stylesheets/llm_chat.css b/src/public/stylesheets/llm_chat.css new file mode 100644 index 000000000..4b458e8b5 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/src/public/translations/en/translation.json b/src/public/translations/en/translation.json index 71fe62a08..9d20789c5 100644 --- a/src/public/translations/en/translation.json +++ b/src/public/translations/en/translation.json @@ -1759,7 +1759,9 @@ "ai": { "sources": "Sources", "enter_message": "Enter your message...", - "use_advanced_context": "Use Advanced Context", - "advanced_context_helps": "Helps with large knowledge bases and limited context windows" + "use_advanced_context": "Use Enhanced Note Context", + "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" } }