fix scrolling to bottom of chat at graph loading

src/components/ChatPanel.ts

@@ -125,27 +125,42 @@ export class ChatPanel {
 		historyContainer.innerHTML = this.chatHistory
 			.map(
 				(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 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 lucude-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 class="chat-message-content">${this.processMessageContent(msg.content)}</div>
-                    </div>
-            `
+					</div>
+					<div class="chat-message-content">${this.processMessageContent(msg.content)}</div>
+                </div>
+        `
 			)
 			.join('');
 
-		// Прокручиваем к концу
-		historyContainer.scrollTop = historyContainer.scrollHeight;
+		const chatPanelContainer = this.container.querySelector('.llm-agent-chat-panel') as HTMLElement;
+
+		// Прокручиваем к последнему сообщению
+		// Обычный `historyContainer.scrollTop = historyContainer.scrollHeight;` не работает
+		if (this.chatHistory.length > 0) {
+			setTimeout(() => {
+				if (chatPanelContainer.scrollHeight > chatPanelContainer.clientHeight) {
+					// Используем scrollTop для более точного контроля
+					// Прокручиваем на всю высоту скролла
+					chatPanelContainer.scrollTop = chatPanelContainer.scrollHeight;
+					// Затем отнимаем немного, чтобы создать отступ снизу
+					// 20px - это пример, можно настроить это значение
+					const offset = 20; // Величина отступа от низа
+					chatPanelContainer.scrollTop -= offset;
+				}
+			}, 0);
+		}
 	}
 
 	/**

src/css/styles.css

@@ -191,6 +191,7 @@
     border: 1px solid #ccc;
     border-radius: 4px;
     box-sizing: border-box;
+    scroll-margin-bottom: 30px; /* Добавляет отступ в 20px снизу при прокрутке к этому элементу */
 }
 
 #send-button {