@sequent-org/moodboard 1.4.26 → 1.4.28

package/src/ui/chat/ChatPillMenu.js

@@ -0,0 +1,141 @@
+/**
+ * Универсальный «пилл с выпадающим меню».
+ *
+ * Используется и для переключателя моделей (Yandex/DeepSeek),
+ * и для пресетов промпта (Default/Design helper/...).
+ *
+ * Одна ответственность: отрисовать список опций по triggerEl,
+ * показывать/скрывать меню, диспатчить onSelect(id).
+ *
+ * Не знает, какие именно опции — получает их извне.
+ */
+
+export class ChatPillMenu {
+    /**
+     * @param {{ trigger: HTMLElement, menu: HTMLElement, label: HTMLElement, icon?: HTMLElement }} refs
+     * @param {{ onSelect: (id: string) => void, getOptions: () => Array<{id: string, label: string, enabled?: boolean, hint?: string, description?: string, icon?: string}>, getActiveId: () => string }} handlers
+     */
+    constructor(refs, handlers) {
+        this._trigger = refs.trigger;
+        this._menu = refs.menu;
+        this._label = refs.label;
+        this._icon = refs.icon || null;
+        this._handlers = handlers;
+        this._listeners = [];
+        this._isOpen = false;
+        this._docClickHandler = null;
+    }
+
+    attach() {
+        this._on(this._trigger, 'click', (e) => {
+            e.stopPropagation();
+            this.toggle();
+        });
+        this._on(this._menu, 'click', (e) => {
+            const item = e.target.closest('[data-option-id]');
+            if (!item || item.hasAttribute('disabled')) return;
+            const id = item.getAttribute('data-option-id');
+            this.close();
+            this._handlers.onSelect?.(id);
+        });
+    }
+
+    refresh() {
+        const options = this._handlers.getOptions?.() || [];
+        const activeId = this._handlers.getActiveId?.();
+
+        const fragment = document.createDocumentFragment();
+        for (const opt of options) {
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = 'moodboard-chat__menu-item';
+            if (opt.icon || opt.description) {
+                btn.classList.add('moodboard-chat__menu-item--rich');
+            }
+            btn.setAttribute('data-option-id', opt.id);
+            btn.setAttribute('role', 'menuitemradio');
+            if (opt.enabled === false) btn.setAttribute('disabled', '');
+            if (opt.id === activeId) btn.setAttribute('data-active', 'true');
+
+            if (opt.icon) {
+                const iconSpan = document.createElement('span');
+                iconSpan.className = 'moodboard-chat__menu-item-icon';
+                iconSpan.innerHTML = opt.icon;
+                btn.appendChild(iconSpan);
+            }
+
+            const textWrap = document.createElement('span');
+            textWrap.className = 'moodboard-chat__menu-item-text';
+
+            const labelSpan = document.createElement('span');
+            labelSpan.className = 'moodboard-chat__menu-item-label';
+            labelSpan.textContent = opt.label;
+            textWrap.appendChild(labelSpan);
+
+            if (opt.description) {
+                const descSpan = document.createElement('span');
+                descSpan.className = 'moodboard-chat__menu-item-description';
+                descSpan.textContent = opt.description;
+                textWrap.appendChild(descSpan);
+            }
+
+            btn.appendChild(textWrap);
+
+            if (opt.hint) {
+                const hintSpan = document.createElement('span');
+                hintSpan.className = 'moodboard-chat__menu-item-hint';
+                hintSpan.textContent = opt.hint;
+                btn.appendChild(hintSpan);
+            }
+
+            fragment.appendChild(btn);
+        }
+        this._menu.replaceChildren(fragment);
+
+        const active = options.find((o) => o.id === activeId);
+        if (active) {
+            this._label.textContent = active.label;
+            if (this._icon && active.icon) this._icon.innerHTML = active.icon;
+        }
+    }
+
+    toggle() {
+        if (this._isOpen) this.close();
+        else this.open();
+    }
+
+    open() {
+        this.refresh();
+        this._menu.classList.add('is-open');
+        this._trigger.setAttribute('aria-expanded', 'true');
+        this._isOpen = true;
+        this._docClickHandler = (e) => {
+            if (!this._menu.contains(e.target) && !this._trigger.contains(e.target)) {
+                this.close();
+            }
+        };
+        document.addEventListener('mousedown', this._docClickHandler);
+    }
+
+    close() {
+        if (!this._isOpen) return;
+        this._menu.classList.remove('is-open');
+        this._trigger.setAttribute('aria-expanded', 'false');
+        this._isOpen = false;
+        if (this._docClickHandler) {
+            document.removeEventListener('mousedown', this._docClickHandler);
+            this._docClickHandler = null;
+        }
+    }
+
+    destroy() {
+        this.close();
+        for (const off of this._listeners) off();
+        this._listeners = [];
+    }
+
+    _on(el, type, handler) {
+        el.addEventListener(type, handler);
+        this._listeners.push(() => el.removeEventListener(type, handler));
+    }
+}

package/src/ui/chat/ChatSettingsPopup.js

@@ -0,0 +1,171 @@
+/**
+ * Попап настроек чата (системный промпт, temperature, maxTokens, очистить историю).
+ *
+ * Одна ответственность: построить контент попапа, прокинуть значения
+ * наружу при изменении, открывать/закрывать по триггеру.
+ */
+
+export class ChatSettingsPopup {
+    /**
+     * @param {{ trigger: HTMLElement, popup: HTMLElement }} refs
+     * @param {{
+     *   getSettings: () => { systemPrompt: string, temperature: number, maxTokens: number },
+     *   onChange: (patch: object) => void,
+     *   onClearHistory: () => void
+     * }} handlers
+     */
+    constructor(refs, handlers) {
+        this._trigger = refs.trigger;
+        this._popup = refs.popup;
+        this._handlers = handlers;
+        this._listeners = [];
+        this._docClickHandler = null;
+        this._isOpen = false;
+        this._fields = null;
+    }
+
+    attach() {
+        this._buildContent();
+        this._on(this._trigger, 'click', (e) => {
+            e.stopPropagation();
+            this.toggle();
+        });
+    }
+
+    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 ?? '');
+        }
+    }
+
+    toggle() {
+        if (this._isOpen) this.close();
+        else this.open();
+    }
+
+    open() {
+        this.refresh();
+        this._popup.classList.add('is-open');
+        this._isOpen = true;
+        this._docClickHandler = (e) => {
+            if (!this._popup.contains(e.target) && !this._trigger.contains(e.target)) {
+                this.close();
+            }
+        };
+        document.addEventListener('mousedown', this._docClickHandler);
+    }
+
+    close() {
+        if (!this._isOpen) return;
+        this._popup.classList.remove('is-open');
+        this._isOpen = false;
+        if (this._docClickHandler) {
+            document.removeEventListener('mousedown', this._docClickHandler);
+            this._docClickHandler = null;
+        }
+    }
+
+    destroy() {
+        this.close();
+        for (const off of this._listeners) off();
+        this._listeners = [];
+        this._fields = 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;
+            }
+        }));
+
+        fragment.appendChild(this._buildField({
+            label: 'Temperature (0–1)',
+            input: () => {
+                const inp = document.createElement('input');
+                inp.type = 'number';
+                inp.step = '0.1';
+                inp.min = '0';
+                inp.max = '2';
+                inp.className = 'moodboard-chat__settings-input';
+                fields.temperature = inp;
+                this._on(inp, 'change', () => {
+                    const v = Number(inp.value);
+                    if (!Number.isNaN(v)) this._handlers.onChange?.({ temperature: v });
+                });
+                return inp;
+            }
+        }));
+
+        fragment.appendChild(this._buildField({
+            label: 'Max tokens',
+            input: () => {
+                const inp = document.createElement('input');
+                inp.type = 'number';
+                inp.step = '100';
+                inp.min = '1';
+                inp.className = 'moodboard-chat__settings-input';
+                fields.maxTokens = inp;
+                this._on(inp, 'change', () => {
+                    const v = Number.parseInt(inp.value, 10);
+                    if (!Number.isNaN(v) && v > 0) this._handlers.onChange?.({ maxTokens: v });
+                });
+                return inp;
+            }
+        }));
+
+        const row = document.createElement('div');
+        row.className = 'moodboard-chat__settings-popup-row';
+        const clearBtn = document.createElement('button');
+        clearBtn.type = 'button';
+        clearBtn.className = 'moodboard-chat__settings-clear';
+        clearBtn.textContent = 'Очистить историю';
+        this._on(clearBtn, 'click', () => {
+            this._handlers.onClearHistory?.();
+            this.close();
+        });
+        row.appendChild(clearBtn);
+        fragment.appendChild(row);
+
+        this._popup.replaceChildren(fragment);
+        this._fields = fields;
+    }
+
+    _buildField({ label, input }) {
+        const wrap = document.createElement('div');
+        wrap.className = 'moodboard-chat__settings-field';
+        const labelEl = document.createElement('div');
+        labelEl.className = 'moodboard-chat__settings-label';
+        labelEl.textContent = label;
+        wrap.appendChild(labelEl);
+        wrap.appendChild(input());
+        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);
+}