@genesislcap/ai-assistant 14.458.0 → 14.458.1-GENC-0.2

package/src/main/main.template.ts

@@ -40,10 +40,6 @@ function unknownToolPayload(tc: ChatToolCall): string {
   return lines.join('\n');
 }
 
-const animationItemRenderer = (option: any): ViewTemplate => html`
-  <span part="option-label" title="${() => option.tooltip}">${() => option.label}</span>
-`;
-
 const HALO_SPEED_DEFAULT = 1.5;
 const HALO_SPEED_ORCHESTRATING = 0.4;
 const HALO_BORDER_SIZE_DEFAULT = 3;
@@ -52,9 +48,10 @@ const HALO_BORDER_SIZE_DEFAULT = 3;
 const SESSION_COST_DECIMALS = 4;
 
 const animationOptions = Object.entries(ANIMATION_DEFS).map(([value, def]) => ({
+  type: def.category,
   value,
   label: def.label,
-  tooltip: def.tooltip,
+  description: def.description,
 }));
 
 // Avatar markup is owned by the component (`assistantIconSafe` / `userIconSafe`),
@@ -184,7 +181,7 @@ export const FoundationAiAssistantTemplate = (
 ): ViewTemplate<FoundationAiAssistant> => {
   const buttonTag = `${designSystemPrefix}-button`;
   const switchTag = `${designSystemPrefix}-switch`;
-  const multiselectTag = `${designSystemPrefix}-multiselect`;
+  const categorizedMultiselectTag = `${designSystemPrefix}-categorized-multiselect`;
   const textareaTag = `${designSystemPrefix}-text-area`;
   const iconTag = `${designSystemPrefix}-icon`;
   const progressTag = `${designSystemPrefix}-progress`;
@@ -473,16 +470,14 @@ ${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<stro
                   html<FoundationAiAssistant>`
                     <div class="settings-animations">
                       <span class="settings-label">Animations</span>
-                      <${multiselectTag}
+                      <${categorizedMultiselectTag}
                         part="toggle-animations"
                         :selectedOptions=${(x) => x.enabledAnimations}
                         :options=${() => animationOptions}
-                        :itemRenderer=${() => animationItemRenderer}
                         @selectionChange=${(x, c) =>
                           x.setEnabledAnimations((c.event as CustomEvent).detail)}
                         search="false"
-                        all="false"
-                      ></${multiselectTag}>
+                      ></${categorizedMultiselectTag}>
                     </div>
                   `,
                 )}
@@ -590,7 +585,9 @@ ${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<stro
         ${when(
           (x) =>
             x.showLoadingIndicator &&
-            (x.chatConfig.ui?.animations == null || x.enabledAnimations.includes('loading')),
+            (x.chatConfig.ui?.animations == null ||
+              x.enabledAnimations.includes('loading') ||
+              x.enabledAnimations.includes('waves')),
           html<FoundationAiAssistant>`
             <div class="message-row ai" part="thinking">
               <div class="avatar">
@@ -603,12 +600,22 @@ ${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<stro
                         <span class="avatar-icon" :innerHTML="${() => x.assistantIconSafe}"></span>
                       `}
               </div>
-              <div class="thinking-dots">
-                <div class="dot dot-1"></div>
-                <div class="dot dot-2"></div>
-                <div class="dot dot-3"></div>
-                <div class="dot dot-4"></div>
-              </div>
+              ${(x) =>
+                x.enabledAnimations.includes('waves')
+                  ? html<FoundationAiAssistant>`
+                      <div class="thinking-waves" part="thinking-waves">
+                        <ai-waves-indicator></ai-waves-indicator>
+                        <span class="thinking-caption">Thinking...</span>
+                      </div>
+                    `
+                  : html<FoundationAiAssistant>`
+                      <div class="thinking-dots">
+                        <div class="dot dot-1"></div>
+                        <div class="dot dot-2"></div>
+                        <div class="dot dot-3"></div>
+                        <div class="dot dot-4"></div>
+                      </div>
+                    `}
             </div>
           `,
         )}

package/src/main/main.ts

@@ -49,6 +49,7 @@ import { AiChatInteractionWrapper } from '../components/chat-interaction-wrapper
 import { AiChatMarkdown } from '../components/chat-markdown/chat-markdown';
 import { AiHaloOverlay } from '../components/halo-overlay';
 import { OrchestratingDriver } from '../components/orchestrating-driver/orchestrating-driver';
+import { AiWavesIndicator } from '../components/waves-indicator';
 import type { AgentConfig } from '../config/config';
 import {
   recordMetaEvent,
@@ -66,6 +67,7 @@ import {
 } from '../styles/ai-colours';
 import { ChatSuggestions } from '../suggestions/chat-suggestions';
 import { AnimatedPanelToggle } from '../utils/animated-panel-toggle';
+import { resolveExclusiveLoadingStyle } from '../utils/animation-exclusivity';
 import { logger } from '../utils/logger';
 import { filterVisibleMessages, trailingInteractionRow } from '../utils/message-partition';
 import { sumCosts } from '../utils/sum-costs';
@@ -80,7 +82,7 @@ import type {
   SubmitMessageResult,
   SuggestionsState,
 } from './main.types';
-import { ALL_ANIMATIONS } from './main.types';
+import { DEFAULT_ANIMATIONS } from './main.types';
 
 /** Context window sizes (in tokens) for known models. */
 /**
@@ -137,6 +139,7 @@ avoidTreeShaking(
   AiChatMarkdown,
   AiChatInteractionWrapper,
   AiHaloOverlay,
+  AiWavesIndicator,
   AiChatBubble,
   AiActivityHalo,
   ChatSuggestions,
@@ -656,7 +659,9 @@ export class FoundationAiAssistant extends GenesisElement {
       return;
     }
     const last = this.messages[this.messages.length - 1];
-    if (last?.interaction) {
+    // Hide only while a pending interaction blocks on the user; a resolved
+    // interaction means the assistant is computing again (keep the halo).
+    if (last?.interaction && !last.interaction.resolved) {
       this.showHalo = 'no';
     } else if (this.showHalo !== 'orchestrating') {
       this.showHalo = 'agent';
@@ -1047,9 +1052,10 @@ export class FoundationAiAssistant extends GenesisElement {
       this.showToolCalls = ui.showToolCalls === true;
       this.showThinkingSteps = ui.showThinkingSteps === true;
       this.showAgentSwitchIndicator = ui.showAgentSwitchIndicator === true;
-      this.enabledAnimations =
+      this.enabledAnimations = resolveExclusiveLoadingStyle(
         (ui.animations?.enabled as AiAssistantAnimation[]) ??
-        (ui.animations ? [...ALL_ANIMATIONS] : []);
+          (ui.animations ? [...DEFAULT_ANIMATIONS] : []),
+      );
 
       const defaultAgent = this.chatConfig.picker?.defaultAgent;
       if (defaultAgent && (this.agents ?? []).some((a) => a.name === defaultAgent)) {
@@ -1216,9 +1222,13 @@ export class FoundationAiAssistant extends GenesisElement {
     // waiting for the user, not computing.
     if (this.busy) {
       const last = this.messages[this.messages.length - 1];
-      if (last?.interaction) {
+      // Only a *pending* interaction means the assistant is blocked waiting on
+      // the user. Once it's resolved — or for any normal step — the assistant is
+      // computing again, so the indicator should resume (e.g. while it works out
+      // the next planning question after the user answers a widget).
+      if (last?.interaction && !last.interaction.resolved) {
         this.stopLoadingTimer();
-      } else if (last?.role === 'assistant') {
+      } else {
         this.startLoadingTimer();
       }
     }
@@ -1302,7 +1312,7 @@ export class FoundationAiAssistant extends GenesisElement {
     });
   }
 
-  private static readonly DEFAULT_LOADING_DELAY_S = 5;
+  private static readonly DEFAULT_LOADING_DELAY_S = 0;
   private static readonly DEFAULT_SUGGESTION_COUNT = 3;
   private static readonly MS_PER_SECOND = 1000;
 
@@ -1506,7 +1516,9 @@ export class FoundationAiAssistant extends GenesisElement {
   }
 
   setEnabledAnimations(animations: AiAssistantAnimation[]) {
-    this.enabledAnimations = animations;
+    // The dots and waves loading styles are mutually exclusive — enabling one
+    // disables the other (see resolveExclusiveLoadingStyle).
+    this.enabledAnimations = resolveExclusiveLoadingStyle(animations, this.enabledAnimations);
   }
 
   getDebugLog() {

package/src/main/main.types.ts

@@ -53,24 +53,41 @@ export type SuggestionsState =
 export interface AiAssistantAnimationDef {
   /** Display label shown in the settings multiselect. */
   label: string;
-  /** Short description shown as a tooltip on the option. */
-  tooltip: string;
+  /** Short description shown beneath the label in the categorized multiselect. */
+  description: string;
+  /** Group heading the option is listed under in the settings multiselect. */
+  category: string;
 }
 
 /**
  * Registry of all available animations with their display metadata.
  * Adding an entry here automatically extends the {@link AiAssistantAnimation} type.
  *
+ * @remarks
+ * `loading` (dots) and `waves` are two interchangeable styles of the same
+ * "is the assistant working" indicator and are therefore grouped under the same
+ * {@link AiAssistantAnimationDef.category}. They are mutually exclusive — see
+ * `LOADING_STYLE_ANIMATIONS`.
+ *
  * @beta
  */
 export const ANIMATION_DEFS = {
   loading: {
-    label: 'Loading indicator',
-    tooltip: 'Shows a pulsing animation while the assistant is generating a response.',
+    label: 'Dots',
+    description: 'Shows pulsing dots while the assistant is generating a response.',
+    category: 'Loading style',
+  },
+  waves: {
+    label: 'Waves',
+    description:
+      'Shows glowing sine waves inside a circle while the assistant is generating a response.',
+    category: 'Loading style',
   },
   halo: {
     label: 'Halo',
-    tooltip: 'Displays a glowing halo around the assistant avatar while a response is streaming.',
+    description:
+      'Displays a glowing halo around the assistant avatar while a response is streaming.',
+    category: 'Effects',
   },
 } satisfies Record<string, AiAssistantAnimationDef>;
 
@@ -87,3 +104,23 @@ export type AiAssistantAnimation = keyof typeof ANIMATION_DEFS;
  * @internal
  */
 export const ALL_ANIMATIONS = Object.keys(ANIMATION_DEFS) as AiAssistantAnimation[];
+
+/**
+ * The interchangeable "assistant is working" loading-indicator styles. At most
+ * one of these may be enabled at a time — enabling one disables the other.
+ *
+ * @internal
+ */
+export const LOADING_STYLE_ANIMATIONS = [
+  'loading',
+  'waves',
+] as const satisfies readonly AiAssistantAnimation[];
+
+/**
+ * Animations enabled by default when a consumer opts into the animations
+ * feature without specifying an explicit `enabled` list. Keeps the dots loading
+ * style (the long-standing default); the waves style is opt-in.
+ *
+ * @internal
+ */
+export const DEFAULT_ANIMATIONS: AiAssistantAnimation[] = ['loading', 'halo'];

package/src/utils/animation-exclusivity.test.ts

@@ -0,0 +1,53 @@
+import { assert, createLogicSuite } from '@genesislcap/foundation-testing';
+import type { AiAssistantAnimation } from '../main/main.types';
+import { resolveExclusiveLoadingStyle } from './animation-exclusivity';
+
+const suite = createLogicSuite('resolveExclusiveLoadingStyle');
+
+suite('leaves a selection with only the dots loading style untouched', () => {
+  const next: AiAssistantAnimation[] = ['loading', 'halo'];
+  assert.equal(resolveExclusiveLoadingStyle(next, ['halo']), ['loading', 'halo']);
+});
+
+suite('leaves a selection with only the waves loading style untouched', () => {
+  const next: AiAssistantAnimation[] = ['waves', 'halo'];
+  assert.equal(resolveExclusiveLoadingStyle(next, ['halo']), ['waves', 'halo']);
+});
+
+suite('leaves a selection with no loading style untouched', () => {
+  assert.equal(resolveExclusiveLoadingStyle(['halo'], []), ['halo']);
+});
+
+suite('drops dots when waves was just added on top of dots', () => {
+  // Previously dots was on; user ticks waves → waves wins, dots removed.
+  const result = resolveExclusiveLoadingStyle(['loading', 'waves', 'halo'], ['loading', 'halo']);
+  assert.equal(result, ['waves', 'halo']);
+});
+
+suite('drops waves when dots was just added on top of waves', () => {
+  // Previously waves was on; user ticks dots → dots wins, waves removed.
+  const result = resolveExclusiveLoadingStyle(['loading', 'waves', 'halo'], ['waves', 'halo']);
+  assert.equal(result, ['loading', 'halo']);
+});
+
+suite('preserves the order of the surviving selection', () => {
+  const result = resolveExclusiveLoadingStyle(['halo', 'loading', 'waves'], ['halo', 'loading']);
+  // waves was just added → loading dropped; halo and waves keep their order.
+  assert.equal(result, ['halo', 'waves']);
+});
+
+suite('falls back to dots when both are present with no prior state (e.g. bad config)', () => {
+  const result = resolveExclusiveLoadingStyle(['loading', 'waves', 'halo'], []);
+  assert.equal(result, ['loading', 'halo']);
+});
+
+suite('falls back to dots when both were already present (neither newly added)', () => {
+  const result = resolveExclusiveLoadingStyle(['loading', 'waves'], ['loading', 'waves', 'halo']);
+  assert.equal(result, ['loading']);
+});
+
+suite('handles an empty selection', () => {
+  assert.equal(resolveExclusiveLoadingStyle([], ['loading']), []);
+});
+
+suite.run();

package/src/utils/animation-exclusivity.ts

@@ -0,0 +1,40 @@
+import type { AiAssistantAnimation } from '../main/main.types';
+import { LOADING_STYLE_ANIMATIONS } from '../main/main.types';
+
+/**
+ * Enforces that at most one loading-indicator style (dots vs. waves) is enabled
+ * at a time. The two are alternative presentations of the same "assistant is
+ * working" state, so selecting one must deselect the other.
+ *
+ * The settings control is a multiselect (checkboxes), which permits selecting
+ * both; this resolver makes the loading-style group behave like a radio group
+ * by dropping the previously-selected style whenever a new one is added.
+ *
+ * @param next - The freshly-selected animation list (e.g. emitted by the
+ *   multiselect, or read from consumer config).
+ * @param previous - The animation list in effect before this change. Used to
+ *   work out which loading style was just added so the other can be dropped.
+ *   Pass `[]` when resolving an initial/config value with no prior state.
+ * @returns `next` with at most one loading style retained. When both are
+ *   present and neither is newly added (e.g. a misconfigured `enabled` list),
+ *   the first entry of `LOADING_STYLE_ANIMATIONS` (dots) wins.
+ *
+ * @internal
+ */
+export function resolveExclusiveLoadingStyle(
+  next: AiAssistantAnimation[],
+  previous: AiAssistantAnimation[] = [],
+): AiAssistantAnimation[] {
+  const selectedStyles = LOADING_STYLE_ANIMATIONS.filter((style) => next.includes(style));
+  if (selectedStyles.length <= 1) {
+    return next;
+  }
+  // Both styles selected — keep whichever was just added (absent from
+  // `previous`); fall back to the first declared style on ambiguity.
+  const justAdded = selectedStyles.find((style) => !previous.includes(style)) ?? selectedStyles[0];
+  return next.filter(
+    (animation) =>
+      animation === justAdded ||
+      !(LOADING_STYLE_ANIMATIONS as readonly AiAssistantAnimation[]).includes(animation),
+  );
+}