@things-factory/ai-assistant 10.1.254 → 10.1.257

package/client/settings/ai-agent-setting-let.ts

@@ -4,7 +4,7 @@ import '@things-factory/setting-base/dist-client/layout/settinglet.js'
 import gql from 'graphql-tag'
 import { css, html, LitElement, nothing } from 'lit'
 import { customElement, state } from 'lit/decorators.js'
-import { client } from '@operato/graphql'
+import { MutationController, QueryController } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { OxPrompt } from '@operato/popup'
 import '@operato/popup/ox-popup-menu.js'
@@ -265,28 +265,36 @@ export class AiAgentSettingLet extends localize(i18next)(LitElement) {
     `
   ]
 
-  @state() private settings?: AgentSettings
-  @state() private loadFailed?: string
   @state() private draft?: AgentDraft
-  @state() private models: ModelList = { state: 'idle', models: [] }
-  @state() private saving = false
+  /* The provider, key and address the model list is read for - set when the editor asks, not on every keystroke. */
+  @state() private modelsAsk?: Record<string, string>
   @state() private saveError?: string
   @state() private keyFor?: string
   @state() private keyDraft = ''
 
-  connectedCallback() {
-    super.connectedCallback()
-    this.load()
+  /* The agents of this domain and the domains above (ADR-0190). */
+  private agents = new QueryController(this, SETTINGS_QUERY, { fetchPolicy: 'network-only' })
+  private modelList = new QueryController(this, MODELS_QUERY, { variables: () => this.modelsAsk, fetchPolicy: 'network-only' })
+  /* A refusal is drawn beside the editor or in a prompt here, so the link does not report it again. */
+  private saver = new MutationController(this, SAVE_MUTATION, { refetch: () => [this.agents], showsError: true })
+
+  private get settings(): AgentSettings | undefined {
+    return this.agents.data?.aiAgentSettings
   }
 
-  private async load() {
-    this.loadFailed = undefined
-    try {
-      const response = await client.query({ query: SETTINGS_QUERY, fetchPolicy: 'network-only' })
-      this.settings = answered(response, 'aiAgentSettings')
-    } catch (error: any) {
-      this.loadFailed = messageOf(error)
-    }
+  private get loadFailed(): string | undefined {
+    return this.agents.error ? messageOf(this.agents.error) : undefined
+  }
+
+  private get models(): ModelList {
+    if (!this.modelsAsk) return { state: 'idle', models: [] }
+    if (this.modelList.loading || !(this.modelList.data || this.modelList.error)) return { state: 'loading', models: [] }
+    if (this.modelList.error) return { state: 'failed', models: [], reason: messageOf(this.modelList.error) }
+    return { state: 'ready', models: this.modelList.data.aiProviderModels ?? [] }
+  }
+
+  private get saving() {
+    return this.saver.pending
   }
 
   render() {
@@ -303,7 +311,7 @@ export class AiAgentSettingLet extends localize(i18next)(LitElement) {
       return html`
         <div class="head">
           <span class="status off">${t('load-failed', 'Could not read the AI agents.')} ${this.loadFailed}</span>
-          <button type="button" @click=${() => this.load()}><md-icon>refresh</md-icon>${t('retry', 'Try again')}</button>
+          <button type="button" @click=${() => this.agents.refetch()}><md-icon>refresh</md-icon>${t('retry', 'Try again')}</button>
         </div>
       `
     }
@@ -532,7 +540,7 @@ export class AiAgentSettingLet extends localize(i18next)(LitElement) {
   private startNew() {
     this.saveError = undefined
     this.draft = draftOf()
-    this.models = { state: 'idle', models: [] }
+    this.modelsAsk = undefined
   }
 
   private startEdit(agent: AgentView) {
@@ -544,7 +552,7 @@ export class AiAgentSettingLet extends localize(i18next)(LitElement) {
   private cancelEdit() {
     this.draft = undefined
     this.saveError = undefined
-    this.models = { state: 'idle', models: [] }
+    this.modelsAsk = undefined
   }
 
   private patch(change: Partial<AgentDraft>) {
@@ -554,40 +562,28 @@ export class AiAgentSettingLet extends localize(i18next)(LitElement) {
   /** A provider decides the model list, so changing it empties the model. */
   private onProvider(provider: string) {
     this.patch({ provider, model: '', organization: provider === 'openai' ? this.draft!.organization : '' })
-    this.models = { state: 'idle', models: [] }
+    this.modelsAsk = undefined
     this.loadModels()
   }
 
-  private modelsToken = 0
-
-  private async loadModels() {
+  private loadModels() {
     const draft = this.draft
     if (!draft) return
     const stored = this.settings?.agents.find(one => one.id === draft.id && !one.inherited)
     const useStored = !draft.apiKey.trim() && stored?.keyState === 'own' && stored.provider === draft.provider
     if (!draft.apiKey.trim() && !useStored) {
-      this.models = { state: 'idle', models: [] }
+      this.modelsAsk = undefined
       return
     }
-    const token = ++this.modelsToken
-    this.models = { state: 'loading', models: [] }
-    try {
-      const response = await client.query({
-        query: MODELS_QUERY,
-        fetchPolicy: 'network-only',
-        variables: {
-          provider: draft.provider,
-          ...(draft.apiKey.trim() ? { apiKey: draft.apiKey.trim() } : { agentId: draft.id }),
-          ...(draft.baseURL.trim() && { baseURL: draft.baseURL.trim() }),
-          ...(draft.organization.trim() && { organization: draft.organization.trim() })
-        }
-      })
-      if (token !== this.modelsToken) return
-      this.models = { state: 'ready', models: answered(response, 'aiProviderModels') ?? [] }
-    } catch (error: any) {
-      if (token !== this.modelsToken) return
-      this.models = { state: 'failed', models: [], reason: messageOf(error) }
+    const ask: Record<string, string> = {
+      provider: draft.provider,
+      ...(draft.apiKey.trim() ? { apiKey: draft.apiKey.trim() } : { agentId: draft.id! }),
+      ...(draft.baseURL.trim() && { baseURL: draft.baseURL.trim() }),
+      ...(draft.organization.trim() && { organization: draft.organization.trim() })
     }
+    /* The same ask again (the reload button) reads the list again. */
+    if (JSON.stringify(ask) === JSON.stringify(this.modelsAsk)) this.modelList.refetch()
+    else this.modelsAsk = ask
   }
 
   private startKeyOverride(agent: AgentView) {
@@ -640,34 +636,21 @@ export class AiAgentSettingLet extends localize(i18next)(LitElement) {
   }
 
   private async save(change: SaveChange) {
-    this.saving = true
     this.saveError = undefined
-    try {
-      answered(await client.mutate({ mutation: SAVE_MUTATION, variables: { input: saveInput(this.settings!, change) } }), 'saveAiAgents')
+    if (await this.saver.run({ input: saveInput(this.settings!, change) })) {
       if (change.kind === 'upsert') this.cancelEdit()
       if (change.kind === 'key-override') ((this.keyFor = undefined), (this.keyDraft = ''))
-      await this.load()
-    } catch (error: any) {
-      this.saveError = messageOf(error)
-      if (change.kind !== 'upsert' && change.kind !== 'key-override') {
-        await OxPrompt.open({ type: 'error', title: t('save-failed', 'Not saved'), text: this.saveError, confirmButton: { text: t('close', 'Close') } })
-        await this.load()
-      }
-    } finally {
-      this.saving = false
+      return
+    }
+    this.saveError = messageOf(this.saver.error)
+    if (change.kind !== 'upsert' && change.kind !== 'key-override') {
+      await OxPrompt.open({ type: 'error', title: t('save-failed', 'Not saved'), text: this.saveError, confirmButton: { text: t('close', 'Close') } })
+      /* The switch flipped on screen goes back to what is stored. */
+      await this.agents.refetch()
     }
   }
 }
 
-/**
- * The data of a query or mutation. This client answers a refusal in `errors` (errorPolicy 'all') instead of
- * throwing, so it is turned into a throw here - the server's sentence, already in the person's language.
- */
-function answered(result: any, field: string): any {
-  if (result?.errors?.length) throw new Error(result.errors[0].message)
-  return result?.data?.[field]
-}
-
 async function confirm(title: string, text: string): Promise<boolean> {
   return !!(await OxPrompt.open({
     type: 'warning',

package/client/settings/ai-usage-setting-let.ts

@@ -4,7 +4,7 @@ import '@operato/input/ox-input-select-buttons.js'
 import gql from 'graphql-tag'
 import { css, html, LitElement, nothing } from 'lit'
 import { customElement, state } from 'lit/decorators.js'
-import { client } from '@operato/graphql'
+import { QueryController } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { FormFieldStyles, ScrollbarStyles } from '@operato/styles'
 
@@ -121,35 +121,23 @@ export class AiUsageSettingLet extends localize(i18next)(LitElement) {
   @state() private includeDescendants = false
   @state() private agentFilter = ''
   @state() private userFilter = ''
-  @state() private rows?: UsageRow[]
-  @state() private failed?: string
+  /* The range is fixed when the period is chosen, so it stays the same variables until the next choice. */
+  @state() private range = periodRange(this.period, new Date())
 
-  connectedCallback() {
-    super.connectedCallback()
-    this.load()
-  }
+  /* The usage for the chosen period (ADR-0190); the agent and person choices are drawn from it, so they stay while
+     another period is read. */
+  private usage = new QueryController(this, USAGE_QUERY, {
+    variables: () => ({ ...this.range, bucket: this.bucket, includeDescendants: this.includeDescendants }),
+    keepPrevious: true
+  })
 
-  private loadToken = 0
+  private get rows(): UsageRow[] | undefined {
+    return this.usage.data?.aiUsageSummary ?? undefined
+  }
 
-  private async load() {
-    const token = ++this.loadToken
-    this.failed = undefined
-    this.rows = undefined
-    const { from, to } = periodRange(this.period, new Date())
-    try {
-      const response = await client.query({
-        query: USAGE_QUERY,
-        fetchPolicy: 'network-only',
-        variables: { from, to, bucket: this.bucket, includeDescendants: this.includeDescendants }
-      })
-      if (token !== this.loadToken) return
-      /* This client answers a refusal in `errors` (errorPolicy 'all') instead of throwing. */
-      if ((response as any).errors?.length) throw new Error((response as any).errors[0].message)
-      this.rows = response.data?.aiUsageSummary ?? []
-    } catch (error: any) {
-      if (token !== this.loadToken) return
-      this.failed = error?.graphQLErrors?.[0]?.message ?? error?.message ?? String(error)
-    }
+  private get failed(): string | undefined {
+    const error: any = this.usage.error
+    return error ? (error.graphQLErrors?.[0]?.message ?? error.message ?? String(error)) : undefined
   }
 
   render() {
@@ -174,7 +162,7 @@ export class AiUsageSettingLet extends localize(i18next)(LitElement) {
             { display: t('7d', '7 days'), value: '7d' },
             { display: t('30d', '30 days'), value: '30d' }
           ]}
-          @change=${(e: CustomEvent) => e.detail && ((this.period = e.detail), this.load())}></ox-input-select-buttons>
+          @change=${(e: CustomEvent) => e.detail && ((this.period = e.detail), (this.range = periodRange(e.detail, new Date())))}></ox-input-select-buttons>
         <ox-input-select-buttons
           .value=${this.bucket}
           .options=${[
@@ -182,7 +170,7 @@ export class AiUsageSettingLet extends localize(i18next)(LitElement) {
             { display: t('by-day', 'Day'), value: 'day' },
             { display: t('by-month', 'Month'), value: 'month' }
           ]}
-          @change=${(e: CustomEvent) => e.detail && ((this.bucket = e.detail), this.load())}></ox-input-select-buttons>
+          @change=${(e: CustomEvent) => e.detail && (this.bucket = e.detail)}></ox-input-select-buttons>
         <select aria-label=${t('agent', 'Agent')} @change=${(e: Event) => (this.agentFilter = (e.target as HTMLSelectElement).value)}>
           <option value="">${t('all-agents', 'All agents')}</option>
           ${agents.map(([id, name]) => html`<option value=${id} ?selected=${id === this.agentFilter}>${name}</option>`)}
@@ -192,7 +180,7 @@ export class AiUsageSettingLet extends localize(i18next)(LitElement) {
           ${users.map(([id, name]) => html`<option value=${id} ?selected=${id === this.userFilter}>${name}</option>`)}
         </select>
         <label>
-          <input type="checkbox" .checked=${this.includeDescendants} @change=${(e: Event) => ((this.includeDescendants = (e.target as HTMLInputElement).checked), this.load())} />
+          <input type="checkbox" .checked=${this.includeDescendants} @change=${(e: Event) => (this.includeDescendants = (e.target as HTMLInputElement).checked)} />
           ${t('include-below', 'Domains below')}
         </label>
       </div>

package/dist-client/settings/ai-agent-setting-let.d.ts

@@ -12,16 +12,18 @@ declare const AiAgentSettingLet_base: (new (...args: any[]) => LitElement) & typ
  */
 export declare class AiAgentSettingLet extends AiAgentSettingLet_base {
     static styles: import("lit").CSSResult[];
-    private settings?;
-    private loadFailed?;
     private draft?;
-    private models;
-    private saving;
+    private modelsAsk?;
     private saveError?;
     private keyFor?;
     private keyDraft;
-    connectedCallback(): void;
-    private load;
+    private agents;
+    private modelList;
+    private saver;
+    private get settings();
+    private get loadFailed();
+    private get models();
+    private get saving();
     render(): import("lit-html").TemplateResult<1>;
     private renderContent;
     private renderStatus;
@@ -38,7 +40,6 @@ export declare class AiAgentSettingLet extends AiAgentSettingLet_base {
     private patch;
     /** A provider decides the model list, so changing it empties the model. */
     private onProvider;
-    private modelsToken;
     private loadModels;
     private startKeyOverride;
     private clearKeyOverride;

package/dist-client/settings/ai-agent-setting-let.js

@@ -4,7 +4,7 @@ import '@things-factory/setting-base/dist-client/layout/settinglet.js';
 import gql from 'graphql-tag';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { client } from '@operato/graphql';
+import { MutationController, QueryController } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
 import { OxPrompt } from '@operato/popup';
 import '@operato/popup/ox-popup-menu.js';
@@ -75,10 +75,12 @@ const PROVIDERS = ['openai', 'anthropic', 'gemini'];
 let AiAgentSettingLet = class AiAgentSettingLet extends localize(i18next)(LitElement) {
     constructor() {
         super(...arguments);
-        this.models = { state: 'idle', models: [] };
-        this.saving = false;
         this.keyDraft = '';
-        this.modelsToken = 0;
+        /* The agents of this domain and the domains above (ADR-0190). */
+        this.agents = new QueryController(this, SETTINGS_QUERY, { fetchPolicy: 'network-only' });
+        this.modelList = new QueryController(this, MODELS_QUERY, { variables: () => this.modelsAsk, fetchPolicy: 'network-only' });
+        /* A refusal is drawn beside the editor or in a prompt here, so the link does not report it again. */
+        this.saver = new MutationController(this, SAVE_MUTATION, { refetch: () => [this.agents], showsError: true });
     }
     static { this.styles = [
         /* The button look comes from the action bar's styles, which also restyle select and text inputs - the form
@@ -252,19 +254,23 @@ let AiAgentSettingLet = class AiAgentSettingLet extends localize(i18next)(LitEle
       }
     `
     ]; }
-    connectedCallback() {
-        super.connectedCallback();
-        this.load();
+    get settings() {
+        return this.agents.data?.aiAgentSettings;
     }
-    async load() {
-        this.loadFailed = undefined;
-        try {
-            const response = await client.query({ query: SETTINGS_QUERY, fetchPolicy: 'network-only' });
-            this.settings = answered(response, 'aiAgentSettings');
-        }
-        catch (error) {
-            this.loadFailed = messageOf(error);
-        }
+    get loadFailed() {
+        return this.agents.error ? messageOf(this.agents.error) : undefined;
+    }
+    get models() {
+        if (!this.modelsAsk)
+            return { state: 'idle', models: [] };
+        if (this.modelList.loading || !(this.modelList.data || this.modelList.error))
+            return { state: 'loading', models: [] };
+        if (this.modelList.error)
+            return { state: 'failed', models: [], reason: messageOf(this.modelList.error) };
+        return { state: 'ready', models: this.modelList.data.aiProviderModels ?? [] };
+    }
+    get saving() {
+        return this.saver.pending;
     }
     render() {
         return html `
@@ -279,7 +285,7 @@ let AiAgentSettingLet = class AiAgentSettingLet extends localize(i18next)(LitEle
             return html `
         <div class="head">
           <span class="status off">${t('load-failed', 'Could not read the AI agents.')} ${this.loadFailed}</span>
-          <button type="button" @click=${() => this.load()}><md-icon>refresh</md-icon>${t('retry', 'Try again')}</button>
+          <button type="button" @click=${() => this.agents.refetch()}><md-icon>refresh</md-icon>${t('retry', 'Try again')}</button>
         </div>
       `;
         }
@@ -496,7 +502,7 @@ let AiAgentSettingLet = class AiAgentSettingLet extends localize(i18next)(LitEle
     startNew() {
         this.saveError = undefined;
         this.draft = draftOf();
-        this.models = { state: 'idle', models: [] };
+        this.modelsAsk = undefined;
     }
     startEdit(agent) {
         this.saveError = undefined;
@@ -506,7 +512,7 @@ let AiAgentSettingLet = class AiAgentSettingLet extends localize(i18next)(LitEle
     cancelEdit() {
         this.draft = undefined;
         this.saveError = undefined;
-        this.models = { state: 'idle', models: [] };
+        this.modelsAsk = undefined;
     }
     patch(change) {
         this.draft = { ...this.draft, ...change };
@@ -514,41 +520,30 @@ let AiAgentSettingLet = class AiAgentSettingLet extends localize(i18next)(LitEle
     /** A provider decides the model list, so changing it empties the model. */
     onProvider(provider) {
         this.patch({ provider, model: '', organization: provider === 'openai' ? this.draft.organization : '' });
-        this.models = { state: 'idle', models: [] };
+        this.modelsAsk = undefined;
         this.loadModels();
     }
-    async loadModels() {
+    loadModels() {
         const draft = this.draft;
         if (!draft)
             return;
         const stored = this.settings?.agents.find(one => one.id === draft.id && !one.inherited);
         const useStored = !draft.apiKey.trim() && stored?.keyState === 'own' && stored.provider === draft.provider;
         if (!draft.apiKey.trim() && !useStored) {
-            this.models = { state: 'idle', models: [] };
+            this.modelsAsk = undefined;
             return;
         }
-        const token = ++this.modelsToken;
-        this.models = { state: 'loading', models: [] };
-        try {
-            const response = await client.query({
-                query: MODELS_QUERY,
-                fetchPolicy: 'network-only',
-                variables: {
-                    provider: draft.provider,
-                    ...(draft.apiKey.trim() ? { apiKey: draft.apiKey.trim() } : { agentId: draft.id }),
-                    ...(draft.baseURL.trim() && { baseURL: draft.baseURL.trim() }),
-                    ...(draft.organization.trim() && { organization: draft.organization.trim() })
-                }
-            });
-            if (token !== this.modelsToken)
-                return;
-            this.models = { state: 'ready', models: answered(response, 'aiProviderModels') ?? [] };
-        }
-        catch (error) {
-            if (token !== this.modelsToken)
-                return;
-            this.models = { state: 'failed', models: [], reason: messageOf(error) };
-        }
+        const ask = {
+            provider: draft.provider,
+            ...(draft.apiKey.trim() ? { apiKey: draft.apiKey.trim() } : { agentId: draft.id }),
+            ...(draft.baseURL.trim() && { baseURL: draft.baseURL.trim() }),
+            ...(draft.organization.trim() && { organization: draft.organization.trim() })
+        };
+        /* The same ask again (the reload button) reads the list again. */
+        if (JSON.stringify(ask) === JSON.stringify(this.modelsAsk))
+            this.modelList.refetch();
+        else
+            this.modelsAsk = ask;
     }
     startKeyOverride(agent) {
         this.saveError = undefined;
@@ -589,36 +584,22 @@ let AiAgentSettingLet = class AiAgentSettingLet extends localize(i18next)(LitEle
         });
     }
     async save(change) {
-        this.saving = true;
         this.saveError = undefined;
-        try {
-            answered(await client.mutate({ mutation: SAVE_MUTATION, variables: { input: saveInput(this.settings, change) } }), 'saveAiAgents');
+        if (await this.saver.run({ input: saveInput(this.settings, change) })) {
             if (change.kind === 'upsert')
                 this.cancelEdit();
             if (change.kind === 'key-override')
                 ((this.keyFor = undefined), (this.keyDraft = ''));
-            await this.load();
-        }
-        catch (error) {
-            this.saveError = messageOf(error);
-            if (change.kind !== 'upsert' && change.kind !== 'key-override') {
-                await OxPrompt.open({ type: 'error', title: t('save-failed', 'Not saved'), text: this.saveError, confirmButton: { text: t('close', 'Close') } });
-                await this.load();
-            }
+            return;
         }
-        finally {
-            this.saving = false;
+        this.saveError = messageOf(this.saver.error);
+        if (change.kind !== 'upsert' && change.kind !== 'key-override') {
+            await OxPrompt.open({ type: 'error', title: t('save-failed', 'Not saved'), text: this.saveError, confirmButton: { text: t('close', 'Close') } });
+            /* The switch flipped on screen goes back to what is stored. */
+            await this.agents.refetch();
         }
     }
 };
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], AiAgentSettingLet.prototype, "settings", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", String)
-], AiAgentSettingLet.prototype, "loadFailed", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
@@ -626,11 +607,7 @@ __decorate([
 __decorate([
     state(),
     __metadata("design:type", Object)
-], AiAgentSettingLet.prototype, "models", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], AiAgentSettingLet.prototype, "saving", void 0);
+], AiAgentSettingLet.prototype, "modelsAsk", void 0);
 __decorate([
     state(),
     __metadata("design:type", String)
@@ -647,15 +624,6 @@ AiAgentSettingLet = __decorate([
     customElement('ai-agent-setting-let')
 ], AiAgentSettingLet);
 export { AiAgentSettingLet };
-/**
- * The data of a query or mutation. This client answers a refusal in `errors` (errorPolicy 'all') instead of
- * throwing, so it is turned into a throw here - the server's sentence, already in the person's language.
- */
-function answered(result, field) {
-    if (result?.errors?.length)
-        throw new Error(result.errors[0].message);
-    return result?.data?.[field];
-}
 async function confirm(title, text) {
     return !!(await OxPrompt.open({
         type: 'warning',