@visma-swno/gaia-chat-ui 4.2.0-beta.2 → 4.2.0-beta.4

package/README.md

@@ -62,7 +62,6 @@ Provide a `tokenProvider` that returns a valid OAuth access token. Implement cac
 | `auth-strategy`         | `'visitor' \| 'visma'`  | `'visitor'`                                | Authentication strategy.                                     |
 | `closeable`             | `boolean`               | `true`                                     | Show a close button in the header.                           |
 | `selected-model`        | `string`                | `''`                                       | Override the default AI model. Must be in the profile's allowed overrides. |
-| `enable-charts`         | `boolean`               | `false`                                    | Enable inline chart rendering via the built-in echarts tool. |
 | `tokenProvider`         | `() => Promise<string>` | —                                          | Async function returning an OAuth access token (Visma mode). Set via JS. |
 | `hostContextProvider`   | `HostContextProvider`   | —                                          | Async function returning application context per message. Set via JS.    |
 | `tools`                 | `FrontendTool[]`        | `[]`                                       | Frontend tool definitions sent to the agent. Set via JS.     |
@@ -162,14 +161,6 @@ interface FrontendTool {
 }
 ```
 
-## Charts
-
-Set `enable-charts` to enable the built-in echarts frontend tool. When enabled, the agent can render inline charts using [Apache ECharts](https://echarts.apache.org/).
-
-```html
-<gaia-chat enable-charts></gaia-chat>
-```
-
 ## Icon Registry
 
 Register custom SVG icons for use in the component:

package/dist/app/app.d.ts

@@ -51,19 +51,23 @@ export declare class ChatApp extends BaseElement {
     selectedModel: string;
     /** Frontend tool definitions sent to the agent. */
     tools: FrontendTool[];
-    /** Enable inline chart rendering for the echarts frontend tool. */
-    enableCharts: boolean;
     private get activeLang();
     private langObserver?;
     private store;
-    private storeState;
-    private unsubscribeStore?;
-    private apiClient;
+    private canvasStore;
+    private canvasEnabled;
+    private canvasActive;
+    private canvasExpanded;
+    private disposables;
+    private ctx;
+    private handleInlineQuestionClick;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private handleAuthChanged;
     willUpdate(changedProperties: PropertyValues): void;
     private applySelectedModel;
+    private toggleHostAttribute;
+    private handleKeyDown;
     /** Clears the current conversation and resets the chat. */
     clearConversation(): void;
     /** Stops any active support session. */

package/dist/app/chat-context.d.ts

@@ -0,0 +1,25 @@
+import { ReactiveControllerHost } from 'lit';
+import { CanvasStore } from '../core/canvas';
+import { ChatStore } from '../core/store';
+import { AgentService } from '../services/agent-service';
+import { ApiClient } from '../services/api-client';
+import { SupportService } from '../services/support-service';
+export interface ChatContext {
+    apiClient: ApiClient;
+    agentService: AgentService;
+    supportService: SupportService;
+    store: ChatStore;
+    canvasStore: CanvasStore;
+}
+/**
+ * Create the full chat context: API client, services, stores, and canvas wiring.
+ */
+export declare function createChatContext(host: ReactiveControllerHost & HTMLElement, baseUrl: string): ChatContext;
+/**
+ * Subscribe to store state and auto-start support when channel switches.
+ * Returns an unsubscribe function.
+ *
+ * Tracks previous channel in a dedicated variable to avoid dependency
+ * on subscription ordering with other store subscribers.
+ */
+export declare function subscribeAutoSupport(store: ChatStore, getBaseUrl: () => string): () => void;

package/dist/components/canvas/canvas-code-view/canvas-code-view.d.ts

@@ -0,0 +1,19 @@
+import { BaseElement } from '../../shared/base-element';
+/**
+ * Code viewer for canvas content.
+ *
+ * Renders code in a plain `<pre><code>` block.
+ *
+ * @element gaia-canvas-code-view
+ */
+export declare class CanvasCodeView extends BaseElement {
+    static styles: import('lit').CSSResult[];
+    content: string;
+    language: string;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'gaia-canvas-code-view': CanvasCodeView;
+    }
+}

package/dist/components/canvas/canvas-revision-selector/canvas-revision-selector.d.ts

@@ -0,0 +1,20 @@
+import { BaseElement } from '../../shared/base-element';
+/**
+ * Dropdown selector for switching between canvas revisions.
+ *
+ * When multiple revisions exist, renders a `<select>` with version
+ * labels. Otherwise shows a static version number.
+ *
+ * @element gaia-canvas-revision-selector
+ */
+export declare class CanvasRevisionSelector extends BaseElement {
+    static styles: import('lit').CSSResult[];
+    private ctrl;
+    private handleChange;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'gaia-canvas-revision-selector': CanvasRevisionSelector;
+    }
+}

package/dist/components/canvas/canvas-toolbar/canvas-toolbar.d.ts

@@ -0,0 +1,23 @@
+import { BaseElement } from '../../shared/base-element';
+/**
+ * Toolbar for the canvas workspace with tab switching, download, and close actions.
+ *
+ * Displays the canvas title, Code/Preview tab buttons, an optional
+ * PDF download button (for report-source canvases with ready exports),
+ * and a close button.
+ *
+ * @element gaia-canvas-toolbar
+ */
+export declare class CanvasToolbar extends BaseElement {
+    static styles: import('lit').CSSResult[];
+    private ctrl;
+    private handleTabClick;
+    private handleClose;
+    private handleDownload;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'gaia-canvas-toolbar': CanvasToolbar;
+    }
+}

package/dist/components/canvas/canvas-workspace/canvas-workspace.d.ts

@@ -0,0 +1,23 @@
+import { nothing } from 'lit';
+import { BaseElement } from '../../shared/base-element';
+/**
+ * Side panel workspace for viewing and editing canvas content.
+ *
+ * Renders a toolbar and either a code view or a live preview (HTML or
+ * report) depending on the active tab. Shows a progress shimmer while
+ * the canvas is being created or updated.
+ *
+ * @element gaia-canvas-workspace
+ */
+export declare class CanvasWorkspace extends BaseElement {
+    static styles: import('lit').CSSResult[];
+    private ctrl;
+    private renderPreview;
+    private handleRenderResult;
+    render(): import('lit-html').TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'gaia-canvas-workspace': CanvasWorkspace;
+    }
+}

package/dist/components/canvas/iframe-preview/iframe-preview.d.ts

@@ -0,0 +1,59 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../../shared/base-element';
+export type IframePreviewMode = 'transpile' | 'html';
+/**
+ * Unified iframe preview component supporting two rendering modes:
+ *
+ * - **transpile**: Transpiles TSX/JSX source with Sucrase (lazy-loaded),
+ *   then posts the compiled code to a renderer iframe served from the API.
+ * - **html**: Renders report-source-html content directly as complete HTML
+ *   with DOMPurify sanitization and optional ECharts bundle injection.
+ *
+ * @element gaia-iframe-preview
+ *
+ * @fires canvas-render-result - Bubbles render success or error details
+ */
+export declare class IframePreview extends BaseElement {
+    static styles: import('lit').CSSResult[];
+    content: string;
+    title: string;
+    /** Rendering mode: 'transpile' for TSX/JSX, 'html' for report HTML. */
+    mode: IframePreviewMode;
+    /** URL of the canvas renderer app (transpile mode only). */
+    rendererUrl: string;
+    /** URL of the ECharts bundle script (html mode only). */
+    chartsScriptUrl: string;
+    private iframeRef;
+    private pendingCode;
+    private preview;
+    private htmlRenderGeneration;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    /**
+     * Target origin for postMessage to the sandboxed iframe.
+     * Without `allow-same-origin`, the iframe gets an opaque origin,
+     * so we must use '*'. The iframe sandbox (allow-scripts only) prevents
+     * same-origin access, cookie/storage reads, navigation, and popups.
+     * Only transpiled source code is transmitted — no auth tokens or secrets.
+     */
+    private getRendererOrigin;
+    private handleRendererReady;
+    private transpileAndSend;
+    private updateIframeHtml;
+    private loadChartsScript;
+    /**
+     * Error harness script injected into the report iframe.
+     * Catches JS errors and scans the DOM for chart rendering errors,
+     * then reports render status back to the parent via postMessage.
+     */
+    private static readonly ERROR_HARNESS;
+    private buildHtml;
+    private escapeHtml;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'gaia-iframe-preview': IframePreview;
+    }
+}

package/dist/components/composer/disclaimer/disclaimer.d.ts

@@ -1,4 +1,12 @@
 import { BaseElement } from '../../shared/base-element';
+/**
+ * AI disclaimer notice displayed below the message composer.
+ *
+ * Shows a static message informing users that answers are AI-generated
+ * and may contain errors, with a link to the terms of use.
+ *
+ * @element gaia-disclaimer
+ */
 export declare class GaiaDisclaimer extends BaseElement {
     static styles: import('lit').CSSResult[];
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/composer/message-composer.d.ts

@@ -1,6 +1,18 @@
 import { PropertyValues } from 'lit';
 import { HostContextProvider } from '../../types';
 import { BaseElement } from '../shared/base-element';
+/**
+ * Text input area for composing and sending messages.
+ *
+ * Provides an auto-resizing textarea, character count validation,
+ * suggested question pills (when the conversation is empty), a send
+ * button, and the AI disclaimer. Routes messages to either the AI
+ * agent or the support operator depending on the active channel.
+ *
+ * @element gaia-message-composer
+ *
+ * @fires {MessageSentEvent} message-sent - When the user sends a message
+ */
 export declare class GaiaMessageComposer extends BaseElement {
     static styles: import('lit').CSSResult[];
     private debounceTimer?;
@@ -19,12 +31,14 @@ export declare class GaiaMessageComposer extends BaseElement {
     hostContextProvider?: HostContextProvider;
     rows: number;
     maxRows: number;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     private get notAllowedToSendMessage();
     private isMessageNotAllowed;
     private validateInput;
     private handleChange;
     private handleInput;
+    private handleFeedbackClosed;
     private closeFeedbackIfOpen;
     private handleSendMessage;
     private resolveHostContext;

package/dist/components/conversation/activity-indicator/activity-indicator.d.ts

@@ -1,6 +1,14 @@
 import { nothing } from 'lit';
 import { SupportSessionActivityType } from '../../../core/types';
 import { BaseElement } from '../../shared/base-element';
+/**
+ * Inline divider that marks support session transitions in the conversation.
+ *
+ * Renders a horizontal rule with an icon and label indicating a support
+ * session has started or ended (e.g. "You have been connected to support").
+ *
+ * @element gaia-activity-indicator
+ */
 export declare class GaiaActivityIndicator extends BaseElement {
     static styles: import('lit').CSSResult[];
     /**

package/dist/components/conversation/conversation.d.ts

@@ -1,22 +1,34 @@
 import { BaseElement } from '../shared/base-element';
+/**
+ * Scrollable message list that renders the full conversation.
+ *
+ * Displays welcome content when the conversation is empty, then switches
+ * to a block-based message list as messages arrive. Handles auto-scrolling,
+ * thinking indicators, inline error notifications, the feedback form, and
+ * feedback confirmation.
+ *
+ * @element gaia-conversation
+ */
 export declare class GaiaConversation extends BaseElement {
     static styles: import('lit').CSSResult[][];
     private containerRef;
     private scrollViewRef;
     private lastMessageRef;
     private ctrl;
-    /** Tracked for scroll change detection. */
-    private prevMessages;
-    private prevFeedbackOpen;
-    private prevError;
+    private handleThumb;
+    private scrollCtrl;
     protected updated(): Promise<void>;
-    private handleScrollUpdate;
     /**
      * Whether the thinking indicator should be visible.
      * Hidden when the last message is a pending tool call with a visible
      * summary — its status block shows its own shimmer animation.
      */
     private shouldShowThinking;
+    /**
+     * Check if a message belongs to the currently active (non-idle) run.
+     */
+    private isMessageInActiveRun;
+    private renderRunGroup;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/components/conversation/markdown-content/citation-injector.d.ts

@@ -0,0 +1,6 @@
+import { SearchCitation } from '../../../core/adapters/tool-utils';
+/**
+ * Walk text nodes in the container and replace citation markers with
+ * <gaia-citation-link> elements.
+ */
+export declare function injectCitationLinks(container: HTMLElement, citationMap: Map<string, SearchCitation>): void;

package/dist/components/conversation/markdown-content/markdown-content.d.ts

@@ -1,10 +1,31 @@
+import { PropertyValues } from 'lit';
+import { SearchCitation } from '../../../core/adapters/tool-utils';
 import { BaseElement } from '../../shared/base-element';
+/**
+ * Renders a Markdown string as sanitized HTML with optional citation links.
+ *
+ * Uses `marked` for parsing and `DOMPurify` for XSS protection. After the
+ * initial render, footnote-style reference markers in the HTML are replaced
+ * with interactive `<gaia-citation-link>` elements when citations are present.
+ *
+ * @element gaia-markdown-content
+ */
 export declare class GaiaMarkdownContent extends BaseElement {
     static styles: import('lit').CSSResult[];
-    private static hookInstalled;
-    private static installDOMPurifyHook;
     value: string;
-    connectedCallback(): void;
+    citations: SearchCitation[];
+    streaming: boolean;
+    /**
+     * Positioning boundary element passed through to citation links.
+     */
+    boundaryElement: HTMLElement | null;
+    private markdownEl;
+    /** Index of citations by referenceId for quick lookup. */
+    private citationMap;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    /** Propagate boundaryElement and disabled state to all injected citation links. */
+    private updateCitationLinks;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/components/conversation/markdown-content/markdown-renderer.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Markdown Renderer
+ *
+ * Module-level setup for marked + DOMPurify. Configured once at import time
+ * instead of on component lifecycle, avoiding global side effects from
+ * component connectedCallback.
+ */
+/**
+ * Parse markdown to sanitized HTML string.
+ * Uses module-level marked + DOMPurify configuration.
+ */
+export declare function renderMarkdown(value: string): string;

package/dist/components/conversation/welcome-message/welcome-message.d.ts

@@ -1,10 +1,16 @@
-import { IconName } from '../../primitives/icon/icon-registry';
-import { WelcomeMessage } from '../../../services/api-client';
+import { WelcomeMessage } from '../../../core/types';
 import { BaseElement } from '../../shared/base-element';
+/**
+ * Welcome screen shown when the conversation is empty.
+ *
+ * Renders a greeting title, optional body text, a call-to-action prompt,
+ * and optional informational cards driven by the `blocks` field.
+ *
+ * @element gaia-welcome-message
+ */
 export declare class GaiaWelcomeMessage extends BaseElement {
-    static styles: import('lit').CSSResult[];
+    static styles: import('lit').CSSResult[][];
     welcomeMessage?: WelcomeMessage;
-    protected getIcon(icon: string): IconName;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/components/conversation/welcome-message/welcome-message.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import('lit').CSSResult;
+declare const _default: import('lit').CSSResult[];
 export default _default;

package/dist/components/feedback/consent-dialog.d.ts

@@ -0,0 +1,34 @@
+import { nothing } from 'lit';
+import { BaseElement } from '../shared/base-element';
+export interface ConsentConfirmedEvent {
+    consent: boolean;
+}
+/**
+ * Consent dialog asking whether to share the conversation for feedback review.
+ *
+ * Opened by the feedback form when conversation sharing is enabled.
+ * Renders a modal with Yes/No buttons and a privacy statement link.
+ *
+ * @element gaia-consent-dialog
+ *
+ * @fires consent-confirmed - When the user confirms or declines consent.
+ *   `event.detail` contains `{ consent: boolean }`.
+ */
+export declare class GaiaConsentDialog extends BaseElement {
+    private isOpen;
+    /**
+     * Shows the consent dialog and moves focus into it.
+     */
+    show(): Promise<void>;
+    /**
+     * Closes the consent dialog and restores focus.
+     */
+    close(): void;
+    private handleConsentConfirmed;
+    render(): import('lit-html').TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'gaia-consent-dialog': GaiaConsentDialog;
+    }
+}

package/dist/components/feedback/feedback-confirmation.d.ts

@@ -0,0 +1,25 @@
+import { BaseElement } from '../shared/base-element';
+/**
+ * Success notification shown after feedback is submitted.
+ *
+ * Displays a "Thank you" message as a success notification. When the
+ * user consented to share their conversation, also shows a Privacy ID
+ * with a copy button so they can save it for data-deletion requests.
+ *
+ * @element gaia-feedback-confirmation
+ */
+export declare class GaiaFeedbackConfirmation extends BaseElement {
+    static styles: import('lit').CSSResult[];
+    private ctrl;
+    private copied;
+    private get visitorUserId();
+    private get shouldShowPrivacyId();
+    private handleClose;
+    private handleCopyPrivacyId;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'gaia-feedback-confirmation': GaiaFeedbackConfirmation;
+    }
+}

package/dist/components/feedback/feedback.d.ts

@@ -1,18 +1,34 @@
 import { PropertyValues } from 'lit';
 import { BaseElement } from '../shared/base-element';
+/**
+ * Feedback form for rating and commenting on the chat experience.
+ *
+ * Renders a 1–5 emoji rating scale and an optional comment textarea
+ * inside a focus-trapped dialog surface. When conversation sharing
+ * is enabled, submitting opens a consent dialog before finalizing.
+ *
+ * @element gaia-feedback
+ *
+ * @fires {FeedbackSubmittedEvent} feedback-submitted - When feedback is successfully submitted
+ * @fires {FeedbackClosedEvent} feedback-closed - When the form is closed (via submit or dismiss)
+ */
 export declare class GaiaFeedback extends BaseElement {
     static styles: import('lit').CSSResult[];
     private ctrl;
+    private focusTrap;
     private ratingInput;
-    private commentInput;
+    private consentDialog;
     private closeButton;
     private selectedRating;
     private comment;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private canSubmit;
+    private ratingIcons;
     private handleRatingChange;
     private handleCommentChange;
     private handleSubmit;
-    private handleReset;
+    private handleConsentConfirmed;
     protected firstUpdated(_changedProperties: PropertyValues): void;
     private handleKeyDown;
     private handleClose;

package/dist/components/layout/app-header/app-header.d.ts

@@ -1,17 +1,26 @@
 import { PropertyValues } from 'lit';
 import { BaseElement } from '../../shared/base-element';
+/**
+ * Application header bar with feedback, new-chat, and close actions.
+ *
+ * Renders a toolbar with icon buttons for opening the feedback form,
+ * clearing the conversation, and closing the chat widget. Actions are
+ * disabled while the chat is initializing or a run is in progress.
+ *
+ * @element gaia-app-header
+ *
+ * @fires {ConversationClearedEvent} conversation-cleared - When the user starts a new chat
+ * @fires {CloseRequestedEvent} close-requested - When the user clicks the close button
+ */
 export declare class GaiaAppHeader extends BaseElement {
     static styles: import('lit').CSSResult[];
     private ctrl;
-    private activeToolbarIndex;
+    private toolbar;
     closeable: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
     private getToolbarButtons;
-    private updateToolbarTabindex;
-    private nextEnabledIndex;
-    private handleToolbarKeyDown;
     private handleFeedbackClosed;
     private handleClearConversation;
     private handleToggleFeedback;

package/dist/components/layout/connection-status-overlay/connection-status-overlay.d.ts

@@ -1,5 +1,14 @@
 import { nothing } from 'lit';
 import { BaseElement } from '../../shared/base-element';
+/**
+ * Overlay displayed when the backend is unreachable.
+ *
+ * Shows a warning icon, a "Service temporarily unavailable" message,
+ * and a reconnecting dot animation. Automatically hides when the
+ * connection is restored.
+ *
+ * @element gaia-connection-status-overlay
+ */
 export declare class GaiaConnectionStatusOverlay extends BaseElement {
     static styles: import('lit').CSSResult[];
     private ctrl;

package/dist/components/message/assistant-message.d.ts

@@ -0,0 +1,23 @@
+import { nothing } from 'lit';
+import { UiAssistantMessage } from '../../core/adapters';
+import { SearchCitation } from '../../core/adapters/tool-utils';
+import { BaseElement } from '../shared/base-element';
+export declare class GaiaAssistantMessage extends BaseElement {
+    static styles: import('lit').CSSResult[][];
+    message: UiAssistantMessage;
+    citations: SearchCitation[];
+    isStreaming: boolean;
+    private bodyEl;
+    /** Cached result of extractSuggestedQuestions for the current content. */
+    private cachedExtraction;
+    private getExtractedContent;
+    render(): import('lit-html').TemplateResult<1> | typeof nothing;
+    private renderToolCalls;
+    private renderToolCall;
+    private handleInlineQuestionClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'gaia-assistant-message': GaiaAssistantMessage;
+    }
+}

package/dist/components/message/message-actions.d.ts

@@ -0,0 +1,47 @@
+import { nothing } from 'lit';
+import { BaseElement } from '../shared/base-element';
+/**
+ * Copy and thumbs-up/down feedback buttons for a message.
+ *
+ * Renders a copy-to-clipboard button and, for assistant messages, thumbs
+ * up/down feedback toggle buttons. Actions are hidden while the message
+ * belongs to an active run. Rendered once per run group by the conversation
+ * component (not per message).
+ *
+ * The component self-manages its visibility: when no buttons would be
+ * rendered it sets `display: none` via the `has-actions` host attribute,
+ * so no spacing is reserved in the layout.
+ *
+ * Receives callbacks as props instead of using `StoreController` so
+ * the component stays independently testable without a store context.
+ *
+ * @element gaia-message-actions
+ */
+export declare class GaiaMessageActions extends BaseElement {
+    static styles: import('lit').CSSResult[][];
+    /** The message ID for feedback submission. */
+    messageId: string;
+    /** The message type (only assistant messages show feedback buttons). */
+    messageType: 'user' | 'assistant' | 'operator';
+    /** The content to copy. Empty string hides the copy button. */
+    copyContent: string;
+    /** Whether this message belongs to the currently active run. Hides actions while active. */
+    inActiveRun: boolean;
+    /** Callback for submitting message thumbs. Set by parent message component. */
+    onThumb?: (messageId: string, isPositive: boolean | null) => Promise<boolean>;
+    private isCopied;
+    private feedbackState;
+    private copyTimeoutId?;
+    private get hasVisibleActions();
+    disconnectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1> | typeof nothing;
+    private renderCopyButton;
+    private renderFeedbackButtons;
+    private handleCopyClick;
+    private handleFeedbackClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'gaia-message-actions': GaiaMessageActions;
+    }
+}

package/dist/components/message/message-actions.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult[];
+export default _default;