@sequent-org/moodboard 1.4.31 → 1.4.33

package/src/ui/chat/ChatComposer.js

@@ -13,7 +13,7 @@ const CLOSE_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12
 
 export class ChatComposer {
     /**
-     * @param {{ textarea: HTMLTextAreaElement, send: HTMLButtonElement, attach: HTMLButtonElement, fileInput: HTMLInputElement, attachmentsPreview: HTMLElement, enhancePrompt?: HTMLButtonElement, statusBar?: HTMLElement }} refs
+     * @param {{ textarea: HTMLTextAreaElement, send: HTMLButtonElement, attach: HTMLButtonElement, fileInput: HTMLInputElement, attachmentsPreview: HTMLElement, statusBar?: HTMLElement }} refs
      * @param {{ onSubmit: (text: string, attachments: File[]) => void, onAbort: () => void }} handlers
      */
     constructor(refs, handlers) {
@@ -22,11 +22,15 @@ export class ChatComposer {
         this._attach = refs.attach ?? null;
         this._fileInput = refs.fileInput ?? null;
         this._attachmentsPreview = refs.attachmentsPreview ?? null;
-        this._enhancePrompt = refs.enhancePrompt ?? null;
         this._statusBar = refs.statusBar ?? null;
         this._handlers = handlers;
         this._listeners = [];
-        /** @type {File[]} */
+        /**
+         * Внутреннее хранилище вложений. `sourceObjectId` нужен для дедупа
+         * reference-картинок, которые приходят из box-select / клика по объекту:
+         * один объект на доске = одно превью в композере.
+         * @type {{ file: File, sourceObjectId: string|null }[]}
+         */
         this._attachments = [];
     }
 
@@ -77,13 +81,54 @@ export class ChatComposer {
         this._textarea.focus();
     }
 
-    addAttachment(file) {
+    /**
+     * @param {File} file
+     * @param {{ sourceObjectId?: string|null }} [options] — `sourceObjectId`
+     *   передаётся для reference-картинок с доски; дубликаты по этому id игнорируются.
+     */
+    addAttachment(file, options = {}) {
         if (!file) return;
-        this._attachments.push(file);
+        const sourceObjectId = options?.sourceObjectId ?? null;
+        if (sourceObjectId && this._attachments.some((entry) => entry.sourceObjectId === sourceObjectId)) {
+            return;
+        }
+        this._attachments.push({ file, sourceObjectId });
         this._renderAttachmentsPreview();
         this._refreshSendState();
     }
 
+    hasAttachmentForObject(sourceObjectId) {
+        if (!sourceObjectId) return false;
+        return this._attachments.some((entry) => entry.sourceObjectId === sourceObjectId);
+    }
+
+    /**
+     * Удаляет превью конкретного объекта доски. Вызывается при снятии фокуса с изображения.
+     * @param {string} sourceObjectId
+     */
+    removeAttachmentForObject(sourceObjectId) {
+        if (!sourceObjectId) return;
+        const before = this._attachments.length;
+        this._attachments = this._attachments.filter((entry) => entry.sourceObjectId !== sourceObjectId);
+        if (this._attachments.length !== before) {
+            this._renderAttachmentsPreview();
+            this._refreshSendState();
+        }
+    }
+
+    /**
+     * Удаляет все превью, добавленные с доски (sourceObjectId !== null).
+     * Файловые вложения (скрепка) не затрагиваются.
+     */
+    removeAllBoardAttachments() {
+        const before = this._attachments.length;
+        this._attachments = this._attachments.filter((entry) => entry.sourceObjectId === null);
+        if (this._attachments.length !== before) {
+            this._renderAttachmentsPreview();
+            this._refreshSendState();
+        }
+    }
+
     destroy() {
         for (const off of this._listeners) off();
         this._listeners = [];
@@ -96,7 +141,12 @@ export class ChatComposer {
         const hasAttachments = this._attachments.length > 0;
         if (!trimmed && !hasAttachments) return;
         if (this._send.dataset.state === 'streaming') return;
-        const attachments = [...this._attachments];
+        const attachments = this._attachments.map((entry) => entry.file);
+        this._textarea.value = '';
+        this._attachments = [];
+        this._resizeTextarea();
+        if (this._attachmentsPreview) this._renderAttachmentsPreview();
+        this._refreshSendState();
         this._handlers.onSubmit?.(trimmed, attachments);
     }
 
@@ -105,16 +155,13 @@ export class ChatComposer {
         const hasAttachments = this._attachments.length > 0;
         this._send.dataset.state = (hasText || hasAttachments) ? 'ready' : 'idle';
         this._send.disabled = false;
-        if (this._enhancePrompt) {
-            this._enhancePrompt.dataset.empty = hasText ? 'false' : 'true';
-        }
     }
 
     _handleFileChange() {
         const files = Array.from(this._fileInput.files || []);
         if (!files.length) return;
         for (const file of files) {
-            this._attachments.push(file);
+            this._attachments.push({ file, sourceObjectId: null });
         }
         this._fileInput.value = '';
         this._renderAttachmentsPreview();
@@ -138,8 +185,8 @@ export class ChatComposer {
         inputRow?.classList.add('has-attachments');
         this._textarea.placeholder = 'Опишите правку, изменение или стилевое направление эталонного изображения';
         for (let i = 0; i < this._attachments.length; i++) {
-            const file = this._attachments[i];
-            const item = this._buildAttachmentItem(file, i);
+            const entry = this._attachments[i];
+            const item = this._buildAttachmentItem(entry.file, i);
             container.appendChild(item);
         }
     }

package/src/ui/chat/ChatExtendedPromptModal.js

@@ -36,11 +36,6 @@ export class ChatExtendedPromptModal {
             this._sourceTextarea.value = '';
             this._sourceTextarea.dispatchEvent(new Event('input', { bubbles: true }));
         });
-
-        this._on(this._refs.enhanceBtn, 'click', () => {
-            const originalEnhance = this._sourceTextarea.parentElement?.querySelector('.moodboard-chat__input-icon-btn--enhance-prompt');
-            if (originalEnhance) originalEnhance.click();
-        });
     }
 
     show() {
@@ -111,13 +106,7 @@ export class ChatExtendedPromptModal {
         clearBtn.className = 'moodboard-chat__extended-clear';
         clearBtn.textContent = 'Очистить';
 
-        const enhanceBtn = document.createElement('button');
-        enhanceBtn.type = 'button';
-        enhanceBtn.className = 'moodboard-chat__extended-enhance';
-        enhanceBtn.innerHTML = `<span class="moodboard-chat__extended-enhance-icon">${ICONS.enhancePrompt}</span> Улучшить`;
-
         actions.appendChild(clearBtn);
-        actions.appendChild(enhanceBtn);
 
         body.appendChild(textarea);
         body.appendChild(actions);
@@ -126,6 +115,6 @@ export class ChatExtendedPromptModal {
         modal.appendChild(body);
         overlay.appendChild(modal);
 
-        return { overlay, modal, header, title, closeBtn, body, textarea, clearBtn, enhanceBtn };
+        return { overlay, modal, header, title, closeBtn, body, textarea, clearBtn };
     }
 }

package/src/ui/chat/ChatWindow.js

@@ -60,7 +60,6 @@ const BOARD_IMAGE_REARRANGE_MS = 520;
 const BOARD_IMAGE_PENDING_ENTER_FACTOR = 1.6;
 // Каскад между блоками одного батча (мс): пользователь видит, что они приезжают друг за другом.
 const BOARD_IMAGE_PENDING_STAGGER_MS = 90;
-const REFERENCE_DRAG_PREVIEW_SIZE = 96;
 
 const MODEL_OPTIONS = [
     {
@@ -145,12 +144,12 @@ export class ChatWindow {
         this._pendingOverlays = new Map();
         this._pendingOverlayTimers = new Map();
         this._boardImageShiftAnimations = new Map();
-        this._boardCursor = null;
-        this._draggedReferenceObject = null;
-        this._draggedReferenceStartPosition = null;
-        this._referenceDragPreview = null;
-        this._referenceDragHandlers = null;
         this._clearSelectionOnSendClick = null;
+        this._selectionHandlers = null;
+        // Окно от BoxSelectStart до BoxSelectCommit: в это время SelectionAdd
+        // приходит на каждый mousemove и не должен пушить превью в чат —
+        // финальный набор картинок мы получим из BoxSelectCommit по strict-contains.
+        this._boxSelectActive = false;
     }
 
     attach() {
@@ -167,7 +166,6 @@ export class ChatWindow {
                 attach: this._refs.attach,
                 fileInput: this._refs.fileInput,
                 attachmentsPreview: this._refs.attachmentsPreview,
-                enhancePrompt: this._refs.enhancePrompt,
                 statusBar: this._refs.statusBar
             },
             {
@@ -181,7 +179,7 @@ export class ChatWindow {
         this._clearSelectionOnSendClick = () => this._clearBoardSelection();
         this._refs.send.addEventListener('click', this._clearSelectionOnSendClick);
         this._composer.attach();
-        this._attachReferenceDragEvents();
+        this._attachSelectionEvents();
 
         this._extendedPromptModal = new ChatExtendedPromptModal(
             this._container,
@@ -264,13 +262,12 @@ export class ChatWindow {
         if (!this._attached) return;
         this._clearPendingOverlays();
         this._cancelBoardImageShiftAnimations();
-        this._clearReferenceDragState();
         if (this._unsubscribe) { this._unsubscribe(); this._unsubscribe = null; }
         if (this._clearSelectionOnSendClick && this._refs?.send) {
             this._refs.send.removeEventListener('click', this._clearSelectionOnSendClick);
             this._clearSelectionOnSendClick = null;
         }
-        this._detachReferenceDragEvents();
+        this._detachSelectionEvents();
         this._shiftedForImageBatchKeys.clear();
         this._boardImageShiftHistory.clear();
         this._composer?.destroy();
@@ -466,175 +463,94 @@ export class ChatWindow {
         };
     }
 
-    _attachReferenceDragEvents() {
+    _attachSelectionEvents() {
         const eventBus = this._boardCore?.eventBus;
-        if (!eventBus || typeof eventBus.on !== 'function' || this._referenceDragHandlers) return;
+        if (!eventBus || typeof eventBus.on !== 'function' || this._selectionHandlers) return;
 
-        const onCursorMove = ({ x, y } = {}) => {
-            if (Number.isFinite(x) && Number.isFinite(y)) {
-                this._boardCursor = { x, y };
-                this._updateReferenceDragPreview();
-            }
+        const onSelectionAdd = (data) => {
+            void this._handleSelectionAdd(data);
         };
-        const onDragStart = (data) => {
-            this._handleReferenceDragStart(data);
+        const onSelectionRemove = (data) => {
+            const objectId = data?.object;
+            if (objectId) this._composer?.removeAttachmentForObject?.(objectId);
         };
-        const onDragEnd = (data) => {
-            void this._handleReferenceDragEnd(data);
+        const onSelectionClear = () => {
+            this._composer?.removeAllBoardAttachments?.();
         };
-        const onSelectionAdd = (data) => {
-            void this._handleSelectionAdd(data);
+        const onBoxSelectStart = () => {
+            this._boxSelectActive = true;
+        };
+        const onBoxSelectCommit = (data) => {
+            void this._handleBoxSelectCommit(data);
         };
 
-        this._referenceDragHandlers = { onCursorMove, onDragStart, onDragEnd, onSelectionAdd };
-        eventBus.on(Events.UI.CursorMove, onCursorMove);
-        eventBus.on(Events.Tool.DragStart, onDragStart);
-        eventBus.on(Events.Tool.DragEnd, onDragEnd);
+        this._selectionHandlers = {
+            onSelectionAdd,
+            onSelectionRemove,
+            onSelectionClear,
+            onBoxSelectStart,
+            onBoxSelectCommit
+        };
         eventBus.on(Events.Tool.SelectionAdd, onSelectionAdd);
+        eventBus.on(Events.Tool.SelectionRemove, onSelectionRemove);
+        eventBus.on(Events.Tool.SelectionClear, onSelectionClear);
+        eventBus.on(Events.Tool.BoxSelectStart, onBoxSelectStart);
+        eventBus.on(Events.Tool.BoxSelectCommit, onBoxSelectCommit);
     }
 
-    _detachReferenceDragEvents() {
+    _detachSelectionEvents() {
         const eventBus = this._boardCore?.eventBus;
-        const handlers = this._referenceDragHandlers;
+        const handlers = this._selectionHandlers;
         if (!eventBus || typeof eventBus.off !== 'function' || !handlers) return;
 
-        eventBus.off(Events.UI.CursorMove, handlers.onCursorMove);
-        eventBus.off(Events.Tool.DragStart, handlers.onDragStart);
-        eventBus.off(Events.Tool.DragEnd, handlers.onDragEnd);
         eventBus.off(Events.Tool.SelectionAdd, handlers.onSelectionAdd);
-        this._referenceDragHandlers = null;
+        eventBus.off(Events.Tool.SelectionRemove, handlers.onSelectionRemove);
+        eventBus.off(Events.Tool.SelectionClear, handlers.onSelectionClear);
+        eventBus.off(Events.Tool.BoxSelectStart, handlers.onBoxSelectStart);
+        eventBus.off(Events.Tool.BoxSelectCommit, handlers.onBoxSelectCommit);
+        this._selectionHandlers = null;
+        this._boxSelectActive = false;
     }
 
     async _handleSelectionAdd(data = {}) {
-        const objectId = data?.object;
-        const object = this._boardCore?.state?.state?.objects?.find((item) => item?.id === objectId);
-        
-        if (!isReferenceImageObject(object)) return;
-
-        await this._addImageObjectAsReference(object);
-    }
+        // Во время box-select каждый mousemove перевыставляет selection и снова
+        // эмитит SelectionAdd для тех же id. Финальный набор reference-картинок
+        // мы получим из BoxSelectCommit по strict-contains, поэтому здесь молчим.
+        if (this._boxSelectActive) return;
 
-    _handleReferenceDragStart(data = {}) {
         const objectId = data?.object;
         const object = this._boardCore?.state?.state?.objects?.find((item) => item?.id === objectId);
-        this._draggedReferenceObject = isReferenceImageObject(object) ? object : null;
-        this._draggedReferenceStartPosition = this._draggedReferenceObject?.position
-            ? { ...this._draggedReferenceObject.position }
-            : null;
-        this._updateReferenceDragPreview();
-    }
 
-    async _handleReferenceDragEnd(data = {}) {
-        const isDropTarget = this._isBoardCursorOverInput();
-        const objectId = data?.object;
-        const object = this._boardCore?.state?.state?.objects?.find((item) => item?.id === objectId);
-        const startPosition = this._draggedReferenceStartPosition;
-        this._clearReferenceDragState();
-        if (!isDropTarget || !isReferenceImageObject(object)) return null;
+        if (!isReferenceImageObject(object)) return;
 
-        this._restoreReferenceObjectPosition(objectId, startPosition);
         await this._addImageObjectAsReference(object);
     }
 
-    _restoreReferenceObjectPosition(objectId, position) {
-        if (!objectId || !position) return;
-
-        const updatePosition = this._boardCore?.updateObjectPositionDirect;
-        if (typeof updatePosition === 'function') {
-            updatePosition.call(this._boardCore, objectId, position, { snap: false });
-            return;
-        }
-
-        const object = this._boardCore?.state?.state?.objects?.find((item) => item?.id === objectId);
-        if (object?.position) {
-            object.position = { ...position };
-        }
-    }
+    async _handleBoxSelectCommit(data = {}) {
+        this._boxSelectActive = false;
+        const ids = Array.isArray(data?.selected) ? data.selected : (Array.isArray(data?.objects) ? data.objects : []);
+        if (!ids.length || !this._composer) return;
 
-    _updateReferenceDragPreview() {
-        const object = this._draggedReferenceObject;
-        if (!object || !this._isBoardCursorOverInput()) {
-            this._hideReferenceDragPreview();
-            return;
-        }
-
-        const src = getImageObjectSource(object);
-        if (!src) {
-            this._hideReferenceDragPreview();
-            return;
-        }
-
-        const preview = this._ensureReferenceDragPreview(object, src);
-        const { clientX, clientY } = this._getBoardCursorClientPosition();
-        preview.style.left = `${Math.round(clientX)}px`;
-        preview.style.top = `${Math.round(clientY)}px`;
-        this._refs?.textarea?.closest?.('.moodboard-chat__input-row')?.classList.add('is-reference-drop-target');
-    }
-
-    _ensureReferenceDragPreview(object, src) {
-        if (!this._referenceDragPreview) {
-            const preview = document.createElement('img');
-            preview.className = 'moodboard-chat__reference-drag-preview';
-            preview.alt = getImageObjectFileName(object, src);
-            preview.width = REFERENCE_DRAG_PREVIEW_SIZE;
-            preview.height = REFERENCE_DRAG_PREVIEW_SIZE;
-            document.body.appendChild(preview);
-            this._referenceDragPreview = preview;
-        }
-
-        if (this._referenceDragPreview.src !== src) {
-            this._referenceDragPreview.src = src;
+        const all = this._boardCore?.state?.state?.objects ?? [];
+        const byId = new Map(all.map((item) => [item?.id, item]));
+        const seen = new Set();
+        for (const id of ids) {
+            if (!id || seen.has(id)) continue;
+            seen.add(id);
+            const obj = byId.get(id);
+            if (!obj || !isReferenceImageObject(obj)) continue;
+            await this._addImageObjectAsReference(obj);
         }
-        this._referenceDragPreview.alt = getImageObjectFileName(object, src);
-
-        return this._referenceDragPreview;
-    }
-
-    _hideReferenceDragPreview() {
-        this._referenceDragPreview?.remove();
-        this._referenceDragPreview = null;
-        this._refs?.textarea?.closest?.('.moodboard-chat__input-row')?.classList.remove('is-reference-drop-target');
-    }
-
-    _clearReferenceDragState() {
-        this._draggedReferenceObject = null;
-        this._draggedReferenceStartPosition = null;
-        this._boardCursor = null;
-        this._hideReferenceDragPreview();
-    }
-
-    _isBoardCursorOverInput() {
-        const cursor = this._boardCursor;
-        const inputRow = this._refs?.textarea?.closest?.('.moodboard-chat__input-row');
-        if (!cursor || !inputRow) return false;
-
-        const containerRect = this._container.getBoundingClientRect?.();
-        const rect = inputRow.getBoundingClientRect();
-        const { clientX, clientY } = this._getBoardCursorClientPosition(containerRect);
-
-        return clientX >= rect.left
-            && clientX <= rect.right
-            && clientY >= rect.top
-            && clientY <= rect.bottom;
-    }
-
-    _getBoardCursorClientPosition(containerRect = null) {
-        const rect = containerRect || this._container.getBoundingClientRect?.();
-        const cursor = this._boardCursor || { x: 0, y: 0 };
-
-        return {
-            clientX: (rect?.left || 0) + cursor.x,
-            clientY: (rect?.top || 0) + cursor.y
-        };
     }
 
     async _addImageObjectAsReference(object) {
         if (!object || !this._composer) return;
+        if (this._composer.hasAttachmentForObject?.(object.id)) return;
 
         try {
             const file = await createFileFromImageObject(object);
             if (!file) return;
-            this._composer.addAttachment(file);
+            this._composer.addAttachment(file, { sourceObjectId: object.id });
             this._composer.focus();
         } catch (err) {
             console.warn('[ChatWindow] cannot add selected image reference:', err);

package/src/ui/chat/ChatWindowRenderer.js

@@ -67,26 +67,19 @@ function buildInputRow(collect) {
     const promptActionsWrapper = document.createElement('div');
     promptActionsWrapper.className = 'moodboard-chat__pill-wrapper';
 
-    const enhancePrompt = createInputIconButton(
-        'enhance-prompt',
-        'Улучшить промпт',
-        ICONS.enhancePrompt
-    );
-    enhancePrompt.dataset.empty = 'true';
     const extendPromptField = createInputIconButton(
         'extend-promt-field',
         'Развернуть поле ввода',
         ICONS.extendPromptField
     );
 
-    promptActionsWrapper.appendChild(enhancePrompt);
     promptActionsWrapper.appendChild(extendPromptField);
     textareaRow.appendChild(textarea);
     textareaRow.appendChild(promptActionsWrapper);
     row.appendChild(attachmentsPreview);
     row.appendChild(textareaRow);
 
-    collect({ textarea, enhancePrompt, extendPromptField, attachmentsPreview });
+    collect({ textarea, extendPromptField, attachmentsPreview });
     return row;
 }
 

package/src/ui/chat/icons.js

@@ -39,9 +39,6 @@ const ATTACHMENTS_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" hei
 /** Кнопка отправки в composer */
 const SEND_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M7.453 1.204a.87.87 0 0 1 1.093 0l.066.06 4.962 4.961a.6.6 0 0 1-.849.849L8.6 2.949v11.45a.6.6 0 0 1-1.199 0V2.946L3.273 7.074a.6.6 0 1 1-.847-.849l4.96-4.962z"/></svg>`;
 
-/** public/icons/enhance-prompt.svg */
-const ENHANCE_PROMPT_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M8 11.771a.6.6 0 1 1 0 1.2L1.6 13a.6.6 0 0 1 0-1.2zm2-4.37A.6.6 0 1 1 10 8.6H1.6a.6.6 0 1 1 0-1.2zM14.4 3a.6.6 0 1 1 0 1.2H1.6a.6.6 0 1 1 0-1.2zm-1.101 5.5a.346.346 0 0 0-.643 0l-.174.417a2.98 2.98 0 0 1-1.538 1.59l-.489.218a.362.362 0 0 0 0 .658l.519.231c.675.3 1.216.85 1.516 1.538l.168.387a.347.347 0 0 0 .639 0l.168-.387c.3-.689.841-1.237 1.516-1.538l.519-.231a.362.362 0 0 0 0-.658l-.49-.218a3 3 0 0 1-1.538-1.59z"/></svg>`;
-
 /** public/icons/extend-promt-field.svg */
 const EXTEND_PROMPT_FIELD_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M9.696 7.151a.599.599 0 1 1-.847-.847L12.55 2.6H9.272a.6.6 0 0 1 0-1.2H14a.6.6 0 0 1 .6.599v4.728a.6.6 0 1 1-1.2 0V3.449zM1.4 9.272a.6.6 0 1 1 1.2 0v3.28l3.704-3.703a.599.599 0 1 1 .847.847L3.45 13.4h3.279a.6.6 0 0 1 0 1.2H2A.6.6 0 0 1 1.4 14z"/></svg>`;
 
@@ -69,7 +66,6 @@ export const ICONS = {
     palette: svg('<path d="M12 3a9 9 0 0 0 0 18c1.7 0 2-1 2-2 0-1.5 1-2 2-2h2a3 3 0 0 0 3-3c0-5-4-9-9-9z"/><circle cx="7.5" cy="11" r="1"/><circle cx="11" cy="7" r="1"/><circle cx="15" cy="7" r="1"/><circle cx="17.5" cy="11" r="1"/>'),
     attach: ATTACHMENTS_ICON,
     send: SEND_ICON,
-    enhancePrompt: ENHANCE_PROMPT_ICON,
     extendPromptField: EXTEND_PROMPT_FIELD_ICON,
     sliders: svg('<path d="M4 7h10M18 7h2M4 17h2M10 17h10"/><circle cx="16" cy="7" r="2"/><circle cx="8" cy="17" r="2"/>'),
     chevronDown: svg('<path d="M6 9l6 6 6-6"/>'),