@genesislcap/ai-assistant 14.458.3 → 14.460.0

package/src/components/chat-driver/chat-driver.test.ts

@@ -1058,6 +1058,42 @@ syntheticUser(
 
 syntheticUser.run();
 
+// ---------------------------------------------------------------------------
+// interaction presentation — the per-call `presentation` option is stamped
+// onto the appended interaction so the renderer can frame the widget, and is
+// absent (the historical default) when the option is omitted.
+// ---------------------------------------------------------------------------
+
+const interactionPresentation = createLogicSuite('ChatDriver interaction presentation');
+
+interactionPresentation(
+  'presentation option is stamped onto the appended interaction',
+  async () => {
+    const driver = makeDriver(agent({ name: 'a' }), scriptedProvider([]));
+
+    const pending = driver.requestInteraction('w', {}, { presentation: 'bubble' });
+    const interaction = driver.getHistory().at(-1)!.interaction!;
+    assert.is(interaction.presentation, 'bubble');
+
+    // Clean up the pending interaction so it does not dangle.
+    driver.resolveInteraction(interaction.interactionId, { status: 'approved' });
+    await pending;
+  },
+);
+
+interactionPresentation('presentation is absent when the option is omitted', async () => {
+  const driver = makeDriver(agent({ name: 'a' }), scriptedProvider([]));
+
+  const pending = driver.requestInteraction('w', {});
+  const interaction = driver.getHistory().at(-1)!.interaction!;
+  assert.ok(!('presentation' in interaction));
+
+  driver.resolveInteraction(interaction.interactionId, { status: 'approved' });
+  await pending;
+});
+
+interactionPresentation.run();
+
 // ---------------------------------------------------------------------------
 // interaction timeout — requestInteraction({ timeoutMs }) resolves with a
 // status:'timeout' result (never rejects) and closes the widget read-only.

package/src/components/chat-driver/chat-driver.ts

@@ -874,7 +874,9 @@ export class ChatDriver extends EventTarget implements AiDriver {
    * @param data - Data to pass to the component.
    * @param options - Optional per-call overrides, including
    *   `chatInputDuringExecution` to hide or disable the main chat input while
-   *   the widget is awaiting user input. Reverts when the interaction resolves.
+   *   the widget is awaiting user input (reverts when the interaction resolves),
+   *   and `presentation` to control whether the host wraps the widget in a chat
+   *   bubble and/or shows the "Assistant" label.
    */
   public async requestInteraction<T>(
     componentName: string,
@@ -894,6 +896,7 @@ export class ChatDriver extends EventTarget implements AiDriver {
     const interactionId = crypto.randomUUID();
     const chatInputDuringExecution = options?.chatInputDuringExecution;
     const timeoutMs = options?.timeoutMs;
+    const presentation = options?.presentation;
     return new Promise((resolve, reject) => {
       this.pendingInteractions.set(interactionId, {
         resolve,
@@ -928,7 +931,12 @@ export class ChatDriver extends EventTarget implements AiDriver {
       this.appendToHistory({
         role: 'assistant',
         content: '',
-        interaction: { interactionId, componentName, data },
+        interaction: {
+          interactionId,
+          componentName,
+          data,
+          ...(presentation ? { presentation } : {}),
+        },
       });
     });
   }

package/src/components/flowing-waves-indicator.ts

@@ -0,0 +1,260 @@
+import { css, customElement, GenesisElement, html } from '@genesislcap/web-core';
+import {
+  AI_COLOUR_AMBER,
+  AI_COLOUR_CYAN,
+  AI_COLOUR_PINK,
+  AI_COLOUR_VIOLET,
+} from '../styles/ai-colours';
+
+/** SVG coordinate space the bands are drawn in (aspect matches the host box). */
+const VIEW_W = 225;
+const VIEW_H = 90;
+const CENTRE_Y = VIEW_H / 2;
+/** Number of samples traced across each band. */
+const POINTS = 90;
+/** Fraction of the width over which thickness ramps from 0 up to full. */
+const EDGE = 0.16;
+/** Global multiplier on the harmonic drift speeds — raise to morph faster. */
+const MORPH_SPEED = 3;
+/** Global multiplier on the harmonic frequencies — raise for narrower peaks. */
+const FREQ_SCALE = 2;
+/**
+ * Half-thickness (viewBox units) each band keeps even between peaks, so the
+ * waves emerge from a continuous line rather than leaving gaps. The four bands
+ * overlap along this line and screen-blend to white.
+ */
+const LINE_THICKNESS = 1.2;
+/**
+ * Amplitude boost added toward the middle of the width (a hump that is 0 at the
+ * ends, max in the centre). Makes peaks more likely to pop up centrally, while
+ * still allowing tall crests to appear nearer the edges.
+ */
+const CENTRE_BIAS = 4;
+
+/** One sine component of a band's thickness profile. */
+interface Harmonic {
+  /** Cycles across the band width. */
+  freq: number;
+  /** Contribution to the half-thickness, in viewBox units. */
+  amp: number;
+  /** Phase drift per frame (radians); differing speeds make the bumps morph. */
+  speed: number;
+  /** Starting phase offset. */
+  phase: number;
+}
+
+/**
+ * One band's thickness profile: a baseline plus a few sine harmonics. Because
+ * the harmonics drift at different speeds, their sum continually changes shape —
+ * bumps grow, shrink, merge and split — and where the sum dips below zero the
+ * band pinches to nothing, so a wave may have a single bump one moment and
+ * several the next. A different harmonic mix per band keeps the colours from
+ * lining up.
+ */
+interface BandConfig {
+  /**
+   * Vertical offset the harmonics oscillate around. Negative values act as a
+   * threshold: only the taller crests clear zero, so the band shows fewer,
+   * narrower, isolated peaks (the small ripples between crests are clipped away).
+   */
+  baseline: number;
+  harmonics: Harmonic[];
+}
+
+const BANDS: BandConfig[] = [
+  {
+    baseline: -4,
+    harmonics: [
+      { freq: 1.0, amp: 11, speed: 0.03, phase: 0.0 },
+      { freq: 2.3, amp: 6, speed: -0.021, phase: 1.3 },
+      { freq: 3.4, amp: 3, speed: 0.041, phase: 2.7 },
+    ],
+  },
+  {
+    baseline: -4,
+    harmonics: [
+      { freq: 1.3, amp: 10, speed: -0.026, phase: 0.8 },
+      { freq: 2.0, amp: 7, speed: 0.034, phase: 2.1 },
+      { freq: 3.1, amp: 3, speed: -0.045, phase: 0.4 },
+    ],
+  },
+  {
+    baseline: -4,
+    harmonics: [
+      { freq: 0.9, amp: 9, speed: 0.038, phase: 1.9 },
+      { freq: 2.6, amp: 6, speed: 0.019, phase: 3.0 },
+      { freq: 3.7, amp: 3, speed: -0.03, phase: 0.6 },
+    ],
+  },
+  {
+    baseline: -4,
+    harmonics: [
+      { freq: 1.1, amp: 8, speed: -0.034, phase: 2.4 },
+      { freq: 2.4, amp: 5, speed: 0.027, phase: 0.2 },
+      { freq: 3.2, amp: 3, speed: 0.048, phase: 1.5 },
+    ],
+  },
+];
+
+// Each band is its own stacked <svg> LAYER. The white-on-overlap effect uses
+// `mix-blend-mode: screen`, which composites reliably between HTML-level layers
+// but NOT between sibling SVG <path>/<g> elements in many browsers — hence one
+// svg per band rather than four paths in a single svg.
+const bandLayersMarkup = BANDS.map(
+  (_b, i) =>
+    `<svg class="layer band-layer" viewBox="0 0 ${VIEW_W} ${VIEW_H}">` +
+    `<path class="band b${i + 1}" data-band="${i}" />` +
+    `</svg>`,
+).join('');
+
+/**
+ * Animated "flowing waves" loading indicator — coloured organic waves (in the
+ * four brand colours) whose bumps swell, shrink, merge and split across a line,
+ * tapering to nothing at both ends. Where the colours overlap they blend
+ * additively toward white.
+ *
+ * Visual sibling of the dots loading indicator; interchangeable with the other
+ * loading styles for the "assistant is working" state.
+ *
+ * @example
+ * ```html
+ * <ai-flowing-waves-indicator></ai-flowing-waves-indicator>
+ * ```
+ *
+ * @beta
+ */
+@customElement({
+  name: 'ai-flowing-waves-indicator',
+  template: html<AiFlowingWavesIndicator>`
+    <div class="flow" role="img" aria-label="Assistant is working">${bandLayersMarkup}</div>
+  `,
+  styles: css`
+    :host {
+      display: inline-block;
+      width: 180px;
+      height: 72px;
+    }
+
+    /* Transparent — sits directly on the chat surface (no backdrop). 'isolation:
+       isolate' scopes the band layers' 'screen' blend to each other, so where
+       colours overlap they add toward white, while the group still composites
+       normally onto the page (works on light and dark, no wash-out). */
+    .flow {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      isolation: isolate;
+    }
+
+    .layer {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .band-layer {
+      mix-blend-mode: screen;
+    }
+
+    .band {
+      filter: drop-shadow(0 0 1.5px currentColor);
+    }
+    .band.b1 {
+      color: ${AI_COLOUR_AMBER};
+      fill: ${AI_COLOUR_AMBER};
+    }
+    .band.b2 {
+      color: ${AI_COLOUR_PINK};
+      fill: ${AI_COLOUR_PINK};
+    }
+    .band.b3 {
+      color: ${AI_COLOUR_CYAN};
+      fill: ${AI_COLOUR_CYAN};
+    }
+    .band.b4 {
+      color: ${AI_COLOUR_VIOLET};
+      fill: ${AI_COLOUR_VIOLET};
+    }
+  `,
+})
+export class AiFlowingWavesIndicator extends GenesisElement {
+  // A rAF loop morphs the band shapes: pure CSS can't continuously reshape the
+  // bumps (different sizes appearing at different times), and the per-frame sine
+  // sums are cheap. Same approach as the sine-tracing waves indicator.
+
+  private frame = 0;
+  private animFrame?: number;
+  private bandPaths?: SVGPathElement[];
+
+  connectedCallback() {
+    super.connectedCallback();
+    // Guard against a reconnect starting a second concurrent loop.
+    if (this.animFrame === undefined) {
+      this.tick();
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.animFrame !== undefined) {
+      cancelAnimationFrame(this.animFrame);
+      this.animFrame = undefined;
+    }
+  }
+
+  private tick() {
+    // Stop ticking once disconnected (belt-and-braces alongside the cancel in
+    // disconnectedCallback) so no frames are scheduled while detached.
+    if (!this.isConnected) {
+      this.animFrame = undefined;
+      return;
+    }
+    if (!this.bandPaths) {
+      const paths = this.shadowRoot?.querySelectorAll<SVGPathElement>('.band');
+      if (paths?.length) this.bandPaths = Array.from(paths);
+    }
+    this.bandPaths?.forEach((path, i) => {
+      const cfg = BANDS[i];
+      if (cfg) path.setAttribute('d', AiFlowingWavesIndicator.buildBand(cfg, this.frame));
+    });
+    this.frame += 1;
+    this.animFrame = requestAnimationFrame(() => this.tick());
+  }
+
+  /**
+   * Trace one band for the given frame: a baseline-plus-harmonics half-thickness
+   * profile, clamped at 0 (so the band pinches to nothing between bumps) and
+   * tapered to 0 at both ends.
+   */
+  private static buildBand(cfg: BandConfig, frame: number): string {
+    const top: Array<[number, number]> = [];
+    const bottom: Array<[number, number]> = [];
+    for (let i = 0; i <= POINTS; i += 1) {
+      const u = i / POINTS;
+      const x = u * VIEW_W;
+      // Plateau edge taper: 0 at both ends, full across the middle.
+      const edge = Math.min(1, Math.min(u, 1 - u) / EDGE);
+      // Sum the drifting harmonics, then clamp so dips pinch the band to nothing.
+      let wave = 0;
+      for (const h of cfg.harmonics) {
+        wave +=
+          h.amp *
+          Math.sin(u * Math.PI * 2 * h.freq * FREQ_SCALE + frame * h.speed * MORPH_SPEED + h.phase);
+      }
+      // Hump that favours the middle (0 at the ends, 1 at the centre).
+      const centre = Math.sin(Math.PI * u);
+      const env = edge * (LINE_THICKNESS + Math.max(0, cfg.baseline + wave + CENTRE_BIAS * centre));
+      top.push([x, CENTRE_Y - env]);
+      bottom.push([x, CENTRE_Y + env]);
+    }
+    let d = `M${top[0][0].toFixed(1)} ${top[0][1].toFixed(1)}`;
+    for (let i = 1; i < top.length; i += 1)
+      d += ` L${top[i][0].toFixed(1)} ${top[i][1].toFixed(1)}`;
+    for (let i = bottom.length - 1; i >= 0; i -= 1) {
+      d += ` L${bottom[i][0].toFixed(1)} ${bottom[i][1].toFixed(1)}`;
+    }
+    return `${d} Z`;
+  }
+}

package/src/components/plasma-orb-indicator.ts

@@ -0,0 +1,281 @@
+import { css, customElement, GenesisElement, html } from '@genesislcap/web-core';
+import {
+  AI_COLOUR_AMBER,
+  AI_COLOUR_CYAN,
+  AI_COLOUR_PINK,
+  AI_COLOUR_VIOLET,
+} from '../styles/ai-colours';
+
+/**
+ * Animated "plasma orb" loading indicator — a fixed glowing energy sphere whose
+ * luminous filaments and swirls drift and rotate inside it, like a plasma ball.
+ * The globe never resizes; only the energy moves.
+ *
+ * Brand-coloured: a violet energy core, a slow cyan/pink tint wash, and a warm
+ * amber hot-spot — covering all four brand colours.
+ *
+ * Visual sibling of the dots loading indicator; interchangeable with the other
+ * loading styles for the "assistant is working" state.
+ *
+ * @example
+ * ```html
+ * <ai-plasma-orb-indicator></ai-plasma-orb-indicator>
+ * ```
+ *
+ * @beta
+ */
+@customElement({
+  name: 'ai-plasma-orb-indicator',
+  template: html<AiPlasmaOrbIndicator>`
+    <div class="pulse" role="img" aria-label="Assistant is working">
+      <div class="plasma">
+        <div class="swirl1"></div>
+        <div class="swirl2"></div>
+        <svg class="filaments" viewBox="0 0 100 100">
+          <g>
+            <path d="M8 50 Q50 18 92 50" />
+            <path d="M50 8 Q82 50 50 92" />
+            <path d="M18 22 Q52 54 82 80" />
+            <path d="M82 20 Q48 46 20 82" />
+            <path d="M12 64 Q50 38 88 34" />
+            <path d="M30 12 Q55 50 72 88" />
+            <path d="M14 38 Q50 60 86 62" />
+            <path d="M66 10 Q44 48 24 90" />
+            <path d="M10 28 Q56 44 90 72" />
+            <path d="M88 44 Q46 52 16 76" />
+            <path d="M40 6 Q58 50 88 86" />
+            <path d="M22 86 Q46 44 60 8" />
+          </g>
+        </svg>
+        <div class="tint"></div>
+        <div class="hot"></div>
+      </div>
+      <div class="ring-emit"></div>
+      <div class="ring-emit r2"></div>
+    </div>
+  `,
+  styles: css`
+    :host {
+      position: relative;
+      display: inline-block;
+      width: 56px;
+      height: 56px;
+    }
+
+    /* Authored at the gallery's native 100px size and scaled down so the px
+       glow/filament geometry keeps its proportions. Absolutely centred so the
+       overflowing glow/rings don't affect the host's layout box. */
+    .pulse {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 100px;
+      height: 100px;
+      transform: translate(-50%, -50%) scale(0.56);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .plasma {
+      position: relative;
+      width: 86px;
+      height: 86px;
+      border-radius: 50%;
+      overflow: hidden;
+      isolation: isolate;
+      background: radial-gradient(
+        circle at 50% 40%,
+        #fdf2ff 0%,
+        #f3c7fd 14%,
+        #e362ff 38%,
+        ${AI_COLOUR_VIOLET} 62%,
+        #8a0a9c 84%,
+        #3a0044 100%
+      );
+      box-shadow:
+        0 0 20px 5px color-mix(in srgb, ${AI_COLOUR_VIOLET}, transparent 20%),
+        0 0 48px 12px color-mix(in srgb, ${AI_COLOUR_VIOLET}, transparent 58%),
+        inset 0 0 22px rgb(255 255 255 / 22%),
+        inset 0 0 8px rgb(255 255 255 / 50%);
+    }
+
+    /* bright rim light */
+    .plasma::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      z-index: 5;
+      pointer-events: none;
+      box-shadow:
+        inset 0 0 6px 1px rgb(245 220 255 / 90%),
+        inset 0 0 16px color-mix(in srgb, ${AI_COLOUR_VIOLET}, transparent 35%);
+    }
+
+    /* slow colour shift: washes the orb toward cyan/pink and back */
+    .tint {
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      z-index: 4;
+      pointer-events: none;
+      background: radial-gradient(
+        circle at 50% 40%,
+        color-mix(in srgb, ${AI_COLOUR_CYAN}, white 35%) 0%,
+        ${AI_COLOUR_CYAN} 45%,
+        ${AI_COLOUR_PINK} 100%
+      );
+      mix-blend-mode: color;
+      opacity: 0;
+      animation: plasma-tint 9s ease-in-out infinite;
+    }
+    @keyframes plasma-tint {
+      0%,
+      100% {
+        opacity: 0;
+      }
+      50% {
+        opacity: 0.85;
+      }
+    }
+
+    /* warm white-hot core highlight (shifts, never resizes the orb) */
+    .hot {
+      position: absolute;
+      left: 50%;
+      top: 38%;
+      width: 42px;
+      height: 36px;
+      z-index: 4;
+      border-radius: 50%;
+      pointer-events: none;
+      filter: blur(3px);
+      background: radial-gradient(
+        circle,
+        rgb(255 255 255 / 90%) 0%,
+        color-mix(in srgb, ${AI_COLOUR_AMBER}, white 30%) 42%,
+        rgb(255 255 255 / 0%) 70%
+      );
+      animation: plasma-hot 5s ease-in-out infinite;
+    }
+    @keyframes plasma-hot {
+      0%,
+      100% {
+        opacity: 0.65;
+        transform: translate(-50%, -50%) translate(-2px, 1px);
+      }
+      50% {
+        opacity: 1;
+        transform: translate(-50%, -50%) translate(3px, -2px);
+      }
+    }
+
+    /* swirling radial filaments */
+    .swirl1,
+    .swirl2 {
+      position: absolute;
+      inset: -25%;
+      border-radius: 50%;
+      z-index: 2;
+      mix-blend-mode: screen;
+    }
+    .swirl1 {
+      background: conic-gradient(
+        from 0deg,
+        transparent 0 4deg,
+        rgb(225 240 255 / 55%) 7deg,
+        transparent 11deg 58deg,
+        rgb(190 225 255 / 45%) 64deg,
+        transparent 70deg 138deg,
+        rgb(255 255 255 / 50%) 144deg,
+        transparent 150deg 220deg,
+        rgb(200 230 255 / 45%) 226deg,
+        transparent 232deg 300deg,
+        rgb(255 255 255 / 45%) 306deg,
+        transparent 312deg 360deg
+      );
+      filter: blur(3px);
+      animation: plasma-spin-cw 9s linear infinite;
+    }
+    .swirl2 {
+      background: conic-gradient(
+        from 40deg,
+        transparent 0 30deg,
+        rgb(180 215 255 / 40%) 36deg,
+        transparent 42deg 110deg,
+        rgb(255 255 255 / 40%) 116deg,
+        transparent 122deg 190deg,
+        rgb(190 225 255 / 40%) 196deg,
+        transparent 202deg 280deg,
+        rgb(255 255 255 / 40%) 286deg,
+        transparent 292deg 360deg
+      );
+      filter: blur(5px);
+      animation: plasma-spin-ccw 13s linear infinite;
+    }
+
+    /* curved web filaments */
+    .filaments {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 3;
+      overflow: visible;
+      mix-blend-mode: screen;
+      filter: blur(0.5px);
+    }
+    .filaments g {
+      transform-box: fill-box;
+      transform-origin: center;
+      animation: plasma-spin-ccw 18s linear infinite;
+    }
+    .filaments path {
+      fill: none;
+      stroke: rgb(230 245 255 / 50%);
+      stroke-width: 0.7;
+    }
+
+    /* soft light rings emitting outward from the orb */
+    .ring-emit {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      width: 86px;
+      height: 86px;
+      transform: translate(-50%, -50%);
+      border-radius: 50%;
+      border: 2px solid color-mix(in srgb, ${AI_COLOUR_VIOLET}, transparent 25%);
+      box-shadow: 0 0 8px color-mix(in srgb, ${AI_COLOUR_VIOLET}, transparent 35%);
+      pointer-events: none;
+      z-index: 0;
+      animation: plasma-emit 2.8s ease-out infinite;
+    }
+    .ring-emit.r2 {
+      animation-delay: 1.4s;
+    }
+    @keyframes plasma-emit {
+      0% {
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 0.7;
+      }
+      100% {
+        transform: translate(-50%, -50%) scale(1.45);
+        opacity: 0;
+      }
+    }
+
+    @keyframes plasma-spin-cw {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+    @keyframes plasma-spin-ccw {
+      to {
+        transform: rotate(-360deg);
+      }
+    }
+  `,
+})
+export class AiPlasmaOrbIndicator extends GenesisElement {}