@genesislcap/ai-assistant 14.403.0-ai-assistant.1

package/src/main/main.template.ts

@@ -0,0 +1,364 @@
+import type { ChatAttachment, ChatMessage, ChatToolCall } from '@genesislcap/foundation-ai';
+import { html, repeat, when, ViewTemplate } from '@genesislcap/web-core';
+import type { FoundationAiAssistant } from './main';
+import { ANIMATION_DEFS } from './main.types';
+
+const animationItemRenderer = (option: any): ViewTemplate => html`
+  <span part="option-label" title="${() => option.tooltip}">${() => option.label}</span>
+`;
+
+const animationOptions = Object.entries(ANIMATION_DEFS).map(([value, def]) => ({
+  value,
+  label: def.label,
+  tooltip: def.tooltip,
+}));
+
+// Genesis G-mark icon bundled as inline SVG — no runtime asset dependency.
+// Clients can override the avatar entirely via the `image-src` attribute.
+const genesisIconTemplate = html`
+  <svg
+    viewBox="-4 0 30 26"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style="width:60%;height:60%"
+  >
+    <path
+      d="M18.7702 23.0437C18.7702 22.4675 18.8526 21.8089 19.0995 21.3149C19.3465 20.7386 19.6758 20.2447 20.0874 19.833C20.4991 19.4214 20.993 19.0921 21.5693 18.8451C22.1456 18.5982 22.7219 18.5158 23.2981 18.5158H25.9326V11.6828H19.1819V14.3172C19.1819 15.5521 18.6879 16.7047 17.8647 17.5279C17.0414 18.3512 15.8888 18.8451 14.7363 18.9275H6.7507V6.99025H16.4651V0.157227H3.54C2.63442 0.157227 1.72884 0.568855 1.07023 1.22746C0.411628 1.88606 0 2.79165 0 3.77955V22.2205C0 23.1261 0.411628 24.0316 1.07023 24.7726C1.72884 25.4312 2.63442 25.8428 3.54 25.8428H18.7702V23.0437Z"
+      fill="currentColor"
+    />
+  </svg>
+`;
+
+/**
+ * @beta
+ */
+const messageType = (m: ChatMessage): string =>
+  m.role === 'user'
+    ? 'user'
+    : m.thinking
+      ? 'ai-thinking'
+      : m.toolCalls
+        ? 'ai-function'
+        : m.interaction
+          ? 'interaction'
+          : 'ai';
+
+export const FoundationAiAssistantTemplate = (
+  designSystemPrefix: string,
+): ViewTemplate<FoundationAiAssistant> => {
+  const buttonTag = `${designSystemPrefix}-button`;
+  const switchTag = `${designSystemPrefix}-switch`;
+  const multiselectTag = `${designSystemPrefix}-multiselect`;
+  const textareaTag = `${designSystemPrefix}-text-area`;
+  const iconTag = `${designSystemPrefix}-icon`;
+
+  return html<FoundationAiAssistant>`
+    <div class="chat-wrapper" part="chat-wrapper">
+      ${when(
+        (x) => !!x.chatConfig.acceptedFiles,
+        html<FoundationAiAssistant>`
+          <input
+            class="file-input"
+            type="file"
+            multiple
+            accept=${(x) => x.chatConfig.acceptedFiles}
+            @change=${(x, c) => x.handleFileSelect(c.event)}
+          />
+        `,
+      )}
+      ${when(
+        (x) =>
+          !!x.popoutMode ||
+          x.chatConfig.showToolCalls != null ||
+          x.chatConfig.showThinkingSteps != null ||
+          x.chatConfig.allowDebugDownload === true ||
+          x.chatConfig.animations != null,
+        html<FoundationAiAssistant>`
+          <div
+            class="chat-header ${(x) => (x.popoutMode === 'expand' ? 'draggable' : '')}"
+            part="chat-header"
+            @mousedown="${(x, c) => x.onChatHeaderMouseDown(c.event as MouseEvent)}"
+          >
+            ${when(
+              (x) => !!x.headerTitle,
+              html<FoundationAiAssistant>`
+                <span class="chat-title" part="chat-title">${(x) => x.headerTitle}</span>
+              `,
+            )}
+            <div class="header-actions" part="header-actions">
+              <slot name="header-actions-extra"></slot>
+              ${when(
+                (x) => !!x.popoutMode,
+                html<FoundationAiAssistant>`
+                  <${buttonTag}
+                    class="popout-button"
+                    part="popout-button"
+                    appearance="stealth"
+                    title="${(x) => (x.popoutMode === 'expand' ? 'Expand to panel' : 'Pop back to bubble')}"
+                    ?disabled=${(x) => x.hasActivePendingInteraction}
+                    @click=${(x) => x.handlePopout()}
+                  ><${iconTag} name="${(x) => (x.popoutMode === 'expand' ? 'external-link-alt' : 'compress-alt')}"></${iconTag}></${buttonTag}>
+                `,
+              )}
+              ${when(
+                (x) =>
+                  x.chatConfig.showToolCalls != null ||
+                  x.chatConfig.showThinkingSteps != null ||
+                  x.chatConfig.allowDebugDownload === true ||
+                  x.chatConfig.animations != null,
+                html<FoundationAiAssistant>`
+                  <${buttonTag}
+                    class="settings-button"
+                    part="settings-button"
+                    appearance="stealth"
+                    title="Settings"
+                    @click=${(x) => x.toggleSettings()}
+                  ><${iconTag} name="cog"></${iconTag}></${buttonTag}>
+                `,
+              )}
+            </div>
+          </div>
+          ${when(
+            (x) => x.settingsOpen,
+            html<FoundationAiAssistant>`
+              <div class="settings-panel" part="settings-panel">
+                ${when(
+                  (x) => x.chatConfig.showToolCalls != null,
+                  html<FoundationAiAssistant>`
+                    <${switchTag}
+                      part="toggle-tool-calls"
+                      :checked=${(x) => x.showToolCalls}
+                      @change=${(x) => x.toggleShowToolCalls()}
+                    >Tool calls</${switchTag}>
+                  `,
+                )}
+                ${when(
+                  (x) => x.chatConfig.showThinkingSteps != null,
+                  html<FoundationAiAssistant>`
+                    <${switchTag}
+                      part="toggle-thinking"
+                      :checked=${(x) => x.showThinkingSteps}
+                      @change=${(x) => x.toggleShowThinkingSteps()}
+                    >Thinking</${switchTag}>
+                  `,
+                )}
+                ${when(
+                  (x) => x.chatConfig.allowDebugDownload === true,
+                  html<FoundationAiAssistant>`
+                    <${buttonTag}
+                      part="download-button"
+                      appearance="stealth"
+                      @click=${(x) => x.downloadHistory()}
+                    >Download debug state</${buttonTag}>
+                  `,
+                )}
+                ${when(
+                  (x) => x.chatConfig.animations?.userConfigurable === true,
+                  html<FoundationAiAssistant>`
+                    <div class="settings-animations">
+                      <span class="settings-label">Animations</span>
+                      <${multiselectTag}
+                        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}>
+                    </div>
+                  `,
+                )}
+              </div>
+            `,
+          )}
+        `,
+      )}
+
+      <div class="messages" part="messages">
+
+        ${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) =>
+                    m.role === 'user'
+                      ? 'You'
+                      : m.thinking
+                        ? 'Thinking'
+                        : m.toolCalls
+                          ? 'Tool Call'
+                          : 'Assistant'}
+                </div>
+                <div class="content">
+                  ${when(
+                    (m) => m.content,
+                    html<ChatMessage, FoundationAiAssistant>`
+                      <ai-chat-markdown :content="${(m) => m.content}"></ai-chat-markdown>
+                    `,
+                  )}
+                  ${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>
+                        `,
+                      )}
+                    `,
+                  )}
+                  ${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>
+          `,
+        )}
+        ${when(
+          (x) =>
+            x.showLoadingIndicator &&
+            (x.chatConfig.animations == null || x.enabledAnimations.includes('loading')),
+          html<FoundationAiAssistant>`
+            <div class="message-row ai" part="thinking">
+              <div class="avatar">
+                ${when(
+                  (x) => !!x.imageSrc,
+                  html<FoundationAiAssistant>`
+                    <img src="${(x) => x.imageSrc}" alt="Assistant" class="avatar-img" />
+                  `,
+                )}
+                ${when((x) => !x.imageSrc, genesisIconTemplate)}
+              </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>
+            </div>
+          `,
+        )}
+      </div>
+
+      ${when(
+        (x) => x.attachments.length > 0 || x.attachmentErrors.length > 0,
+        html<FoundationAiAssistant>`
+          <div class="attachment-chips" part="attachment-chips">
+            ${repeat(
+              (x) => x.attachments,
+              html<ChatAttachment, FoundationAiAssistant>`
+                <span class="attachment-chip" part="attachment-chip">
+                  ${(a) => a.name}
+                  <button
+                    class="chip-remove"
+                    type="button"
+                    @click=${(a, c) => c.parent.removeAttachment(a)}
+                  >
+                    &times;
+                  </button>
+                </span>
+              `,
+            )}
+            ${repeat(
+              (x) => x.attachmentErrors,
+              html<string, FoundationAiAssistant>`
+                <span class="attachment-chip attachment-chip-error" part="attachment-chip-error">
+                  ${(err) => err}
+                  <button
+                    class="chip-remove"
+                    type="button"
+                    @click=${(err, c) => c.parent.removeAttachmentError(err)}
+                  >
+                    &times;
+                  </button>
+                </span>
+              `,
+            )}
+          </div>
+        `,
+      )}
+
+      <div class="input-row" part="input-row">
+        ${when(
+          (x) => !!x.chatConfig.acceptedFiles,
+          html<FoundationAiAssistant>`
+            <${buttonTag}
+              class="attach-button"
+              part="attach-button"
+              appearance="stealth"
+              title=${(x) => `Attach file (${x.chatConfig.acceptedFiles})`}
+              ?disabled=${(x) => x.state === 'loading'}
+              @click=${(x) => x.triggerFileInput()}
+            ><${iconTag} name="paperclip"></${iconTag}></${buttonTag}>
+          `,
+        )}
+        <${textareaTag}
+          class="chat-input"
+          part="input"
+          placeholder=${(x) => x.placeholder}
+          :value=${(x) => x.inputValue}
+          ?disabled=${(x) => x.state === 'loading'}
+          @input=${(x, c) => (x.inputValue = (c.event.target as any).value)}
+          @keydown=${(x, c) => {
+            if (
+              (c.event as KeyboardEvent).key === 'Enter' &&
+              !(c.event as KeyboardEvent).shiftKey
+            ) {
+              c.event.preventDefault();
+              x.handleSendClick();
+              return false;
+            }
+            return true;
+          }}
+        ></${textareaTag}>
+        <${buttonTag}
+          class="send-button"
+          part="send-button"
+          ?disabled=${(x) => x.state === 'loading' || (!x.inputValue.trim() && !x.attachments.length)}
+          @click=${(x) => x.handleSendClick()}
+        >Send</${buttonTag}>
+      </div>
+      <ai-halo-overlay
+        part="halo-overlay"
+        ?active=${(x) => x.showHalo && x.enabledAnimations.includes('halo')}
+      ></ai-halo-overlay>
+    </div>
+  `;
+};