@things-factory/ai-assistant 10.1.47 → 10.1.50

package/dist-client/components/assistant-session-manager.js

@@ -0,0 +1,652 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { OxPrompt } from '@operato/popup';
+import { assistantSessionAdmin, sessionActions } from '../utils/assistant-session-admin.js';
+const PAGE = 30;
+const t = (key, defaultValue, options = {}) => i18next.t(`ai-assistant.session.${key}`, { defaultValue, ...options });
+/**
+ * The conversations on one anchor, managed - `<ox-assistant-session-manager>`.
+ *
+ * Search, a filter (all / mine / including hidden), paging, and on each row: open, rename, hide or
+ * unhide, private ⇄ public, delete. Taken from operato-twin's dock, where it was written first, so every
+ * dock gets it by placing this element (typically behind the toolbar's "All History").
+ *
+ * ── What is the host's ──────────────────────────────────────────────────────────
+ * Opening and starting a conversation belong to the dock's session controller, so this element asks
+ * with the toolbar's own events and does not open anything itself:
+ *   assistant-session-select   { sessionId }    open that conversation
+ *   assistant-session-reset                     start a new one
+ *   assistant-session-changed  { sessionId, change: 'renamed' | 'hidden' | 'unhidden' | 'removed' | 'visibility' }
+ *                                               a row changed - the host refreshes its tabs; if the open
+ *                                               conversation was removed or hidden, it moves off it
+ *
+ * ── What is the server's ────────────────────────────────────────────────────────
+ * Who may do what (`sessionActions`): rename any participant, hide anyone for their own list, delete
+ * the creator, visibility the owner. The buttons follow those hints; the doors decide again.
+ *
+ * ── Asking before what cannot be undone ─────────────────────────────────────────
+ * Delete, and opening a private conversation to the domain, ask on the row itself - [Cancel][OK].
+ * Making it private, hiding and renaming do not: each can be undone from the same row.
+ */
+let AssistantSessionManager = class AssistantSessionManager extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The anchor whose conversations are listed - the same one the dock's session controller opened. */
+        this.anchorType = '';
+        this.anchorId = '';
+        /** The conversation the dock has open - marked in the list. */
+        this.sessionId = '';
+        /** The doors. Replaceable for tests; a host normally leaves it. */
+        this.admin = assistantSessionAdmin;
+        /** The conversation kind (mode) open in the dock - the list's default scope (§2-6). */
+        this.kind = '';
+        /** kind → the words people know it by (the modes' labels), for each row. */
+        this.kindLabels = {};
+        this.entries = [];
+        this.total = 0;
+        this.hiddenCount = 0;
+        this.search = '';
+        this.allKinds = false;
+        this.whose = 'all';
+        this.visibility = 'all';
+        this.includeHidden = false;
+        this.unreadOnly = false;
+        this.pageSize = PAGE;
+        this.loading = false;
+        this.error = '';
+        this.renamingId = '';
+        this.generation = 0;
+    }
+    static { this.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      font-size: 12.5px;
+      color: var(--md-sys-color-on-surface);
+    }
+
+    .bar {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 10px;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    }
+
+    .bar input,
+    .bar select {
+      min-width: 0;
+      height: 28px;
+      box-sizing: border-box;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 6px;
+      background: var(--md-sys-color-surface-container-lowest);
+      color: inherit;
+      font: inherit;
+      padding: 0 8px;
+    }
+
+    .bar input {
+      flex: 1;
+    }
+
+    .new {
+      flex: none;
+      border: 0;
+      border-radius: 6px;
+      padding: 4px 8px;
+      background: transparent;
+      color: var(--md-sys-color-primary);
+      font: inherit;
+      font-weight: 650;
+      cursor: pointer;
+    }
+
+    .filters {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 6px 10px;
+      padding: 6px 10px;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      font-size: 11.5px;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+
+    .filters select {
+      height: 26px;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 6px;
+      background: var(--md-sys-color-surface-container-lowest);
+      color: inherit;
+      font: inherit;
+    }
+
+    .filters label {
+      display: inline-flex;
+      align-items: center;
+      gap: 3px;
+      cursor: pointer;
+    }
+
+    .kind {
+      color: var(--md-sys-color-primary);
+    }
+
+    .list {
+      flex: 1;
+      min-height: 0;
+      overflow: auto;
+    }
+
+    .row {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 9px 10px;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      cursor: pointer;
+    }
+
+    .row:hover,
+    .row.current {
+      background: var(--md-sys-color-surface-container);
+    }
+
+    .row.hidden {
+      opacity: 0.6;
+    }
+
+    .dot {
+      flex: none;
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+    }
+
+    .row.unread .dot {
+      background: var(--md-sys-color-primary);
+    }
+
+    .row md-icon {
+      --md-icon-size: 16px;
+      flex: none;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+
+    .body {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .title,
+    .prev {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .row.unread .title {
+      font-weight: 700;
+    }
+
+    .prev {
+      color: var(--md-sys-color-on-surface-variant);
+      font-size: 11px;
+    }
+
+    /* Row actions show on hover and on keyboard focus - the list's body is the names. */
+    .acts {
+      display: none;
+      gap: 2px;
+    }
+
+    .row:hover .acts,
+    .row:focus-within .acts {
+      display: flex;
+    }
+
+    button.icon {
+      display: inline-flex;
+      padding: 3px;
+      border: 0;
+      border-radius: 6px;
+      background: none;
+      color: var(--md-sys-color-on-surface-variant);
+      cursor: pointer;
+    }
+
+    button.icon:hover {
+      background: var(--md-sys-color-surface-container-high);
+      color: var(--md-sys-color-on-surface);
+    }
+
+    button.icon.danger:hover {
+      color: var(--md-sys-color-error);
+    }
+
+    .rename {
+      flex: 1;
+      min-width: 0;
+      height: 26px;
+      border: 1px solid var(--md-sys-color-primary);
+      border-radius: 6px;
+      padding: 0 6px;
+      font: inherit;
+      background: var(--md-sys-color-surface-container-lowest);
+      color: inherit;
+    }
+
+    .ask {
+      display: grid;
+      gap: 6px;
+      padding: 10px;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      background: var(--md-sys-color-surface-container);
+    }
+
+    .ask .buttons {
+      display: flex;
+      justify-content: flex-end;
+      gap: 6px;
+    }
+
+    .ask button {
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 6px;
+      padding: 4px 10px;
+      background: var(--md-sys-color-surface-container-lowest);
+      color: inherit;
+      font: inherit;
+      cursor: pointer;
+    }
+
+    .ask button.ok {
+      border-color: var(--md-sys-color-primary);
+      background: var(--md-sys-color-primary);
+      color: var(--md-sys-color-on-primary);
+    }
+
+    .ask button.ok.danger {
+      border-color: var(--md-sys-color-error);
+      background: var(--md-sys-color-error);
+      color: var(--md-sys-color-on-error);
+    }
+
+    .note,
+    .empty {
+      padding: 14px 12px;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+
+    [role='alert'] {
+      color: var(--md-sys-color-error);
+    }
+
+    .more,
+    .hiddenfilter {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      width: 100%;
+      padding: 8px;
+      border: 0;
+      border-top: 1px solid var(--md-sys-color-outline-variant);
+      background: none;
+      color: var(--md-sys-color-on-surface-variant);
+      font: inherit;
+      cursor: pointer;
+    }
+
+    .hiddenfilter md-icon {
+      --md-icon-size: 16px;
+    }
+  `; }
+    /** Read the list again - the host calls this after it opened or started a conversation. */
+    async reload() {
+        const generation = ++this.generation;
+        if (!this.anchorType || !this.anchorId) {
+            this.entries = [];
+            this.total = this.hiddenCount = 0;
+            return;
+        }
+        this.loading = true;
+        this.error = '';
+        try {
+            /*
+             * Paging reads again from the start rather than appending - live activity reorders the list, and
+             * appending a later page to an earlier order duplicates and drops rows.
+             */
+            const page = await this.admin.inbox({
+                anchorType: this.anchorType,
+                anchorId: this.anchorId,
+                search: this.search,
+                filters: {
+                    kind: this.allKinds ? '' : this.kind,
+                    whose: this.whose,
+                    visibility: this.visibility,
+                    includeHidden: this.includeHidden,
+                    unreadOnly: this.unreadOnly
+                },
+                limit: this.pageSize,
+                offset: 0
+            });
+            if (generation !== this.generation)
+                return;
+            this.entries = page.entries;
+            this.total = page.total;
+            this.hiddenCount = page.hiddenCount;
+        }
+        catch (error) {
+            if (generation !== this.generation)
+                return;
+            this.entries = [];
+            this.total = this.hiddenCount = 0;
+            this.error = error.message || t('failed', 'could not load the conversation list.');
+        }
+        finally {
+            if (generation === this.generation)
+                this.loading = false;
+        }
+    }
+    updated(changed) {
+        if (changed.has('anchorType') || changed.has('anchorId') || changed.has('admin') || changed.has('kind'))
+            void this.reload();
+        /*
+         * The rename box takes the keys the moment it opens, with the name selected. `autofocus` works once
+         * per document, so the second rename opened a box that ignored the typing (2026-09-24, operato-ecs).
+         */
+        if (changed.has('renamingId') && this.renamingId) {
+            const input = this.renderRoot.querySelector('input.rename');
+            input?.focus();
+            input?.select();
+        }
+    }
+    disconnectedCallback() {
+        this.generation++;
+        clearTimeout(this.searchTimer);
+        super.disconnectedCallback();
+    }
+    emit(name, detail) {
+        this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+    }
+    /* ── what the person does ────────────────────────────────────────────────────────── */
+    onSearch(value) {
+        this.search = value;
+        clearTimeout(this.searchTimer);
+        /* Not on every keystroke. A new search starts from the first page. */
+        this.searchTimer = setTimeout(() => {
+            this.pageSize = PAGE;
+            void this.reload();
+        }, 200);
+    }
+    /** A filter changed - the list starts from its first page again. */
+    refilter(change) {
+        change();
+        this.pageSize = PAGE;
+        void this.reload();
+    }
+    loadMore() {
+        this.pageSize += PAGE;
+        void this.reload();
+    }
+    /** Runs one door, then reads the list again - on success and on failure alike, so the row shows the truth. */
+    async act(entry, change, run, refused) {
+        this.renamingId = '';
+        try {
+            if (!(await run()))
+                this.error = refused;
+            else
+                this.emit('assistant-session-changed', { sessionId: entry.id, change });
+        }
+        catch (error) {
+            /* Never pass a failure silently - a person must not believe a conversation was deleted when it was not. */
+            this.error = error.message;
+        }
+        const error = this.error;
+        await this.reload();
+        if (error && !this.error)
+            this.error = error;
+    }
+    rename(entry, name) {
+        const trimmed = name.trim();
+        this.renamingId = '';
+        if (!trimmed || trimmed === entry.name)
+            return;
+        void this.act(entry, 'renamed', () => this.admin.rename(entry.id, trimmed), t('rename-refused', 'this conversation could not be renamed.'));
+    }
+    setHidden(entry, hidden) {
+        void this.act(entry, hidden ? 'hidden' : 'unhidden', () => this.admin.hide(entry.id, hidden), t('hide-refused', 'this conversation could not be hidden.'));
+    }
+    setVisibility(entry, visibility) {
+        void this.act(entry, 'visibility', () => this.admin.setVisibility(entry.id, visibility), t('visibility-refused', 'only the owner of this conversation can change who reads it.'));
+    }
+    _removeSession(entry) {
+        void this.act(entry, 'removed', () => this.admin.remove(entry.id), t('remove-refused', 'this conversation could not be deleted.'));
+    }
+    /* ── drawing ─────────────────────────────────────────────────────────────────────── */
+    render() {
+        const shown = this.entries.length;
+        return html `
+      <div class="bar">
+        <input
+          .value=${this.search}
+          placeholder=${t('search', 'Search names and last messages')}
+          aria-label=${t('search', 'Search names and last messages')}
+          @input=${(e) => this.onSearch(e.target.value)}
+          @keydown=${(e) => e.key === 'Escape' && this.onSearch('')}
+        />
+        <button class="new" @click=${() => this.emit('assistant-session-reset')}>+ ${t('new', 'New conversation')}</button>
+      </div>
+      <div class="filters">
+        ${this.kind
+            ? html `<select aria-label=${t('filter-kind', 'Which kind')} .value=${this.allKinds ? 'all' : 'this'}
+              @change=${(e) => this.refilter(() => (this.allKinds = e.target.value === 'all'))}>
+              <option value="this">${this.kindLabels[this.kind] || t('filter-this-kind', 'This conversation')}</option>
+              <option value="all">${t('filter-all-kinds', 'All kinds here')}</option>
+            </select>`
+            : nothing}
+        <select aria-label=${t('filter-whose', 'Whose')} .value=${this.whose}
+          @change=${(e) => this.refilter(() => (this.whose = e.target.value))}>
+          <option value="all">${t('filter-all', 'All')}</option>
+          <option value="mine">${t('filter-mine', 'Started by me')}</option>
+          <option value="participant">${t('filter-participant', "I'm in")}</option>
+        </select>
+        <select aria-label=${t('filter-visibility', 'Visibility')} .value=${this.visibility}
+          @change=${(e) => this.refilter(() => (this.visibility = e.target.value))}>
+          <option value="all">${t('filter-any-visibility', 'Public and private')}</option>
+          <option value="open">${t('filter-open', 'Public')}</option>
+          <option value="private">${t('filter-private', 'Private')}</option>
+        </select>
+        <label><input type="checkbox" .checked=${this.unreadOnly}
+          @change=${(e) => this.refilter(() => (this.unreadOnly = e.target.checked))} />${t('filter-unread', 'Unread')}</label>
+        <label><input type="checkbox" .checked=${this.includeHidden}
+          @change=${(e) => this.refilter(() => (this.includeHidden = e.target.checked))} />${t('filter-hidden', 'Including hidden')}</label>
+      </div>
+      <div class="list">
+        ${this.error ? html `<div class="note" role="alert">${this.error}</div>` : nothing}
+        ${shown === 0 && !this.loading
+            ? html `<div class="empty">${this.search ? t('no-match', 'No conversation matches "{q}".', { q: this.search }) : t('none', 'No conversations yet.')}</div>`
+            : this.entries.map(entry => this.renderRow(entry))}
+        ${shown < this.total
+            ? html `<button class="more" @click=${() => this.loadMore()}>${t('load-more', 'Show more ({rest})', { rest: this.total - shown })}</button>`
+            : nothing}
+      </div>
+      <!-- A hidden conversation must not be forgotten: say how many, and one press shows them. -->
+      ${this.hiddenCount > 0 && !this.includeHidden
+            ? html `<button class="hiddenfilter" @click=${() => this.refilter(() => (this.includeHidden = true))}>
+            <md-icon>visibility_off</md-icon>${t('hidden-count', '{count} hidden', { count: this.hiddenCount })}
+          </button>`
+            : nothing}
+    `;
+    }
+    renderRow(entry) {
+        const name = entry.name || t('untitled', 'Untitled conversation');
+        const actions = sessionActions(entry);
+        const isPrivate = entry.visibility === 'private';
+        if (this.renamingId === entry.id) {
+            return html `<div class="row">
+        <span class="dot"></span>
+        <input
+          class="rename"
+          .value=${entry.name || ''}
+          aria-label=${t('rename', 'Rename')}
+          @keydown=${(e) => {
+                if (e.key === 'Enter')
+                    this.rename(entry, e.target.value);
+                if (e.key === 'Escape')
+                    this.renamingId = '';
+            }}
+          @blur=${(e) => this.rename(entry, e.target.value)}
+        />
+      </div>`;
+        }
+        return html `<div
+      class="row ${entry.unread ? 'unread' : ''} ${entry.hidden ? 'hidden' : ''} ${entry.id === this.sessionId ? 'current' : ''}"
+      @click=${() => this.emit('assistant-session-select', { sessionId: entry.id, kind: entry.kind })}
+    >
+      <span class="dot"></span>
+      <md-icon title=${isPrivate ? t('private', 'Private - only its participants read it') : t('open', 'Public - everyone in this domain reads it')}
+        >${isPrivate ? 'lock' : 'public'}</md-icon
+      >
+      <span class="body">
+        <div class="title" @dblclick=${(e) => { e.stopPropagation(); if (actions.rename)
+            this.renamingId = entry.id; }}>${name}</div>
+        <div class="prev">${this.allKinds && entry.kind ? html `<span class="kind">${this.kindLabels[entry.kind] || entry.kind}</span> · ` : nothing}${entry.lastMessagePreview || ''}</div>
+      </span>
+      <span class="acts" @click=${(e) => e.stopPropagation()}>
+        ${actions.rename
+            ? html `<button class="icon" title=${t('rename', 'Rename')} aria-label=${t('rename', 'Rename')} @click=${() => (this.renamingId = entry.id)}>
+              <md-icon>edit</md-icon>
+            </button>`
+            : nothing}
+        ${actions.setVisibility
+            ? isPrivate
+                ? html `<button class="icon" title=${t('make-open', 'Make public')} aria-label=${t('make-open', 'Make public')}
+                @click=${() => this.askOpen(entry, name)}><md-icon>public</md-icon></button>`
+                : html `<button class="icon" title=${t('make-private', 'Make private')} aria-label=${t('make-private', 'Make private')}
+                @click=${() => this.setVisibility(entry, 'private')}><md-icon>lock</md-icon></button>`
+            : nothing}
+        <button
+          class="icon"
+          title=${actions.unhide ? t('unhide', 'Show in my list') : t('hide', 'Hide from my list')}
+          aria-label=${actions.unhide ? t('unhide', 'Show in my list') : t('hide', 'Hide from my list')}
+          @click=${() => this.setHidden(entry, !entry.hidden)}
+        >
+          <md-icon>${actions.unhide ? 'visibility' : 'visibility_off'}</md-icon>
+        </button>
+        ${actions.remove
+            ? html `<button class="icon danger" title=${t('remove', 'Delete')} aria-label=${t('remove', 'Delete')}
+              @click=${() => this.askRemove(entry, name)}><md-icon>delete</md-icon></button>`
+            : nothing}
+      </span>
+    </div>`;
+    }
+    /** Before what cannot be taken back - the platform's confirm, [Cancel][OK] (decided 2026-09-25, §7-3). */
+    async ask(title, text, confirmText) {
+        return !!(await OxPrompt.open({
+            type: 'warning',
+            title,
+            text,
+            confirmButton: { text: confirmText },
+            cancelButton: { text: t('cancel', 'Cancel') }
+        }));
+    }
+    async askRemove(entry, name) {
+        const ok = await this.ask(t('remove', 'Delete'), t('confirm-remove', 'Delete "{name}"? It disappears for every participant and cannot be brought back.', { name }), t('remove', 'Delete'));
+        if (ok)
+            this._removeSession(entry);
+    }
+    async askOpen(entry, name) {
+        const ok = await this.ask(t('make-open', 'Make public'), t('confirm-open', 'Make "{name}" public? Everyone in this domain will be able to read what is already written.', { name }), t('make-open', 'Make public'));
+        if (ok)
+            this.setVisibility(entry, 'open');
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], AssistantSessionManager.prototype, "anchorType", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], AssistantSessionManager.prototype, "anchorId", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], AssistantSessionManager.prototype, "sessionId", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], AssistantSessionManager.prototype, "admin", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], AssistantSessionManager.prototype, "kind", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], AssistantSessionManager.prototype, "kindLabels", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], AssistantSessionManager.prototype, "entries", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AssistantSessionManager.prototype, "total", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AssistantSessionManager.prototype, "hiddenCount", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AssistantSessionManager.prototype, "search", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AssistantSessionManager.prototype, "allKinds", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AssistantSessionManager.prototype, "whose", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AssistantSessionManager.prototype, "visibility", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AssistantSessionManager.prototype, "includeHidden", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AssistantSessionManager.prototype, "unreadOnly", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AssistantSessionManager.prototype, "pageSize", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AssistantSessionManager.prototype, "loading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AssistantSessionManager.prototype, "error", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AssistantSessionManager.prototype, "renamingId", void 0);
+AssistantSessionManager = __decorate([
+    customElement('ox-assistant-session-manager')
+], AssistantSessionManager);
+export { AssistantSessionManager };
+//# sourceMappingURL=assistant-session-manager.js.map