@sequent-org/moodboard 1.4.25 → 1.4.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequent-org/moodboard",
-  "version": "1.4.25",
+  "version": "1.4.27",
   "type": "module",
   "description": "Interactive moodboard",
   "main": "./src/index.js",
@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "axios": "^1.0.0",
+    "lucide-static": "^1.16.0",
     "pixi.js": "^7.0.0"
   },
   "devDependencies": {

package/src/core/SaveManager.js

@@ -150,6 +150,12 @@ export class SaveManager {
             }
             
         } catch (error) {
+            // Transient data:/blob: URL в объектах — retry бессмысленен, ошибку пользователю не показываем.
+            // Такое возникает когда AI-изображение размещено без upload-сервера (dev-режим).
+            if (error?.message?.includes('forbidden data/blob src')) {
+                console.warn('SaveManager: объект с data:/blob: URL пропущен при сохранении:', error.message);
+                return;
+            }
             console.error('Ошибка автосохранения:', error);
             this.handleSaveError(error, data);
         } finally {

package/src/core/flows/ClipboardFlow.js

@@ -19,11 +19,14 @@ export function setupClipboardFlow(core) {
         };
     };
 
-    const ensureServerImage = async ({ src, name }) => {
+    const ensureServerImage = async ({ src, name, skipUpload }) => {
         const srcValue = typeof src === 'string' ? src.trim() : '';
         if (srcValue && !/^data:image\//i.test(srcValue) && !/^blob:/i.test(srcValue)) {
             return { src: srcValue, name };
         }
+        if (skipUpload && srcValue) {
+            return { src: srcValue, name };
+        }
         if (!core.imageUploadService) {
             alert('Сервис загрузки изображений недоступен. Изображение не добавлено.');
             return null;
@@ -222,9 +225,9 @@ export function setupClipboardFlow(core) {
         core._cursor.y = y;
     });
 
-    core.eventBus.on(Events.UI.PasteImage, async ({ src, name }) => {
+    core.eventBus.on(Events.UI.PasteImage, async ({ src, name, skipUpload }) => {
         if (!src) return;
-        const uploaded = await ensureServerImage({ src, name });
+        const uploaded = await ensureServerImage({ src, name, skipUpload });
         if (!uploaded?.src) return;
         const view = core.pixi.app.view;
         const world = core.pixi.worldLayer || core.pixi.app.stage;
@@ -283,9 +286,9 @@ export function setupClipboardFlow(core) {
         }
     });
 
-    core.eventBus.on(Events.UI.PasteImageAt, async ({ x, y, src, name }) => {
+    core.eventBus.on(Events.UI.PasteImageAt, async ({ x, y, src, name, skipUpload }) => {
         if (!src) return;
-        const uploaded = await ensureServerImage({ src, name });
+        const uploaded = await ensureServerImage({ src, name, skipUpload });
         if (!uploaded?.src) return;
         const world = core.pixi.worldLayer || core.pixi.app.stage;
         const s = world?.scale?.x || 1;
@@ -311,11 +314,18 @@ export function setupClipboardFlow(core) {
                 height: h,
                 ...revitPayload.properties
             };
-            core.createObject(
+            const createdData = core.createObject(
                 revitPayload.type,
                 { x: Math.round(worldX - Math.round(w / 2)), y: Math.round(worldY - Math.round(h / 2)) },
                 properties
             );
+            // data:-URL изображения (AI-генерация) не проходят через SaveManager,
+            // поэтому Events.Save.Success никогда не придёт и объект останется скрытым.
+            // Раскрываем сразу, минуя ожидание подтверждения сохранения.
+            if (skipUpload && createdData?.id) {
+                core._pendingPersistAckVisibilityIds?.delete(createdData.id);
+                core._setObjectVisibility?.(createdData.id, true);
+            }
         };
 
         try {

package/src/moodboard/bootstrap/MoodBoardUiFactory.js

@@ -14,6 +14,7 @@ import { TextPropertiesPanel } from '../../ui/TextPropertiesPanel.js';
 import { FramePropertiesPanel } from '../../ui/FramePropertiesPanel.js';
 import { NotePropertiesPanel } from '../../ui/NotePropertiesPanel.js';
 import { FilePropertiesPanel } from '../../ui/FilePropertiesPanel.js';
+import { ChatWindow } from '../../ui/chat/ChatWindow.js';
 import { bindToolbarEvents, bindTopbarEvents } from '../integration/MoodBoardEventBindings.js';
 
 function initToolbar(board) {
@@ -86,6 +87,14 @@ function initContextMenu(board) {
     );
 }
 
+function initChatWindow(board) {
+    if (board?.options?.disableChat === true) return;
+    board.chatWindow = new ChatWindow(board.workspaceElement, {
+        boardCore: board.coreMoodboard
+    });
+    board.chatWindow.attach();
+}
+
 function initHtmlLayersAndPanels(board) {
     board.htmlTextLayer = new HtmlTextLayer(board.canvasContainer, board.coreMoodboard.eventBus, board.coreMoodboard);
     board.htmlTextLayer.attach();
@@ -127,4 +136,5 @@ export function createMoodBoardUi(board) {
     }
     initContextMenu(board);
     initHtmlLayersAndPanels(board);
+    initChatWindow(board);
 }

package/src/moodboard/lifecycle/MoodBoardDestroyer.js

@@ -73,6 +73,9 @@ export function destroyMoodBoard(board) {
     safeDestroy(board.dotGridDebugPanel, 'dotGridDebugPanel');
     board.dotGridDebugPanel = null;
 
+    safeDestroy(board.chatWindow, 'chatWindow');
+    board.chatWindow = null;
+
     safeDestroy(board.coreMoodboard, 'coreMoodboard');
     board.coreMoodboard = null;
 

package/src/services/ai/AiClient.js

@@ -0,0 +1,220 @@
+/**
+ * Тонкий HTTP-клиент к /api/ai.
+ *
+ * Одна ответственность: общение с прокси-сервером (server/).
+ * Не знает ни про UI, ни про localStorage. Возвращает обычные данные
+ * и async generator для стриминга.
+ */
+
+const DEFAULT_BASE_URL = '/api/ai';
+
+export class AiClient {
+    /**
+     * @param {object} options
+     * @param {string} [options.baseUrl='/api/ai']
+     * @param {typeof fetch} [options.fetchImpl]
+     */
+    constructor(options = {}) {
+        this._baseUrl = options.baseUrl || DEFAULT_BASE_URL;
+        this._fetch = options.fetchImpl || (typeof fetch !== 'undefined' ? fetch.bind(globalThis) : null);
+        if (!this._fetch) {
+            throw new Error('AiClient: fetch is not available in this environment');
+        }
+    }
+
+    /**
+     * Список доступных провайдеров.
+     * @returns {Promise<Array<{id: string, label: string, enabled: boolean}>>}
+     */
+    async listProviders() {
+        const res = await this._fetch(`${this._baseUrl}/providers`, {
+            method: 'GET',
+            headers: { 'Accept': 'application/json' }
+        });
+        if (!res.ok) {
+            throw new Error(`AiClient.listProviders: ${res.status}`);
+        }
+        const json = await res.json();
+        return Array.isArray(json?.providers) ? json.providers : [];
+    }
+
+    /**
+     * Не-стриминговый чат.
+     * @param {object} args
+     * @param {string} args.provider
+     * @param {Array<{role: string, content: string}>} args.messages
+     * @param {string} [args.system]
+     * @param {number} [args.temperature]
+     * @param {number} [args.maxTokens]
+     * @param {string} [args.model]
+     * @param {AbortSignal} [args.signal]
+     * @returns {Promise<{text: string}>}
+     */
+    async chat({ provider, signal, ...payload }) {
+        const res = await this._fetch(`${this._baseUrl}/${provider}/chat`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json'
+            },
+            body: JSON.stringify({ ...payload, stream: false }),
+            signal
+        });
+        if (!res.ok) {
+            const detail = await safeReadError(res);
+            throw new Error(`AiClient.chat (${res.status}): ${detail}`);
+        }
+        return res.json();
+    }
+
+    /**
+     * Стриминговый чат. Возвращает объект с async iterable для дельт.
+     * Отмена — через переданный AbortSignal.
+     *
+     * @param {object} args
+     * @param {string} args.provider
+     * @param {Array<{role: string, content: string}>} args.messages
+     * @param {string} [args.system]
+     * @param {number} [args.temperature]
+     * @param {number} [args.maxTokens]
+     * @param {string} [args.model]
+     * @param {AbortSignal} [args.signal]
+     * @returns {Promise<{ deltas: AsyncGenerator<string> }>}
+     */
+    async chatStream({ provider, signal, ...payload }) {
+        const res = await this._fetch(`${this._baseUrl}/${provider}/chat`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Accept': 'text/event-stream'
+            },
+            body: JSON.stringify({ ...payload, stream: true }),
+            signal
+        });
+        if (!res.ok) {
+            const detail = await safeReadError(res);
+            throw new Error(`AiClient.chatStream (${res.status}): ${detail}`);
+        }
+        if (!res.body) {
+            throw new Error('AiClient.chatStream: empty response body');
+        }
+        return { deltas: parseClientSse(res.body, signal) };
+    }
+
+    /**
+     * Генерация изображения через YandexART.
+     * @param {object} args
+     * @param {string} args.prompt
+     * @param {string} [args.negativePrompt]
+     * @param {number} [args.widthRatio]
+     * @param {number} [args.heightRatio]
+     * @param {number} [args.seed]
+     * @param {string} [args.mimeType]
+     * @param {string} [args.model]
+     * @param {AbortSignal} [args.signal]
+     * @returns {Promise<{operationId: string, imageBase64: string, mimeType: string}>}
+     */
+    async generateImage({ signal, ...payload }) {
+        const res = await this._fetch(`${this._baseUrl}/yandex-art/image`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json'
+            },
+            body: JSON.stringify(payload),
+            signal
+        });
+        if (!res.ok) {
+            const detail = await safeReadError(res);
+            throw new Error(`AiClient.generateImage (${res.status}): ${detail}`);
+        }
+        return res.json();
+    }
+}
+
+/**
+ * Минимальный парсер SSE на клиенте.
+ * Контракт сервера (см. server/src/utils/sseWriter.js):
+ *   data: {"delta":"..."}
+ *   data: [DONE]
+ *   event: error
+ *   data: {"error":"..."}
+ *
+ * @param {ReadableStream<Uint8Array>} stream
+ * @param {AbortSignal} [signal]
+ */
+async function* parseClientSse(stream, signal) {
+    const reader = stream.getReader();
+    const decoder = new TextDecoder('utf-8');
+    let buffer = '';
+
+    const onAbort = () => {
+        try { reader.cancel(); } catch (_) { /* noop */ }
+    };
+    if (signal) {
+        if (signal.aborted) onAbort();
+        else signal.addEventListener('abort', onAbort, { once: true });
+    }
+
+    try {
+        while (true) {
+            const { value, done } = await reader.read();
+            if (done) break;
+            buffer += decoder.decode(value, { stream: true });
+
+            let idx;
+            while ((idx = buffer.indexOf('\n\n')) !== -1) {
+                const rawEvent = buffer.slice(0, idx);
+                buffer = buffer.slice(idx + 2);
+
+                const parsed = parseSseEvent(rawEvent);
+                if (!parsed) continue;
+
+                if (parsed.event === 'error') {
+                    const err = safeJson(parsed.data);
+                    throw new Error(err?.error || 'AI stream error');
+                }
+
+                if (parsed.data === '[DONE]') return;
+
+                const json = safeJson(parsed.data);
+                if (json && typeof json.delta === 'string' && json.delta.length > 0) {
+                    yield json.delta;
+                }
+            }
+        }
+    } finally {
+        if (signal) signal.removeEventListener('abort', onAbort);
+        try { reader.releaseLock(); } catch (_) { /* noop */ }
+    }
+}
+
+function parseSseEvent(raw) {
+    const lines = raw.split(/\r?\n/);
+    let event = 'message';
+    const dataParts = [];
+    for (const line of lines) {
+        if (!line || line.startsWith(':')) continue;
+        if (line.startsWith('event:')) {
+            event = line.slice(6).trim();
+        } else if (line.startsWith('data:')) {
+            dataParts.push(line.slice(5).trimStart());
+        }
+    }
+    if (dataParts.length === 0) return null;
+    return { event, data: dataParts.join('\n') };
+}
+
+function safeJson(text) {
+    try { return JSON.parse(text); } catch { return null; }
+}
+
+async function safeReadError(res) {
+    try {
+        const text = await res.text();
+        const json = safeJson(text);
+        return json?.error ? json.error : (text || res.statusText);
+    } catch {
+        return res.statusText;
+    }
+}

package/src/services/ai/ChatHistoryStore.js

@@ -0,0 +1,55 @@
+/**
+ * Хранилище истории чата в localStorage.
+ *
+ * Одна ответственность: CRUD сообщений в localStorage по ключу.
+ * Не зависит ни от UI, ни от транспорта — легко тестируется.
+ *
+ * Формат сообщения:
+ *   { id, role: 'user'|'assistant'|'system', content, ts, provider? }
+ */
+
+const DEFAULT_KEY = 'moodboard.ai.chat.history.v1';
+const MAX_MESSAGES = 200;
+
+export class ChatHistoryStore {
+    /**
+     * @param {object} options
+     * @param {Storage} [options.storage] - localStorage по умолчанию
+     * @param {string} [options.key]
+     * @param {number} [options.maxMessages]
+     */
+    constructor(options = {}) {
+        this._storage = options.storage || (typeof localStorage !== 'undefined' ? localStorage : null);
+        this._key = options.key || DEFAULT_KEY;
+        this._max = options.maxMessages || MAX_MESSAGES;
+    }
+
+    load() {
+        if (!this._storage) return [];
+        try {
+            const raw = this._storage.getItem(this._key);
+            if (!raw) return [];
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        } catch {
+            return [];
+        }
+    }
+
+    save(messages) {
+        if (!this._storage) return;
+        const trimmed = Array.isArray(messages)
+            ? messages.slice(-this._max)
+            : [];
+        try {
+            this._storage.setItem(this._key, JSON.stringify(trimmed));
+        } catch {
+            /* квоты/недоступность — игнорируем */
+        }
+    }
+
+    clear() {
+        if (!this._storage) return;
+        try { this._storage.removeItem(this._key); } catch { /* noop */ }
+    }
+}

package/src/services/ai/ChatPresets.js

@@ -0,0 +1,40 @@
+/**
+ * Пресеты системного промпта для чата.
+ *
+ * Используются кнопками "Manual" / "Style" в композере.
+ * Список можно расширять — основное правило: id уникален и стабилен,
+ * label короткий (помещается в пилл).
+ */
+
+export const CHAT_PRESETS = [
+    {
+        id: 'default',
+        label: 'Default',
+        kind: 'manual',
+        systemPrompt: 'Ты — ассистент внутри инструмента moodboard. Отвечай по делу, кратко и на русском.'
+    },
+    {
+        id: 'design-helper',
+        label: 'Design helper',
+        kind: 'style',
+        systemPrompt: 'Ты — ассистент по визуальному дизайну и мудбордам. Помогай с подбором палитр, сетки, типографики, референсов и подачи. Пиши кратко, давай конкретные значения (HEX, размеры, шрифты).'
+    },
+    {
+        id: 'copywriter',
+        label: 'Copywriter',
+        kind: 'style',
+        systemPrompt: 'Ты — ассистент-копирайтер. Помогай формулировать заголовки, описания, тексты для слайдов и презентаций. Сохраняй смысл, делай короче и яснее.'
+    },
+    {
+        id: 'strict-editor',
+        label: 'Strict editor',
+        kind: 'manual',
+        systemPrompt: 'Ты — строгий редактор. Проверяй текст на ошибки, тавтологии, штампы. Возвращай исправленный вариант и список изменений.'
+    }
+];
+
+export const DEFAULT_PRESET_ID = 'default';
+
+export function getPresetById(id) {
+    return CHAT_PRESETS.find((p) => p.id === id) || CHAT_PRESETS[0];
+}