@ai-ecoverse/slicc-spectrum 1.7.0 → 1.8.1

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

@@ -6976,13 +6976,13 @@ var SliccApp = class extends ThemedElement {
     const width = this.getBoundingClientRect().width;
     if (width > 0) this.screen = screenClass(width);
   }
-  updated() {
-    if (this.model && this.#started !== this.screen) this.#start(this.model);
+  updated(changed) {
+    if (!this.model) return;
+    if (this.#started !== this.screen) this.#start(this.model);
+    else if (changed.has("model")) this.#rebind(this.model);
   }
-  #start(model) {
-    const dock = this.dock;
-    this.#saving = false;
-    dock.factories = {
+  #factories(model) {
+    return {
       ...Object.fromEntries(this.surfaces.map((item2) => [item2.id, () => create(item2.tag, model)])),
       ...Object.fromEntries(
         Object.entries(documents).map(([kind, document2]) => [
@@ -6993,6 +6993,22 @@ var SliccApp = class extends ThemedElement {
       ...this.#offers("chat") ? { chat: (params) => create("slicc-chat", model, params) } : {},
       sprinkle: (params) => create("slicc-sprinkle", model, params)
     };
+  }
+  #rebind(model) {
+    const dock = this.dock;
+    dock.factories = this.#factories(model);
+    for (const panel of dock.api.panels) {
+      const element2 = dock.content(panel.id);
+      if (element2 && "model" in element2) element2.model = model;
+    }
+    this.#prune();
+    const agent = this.#active();
+    if (agent && this.#offers("chat")) openChat(dock, agent, this.screen, false);
+  }
+  #start(model) {
+    const dock = this.dock;
+    this.#saving = false;
+    dock.factories = this.#factories(model);
     dock.accepts = [dipType];
     this.dips.load(this.storage);
     const saved = this.#saved();
@@ -10104,10 +10120,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 +10194,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 +10227,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 +10289,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;