@ai-ecoverse/slicc-spectrum 1.7.0 → 1.8.0

package/dist/slicc-kernel-model.js

@@ -4,7 +4,7 @@ import {
 import {
   DummySettings,
   clock
-} from "./chunk-YWO2TNED.js";
+} from "./chunk-43NIJXWH.js";
 import {
   Emitter
 } from "./chunk-T5NHW4KC.js";

package/dist/slicc-ui.js

@@ -10104,10 +10104,17 @@ var accountStatus = {
   disconnected: ["neutral", "Not connected"]
 };
 var SliccSettings = class extends ModelElement {
-  static properties = { ...ModelElement.properties, pending: { state: true } };
+  static properties = {
+    ...ModelElement.properties,
+    pending: { state: true },
+    entering: { state: true },
+    failure: { state: true }
+  };
   constructor() {
     super();
     this.pending = /* @__PURE__ */ new Set();
+    this.entering = null;
+    this.failure = null;
   }
   static styles = [
     shared,
@@ -10171,6 +10178,21 @@ var SliccSettings = class extends ModelElement {
       .state .dot[data-variant='positive'] {
         background: var(--spectrum-positive-visual-color);
       }
+      .key {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 0 12px;
+        border-bottom: 1px solid var(--spectrum-gray-200);
+      }
+      .key sp-textfield {
+        flex: 1;
+      }
+      .failure {
+        color: var(--spectrum-negative-content-color-default);
+        font-size: var(--spectrum-font-size-75);
+        padding: 4px 0;
+      }
     `
   ];
   subscribe(model) {
@@ -10189,20 +10211,61 @@ var SliccSettings = class extends ModelElement {
   #checked(event) {
     return event.target.checked;
   }
-  async connect(id) {
+  async connect(id, secret) {
     this.pending = /* @__PURE__ */ new Set([...this.pending, id]);
+    this.failure = null;
     try {
-      await this.model?.settings.connect(id);
+      await this.model?.settings.connect(id, secret);
+      if (this.entering === id) this.entering = null;
+    } catch (error) {
+      this.failure = { id, message: error.message };
     } finally {
       this.pending = new Set([...this.pending].filter((candidate) => candidate !== id));
     }
   }
+  #start(account) {
+    if (account.auth !== "api-key") {
+      void this.connect(account.id);
+      return;
+    }
+    this.failure = null;
+    this.entering = account.id;
+    void this.updateComplete.then(() => this.focusOn(".key sp-textfield"));
+  }
+  #submit(event, id) {
+    event.preventDefault();
+    const field = event.currentTarget.querySelector(
+      "sp-textfield"
+    );
+    const secret = field.value.trim();
+    field.value = "";
+    if (secret) void this.connect(id, secret);
+  }
+  #send(event) {
+    event.currentTarget.closest("form")?.requestSubmit();
+  }
+  #enter(event) {
+    if (event.key === "Enter") this.#send(event);
+  }
+  #cancel() {
+    this.entering = null;
+    this.failure = null;
+  }
+  #key(account) {
+    if (this.entering !== account.id) return A;
+    const busy = this.pending.has(account.id);
+    return b`<form class="key" data-id=${account.id} @submit=${(event) => this.#submit(event, account.id)}>
+        <sp-textfield size="m" type="password" autocomplete="off" label=${`${account.provider} API key`} placeholder="Paste the API key" @keydown=${(event) => this.#enter(event)}></sp-textfield>
+        <sp-button size="s" variant="accent" ?pending=${busy} @click=${(event) => this.#send(event)}>Save</sp-button>
+        <sp-button size="s" variant="secondary" treatment="outline" @click=${() => this.#cancel()}>Cancel</sp-button>
+      </form>`;
+  }
   #account(account) {
     const [variant, label] = accountStatus[account.status];
     const busy = this.pending.has(account.id);
     const action = account.status === "connected" ? b`<sp-button size="s" variant="secondary" treatment="outline" @click=${() => this.model?.settings.disconnect(account.id)}
             >Disconnect</sp-button
-          >` : b`<sp-button size="s" variant="secondary" ?pending=${busy} @click=${() => this.connect(account.id)}
+          >` : b`<sp-button size="s" variant="secondary" ?pending=${busy} ?disabled=${this.entering === account.id} @click=${() => this.#start(account)}
             >${account.status === "expired" ? "Reconnect" : "Connect"}</sp-button
           >`;
     return b`<div class="account" data-id=${account.id}>
@@ -10210,7 +10273,9 @@ var SliccSettings = class extends ModelElement {
       <span class="identity">${account.identity || "\u2014"}</span>
       <span class="state"><span class="dot" data-variant=${variant}></span>${label}</span>
       ${action}
-    </div>`;
+    </div>
+    ${this.#key(account)}
+    ${this.failure?.id === account.id ? b`<div class="failure" role="alert">${this.failure.message}</div>` : A}`;
   }
   render() {
     const settings = this.model?.settings;