@sequent-org/moodboard 1.4.27 → 1.4.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequent-org/moodboard",
-  "version": "1.4.27",
+  "version": "1.4.29",
   "type": "module",
   "description": "Interactive moodboard",
   "main": "./src/index.js",

package/src/services/ai/AiClient.js

@@ -1,17 +1,21 @@
 /**
- * Тонкий HTTP-клиент к /api/ai.
+ * Тонкий HTTP-клиент к /api/v2/ai.
+ *
+ * Одна ответственность: общение с backend-эндпоинтами AI.
+ * В dev-режиме за same-origin стоит Node-заглушка (server/), в проде —
+ * Laravel-пакет futurello/moodboard (контроллер AiController).
+ * Контракт payload и SSE-формат у них одинаковый.
  *
- * Одна ответственность: общение с прокси-сервером (server/).
  * Не знает ни про UI, ни про localStorage. Возвращает обычные данные
  * и async generator для стриминга.
  */
 
-const DEFAULT_BASE_URL = '/api/ai';
+const DEFAULT_BASE_URL = '/api/v2/ai';
 
 export class AiClient {
     /**
      * @param {object} options
-     * @param {string} [options.baseUrl='/api/ai']
+     * @param {string} [options.baseUrl='/api/v2/ai']
      * @param {typeof fetch} [options.fetchImpl]
      */
     constructor(options = {}) {

package/src/services/ai/ChatSessionController.js

@@ -43,7 +43,7 @@ export class ChatSessionController {
         this._abort = null;
 
         this._state = {
-            messages: this._history.load(),
+            messages: this._history.load().map((m) => (m.pending ? { ...m, pending: false, error: m.error || 'Прервано' } : m)),
             providerId: 'yandex-art',
             presetId: DEFAULT_PRESET_ID,
             settings: this._loadSettings(),
@@ -112,18 +112,23 @@ export class ChatSessionController {
     /**
      * Отправляет user-сообщение и создаёт изображение через YandexART.
      * @param {string} text
-     * @param {{widthRatio?: number, heightRatio?: number, model?: string}} [options]
+     * @param {{widthRatio?: number, heightRatio?: number, model?: string, imageCount?: number}} [options]
      */
     async send(text, options = {}) {
         const trimmed = (text || '').trim();
         if (!trimmed || this._state.status === 'streaming') return;
 
+        const imageCount = normalizeImageCount(options.imageCount);
         const userMsg = makeMessage('user', trimmed);
-        const assistantMsg = makeMessage('assistant', '', { provider: 'yandex-art', pending: true, kind: 'image' });
+        const assistantMsgs = Array.from({ length: imageCount }, (_, index) => makeMessage(
+            'assistant',
+            imageCount > 1 ? `Генерируется изображение ${index + 1} из ${imageCount}…` : '',
+            { provider: 'yandex-art', pending: true, kind: 'image' }
+        ));
 
         this._state = {
             ...this._state,
-            messages: [...this._state.messages, userMsg, assistantMsg],
+            messages: [...this._state.messages, userMsg, ...assistantMsgs],
             status: 'streaming',
             error: null
         };
@@ -132,31 +137,54 @@ export class ChatSessionController {
 
         const abort = new AbortController();
         this._abort = abort;
+        let lastError = null;
 
         try {
-            const result = await this._client.generateImage({
-                prompt: trimmed,
-                widthRatio: options.widthRatio,
-                heightRatio: options.heightRatio,
-                model: options.model,
-                signal: abort.signal
-            });
-
-            this._finalizeAssistant(assistantMsg.id, {
-                error: null,
-                imageBase64: result.imageBase64,
-                mimeType: result.mimeType,
-                operationId: result.operationId
-            });
-        } catch (err) {
-            const message = err?.name === 'AbortError' ? 'Отменено' : (err?.message || 'Ошибка запроса');
-            this._finalizeAssistant(assistantMsg.id, { error: message });
+            await Promise.all(
+                assistantMsgs.map((assistantMsg, index) => {
+                    if (abort.signal.aborted) {
+                        lastError = 'Отменено';
+                        this._updateAssistant(assistantMsg.id, { error: lastError });
+                        return Promise.resolve();
+                    }
+
+                    return this._client
+                        .generateImage({
+                            prompt: trimmed,
+                            widthRatio: options.widthRatio,
+                            heightRatio: options.heightRatio,
+                            model: options.model,
+                            signal: abort.signal
+                        })
+                        .then((result) => {
+                            this._updateAssistant(assistantMsg.id, {
+                                error: null,
+                                imageBase64: result.imageBase64,
+                                mimeType: result.mimeType,
+                                operationId: result.operationId,
+                                content: imageCount > 1 ? `Изображение ${index + 1} из ${imageCount} добавлено на доску.` : ''
+                            });
+                        })
+                        .catch((err) => {
+                            const msg = err?.name === 'AbortError' ? 'Отменено' : (err?.message || 'Ошибка запроса');
+                            lastError = msg;
+                            this._updateAssistant(assistantMsg.id, { error: msg });
+                        });
+                })
+            );
         } finally {
             this._abort = null;
+            this._state = {
+                ...this._state,
+                status: lastError ? 'error' : 'idle',
+                error: lastError
+            };
+            this._history.save(this._state.messages);
+            this._emit();
         }
     }
 
-    _finalizeAssistant(id, { error, imageBase64, mimeType, operationId }) {
+    _updateAssistant(id, { error, imageBase64, mimeType, operationId, content }) {
         const messages = this._state.messages.map((m) =>
             m.id === id
                 ? {
@@ -165,15 +193,14 @@ export class ChatSessionController {
                     error: error || undefined,
                     imageBase64: imageBase64 || m.imageBase64,
                     mimeType: mimeType || m.mimeType,
-                    operationId: operationId || m.operationId
+                    operationId: operationId || m.operationId,
+                    content: content ?? m.content
                 }
                 : m
         );
         this._state = {
             ...this._state,
-            messages,
-            status: error ? 'error' : 'idle',
-            error: error || null
+            messages
         };
         this._history.save(messages);
         this._emit();
@@ -218,3 +245,12 @@ function makeMessage(role, content, extra = {}) {
         ...extra
     };
 }
+
+function normalizeImageCount(value) {
+    const count = Number.parseInt(value, 10);
+    if (!Number.isFinite(count)) {
+        return 1;
+    }
+
+    return Math.min(Math.max(count, 1), 4);
+}

package/src/ui/chat/ChatWindow.js

@@ -132,6 +132,9 @@ export class ChatWindow {
         // Упорядоченный список ID объектов на доске, размещённых через AI-генерацию.
         // Используется для сдвига предыдущих изображений влево при новой генерации.
         this._boardAiImageIds = [];
+        this._shiftedForPendingMessageIds = new Set();
+        this._pendingShiftCount = 0;
+        this._pendingOverlayEls = [];
         this._onBoardObjectCreated = (data) => {
             if (data?.objectData?.properties?.name === 'ai-generated.jpg') {
                 this._boardAiImageIds.push(data.objectId);
@@ -244,9 +247,12 @@ export class ChatWindow {
 
     detach() {
         if (!this._attached) return;
+        this._clearPendingOverlays();
         if (this._unsubscribe) { this._unsubscribe(); this._unsubscribe = null; }
         this._boardCore?.eventBus?.off?.(Events.Object.Created, this._onBoardObjectCreated);
         this._boardAiImageIds = [];
+        this._shiftedForPendingMessageIds.clear();
+        this._pendingShiftCount = 0;
         this._composer?.destroy();
         this._extendedPromptModal?.destroy();
         this._contentTypeMenu?.destroy();
@@ -312,6 +318,83 @@ export class ChatWindow {
         this._countMenu.refresh();
         this._updateCountPillIcon();
         this._composer.setStreaming(state.status === 'streaming');
+        this._updatePendingImages(state.status === 'streaming' ? state.messages : []);
+    }
+
+    _updatePendingImages(messages) {
+        this._clearPendingOverlays();
+
+        const pending = (messages || []).filter((m) => m.pending && m.kind === 'image');
+        if (pending.length === 0) return;
+
+        const world = this._boardCore?.pixi?.worldLayer || this._boardCore?.pixi?.app?.stage;
+        const s = world?.scale?.x || 1;
+
+        let newPendingCount = 0;
+        for (const p of pending) {
+            if (!this._shiftedForPendingMessageIds.has(p.id)) {
+                this._shiftedForPendingMessageIds.add(p.id);
+                newPendingCount++;
+                this._pendingShiftCount++;
+            }
+        }
+
+        // Сдвигаем все ранее размещённые AI-изображения влево сразу при появлении блока загрузки,
+        // чтобы блок не перекрывал их. 320 - ширина блока + отступ в мировых координатах.
+        if (newPendingCount > 0 && this._boardAiImageIds.length > 0) {
+            const worldShift = Math.round(320 * newPendingCount);
+            const objects = this._boardCore?.state?.state?.objects;
+            for (const id of this._boardAiImageIds) {
+                const obj = objects?.find((o) => o.id === id);
+                if (obj?.position) {
+                    this._boardCore.updateObjectPositionDirect?.(
+                        id,
+                        { x: Math.round(obj.position.x - worldShift), y: obj.position.y },
+                        { snap: false }
+                    );
+                }
+            }
+        }
+
+        const chatRect = this._refs?.root?.getBoundingClientRect?.();
+        const composerRect = this._refs?.composer?.getBoundingClientRect?.();
+        const cx = chatRect
+            ? Math.round(chatRect.left + chatRect.width / 2)
+            : 400;
+        const cy = composerRect
+            ? Math.round(composerRect.top - 250)
+            : 200;
+
+        const [wr, hr] = parseFormatRatio(this._formatId);
+        const ratio = wr / hr;
+        const wScreen = Math.round(300 * s);
+        const hScreen = Math.round(wScreen / ratio);
+
+        for (let i = 0; i < pending.length; i++) {
+            // Более новые генерации появляются правее. i=0 — самая старая, должна быть левее.
+            const shiftX = (pending.length - 1 - i) * Math.round(320 * s);
+            const left = Math.round(cx - wScreen / 2 - shiftX);
+            const top = Math.round(cy - hScreen / 2);
+
+            const overlay = document.createElement('div');
+            overlay.className = 'moodboard-chat__pending-overlay';
+            overlay.style.cssText = `left:${left}px;top:${top}px;width:${wScreen}px;height:${hScreen}px`;
+
+            const label = document.createElement('span');
+            label.className = 'moodboard-chat__pending-image-label';
+            label.textContent = 'В процессе';
+            overlay.appendChild(label);
+
+            document.body.appendChild(overlay);
+            this._pendingOverlayEls.push(overlay);
+        }
+    }
+
+    _clearPendingOverlays() {
+        for (const el of this._pendingOverlayEls) {
+            el.remove();
+        }
+        this._pendingOverlayEls = [];
     }
 
     _getImageRequestOptions() {
@@ -319,7 +402,8 @@ export class ChatWindow {
         return {
             widthRatio,
             heightRatio,
-            model: this._modelId === 'yandex' ? 'yandex-art' : undefined
+            model: this._modelId === 'yandex' ? 'yandex-art' : undefined,
+            imageCount: parseImageCount(this._countId)
         };
     }
 
@@ -330,11 +414,14 @@ export class ChatWindow {
         const world = this._boardCore.pixi?.worldLayer || this._boardCore.pixi?.app?.stage;
         const s = world?.scale?.x || 1;
 
-        // Сдвигаем все ранее размещённые AI-изображения влево на 320 экранных пикселей
-        // (в мировых единицах: 320 / масштаб), чтобы новое изображение всегда появлялось
-        // на фиксированной базовой позиции, не перекрывая предыдущие.
-        if (this._boardAiImageIds.length > 0) {
-            const worldShift = Math.round(320 / s);
+        // Если генерация прошла без режима загрузки (например, мгновенный ответ),
+        // нужно сдвинуть существующие изображения сейчас. Иначе берем сохраненный индекс сдвига.
+        let myShiftIndex = 0;
+        if (this._pendingShiftCount > 0) {
+            this._pendingShiftCount--;
+            myShiftIndex = this._pendingShiftCount;
+        } else if (this._boardAiImageIds.length > 0) {
+            const worldShift = 320;
             const objects = this._boardCore.state?.state?.objects;
             for (const id of this._boardAiImageIds) {
                 const obj = objects?.find((o) => o.id === id);
@@ -355,14 +442,18 @@ export class ChatWindow {
         // Чтобы нижний край изображения был на 100 px выше composer: y = composerTop - 250.
         const chatRect = this._refs?.root?.getBoundingClientRect?.();
         const composerRect = this._refs?.composer?.getBoundingClientRect?.();
-        const x = chatRect
+        const xBase = chatRect
             ? Math.round(chatRect.left + chatRect.width / 2)
             : (view ? Math.round(view.clientWidth / 2) : 400);
+        
+        const x = Math.round(xBase - myShiftIndex * 320 * s);
+        
         const y = composerRect
             ? Math.round(composerRect.top - 250)
             : (chatRect
                 ? Math.round(chatRect.top - 150)
                 : (view ? Math.round(view.clientHeight * 0.3) : 200));
+        
         this._boardCore.eventBus.emit(Events.UI.PasteImageAt, {
             x, y,
             src: dataUrl,
@@ -405,3 +496,16 @@ function parseFormatRatio(formatId) {
 
     return [width, height];
 }
+
+function parseImageCount(countId) {
+    if (!countId || countId === 'auto') {
+        return 1;
+    }
+
+    const count = Number.parseInt(countId, 10);
+    if (!Number.isFinite(count)) {
+        return 1;
+    }
+
+    return Math.min(Math.max(count, 1), 4);
+}

package/src/ui/chat/ChatWindowRenderer.js

@@ -28,17 +28,21 @@ export function buildChatDom() {
     statusBar.setAttribute('aria-atomic', 'true');
     statusBar.innerHTML = '<span class="moodboard-chat__status-bar-text">Идёт процесс генерации изображения…</span>';
 
+    const pendingImages = createDiv('moodboard-chat__pending-images');
+
     const rendererRefs = {
         root,
         history,
         composer,
-        statusBar
+        statusBar,
+        pendingImages
     };
 
     composer.appendChild(buildInputRow(refs => Object.assign(rendererRefs, refs)));
     composer.appendChild(buildActionsRow(refs => Object.assign(rendererRefs, refs)));
 
     root.appendChild(history);
+    root.appendChild(pendingImages);
     root.appendChild(statusBar);
     root.appendChild(composer);
 

package/src/ui/styles/chat.css

@@ -661,6 +661,63 @@
     display: block;
 }
 
+/* Контейнер блоков-заглушек при параллельной генерации изображений */
+.moodboard-chat__pending-images {
+    display: none;
+    gap: 8px;
+    background: #ffffff;
+    border-radius: 12px;
+    padding: 8px;
+    margin-bottom: 8px;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+}
+
+.moodboard-chat__pending-images.is-visible {
+    display: flex;
+}
+
+.moodboard-chat__pending-image-block {
+    flex: 1;
+    min-height: 180px;
+    background: #6B7E87;
+    border-radius: 8px;
+    position: relative;
+    overflow: hidden;
+}
+
+/* Overlay-заглушка на полотне доски во время генерации изображения */
+@keyframes moodboard-pending-shimmer {
+    0%   { background-position: -100% 0; }
+    100% { background-position: 200% 0; }
+}
+
+.moodboard-chat__pending-overlay {
+    position: fixed;
+    background: linear-gradient(
+        90deg,
+        #5F7179 0%,
+        #7A8D96 50%,
+        #5F7179 100%
+    );
+    background-size: 200% 100%;
+    animation: moodboard-pending-shimmer 5.76s linear infinite;
+    border-radius: 8px;
+    overflow: hidden;
+    pointer-events: none;
+    z-index: 10;
+}
+
+.moodboard-chat__pending-image-label {
+    position: absolute;
+    bottom: 10px;
+    left: 12px;
+    font-family: 'GeistSans', 'GeistSans Fallback', 'Roboto', Arial, sans-serif;
+    font-size: 20px;
+    font-weight: 400;
+    color: #ffffff;
+    pointer-events: none;
+}
+
 /* Попап настроек */
 .moodboard-chat__settings-popup {
     position: absolute;