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

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@genesislcap/ai-assistant",
+  "description": "Genesis AI Assistant micro-frontend",
+  "version": "14.403.0-ai-assistant.1",
+  "license": "SEE LICENSE IN license.txt",
+  "main": "dist/esm/index.js",
+  "types": "dist/ai-assistant.d.ts",
+  "config": {
+    "PORT": 5099
+  },
+  "genx": {
+    "app": {
+      "rootElement": "foundation-ai-assistant"
+    },
+    "federation": {
+      "remotes": [
+        "@genesislcap/rapid-design-system"
+      ]
+    }
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/ai-assistant.d.ts",
+      "default": "./dist/esm/index.js"
+    },
+    "./config": {
+      "types": "./dist/dts/config/index.d.ts",
+      "default": "./dist/esm/config/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "typesVersions": {
+    "*": {
+      "config": [
+        "./dist/dts/config/index.d.ts"
+      ]
+    }
+  },
+  "scripts": {
+    "build": "genx build -b ts",
+    "build:webpack": "genx build",
+    "build:webpack:stats": "genx analyze",
+    "circular": "npx -y madge --extensions ts --circular ./src",
+    "clean": "rimraf dist temp tsconfig.tsbuildinfo",
+    "dev": "genx dev -b webpack",
+    "dev:tsc": "genx dev -b ts",
+    "dev:no-open": "genx dev --no-open -b webpack",
+    "serve": "genx serve",
+    "test": "genx test",
+    "test:coverage": "genx test --coverage",
+    "lint": "genx lint --profile",
+    "lint:fix": "genx lint --fix"
+  },
+  "madge": {
+    "detectiveOptions": {
+      "ts": {
+        "skipTypeImports": true
+      }
+    }
+  },
+  "devDependencies": {
+    "@genesislcap/foundation-testing": "14.403.0-ai-assistant.1",
+    "@genesislcap/genx": "14.403.0-ai-assistant.1",
+    "@genesislcap/rollup-builder": "14.403.0-ai-assistant.1",
+    "@genesislcap/ts-builder": "14.403.0-ai-assistant.1",
+    "@genesislcap/uvu-playwright-builder": "14.403.0-ai-assistant.1",
+    "@genesislcap/vite-builder": "14.403.0-ai-assistant.1",
+    "@genesislcap/webpack-builder": "14.403.0-ai-assistant.1",
+    "@types/dompurify": "^3.0.5",
+    "@types/marked": "^5.0.2"
+  },
+  "dependencies": {
+    "@genesislcap/foundation-ai": "14.403.0-ai-assistant.1",
+    "@genesislcap/foundation-broadcast-channel": "14.403.0-ai-assistant.1",
+    "@genesislcap/foundation-logger": "14.403.0-ai-assistant.1",
+    "@genesislcap/foundation-ui": "14.403.0-ai-assistant.1",
+    "@genesislcap/foundation-utils": "14.403.0-ai-assistant.1",
+    "@genesislcap/rapid-design-system": "14.403.0-ai-assistant.1",
+    "@genesislcap/web-core": "14.403.0-ai-assistant.1",
+    "dompurify": "^3.3.1",
+    "marked": "^17.0.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/genesislcap/foundation-ui.git",
+    "directory": "packages/foundation/foundation-mf/ai-assistant"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "9bf644a2d10eb82216e29b5449d84127561ddf72"
+}

package/src/channel/ai-activity-channel.ts

@@ -0,0 +1,30 @@
+// TODO: each bubble/assistant pair must use a unique channel-name to avoid cross-talk
+
+import type { ChatMessage } from '@genesislcap/foundation-ai';
+import type { AiAssistantAnimation } from '../main/main.types';
+
+export const AI_ACTIVITY_CHANNEL_NAME = 'foundation-ai-activity';
+
+/**
+ * Serialized state of a `FoundationAiAssistant` instance.
+ * All fields are JSON-serializable and round-trip through BroadcastChannel structured-clone.
+ *
+ * @beta
+ */
+export interface AiAssistantSerializedState {
+  messages: ChatMessage[];
+  showToolCalls: boolean;
+  showThinkingSteps: boolean;
+  enabledAnimations: AiAssistantAnimation[];
+}
+
+export type AiActivityEvents = {
+  /** Fired when the assistant begins a tool call. Contains the names of all active tools. */
+  'halo-start': { toolNames: string[] };
+  /** Fired when the assistant finishes all tool processing and returns to idle. */
+  'halo-stop': void;
+  /** Fired when the user clicks the expand button — moves assistant from bubble into layout. */
+  'chat-popout': { state: AiAssistantSerializedState };
+  /** Fired when the user clicks the collapse button — moves assistant from layout back to bubble. */
+  'chat-popin': { state: AiAssistantSerializedState };
+};

package/src/components/activity-halo/activity-halo.ts

@@ -0,0 +1,113 @@
+import { createTypedBroadcastChannel } from '@genesislcap/foundation-broadcast-channel';
+import type { TypedBroadcastChannel } from '@genesislcap/foundation-broadcast-channel';
+import { attr, customElement, GenesisElement, html, observable } from '@genesislcap/web-core';
+import { AI_ACTIVITY_CHANNEL_NAME } from '../../channel/ai-activity-channel';
+import type { AiActivityEvents } from '../../channel/ai-activity-channel';
+import { AiHaloOverlay } from '../halo-overlay';
+
+const DEFAULT_MIN_SHOW_TIME = 600;
+
+AiHaloOverlay;
+
+/**
+ * Wrapper component that shows an `<ai-halo-overlay>` when the AI assistant
+ * is executing one of the declared tool names.
+ *
+ * @example
+ * ```html
+ * <ai-activity-halo tools="search_trades">
+ *   <trades-grid></trades-grid>
+ * </ai-activity-halo>
+ * ```
+ *
+ * @beta
+ */
+@customElement({
+  name: 'ai-activity-halo',
+  template: html`
+    <div class="wrapper">
+      <slot></slot>
+      <ai-halo-overlay aria-hidden="true" ?active="${(x) => x.haloActive}"></ai-halo-overlay>
+    </div>
+  `,
+  styles: `
+    :host {
+      display: contents;
+    }
+    .wrapper {
+      position: relative;
+      overflow: hidden;
+      border-radius: inherit;
+      height: 100%;
+      width: 100%;
+    }
+  `,
+})
+export class AiActivityHalo extends GenesisElement {
+  /** Comma-separated list of tool names this element reacts to. */
+  @attr tools: string = '';
+
+  /** Broadcast channel name — must match the assistant's channel-name attribute. */
+  @attr({ attribute: 'channel-name' }) channelName: string = AI_ACTIVITY_CHANNEL_NAME;
+
+  /** Minimum time in ms the halo stays visible after activation. */
+  @attr({ attribute: 'min-show-time', converter: { fromView: Number, toView: String } })
+  minShowTime: number = DEFAULT_MIN_SHOW_TIME;
+
+  @observable haloActive: boolean = false;
+
+  private channel?: TypedBroadcastChannel<AiActivityEvents>;
+  private hideTimeout?: ReturnType<typeof setTimeout>;
+  private startTime: number = 0;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.channel = createTypedBroadcastChannel<AiActivityEvents>(this.channelName);
+    this.channel.onmessage = (ev) => {
+      if (this.channel!.isMessageType('halo-start', ev)) {
+        const { toolNames } = ev.data.detail;
+        const myTools = this.tools
+          .split(',')
+          .map((t) => t.trim())
+          .filter(Boolean);
+        if (myTools.length === 0 || toolNames.some((name) => myTools.includes(name))) {
+          this.activate();
+        }
+      } else if (this.channel!.isMessageType('halo-stop', ev)) {
+        this.scheduleDeactivate();
+      }
+    };
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.channel?.close();
+    this.channel = undefined;
+    if (this.hideTimeout !== undefined) {
+      clearTimeout(this.hideTimeout);
+      this.hideTimeout = undefined;
+    }
+  }
+
+  private activate() {
+    if (this.hideTimeout !== undefined) {
+      clearTimeout(this.hideTimeout);
+      this.hideTimeout = undefined;
+    }
+    this.startTime = Date.now();
+    this.haloActive = true;
+  }
+
+  private scheduleDeactivate() {
+    const elapsed = Date.now() - this.startTime;
+    const remaining = this.minShowTime - elapsed;
+    if (remaining <= 0) {
+      this.haloActive = false;
+    } else {
+      this.hideTimeout = setTimeout(() => {
+        this.haloActive = false;
+        this.hideTimeout = undefined;
+      }, remaining);
+    }
+  }
+}

package/src/components/chat-bubble/chat-bubble.styles.ts

@@ -0,0 +1,194 @@
+import { css } from '@genesislcap/web-core';
+
+export const styles = css`
+  :host {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 9999;
+    overflow: visible;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .bubble {
+    position: absolute;
+    width: 62px;
+    height: 62px;
+    border-radius: 50%;
+    cursor: grab;
+    pointer-events: all;
+    overflow: visible;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+    transition:
+      transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
+      box-shadow 0.25s ease;
+    background: linear-gradient(135deg, #0e1628 0%, #192340 100%);
+    box-shadow: 0 4px 20px rgb(0 0 0 / 45%);
+    border: 2px solid rgb(255 255 255 / 15%);
+    color: white;
+  }
+
+  .bubble img {
+    width: 62px;
+    height: 62px;
+    border-radius: 50%;
+    object-fit: cover;
+    pointer-events: none;
+    box-shadow: 0 4px 20px rgb(0 0 0 / 45%);
+    border: 2px solid rgb(255 255 255 / 15%);
+  }
+
+  .bubble svg {
+    pointer-events: none;
+  }
+
+  .bubble:hover,
+  .bubble.hovered {
+    transform: scale(1.18);
+  }
+
+  .bubble:hover img,
+  .bubble.hovered img {
+    box-shadow:
+      0 6px 32px rgb(0 100 255 / 55%),
+      0 0 0 3px rgb(0 120 255 / 35%);
+  }
+
+  .bubble:active {
+    cursor: grabbing;
+  }
+
+  .tooltip {
+    position: absolute;
+    bottom: calc(100% + 10px);
+    background: linear-gradient(135deg, #0078ff 0%, #0050d0 100%);
+    color: #fff;
+    font-size: 0.78em;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+    white-space: nowrap;
+    padding: 5px 10px;
+    border-radius: 8px;
+    box-shadow: 0 4px 14px rgb(0 120 255 / 45%);
+    pointer-events: none;
+    opacity: 0%;
+    translate: 0 4px;
+    transition:
+      opacity 0.18s ease,
+      translate 0.18s ease;
+  }
+
+  .tooltip::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: var(--arrow-left, 50%);
+    transform: translateX(-50%);
+    border: 5px solid transparent;
+    border-top-color: #0050d0;
+  }
+
+  .bubble:hover .tooltip,
+  .bubble.hovered .tooltip {
+    opacity: 100%;
+    translate: 0 0;
+  }
+
+  .pulse-ring {
+    position: absolute;
+    width: 62px;
+    height: 62px;
+    border-radius: 50%;
+    border: 2px solid rgb(0 120 255 / 50%);
+    animation: pulse 2.5s ease-out infinite;
+    pointer-events: none;
+  }
+
+  @keyframes pulse {
+    0% {
+      transform: scale(1);
+      opacity: 70%;
+    }
+
+    70% {
+      transform: scale(1.5);
+      opacity: 0%;
+    }
+
+    100% {
+      transform: scale(1.5);
+      opacity: 0%;
+    }
+  }
+
+  .dialog {
+    position: absolute;
+    box-sizing: border-box;
+    width: 400px;
+    height: 520px;
+    min-width: 300px;
+    min-height: 300px;
+    max-width: 50vw;
+    max-height: calc(100vh - 40px);
+    background: var(--neutral-layer-1);
+    border-radius: 14px;
+    box-shadow:
+      0 12px 50px rgb(0 0 0 / 55%),
+      0 0 0 1px rgb(255 255 255 / 6%);
+    pointer-events: all;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    resize: both;
+    border: 1px solid var(--neutral-stroke-rest);
+    animation: dialog-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+
+  @keyframes dialog-in {
+    from {
+      opacity: 0%;
+      transform: scale(0.85) translateY(12px);
+    }
+
+    to {
+      opacity: 100%;
+      transform: scale(1) translateY(0);
+    }
+  }
+
+  @keyframes dialog-out {
+    from {
+      opacity: 100%;
+      transform: scale(1) translateY(0);
+    }
+
+    to {
+      opacity: 0%;
+      transform: scale(0.85) translateY(12px);
+    }
+  }
+
+  .dialog.closing {
+    animation: dialog-out 0.2s cubic-bezier(0.4, 0, 0.6, 1) forwards;
+  }
+
+  .dialog-content {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    min-height: 0;
+  }
+
+  .dialog-content ::slotted(*) {
+    display: flex;
+    flex: 1;
+    width: 100%;
+    min-height: 0;
+  }
+`;

package/src/components/chat-bubble/chat-bubble.template.ts

@@ -0,0 +1,63 @@
+import { html, repeat, slotted, ViewTemplate, when } from '@genesislcap/web-core';
+import type { AiChatBubble } from './chat-bubble';
+
+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>
+`;
+
+export const AiChatBubbleTemplate = (): ViewTemplate<AiChatBubble> => {
+  return html<AiChatBubble>`
+    ${when(
+      (x) => !x.dialogOpen,
+      html<AiChatBubble>`
+        <div
+          class="bubble ${(x) => (x.hovered ? 'hovered' : '')}"
+          style="${(x) => `translate: ${x.bubbleLeft}px ${x.bubbleTop}px`}"
+          @mousedown="${(x, c) => x.onBubbleMouseDown(c.event as MouseEvent)}"
+          @mouseenter="${(x) => (x.hovered = true)}"
+          @mouseleave="${(x) => (x.hovered = false)}"
+        >
+          ${when(
+            (x) => !!x.imageSrc,
+            html<AiChatBubble>`
+              <img src="${(x) => x.imageSrc}" alt="AI" draggable="false" />
+            `,
+          )}
+          ${when((x) => !x.imageSrc, genesisIconTemplate)}
+          <div class="pulse-ring"></div>
+          <div class="tooltip" style="${(x) => x.tooltipStyle}">${(x) => x.title}</div>
+        </div>
+      `,
+    )}
+    ${repeat(
+      // Pass the component instance as the sole array item so inner bindings
+      // can use x directly. recycle: false ensures a fresh element on every
+      // open, preventing stale .closing class or animationend listeners from
+      // a previous close persisting on the reused view.
+      (x) => (x.dialogOpen ? [x] : []),
+      html<AiChatBubble>`
+        <div
+          class="dialog"
+          style="${(x) =>
+            `translate: ${x.dialogLeft}px ${x.dialogTop}px; width: ${x.dialogWidth}px; height: ${x.dialogHeight}px`}"
+          @chat-header-mousedown="${(x, c) => x.onDialogHeaderMouseDown(c.event as CustomEvent)}"
+        >
+          <div class="dialog-content">
+            <slot name="dialog-content" ${slotted('dialogContent')}></slot>
+          </div>
+        </div>
+      `,
+      { recycle: false },
+    )}
+  `;
+};