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

package/dist/esm/components/chat-bubble/chat-bubble.js

@@ -0,0 +1,381 @@
+import { __decorate } from "tslib";
+import { createTypedBroadcastChannel } 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 { styles } from './chat-bubble.styles';
+import { AiChatBubbleTemplate } from './chat-bubble.template';
+/** Default dimensions of the dialog panel */
+const DIALOG_DEFAULT_WIDTH = 400;
+const DIALOG_DEFAULT_HEIGHT = 520;
+/** Initial position: bubble starts this far from the right/bottom viewport edges */
+const BUBBLE_INITIAL_RIGHT_OFFSET = 90;
+/** Initial position: dialog starts this far from the right/bottom viewport edges */
+const DIALOG_INITIAL_RIGHT_OFFSET = 440;
+const DIALOG_INITIAL_BOTTOM_OFFSET = 570;
+/** Minimum distance the dialog is allowed from any viewport edge */
+const VIEWPORT_EDGE_MARGIN = 20;
+/** Minimum pointer movement (px) to classify an interaction as a drag rather than a click */
+const DRAG_THRESHOLD = 4;
+/** Keeps the bubble fully inside the viewport when dragged (accounts for bubble size + border) */
+const BUBBLE_DRAG_MARGIN = 64;
+/** Horizontal offset between bubble center and dialog left edge when toggling open/close */
+const DIALOG_BUBBLE_HORIZONTAL_OFFSET = 340;
+/** How far above the bubble the dialog opens */
+const DIALOG_OPEN_TOP_OFFSET = 470;
+/** How far below the dialog top the bubble snaps when closing via the X button */
+const BUBBLE_SNAP_BOTTOM_OFFSET = 458;
+/** Fallback tooltip width used before the element has been measured in the DOM */
+const TOOLTIP_FALLBACK_WIDTH = 155;
+let AiChatBubble = class AiChatBubble extends GenesisElement {
+    constructor() {
+        super(...arguments);
+        this.title = 'AI Assistant';
+        this.channelName = AI_ACTIVITY_CHANNEL_NAME;
+        this.designSystemPrefix = 'rapid';
+        this.dialogContent = [];
+        this.tooltipMeasuredWidth = 0;
+        this.bubbleLeft = 0;
+        this.bubbleTop = 0;
+        this.dialogLeft = 0;
+        this.dialogTop = 0;
+        this.dialogWidth = DIALOG_DEFAULT_WIDTH;
+        this.dialogHeight = DIALOG_DEFAULT_HEIGHT;
+        this.dialogOpen = false;
+        this.hovered = false;
+        this.dragging = false;
+        this.dragTarget = null;
+        this.startMouseX = 0;
+        this.startMouseY = 0;
+        this.startElemLeft = 0;
+        this.startElemTop = 0;
+        this.hasDragged = false;
+        this.latestMouseX = 0;
+        this.latestMouseY = 0;
+        this.onBubbleChannelMessage = (event) => {
+            var _a, _b;
+            if (((_a = event.data) === null || _a === void 0 ? void 0 : _a.type) === 'chat-popout') {
+                this.startCloseDialog();
+                this.hidden = true;
+            }
+            else if (((_b = event.data) === null || _b === void 0 ? void 0 : _b.type) === 'chat-popin') {
+                this.cancelClose();
+                this.hidden = false;
+                this.dialogOpen = true;
+            }
+        };
+        this.onCloseBtnClick = () => this.onCloseDialog();
+        // Capture the latest pointer coords and schedule one rAF per display frame.
+        // Pointer events can fire far faster than the display refreshes (up to 1000Hz on
+        // gaming mice), so we only store the coords here and let applyDragFrame do the
+        // actual work. If a frame is already scheduled we just overwrite the coords —
+        // the pending frame will pick up the freshest values when it runs.
+        this.onDocMouseMove = (e) => {
+            if (!this.dragging)
+                return;
+            this.latestMouseX = e.clientX;
+            this.latestMouseY = e.clientY;
+            if (this.rafHandle === undefined) {
+                this.rafHandle = requestAnimationFrame(this.applyDragFrame);
+            }
+        };
+        // Runs once per display frame during a drag. Writes the new position directly to
+        // the element's style.translate rather than updating FAST observables, which keeps
+        // the compositor thread doing the work instead of triggering FAST's reactivity
+        // pipeline on every frame. This means the element's visual position is temporarily
+        // ahead of the observables — they are only synced back on mouseup (see onDocMouseUp).
+        // Note: style.translate is an independent CSS property and does not conflict with
+        // the transform used for the bubble's hover scale or the dialog's open animation.
+        this.applyDragFrame = () => {
+            var _a, _b;
+            this.rafHandle = undefined;
+            const dx = this.latestMouseX - this.startMouseX;
+            const dy = this.latestMouseY - this.startMouseY;
+            if (Math.abs(dx) > DRAG_THRESHOLD || Math.abs(dy) > DRAG_THRESHOLD)
+                this.hasDragged = true;
+            if (this.dragTarget === 'bubble') {
+                const left = Math.max(0, Math.min(window.innerWidth - BUBBLE_DRAG_MARGIN, this.startElemLeft + dx));
+                const top = Math.max(0, Math.min(window.innerHeight - BUBBLE_DRAG_MARGIN, this.startElemTop + dy));
+                const el = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.bubble');
+                if (el)
+                    el.style.translate = `${left}px ${top}px`;
+            }
+            else if (this.dragTarget === 'dialog') {
+                const left = Math.max(0, Math.min(window.innerWidth - DIALOG_DEFAULT_WIDTH, this.startElemLeft + dx));
+                const top = Math.max(0, Math.min(window.innerHeight - 100, this.startElemTop + dy));
+                const el = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.dialog');
+                if (el)
+                    el.style.translate = `${left}px ${top}px`;
+            }
+        };
+        // Commits the final drag position back to the FAST observables, bringing them back
+        // in sync with what the user sees. This triggers a single FAST re-render which writes
+        // the same value already on the element — no visible jump. Any pending rAF is
+        // cancelled first; its work is redundant since we recompute from latestMouseX/Y here.
+        this.onDocMouseUp = () => {
+            if (this.rafHandle !== undefined) {
+                cancelAnimationFrame(this.rafHandle);
+                this.rafHandle = undefined;
+            }
+            if (this.dragging) {
+                const dx = this.latestMouseX - this.startMouseX;
+                const dy = this.latestMouseY - this.startMouseY;
+                if (this.dragTarget === 'bubble') {
+                    this.bubbleLeft = Math.max(0, Math.min(window.innerWidth - BUBBLE_DRAG_MARGIN, this.startElemLeft + dx));
+                    this.bubbleTop = Math.max(0, Math.min(window.innerHeight - BUBBLE_DRAG_MARGIN, this.startElemTop + dy));
+                    if (!this.hasDragged) {
+                        if (this.dialogOpen) {
+                            this.startCloseDialog();
+                        }
+                        else {
+                            this.dialogLeft = Math.max(VIEWPORT_EDGE_MARGIN, this.bubbleLeft - DIALOG_BUBBLE_HORIZONTAL_OFFSET);
+                            this.dialogTop = Math.max(VIEWPORT_EDGE_MARGIN, this.bubbleTop - DIALOG_OPEN_TOP_OFFSET);
+                            this.dialogOpen = true;
+                        }
+                    }
+                }
+                else if (this.dragTarget === 'dialog') {
+                    this.dialogLeft = Math.max(0, Math.min(window.innerWidth - DIALOG_DEFAULT_WIDTH, this.startElemLeft + dx));
+                    this.dialogTop = Math.max(0, Math.min(window.innerHeight - 100, this.startElemTop + dy));
+                }
+            }
+            this.dragging = false;
+            this.dragTarget = null;
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.bubbleLeft = window.innerWidth - BUBBLE_INITIAL_RIGHT_OFFSET;
+        this.bubbleTop = window.innerHeight - 100;
+        this.dialogLeft = Math.max(VIEWPORT_EDGE_MARGIN, window.innerWidth - DIALOG_INITIAL_RIGHT_OFFSET);
+        this.dialogTop = Math.max(VIEWPORT_EDGE_MARGIN, window.innerHeight - DIALOG_INITIAL_BOTTOM_OFFSET);
+        document.addEventListener('mousemove', this.onDocMouseMove);
+        document.addEventListener('mouseup', this.onDocMouseUp);
+        this.bubbleChannel = createTypedBroadcastChannel(this.channelName);
+        this.bubbleChannel.addEventListener('message', this.onBubbleChannelMessage);
+        // Measure tooltip width once after first render. The bubble is visible on connect
+        // (dialogOpen starts false), so the element is in the DOM by the time rAF fires.
+        // This value persists through open/close cycles — no re-measurement needed unless
+        // the title attribute changes.
+        requestAnimationFrame(() => {
+            var _a;
+            const el = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tooltip');
+            if (el)
+                this.tooltipMeasuredWidth = el.offsetWidth;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d, _e, _f;
+        super.disconnectedCallback();
+        document.removeEventListener('mousemove', this.onDocMouseMove);
+        document.removeEventListener('mouseup', this.onDocMouseUp);
+        (_a = this.bubbleChannel) === null || _a === void 0 ? void 0 : _a.removeEventListener('message', this.onBubbleChannelMessage);
+        (_b = this.bubbleChannel) === null || _b === void 0 ? void 0 : _b.close();
+        this.bubbleChannel = undefined;
+        (_c = this.injectedCloseBtn) === null || _c === void 0 ? void 0 : _c.removeEventListener('click', this.onCloseBtnClick);
+        (_d = this.injectedCloseBtn) === null || _d === void 0 ? void 0 : _d.remove();
+        this.injectedCloseBtn = undefined;
+        (_e = this.resizeObserver) === null || _e === void 0 ? void 0 : _e.disconnect();
+        this.resizeObserver = undefined;
+        if (this.rafHandle !== undefined) {
+            cancelAnimationFrame(this.rafHandle);
+            this.rafHandle = undefined;
+        }
+        (_f = this.closeAbort) === null || _f === void 0 ? void 0 : _f.abort();
+        this.closeAbort = undefined;
+    }
+    dialogOpenChanged(_, next) {
+        var _a;
+        if (next) {
+            requestAnimationFrame(() => {
+                var _a;
+                const el = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dialog');
+                if (!el)
+                    return;
+                this.resizeObserver = new ResizeObserver((entries) => {
+                    var _a, _b;
+                    const size = (_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.borderBoxSize) === null || _b === void 0 ? void 0 : _b[0];
+                    if (size) {
+                        this.dialogWidth = Math.round(size.inlineSize);
+                        this.dialogHeight = Math.round(size.blockSize);
+                    }
+                });
+                this.resizeObserver.observe(el);
+            });
+        }
+        else {
+            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            this.resizeObserver = undefined;
+        }
+    }
+    dialogContentChanged(_, next) {
+        var _a;
+        if (!(next === null || next === void 0 ? void 0 : next.length) || this.injectedCloseBtn)
+            return;
+        for (const el of next) {
+            const assistant = el.tagName.toLowerCase() === 'foundation-ai-assistant'
+                ? el
+                : (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('foundation-ai-assistant');
+            if (assistant) {
+                this.injectCloseButton(assistant);
+                break;
+            }
+        }
+    }
+    injectCloseButton(assistant) {
+        const prefix = this.designSystemPrefix;
+        const btn = document.createElement(`${prefix}-button`);
+        btn.setAttribute('slot', 'header-actions-extra');
+        btn.setAttribute('appearance', 'stealth');
+        btn.setAttribute('title', 'Close');
+        const icon = document.createElement(`${prefix}-icon`);
+        icon.setAttribute('name', 'times');
+        btn.appendChild(icon);
+        btn.addEventListener('click', this.onCloseBtnClick);
+        assistant.appendChild(btn);
+        this.injectedCloseBtn = btn;
+    }
+    onBubbleMouseDown(e) {
+        e.preventDefault();
+        this.dragging = true;
+        this.dragTarget = 'bubble';
+        this.startMouseX = e.clientX;
+        this.startMouseY = e.clientY;
+        this.latestMouseX = e.clientX;
+        this.latestMouseY = e.clientY;
+        this.startElemLeft = this.bubbleLeft;
+        this.startElemTop = this.bubbleTop;
+        this.hasDragged = false;
+    }
+    onDialogHeaderMouseDown(e) {
+        var _a;
+        // Sync actual rendered size before dragging — the browser's CSS resize handle
+        // updates the element's size but our observables may not have caught up yet.
+        const dialogEl = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dialog');
+        if (dialogEl) {
+            this.dialogWidth = dialogEl.offsetWidth;
+            this.dialogHeight = dialogEl.offsetHeight;
+        }
+        this.dragging = true;
+        this.dragTarget = 'dialog';
+        this.startMouseX = e.detail.clientX;
+        this.startMouseY = e.detail.clientY;
+        this.latestMouseX = e.detail.clientX;
+        this.latestMouseY = e.detail.clientY;
+        this.startElemLeft = this.dialogLeft;
+        this.startElemTop = this.dialogTop;
+        this.hasDragged = false;
+    }
+    // Cancels an in-flight close animation and restores the dialog to its open state.
+    // Needed for the chat-popin case: startCloseDialog() may have been called (adding
+    // .closing and an animationend listener) but the host was hidden before the animation
+    // finished. When the host reappears via chat-popin, we cancel the pending close so
+    // the dialog stays open rather than disappearing once animationend eventually fires.
+    cancelClose() {
+        var _a, _b;
+        (_a = this.closeAbort) === null || _a === void 0 ? void 0 : _a.abort();
+        this.closeAbort = undefined;
+        const el = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.dialog');
+        el === null || el === void 0 ? void 0 : el.classList.remove('closing');
+    }
+    // Plays the closing animation before removing the dialog from the DOM.
+    // dialogOpen must stay true while the animation runs — setting it to false
+    // immediately would cause the repeat directive to remove the element before
+    // the animation has a chance to play. We only set dialogOpen = false inside
+    // the animationend callback, at which point FAST removes the element cleanly.
+    // If the user prefers reduced motion we skip the animation and close immediately.
+    startCloseDialog() {
+        var _a;
+        const el = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dialog');
+        const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (!el || reducedMotion) {
+            this.dialogOpen = false;
+            return;
+        }
+        this.closeAbort = new AbortController();
+        el.classList.add('closing');
+        el.addEventListener('animationend', () => {
+            this.dialogOpen = false;
+        }, {
+            once: true,
+            signal: this.closeAbort.signal,
+        });
+    }
+    onPopout() {
+        this.startCloseDialog();
+    }
+    onCloseDialog() {
+        // Snap the bubble orb to the bottom-right of wherever the dialog currently is,
+        // so it reappears near where the user last positioned the window.
+        this.bubbleLeft = Math.max(0, Math.min(window.innerWidth - BUBBLE_DRAG_MARGIN, this.dialogLeft + DIALOG_BUBBLE_HORIZONTAL_OFFSET));
+        this.bubbleTop = Math.max(0, Math.min(window.innerHeight - BUBBLE_DRAG_MARGIN, this.dialogTop + BUBBLE_SNAP_BOTTOM_OFFSET));
+        this.startCloseDialog();
+    }
+    get tooltipStyle() {
+        const tooltipWidth = this.tooltipMeasuredWidth || TOOLTIP_FALLBACK_WIDTH;
+        const bubbleWidth = 62; // Fixed in CSS
+        const margin = 8;
+        const naturalLeft = (bubbleWidth - tooltipWidth) / 2;
+        const vpLeft = this.bubbleLeft + naturalLeft;
+        const vpRight = vpLeft + tooltipWidth;
+        let shift = 0;
+        if (vpLeft < margin)
+            shift = margin - vpLeft;
+        else if (vpRight > window.innerWidth - margin)
+            shift = window.innerWidth - margin - vpRight;
+        const tooltipLeft = naturalLeft + shift;
+        const arrowLeft = bubbleWidth / 2 - tooltipLeft;
+        return `left: ${tooltipLeft}px; --arrow-left: ${arrowLeft}px`;
+    }
+};
+__decorate([
+    attr({ attribute: 'title' })
+], AiChatBubble.prototype, "title", void 0);
+__decorate([
+    attr({ attribute: 'image-src' })
+], AiChatBubble.prototype, "imageSrc", void 0);
+__decorate([
+    attr({ attribute: 'channel-name' })
+], AiChatBubble.prototype, "channelName", void 0);
+__decorate([
+    attr({ attribute: 'design-system-prefix' })
+], AiChatBubble.prototype, "designSystemPrefix", void 0);
+__decorate([
+    observable
+], AiChatBubble.prototype, "dialogContent", void 0);
+__decorate([
+    observable
+], AiChatBubble.prototype, "tooltipMeasuredWidth", void 0);
+__decorate([
+    observable
+], AiChatBubble.prototype, "bubbleLeft", void 0);
+__decorate([
+    observable
+], AiChatBubble.prototype, "bubbleTop", void 0);
+__decorate([
+    observable
+], AiChatBubble.prototype, "dialogLeft", void 0);
+__decorate([
+    observable
+], AiChatBubble.prototype, "dialogTop", void 0);
+__decorate([
+    observable
+], AiChatBubble.prototype, "dialogWidth", void 0);
+__decorate([
+    observable
+], AiChatBubble.prototype, "dialogHeight", void 0);
+__decorate([
+    observable
+], AiChatBubble.prototype, "dialogOpen", void 0);
+__decorate([
+    observable
+], AiChatBubble.prototype, "hovered", void 0);
+AiChatBubble = __decorate([
+    customElement({
+        name: 'foundation-ai-chat-bubble',
+        template: html `
+    ${() => AiChatBubbleTemplate()}
+  `,
+        styles,
+    })
+], AiChatBubble);
+export { AiChatBubble };

package/dist/esm/components/chat-bubble/chat-bubble.styles.js

@@ -0,0 +1,193 @@
+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/dist/esm/components/chat-bubble/chat-bubble.template.js

@@ -0,0 +1,50 @@
+import { html, repeat, slotted, when } from '@genesislcap/web-core';
+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 = () => {
+    return html `
+    ${when((x) => !x.dialogOpen, html `
+        <div
+          class="bubble ${(x) => (x.hovered ? 'hovered' : '')}"
+          style="${(x) => `translate: ${x.bubbleLeft}px ${x.bubbleTop}px`}"
+          @mousedown="${(x, c) => x.onBubbleMouseDown(c.event)}"
+          @mouseenter="${(x) => (x.hovered = true)}"
+          @mouseleave="${(x) => (x.hovered = false)}"
+        >
+          ${when((x) => !!x.imageSrc, html `
+              <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 `
+        <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)}"
+        >
+          <div class="dialog-content">
+            <slot name="dialog-content" ${slotted('dialogContent')}></slot>
+          </div>
+        </div>
+      `, { recycle: false })}
+  `;
+};

package/dist/esm/components/chat-bubble/index.js

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