Fix chat panel style

src/components/ChatPanel.ts

@@ -124,9 +124,21 @@ export class ChatPanel {
 		const historyContainer = this.container.querySelector('#chat-history') as HTMLElement;
 		historyContainer.innerHTML = this.chatHistory
 			.map(
-				(msg) => `
+				(msg, index) => `
                     <div class="message ${msg.role} message-type-${msg.type || 'default'} ">
-                    <div class="message-content">${this.processMessageContent(msg.content)}</div>
+						<div class="chat-meta">
+							<div class="chat-sender-info">
+								<div class="chat-message-icon">
+									${
+										msg.role === 'user'
+											? `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>`
+											: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot"><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></svg>`
+									}
+								</div>
+                        		<span class="chat-role-label">${this.getRoleLabel(msg.role)}</span>
+							</div>
+						</div>
+						<div class="chat-message-content">${this.processMessageContent(msg.content)}</div>
                     </div>
             `
 			)
@@ -136,6 +148,22 @@ export class ChatPanel {
 		historyContainer.scrollTop = historyContainer.scrollHeight;
 	}
 
+	/**
+	 * Возвращает удобочитаемую метку для роли сообщения.
+	 * @param {string} role - Роль отправителя сообщения (например, 'user', 'assistant').
+	 * @returns {string} Локализованная метка роли.
+	 */
+	getRoleLabel(role: string): string {
+		switch (role) {
+			case 'user':
+				return 'Вы:';
+			case 'assistant':
+				return 'LLM Агент:';
+			default:
+				return `${role}:`;
+		}
+	}
+
 	processMessageContent(content: string): string {
 		// Простейшая обработка Markdown для изображений
 		return content.replace(/<img([^>]*?)>/g, '<img$1 style="max-width: 100%; height: auto;">').replace(/\n/g, '<br>');

src/css/styles.css

@@ -20,47 +20,88 @@
     --node-font-weight: bold;
     --node-text-color: #333;
     --node-text-align: center;
+
+    /* Переменные для текста */
+    --font-text-size: 14px;
+    --text-normal: #333;
+    --text-muted: #666;
+    --background-secondary-alt: #f0f0f0;
+    --font-monospace: 'Roboto Mono', monospace;
+    --text-accent: #007bff;
 }
 
-.llm-agent-chat-panel .message-type-user .message-content {
+.llm-agent-chat-panel .message-type-user {
     border: 1px solid var(--llm-user-border-color); /* Цвет для user */
     background-color: var(--llm-user-background-color); /* Светло-голубой фон для user */
-    border-radius: 5px;
-    padding: 10px;
 }
 
-.llm-agent-chat-panel .message-type-llm .message-content {
+.llm-agent-chat-panel .message-type-llm {
     border: 1px solid var(--llm-llm-border-color); /* Цвет для llm */
     background-color: var(--llm-llm-background-color); /* Светло-зеленый фон для llm */
-    border-radius: 5px;
-    padding: 10px;
 }
 
-.llm-agent-chat-panel .message-type-tool .message-content {
+.llm-agent-chat-panel .message-type-tool {
     border: 1px solid var(--llm-tool-border-color); /* Цвет для tool */
     background-color: var(--llm-tool-background-color); /* Светло-оранжевый фон для tool */
-    border-radius: 5px;
-    padding: 10px;
 }
 
-.llm-agent-chat-panel .message-type-error .message-content {
+.llm-agent-chat-panel .message-type-error {
     border: 1px solid var(--llm-error-border-color); /* Красный цвет для error */
     background-color: var(--llm-error-background-color); /* Светло-красный фон для error */
-    border-radius: 5px;
-    padding: 10px;
 }
 
-.llm-agent-chat-panel .message-type-assistant .message-content {
+.llm-agent-chat-panel .message-type-assistant {
     border: 1px solid var(--llm-assistant-border-color); /* Цвет для assistant */
     background-color: var(--llm-assistant-background-color); /* Светло-серый фон для assistant */
-    border-radius: 5px;
-    padding: 10px;
 }
 
 /* Общие стили для сообщений */
 .llm-agent-chat-panel .message {
     margin-bottom: 10px;
-    display: flex; /* Для выравнивания по сторонам */
+    display: flex; /* Flex-контейнер для всего сообщения */
+    flex-direction: column; /* Элементы внутри сообщения будут выстраиваться вертикально */
+    padding: 10px; /* Общие отступы для всего сообщения */
+    border-radius: 5px;
+    max-width: 80%; /* Ограничение ширины сообщения */
+    word-break: break-word; /* Разбиение слов для длинных сообщений */
+    overflow-wrap: break-word; /* Перенос слов */
+}
+
+.llm-agent-chat-panel .message.user {
+    margin-left: auto; /* Выравнивание по правому краю для пользователя */
+}
+
+.llm-agent-chat-panel .message.assistant {
+    margin-right: auto; /* Выравнивание по левому краю для ассистента, если потребуется */
+}
+
+.chat-meta {
+    margin-bottom: 5px; /* Отступ между мета-информацией и содержимым */
+}
+
+.chat-sender-info {
+    display: flex; /* Делаем sender-info flex-контейнером */
+    align-items: center; /* Выравнивание иконки и текста по центру */
+    gap: 8px; /* Расстояние между иконкой и текстом */
+}
+
+.chat-message-icon svg {
+    width: 20px; /* Размер иконки */
+    height: 20px;
+    flex-shrink: 0; /* Предотвращает сжатие иконки */
+}
+
+.chat-role-label {
+    font-weight: bold;
+    font-size: 0.9em;
+    color: var(--text-muted);
+}
+
+.chat-message-content {
+    font-size: var(--font-text-size);
+    line-height: 1.5;
+    color: var(--text-normal);
+    user-select: text; /* Разрешить выделение текста внутри содержимого */
 }
 
 /* Стили для узлов графа */
@@ -102,3 +143,88 @@
     border: 1px solid var(--llm-assistant-border-color); /* Нейтральный серый для ассистента */
     background-color: var(--llm-assistant-background-color); /* Светло-серый фон */
 }
+
+/* ----------------------------------------------- Chat Panel Styles -------------------------------------------------------- */
+
+.llm-agent-chat-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.chat-history {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 10px;
+    -webkit-user-select: text; /* Разрешить выделение для WebKit-браузеров */
+    -moz-user-select: text;    /* Разрешить выделение для Firefox */
+    user-select: text;         /* Стандартное свойство для выделения текста */
+    scroll-behavior: smooth;
+}
+
+/* Стили для inline-кода в сообщениях */
+.chat-message-content code {
+    background-color: var(--background-secondary-alt);
+    border-radius: 4px;
+    padding: 2px 4px;
+    font-family: var(--font-monospace);
+    font-size: 0.9em;
+    color: var(--text-accent);
+}
+
+/* Стиль для форм ввода чата */
+.chat-input-form {
+    display: flex;
+    padding: 10px;
+    border-top: 1px solid #eee;
+    gap: 10px;
+}
+
+.command-input {
+    position: relative;
+    flex-grow: 1;
+}
+
+#message-input {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+
+#send-button {
+    padding: 8px 15px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+#send-button:hover {
+    background-color: #0056b3;
+}
+
+.suggestions {
+    position: absolute;
+    bottom: 100%; /* Помещаем над полем ввода */
+    left: 0;
+    right: 0;
+    background-color: white;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    max-height: 150px;
+    overflow-y: auto;
+    z-index: 10;
+    margin-bottom: 5px; /* Отступ от поля ввода */
+}
+
+.suggestion-item {
+    padding: 8px 10px;
+    cursor: pointer;
+}
+
+.suggestion-item:hover {
+    background-color: #f0f0f0;
+}

src/views/ChatView.ts

@@ -72,6 +72,7 @@ export class ChatView extends ItemView {
 
 	// ----------------------------------------------- API Methods ---------------------------------------------------------------
 
+    // TODO: проблемное место
     /**
      * Загружает историю сообщений от корня до указанного узла графа.
      * Обновляет `chatHistory` и отображение в `chatPanel`.