@sequent-org/moodboard 1.4.26 → 1.4.27

package/src/services/ai/ChatSessionController.js

@@ -0,0 +1,220 @@
+import { CHAT_PRESETS, DEFAULT_PRESET_ID, getPresetById } from './ChatPresets.js';
+
+/**
+ * Контроллер сессии чата.
+ *
+ * Одна ответственность: держит состояние диалога и оркестрирует
+ * вызовы AiClient + сохранение в ChatHistoryStore. Не знает про DOM.
+ *
+ * Связь с UI — через слушателей (subscribe), а не через прямые ссылки.
+ *
+ * Состояние:
+ *   - messages: список сообщений (с временным assistant-сообщением во время стриминга)
+ *   - providerId: текущий провайдер (yandex-art)
+ *   - presetId: текущий пресет промпта
+ *   - settings: { systemPrompt, temperature, maxTokens }
+ *   - status: 'idle' | 'streaming' | 'error'
+ *   - error: string|null
+ *
+ * События для подписчиков (один колбэк на всё, для простоты):
+ *   - 'state'        — любое изменение состояния (UI делает rerender)
+ */
+
+export const DEFAULT_SETTINGS = {
+    systemPrompt: '',
+    temperature: 0.7,
+    maxTokens: 2000
+};
+
+const SETTINGS_STORAGE_KEY = 'moodboard.ai.chat.settings.v1';
+
+export class ChatSessionController {
+    /**
+     * @param {object} deps
+     * @param {import('./AiClient.js').AiClient} deps.aiClient
+     * @param {import('./ChatHistoryStore.js').ChatHistoryStore} deps.historyStore
+     * @param {Storage} [deps.settingsStorage]
+     */
+    constructor({ aiClient, historyStore, settingsStorage }) {
+        this._client = aiClient;
+        this._history = historyStore;
+        this._settingsStorage = settingsStorage || (typeof localStorage !== 'undefined' ? localStorage : null);
+        this._listeners = new Set();
+        this._abort = null;
+
+        this._state = {
+            messages: this._history.load(),
+            providerId: 'yandex-art',
+            presetId: DEFAULT_PRESET_ID,
+            settings: this._loadSettings(),
+            status: 'idle',
+            error: null,
+            availableProviders: []
+        };
+    }
+
+    getState() {
+        return this._state;
+    }
+
+    subscribe(listener) {
+        this._listeners.add(listener);
+        return () => this._listeners.delete(listener);
+    }
+
+    setProvider(providerId) {
+        if (!providerId || providerId === this._state.providerId) return;
+        this._state = { ...this._state, providerId };
+        this._emit();
+    }
+
+    setPreset(presetId) {
+        const preset = getPresetById(presetId);
+        const next = { ...this._state, presetId: preset.id };
+        if (!this._state.settings.systemPrompt || this._isPresetSystemPrompt(this._state.settings.systemPrompt)) {
+            next.settings = { ...this._state.settings, systemPrompt: preset.systemPrompt };
+            this._saveSettings(next.settings);
+        }
+        this._state = next;
+        this._emit();
+    }
+
+    updateSettings(patch) {
+        const settings = { ...this._state.settings, ...patch };
+        this._state = { ...this._state, settings };
+        this._saveSettings(settings);
+        this._emit();
+    }
+
+    setAvailableProviders(list) {
+        this._state = { ...this._state, availableProviders: Array.isArray(list) ? list : [] };
+        const enabled = this._state.availableProviders.filter((p) => p.enabled);
+        if (enabled.length > 0 && !enabled.some((p) => p.id === this._state.providerId)) {
+            this._state = { ...this._state, providerId: enabled[0].id };
+        }
+        this._emit();
+    }
+
+    clearHistory() {
+        if (this._abort) this.abort();
+        this._state = { ...this._state, messages: [], status: 'idle', error: null };
+        this._history.save([]);
+        this._emit();
+    }
+
+    abort() {
+        if (this._abort) {
+            try { this._abort.abort(); } catch { /* noop */ }
+            this._abort = null;
+        }
+    }
+
+    /**
+     * Отправляет user-сообщение и создаёт изображение через YandexART.
+     * @param {string} text
+     * @param {{widthRatio?: number, heightRatio?: number, model?: string}} [options]
+     */
+    async send(text, options = {}) {
+        const trimmed = (text || '').trim();
+        if (!trimmed || this._state.status === 'streaming') return;
+
+        const userMsg = makeMessage('user', trimmed);
+        const assistantMsg = makeMessage('assistant', '', { provider: 'yandex-art', pending: true, kind: 'image' });
+
+        this._state = {
+            ...this._state,
+            messages: [...this._state.messages, userMsg, assistantMsg],
+            status: 'streaming',
+            error: null
+        };
+        this._history.save(this._state.messages);
+        this._emit();
+
+        const abort = new AbortController();
+        this._abort = abort;
+
+        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 });
+        } finally {
+            this._abort = null;
+        }
+    }
+
+    _finalizeAssistant(id, { error, imageBase64, mimeType, operationId }) {
+        const messages = this._state.messages.map((m) =>
+            m.id === id
+                ? {
+                    ...m,
+                    pending: false,
+                    error: error || undefined,
+                    imageBase64: imageBase64 || m.imageBase64,
+                    mimeType: mimeType || m.mimeType,
+                    operationId: operationId || m.operationId
+                }
+                : m
+        );
+        this._state = {
+            ...this._state,
+            messages,
+            status: error ? 'error' : 'idle',
+            error: error || null
+        };
+        this._history.save(messages);
+        this._emit();
+    }
+
+    _emit() {
+        for (const listener of this._listeners) {
+            try { listener(this._state); } catch (err) { console.error('[ChatSession] listener error:', err); }
+        }
+    }
+
+    _loadSettings() {
+        if (!this._settingsStorage) return { ...DEFAULT_SETTINGS };
+        try {
+            const raw = this._settingsStorage.getItem(SETTINGS_STORAGE_KEY);
+            if (!raw) return { ...DEFAULT_SETTINGS };
+            const parsed = JSON.parse(raw);
+            return { ...DEFAULT_SETTINGS, ...(parsed || {}) };
+        } catch {
+            return { ...DEFAULT_SETTINGS };
+        }
+    }
+
+    _saveSettings(settings) {
+        if (!this._settingsStorage) return;
+        try {
+            this._settingsStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(settings));
+        } catch { /* noop */ }
+    }
+
+    _isPresetSystemPrompt(text) {
+        return CHAT_PRESETS.some((p) => p.systemPrompt === text);
+    }
+}
+
+function makeMessage(role, content, extra = {}) {
+    return {
+        id: `msg_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
+        role,
+        content,
+        ts: Date.now(),
+        ...extra
+    };
+}

package/src/ui/chat/ChatComposer.js

@@ -0,0 +1,198 @@
+/**
+ * Композер: textarea + кнопка отправки + вложения.
+ *
+ * Одна ответственность: события ввода и отправки. Не знает про пиллы,
+ * меню провайдеров и настройки — этим занимаются отдельные модули.
+ *
+ * Контракт колбэков:
+ *   onSubmit(text, attachments)  — нажат Enter без Shift или клик по send в состоянии 'ready'
+ *   onAbort()                    — клик по send в состоянии 'streaming'
+ */
+
+const CLOSE_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12"><path stroke="currentColor" stroke-linecap="round" stroke-width="1.2" d="m2.5 2.5 7 7m0-7-7 7"></path></svg>`;
+
+export class ChatComposer {
+    /**
+     * @param {{ textarea: HTMLTextAreaElement, send: HTMLButtonElement, attach: HTMLButtonElement, fileInput: HTMLInputElement, attachmentsPreview: HTMLElement, enhancePrompt?: HTMLButtonElement, statusBar?: HTMLElement }} refs
+     * @param {{ onSubmit: (text: string, attachments: File[]) => void, onAbort: () => void }} handlers
+     */
+    constructor(refs, handlers) {
+        this._textarea = refs.textarea;
+        this._send = refs.send;
+        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[]} */
+        this._attachments = [];
+    }
+
+    attach() {
+        this._on(this._textarea, 'input', () => {
+            this._resizeTextarea();
+            this._refreshSendState();
+        });
+        this._on(this._textarea, 'keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
+                e.preventDefault();
+                this._submit();
+            }
+        });
+        this._on(this._send, 'click', () => {
+            if (this._send.dataset.state === 'streaming') {
+                this._handlers.onAbort?.();
+            } else {
+                this._submit();
+            }
+        });
+        if (this._attach && this._fileInput) {
+            this._on(this._attach, 'click', () => this._fileInput.click());
+            this._on(this._fileInput, 'change', () => this._handleFileChange());
+        }
+        this._resizeTextarea();
+        this._refreshSendState();
+    }
+
+    /**
+     * Внешнее состояние стриминга — управляет иконкой кнопки send.
+     * @param {'idle'|'streaming'} status
+     */
+    setStreaming(isStreaming) {
+        if (isStreaming) {
+            this._send.dataset.state = 'streaming';
+            this._send.disabled = false;
+        } else {
+            this._refreshSendState();
+        }
+        if (this._statusBar) {
+            this._statusBar.classList.toggle('is-visible', isStreaming);
+            this._statusBar.classList.toggle('is-generating', isStreaming);
+        }
+    }
+
+    focus() {
+        this._textarea.focus();
+    }
+
+    destroy() {
+        for (const off of this._listeners) off();
+        this._listeners = [];
+        this._attachments = [];
+    }
+
+    _submit() {
+        const text = this._textarea.value;
+        const trimmed = text.trim();
+        const hasAttachments = this._attachments.length > 0;
+        if (!trimmed && !hasAttachments) return;
+        if (this._send.dataset.state === 'streaming') return;
+        const attachments = [...this._attachments];
+        this._attachments = [];
+        this._textarea.value = '';
+        this._resizeTextarea();
+        this._renderAttachmentsPreview();
+        this._refreshSendState();
+        this._handlers.onSubmit?.(trimmed, attachments);
+    }
+
+    _refreshSendState() {
+        const hasText = this._textarea.value.trim().length > 0;
+        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._fileInput.value = '';
+        this._renderAttachmentsPreview();
+        this._refreshSendState();
+    }
+
+    _renderAttachmentsPreview() {
+        const container = this._attachmentsPreview;
+        if (!container) return;
+
+        container.innerHTML = '';
+        const inputRow = container.closest('.moodboard-chat__input-row');
+        if (this._attachments.length === 0) {
+            container.classList.remove('is-visible');
+            inputRow?.classList.remove('has-attachments');
+            this._textarea.placeholder = 'Опишите то, что хотите сгенерировать';
+            return;
+        }
+
+        container.classList.add('is-visible');
+        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);
+            container.appendChild(item);
+        }
+    }
+
+    _buildAttachmentItem(file, index) {
+        const item = document.createElement('div');
+        item.className = 'moodboard-chat__attachment-item';
+        item.title = file.name;
+
+        const isImage = file.type.startsWith('image/');
+
+        if (isImage) {
+            const img = document.createElement('img');
+            img.className = 'moodboard-chat__attachment-thumb';
+            img.alt = file.name;
+            const url = URL.createObjectURL(file);
+            img.src = url;
+            img.addEventListener('load', () => URL.revokeObjectURL(url), { once: true });
+            item.appendChild(img);
+        } else {
+            const icon = document.createElement('div');
+            icon.className = 'moodboard-chat__attachment-icon';
+            const ext = file.name.split('.').pop()?.toUpperCase() ?? '?';
+            icon.textContent = ext;
+            item.appendChild(icon);
+        }
+
+        const badge = document.createElement('div');
+        badge.className = 'moodboard-chat__attachment-badge';
+        badge.textContent = String(index + 1);
+        item.appendChild(badge);
+
+        const remove = document.createElement('button');
+        remove.type = 'button';
+        remove.className = 'moodboard-chat__attachment-remove';
+        remove.setAttribute('aria-label', `Удалить ${file.name}`);
+        remove.innerHTML = CLOSE_SVG;
+        remove.addEventListener('click', () => {
+            this._attachments.splice(index, 1);
+            this._renderAttachmentsPreview();
+            this._refreshSendState();
+        });
+        item.appendChild(remove);
+
+        return item;
+    }
+
+    _resizeTextarea() {
+        this._textarea.style.height = 'auto';
+        const nextHeight = Math.max(47, Math.ceil(this._textarea.scrollHeight));
+        this._textarea.style.height = `${nextHeight}px`;
+    }
+
+    _on(el, type, handler) {
+        el.addEventListener(type, handler);
+        this._listeners.push(() => el.removeEventListener(type, handler));
+    }
+}

package/src/ui/chat/ChatExtendedPromptModal.js

@@ -0,0 +1,131 @@
+import { ICONS } from './icons.js';
+
+export class ChatExtendedPromptModal {
+    /**
+     * @param {HTMLElement} container - workspace-контейнер
+     * @param {HTMLTextAreaElement} sourceTextarea
+     * @param {HTMLElement} triggerBtn
+     */
+    constructor(container, sourceTextarea, triggerBtn) {
+        this._container = container;
+        this._sourceTextarea = sourceTextarea;
+        this._triggerBtn = triggerBtn;
+        this._refs = null;
+        this._listeners = [];
+        this._isVisible = false;
+    }
+
+    attach() {
+        this._refs = this._buildDom();
+        this._container.appendChild(this._refs.overlay);
+
+        this._on(this._triggerBtn, 'click', () => this.show());
+        this._on(this._refs.closeBtn, 'click', () => this.hide());
+        this._on(this._refs.overlay, 'click', (e) => {
+            if (e.target === this._refs.overlay) this.hide();
+        });
+
+        this._on(this._refs.textarea, 'input', () => {
+            this._sourceTextarea.value = this._refs.textarea.value;
+            this._sourceTextarea.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+
+        this._on(this._refs.clearBtn, 'click', () => {
+            this._refs.textarea.value = '';
+            this._refs.textarea.focus();
+            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() {
+        this._refs.textarea.value = this._sourceTextarea.value;
+        this._refs.overlay.classList.add('is-visible');
+        this._isVisible = true;
+
+        setTimeout(() => {
+            this._refs.textarea.focus();
+            this._refs.textarea.selectionStart = this._refs.textarea.value.length;
+        }, 10);
+    }
+
+    hide() {
+        this._refs.overlay.classList.remove('is-visible');
+        this._isVisible = false;
+        this._sourceTextarea.focus();
+    }
+
+    destroy() {
+        for (const off of this._listeners) off();
+        this._listeners = [];
+        if (this._refs?.overlay && this._refs.overlay.parentNode === this._container) {
+            this._container.removeChild(this._refs.overlay);
+        }
+        this._refs = null;
+    }
+
+    _on(el, type, handler) {
+        el.addEventListener(type, handler);
+        this._listeners.push(() => el.removeEventListener(type, handler));
+    }
+
+    _buildDom() {
+        const overlay = document.createElement('div');
+        overlay.className = 'moodboard-chat__extended-overlay';
+
+        const modal = document.createElement('div');
+        modal.className = 'moodboard-chat__extended-modal';
+
+        const header = document.createElement('div');
+        header.className = 'moodboard-chat__extended-header';
+
+        const title = document.createElement('div');
+        title.className = 'moodboard-chat__extended-title';
+        title.textContent = 'Запрос';
+
+        const closeBtn = document.createElement('button');
+        closeBtn.type = 'button';
+        closeBtn.className = 'moodboard-chat__extended-close';
+        closeBtn.innerHTML = ICONS.close || 'Закрыть';
+
+        header.appendChild(title);
+        header.appendChild(closeBtn);
+
+        const body = document.createElement('div');
+        body.className = 'moodboard-chat__extended-body';
+
+        const textarea = document.createElement('textarea');
+        textarea.className = 'moodboard-chat__extended-textarea';
+        textarea.placeholder = 'Опишите то, что хотите сгенерировать';
+
+        const actions = document.createElement('div');
+        actions.className = 'moodboard-chat__extended-actions';
+
+        const clearBtn = document.createElement('button');
+        clearBtn.type = 'button';
+        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);
+
+        modal.appendChild(header);
+        modal.appendChild(body);
+        overlay.appendChild(modal);
+
+        return { overlay, modal, header, title, closeBtn, body, textarea, clearBtn, enhanceBtn };
+    }
+}

package/src/ui/chat/ChatMessageList.js

@@ -0,0 +1,92 @@
+/**
+ * Рендер ленты сообщений чата.
+ *
+ * Одна ответственность: превратить массив messages в DOM с автоскроллом.
+ * Не управляет состоянием, не слушает события — только render(messages).
+ */
+
+const ROLE_LABELS = {
+    user: 'Вы',
+    assistant: 'Ассистент',
+    system: 'Системный'
+};
+
+export class ChatMessageList {
+    /**
+     * @param {HTMLElement} root - контейнер с классом .moodboard-chat__history
+     */
+    constructor(root) {
+        this._root = root;
+        this._lastCount = 0;
+    }
+
+    /**
+     * @param {Array<{id: string, role: string, content: string, pending?: boolean, error?: string, imageBase64?: string, mimeType?: string}>} messages
+     */
+    render(messages) {
+        const visible = messages.filter((m) => m.role !== 'system');
+
+        if (visible.length === 0) {
+            this._root.classList.remove('is-visible');
+            this._root.replaceChildren();
+            this._lastCount = 0;
+            return;
+        }
+
+        this._root.classList.add('is-visible');
+
+        const fragment = document.createDocumentFragment();
+        for (const msg of visible) {
+            fragment.appendChild(this._renderMessage(msg));
+        }
+        this._root.replaceChildren(fragment);
+
+        if (visible.length !== this._lastCount) {
+            this._scrollToBottom();
+        } else {
+            this._scrollToBottomIfNearBottom();
+        }
+        this._lastCount = visible.length;
+    }
+
+    _renderMessage(msg) {
+        const wrap = document.createElement('div');
+        wrap.className = `moodboard-chat__msg moodboard-chat__msg--${msg.role}`;
+        if (msg.error) wrap.classList.add('moodboard-chat__msg--error');
+
+        const role = document.createElement('div');
+        role.className = 'moodboard-chat__msg-role';
+        role.textContent = ROLE_LABELS[msg.role] || msg.role;
+        wrap.appendChild(role);
+
+        const body = document.createElement('div');
+        body.className = 'moodboard-chat__msg-body';
+
+        if (msg.error) {
+            body.textContent = msg.error;
+        } else if (msg.imageBase64) {
+            body.textContent = msg.content || 'Изображение добавлено на доску.';
+        } else if (msg.pending && !msg.content) {
+            body.textContent = '…';
+        } else {
+            body.textContent = msg.content;
+            if (msg.pending) {
+                const cursor = document.createElement('span');
+                cursor.className = 'moodboard-chat__msg-cursor';
+                body.appendChild(cursor);
+            }
+        }
+
+        wrap.appendChild(body);
+        return wrap;
+    }
+
+    _scrollToBottom() {
+        this._root.scrollTop = this._root.scrollHeight;
+    }
+
+    _scrollToBottomIfNearBottom() {
+        const distanceFromBottom = this._root.scrollHeight - this._root.scrollTop - this._root.clientHeight;
+        if (distanceFromBottom < 80) this._scrollToBottom();
+    }
+}