@sequent-org/moodboard 1.4.47 → 1.4.49

package/src/ui/chat/ChatSettingsPopup.js

@@ -1,5 +1,13 @@
 /**
- * Попап настроек чата (системный промпт, temperature, maxTokens, очистить историю).
+ * Попап доп-настроек генерации изображения + «Очистить историю».
+ *
+ * Секция изображения (seed, негативный промпт, фон, формат файла,
+ * авто-расширение, водяной знак) — поля отображаются только когда текущая
+ * модель изображения поддерживает соответствующую настройку.
+ *
+ * Видео-настройки в этой панели НЕ живут — они вынесены в тулбар
+ * (см. ChatVideoToolbarPills). Поэтому кнопка-триггер скрывается целиком,
+ * когда у текущей модели изображения нет ни одной поддерживаемой настройки.
  *
  * Одна ответственность: построить контент попапа, прокинуть значения
  * наружу при изменении, открывать/закрывать по триггеру.
@@ -9,7 +17,13 @@ export class ChatSettingsPopup {
     /**
      * @param {{ trigger: HTMLElement, popup: HTMLElement }} refs
      * @param {{
-     *   getSettings: () => { systemPrompt: string, temperature: number, maxTokens: number },
+     *   getSettings: () => {
+     *     systemPrompt: string, temperature: number, maxTokens: number,
+     *     seed: number|null, negativePrompt: string,
+     *     background: string|null, outputFormat: string|null,
+     *     promptExtend: boolean, watermark: boolean
+     *   },
+     *   getCapability?: () => import('../../services/ai/imageModelCapabilities.js').ImageModelCapability|null,
      *   onChange: (patch: object) => void,
      *   onClearHistory: () => void
      * }} handlers
@@ -22,6 +36,8 @@ export class ChatSettingsPopup {
         this._docClickHandler = null;
         this._isOpen = false;
         this._fields = null;
+        // Обёртка секции доп-настроек — скрывается целиком, когда модель ничего не поддерживает
+        this._imageGenSection = null;
     }
 
     attach() {
@@ -35,15 +51,19 @@ export class ChatSettingsPopup {
     refresh() {
         if (!this._fields) return;
         const s = this._handlers.getSettings?.() || {};
-        if (document.activeElement !== this._fields.system) {
-            this._fields.system.value = s.systemPrompt || '';
-        }
-        if (document.activeElement !== this._fields.temperature) {
-            this._fields.temperature.value = formatNumber(s.temperature);
-        }
-        if (document.activeElement !== this._fields.maxTokens) {
-            this._fields.maxTokens.value = String(s.maxTokens ?? '');
-        }
+
+        const imageVisible = this._refreshImageGenSection(s);
+
+        // Кнопка-триггер видна только когда для текущей модели есть хотя бы
+        // одна поддерживаемая настройка генерации изображения. Видео-настройки
+        // живут в тулбаре (ChatVideoToolbarPills), не в этой панели.
+        this._setTriggerVisible(imageVisible);
+    }
+
+    _setTriggerVisible(visible) {
+        const host = this._trigger?.parentNode || this._trigger;
+        if (host) host.style.display = visible ? 'inline-flex' : 'none';
+        if (!visible && this._isOpen) this.close();
     }
 
     toggle() {
@@ -78,58 +98,144 @@ export class ChatSettingsPopup {
         for (const off of this._listeners) off();
         this._listeners = [];
         this._fields = null;
+        this._imageGenSection = null;
     }
 
     _buildContent() {
         const fields = {};
         const fragment = document.createDocumentFragment();
 
-        fragment.appendChild(this._buildField({
-            label: 'Системный промпт',
-            input: () => {
-                const ta = document.createElement('textarea');
-                ta.className = 'moodboard-chat__settings-textarea';
-                ta.rows = 3;
-                fields.system = ta;
-                this._on(ta, 'change', () => this._handlers.onChange?.({ systemPrompt: ta.value }));
-                return ta;
-            }
-        }));
+        // Секция доп-настроек генерации изображения
+        const imageGenSection = document.createElement('div');
+        imageGenSection.className = 'moodboard-chat__settings-image-section';
+        imageGenSection.style.display = 'none';
+
+        const sectionDivider = document.createElement('div');
+        sectionDivider.className = 'moodboard-chat__settings-divider';
+        sectionDivider.style.cssText = 'border-top:1px solid #E5E7EB;margin:2px 0;';
+        imageGenSection.appendChild(sectionDivider);
 
-        fragment.appendChild(this._buildField({
-            label: 'Temperature (0–1)',
+        const sectionTitle = document.createElement('div');
+        sectionTitle.className = 'moodboard-chat__settings-label';
+        sectionTitle.textContent = 'Параметры генерации';
+        sectionTitle.style.marginTop = '4px';
+        imageGenSection.appendChild(sectionTitle);
+
+        // Seed
+        const seedField = this._buildField({
+            label: 'Seed (число)',
             input: () => {
                 const inp = document.createElement('input');
                 inp.type = 'number';
-                inp.step = '0.1';
                 inp.min = '0';
-                inp.max = '2';
+                inp.step = '1';
+                inp.placeholder = 'Случайный';
                 inp.className = 'moodboard-chat__settings-input';
-                fields.temperature = inp;
+                fields.seed = inp;
                 this._on(inp, 'change', () => {
-                    const v = Number(inp.value);
-                    if (!Number.isNaN(v)) this._handlers.onChange?.({ temperature: v });
+                    const raw = inp.value.trim();
+                    const v = raw === '' ? null : Number.parseInt(raw, 10);
+                    this._handlers.onChange?.({ seed: (v !== null && !Number.isNaN(v)) ? v : null });
                 });
                 return inp;
             }
-        }));
+        });
+        seedField.dataset.imageGenField = 'seed';
+        imageGenSection.appendChild(seedField);
 
-        fragment.appendChild(this._buildField({
-            label: 'Max tokens',
+        // Негативный промпт
+        const negField = this._buildField({
+            label: 'Негативный промпт',
             input: () => {
                 const inp = document.createElement('input');
-                inp.type = 'number';
-                inp.step = '100';
-                inp.min = '1';
+                inp.type = 'text';
+                inp.placeholder = 'Что исключить из изображения';
                 inp.className = 'moodboard-chat__settings-input';
-                fields.maxTokens = inp;
+                fields.negativePrompt = inp;
                 this._on(inp, 'change', () => {
-                    const v = Number.parseInt(inp.value, 10);
-                    if (!Number.isNaN(v) && v > 0) this._handlers.onChange?.({ maxTokens: v });
+                    this._handlers.onChange?.({ negativePrompt: inp.value });
                 });
                 return inp;
             }
-        }));
+        });
+        negField.dataset.imageGenField = 'negativePrompt';
+        imageGenSection.appendChild(negField);
+
+        // Фон (background)
+        const bgField = this._buildField({
+            label: 'Фон',
+            input: () => {
+                const sel = document.createElement('select');
+                sel.className = 'moodboard-chat__settings-input';
+                [
+                    { value: '', label: 'По умолчанию' },
+                    { value: 'opaque', label: 'Непрозрачный' },
+                    { value: 'auto', label: 'Авто' }
+                ].forEach(({ value, label }) => {
+                    const opt = document.createElement('option');
+                    opt.value = value;
+                    opt.textContent = label;
+                    sel.appendChild(opt);
+                });
+                fields.background = sel;
+                this._on(sel, 'change', () => {
+                    this._handlers.onChange?.({ background: sel.value || null });
+                });
+                return sel;
+            }
+        });
+        bgField.dataset.imageGenField = 'background';
+        imageGenSection.appendChild(bgField);
+
+        // Формат файла (outputFormat)
+        const fmtField = this._buildField({
+            label: 'Формат файла',
+            input: () => {
+                const sel = document.createElement('select');
+                sel.className = 'moodboard-chat__settings-input';
+                [
+                    { value: '', label: 'По умолчанию' },
+                    { value: 'png', label: 'PNG' },
+                    { value: 'jpeg', label: 'JPEG' },
+                    { value: 'webp', label: 'WebP' }
+                ].forEach(({ value, label }) => {
+                    const opt = document.createElement('option');
+                    opt.value = value;
+                    opt.textContent = label;
+                    sel.appendChild(opt);
+                });
+                fields.outputFormat = sel;
+                this._on(sel, 'change', () => {
+                    this._handlers.onChange?.({ outputFormat: sel.value || null });
+                });
+                return sel;
+            }
+        });
+        fmtField.dataset.imageGenField = 'outputFormat';
+        imageGenSection.appendChild(fmtField);
+
+        // Авто-расширение промпта
+        const extField = this._buildCheckboxField({
+            label: 'Авто-расширение промпта',
+            key: 'promptExtend',
+            fields,
+            onChange: (v) => this._handlers.onChange?.({ promptExtend: v })
+        });
+        extField.dataset.imageGenField = 'promptExtend';
+        imageGenSection.appendChild(extField);
+
+        // Водяной знак
+        const wmField = this._buildCheckboxField({
+            label: 'Водяной знак',
+            key: 'watermark',
+            fields,
+            onChange: (v) => this._handlers.onChange?.({ watermark: v })
+        });
+        wmField.dataset.imageGenField = 'watermark';
+        imageGenSection.appendChild(wmField);
+
+        fragment.appendChild(imageGenSection);
+        this._imageGenSection = imageGenSection;
 
         const row = document.createElement('div');
         row.className = 'moodboard-chat__settings-popup-row';
@@ -148,6 +254,47 @@ export class ChatSettingsPopup {
         this._fields = fields;
     }
 
+    /**
+     * Показывает/скрывает поля секции генерации и синхронизирует значения
+     * в зависимости от текущих возможностей модели.
+     */
+    _refreshImageGenSection(s) {
+        if (!this._imageGenSection || !this._fields) return false;
+        const isImage = this._handlers.getContentType?.() === 'image';
+        const cap = isImage ? (this._handlers.getCapability?.() ?? null) : null;
+        const sup = cap?.supports ?? {};
+
+        const anyVisible = !!(sup.seed || sup.negativePrompt || sup.background || sup.outputFormat || sup.promptExtend || sup.watermark);
+        this._imageGenSection.style.display = anyVisible ? '' : 'none';
+
+        // Показываем/скрываем отдельные поля по флагам
+        for (const el of this._imageGenSection.querySelectorAll('[data-image-gen-field]')) {
+            const flag = el.dataset.imageGenField;
+            el.style.display = sup[flag] ? '' : 'none';
+        }
+
+        // Синхронизируем значения только если поле не активно
+        if (sup.seed && document.activeElement !== this._fields.seed) {
+            this._fields.seed.value = s.seed != null ? String(s.seed) : '';
+        }
+        if (sup.negativePrompt && document.activeElement !== this._fields.negativePrompt) {
+            this._fields.negativePrompt.value = s.negativePrompt || '';
+        }
+        if (sup.background) {
+            this._fields.background.value = s.background || '';
+        }
+        if (sup.outputFormat) {
+            this._fields.outputFormat.value = s.outputFormat || '';
+        }
+        if (sup.promptExtend && this._fields.promptExtend) {
+            this._fields.promptExtend.checked = Boolean(s.promptExtend);
+        }
+        if (sup.watermark && this._fields.watermark) {
+            this._fields.watermark.checked = Boolean(s.watermark);
+        }
+        return anyVisible;
+    }
+
     _buildField({ label, input }) {
         const wrap = document.createElement('div');
         wrap.className = 'moodboard-chat__settings-field';
@@ -159,13 +306,32 @@ export class ChatSettingsPopup {
         return wrap;
     }
 
+    _buildCheckboxField({ label, key, fields, onChange }) {
+        const wrap = document.createElement('div');
+        wrap.className = 'moodboard-chat__settings-field';
+        wrap.style.flexDirection = 'row';
+        wrap.style.alignItems = 'center';
+        wrap.style.gap = '8px';
+
+        const cb = document.createElement('input');
+        cb.type = 'checkbox';
+        cb.className = 'moodboard-chat__settings-checkbox';
+        fields[key] = cb;
+        this._on(cb, 'change', () => onChange(cb.checked));
+
+        const labelEl = document.createElement('label');
+        labelEl.className = 'moodboard-chat__settings-label';
+        labelEl.style.textTransform = 'none';
+        labelEl.style.cursor = 'pointer';
+        labelEl.textContent = label;
+
+        wrap.appendChild(cb);
+        wrap.appendChild(labelEl);
+        return wrap;
+    }
+
     _on(el, type, handler) {
         el.addEventListener(type, handler);
         this._listeners.push(() => el.removeEventListener(type, handler));
     }
 }
-
-function formatNumber(n) {
-    if (typeof n !== 'number' || Number.isNaN(n)) return '';
-    return String(Math.round(n * 100) / 100);
-}

package/src/ui/chat/ChatVideoToolbarPills.js

@@ -0,0 +1,284 @@
+import { ICONS } from './icons.js';
+import { ChatPillMenu } from './ChatPillMenu.js';
+import { getVideoModelCapability } from '../../services/ai/videoModelCapabilities.js';
+
+/**
+ * Видео-настройки как пилюли тулбара (вместо отдельной всплывающей панели).
+ *
+ * Каждая пилюля видна только когда выбран тип «видео» и текущая модель
+ * поддерживает соответствующий параметр (по capability.supports).
+ *
+ * Типы контролов:
+ *   - тумблеры (Звук, Водяной знак) — клик переключает значение;
+ *   - выбор (Люди) — пилюля-меню как формат/модель;
+ *   - свободный ввод (Seed, CFG, Негатив) — пилюля с мини-поповером,
+ *     привязанным к ней (тот же механизм, что у меню формата).
+ *
+ * Одна ответственность: построить/обновлять пилюли видео-настроек и
+ * прокидывать изменения наружу через onChange.
+ */
+export class ChatVideoToolbarPills {
+    /**
+     * @param {HTMLElement} pillsContainer
+     * @param {{
+     *   getActive: () => boolean,
+     *   getModelId: () => string,
+     *   getState: () => { seed:number|null, negativePrompt:string, audio:boolean, watermark:boolean, cfgScale:number|null, personGeneration:string },
+     *   onChange: (patch: object) => void
+     * }} handlers
+     */
+    constructor(pillsContainer, handlers) {
+        this._container = pillsContainer;
+        this._h = handlers;
+        this._listeners = [];
+        this._entries = [];      // { flag, wrapper }
+        this._pills = {};        // flag -> pill button
+        this._toggleIcons = {};  // flag -> { span, on, off } для смены иконки тумблера
+        this._labels = {};       // flag -> label span (для value-пилюль)
+        this._inputs = {};       // flag -> input element
+        this._personMenu = null;
+        this._popover = null;    // { menu, pill }
+        this._docHandler = null;
+    }
+
+    attach() {
+        this._buildToggle('audio', 'Звук', ICONS.audio, {
+            iconOff: ICONS.audioOff,
+            title: 'Звук в видео: вкл / выкл',
+        });
+        this._buildToggle('watermark', 'Водяной знак', ICONS.watermark, {
+            title: 'Водяной знак на видео: вкл / выкл',
+        });
+        this._buildPersonPill();
+        this._buildSeedPill();
+        this._buildCfgPill();
+        this._buildNegativePill();
+    }
+
+    refresh() {
+        const active = !!this._h.getActive?.();
+        const cap = active ? getVideoModelCapability(this._h.getModelId?.()) : null;
+        const sup = cap?.supports ?? {};
+        const st = this._h.getState?.() ?? {};
+
+        for (const { flag, wrapper } of this._entries) {
+            wrapper.style.display = (active && sup[flag]) ? '' : 'none';
+        }
+        if (!active) {
+            this._closePopover();
+            return;
+        }
+
+        this._applyToggleState('audio', !!st.audio);
+        this._applyToggleState('watermark', !!st.watermark);
+
+        this._personMenu?.refresh();
+
+        if (this._labels.seed) this._labels.seed.textContent = st.seed != null ? `Seed · ${st.seed}` : 'Seed';
+        if (this._inputs.seed && document.activeElement !== this._inputs.seed) {
+            this._inputs.seed.value = st.seed != null ? String(st.seed) : '';
+        }
+
+        if (this._labels.cfgScale) {
+            this._labels.cfgScale.textContent = st.cfgScale != null ? `CFG · ${Number(st.cfgScale).toFixed(2)}` : 'CFG';
+        }
+        if (this._inputs.cfgScale) {
+            this._inputs.cfgScale.value = st.cfgScale != null ? String(st.cfgScale) : '0.5';
+        }
+
+        const hasNeg = !!(st.negativePrompt && st.negativePrompt.trim());
+        if (this._pills.negativePrompt) this._pills.negativePrompt.dataset.active = hasNeg ? 'true' : 'false';
+        if (this._inputs.negativePrompt && document.activeElement !== this._inputs.negativePrompt) {
+            this._inputs.negativePrompt.value = st.negativePrompt || '';
+        }
+    }
+
+    destroy() {
+        this._closePopover();
+        for (const off of this._listeners) off();
+        this._listeners = [];
+        this._personMenu?.destroy();
+        this._personMenu = null;
+        for (const { wrapper } of this._entries) wrapper.remove();
+        this._entries = [];
+        this._pills = {};
+        this._toggleIcons = {};
+        this._labels = {};
+        this._inputs = {};
+    }
+
+    _registerWrapper(flag, wrapper) {
+        wrapper.style.display = 'none';
+        this._container.appendChild(wrapper);
+        this._entries.push({ flag, wrapper });
+    }
+
+    _makePill(icon, labelText) {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'moodboard-chat__pill-wrapper';
+        const pill = document.createElement('button');
+        pill.type = 'button';
+        pill.className = 'moodboard-chat__pill';
+        const iconSpan = document.createElement('span');
+        iconSpan.className = 'moodboard-chat__pill-icon-wrap';
+        iconSpan.innerHTML = icon;
+        const labelEl = document.createElement('span');
+        labelEl.className = 'moodboard-chat__pill-label';
+        labelEl.textContent = labelText;
+        pill.appendChild(iconSpan);
+        pill.appendChild(labelEl);
+        wrapper.appendChild(pill);
+        return { wrapper, pill, labelEl, iconSpan };
+    }
+
+    _buildToggle(flag, labelText, icon, opts = {}) {
+        const { wrapper, pill, iconSpan } = this._makePill(icon, labelText);
+        pill.classList.add('moodboard-chat__pill--toggle');
+        pill.setAttribute('aria-pressed', 'false');
+        if (opts.title) pill.title = opts.title;
+        this._pills[flag] = pill;
+        this._toggleIcons[flag] = { span: iconSpan, on: icon, off: opts.iconOff ?? icon };
+        this._on(pill, 'click', () => {
+            const st = this._h.getState?.() ?? {};
+            this._h.onChange?.({ [flag]: !st[flag] });
+        });
+        this._registerWrapper(flag, wrapper);
+    }
+
+    _applyToggleState(flag, on) {
+        const pill = this._pills[flag];
+        if (!pill) return;
+        pill.dataset.active = on ? 'true' : 'false';
+        pill.setAttribute('aria-pressed', on ? 'true' : 'false');
+        const ic = this._toggleIcons[flag];
+        if (ic) ic.span.innerHTML = on ? ic.on : ic.off;
+    }
+
+    _buildPersonPill() {
+        const { wrapper, pill, labelEl } = this._makePill(ICONS.users, 'Разрешить');
+        pill.setAttribute('aria-haspopup', 'menu');
+        pill.setAttribute('aria-expanded', 'false');
+        const menu = document.createElement('div');
+        menu.className = 'moodboard-chat__menu';
+        menu.setAttribute('role', 'menu');
+        wrapper.appendChild(menu);
+        this._pills.personGeneration = pill;
+        this._personMenu = new ChatPillMenu(
+            { trigger: pill, menu, label: labelEl },
+            {
+                getOptions: () => [
+                    { id: 'allow_all', label: 'Разрешить' },
+                    { id: 'disallow', label: 'Запретить' },
+                ],
+                getActiveId: () => this._h.getState?.().personGeneration ?? 'allow_all',
+                onSelect: (id) => this._h.onChange?.({ personGeneration: id }),
+            }
+        );
+        this._personMenu.attach();
+        this._registerWrapper('personGeneration', wrapper);
+    }
+
+    _buildSeedPill() {
+        this._buildPopoverPill('seed', 'Seed', ICONS.seed, 'Зерно генерации', (body) => {
+            const input = document.createElement('input');
+            input.type = 'number';
+            input.min = '0';
+            input.step = '1';
+            input.placeholder = 'Случайно';
+            input.className = 'moodboard-chat__settings-input';
+            this._inputs.seed = input;
+            this._on(input, 'input', () => {
+                const raw = input.value.trim();
+                const v = raw === '' ? null : Number.parseInt(raw, 10);
+                this._h.onChange?.({ seed: (v != null && !Number.isNaN(v)) ? v : null });
+            });
+            body.appendChild(input);
+            const hint = document.createElement('div');
+            hint.className = 'moodboard-chat__settings-hint';
+            hint.textContent = 'Число, фиксирующее случайность. Одно и то же число — похожий результат. Пусто — каждый раз по-новому.';
+            body.appendChild(hint);
+        }, { title: 'Seed — число для повторяемости результата' });
+    }
+
+    _buildCfgPill() {
+        this._buildPopoverPill('cfgScale', 'CFG', ICONS.gauge, 'CFG Scale (0–1)', (body) => {
+            const input = document.createElement('input');
+            input.type = 'range';
+            input.min = '0';
+            input.max = '1';
+            input.step = '0.05';
+            input.className = 'moodboard-chat__settings-input';
+            this._inputs.cfgScale = input;
+            this._on(input, 'input', () => this._h.onChange?.({ cfgScale: Number(input.value) }));
+            body.appendChild(input);
+        });
+    }
+
+    _buildNegativePill() {
+        this._buildPopoverPill('negativePrompt', 'Негатив', ICONS.negative, 'Негативный промпт', (body) => {
+            const input = document.createElement('input');
+            input.type = 'text';
+            input.placeholder = 'Что исключить';
+            input.className = 'moodboard-chat__settings-input';
+            this._inputs.negativePrompt = input;
+            this._on(input, 'input', () => this._h.onChange?.({ negativePrompt: input.value }));
+            body.appendChild(input);
+        });
+    }
+
+    _buildPopoverPill(flag, labelText, icon, fieldLabel, buildBody, opts = {}) {
+        const { wrapper, pill, labelEl } = this._makePill(icon, labelText);
+        pill.setAttribute('aria-haspopup', 'dialog');
+        pill.setAttribute('aria-expanded', 'false');
+        if (opts.title) pill.title = opts.title;
+
+        const menu = document.createElement('div');
+        menu.className = 'moodboard-chat__menu moodboard-chat__pill-popover';
+
+        const body = document.createElement('div');
+        body.className = 'moodboard-chat__pill-popover-body';
+        const label = document.createElement('div');
+        label.className = 'moodboard-chat__settings-label';
+        label.textContent = fieldLabel;
+        body.appendChild(label);
+        buildBody(body);
+        menu.appendChild(body);
+        wrapper.appendChild(menu);
+
+        this._pills[flag] = pill;
+        this._labels[flag] = labelEl;
+        this._on(pill, 'click', (e) => {
+            e.stopPropagation();
+            if (this._popover?.menu === menu) this._closePopover();
+            else this._openPopover(menu, pill);
+        });
+        this._registerWrapper(flag, wrapper);
+    }
+
+    _openPopover(menu, pill) {
+        this._closePopover();
+        menu.classList.add('is-open');
+        pill.setAttribute('aria-expanded', 'true');
+        this._popover = { menu, pill };
+        this._docHandler = (e) => {
+            if (!menu.contains(e.target) && !pill.contains(e.target)) this._closePopover();
+        };
+        document.addEventListener('mousedown', this._docHandler);
+    }
+
+    _closePopover() {
+        if (!this._popover) return;
+        this._popover.menu.classList.remove('is-open');
+        this._popover.pill.setAttribute('aria-expanded', 'false');
+        this._popover = null;
+        if (this._docHandler) {
+            document.removeEventListener('mousedown', this._docHandler);
+            this._docHandler = null;
+        }
+    }
+
+    _on(el, type, handler) {
+        el.addEventListener(type, handler);
+        this._listeners.push(() => el.removeEventListener(type, handler));
+    }
+}