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

package/dist/esm/main/main.styles.js

@@ -0,0 +1,356 @@
+import { css } from '@genesislcap/web-core';
+export const styles = css `
+  :host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    font-family: var(--body-font);
+    color: var(--neutral-foreground-rest);
+  }
+
+  .chat-wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    background-color: var(--neutral-layer-1);
+    border: 1px solid var(--neutral-stroke-rest);
+    border-radius: var(--control-corner-radius) * 1px;
+  }
+
+  .chat-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
+    border-bottom: 1px solid var(--neutral-stroke-rest);
+    background-color: var(--neutral-layer-2);
+  }
+
+  .chat-header.draggable {
+    cursor: move;
+    user-select: none;
+  }
+
+  .chat-title {
+    font-weight: bold;
+    font-size: 1.2em;
+  }
+
+  .header-actions {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    margin-left: auto;
+  }
+
+  .settings-button,
+  .popout-button {
+    font-size: 1.2em;
+  }
+
+  ::slotted([slot='header-actions-extra']) {
+    font-size: 1.2em;
+  }
+
+  .settings-panel {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: calc(var(--design-unit) * 4px);
+    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
+    border-bottom: 1px solid var(--neutral-stroke-rest);
+    background-color: var(--neutral-layer-2);
+  }
+
+  .settings-animations {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--design-unit) * 2px);
+  }
+
+  .messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  @keyframes slide-in-right {
+    from {
+      opacity: 0%;
+      transform: translateX(16px);
+    }
+
+    to {
+      opacity: 100%;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slide-in-left {
+    from {
+      opacity: 0%;
+      transform: translateX(-16px);
+    }
+
+    to {
+      opacity: 100%;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes thinking-ring {
+    0% {
+      transform: scale(1);
+      opacity: 60%;
+    }
+
+    100% {
+      transform: scale(1.8);
+      opacity: 0%;
+    }
+  }
+
+  .message-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .message-row.user {
+    flex-direction: row-reverse;
+    animation: slide-in-right 0.25s ease-out;
+  }
+
+  .message-row.ai,
+  .message-row.ai-thinking,
+  .message-row.ai-function {
+    animation: slide-in-left 0.25s ease-out;
+  }
+
+  .message-row.interaction {
+    flex-direction: column;
+    animation: slide-in-left 0.25s ease-out;
+  }
+
+  .avatar {
+    position: relative;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background-color: var(--neutral-layer-3);
+    border: 1px solid var(--neutral-stroke-rest);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    font-size: 1em;
+    overflow: hidden;
+  }
+
+  .avatar.ai-thinking {
+    border-color: #7c3aed;
+    overflow: visible;
+  }
+
+  .avatar.ai-thinking::before,
+  .avatar.ai-thinking::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    border: 2px solid #7c3aed;
+    animation: thinking-ring 1.5s ease-out infinite;
+  }
+
+  .avatar.ai-thinking::after {
+    animation-delay: 0.75s;
+  }
+
+  .avatar-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+  }
+
+  .message {
+    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
+    max-width: 80%;
+    min-width: 70px;
+    font-family: var(--body-font);
+    font-size: 1.1em;
+  }
+
+  .message.user {
+    background: linear-gradient(
+      135deg,
+      var(--accent-fill-rest) 0%,
+      color-mix(in srgb, var(--accent-fill-rest) 70%, black) 100%
+    );
+    color: var(--accent-foreground-on-accent-rest);
+    border-radius: 18px 18px 4px;
+    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-fill-rest) 35%, transparent);
+  }
+
+  .message.ai {
+    background: linear-gradient(135deg, var(--neutral-layer-3) 0%, var(--neutral-layer-4) 100%);
+    color: var(--neutral-foreground-rest);
+    border-radius: 18px 18px 18px 4px;
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
+  }
+
+  .message.ai-thinking {
+    background: linear-gradient(135deg, rgb(91 33 182 / 12%) 0%, rgb(59 7 100 / 18%) 100%);
+    color: var(--neutral-foreground-rest);
+    border-radius: 18px 18px 18px 4px;
+    border-left: 2px solid #7c3aed;
+    font-style: italic;
+    font-size: 0.95em;
+  }
+
+  .message.ai-function {
+    background: linear-gradient(135deg, rgb(15 32 39 / 90%) 0%, rgb(30 58 58 / 80%) 100%);
+    color: #86efac;
+    border-radius: 18px 18px 18px 4px;
+    font-size: 1em;
+    border: 1px solid rgb(134 239 172 / 20%);
+  }
+
+  .message.interaction {
+    background: none;
+    border: none;
+    padding: 0;
+    max-width: 100%;
+    width: 100%;
+  }
+
+  .sender {
+    font-weight: bold;
+    font-size: 0.9em;
+    margin-bottom: 4px;
+  }
+
+  .payload {
+    font-family: monospace;
+    white-space: pre-wrap;
+    margin: 0;
+    font-size: 0.95em;
+  }
+
+  .input-row {
+    display: flex;
+    gap: calc(var(--design-unit) * 2px);
+    align-items: flex-end;
+    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
+    border-top: 1px solid var(--neutral-stroke-rest);
+    background-color: var(--neutral-layer-2);
+  }
+
+  .chat-input {
+    flex: 1;
+    resize: none;
+    max-height: 150px;
+  }
+
+  .file-input {
+    display: none;
+  }
+
+  .thinking-dots {
+    display: flex;
+    align-items: center;
+    align-self: center;
+    gap: 5px;
+    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
+  }
+
+  .dot {
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    background-image: linear-gradient(145deg, rgb(255 255 255 / 40%) 0%, rgb(0 0 0 / 0%) 100%);
+    animation: dot-bounce 1.5s linear infinite;
+  }
+
+  .dot-1 {
+    background-color: #feb60a;
+    animation-delay: 0s;
+  }
+
+  .dot-2 {
+    background-color: #ff0062;
+    animation-delay: 0.1s;
+  }
+
+  .dot-3 {
+    background-color: #00dbf9;
+    animation-delay: 0.2s;
+  }
+
+  .dot-4 {
+    background-color: #da00f7;
+    animation-delay: 0.3s;
+  }
+
+  @keyframes dot-bounce {
+    0%,
+    50%,
+    100% {
+      transform: scale(1);
+      filter: blur(0);
+    }
+
+    25% {
+      transform: scale(0.6);
+      filter: blur(2px);
+    }
+
+    75% {
+      transform: scale(1.4);
+      filter: blur(2px);
+    }
+  }
+
+  .attachment-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 0 calc(var(--design-unit) * 3px) calc(var(--design-unit) * 2px);
+  }
+
+  .attachment-chip {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    background-color: var(--neutral-layer-4);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    font-size: 0.9em;
+    border: 1px solid var(--neutral-stroke-rest);
+  }
+
+  .attachment-chip-error {
+    background-color: var(--error-fill-rest);
+    border-color: var(--error-stroke-rest);
+  }
+
+  .chip-remove {
+    background: none;
+    border: none;
+    color: var(--neutral-foreground-rest);
+    cursor: pointer;
+    font-size: 1.2em;
+    padding: 0 0 0 4px;
+    opacity: 70%;
+  }
+
+  .chip-remove:hover {
+    opacity: 100%;
+  }
+`;

package/dist/esm/main/main.template.js

@@ -0,0 +1,272 @@
+import { html, repeat, when } from '@genesislcap/web-core';
+import { ANIMATION_DEFS } from './main.types';
+const animationItemRenderer = (option) => 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) => m.role === 'user'
+    ? 'user'
+    : m.thinking
+        ? 'ai-thinking'
+        : m.toolCalls
+            ? 'ai-function'
+            : m.interaction
+                ? 'interaction'
+                : 'ai';
+export const FoundationAiAssistantTemplate = (designSystemPrefix) => {
+    const buttonTag = `${designSystemPrefix}-button`;
+    const switchTag = `${designSystemPrefix}-switch`;
+    const multiselectTag = `${designSystemPrefix}-multiselect`;
+    const textareaTag = `${designSystemPrefix}-text-area`;
+    const iconTag = `${designSystemPrefix}-icon`;
+    return html `
+    <div class="chat-wrapper" part="chat-wrapper">
+      ${when((x) => !!x.chatConfig.acceptedFiles, html `
+          <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 `
+          <div
+            class="chat-header ${(x) => (x.popoutMode === 'expand' ? 'draggable' : '')}"
+            part="chat-header"
+            @mousedown="${(x, c) => x.onChatHeaderMouseDown(c.event)}"
+          >
+            ${when((x) => !!x.headerTitle, html `
+                <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 `
+                  <${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 `
+                  <${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 `
+              <div class="settings-panel" part="settings-panel">
+                ${when((x) => x.chatConfig.showToolCalls != null, html `
+                    <${switchTag}
+                      part="toggle-tool-calls"
+                      :checked=${(x) => x.showToolCalls}
+                      @change=${(x) => x.toggleShowToolCalls()}
+                    >Tool calls</${switchTag}>
+                  `)}
+                ${when((x) => x.chatConfig.showThinkingSteps != null, html `
+                    <${switchTag}
+                      part="toggle-thinking"
+                      :checked=${(x) => x.showThinkingSteps}
+                      @change=${(x) => x.toggleShowThinkingSteps()}
+                    >Thinking</${switchTag}>
+                  `)}
+                ${when((x) => x.chatConfig.allowDebugDownload === true, html `
+                    <${buttonTag}
+                      part="download-button"
+                      appearance="stealth"
+                      @click=${(x) => x.downloadHistory()}
+                    >Download debug state</${buttonTag}>
+                  `)}
+                ${when((x) => { var _a; return ((_a = x.chatConfig.animations) === null || _a === void 0 ? void 0 : _a.userConfigurable) === true; }, html `
+                    <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.detail)}
+                        search="false"
+                        all="false"
+                      ></${multiselectTag}>
+                    </div>
+                  `)}
+              </div>
+            `)}
+        `)}
+
+      <div class="messages" part="messages">
+
+        ${repeat((x) => x.visibleMessages, html `
+            <div class="message-row ${(m) => messageType(m)}">
+              ${when((m) => m.role !== 'user', html `
+                  <div class="avatar ${(m) => messageType(m)}">
+                    ${when((m, c) => !!c.parent.imageSrc, html `
+                        <img
+                          src="${(m, c) => c.parent.imageSrc}"
+                          alt="Assistant"
+                          class="avatar-img"
+                        />
+                      `)}
+                    ${when((m, c) => !c.parent.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 `
+                      <ai-chat-markdown :content="${(m) => m.content}"></ai-chat-markdown>
+                    `)}
+                  ${when((m) => m.toolCalls, html `
+                      ${repeat((m) => { var _a; return (_a = m.toolCalls) !== null && _a !== void 0 ? _a : []; }, html `
+                          <pre class="payload"><strong>${(tc) => tc.name}</strong>(${(tc) => JSON.stringify(tc.args, null, 2)})</pre>
+                        `)}
+                    `)}
+                  ${when((m) => m.interaction, html `
+                      <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 `
+            <div class="message-row ai" part="thinking">
+              <div class="avatar">
+                ${when((x) => !!x.imageSrc, html `
+                    <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 `
+          <div class="attachment-chips" part="attachment-chips">
+            ${repeat((x) => x.attachments, html `
+                <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 `
+                <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 `
+            <${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.value)}
+          @keydown=${(x, c) => {
+        if (c.event.key === 'Enter' &&
+            !c.event.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>
+  `;
+};

package/dist/esm/main/main.types.js

@@ -0,0 +1,22 @@
+/**
+ * Registry of all available animations with their display metadata.
+ * Adding an entry here automatically extends the {@link AiAssistantAnimation} type.
+ *
+ * @beta
+ */
+export const ANIMATION_DEFS = {
+    loading: {
+        label: 'Loading indicator',
+        tooltip: 'Shows a pulsing animation while the assistant is generating a response.',
+    },
+    halo: {
+        label: 'Halo',
+        tooltip: 'Displays a glowing halo around the assistant avatar while a response is streaming.',
+    },
+};
+/**
+ * All available animation names, derived from the registry.
+ *
+ * @internal
+ */
+export const ALL_ANIMATIONS = Object.keys(ANIMATION_DEFS);

package/dist/esm/styles/index.js

@@ -0,0 +1 @@
+export * from './styles';