add history panel toggle button

src/css/styles.css

@@ -3,16 +3,16 @@
 /* CSS переменные, чтобы создать атмосферу Шира из "Властелина колец" */
 :root {
 	/* Цвета сообщений чата */
-    --llm-user-border-color: #79A07E; /* Ширский зеленый */
+	--llm-user-border-color: #79a07e; /* Ширский зеленый */
-    --llm-user-background-color: #E6F2E6; /* Очень светлый ширский зеленый */
+	--llm-user-background-color: #e6f2e6; /* Очень светлый ширский зеленый */
-    --llm-llm-border-color: #B2A27E; /* Нейтральный, землистый оттенок */
+	--llm-llm-border-color: #b2a27e; /* Нейтральный, землистый оттенок */
-    --llm-llm-background-color: #F8F3E9; /* Светлый кремовый */
+	--llm-llm-background-color: #f8f3e9; /* Светлый кремовый */
-    --llm-tool-border-color: #B08D57; /* Древесный коричневый */
+	--llm-tool-border-color: #b08d57; /* Древесный коричневый */
-    --llm-tool-background-color: #FDF4E3; /* Светлый песочный */
+	--llm-tool-background-color: #fdf4e3; /* Светлый песочный */
-    --llm-error-border-color: #C25B5B; /* Приглушенный красный */
+	--llm-error-border-color: #c25b5b; /* Приглушенный красный */
-    --llm-error-background-color: #F7E0E0; /* Светлый приглушенный красный */
+	--llm-error-background-color: #f7e0e0; /* Светлый приглушенный красный */
-    --llm-assistant-border-color: #9C9C8F; /* Серый камень */
+	--llm-assistant-border-color: #9c9c8f; /* Серый камень */
-    --llm-assistant-background-color: #ECECE4; /* Светло-серый, землистый */
+	--llm-assistant-background-color: #ecece4; /* Светло-серый, землистый */
 
 	/* Общие стили узлов графа */
 	--node-padding: 10px;
@@ -30,43 +30,55 @@
 	--text-accent: #007bff;
 
 	/* Цвета для кнопок и интерактивных элементов */
-    --button-primary-background: #5A8F6A; /* Насыщенный ширский зеленый для кнопок */
+	--button-primary-background: #5a8f6a; /* Насыщенный ширский зеленый для кнопок */
-    --button-primary-hover-background: #4A7A5C; /* Темнее для наведения */
+	--button-primary-hover-background: #4a7a5c; /* Темнее для наведения */
-    --button-primary-text-color: #FFFFFF; /* Белый текст */
+	--button-primary-text-color: #ffffff; /* Белый текст */
-    --button-secondary-background: #D9D1BF; /* Светлый землистый для второстепенных кнопок */
+	--button-secondary-background: #d9d1bf; /* Светлый землистый для второстепенных кнопок */
-    --button-secondary-hover-background: #C4BDA9; /* Темнее для наведения */
+	--button-secondary-hover-background: #c4bda9; /* Темнее для наведения */
 	--button-secondary-text-color: #333333; /* Темный текст для второстепенных */
-    --border-color-light: #D3CBBD; /* Светлая граница, землистая */
+	--border-color-light: #d3cbbd; /* Светлая граница, землистая */
-    --border-color-dark: #A99B87; /* Темная граница, землистая */
+	--border-color-dark: #a99b87; /* Темная граница, землистая */
-    --background-modifier-form-field: #F5EFE1; /* Светлый земляной фон для полей */
+	--background-modifier-form-field: #f5efe1; /* Светлый земляной фон для полей */
-    --background-modifier-form-field-highlighted: #E4DCCF; /* Немного темнее для выделенных полей */
+	--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; /* Используем переменную для основного цвета кнопки */
+	background-color: var(
-    color: var(--button-primary-text-color) !important; /* Используем переменную для цвета текста кнопки */
+		--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); /* Используем переменную для второстепенных кнопок */
+	background-color: var(
-    color: var(--button-secondary-text-color); /* Используем переменную для текста второстепенных кнопок */
+		--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);
+}

src/views/GraphView.ts

@@ -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 = `
+		// Убираем инлайн стили - теперь в CSS
-            width: 300px;
+		this.historyContainer.classList.add(this.isHistoryCollapsed ? 'collapsed' : 'expanded');
-            min-width: 300px;
-            border-right: 1px solid var(--background-modifier-border); /* ИСПРАВЛЕНО: Использование переменной Obsidian */
-            overflow-y: auto;
-            background-color: var(--background-secondary); /* Убедимся, что фон установлен */
-        `;
 
 		// Правая панель для графа
 		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.
 	 */