@ai-ecoverse/slicc-spectrum 1.73.1 → 1.73.2

package/dist/slicc-ui.js

@@ -30847,6 +30847,20 @@ function user(message, stamp = true) {
     </div>
   </swc-conversation-turn>`;
 }
+var toolLoaders = {
+  edit: "pencil",
+  read: "page",
+  search: "mag",
+  browser: "eye"
+};
+function statusLoader(message) {
+  if (message.parts.at(-1)?.type !== "tool") return "aiLogo";
+  const running2 = message.parts.findLast(
+    (part2) => part2.type === "tool" && part2.tool.status === "running"
+  );
+  if (running2?.type !== "tool") return "aiLogo";
+  return toolLoaders[toolKind(running2.tool.name).id] ?? "hourglass";
+}
 var people = /* @__PURE__ */ new Set(["follower", "guest"]);
 function byline(message, who2, stamp) {
   if (!who2 && !stamp) return A;
@@ -30861,7 +30875,7 @@ function status(message) {
   }
   if (message.status !== "streaming") return A;
   const calls = message.parts.flatMap((entry) => entry.type === "tool" ? [entry.tool] : []);
-  return b`<swc-response-status slot="status" status="active">
+  return b`<swc-response-status slot="status" status="active" loader=${statusLoader(message)}>
     ${calls.map((call) => b`<swc-response-status-step status=${stepStates[call.status]}><span slot="label">${call.name} ${call.title}</span></swc-response-status-step>`)}
   </swc-response-status>`;
 }
@@ -36087,7 +36101,8 @@ var SliccChat = class extends ThemedElement {
         min-height: 0;
         overflow-y: auto;
         container-type: inline-size;
-        padding: var(--swc-spacing-400) var(--swc-spacing-300) var(--swc-spacing-500);
+        padding: var(--swc-spacing-400) var(--swc-spacing-300) calc(var(--composer-height, 0px) + var(--swc-spacing-500));
+        scroll-padding-block-end: calc(var(--composer-height, 0px) + var(--swc-spacing-200));
         font-size: var(--swc-font-size-200);
       }
       @container (min-width: 600px) {
@@ -36200,6 +36215,11 @@ var SliccChat = class extends ThemedElement {
     return last?.role === "user" && last.id !== this.#tail && (last.origin ?? "user") === "user";
   }
   #resize = new ResizeObserver(() => this.#pin());
+  #fitted = null;
+  #fit = new ResizeObserver(([entry]) => {
+    this.style.setProperty("--composer-height", `${entry.target.offsetHeight}px`);
+    this.#pin();
+  });
   #log() {
     return this.renderRoot.querySelector(".log");
   }
@@ -36254,8 +36274,20 @@ var SliccChat = class extends ThemedElement {
     const log = this.#log();
     this.#resize.observe(log);
     this.#resize.observe(log.firstElementChild);
+    this.#attach();
     this.#refresh(true);
   }
+  #attach() {
+    const composer = this.renderRoot.querySelector("slicc-composer");
+    if (composer === this.#fitted) return;
+    this.#fit.disconnect();
+    this.#fitted = composer;
+    if (composer) this.#fit.observe(composer);
+    else this.style.setProperty("--composer-height", "0px");
+  }
+  updated() {
+    this.#attach();
+  }
   connectedCallback() {
     super.connectedCallback();
     globalThis.addEventListener("pointerup", this.#release, true);
@@ -36267,6 +36299,8 @@ var SliccChat = class extends ThemedElement {
     globalThis.removeEventListener("pointerup", this.#release, true);
     globalThis.removeEventListener("pointercancel", this.#release, true);
     this.#resize.disconnect();
+    this.#fit.disconnect();
+    this.#fitted = null;
     clearTimeout(this.#settle);
   }
   firstUpdated() {
@@ -37720,6 +37754,7 @@ var SliccComposer = class extends ThemedElement {
     attachments: { state: true },
     popup: { state: true },
     dictating: { state: true },
+    erasing: { state: true },
     blocked: { state: true },
     sharing: { state: true },
     secretError: { state: true },
@@ -37733,6 +37768,7 @@ var SliccComposer = class extends ThemedElement {
   #next = 1;
   #abandon;
   #recognition = null;
+  #erase;
   #keys = { capture: true, handleEvent: (event2) => this.#keydown(event2) };
   constructor() {
     super();
@@ -37740,6 +37776,7 @@ var SliccComposer = class extends ThemedElement {
     this.attachments = [];
     this.popup = null;
     this.dictating = false;
+    this.erasing = false;
     this.blocked = false;
     this.sharing = false;
     this.secretError = null;
@@ -37751,11 +37788,49 @@ var SliccComposer = class extends ThemedElement {
     i`
       :host {
         display: block;
-        flex: none;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 2;
         padding: var(--swc-spacing-100) var(--swc-spacing-200) var(--swc-spacing-200);
-        background: var(--swc-background-layer-1-color);
         font-size: var(--swc-font-size-100);
-        position: relative;
+      }
+      :host::before {
+        content: '';
+        position: absolute;
+        top: -72px;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: -1;
+        pointer-events: none;
+        background: color-mix(in srgb, var(--swc-background-layer-1-color) 72%, transparent);
+        backdrop-filter: blur(16px) saturate(1.4);
+        -webkit-backdrop-filter: blur(16px) saturate(1.4);
+        mask-image: linear-gradient(to bottom, transparent, black 72px);
+        -webkit-mask-image: linear-gradient(to bottom, transparent, black 72px);
+      }
+      @media (prefers-reduced-transparency: reduce) {
+        :host::before {
+          top: 0;
+          background: var(--swc-background-layer-1-color);
+          backdrop-filter: none;
+          -webkit-backdrop-filter: none;
+          mask-image: none;
+          -webkit-mask-image: none;
+        }
+      }
+      @media (forced-colors: active) {
+        :host::before {
+          top: 0;
+          background: Canvas;
+          backdrop-filter: none;
+          -webkit-backdrop-filter: none;
+          mask-image: none;
+          -webkit-mask-image: none;
+          border-block-start: var(--swc-border-width-100) solid CanvasText;
+        }
       }
       .column {
         max-width: 860px;
@@ -37863,28 +37938,6 @@ var SliccComposer = class extends ThemedElement {
         margin: var(--swc-spacing-75) auto 0;
         min-height: var(--swc-component-height-75);
       }
-      .hint {
-        display: flex;
-        flex: 1;
-        flex-wrap: wrap;
-        align-items: center;
-        min-width: 0;
-        max-block-size: var(--swc-component-height-75);
-        overflow: hidden;
-        font-size: var(--swc-font-size-75);
-        color: var(--swc-neutral-subdued-content-color-default);
-      }
-      .hint > span {
-        display: flex;
-        align-items: center;
-        block-size: var(--swc-component-height-75);
-        gap: var(--swc-spacing-50);
-        white-space: nowrap;
-      }
-      .hint > span + span::before {
-        content: '·';
-        padding-inline-start: var(--swc-spacing-75);
-      }
       .below swc-action-button {
         margin-inline-start: auto;
       }
@@ -37898,11 +37951,6 @@ var SliccComposer = class extends ThemedElement {
         --swc-action-button-content-color-down: var(--swc-gray-25);
         --swc-action-button-content-color-focus: var(--swc-gray-25);
       }
-      @media (pointer: coarse), (hover: none) {
-        .hint {
-          display: none;
-        }
-      }
       .popup {
         position: absolute;
         left: 0;
@@ -38037,6 +38085,8 @@ var SliccComposer = class extends ThemedElement {
       popover.triggerElement = field.shadowRoot.querySelector(
         ".swc-PromptField-upload"
       );
+      const area = this.#textarea;
+      area.ariaDescribedByElements = [this.renderRoot.querySelector("#keys")];
     });
   }
   subscribe(model) {
@@ -38361,6 +38411,7 @@ var SliccComposer = class extends ThemedElement {
   #keydown(event2) {
     const area = this.#textarea;
     if (event2.isComposing || !area || event2.composedPath()[0] !== area) return;
+    if (event2.key === "Backspace" || event2.key === "Delete") this.#flash();
     const sendOnEnter = this.model?.settings.get().sendOnEnter ?? true;
     let handled = this.#popupKey(event2) || this.#historyKey(event2, area);
     if (!handled && event2.key === "Tab" && !event2.shiftKey && !this.value) {
@@ -38381,6 +38432,29 @@ var SliccComposer = class extends ThemedElement {
     if (handled) event2.preventDefault();
     if (handled || event2.key === "Enter") event2.stopPropagation();
   }
+  #flash() {
+    if (!this.value) return;
+    this.erasing = true;
+    clearTimeout(this.#erase);
+    this.#erase = setTimeout(() => this.erasing = false, 700);
+  }
+  #loader(busy) {
+    if (busy) return "aiLogo";
+    if (this.dictating) return "microphone";
+    if (this.erasing) return "brush";
+    return this.value ? "pencil" : "aiLogo";
+  }
+  #instructions(busy) {
+    const enter = this.model?.settings.get().sendOnEnter ?? true;
+    const keys = enter ? [`Enter ${busy ? "steers" : "sends"}`, ...busy ? ["Ctrl+Enter queues"] : []] : [`Ctrl+Enter ${busy ? "queues" : "sends"}`];
+    if (busy) keys.push("Escape stops");
+    keys.push(
+      `${enter ? "Shift+Enter" : "Enter"} adds a new line`,
+      "/ lists commands",
+      "@ mentions"
+    );
+    return `${keys.join(", ")}.`;
+  }
   #input(event2) {
     this.value = event2.detail.value;
     this.#history = -1;
@@ -38570,16 +38644,17 @@ var SliccComposer = class extends ThemedElement {
     const speech = "SpeechRecognition" in globalThis || "webkitSpeechRecognition" in globalThis;
     const held = this.#held();
     return b`<div class="column">
+        <span id="keys" class="sr" aria-hidden="true">${this.#instructions(busy)}</span>
         ${this.#hold()}
         ${this.#queue()}
         ${this.#popup()}
         <swc-prompt-field
           label="Message"
+          loader=${this.#loader(busy)}
           upload-label="Add"
           stop-label="Stop"
           send-label=${busy ? "Steer" : "Send"}
           max-rows="10"
-          animate-loader
           ?generating=${busy && !canSend}
           ?disabled=${!!held}
           placeholder=${held ? `Reconnecting to ${held}\u2026` : suggestion ? `${suggestion}  (Tab)` : `Message ${agent?.name ?? ""}`}
@@ -38612,24 +38687,16 @@ var SliccComposer = class extends ThemedElement {
       input.value = "";
     }} />
       </div>
-      <div class="below">
-        <div class="hint">
-          <span><kbd>Enter</kbd> ${busy ? "steer" : "send"}</span>
-          ${busy ? b`<span><kbd>Ctrl+Enter</kbd> queue</span><span><kbd>Esc</kbd> stop</span>` : A}
-          <span><kbd>/</kbd> commands</span>
-          <span><kbd>@</kbd> mention</span>
-          <span><kbd>Shift+Enter</kbd> new line</span>
-          <span><kbd>↑</kbd> history</span>
-        </div>
-        ${speech ? b`<swc-action-button
+      ${speech ? b`<div class="below">
+              <swc-action-button
                 size="s"
                 quiet
                 class=${this.dictating ? "selected" : ""}
                 accessible-label=${this.dictating ? "Stop dictation" : "Dictate"}
                 data-action="dictate"
                 @click=${() => this.dictate()}
-              ><swc-icon-microphone slot="icon"></swc-icon-microphone></swc-action-button>` : A}
-      </div>`;
+              ><swc-icon-microphone slot="icon"></swc-icon-microphone></swc-action-button>
+            </div>` : A}`;
   }
 };