dimitriev.gs/llm-agent-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix problem with position of dropdown container for @ and # references, fix problem with scrolling to bootom of ChatPanel instead of last message

Browse Source
This commit is contained in:
dimitrievgs 2025-09-27 23:25:53 +03:00
parent 4b31725936
commit bc9424877c
3 changed files with 292 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/ChatPanel.ts
View File

@ -209,12 +209,12 @@ export class ChatPanel {
) )
.join(''); .join('');
// Прокручиваем к последнему сообщению // Прокручиваем к самому низу родительского контейнера (view-content)
if (this.chatHistory.length > 0) { if (this.chatHistory.length > 0) {
setTimeout(() => { setTimeout(() => {
const lastMessage = historyContainer.lastElementChild as HTMLElement; const scrollContainer = this.container.closest('.view-content') as HTMLElement;
if (lastMessage) { if (scrollContainer) {
lastMessage.scrollIntoView({ behavior: 'smooth', block: 'end' }); scrollContainer.scrollTop = scrollContainer.scrollHeight;
} }
}, 0); }, 0);
} }

287
src/css/styles.css
View File

@ -297,11 +297,11 @@
}*/ }*/
.message-input-editor { .message-input-editor {
min-height: 20px; min-height: 20px;
max-height: 200px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
word-wrap: break-word; word-wrap: break-word;
white-space: pre-wrap; white-space: pre-wrap;
} }
.message-input-editor.is-empty::before { .message-input-editor.is-empty::before {
@ -312,31 +312,31 @@
} }
.message-input-editor[data-placeholder]::before { .message-input-editor[data-placeholder]::before {
content: attr(data-placeholder); content: attr(data-placeholder);
color: var(--text-muted); color: var(--text-muted);
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
opacity: 0.6; opacity: 0.6;
} }
.message-input-editor.is-empty[data-placeholder]::before { .message-input-editor.is-empty[data-placeholder]::before {
display: block; display: block;
} }
.message-input-editor:not(.is-empty)[data-placeholder]::before, .message-input-editor:not(.is-empty)[data-placeholder]::before,
.message-input-editor:focus[data-placeholder]::before { .message-input-editor:focus[data-placeholder]::before {
display: none; display: none;
} }
.message-input-editor .reference-box { .message-input-editor .reference-box {
display: inline-flex !important; display: inline-flex !important;
vertical-align: middle; vertical-align: middle;
margin: 0 1px; margin: 0 1px;
} }
.message-input-editor .reference-box:focus { .message-input-editor .reference-box:focus {
outline: 2px solid var(--interactive-accent); outline: 2px solid var(--interactive-accent);
outline-offset: 1px; outline-offset: 1px;
} }
.chat-controls { .chat-controls {
@ -433,8 +433,10 @@
} }
.model-option.selected { .model-option.selected {
background-color: var(--background-modifier-selected); /* Или другой подходящий цвет */ background-color: var(
color: var(--text-highlighted); /* Или другой подходящий цвет */ --background-modifier-selected
); /* Или другой подходящий цвет */
color: var(--text-highlighted); /* Или другой подходящий цвет */
} }
.model-option:first-child { .model-option:first-child {
@ -497,8 +499,8 @@
} }
.suggestion-item.selected { .suggestion-item.selected {
background-color: var(--background-modifier-selected); background-color: var(--background-modifier-selected);
color: var(--text-highlighted); color: var(--text-highlighted);
} }
/* Удаляем старые стили для chat-input-form и message-input */ /* Удаляем старые стили для chat-input-form и message-input */
@ -534,11 +536,11 @@
/* Стили для заголовков графов в панели истории */ /* Стили для заголовков графов в панели истории */
.graph-title-generated { .graph-title-generated {
color: var(--text-normal); color: var(--text-normal);
} }
.graph-title-pending { .graph-title-pending {
color: var(--text-muted); color: var(--text-muted);
} }
/* ----------------------------------------------- Toggle Button Styles --------------------------------------------------- */ /* ----------------------------------------------- Toggle Button Styles --------------------------------------------------- */
@ -581,212 +583,233 @@
/* Reference Boxes */ /* Reference Boxes */
.reference-box { .reference-box {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 2px 6px; padding: 2px 6px;
border-radius: 4px; border-radius: 4px;
font-size: 11px; font-size: 11px;
margin: 0 2px; margin: 0 2px;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
vertical-align: middle; vertical-align: middle;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.reference-box:hover { .reference-box:hover {
opacity: 0.8; opacity: 0.8;
transform: translateY(-1px); transform: translateY(-1px);
} }
.reference-box-icon { .reference-box-icon {
width: 12px; width: 12px;
height: 12px; height: 12px;
margin-right: 4px; margin-right: 4px;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.reference-box-name { .reference-box-name {
font-weight: 500; font-weight: 500;
white-space: nowrap; white-space: nowrap;
} }
/* Файлы - одинарная ссылка @ */ /* Файлы - одинарная ссылка @ */
.reference-box.file.single { .reference-box.file.single {
background: rgba(100, 150, 255, 0.1); background: rgba(100, 150, 255, 0.1);
border: 1px solid rgba(100, 150, 255, 0.3); border: 1px solid rgba(100, 150, 255, 0.3);
color: var(--text-normal); color: var(--text-normal);
} }
/* Файлы - постоянная ссылка @@ */ /* Файлы - постоянная ссылка @@ */
.reference-box.file.permanent { .reference-box.file.permanent {
background: rgba(100, 150, 255, 0.2); background: rgba(100, 150, 255, 0.2);
border: 1px solid rgba(100, 150, 255, 0.6); border: 1px solid rgba(100, 150, 255, 0.6);
color: var(--text-normal); color: var(--text-normal);
font-weight: 600; font-weight: 600;
} }
.reference-box.file.permanent .reference-box-name { .reference-box.file.permanent .reference-box-name {
font-weight: 600; font-weight: 600;
} }
/* Перебиваем стиль Obsidian для prompt*/ /* Перебиваем стиль Obsidian для prompt*/
.reference-box.prompt { .reference-box.prompt {
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
box-shadow: var(--shadow-l); box-shadow: var(--shadow-l);
z-index: auto; z-index: auto;
position: static; position: static;
top: auto; top: auto;
width: auto; width: auto;
max-width: none; max-width: none;
max-height: none; max-height: none;
overflow: hidden; overflow: hidden;
} }
/* Промпты - одинарная ссылка # */ /* Промпты - одинарная ссылка # */
.reference-box.prompt.single { .reference-box.prompt.single {
background: rgba(255, 150, 100, 0.1); background: rgba(255, 150, 100, 0.1);
border: 1px solid rgba(255, 150, 100, 0.3); border: 1px solid rgba(255, 150, 100, 0.3);
color: var(--text-normal); color: var(--text-normal);
} }
/* Промпты - постоянная ссылка ## */ /* Промпты - постоянная ссылка ## */
.reference-box.prompt.permanent { .reference-box.prompt.permanent {
background: rgba(238, 122, 69, 0.2); background: rgba(238, 122, 69, 0.2);
border: 1px solid rgba(255, 150, 100, 0.6); border: 1px solid rgba(255, 150, 100, 0.6);
color: var(--text-normal); color: var(--text-normal);
font-weight: 600; font-weight: 600;
} }
.reference-box.prompt.permanent .reference-box-name { .reference-box.prompt.permanent .reference-box-name {
font-weight: 600; font-weight: 600;
} }
/* Reference Autocomplete */ /* Reference Autocomplete */
.reference-autocomplete { .reference-autocomplete {
position: absolute; position: absolute;
background: var(--background-primary); background: var(--background-primary);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 1000; z-index: 1000;
max-height: 200px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
min-width: 250px; min-width: 250px;
max-width: 400px; max-width: 400px;
} }
.reference-option { .reference-option {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 8px 12px; padding: 8px 12px;
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
color: var(--text-normal); color: var(--text-normal);
transition: background-color 0.2s; transition: background-color 0.2s;
border-bottom: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05);
} }
.reference-option:hover, .reference-option:hover,
.reference-option.selected { .reference-option.selected {
background-color: var(--background-modifier-hover); background-color: var(--background-modifier-hover);
} }
.reference-option:last-child { .reference-option:last-child {
border-bottom: none; border-bottom: none;
} }
.reference-option-icon { .reference-option-icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-right: 8px; margin-right: 8px;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--text-muted); color: var(--text-muted);
} }
.reference-option-name { .reference-option-name {
flex: 1; flex: 1;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-weight: 500; font-weight: 500;
} }
.reference-option-path { .reference-option-path {
font-size: 10px; font-size: 10px;
color: var(--text-muted); color: var(--text-muted);
margin-left: 8px; margin-left: 8px;
max-width: 150px; max-width: 150px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
/* Темная тема */ /* Темная тема */
.theme-dark .reference-autocomplete { .theme-dark .reference-autocomplete {
background: var(--background-primary); background: var(--background-primary);
border-color: var(--border-color); border-color: var(--border-color);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
} }
.theme-dark .reference-option:hover, .theme-dark .reference-option:hover,
.theme-dark .reference-option.selected { .theme-dark .reference-option.selected {
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
/* Светлая тема */ /* Светлая тема */
.theme-light .reference-autocomplete { .theme-light .reference-autocomplete {
background: #ffffff; background: #ffffff;
border-color: #e0e0e0; border-color: #e0e0e0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
} }
.theme-light .reference-option:hover, .theme-light .reference-option:hover,
.theme-light .reference-option.selected { .theme-light .reference-option.selected {
background-color: rgba(0, 0, 0, 0.05); background-color: rgba(0, 0, 0, 0.05);
} }
/* Скроллбар для автокомплита */ /* Скроллбар для автокомплита */
.reference-autocomplete::-webkit-scrollbar { .reference-autocomplete::-webkit-scrollbar {
width: 6px; width: 6px;
} }
.reference-autocomplete::-webkit-scrollbar-track { .reference-autocomplete::-webkit-scrollbar-track {
background: transparent; background: transparent;
} }
.reference-autocomplete::-webkit-scrollbar-thumb { .reference-autocomplete::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb-bg); background: var(--scrollbar-thumb-bg);
border-radius: 3px; border-radius: 3px;
} }
.reference-autocomplete::-webkit-scrollbar-thumb:hover { .reference-autocomplete::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-thumb-bg-hover); background: var(--scrollbar-thumb-bg-hover);
} }
/* ----------------------------------------------- Settings Views ------------------------------------------------------------ */ /* ----------------------------------------------- Settings Views ------------------------------------------------------------ */
.setting-item.llm-agent-excluded-folder-item { .setting-item.llm-agent-excluded-folder-item {
padding-left: 30px; /* Отступ для элементов списка */ padding-left: 30px; /* Отступ для элементов списка */
border-left: 2px solid var(--background-modifier-border); /* Разделитель */ border-left: 2px solid var(--background-modifier-border); /* Разделитель */
margin-bottom: 5px; margin-bottom: 5px;
margin-top: 5px; margin-top: 5px;
} }
.setting-item.llm-agent-excluded-folder-item .setting-item-control { .setting-item.llm-agent-excluded-folder-item .setting-item-control {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 5px; gap: 5px;
} }
.setting-item.llm-agent-excluded-folder-item .setting-item-control input { .setting-item.llm-agent-excluded-folder-item .setting-item-control input {
flex-grow: 1; /* Поле ввода занимает все доступное пространство */ flex-grow: 1; /* Поле ввода занимает все доступное пространство */
} }
/* ----------------------------------------------- Obsidian core override ------------------------------------------------------------ */
.status-bar-item {
display: none;
padding: 0;
&.plugin-editor-width-slider {
display: inline-flex;
& .editor-width-slider {
width: 80px !important;
}
& .editor-width-slider-value {
padding: 4px 3px !important;
font-size: 10px !important;
margin: 0 !important;
}
}
}

261
src/references/ReferenceAutocomplete.ts
View File

@ -31,33 +31,34 @@ export class ReferenceAutocomplete {
// ----------------------------------------------- Public Methods --------------------------------------------------------------- // ----------------------------------------------- Public Methods ---------------------------------------------------------------
/** /**
* Показывает автокомплит с опциями. * Показывает автокомплит с опциями.
* @param reference - объект ReferenceMatch, определяющий текущий вводимый референс. * @param reference - объект ReferenceMatch, определяющий текущий вводимый референс.
* @param cursorRect - DOMRect объекта курсора, для определения позиции. * @param cursorRect - DOMRect объекта курсора, для определения позиции.
*/ */
async showAutocomplete(reference: ReferenceMatch, cursorRect: DOMRect): Promise<void> { async showAutocomplete(reference: ReferenceMatch, cursorRect: DOMRect): Promise<void> {
this.currentReference = reference; this.currentReference = reference;
// Получаем опции в зависимости от типа ссылки // Получаем опции в зависимости от типа ссылки
const options = reference.type === 'file' const options =
? await this.autocompleteManager.getFileOptions(reference.name) reference.type === 'file'
: await this.autocompleteManager.getPromptOptions(reference.name); ? await this.autocompleteManager.getFileOptions(reference.name)
: await this.autocompleteManager.getPromptOptions(reference.name);
if (options.length === 0) {
this.hideAutocomplete(); if (options.length === 0) {
return; this.hideAutocomplete();
} return;
}
this.currentOptions = options;
// Сбрасываем selection, если новые опции не содержат предыдущий выбранный элемент this.currentOptions = options;
if (this.selectedIndex >= this.currentOptions.length) { // Сбрасываем selection, если новые опции не содержат предыдущий выбранный элемент
this.selectedIndex = 0; if (this.selectedIndex >= this.currentOptions.length) {
} this.selectedIndex = 0;
this.renderOptions(); }
this.positionDropdown(cursorRect); this.renderOptions();
this.dropdown.style.display = 'block'; this.positionDropdown(cursorRect);
} this.dropdown.style.display = 'block';
}
/** /**
* Скрывает автокомплит * Скрывает автокомплит
@ -74,39 +75,39 @@ export class ReferenceAutocomplete {
* @param event - событие клавиатуры * @param event - событие клавиатуры
* @returns true если событие было обработано * @returns true если событие было обработано
*/ */
handleKeydown(event: KeyboardEvent): boolean { handleKeydown(event: KeyboardEvent): boolean {
// Мы хотим, чтобы стрелки и Enter обрабатывались только если автокомплит видим // Мы хотим, чтобы стрелки и Enter обрабатывались только если автокомплит видим
if (!this.isVisible()) { if (!this.isVisible()) {
return false; return false;
} }
switch (event.key) { switch (event.key) {
case 'ArrowDown': case 'ArrowDown':
event.preventDefault(); // Предотвращаем прокрутку страницы event.preventDefault(); // Предотвращаем прокрутку страницы
this.moveSelection(1); this.moveSelection(1);
return true; return true;
case 'ArrowUp': case 'ArrowUp':
event.preventDefault(); // Предотвращаем прокрутку страницы event.preventDefault(); // Предотвращаем прокрутку страницы
this.moveSelection(-1); this.moveSelection(-1);
return true; return true;
case 'Enter': case 'Enter':
case 'Tab': case 'Tab':
// Разрешаем Tab завершать автокомплит // Разрешаем Tab завершать автокомплит
event.preventDefault(); event.preventDefault();
this.selectCurrentItem(); this.selectCurrentItem();
return true; return true;
case 'Escape': case 'Escape':
event.preventDefault(); event.preventDefault();
this.hideAutocomplete(); this.hideAutocomplete();
return true; return true;
default: default:
return false; return false;
} }
} }
/** /**
* Устанавливает коллбек для выбора элемента * Устанавливает коллбек для выбора элемента
@ -141,43 +142,43 @@ export class ReferenceAutocomplete {
/** /**
* Настраивает обработчики событий * Настраивает обработчики событий
*/ */
private setupEventListeners(): void { private setupEventListeners(): void {
// Закрытие при клике вне dropdown // Закрытие при клике вне dropdown
document.addEventListener('click', (e) => { document.addEventListener('click', (e) => {
if (!this.dropdown.contains(e.target as Node) && !this.inputElement.contains(e.target as Node)) { if (!this.dropdown.contains(e.target as Node) && !this.inputElement.contains(e.target as Node)) {
this.hideAutocomplete(); this.hideAutocomplete();
} }
}); });
// Отслеживание наведения мыши для предотвращения скрытия по blur // Отслеживание наведения мыши для предотвращения скрытия по blur
this.dropdown.addEventListener('mouseenter', () => { this.dropdown.addEventListener('mouseenter', () => {
this.mouseIsOverDropdown = true; this.mouseIsOverDropdown = true;
}); });
this.dropdown.addEventListener('mouseleave', () => { this.dropdown.addEventListener('mouseleave', () => {
this.mouseIsOverDropdown = false; this.mouseIsOverDropdown = false;
}); });
// Скрытие при потере фокуса input элементом, если мышь не над дропдауном // Скрытие при потере фокуса input элементом, если мышь не над дропдауном
this.inputElement.addEventListener('blur', () => { this.inputElement.addEventListener('blur', () => {
// Задержка позволяет клику на элемент дропдауна сработать // Задержка позволяет клику на элемент дропдауна сработать
if (!this.mouseIsOverDropdown) { if (!this.mouseIsOverDropdown) {
this.hideAutocomplete(); this.hideAutocomplete();
} }
}); });
} }
/** /**
* Отрисовывает опции в dropdown * Отрисовывает опции в dropdown
*/ */
private renderOptions(): void { private renderOptions(): void {
this.dropdown.innerHTML = ''; this.dropdown.innerHTML = '';
this.currentOptions.forEach((option, index) => { this.currentOptions.forEach((option, index) => {
const optionElement = this.createOptionElement(option, index === this.selectedIndex); const optionElement = this.createOptionElement(option, index === this.selectedIndex);
this.dropdown.appendChild(optionElement); this.dropdown.appendChild(optionElement);
}); });
this.scrollToSelected(); // Убеждаемся, что выбранный элемент виден this.scrollToSelected(); // Убеждаемся, что выбранный элемент виден
} }
/** /**
* Создает элемент опции * Создает элемент опции
@ -220,47 +221,51 @@ export class ReferenceAutocomplete {
/** /**
* Позиционирует dropdown относительно курсора * Позиционирует dropdown относительно курсора
* @param position - желаемая позиция * @param cursorRect - DOMRect объекта курсора, для определения позиции.
*/ */
private positionDropdown(cursorRect: DOMRect): void { private positionDropdown(cursorRect: DOMRect): void {
const inputRect = this.inputElement.getBoundingClientRect(); // Чтобы получить корректные размеры, устанавливаем display: 'block'
const containerRect = this.container.getBoundingClientRect(); this.dropdown.style.display = 'block';
const dropdownRect = this.dropdown.getBoundingClientRect(); // Получаем размеры дропдауна
const viewportHeight = window.innerHeight;
// Позиционируем относительно inputElement, т.к. он уже в потоке документа
// Левый край дропдауна совпадает с левым краем курсора
let left = cursorRect.left - containerRect.left;
// Дефолтное положение - под курсором
let top = cursorRect.bottom - containerRect.top + 5; // +5px отступ
// Проверяем, есть ли место снизу
const spaceBelow = viewportHeight - cursorRect.bottom;
const spaceAbove = cursorRect.top;
if (spaceBelow < dropdownRect.height + 10 && spaceAbove > dropdownRect.height + 10) {
// Если снизу мало места и сверху достаточно, размещаем сверху
top = cursorRect.top - containerRect.top - dropdownRect.height - 5; // -5px отступ
}
// Убедимся, что дропдаун не выходит за границы контейнера справа const inputRect = this.inputElement.getBoundingClientRect();
const maxRight = inputRect.right - containerRect.left; const containerRect = this.container.getBoundingClientRect();
if (left + dropdownRect.width > maxRight) { const dropdownRect = this.dropdown.getBoundingClientRect(); // Получаем размеры дропдауна
left = maxRight - dropdownRect.width; const viewportHeight = window.innerHeight;
}
// Убедимся, что дропдаун не выходит за границы контейнера слева
if (left < 0) {
left = 0;
}
this.dropdown.style.top = `${top}px`; // Позиционируем относительно inputElement, т.к. он уже в потоке документа
this.dropdown.style.left = `${left}px`; // Левый край дропдауна совпадает с левым краем курсора
// Устанавливаем ширину дропдауна равной ширине inputElement, если он больше let left = cursorRect.left - containerRect.left;
// Это предотвратит слишком узкий дропдаун, если имя файла короткое
this.dropdown.style.minWidth = `${inputRect.width / 2}px`; // Минимум половина ширины инпута // Дефолтное положение - под курсором
this.dropdown.style.width = 'auto'; // Позволяем контенту определить ширину, но не меньше minWidth let top = cursorRect.bottom - containerRect.top + 5; // +5px отступ
}
// Проверяем, есть ли место снизу
const spaceBelow = viewportHeight - cursorRect.bottom;
const spaceAbove = cursorRect.top;
if (spaceBelow < dropdownRect.height + 10 && spaceAbove > dropdownRect.height + 10) {
// Если снизу мало места и сверху достаточно, размещаем сверху
top = cursorRect.top - containerRect.top - dropdownRect.height - 5; // -5px отступ
}
// Убедимся, что дропдаун не выходит за границы контейнера справа
const maxRight = inputRect.right - containerRect.left;
if (left + dropdownRect.width > maxRight) {
left = maxRight - dropdownRect.width;
if (left < 0) left = 0; // Если дропдаун шире контейнера, прижимаем к левому краю
}
// Убедимся, что дропдаун не выходит за границы контейнера слева
if (left < 0) {
left = 0;
}
this.dropdown.style.top = `${top}px`;
this.dropdown.style.left = `${left}px`;
// Устанавливаем ширину дропдауна равной ширине inputElement, если он больше
// Это предотвратит слишком узкий дропдаун, если имя файла короткое
this.dropdown.style.minWidth = `${inputRect.width / 2}px`; // Минимум половина ширины инпута
this.dropdown.style.width = 'auto'; // Позволяем контенту определить ширину, но не меньше minWidth
}
/** /**
* Перемещает выделение в списке * Перемещает выделение в списке