add history panel toggle button
This commit is contained in:
dimitrievgs
parent
11c44e38f2
commit
351605a052
|
|
@ -3,16 +3,16 @@
|
|||
/* CSS переменные, чтобы создать атмосферу Шира из "Властелина колец" */
|
||||
:root {
|
||||
/* Цвета сообщений чата */
|
||||
--llm-user-border-color: #79A07E; /* Ширский зеленый */
|
||||
--llm-user-background-color: #E6F2E6; /* Очень светлый ширский зеленый */
|
||||
--llm-llm-border-color: #B2A27E; /* Нейтральный, землистый оттенок */
|
||||
--llm-llm-background-color: #F8F3E9; /* Светлый кремовый */
|
||||
--llm-tool-border-color: #B08D57; /* Древесный коричневый */
|
||||
--llm-tool-background-color: #FDF4E3; /* Светлый песочный */
|
||||
--llm-error-border-color: #C25B5B; /* Приглушенный красный */
|
||||
--llm-error-background-color: #F7E0E0; /* Светлый приглушенный красный */
|
||||
--llm-assistant-border-color: #9C9C8F; /* Серый камень */
|
||||
--llm-assistant-background-color: #ECECE4; /* Светло-серый, землистый */
|
||||
--llm-user-border-color: #79a07e; /* Ширский зеленый */
|
||||
--llm-user-background-color: #e6f2e6; /* Очень светлый ширский зеленый */
|
||||
--llm-llm-border-color: #b2a27e; /* Нейтральный, землистый оттенок */
|
||||
--llm-llm-background-color: #f8f3e9; /* Светлый кремовый */
|
||||
--llm-tool-border-color: #b08d57; /* Древесный коричневый */
|
||||
--llm-tool-background-color: #fdf4e3; /* Светлый песочный */
|
||||
--llm-error-border-color: #c25b5b; /* Приглушенный красный */
|
||||
--llm-error-background-color: #f7e0e0; /* Светлый приглушенный красный */
|
||||
--llm-assistant-border-color: #9c9c8f; /* Серый камень */
|
||||
--llm-assistant-background-color: #ecece4; /* Светло-серый, землистый */
|
||||
|
||||
/* Общие стили узлов графа */
|
||||
--node-padding: 10px;
|
||||
|
|
@ -30,43 +30,55 @@
|
|||
--text-accent: #007bff;
|
||||
|
||||
/* Цвета для кнопок и интерактивных элементов */
|
||||
--button-primary-background: #5A8F6A; /* Насыщенный ширский зеленый для кнопок */
|
||||
--button-primary-hover-background: #4A7A5C; /* Темнее для наведения */
|
||||
--button-primary-text-color: #FFFFFF; /* Белый текст */
|
||||
--button-secondary-background: #D9D1BF; /* Светлый землистый для второстепенных кнопок */
|
||||
--button-secondary-hover-background: #C4BDA9; /* Темнее для наведения */
|
||||
--button-primary-background: #5a8f6a; /* Насыщенный ширский зеленый для кнопок */
|
||||
--button-primary-hover-background: #4a7a5c; /* Темнее для наведения */
|
||||
--button-primary-text-color: #ffffff; /* Белый текст */
|
||||
--button-secondary-background: #d9d1bf; /* Светлый землистый для второстепенных кнопок */
|
||||
--button-secondary-hover-background: #c4bda9; /* Темнее для наведения */
|
||||
--button-secondary-text-color: #333333; /* Темный текст для второстепенных */
|
||||
--border-color-light: #D3CBBD; /* Светлая граница, землистая */
|
||||
--border-color-dark: #A99B87; /* Темная граница, землистая */
|
||||
--background-modifier-form-field: #F5EFE1; /* Светлый земляной фон для полей */
|
||||
--background-modifier-form-field-highlighted: #E4DCCF; /* Немного темнее для выделенных полей */
|
||||
--border-color-light: #d3cbbd; /* Светлая граница, землистая */
|
||||
--border-color-dark: #a99b87; /* Темная граница, землистая */
|
||||
--background-modifier-form-field: #f5efe1; /* Светлый земляной фон для полей */
|
||||
--background-modifier-form-field-highlighted: #e4dccf; /* Немного темнее для выделенных полей */
|
||||
|
||||
--node-text-color: var(--text-normal); /* Используем общую переменную для текста узлов */
|
||||
--node-text-color: var(
|
||||
--text-normal
|
||||
); /* Используем общую переменную для текста узлов */
|
||||
}
|
||||
|
||||
.llm-agent-chat-panel .message-type-user {
|
||||
border: 1px solid var(--llm-user-border-color); /* Цвет для user */
|
||||
background-color: var(--llm-user-background-color); /* Светло-голубой фон для user */
|
||||
background-color: var(
|
||||
--llm-user-background-color
|
||||
); /* Светло-голубой фон для user */
|
||||
}
|
||||
|
||||
.llm-agent-chat-panel .message-type-llm {
|
||||
border: 1px solid var(--llm-llm-border-color); /* Цвет для llm */
|
||||
background-color: var(--llm-llm-background-color); /* Светло-зеленый фон для llm */
|
||||
background-color: var(
|
||||
--llm-llm-background-color
|
||||
); /* Светло-зеленый фон для llm */
|
||||
}
|
||||
|
||||
.llm-agent-chat-panel .message-type-tool {
|
||||
border: 1px solid var(--llm-tool-border-color); /* Цвет для tool */
|
||||
background-color: var(--llm-tool-background-color); /* Светло-оранжевый фон для tool */
|
||||
background-color: var(
|
||||
--llm-tool-background-color
|
||||
); /* Светло-оранжевый фон для tool */
|
||||
}
|
||||
|
||||
.llm-agent-chat-panel .message-type-error {
|
||||
border: 1px solid var(--llm-error-border-color); /* Красный цвет для error */
|
||||
background-color: var(--llm-error-background-color); /* Светло-красный фон для error */
|
||||
background-color: var(
|
||||
--llm-error-background-color
|
||||
); /* Светло-красный фон для error */
|
||||
}
|
||||
|
||||
.llm-agent-chat-panel .message-type-assistant {
|
||||
border: 1px solid var(--llm-assistant-border-color); /* Цвет для assistant */
|
||||
background-color: var(--llm-assistant-background-color); /* Светло-серый фон для assistant */
|
||||
background-color: var(
|
||||
--llm-assistant-background-color
|
||||
); /* Светло-серый фон для assistant */
|
||||
}
|
||||
|
||||
/* Общие стили для сообщений */
|
||||
|
|
@ -135,22 +147,30 @@
|
|||
|
||||
.react-flow__node-user {
|
||||
border: 1px solid var(--llm-user-border-color); /* Цвет для user */
|
||||
background-color: var(--llm-user-background-color); /* Светло-голубой фон для user */
|
||||
background-color: var(
|
||||
--llm-user-background-color
|
||||
); /* Светло-голубой фон для user */
|
||||
}
|
||||
|
||||
.react-flow__node-llm {
|
||||
border: 1px solid var(--llm-llm-border-color); /* Цвет для llm */
|
||||
background-color: var(--llm-llm-background-color); /* Светло-зеленый фон для llm */
|
||||
background-color: var(
|
||||
--llm-llm-background-color
|
||||
); /* Светло-зеленый фон для llm */
|
||||
}
|
||||
|
||||
.react-flow__node-tool {
|
||||
border: 1px solid var(--llm-tool-border-color); /* Цвет для tool */
|
||||
background-color: var(--llm-tool-background-color); /* Светло-оранжевый фон для tool */
|
||||
background-color: var(
|
||||
--llm-tool-background-color
|
||||
); /* Светло-оранжевый фон для tool */
|
||||
}
|
||||
|
||||
.react-flow__node-error {
|
||||
border: 1px solid var(--llm-error-border-color); /* Красный цвет для error */
|
||||
background-color: var(--llm-error-background-color); /* Светло-красный фон для error */
|
||||
background-color: var(
|
||||
--llm-error-background-color
|
||||
); /* Светло-красный фон для error */
|
||||
}
|
||||
|
||||
.react-flow__node-assistant {
|
||||
|
|
@ -218,8 +238,12 @@
|
|||
/* Явно переопределяем стили, которые могли быть затронуты */
|
||||
width: auto; /* Убедимся, что ширина не ограничена */
|
||||
height: auto; /* Убедимся, что высота не ограничена */
|
||||
background-color: var(--button-primary-background) !important; /* Используем переменную для основного цвета кнопки */
|
||||
color: var(--button-primary-text-color) !important; /* Используем переменную для цвета текста кнопки */
|
||||
background-color: var(
|
||||
--button-primary-background
|
||||
) !important; /* Используем переменную для основного цвета кнопки */
|
||||
color: var(
|
||||
--button-primary-text-color
|
||||
) !important; /* Используем переменную для цвета текста кнопки */
|
||||
opacity: 1; /* Если .clickable-icon устанавливает opacity */
|
||||
display: inline-flex; /* Или flex, если нужно выравнивание элементов внутри */
|
||||
align-items: center; /* Для вертикального выравнивания контента, если display: flex */
|
||||
|
|
@ -227,10 +251,11 @@
|
|||
}
|
||||
|
||||
#send-button:hover {
|
||||
background-color: var(--button-primary-hover-background) !important; /* Переменная для наведения */
|
||||
background-color: var(
|
||||
--button-primary-hover-background
|
||||
) !important; /* Переменная для наведения */
|
||||
}
|
||||
|
||||
|
||||
/* Добавляем стили для нового интерфейса ввода */
|
||||
|
||||
.chat-input-container {
|
||||
|
|
@ -294,15 +319,21 @@
|
|||
padding: 4px 8px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background-color: var(--button-secondary-background); /* Используем переменную для второстепенных кнопок */
|
||||
color: var(--button-secondary-text-color); /* Используем переменную для текста второстепенных кнопок */
|
||||
background-color: var(
|
||||
--button-secondary-background
|
||||
); /* Используем переменную для второстепенных кнопок */
|
||||
color: var(
|
||||
--button-secondary-text-color
|
||||
); /* Используем переменную для текста второстепенных кнопок */
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.model-select-button:hover {
|
||||
background-color: var(--button-secondary-hover-background); /* Используем переменную для наведения второстепенных кнопок */
|
||||
background-color: var(
|
||||
--button-secondary-hover-background
|
||||
); /* Используем переменную для наведения второстепенных кнопок */
|
||||
filter: brightness(1.1); /* Можно оставить или скорректировать под тему */
|
||||
}
|
||||
|
||||
|
|
@ -327,7 +358,9 @@
|
|||
/* right: 0; */ /* Это может привести к растягиванию, лучше оставить auto или задать ширину */
|
||||
width: max-content; /* Чтобы дропдаун не растягивался на всю ширину родителя */
|
||||
min-width: 150px; /* Минимальная ширина */
|
||||
background-color: var(--background-primary); /* Предполагается, что --background-primary есть и подходит */
|
||||
background-color: var(
|
||||
--background-primary
|
||||
); /* Предполагается, что --background-primary есть и подходит */
|
||||
border: 1px solid var(--border-color-dark); /* Используем новую переменную для границы */
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Можно скорректировать тень в соответствии с темой */
|
||||
|
|
@ -346,7 +379,6 @@
|
|||
}
|
||||
|
||||
.model-option:hover {
|
||||
|
||||
}
|
||||
|
||||
.model-option:first-child {
|
||||
|
|
@ -385,7 +417,9 @@
|
|||
bottom: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: var(--background-primary); /* Предполагается, что --background-primary есть и подходит */
|
||||
background-color: var(
|
||||
--background-primary
|
||||
); /* Предполагается, что --background-primary есть и подходит */
|
||||
border: 1px solid var(--border-color-dark); /* Используем новую переменную для границы */
|
||||
border-radius: 8px;
|
||||
max-height: 150px;
|
||||
|
|
@ -415,3 +449,60 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------- History Panel Styles --------------------------------------------------- */
|
||||
|
||||
.llm-agent-history-sidebar {
|
||||
border-right: 1px solid var(--background-modifier-border);
|
||||
overflow-y: auto;
|
||||
background-color: var(--background-secondary);
|
||||
transition: width 0.3s ease, min-width 0.3s ease, border-right 0.3s ease;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.llm-agent-history-sidebar.expanded {
|
||||
width: 200px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.llm-agent-history-sidebar.collapsed {
|
||||
width: 0;
|
||||
min-width: 0;
|
||||
border-right: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------- Toggle Button Styles --------------------------------------------------- */
|
||||
|
||||
.history-toggle-button {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 9999; /* Увеличиваем z-index, чтобы быть выше React Flow */
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background-color: var(--background-primary);
|
||||
border: 1px solid var(--border-color-light);
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.history-toggle-button:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------- Graph Container Styles -------------------------------------------------- */
|
||||
|
||||
.llm-agent-graph-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
background-color: var(--background-primary);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,6 +28,8 @@ export class GraphView extends ItemView {
|
|||
historyContainer: HTMLDivElement;
|
||||
graphContainer: HTMLDivElement;
|
||||
reactRoot: ReactDOM.Root | null;
|
||||
toggleButton: HTMLButtonElement;
|
||||
isHistoryCollapsed: boolean;
|
||||
|
||||
constructor(leaf: WorkspaceLeaf, plugin: LLMAgentPlugin) {
|
||||
super(leaf);
|
||||
|
|
@ -38,6 +40,7 @@ export class GraphView extends ItemView {
|
|||
this.selectedGraphId = null;
|
||||
this.historyPanel = null;
|
||||
this.reactRoot = null; // Инициализируем null
|
||||
this.isHistoryCollapsed = true;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -80,13 +83,8 @@ export class GraphView extends ItemView {
|
|||
|
||||
// Левая панель для истории
|
||||
this.historyContainer = mainContainer.createDiv('llm-agent-history-sidebar') as HTMLDivElement;
|
||||
this.historyContainer.style.cssText = `
|
||||
width: 300px;
|
||||
min-width: 300px;
|
||||
border-right: 1px solid var(--background-modifier-border); /* ИСПРАВЛЕНО: Использование переменной Obsidian */
|
||||
overflow-y: auto;
|
||||
background-color: var(--background-secondary); /* Убедимся, что фон установлен */
|
||||
`;
|
||||
// Убираем инлайн стили - теперь в CSS
|
||||
this.historyContainer.classList.add(this.isHistoryCollapsed ? 'collapsed' : 'expanded');
|
||||
|
||||
// Правая панель для графа
|
||||
this.graphContainer = mainContainer.createDiv('llm-agent-graph-container') as HTMLDivElement;
|
||||
|
|
@ -105,6 +103,9 @@ export class GraphView extends ItemView {
|
|||
// Инициализируем React Flow
|
||||
this.initializeGraphPanel();
|
||||
|
||||
// Создаем кнопку переключения
|
||||
this.addToggleButton();
|
||||
|
||||
// Подписываемся на события
|
||||
this.plugin.eventBus.on('new-chat', this.handleNewChat.bind(this));
|
||||
this.plugin.eventBus.on('graph-selected', this.handleGraphSelected.bind(this));
|
||||
|
|
@ -133,6 +134,25 @@ export class GraphView extends ItemView {
|
|||
this.plugin.eventBus.off('graph-selected', this.handleGraphSelected); // Отписываемся и отсюда
|
||||
}
|
||||
|
||||
// ----------------------------------------------- History Panel Toggle --------------------------------------------------
|
||||
|
||||
/**
|
||||
* Переключает состояние панели истории между свернутым и развернутым.
|
||||
*/
|
||||
toggleHistoryPanel(): void {
|
||||
this.isHistoryCollapsed = !this.isHistoryCollapsed;
|
||||
|
||||
if (this.isHistoryCollapsed) {
|
||||
this.historyContainer.classList.remove('expanded');
|
||||
this.historyContainer.classList.add('collapsed');
|
||||
this.toggleButton.textContent = '📋';
|
||||
} else {
|
||||
this.historyContainer.classList.remove('collapsed');
|
||||
this.historyContainer.classList.add('expanded');
|
||||
this.toggleButton.textContent = '❌';
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------- Graph Panel Integration --------------------------------------------------
|
||||
|
||||
/**
|
||||
|
|
@ -160,6 +180,16 @@ export class GraphView extends ItemView {
|
|||
}
|
||||
}
|
||||
|
||||
addToggleButton(): void {
|
||||
console.log('Creating toggle button...');
|
||||
this.toggleButton = document.createElement('button');
|
||||
this.toggleButton.className = 'history-toggle-button';
|
||||
this.toggleButton.textContent = this.isHistoryCollapsed ? '📋' : '❌';
|
||||
this.toggleButton.addEventListener('click', this.toggleHistoryPanel.bind(this));
|
||||
this.graphContainer.appendChild(this.toggleButton);
|
||||
console.log('Toggle button created and appended:', this.toggleButton);
|
||||
}
|
||||
|
||||
/**
|
||||
* Рендерит или обновляет GraphPanelComponent в DOM.
|
||||
*/
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user