Fix model selection dropdown

This commit is contained in:
dimitrievgs 2025-09-28 23:34:54 +03:00
parent 29cddbcb57
commit 23b4ca4571

View File

@ -4,7 +4,6 @@
*/
import { ChatHistoryItem } from './models/ChatHistoryItem';
import { AutocompleteManager } from '../references/AutocompleteManager';
import { ReferenceAutocomplete } from '../references/ReferenceAutocomplete';
import { ReferenceExpander } from '../references/ReferenceExpander';
@ -81,30 +80,35 @@ export class ChatPanel {
// Показываем дропдаун, чтобы получить его размеры и положение
this.modelDropdown.style.display = 'block';
const modelSelectButtonRect = this.modelSelectButton.getBoundingClientRect();
const modelDropdownRect = this.modelDropdown.getBoundingClientRect();
const chatPanelRect = this.container.getBoundingClientRect(); // Общие границы чат-панели
const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
const container = this.modelSelectButton.closest('.chat-input-container') as HTMLElement;
// ----------------------------------------------- Секция логики позиционирования дропдауна ----------------------------------------------------
// Позиция относительно контейнера chatPanel (или inputElement)
let top = modelSelectButtonRect.bottom - chatPanelRect.top + 4; // Отступ 4px от кнопки
let left = modelSelectButtonRect.left - chatPanelRect.left;
const modelSelectButtonRect = this.modelSelectButton.getBoundingClientRect();
const containerRect = container.getBoundingClientRect(); // Общие границы чат-панели
const dropdownRect = this.modelDropdown.getBoundingClientRect();
const viewportHeight = window.innerHeight;
// Позиция относительно контейнера chatPanel
// Левый край дропдауна совпадает с левым краем кнопки выбора модели
let left = modelSelectButtonRect.left - containerRect.left - 5;
// Дефолтное положение - под кнопкой
let top = modelSelectButtonRect.height;
// Проверяем, помещается ли dropdown снизу
const spaceBelow = viewportHeight - modelSelectButtonRect.bottom;
const spaceAbove = modelSelectButtonRect.top;
if (spaceBelow < modelDropdownRect.height + 10 && spaceAbove > modelDropdownRect.height + 10) {
if (spaceBelow < dropdownRect.height + 10 && spaceAbove > dropdownRect.height + 10) {
// Если снизу мало места и сверху достаточно, размещаем сверху
top = modelSelectButtonRect.top - chatPanelRect.top - modelDropdownRect.height - 4; // Отступ 4px от кнопки
top = - dropdownRect.height;
}
// Убедимся, что дропдаун не выходит за границы контейнера справа
const maxRight = chatPanelRect.width;
if (left + modelDropdownRect.width > maxRight) {
left = maxRight - modelDropdownRect.width;
const maxRight = containerRect.right - containerRect.left;
if (left + dropdownRect.width > maxRight) {
left = maxRight - dropdownRect.width - 5;
}
// Убедимся, что дропдаун не выходит за границы контейнера слева
if (left < 0) {
left = 0;
@ -113,7 +117,11 @@ export class ChatPanel {
this.modelDropdown.style.top = `${top}px`;
this.modelDropdown.style.left = `${left}px`;
this.modelDropdown.style.right = 'auto'; // Сброс right, чтобы left работал корректно
// ----------------------------------------------- End of Секция логики позиционирования дропдауна ---------------------------------------------
// ДОБАВЛЕНО: Устанавливаем минимальную ширину дропдауна, равную ширине кнопки
let minWidth = Math.min(containerRect.width / 2, dropdownRect.width);
this.modelDropdown.style.minWidth = `${minWidth}px`;
this.modelDropdown.style.width = 'auto'; // Позволяем контенту определить ширину, но не меньше minWidth
}
updateModelDropdown(): void {
@ -462,7 +470,7 @@ export class ChatPanel {
const { startNode, startOffset, endNode, endOffset } = this.findNodesAndOffsetsForMatch(match);
if (!startNode || !endNode) {
console.error("Не удалось найти узлы для замены ссылки", match);
console.error('Не удалось найти узлы для замены ссылки', match);
this.isProcessingReference = false;
return;
}
@ -492,10 +500,10 @@ export class ChatPanel {
* @returns Объект с startNode, startOffset, endNode, endOffset.
*/
private findNodesAndOffsetsForMatch(match: ReferenceMatch): {
startNode: Node | null,
startOffset: number,
endNode: Node | null,
endOffset: number
startNode: Node | null;
startOffset: number;
endNode: Node | null;
endOffset: number;
} {
let startNode: Node | null = null;
let startOffset = 0;
@ -531,7 +539,6 @@ export class ChatPanel {
break;
}
currentLength += nodeTextLength;
}
@ -543,7 +550,6 @@ export class ChatPanel {
}
}
return { startNode, startOffset, endNode, endOffset };
}
@ -591,7 +597,6 @@ export class ChatPanel {
selection.addRange(range);
}
/**
* Заменяет текст на HTML элемент
*/
@ -624,7 +629,7 @@ export class ChatPanel {
}
if (!nodeBeforeMatch) {
console.warn("Не удалось найти текстовый узел для начала замены.");
console.warn('Не удалось найти текстовый узел для начала замены.');
return;
}
@ -652,7 +657,6 @@ export class ChatPanel {
deleteRange.setEnd(currentNode || nodeBeforeMatch, currentOffset);
deleteRange.deleteContents();
// Вставляем новый элемент на место удаленного текста
deleteRange.insertNode(element);
@ -778,9 +782,7 @@ export class ChatPanel {
} else if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).classList.contains('reference-box')) {
const reference = ReferenceBox.extractReference(node as HTMLElement);
if (reference) {
const prefix = reference.permanent
? reference.type === 'file' ? '@@' : '##'
: reference.type === 'file' ? '@' : '#';
const prefix = reference.permanent ? (reference.type === 'file' ? '@@' : '##') : reference.type === 'file' ? '@' : '#';
result += prefix + reference.name;
}
} else if (node.nodeType === Node.ELEMENT_NODE) {