Fix chat panel style
This commit is contained in:
dimitrievgs
parent
49983a3250
commit
2613776c4c
|
|
@ -124,9 +124,21 @@ export class ChatPanel {
|
|||
const historyContainer = this.container.querySelector('#chat-history') as HTMLElement;
|
||||
historyContainer.innerHTML = this.chatHistory
|
||||
.map(
|
||||
(msg) => `
|
||||
<div class="message ${msg.role} message-type-${msg.type || 'default'}">
|
||||
<div class="message-content">${this.processMessageContent(msg.content)}</div>
|
||||
(msg, index) => `
|
||||
<div class="message ${msg.role} message-type-${msg.type || 'default'} ">
|
||||
<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>');
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -72,6 +72,7 @@ export class ChatView extends ItemView {
|
|||
|
||||
// ----------------------------------------------- API Methods ---------------------------------------------------------------
|
||||
|
||||
// TODO: проблемное место
|
||||
/**
|
||||
* Загружает историю сообщений от корня до указанного узла графа.
|
||||
* Обновляет `chatHistory` и отображение в `chatPanel`.
|
||||
|
|
|
|||
134
styles.css
134
styles.css
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user