@genesislcap/ai-assistant 14.419.2 → 14.421.0

package/src/main/main.template.ts

@@ -1,12 +1,27 @@
+import { isChatToolCallUnknown } from '@genesislcap/foundation-ai';
 import type { ChatAttachment, ChatMessage, ChatToolCall } from '@genesislcap/foundation-ai';
-import { html, repeat, when, ViewTemplate } from '@genesislcap/web-core';
+import { html, ref, repeat, when, ViewTemplate } from '@genesislcap/web-core';
 import type { FoundationAiAssistant } from './main';
 import { ANIMATION_DEFS } from './main.types';
 
+function unknownToolPayload(tc: ChatToolCall): string {
+  if (!isChatToolCallUnknown(tc)) return '';
+  const lines = [`${tc.name} — tool does not exist`];
+  if (tc.availableTools.length > 0) {
+    lines.push('Available tools:');
+    tc.availableTools.forEach((t) => lines.push(`  • ${t}`));
+  }
+  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;
+
 const animationOptions = Object.entries(ANIMATION_DEFS).map(([value, def]) => ({
   value,
   label: def.label,
@@ -34,6 +49,8 @@ const genesisIconTemplate = html`
  */
 const messageType = (m: ChatMessage): string => {
   switch (true) {
+    case m.role === 'system-event':
+      return 'agent-switch';
     case m.role === 'user':
       return 'user';
     case !!m.thinking:
@@ -64,17 +81,18 @@ export const FoundationAiAssistantTemplate = (
   const multiselectTag = `${designSystemPrefix}-multiselect`;
   const textareaTag = `${designSystemPrefix}-text-area`;
   const iconTag = `${designSystemPrefix}-icon`;
+  const progressTag = `${designSystemPrefix}-progress`;
 
   return html<FoundationAiAssistant>`
     <div class="chat-wrapper" part="chat-wrapper">
       ${when(
-        (x) => !!x.chatConfig.acceptedFiles,
+        (x) => !!x.chatConfig.ui?.acceptedFiles,
         html<FoundationAiAssistant>`
           <input
             class="file-input"
             type="file"
             multiple
-            accept=${(x) => x.chatConfig.acceptedFiles}
+            accept=${(x) => x.chatConfig.ui?.acceptedFiles}
             @change=${(x, c) => x.handleFileSelect(c.event)}
           />
         `,
@@ -82,23 +100,21 @@ export const FoundationAiAssistantTemplate = (
       ${when(
         (x) =>
           !!x.popoutMode ||
-          x.chatConfig.showToolCalls != null ||
-          x.chatConfig.showThinkingSteps != null ||
-          x.chatConfig.allowDebugDownload === true ||
-          x.chatConfig.animations != null,
+          x.chatConfig.ui?.showToolCalls != null ||
+          x.chatConfig.ui?.showThinkingSteps != null ||
+          x.chatConfig.ui?.showAgentSwitchIndicator != null ||
+          x.chatConfig.ui?.allowDebugDownload === true ||
+          x.chatConfig.ui?.animations != null,
         html<FoundationAiAssistant>`
           <div
-            class="chat-header ${(x) => (x.popoutMode === 'expand' ? 'draggable' : '')}"
+            class="chat-header ${(x) => (x.popoutMode !== 'collapse' ? 'draggable' : '')}"
             part="chat-header"
             @mousedown="${(x, c) => x.onChatHeaderMouseDown(c.event as MouseEvent)}"
           >
             ${when(
-              (x) => !!(x.headerTitle ?? x.agents?.[0]?.name),
+              (x) => !!x.headerTitle,
               html<FoundationAiAssistant>`
-                <!-- TODO: multi-agent orchestration — bind to active agent name rather than always agents[0] -->
-                <span class="chat-title" part="chat-title">
-                  ${(x) => x.headerTitle ?? x.agents?.[0]?.name}
-                </span>
+                <span class="chat-title" part="chat-title">${(x) => x.headerTitle}</span>
               `,
             )}
             <div class="header-actions" part="header-actions">
@@ -118,10 +134,11 @@ export const FoundationAiAssistantTemplate = (
               )}
               ${when(
                 (x) =>
-                  x.chatConfig.showToolCalls != null ||
-                  x.chatConfig.showThinkingSteps != null ||
-                  x.chatConfig.allowDebugDownload === true ||
-                  x.chatConfig.animations != null,
+                  x.chatConfig.ui?.showToolCalls != null ||
+                  x.chatConfig.ui?.showThinkingSteps != null ||
+                  x.chatConfig.ui?.showAgentSwitchIndicator != null ||
+                  x.chatConfig.ui?.allowDebugDownload === true ||
+                  x.chatConfig.ui?.animations != null,
                 html<FoundationAiAssistant>`
                   <${buttonTag}
                     class="settings-button"
@@ -139,7 +156,7 @@ export const FoundationAiAssistantTemplate = (
             html<FoundationAiAssistant>`
               <div class="settings-panel" part="settings-panel">
                 ${when(
-                  (x) => x.chatConfig.showToolCalls != null,
+                  (x) => x.chatConfig.ui?.showToolCalls != null,
                   html<FoundationAiAssistant>`
                     <${switchTag}
                       part="toggle-tool-calls"
@@ -149,7 +166,7 @@ export const FoundationAiAssistantTemplate = (
                   `,
                 )}
                 ${when(
-                  (x) => x.chatConfig.showThinkingSteps != null,
+                  (x) => x.chatConfig.ui?.showThinkingSteps != null,
                   html<FoundationAiAssistant>`
                     <${switchTag}
                       part="toggle-thinking"
@@ -159,17 +176,27 @@ export const FoundationAiAssistantTemplate = (
                   `,
                 )}
                 ${when(
-                  (x) => x.chatConfig.allowDebugDownload === true,
+                  (x) => x.chatConfig.ui?.showAgentSwitchIndicator != null,
+                  html<FoundationAiAssistant>`
+                    <${switchTag}
+                      part="toggle-agent-switch"
+                      :checked=${(x) => x.showAgentSwitchIndicator}
+                      @change=${(x) => x.toggleShowAgentSwitchIndicator()}
+                    >Agents</${switchTag}>
+                  `,
+                )}
+                ${when(
+                  (x) => x.chatConfig.ui?.allowDebugDownload === true,
                   html<FoundationAiAssistant>`
                     <${buttonTag}
                       part="download-button"
                       appearance="stealth"
-                      @click=${(x) => x.downloadHistory()}
-                    >Download debug state</${buttonTag}>
+                      @click=${(x) => x.downloadDebugLog()}
+                    >Download agent log</${buttonTag}>
                   `,
                 )}
                 ${when(
-                  (x) => x.chatConfig.animations?.userConfigurable === true,
+                  (x) => x.chatConfig.ui?.animations?.userConfigurable === true,
                   html<FoundationAiAssistant>`
                     <div class="settings-animations">
                       <span class="settings-label">Animations</span>
@@ -191,77 +218,156 @@ export const FoundationAiAssistantTemplate = (
           )}
         `,
       )}
+      ${when(
+        (x) =>
+          x.settingsOpen &&
+          x.chatConfig.ui?.showContextUsage !== false &&
+          x.contextTokens != null &&
+          x.contextLimit != null,
+        html<FoundationAiAssistant>`
+          <div class="context-usage" part="context-usage">
+            <div class="context-usage-header">
+              <span class="context-usage-label">Context window</span>
+              <span class="context-usage-tokens">
+                ${(x) => x.contextTokens!.toLocaleString()} /
+                ${(x) => x.contextLimit!.toLocaleString()} tokens
+                (${(x) => Math.round((x.contextTokens! / x.contextLimit!) * 100)}%)
+              </span>
+            </div>
+            <${progressTag}
+              part="context-progress"
+              value="${(x) => Math.min(100, Math.round((x.contextTokens! / x.contextLimit!) * 100))}"
+            ></${progressTag}>
+          </div>
+        `,
+      )}
 
-      <div class="messages" part="messages">
+      <div class="splash-wrapper" part="splash">
+        <slot name="splash"></slot>
+      </div>
+
+      <div class="messages" part="messages" ${ref('messagesEl')}>
 
         ${repeat(
           (x) => x.visibleMessages,
           html<ChatMessage, FoundationAiAssistant>`
-            <div class="message-row ${(m) => messageType(m)}">
-              ${when(
-                (m) => m.role !== 'user',
-                html<ChatMessage, FoundationAiAssistant>`
-                  <div class="avatar ${(m) => messageType(m)}">
-                    ${when(
-                      (m, c) => !!(c.parent as FoundationAiAssistant).imageSrc,
-                      html<ChatMessage, FoundationAiAssistant>`
-                        <img
-                          src="${(m, c) => (c.parent as FoundationAiAssistant).imageSrc}"
-                          alt="Assistant"
-                          class="avatar-img"
-                        />
-                      `,
-                    )}
-                    ${when(
-                      (m, c) => !(c.parent as FoundationAiAssistant).imageSrc,
-                      genesisIconTemplate,
-                    )}
-                  </div>
-                `,
-              )}
-              <div class="message ${(m) => messageType(m)}">
-                <div class="sender">${(m) => senderLabel[messageType(m)]}</div>
-                <div class="content">
+            ${when(
+              (m) => m.role === 'system-event',
+              html<ChatMessage, FoundationAiAssistant>`
+                <div class="agent-switch-indicator" part="agent-switch-indicator">
+                  <span class="agent-switch-label">${(m) => m.content}</span>
+                </div>
+              `,
+            )}
+            ${when(
+              (m) => m.role !== 'system-event',
+              html<ChatMessage, FoundationAiAssistant>`
+                <div class="message-row ${(m) => messageType(m)}">
                   ${when(
-                    (m) => m.content,
+                    (m) => m.role !== 'user',
                     html<ChatMessage, FoundationAiAssistant>`
-                      <ai-chat-markdown :content="${(m) => m.content}"></ai-chat-markdown>
+                      <div class="avatar ${(m) => messageType(m)}">
+                        ${when(
+                          (m, c) => !!(c.parent as FoundationAiAssistant).imageSrc,
+                          html<ChatMessage, FoundationAiAssistant>`
+                            <img
+                              src="${(m, c) => (c.parent as FoundationAiAssistant).imageSrc}"
+                              alt="Assistant"
+                              class="avatar-img"
+                            />
+                          `,
+                        )}
+                        ${when(
+                          (m, c) => !(c.parent as FoundationAiAssistant).imageSrc,
+                          genesisIconTemplate,
+                        )}
+                      </div>
                     `,
                   )}
-                  ${when(
-                    (m) => m.toolCalls,
-                    html<ChatMessage, FoundationAiAssistant>`
-                      ${repeat(
-                        (m) => m.toolCalls ?? [],
-                        html<ChatToolCall>`
-                          <pre class="payload"><strong>${(tc) => tc.name}</strong>(${(tc) =>
-                            JSON.stringify(tc.args, null, 2)})</pre>
+                  <div class="message ${(m) => messageType(m)}">
+                    <div class="sender">
+                      ${(m, c) =>
+                        messageType(m) === 'ai-function' &&
+                        m.agentName &&
+                        (c.parent as FoundationAiAssistant).showAgentSwitchIndicator
+                          ? `Tool Call · ${m.agentName}`
+                          : senderLabel[messageType(m)]}
+                    </div>
+                    <div class="content">
+                      ${when(
+                        (m) => m.content,
+                        html<ChatMessage, FoundationAiAssistant>`
+                          <ai-chat-markdown :content="${(m) => m.content}"></ai-chat-markdown>
                         `,
                       )}
-                    `,
-                  )}
-                  ${when(
-                    (m) => m.interaction,
-                    html<ChatMessage, FoundationAiAssistant>`
-                      <ai-chat-interaction-wrapper
-                        :componentName=${(m) => m.interaction!.componentName}
-                        :data=${(m) => m.interaction!.data}
-                        :interactionId=${(m) => m.interaction!.interactionId}
-                        :resolved=${(m) => !!m.interaction!.resolved}
-                        @interaction-completed=${(m, c) =>
-                          c.parent.handleInteractionCompleted(c.event)}
-                      ></ai-chat-interaction-wrapper>
-                    `,
-                  )}
+                      ${when(
+                        (m) => m.toolCalls,
+                        html<ChatMessage, FoundationAiAssistant>`
+                          ${repeat(
+                            (m) => m.toolCalls ?? [],
+                            html<ChatToolCall>`
+                              ${when(
+                                (tc) => tc.foldEvent === 'open',
+                                html<ChatToolCall>`
+                                  <pre class="payload fold-event fold-open">
+&#9658; ${(tc) => tc.name}</pre
+                                  >
+                                `,
+                              )}
+                              ${when(
+                                (tc) => tc.foldEvent === 'close',
+                                html<ChatToolCall>`
+                                  <pre class="payload fold-event fold-close">
+&#9668; ${(tc) => tc.name}</pre
+                                  >
+                                `,
+                              )}
+                              ${when(
+                                (tc) => !tc.foldEvent && !isChatToolCallUnknown(tc),
+                                html<ChatToolCall>`
+                                  <pre class="payload">
+${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<strong>${(tc) =>
+                                      tc.name}</strong>(${(tc) =>
+                                      JSON.stringify(tc.args, null, 2)})</pre
+                                  >
+                                `,
+                              )}
+                              ${when(
+                                isChatToolCallUnknown,
+                                html<ChatToolCall>`
+                                  <pre class="payload unknown-tool">
+${(tc) => unknownToolPayload(tc)}</pre
+                                  >
+                                `,
+                              )}
+                            `,
+                          )}
+                        `,
+                      )}
+                      ${when(
+                        (m) => m.interaction,
+                        html<ChatMessage, FoundationAiAssistant>`
+                          <ai-chat-interaction-wrapper
+                            :componentName=${(m) => m.interaction!.componentName}
+                            :data=${(m) => m.interaction!.data}
+                            :interactionId=${(m) => m.interaction!.interactionId}
+                            :resolved=${(m) => m.interaction!.resolved}
+                            @interaction-completed=${(m, c) =>
+                              c.parent.handleInteractionCompleted(c.event)}
+                          ></ai-chat-interaction-wrapper>
+                        `,
+                      )}
+                    </div>
+                  </div>
                 </div>
-              </div>
-            </div>
+              `,
+            )}
           `,
         )}
         ${when(
           (x) =>
             x.showLoadingIndicator &&
-            (x.chatConfig.animations == null || x.enabledAnimations.includes('loading')),
+            (x.chatConfig.ui?.animations == null || x.enabledAnimations.includes('loading')),
           html<FoundationAiAssistant>`
             <div class="message-row ai" part="thinking">
               <div class="avatar">
@@ -322,15 +428,26 @@ export const FoundationAiAssistantTemplate = (
         `,
       )}
 
+      ${when(
+        (x) => x.chatConfig.suggestions?.behavior !== 'never',
+        html<FoundationAiAssistant>`
+          <chat-suggestions
+            :state="${(x) => x.suggestionsState}"
+            @suggestion-clicked="${(x, c) =>
+              x.handleSuggestionClick((c.event as CustomEvent).detail)}"
+          ></chat-suggestions>
+        `,
+      )}
+
       <div class="input-row" part="input-row">
         ${when(
-          (x) => !!x.chatConfig.acceptedFiles,
+          (x) => !!x.chatConfig.ui?.acceptedFiles,
           html<FoundationAiAssistant>`
             <${buttonTag}
               class="attach-button"
               part="attach-button"
               appearance="stealth"
-              title=${(x) => `Attach file (${x.chatConfig.acceptedFiles})`}
+              title=${(x) => `Attach file (${x.chatConfig.ui?.acceptedFiles})`}
               ?disabled=${(x) => x.state === 'loading'}
               @click=${(x) => x.triggerFileInput()}
             ><${iconTag} name="paperclip"></${iconTag}></${buttonTag}>
@@ -364,7 +481,10 @@ export const FoundationAiAssistantTemplate = (
       </div>
       <ai-halo-overlay
         part="halo-overlay"
-        ?active=${(x) => x.showHalo && x.enabledAnimations.includes('halo')}
+        ?active=${(x) => x.showHalo !== 'no' && x.enabledAnimations.includes('halo')}
+        :speed="${(x) => (x.showHalo === 'orchestrating' ? HALO_SPEED_ORCHESTRATING : HALO_SPEED_DEFAULT)}"
+        direction="${(x) => (x.showHalo === 'orchestrating' ? 'ccw' : 'cw')}"
+        :borderSize="${(x) => (x.showHalo === 'orchestrating' ? 2 : HALO_BORDER_SIZE_DEFAULT)}"
       ></ai-halo-overlay>
     </div>
   `;