@genesislcap/ai-assistant 15.58.2 → 15.60.0

package/dist/esm/components/message-feedback/message-feedback.js

@@ -0,0 +1,241 @@
+import { __awaiter, __decorate } from "tslib";
+import { attr, customElement, GenesisElement, html, observable, volatile, } from '@genesislcap/web-core';
+import { logger } from '../../utils/logger';
+import { normalizeDebugLogNote } from '../../utils/resolve-debug-log-note';
+import { styles } from './message-feedback.styles';
+import { MessageFeedbackTemplate } from './message-feedback.template';
+/**
+ * A final assistant reply, including the assistant's own notices: not reasoning, narration, a
+ * tool call, a tool result or a widget. Agrees with `filterVisibleMessages` on what is shown.
+ */
+export const isRateableReply = (m) => {
+    var _a, _b;
+    return m.role === 'assistant' &&
+        !!((_a = m.content) === null || _a === void 0 ? void 0 : _a.trim()) &&
+        !((_b = m.toolCalls) === null || _b === void 0 ? void 0 : _b.length) &&
+        !m.interaction &&
+        !m.thinking &&
+        !m.category;
+};
+/**
+ * Survives the message object being replaced and the session being reloaded, which object
+ * identity does not. Replies saved before timestamps existed fall back to their content.
+ */
+export const replyKey = (m) => { var _a, _b; return `${(_a = m.timestamp) !== null && _a !== void 0 ? _a : m.content}|${(_b = m.agentName) !== null && _b !== void 0 ? _b : ''}`; };
+/** Forwarded by the assistant so `::part()` reaches inside from the host app. */
+export const MESSAGE_FEEDBACK_EXPORTPARTS = [
+    'message-feedback-thumbs',
+    'message-feedback-button',
+    'message-feedback-positive',
+    'message-feedback-negative',
+    'message-feedback-panel',
+    'message-feedback-title',
+    'message-feedback-note',
+    'message-feedback-hint',
+    'message-feedback-cancel-button',
+    'message-feedback-send-button',
+].join(', ');
+/**
+ * Keyed on the reply, not the element: the transcript's `repeat` recycles rows, so a rating held
+ * on the element would jump to whichever reply the row is rebound to.
+ */
+const sentRatings = new Map();
+const focusTextArea = (el) => {
+    var _a, _b, _c;
+    (_c = ((_b = (_a = el === null || el === void 0 ? void 0 : el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('textarea')) !== null && _b !== void 0 ? _b : el)) === null || _c === void 0 ? void 0 : _c.focus();
+};
+/**
+ * Thumbs up / thumbs down under one assistant reply, with a note panel for the pressed thumb.
+ * Rendered by the assistant only when `chatConfig.ui.messageFeedback` is set.
+ *
+ * @beta
+ */
+let MessageFeedback = class MessageFeedback extends GenesisElement {
+    constructor() {
+        super(...arguments);
+        this.designSystemPrefix = 'rapid';
+        this.description = '';
+        /** Reflected so the assistant's reveal CSS can keep an open panel visible. */
+        this.open = false;
+        /** The thumb the open panel belongs to. */
+        this.draftRating = null;
+        /** The rating last sent for this reply; reflected so a rated reply keeps its thumbs visible. */
+        this.sentRating = null;
+        this.note = '';
+        this.status = 'idle';
+        this.announcement = '';
+        /** Bumped to disown an in-flight send: on Cancel, and when the row is rebound. */
+        this.sendGeneration = 0;
+    }
+    messageChanged(prev, next) {
+        var _a;
+        if (prev && next && replyKey(prev) === replyKey(next))
+            return;
+        this.sendGeneration += 1;
+        this.open = false;
+        this.draftRating = null;
+        this.note = '';
+        this.status = 'idle';
+        this.announcement = '';
+        this.sentRating = next ? ((_a = sentRatings.get(replyKey(next))) !== null && _a !== void 0 ? _a : null) : null;
+    }
+    /** The thumb that reads as pressed: the open panel's, else the one already sent. */
+    get activeRating() {
+        return this.open ? this.draftRating : this.sentRating;
+    }
+    toggle(rating) {
+        if (this.status === 'sending')
+            return;
+        if (this.open && this.draftRating === rating) {
+            this.cancel();
+            return;
+        }
+        this.draftRating = rating;
+        this.status = 'idle';
+        this.open = true;
+        requestAnimationFrame(() => {
+            var _a, _b;
+            if (!this.open || !this.isConnected)
+                return;
+            // Focusing the design-system text-area does not scroll the transcript to it.
+            (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.panel')) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'nearest' });
+            focusTextArea(this.noteEl);
+        });
+    }
+    /** Also abandons an in-flight send, so a hung transport cannot trap the user in the panel. */
+    cancel() {
+        this.sendGeneration += 1;
+        const rating = this.draftRating;
+        this.open = false;
+        this.draftRating = null;
+        this.note = '';
+        this.status = 'idle';
+        this.restoreThumbFocus(rating);
+    }
+    noteInput(value) {
+        this.note = value;
+        if (this.status === 'error')
+            this.status = 'idle';
+    }
+    send() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { message, draftRating: rating, submit } = this;
+            if (!message || !rating || !submit || this.status === 'sending')
+                return;
+            const key = replyKey(message);
+            this.sendGeneration += 1;
+            const generation = this.sendGeneration;
+            this.status = 'sending';
+            // The live region only speaks on a change, so a repeat outcome must follow an empty one.
+            this.announcement = '';
+            try {
+                yield submit(message, rating, normalizeDebugLogNote(this.note));
+                // Recorded even when abandoned: it was delivered, and an unrated row invites a duplicate.
+                sentRatings.set(key, rating);
+                if (this.message && replyKey(this.message) === key)
+                    this.sentRating = rating;
+                if (generation !== this.sendGeneration)
+                    return;
+                this.open = false;
+                this.draftRating = null;
+                this.note = '';
+                this.status = 'idle';
+                this.announcement = 'Thanks for your feedback.';
+                this.restoreThumbFocus(rating);
+            }
+            catch (e) {
+                logger.error('Sending message feedback failed:', e);
+                if (generation !== this.sendGeneration)
+                    return;
+                this.status = 'error';
+                this.announcement = "Couldn't send your feedback.";
+                requestAnimationFrame(() => {
+                    if (this.open && this.isConnected && this.ownsFocus())
+                        focusTextArea(this.noteEl);
+                });
+            }
+        });
+    }
+    /** @internal */
+    handleKeydown(event) {
+        if (event.key === 'Escape' && this.open) {
+            // Handled here; a host container that closes on Escape must not close as well.
+            event.stopPropagation();
+            this.cancel();
+            return false;
+        }
+        if (event.key === 'Enter' && !event.shiftKey && this.open && event.target === this.noteEl) {
+            void this.send();
+            return false;
+        }
+        return true;
+    }
+    /** Closing the panel unmounts the focused note; hand focus back to the thumb that opened it. */
+    restoreThumbFocus(rating) {
+        if (!rating)
+            return;
+        requestAnimationFrame(() => {
+            var _a, _b;
+            if (!this.isConnected || this.open || !this.ownsFocus())
+                return;
+            (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[part~="message-feedback-${rating}"]`)) === null || _b === void 0 ? void 0 : _b.focus();
+        });
+    }
+    /**
+     * Focus is ours to move only while it is nowhere in particular or still inside this element —
+     * not once the user has gone on to type in the composer during a slow send. Walks the shadow
+     * roots, since `document.activeElement` is the assistant host for both.
+     */
+    ownsFocus() {
+        var _a, _b;
+        let el = document.activeElement;
+        if (!el || el === document.body)
+            return true;
+        while (el) {
+            if (el === this)
+                return true;
+            el = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) !== null && _b !== void 0 ? _b : null;
+        }
+        return false;
+    }
+};
+__decorate([
+    observable
+], MessageFeedback.prototype, "designSystemPrefix", void 0);
+__decorate([
+    observable
+], MessageFeedback.prototype, "message", void 0);
+__decorate([
+    observable
+], MessageFeedback.prototype, "description", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], MessageFeedback.prototype, "open", void 0);
+__decorate([
+    observable
+], MessageFeedback.prototype, "draftRating", void 0);
+__decorate([
+    attr({ attribute: 'rated' })
+], MessageFeedback.prototype, "sentRating", void 0);
+__decorate([
+    observable
+], MessageFeedback.prototype, "note", void 0);
+__decorate([
+    observable
+], MessageFeedback.prototype, "status", void 0);
+__decorate([
+    observable
+], MessageFeedback.prototype, "announcement", void 0);
+__decorate([
+    volatile
+], MessageFeedback.prototype, "activeRating", null);
+MessageFeedback = __decorate([
+    customElement({
+        name: 'foundation-ai-message-feedback',
+        template: html `
+    ${(x) => MessageFeedbackTemplate(x.designSystemPrefix)}
+  `,
+        styles,
+    })
+], MessageFeedback);
+export { MessageFeedback };

package/dist/esm/components/message-feedback/message-feedback.styles.js

@@ -0,0 +1,94 @@
+import { css } from '@genesislcap/web-core';
+export const styles = css `
+  :host {
+    display: block;
+    margin-top: calc(var(--design-unit) * 1.5px);
+    font-size: 13px;
+  }
+
+  .thumbs {
+    display: flex;
+    gap: 2px;
+  }
+
+  .thumb {
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: none;
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    background: transparent;
+    color: inherit;
+    font-size: 12px;
+    opacity: 65%;
+    cursor: pointer;
+  }
+
+  .thumb:hover,
+  .thumb:focus-visible,
+  .thumb[aria-pressed='true'] {
+    opacity: 100%;
+  }
+
+  .thumb:hover {
+    background: var(--neutral-fill-stealth-hover);
+  }
+
+  .thumb:focus-visible {
+    outline: calc(var(--focus-stroke-width) * 1px) solid var(--focus-stroke-outer);
+    outline-offset: 1px;
+  }
+
+  .thumb:disabled {
+    cursor: default;
+  }
+
+  .panel {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--design-unit) * 2px);
+    margin-top: calc(var(--design-unit) * 1px);
+  }
+
+  .panel-title {
+    margin: 0;
+    font-weight: 600;
+  }
+
+  .note {
+    width: 100%;
+  }
+
+  .hint {
+    margin: 0;
+    font-size: 11px;
+    line-height: 1.4;
+    color: var(--neutral-foreground-hint);
+  }
+
+  .hint.is-error {
+    color: var(--error-color);
+  }
+
+  .actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: calc(var(--design-unit) * 2px);
+  }
+
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+`;

package/dist/esm/components/message-feedback/message-feedback.template.js

@@ -0,0 +1,80 @@
+import { html, ref, when } from '@genesislcap/web-core';
+import { DEBUG_LOG_NOTE_DEFAULT_MAX_LENGTH } from '../../utils/resolve-debug-log-note';
+const thumbLabel = {
+    positive: 'Good response',
+    negative: 'Bad response',
+};
+const panelTitle = {
+    positive: 'What went well?',
+    negative: 'What went wrong?',
+};
+export const MessageFeedbackTemplate = (designSystemPrefix) => {
+    const buttonTag = `${designSystemPrefix}-button`;
+    const textareaTag = `${designSystemPrefix}-text-area`;
+    const iconTag = `${designSystemPrefix}-icon`;
+    const thumb = (rating) => html `
+    <button
+      type="button"
+      class="thumb"
+      part="message-feedback-button message-feedback-${rating}"
+      aria-label="${thumbLabel[rating]}"
+      title="${(x) => x.sentRating === rating && !x.open ? 'Thanks for your feedback' : thumbLabel[rating]}"
+      aria-pressed="${(x) => String(x.activeRating === rating)}"
+      ?disabled="${(x) => x.status === 'sending'}"
+      @click="${(x) => x.toggle(rating)}"
+    >
+      <${iconTag}
+        name="${rating === 'positive' ? 'thumbs-up' : 'thumbs-down'}"
+        variant="${(x) => (x.activeRating === rating ? 'solid' : 'regular')}"
+      ></${iconTag}>
+    </button>
+  `;
+    return html `
+    <div class="root" @keydown="${(x, c) => x.handleKeydown(c.event)}">
+      <div class="thumbs" part="message-feedback-thumbs">
+        ${thumb('positive')}${thumb('negative')}
+      </div>
+      <span class="visually-hidden" role="status" aria-live="polite">${(x) => x.announcement}</span>
+      ${when((x) => x.open && x.draftRating !== null, html `
+          <div class="panel" part="message-feedback-panel" role="group" aria-label="Send feedback">
+            <p class="panel-title" part="message-feedback-title">
+              ${(x) => panelTitle[x.draftRating]}
+            </p>
+            <${textareaTag}
+              ${ref('noteEl')}
+              class="note"
+              part="message-feedback-note"
+              rows="3"
+              resize="vertical"
+              aria-label="Feedback note (optional)"
+              placeholder="Add a note (optional)"
+              maxlength="${() => DEBUG_LOG_NOTE_DEFAULT_MAX_LENGTH}"
+              :value="${(x) => x.note}"
+              ?disabled="${(x) => x.status === 'sending'}"
+              @input="${(x, c) => x.noteInput(c.event.target.value)}"
+            ></${textareaTag}>
+            <p class="hint ${(x) => (x.status === 'error' ? 'is-error' : '')}" part="message-feedback-hint">
+              ${(x) => x.status === 'error' ? "Couldn't send your feedback. Try again." : x.description}
+            </p>
+            <div class="actions">
+              <${buttonTag}
+                part="message-feedback-cancel-button"
+                appearance="outline"
+                @click="${(x) => x.cancel()}"
+              >
+                Cancel
+              </${buttonTag}>
+              <${buttonTag}
+                part="message-feedback-send-button"
+                appearance="accent"
+                ?disabled="${(x) => x.status === 'sending'}"
+                @click="${(x) => x.send()}"
+              >
+                ${(x) => x.status === 'sending' ? 'Sending…' : x.status === 'error' ? 'Retry' : 'Send'}
+              </${buttonTag}>
+            </div>
+          </div>
+        `)}
+    </div>
+  `;
+};