@sequent-org/moodboard 1.4.38 → 1.4.40

package/package.json

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

package/src/moodboard/bootstrap/MoodBoardInitializer.js

@@ -78,7 +78,7 @@ export async function initCoreMoodBoard(board) {
         boardId: board.options.boardId || 'workspace-board',
         width: canvasSize.width,
         height: canvasSize.height,
-        backgroundColor: board.options.theme === 'dark' ? 0x2a2a2a : parseInt(BOARD_PALETTE[0].board.replace('#', ''), 16),
+        backgroundColor: board.options.theme === 'dark' ? 0x2a2a2a : parseInt(BOARD_PALETTE[4].board.replace('#', ''), 16),
         saveEndpoint: board.options.saveEndpoint,
         loadEndpoint: board.options.loadEndpoint,
     };

package/src/services/ai/AiClient.js

@@ -106,8 +106,9 @@ export class AiClient {
     }
 
     /**
-     * Генерация изображения через YandexART.
+     * Генерация изображения через image-провайдера.
      * @param {object} args
+     * @param {string} [args.provider='yandex-art']
      * @param {string} args.prompt
      * @param {string} [args.negativePrompt]
      * @param {number} [args.widthRatio]
@@ -119,10 +120,10 @@ export class AiClient {
      * @param {AbortSignal} [args.signal]
      * @returns {Promise<{operationId: string, imageBase64: string, mimeType: string}>}
      */
-    async generateImage({ signal, referenceImages: files, ...payload }) {
+    async generateImage({ provider = 'yandex-art', signal, referenceImages: files, ...payload }) {
         const referenceImages = await filesToBase64(files);
         const body = referenceImages ? { ...payload, referenceImages } : payload;
-        const res = await this._fetch(`${this._baseUrl}/yandex-art/image`, {
+        const res = await this._fetch(`${this._baseUrl}/${provider}/image`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',

package/src/services/ai/ChatSessionController.js

@@ -10,7 +10,7 @@ import { CHAT_PRESETS, DEFAULT_PRESET_ID, getPresetById } from './ChatPresets.js
  *
  * Состояние:
  *   - messages: список сообщений (с временным assistant-сообщением во время стриминга)
- *   - providerId: текущий провайдер (yandex-art)
+ *   - providerId: текущий провайдер (yandex-art/openai-image)
  *   - presetId: текущий пресет промпта
  *   - settings: { systemPrompt, temperature, maxTokens }
  *   - status: 'idle' | 'streaming' | 'error'
@@ -112,21 +112,22 @@ export class ChatSessionController {
     }
 
     /**
-     * Отправляет user-сообщение и создаёт изображение через YandexART.
+     * Отправляет user-сообщение и создаёт изображение через выбранный image-провайдер.
      * @param {string} text
-     * @param {{widthRatio?: number, heightRatio?: number, model?: string, imageCount?: number}} [options]
+     * @param {{provider?: string, widthRatio?: number, heightRatio?: number, model?: string, imageCount?: number}} [options]
      */
     async send(text, options = {}) {
         const trimmed = (text || '').trim();
         if (!trimmed) return;
 
+        const provider = options.provider || 'yandex-art';
         const imageCount = normalizeImageCount(options.imageCount);
         const batchId = `batch_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
         const userMsg = makeMessage('user', trimmed);
         const assistantMsgs = Array.from({ length: imageCount }, (_, index) => makeMessage(
             'assistant',
             imageCount > 1 ? `Генерируется изображение ${index + 1} из ${imageCount}…` : '',
-            { provider: 'yandex-art', pending: true, kind: 'image', batchId }
+            { provider, pending: true, kind: 'image', batchId }
         ));
 
         this._state = {
@@ -154,6 +155,7 @@ export class ChatSessionController {
 
                     return this._client
                         .generateImage({
+                            provider,
                             prompt: trimmed,
                             widthRatio: options.widthRatio,
                             heightRatio: options.heightRatio,

package/src/ui/chat/ChatWindow.js

@@ -90,7 +90,7 @@ const MODEL_OPTIONS = [
     {
         id: 'qwen',
         label: 'Qwen',
-        icon: ICONS.modelQwen,
+        icon: '<img src="/icons/qwen.svg" alt="" aria-hidden="true">',
         description: 'Alibaba'
     }
 ];
@@ -255,6 +255,7 @@ export class ChatWindow {
 
         const initialState = this._session.getState();
         this._markExistingBoardImages(initialState.messages);
+        this._reserveCurrentAiImageLaneSlots();
         this._unsubscribe = this._session.subscribe((state) => this._render(state));
         this._render(initialState);
 
@@ -616,7 +617,9 @@ export class ChatWindow {
 
     _getImageRequestOptions() {
         const [widthRatio, heightRatio] = parseFormatRatio(this._formatId);
+        const provider = this._modelId === 'gpt' ? 'openai-image' : 'yandex-art';
         return {
+            provider,
             widthRatio,
             heightRatio,
             model: this._modelId === 'yandex' ? 'yandex-art' : undefined,
@@ -1284,7 +1287,7 @@ export class ChatWindow {
         const centerWorldY = (y - (world?.y || 0)) / s;
         let slot = this._reserveAiImageLaneSlotForMessage(msg.id, centerWorldX, centerWorldY);
 
-        if (slot && this._doesAiImageLaneSlotOverlap(slot, msg.id)) {
+        if (slot && this._doesBoardAiImageOverlapSlot(slot, msg.id)) {
             const right = this._getAiImageLaneRightBoundary(undefined, msg.id);
             if (Number.isFinite(right)) {
                 slot = {
@@ -1303,9 +1306,17 @@ export class ChatWindow {
         };
     }
 
-    _doesAiImageLaneSlotOverlap(candidate, candidateKey) {
-        for (const [key, slot] of this._aiImageLaneSlots) {
-            if (key === candidateKey || !slot) continue;
+    _doesBoardAiImageOverlapSlot(candidate, excludeKey) {
+        for (const object of this._getBoardAiImageObjects()) {
+            const key = getAiImageLaneKeyForObject(object);
+            if (key === excludeKey) continue;
+
+            const slot = {
+                x: Math.round(object.position.x),
+                y: Math.round(object.position.y),
+                width: getBoardObjectWidth(object),
+                height: getBoardObjectHeight(object)
+            };
 
             if (rectsOverlap(candidate, slot)) {
                 return true;
@@ -1336,7 +1347,12 @@ export class ChatWindow {
             x = slot.x;
             y = slot.y;
         }
-        const insertPoint = this._resolveAiImageInsertPoint(msg, x, y, s);
+        const centerWorldX = (x - (world?.x || 0)) / s;
+        const centerWorldY = (y - (world?.y || 0)) / s;
+        const reservedSlot = this._reserveAiImageLaneSlotForMessage(msg.id, centerWorldX, centerWorldY);
+        const insertPoint = pendingRecord && reservedSlot && !this._doesBoardAiImageOverlapSlot(reservedSlot, msg.id)
+            ? { x, y }
+            : this._resolveAiImageInsertPoint(msg, x, y, s);
 
         this._boardCore.eventBus.emit(Events.UI.PasteImageAt, {
             x: insertPoint.x,
@@ -1444,7 +1460,7 @@ function isImageGenerationMessage(message) {
 function isBoardAiImageObject(object) {
     return Boolean(object?.id)
         && object.type === 'image'
-        && object.properties?.name === 'ai-generated.jpg'
+        && (object.properties?.name === 'ai-generated.jpg' || object.properties?.aiMessageId)
         && object.position
         && Number.isFinite(object.position.x);
 }

package/src/ui/chat/formatChatError.js

@@ -68,6 +68,16 @@ const EXACT_MESSAGES_RU = {
         'Провайдер Yandex не настроен',
     'Provider "yandex-art" is not configured':
         'Провайдер «yandex-art» не настроен',
+    'OpenAI image provider is not configured':
+        'Провайдер OpenAI Images не настроен',
+    'OpenAI image response does not contain image data':
+        'В ответе OpenAI Images нет данных изображения',
+    'OpenAI image API returned non-JSON response':
+        'OpenAI Images вернул ответ не в формате JSON',
+    'OpenAI image operation timed out':
+        'Превышено время ожидания генерации OpenAI Images',
+    'Provider "openai-image" is not configured':
+        'Провайдер «openai-image» не настроен',
     'AI stream error':
         'Ошибка потока ответа ИИ',
     'AiClient.chatStream: empty response body':
@@ -96,6 +106,14 @@ const PREFIX_MESSAGES_RU = [
         pattern: /^YandexART API error \((\d+)\)$/,
         format: ([, status]) => `Ошибка API YandexART (${status})`
     },
+    {
+        pattern: /^OpenAI image API unreachable: (.+)$/,
+        format: ([, detail]) => `API OpenAI Images недоступен: ${detail}`
+    },
+    {
+        pattern: /^OpenAI image API error \((\d+)\)$/,
+        format: ([, status]) => `Ошибка API OpenAI Images (${status})`
+    },
     {
         pattern: /^Yandex Operations API error \((\d+)\)$/,
         format: ([, status]) => `Ошибка API операций Yandex (${status})`

package/src/ui/chat/icons.js

@@ -45,8 +45,8 @@ const EXTEND_PROMPT_FIELD_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width=
 /** public/icons/google.svg — цветной логотип Google 36×36 */
 const MODEL_GOOGLE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="none" viewBox="0 0 36 36"><path fill="#4285F4" d="M29.251 18.49c0-.813-.073-1.596-.209-2.347H18.23v4.445h6.179c-.272 1.43-1.086 2.64-2.307 3.455v2.89h3.726c2.17-2.003 3.423-4.946 3.423-8.442"/><path fill="#34A853" d="M18.229 29.71c3.1 0 5.698-1.023 7.597-2.776l-3.725-2.89c-1.023.688-2.328 1.105-3.872 1.105-2.985 0-5.52-2.014-6.429-4.727H7.98v2.964c1.89 3.746 5.761 6.324 10.249 6.324"/><path fill="#FBBC05" d="M11.801 20.412a6.9 6.9 0 0 1-.365-2.181c0-.762.136-1.492.365-2.181v-2.964h-3.82A11.34 11.34 0 0 0 6.75 18.23c0 1.858.449 3.6 1.231 5.145l2.975-2.317z"/><path fill="#EA4335" d="M18.229 11.321c1.69 0 3.193.585 4.393 1.712l3.288-3.288c-1.994-1.857-4.582-2.995-7.681-2.995-4.488 0-8.36 2.578-10.249 6.335l3.82 2.964c.908-2.714 3.444-4.728 6.429-4.728"/></svg>`;
 
-/** Placeholder OpenAI GPT — буква G в круге, 36×36 */
-const MODEL_GPT_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none" aria-hidden="true"><circle cx="18" cy="18" r="16" fill="#10a37f"/><text x="18" y="23" text-anchor="middle" font-size="16" font-family="Arial,sans-serif" fill="#fff" font-weight="bold">G</text></svg>`;
+/** public/icons/gpt.svg — логотип GPT 36×36 */
+const MODEL_GPT_ICON = `<img src="/icons/gpt.svg" width="36" height="36" alt="" aria-hidden="true">`;
 
 /** Placeholder Alibaba Qwen — буква Q в круге, 36×36 */
 const MODEL_QWEN_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none" aria-hidden="true"><circle cx="18" cy="18" r="16" fill="#6e42ca"/><text x="18" y="23" text-anchor="middle" font-size="16" font-family="Arial,sans-serif" fill="#fff" font-weight="bold">Q</text></svg>`;

package/src/ui/styles/chat.css

@@ -20,6 +20,18 @@
     color: #374151;
 }
 
+/* Fallback: на экранах < 1540px центрированный чат перекрывает правый кластер —
+   поднимаем чат над кластером и прижимаем к правому краю */
+@media (max-width: 1540px) {
+    .moodboard-chat {
+        left: auto;
+        right: 16px;
+        bottom: 84px;
+        transform: none;
+        width: min(720px, calc(100% - 32px));
+    }
+}
+
 .moodboard-chat__history {
     max-height: 360px;
     overflow-y: auto;