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

package/src/components/chat-interaction-wrapper/chat-interaction-wrapper.ts

@@ -0,0 +1,89 @@
+import { InteractionResult } from '@genesislcap/foundation-ai';
+import { customElement, GenesisElement, observable } from '@genesislcap/web-core';
+import { logger } from '../../utils/logger';
+import { AiChatInteractionWrapperStyles } from './chat-interaction-wrapper.styles';
+import { AiChatInteractionWrapperTemplate } from './chat-interaction-wrapper.template';
+
+export type ChatInteractionEventsMap = {
+  'interaction-completed': InteractionResult<unknown> & { interactionId: string };
+};
+
+@customElement({
+  name: 'ai-chat-interaction-wrapper',
+  template: AiChatInteractionWrapperTemplate,
+  styles: AiChatInteractionWrapperStyles,
+})
+export class AiChatInteractionWrapper extends GenesisElement {
+  @observable componentName: string = '';
+  @observable data: any;
+  @observable interactionId: string = '';
+  /** When true, the interaction has already been resolved. Forwarded to the rendered component. */
+  @observable resolved: boolean = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.renderComponent();
+  }
+
+  componentNameChanged() {
+    this.renderComponent();
+  }
+
+  resolvedChanged() {
+    // TODO: switch to FAST ref() or slotted children directives instead of querying the container
+    // imperatively — this would allow property bindings to flow naturally through the template.
+    const container = this.shadowRoot?.querySelector('.container');
+    const element = container?.firstElementChild as any;
+    if (element) {
+      element.resolved = this.resolved;
+    }
+  }
+
+  private renderComponent() {
+    const container = this.shadowRoot?.querySelector('.container');
+    if (!container || !this.componentName) return;
+
+    // Clear children without using innerHTML
+    container.replaceChildren();
+
+    if (!customElements.get(this.componentName)) {
+      logger.warn(
+        `Interactive component "\${this.componentName}" is not registered in the customElements registry.`,
+      );
+      const errorDiv = document.createElement('div');
+      errorDiv.textContent = `Error: Component "\${this.componentName}" is not available in this application.`;
+      container.appendChild(errorDiv);
+      return;
+    }
+
+    try {
+      const element = document.createElement(this.componentName) as any;
+
+      // Pass data and resolved state to the component
+      if (this.data) {
+        element.data = this.data;
+      }
+      element.resolved = this.resolved;
+
+      // Handle completion from the inner component.
+      // Guard against re-emission if the interaction was already resolved
+      // (e.g. auto-resolve components fire on connectedCallback when rendering history).
+      element.addEventListener('interaction-completed', (e: CustomEvent) => {
+        e.stopPropagation();
+        if (this.resolved) return;
+
+        this.$emit('interaction-completed', {
+          interactionId: this.interactionId,
+          ...e.detail,
+        });
+      });
+
+      container.appendChild(element);
+    } catch (e) {
+      logger.error(`Failed to create interactive component: \${this.componentName}`, e);
+      const errorDiv = document.createElement('div');
+      errorDiv.textContent = `Error: Could not load component \${this.componentName}`;
+      container.appendChild(errorDiv);
+    }
+  }
+}

package/src/components/chat-interaction-wrapper/index.ts

@@ -0,0 +1,3 @@
+export * from './chat-interaction-wrapper';
+export * from './chat-interaction-wrapper.styles';
+export * from './chat-interaction-wrapper.template';

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

@@ -0,0 +1,87 @@
+import { css, customElement, GenesisElement, html, observable } from '@genesislcap/web-core';
+import DOMPurify from 'dompurify';
+import { marked } from 'marked';
+
+const styles = css`
+  :host {
+    display: block;
+    font-size: var(--type-ramp-base-font-size);
+    line-height: var(--type-ramp-base-line-height);
+  }
+
+  p {
+    margin: 0 0 calc(var(--design-unit, 4) * 2px);
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  ul,
+  ol {
+    margin: 0 0 calc(var(--design-unit, 4) * 2px);
+    padding-left: calc(var(--design-unit, 4) * 5px);
+  }
+
+  code {
+    background-color: var(--neutral-fill-rest);
+    padding: 2px 4px;
+    border-radius: calc(var(--design-unit, 4) * 0.5px);
+    font-family: monospace;
+  }
+
+  pre {
+    background-color: var(--neutral-fill-rest);
+    padding: calc(var(--design-unit, 4) * 2px);
+    border-radius: calc(var(--design-unit, 4) * 1px);
+    overflow-x: auto;
+    border: 1px solid var(--neutral-stroke-rest);
+    margin: calc(var(--design-unit, 4) * 2px) 0;
+  }
+
+  pre code {
+    background-color: transparent;
+    padding: 0;
+    border-radius: 0;
+    border: none;
+    font-family: inherit;
+    color: inherit;
+  }
+
+  table {
+    display: block;
+    overflow-x: auto;
+    border-collapse: collapse;
+    max-width: 100%;
+    margin: calc(var(--design-unit, 4) * 2px) 0;
+  }
+
+  th,
+  td {
+    border: 1px solid var(--neutral-stroke-rest);
+    padding: calc(var(--design-unit, 4) * 1px) calc(var(--design-unit, 4) * 2.5px);
+    white-space: nowrap;
+  }
+
+  th {
+    background-color: var(--neutral-fill-stealth-rest);
+    font-weight: 600;
+  }
+`;
+
+@customElement({
+  name: 'ai-chat-markdown',
+  template: html<AiChatMarkdown>`
+    <div :innerHTML="${(x) => x.renderMarkdown()}"></div>
+  `,
+  styles,
+})
+export class AiChatMarkdown extends GenesisElement {
+  @observable content: string = '';
+
+  renderMarkdown() {
+    if (!this.content) return '';
+    const rawHtml = marked.parse(this.content) as string;
+    return DOMPurify.sanitize(rawHtml);
+  }
+}

package/src/components/chat-markdown/index.ts

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

package/src/components/halo-overlay.ts

@@ -0,0 +1,115 @@
+import { attr, css, customElement, GenesisElement, html } from '@genesislcap/web-core';
+
+/**
+ * Animated halo overlay — rotating conic-gradient border with an inward glow.
+ *
+ * Drop inside any `position: relative; overflow: hidden` container and toggle
+ * the `active` attribute to show/hide the effect.
+ *
+ * @example
+ * ```html
+ * <ai-halo-overlay ?active="${(x) => x.isLoading}"></ai-halo-overlay>
+ * ```
+ *
+ * @beta
+ */
+@customElement({
+  name: 'ai-halo-overlay',
+  template: html`
+    <slot></slot>
+  `,
+  styles: css`
+    :host {
+      display: block;
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      pointer-events: none;
+      z-index: 1000;
+      opacity: 0;
+      transition: opacity 0.4s ease;
+    }
+
+    :host([active]) {
+      opacity: 1;
+    }
+
+    /* Rotating solid border */
+    :host::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      padding: 3px;
+      background: repeating-conic-gradient(
+        from var(--halo-angle, 0deg),
+        #feb60a,
+        #ff0062,
+        #00dbf9,
+        #da00f7,
+        #feb60a
+      );
+      -webkit-mask:
+        linear-gradient(#000 0 0) content-box,
+        linear-gradient(#000 0 0);
+      mask:
+        linear-gradient(#000 0 0) content-box,
+        linear-gradient(#000 0 0);
+      -webkit-mask-composite: destination-out;
+      mask-composite: exclude;
+    }
+
+    /* Inward glow — radial mask makes centre transparent, edges coloured */
+    :host::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background: repeating-conic-gradient(
+        from var(--halo-angle, 0deg),
+        #feb60a,
+        #ff0062,
+        #00dbf9,
+        #da00f7,
+        #feb60a
+      );
+      opacity: 0.35;
+      -webkit-mask-image: radial-gradient(ellipse at center, transparent 70%, black 100%);
+      mask-image: radial-gradient(ellipse at center, transparent 70%, black 100%);
+    }
+  `,
+})
+export class AiHaloOverlay extends GenesisElement {
+  @attr({ mode: 'boolean' }) active: boolean = false;
+
+  // TODO: The rAF loop is fine for demos but has two drawbacks vs a pure CSS @property animation:
+  // 1. It runs on the main thread, so heavy JS work can cause the animation to stutter.
+  // 2. The loop ticks even when `active` is false (idle cost is negligible but non-zero).
+  // Once @property inside Shadow DOM has solid cross-browser support, consider switching back
+  // to a CSS @keyframes approach and removing connectedCallback/disconnectedCallback/tick().
+
+  // 1.5° per frame @ 60 fps ≈ 4 s per full revolution
+  private static readonly DEG_PER_FRAME = 1.5;
+  private static readonly FULL_ROTATION_DEG = 360;
+
+  private angle = 0;
+  private animFrame?: number;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.tick();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.animFrame !== undefined) {
+      cancelAnimationFrame(this.animFrame);
+    }
+  }
+
+  private tick() {
+    this.angle = (this.angle + AiHaloOverlay.DEG_PER_FRAME) % AiHaloOverlay.FULL_ROTATION_DEG;
+    this.style.setProperty('--halo-angle', `${this.angle}deg`);
+    this.animFrame = requestAnimationFrame(() => this.tick());
+  }
+}

package/src/config/config.ts

@@ -0,0 +1,59 @@
+import type { ChatConfig, ChatToolDefinition, ChatToolHandlers } from '@genesislcap/foundation-ai';
+import { DI, PartialGenesisElementDefinition } from '@genesislcap/web-core';
+
+/**
+ * Do not reference any ../main files here. We must avoid ../tags being referenced and
+ * therefore set up pre-configuration.
+ */
+
+/**
+ * AiAssistantConfig DI interface.
+ *
+ * @beta
+ */
+export interface AiAssistantConfig extends PartialGenesisElementDefinition {
+  /**
+   * Display title shown in the chat header (e.g. 'Trades Assistant').
+   */
+  headerTitle?: string;
+  /**
+   * Chat display and behaviour configuration.
+   */
+  chatConfig: ChatConfig;
+  /**
+   * Tool handlers injected per-app at configure() time.
+   */
+  toolHandlers?: ChatToolHandlers;
+  /**
+   * Tool definitions (JSON Schema) passed to the AI provider.
+   */
+  toolDefinitions?: ChatToolDefinition[];
+  /**
+   * System prompt injected into every conversation.
+   */
+  systemPrompt?: string;
+  /**
+   * Optional factory called at download time to include extra app-specific debug state
+   * alongside the message history. Only used when `chatConfig.allowDebugDownload` is `true`.
+   */
+  debugStateFactory?: () => unknown;
+}
+
+/**
+ * Default AiAssistantConfig DI implementation.
+ *
+ * @beta
+ */
+export const defaultAiAssistantConfig: AiAssistantConfig = {
+  name: 'foundation-ai-assistant',
+  chatConfig: {},
+};
+
+/**
+ * AiAssistantConfig DI key.
+ *
+ * @internal
+ */
+export const AiAssistantConfig = DI.createInterface<AiAssistantConfig>((x) =>
+  x.instance(defaultAiAssistantConfig),
+);

package/src/config/index.ts

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

package/src/index.ts

@@ -0,0 +1,9 @@
+export * from './main/main';
+export * from './main/main.types';
+export * from './main/main.template';
+export * from './components/chat-bubble';
+export * from './components/chat-driver';
+export * from './components/activity-halo/activity-halo';
+export * from './channel/ai-activity-channel';
+export * from './config/config';
+export type { AiChatWidget } from './types/ai-chat-widget';

package/src/main/index.ts

@@ -0,0 +1,4 @@
+export * from './main.template';
+export * from '../styles';
+export * from './main';
+export * from './main.types';