@tylertech/forge-ai 0.13.11 → 0.13.12

package/dist/ai-assistant-response/ai-assistant-response.mjs

@@ -166,11 +166,14 @@ thinkingIndicator_get = function() {
   if (!this.showThinking) {
     return nothing;
   }
-  const lastChild = this.response.children[this.response.children.length - 1];
-  if (lastChild?.type === "text" && lastChild.status === "streaming") {
-    const content = typeof lastChild.content === "string" ? lastChild.content : "";
-    if (content.trim().length > 0) {
-      return nothing;
+  const isThinking = this.response.status === "streaming" && this.response.isThinking === true;
+  if (!isThinking) {
+    const lastChild = this.response.children[this.response.children.length - 1];
+    if (lastChild?.type === "text" && lastChild.status === "streaming") {
+      const content = typeof lastChild.content === "string" ? lastChild.content : "";
+      if (content.trim().length > 0) {
+        return nothing;
+      }
     }
   }
   const hasActiveToolCall = this.response.children.some((child) => {

package/dist/ai-chatbot/agent-adapter.d.ts

@@ -45,6 +45,7 @@ export interface ToolResultEvent {
     toolCallId: string;
     result: unknown;
     message: ChatMessage;
+    isError?: boolean;
     rawEvent?: unknown;
 }
 export interface AdapterState {

package/dist/ai-chatbot/ai-chatbot-base.d.ts

@@ -10,7 +10,7 @@ import { ForgeAiSuggestionsEventData, Suggestion } from '../ai-suggestions';
 import { ForgeAiVoiceInputResultEvent } from '../ai-voice-input';
 import { AgentAdapter } from './agent-adapter.js';
 import { ChatbotCoreController } from '../core/chatbot-core-controller.js';
-import { Agent, ChatMessage, ContextItem, HeadingLevel, MessageItem, SlashCommand, ThreadState, ToolDefinition } from './types.js';
+import { Agent, ChatMessage, ClientMessageInput, ContextItem, HeadingLevel, MessageItem, SlashCommand, ThreadState, ToolDefinition } from './types.js';
 export type FeatureToggle = 'on' | 'off';
 export declare abstract class AiChatbotBase extends LitElement {
     protected abstract _messageThreadRef: Ref<AiMessageThreadComponent>;
@@ -112,6 +112,28 @@ export declare abstract class AiChatbotBase extends LitElement {
     startNewChat(): void;
     getMessages(): ChatMessage[];
     setMessages(messages: ChatMessage[]): void;
+    /**
+     * Inserts or upserts a client-only status message into the thread - never sent to
+     * the agent adapter and never included in the conversation history the adapter sees.
+     * Use this for host-driven UI feedback (e.g. "Your session expired", upload progress)
+     * instead of splicing {@link getMessages}/{@link setMessages} directly.
+     *
+     * Safe to call at any time, including while a response is streaming - it never
+     * finalizes or otherwise touches the in-progress response.
+     *
+     * @param message - Content and optional kind ('text' | 'info' | 'warning' | 'error' | 'success'),
+     * header, and actions. Pass the same `id` on a later call to upsert (replace) a
+     * previously added message.
+     * @returns The message id (generated if not provided).
+     */
+    addClientMessage(message: ClientMessageInput): string;
+    /**
+     * Removes a client-only message previously added via {@link addClientMessage}.
+     * No-ops if no message with that id exists. Safe to call at any time, including
+     * while a response is streaming. Removal is never automatic - call this when your
+     * host logic determines the message is no longer relevant.
+     */
+    removeClientMessage(id: string): void;
     sendMessage(content: string, files?: File[]): Promise<void>;
     abort(): void;
     scrollToBottom({ behavior }?: {

package/dist/ai-chatbot/ai-chatbot-base.mjs

@@ -125,15 +125,8 @@ class AiChatbotBase extends LitElement {
       }
       if (this._hasMessages) {
         const agentName = agent?.name ?? this.titleText;
-        const systemMessage = {
-          id: generateId(),
-          role: "system",
-          content: `Switched to ${agentName}`,
-          timestamp: Date.now(),
-          status: "complete",
-          clientOnly: true
-        };
-        this._coreController.addMessage(systemMessage);
+        this._coreController.finalizeActiveResponse();
+        this._coreController.addClientMessage({ content: `Switched to ${agentName}` });
       }
     }
   }
@@ -381,6 +374,32 @@ class AiChatbotBase extends LitElement {
   setMessages(messages) {
     this._coreController.setMessages(messages);
   }
+  /**
+   * Inserts or upserts a client-only status message into the thread - never sent to
+   * the agent adapter and never included in the conversation history the adapter sees.
+   * Use this for host-driven UI feedback (e.g. "Your session expired", upload progress)
+   * instead of splicing {@link getMessages}/{@link setMessages} directly.
+   *
+   * Safe to call at any time, including while a response is streaming - it never
+   * finalizes or otherwise touches the in-progress response.
+   *
+   * @param message - Content and optional kind ('text' | 'info' | 'warning' | 'error' | 'success'),
+   * header, and actions. Pass the same `id` on a later call to upsert (replace) a
+   * previously added message.
+   * @returns The message id (generated if not provided).
+   */
+  addClientMessage(message) {
+    return this._coreController.addClientMessage(message);
+  }
+  /**
+   * Removes a client-only message previously added via {@link addClientMessage}.
+   * No-ops if no message with that id exists. Safe to call at any time, including
+   * while a response is streaming. Removal is never automatic - call this when your
+   * host logic determines the message is no longer relevant.
+   */
+  removeClientMessage(id) {
+    this._coreController.removeClientMessage(id);
+  }
   async sendMessage(content, files) {
     if (!this._coreController.adapter) {
       console.warn("No adapter configured.");

package/dist/ai-chatbot/ai-chatbot.d.ts

@@ -100,6 +100,7 @@ export declare const AiChatbotComponentTagName: keyof HTMLElementTagNameMap;
  * @property {FeatureToggle} clearOption - Controls the clear-conversation header action. `'on'` (default) shows it when messages exist; `'off'` hides it entirely.
  * @property {FeatureToggle} exportOption - Controls the export-conversation header action. `'on'` (default) shows it when messages exist; `'off'` hides it entirely.
  * @property {string | null} selectedThreadId - The id of the currently selected conversation thread. Set this to highlight a thread in the conversations panel (e.g. when restoring a conversation loaded from the backend). Updated internally when a thread is selected or a new chat starts.
+ * @property {boolean} threadsLoading - When true, shows a loading indicator in the conversations panel's recent chats list while threads are loading (default: false)
  *
  * @cssproperty --forge-ai-chatbot-icon-color - The fill color for the AI icon. Defaults to `tertiary`.
  * @cssproperty --forge-ai-chatbot-suggestion-background - The background color for suggestion buttons. Defaults to `tertiary-container`.
@@ -142,6 +143,7 @@ export declare class AiChatbotComponent extends AiChatbotBase {
     showConversationRename: boolean;
     showConversationDelete: boolean;
     selectedThreadId: string | null;
+    threadsLoading: boolean;
     protected _messageThreadRef: Ref<AiMessageThreadComponent>;
     protected _promptRef: Ref<AiPromptComponent>;
     protected _handleInfo(): void;

package/dist/ai-chatbot/ai-chatbot.mjs

@@ -48,6 +48,7 @@ let AiChatbotComponent = class extends AiChatbotBase {
     this.showConversationRename = false;
     this.showConversationDelete = false;
     this.selectedThreadId = null;
+    this.threadsLoading = false;
     __privateAdd(this, _chatInterfaceRef, createRef());
     this._messageThreadRef = createRef();
     this._promptRef = createRef();
@@ -214,6 +215,7 @@ let AiChatbotComponent = class extends AiChatbotBase {
                 ${ref(__privateGet(this, _conversationsPanelRef))}
                 .recentThreads=${this.recentThreads}
                 .selectedThreadId=${this.selectedThreadId}
+                ?loading=${this.threadsLoading}
                 ?show-back-button=${true}
                 ?show-conversation-rename=${this.showConversationRename}
                 ?show-conversation-delete=${this.showConversationDelete}
@@ -403,6 +405,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "selected-thread-id" })
 ], AiChatbotComponent.prototype, "selectedThreadId", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "threads-loading" })
+], AiChatbotComponent.prototype, "threadsLoading", 2);
 AiChatbotComponent = __decorateClass([
   customElement(AiChatbotComponentTagName)
 ], AiChatbotComponent);

package/dist/ai-chatbot/index.d.ts

@@ -4,7 +4,7 @@ export type { ForgeAiChatbotMessageEventData, ForgeAiChatbotToolCallEventData, F
 export { AiChatbotToolCallComponent, AiChatbotToolCallComponentTagName } from './ai-chatbot-tool-call.js';
 export type { Suggestion } from '../ai-suggestions/index.js';
 export { AgentAdapter, type MessageStartEvent, type MessageDeltaEvent, type MessageEndEvent, type ToolCallEvent, type ToolCallStartEvent, type ToolCallArgsEvent, type ToolCallEndEvent, type FileUploadEvent, type FileRemoveEvent, type AdapterState, type ErrorEvent, type CustomAgentEvent, type RawAgentEvent, type RunStartedAgentEvent, type StepStartedAgentEvent, type StepFinishedAgentEvent, type StateSnapshotAgentEvent, type StateDeltaAgentEvent, type ActivitySnapshotAgentEvent, type ActivityDeltaAgentEvent } from './agent-adapter.js';
-export type { Agent, ChatMessage, ContextItem, ToolDefinition, ToolCall, ToolRenderer, IToolRenderer, HandlerContext, ToolStartContext, ToolDeltaContext, ToolEndContext, FileAttachment, UploadedFileMetadata, FileUploadCallbacks, FileUploadHandler, FileRemoveCallbacks, ThreadState, FeedbackType, ResponseFeedback, MessageItem, ForgeAiChatbotContextRemoveEventData, ForgeAiChatbotConversationSelectEventData, ForgeAiChatbotConversationSearchEventData, ForgeAiChatbotConversationLoadMoreEventData, ForgeAiChatbotConversationRenameEventData, ForgeAiChatbotConversationDeleteEventData } from './types.js';
+export type { Agent, ChatMessage, ClientMessageAction, ClientMessageInput, ClientMessageKind, ContextItem, ToolDefinition, ToolCall, ToolRenderer, IToolRenderer, HandlerContext, ToolStartContext, ToolDeltaContext, ToolEndContext, FileAttachment, UploadedFileMetadata, FileUploadCallbacks, FileUploadHandler, FileRemoveCallbacks, ThreadState, FeedbackType, ResponseFeedback, MessageItem, ForgeAiChatbotContextRemoveEventData, ForgeAiChatbotConversationSelectEventData, ForgeAiChatbotConversationSearchEventData, ForgeAiChatbotConversationLoadMoreEventData, ForgeAiChatbotConversationRenameEventData, ForgeAiChatbotConversationDeleteEventData } from './types.js';
 export * from './ag-ui-adapter.js';
 export * from './http-agent-with-credentials.js';
 export * from './event-emitter.js';

package/dist/ai-chatbot/message-state-controller.d.ts

@@ -1,5 +1,5 @@
 import { ReactiveController, ReactiveControllerHost } from 'lit';
-import { ChatMessage, MessageItem, ToolCall, AssistantResponse, ResponseFeedback } from './types.js';
+import { ChatMessage, ClientMessageInput, MessageItem, ToolCall, AssistantResponse, ResponseFeedback } from './types.js';
 import { MessageStartEvent, MessageDeltaEvent, MessageEndEvent, ToolCallStartEvent, ToolCallArgsEvent, ToolCallEndEvent, ToolResultEvent } from './agent-adapter.js';
 export interface MessageStateControllerConfig {
     onThreadSettled?: () => void;
@@ -28,6 +28,8 @@ export declare class MessageStateController implements ReactiveController {
     getToolCall(id: string): ToolCall | undefined;
     getActiveResponse(): AssistantResponse | null;
     startResponse(): AssistantResponse;
+    markResponseThinking(): void;
+    clearResponseThinking(): void;
     addTextToResponse(messageId: string, content: string, event?: MessageStartEvent): void;
     appendTextDelta(messageId: string, delta: string, event?: MessageDeltaEvent): void;
     markTextComplete(messageId: string, event?: MessageEndEvent): void;
@@ -41,6 +43,14 @@ export declare class MessageStateController implements ReactiveController {
     addMessageItem(item: MessageItem): void;
     addMessage(message: ChatMessage, event?: MessageStartEvent): void;
     getMessage(id: string): ChatMessage | undefined;
+    /**
+     * Inserts or upserts a client-only message, never touching `_activeResponse`.
+     * Unlike {@link addMessage}, this never finalizes an in-progress response -
+     * safe to call while a real reply is streaming.
+     */
+    addClientMessage(message: ClientMessageInput): string;
+    /** Removes a client message by id. No-ops if not found. Safe to call at any time. */
+    removeClientMessage(id: string): void;
     updateMessageStatus(id: string, status: ChatMessage['status'], event?: MessageEndEvent): void;
     updateMessageContent(id: string, content: string): void;
     removeMessageItem(index: number): void;

package/dist/ai-chatbot/message-state-controller.mjs

@@ -42,8 +42,25 @@ class MessageStateController {
     this.#notifyStateChange();
     return response;
   }
+  markResponseThinking() {
+    if (!this._activeResponse || this._activeResponse.isThinking) {
+      return;
+    }
+    this._activeResponse.isThinking = true;
+    this.#updateResponseInItems();
+    this.#notifyStateChange();
+  }
+  clearResponseThinking() {
+    if (!this._activeResponse || !this._activeResponse.isThinking) {
+      return;
+    }
+    this._activeResponse.isThinking = false;
+    this.#updateResponseInItems();
+    this.#notifyStateChange();
+  }
   addTextToResponse(messageId, content, event) {
     const response = this._activeResponse ?? this.startResponse();
+    response.isThinking = false;
     const lastChild = response.children[response.children.length - 1];
     if (lastChild?.type === "text" && lastChild.messageId === messageId) {
       lastChild.content = content;
@@ -64,6 +81,7 @@ class MessageStateController {
   }
   appendTextDelta(messageId, delta, event) {
     const response = this._activeResponse ?? this.startResponse();
+    response.isThinking = false;
     const lastChild = response.children[response.children.length - 1];
     if (lastChild?.type === "text" && lastChild.messageId === messageId) {
       lastChild.content += delta;
@@ -102,6 +120,7 @@ class MessageStateController {
   }
   addToolCallToResponse(toolCall, event) {
     const response = this._activeResponse ?? this.startResponse();
+    response.isThinking = false;
     const toolCallWithTimestamp = { ...toolCall, startTimestamp: Date.now() };
     this._toolCalls.set(toolCall.id, toolCallWithTimestamp);
     response.children.push({ type: "toolCall", data: toolCallWithTimestamp });
@@ -167,7 +186,7 @@ class MessageStateController {
   completeToolCallInResponse(toolCallId, result, event) {
     this.updateToolCallInResponse(toolCallId, {
       result,
-      status: "complete"
+      status: event?.isError === true ? "error" : "complete"
     });
     if (event) {
       const streamEvent = {
@@ -255,6 +274,40 @@ class MessageStateController {
     const item = this._messageItems.find((i) => i.type === "message" && i.data.id === id);
     return item?.type === "message" ? item.data : void 0;
   }
+  /**
+   * Inserts or upserts a client-only message, never touching `_activeResponse`.
+   * Unlike {@link addMessage}, this never finalizes an in-progress response -
+   * safe to call while a real reply is streaming.
+   */
+  addClientMessage(message) {
+    const id = message.id ?? generateId();
+    const chatMessage = {
+      id,
+      role: "system",
+      content: message.content,
+      timestamp: Date.now(),
+      status: "complete",
+      clientOnly: true,
+      kind: message.kind,
+      header: message.header,
+      actions: message.actions
+    };
+    this._messageItems = [
+      ...this._messageItems.filter((item) => !(item.type === "message" && item.data.id === id)),
+      { type: "message", data: chatMessage }
+    ];
+    this.#notifyStateChange();
+    return id;
+  }
+  /** Removes a client message by id. No-ops if not found. Safe to call at any time. */
+  removeClientMessage(id) {
+    const hasMessage = this._messageItems.some((item) => item.type === "message" && item.data.id === id);
+    if (!hasMessage) {
+      return;
+    }
+    this._messageItems = this._messageItems.filter((item) => !(item.type === "message" && item.data.id === id));
+    this.#notifyStateChange();
+  }
   updateMessageStatus(id, status, event) {
     this._messageItems = this._messageItems.map((item) => {
       if (item.type === "message" && item.data.id === id) {

package/dist/ai-chatbot/types.d.ts

@@ -132,6 +132,7 @@ export interface ToolResultEvent {
     toolCallId: string;
     result: unknown;
     message: ChatMessage;
+    isError?: boolean;
 }
 export type StreamEvent = {
     type: 'message-start';
@@ -181,6 +182,31 @@ export interface ChatMessage {
     feedback?: ResponseFeedback;
     children?: ResponseItem[];
     clientOnly?: boolean;
+    kind?: ClientMessageKind;
+    header?: string;
+    actions?: ClientMessageAction[];
+}
+/**
+ * Visual treatment for a client-only message. `text` matches the plain,
+ * italic system-message style; the others render as a Forge inline-message
+ * banner with a matching icon.
+ */
+export type ClientMessageKind = 'text' | 'info' | 'warning' | 'error' | 'success';
+export interface ClientMessageAction {
+    id: string;
+    label: string;
+    onClick: () => void;
+}
+/**
+ * Input to {@link AiChatbotBase.addClientMessage}. Pass the same `id` on a
+ * later call to upsert (replace) a previously added client message.
+ */
+export interface ClientMessageInput {
+    id?: string;
+    content: string;
+    kind?: ClientMessageKind;
+    header?: string;
+    actions?: ClientMessageAction[];
 }
 export interface ToolCall<TArgs = Record<string, unknown>> {
     id: string;
@@ -216,6 +242,7 @@ export interface AssistantResponse {
     timestamp: number;
     eventStream?: StreamEvent[];
     feedback?: ResponseFeedback;
+    isThinking?: boolean;
 }
 export interface FileAttachment {
     id: string;

package/dist/ai-client-message/ai-client-message.d.ts

@@ -0,0 +1,28 @@
+import { LitElement, TemplateResult, CSSResult } from 'lit';
+import { ClientMessageAction, ClientMessageKind } from '../ai-chatbot/types.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-ai-client-message': AiClientMessageComponent;
+    }
+}
+export declare const AiClientMessageComponentTagName: keyof HTMLElementTagNameMap;
+/**
+ * @tag forge-ai-client-message
+ *
+ * @summary Renders a client-only status message (never sent to the agent adapter) as
+ * either plain system-message text or a Forge inline-message banner, depending on `kind`.
+ *
+ * @description
+ * Used internally by `forge-ai-message-thread` to render messages added via
+ * `AiChatbotBase.addClientMessage()`. Not intended to be used standalone outside a
+ * message thread, but exported for direct Storybook/testing use.
+ */
+export declare class AiClientMessageComponent extends LitElement {
+    #private;
+    static styles: CSSResult;
+    kind: ClientMessageKind;
+    header?: string;
+    content: string;
+    actions: ClientMessageAction[];
+    render(): TemplateResult;
+}

package/dist/ai-client-message/ai-client-message.mjs

@@ -0,0 +1,112 @@
+import { unsafeCSS, LitElement, html, nothing } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+import styles from "./ai-client-message.scss.mjs";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var _AiClientMessageComponent_instances, icon_get, actions_get;
+const AiClientMessageComponentTagName = "forge-ai-client-message";
+const KIND_ICON_PATHS = {
+  info: "M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8",
+  warning: "M12 2 1 21h22zm0 3.99L19.53 19H4.47zM11 10v4h2v-4zm0 6v2h2v-2z",
+  error: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z",
+  success: "M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59z"
+};
+let AiClientMessageComponent = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _AiClientMessageComponent_instances);
+    this.kind = "text";
+    this.content = "";
+    this.actions = [];
+  }
+  render() {
+    if (this.kind === "text") {
+      return html`
+        <div class="client-message--text">
+          <span>${this.content}</span>
+          ${__privateGet(this, _AiClientMessageComponent_instances, actions_get)}
+        </div>
+      `;
+    }
+    return html`
+      <div class="forge-inline-message">
+        ${__privateGet(this, _AiClientMessageComponent_instances, icon_get)} ${when(this.header, () => html`<div class="forge-inline-message__title">${this.header}</div>`)}
+        <div class="forge-inline-message__content">
+          <span>${this.content}</span>
+          ${__privateGet(this, _AiClientMessageComponent_instances, actions_get)}
+        </div>
+      </div>
+    `;
+  }
+};
+_AiClientMessageComponent_instances = /* @__PURE__ */ new WeakSet();
+icon_get = function() {
+  if (this.kind === "text") {
+    return nothing;
+  }
+  return html`
+      <svg
+        class="forge-inline-message__icon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        height="24"
+        width="24"
+        fill="currentColor"
+        aria-hidden="true">
+        <path fill="none" d="M0 0h24v24H0z" />
+        <path d="${KIND_ICON_PATHS[this.kind]}" />
+      </svg>
+    `;
+};
+actions_get = function() {
+  return when(
+    this.actions.length > 0,
+    () => html`
+        <div class="client-message__actions">
+          ${this.actions.map(
+      (action) => html`<button
+                type="button"
+                class="forge-button forge-button--outlined forge-button--dense"
+                @click=${() => action.onClick()}>
+                ${action.label}
+              </button>`
+    )}
+        </div>
+      `
+  );
+};
+AiClientMessageComponent.styles = unsafeCSS(styles);
+__decorateClass([
+  property({ type: String, reflect: true })
+], AiClientMessageComponent.prototype, "kind", 2);
+__decorateClass([
+  property({ type: String })
+], AiClientMessageComponent.prototype, "header", 2);
+__decorateClass([
+  property({ type: String })
+], AiClientMessageComponent.prototype, "content", 2);
+__decorateClass([
+  property({ attribute: false })
+], AiClientMessageComponent.prototype, "actions", 2);
+AiClientMessageComponent = __decorateClass([
+  customElement(AiClientMessageComponentTagName)
+], AiClientMessageComponent);
+export {
+  AiClientMessageComponent,
+  AiClientMessageComponentTagName
+};

package/dist/ai-client-message/ai-client-message.scss.mjs

@@ -0,0 +1,4 @@
+const styles = '/* prettier-ignore */\n/**\n * @license\n * Copyright Tyler Technologies, Inc.\n * License: Apache-2.0\n */\n.forge-inline-message {\n  --_inline-message-background:var(--forge-inline-message-background, var(--forge-theme-info-container-low, #e3edf7));\n  --_inline-message-color:var(--forge-inline-message-color, var(--forge-theme-text-high, rgba(0, 0, 0, 0.87)));\n  --_inline-message-shape:var(--forge-inline-message-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));\n  --_inline-message-padding:var(--forge-inline-message-padding, var(--forge-spacing-small, 12px));\n  --_inline-message-padding-inline:var(--forge-inline-message-padding-inline, var(--_inline-message-padding));\n  --_inline-message-padding-block:var(--forge-inline-message-padding-block, var(--_inline-message-padding));\n  --_inline-message-border-width:var(--forge-inline-message-border-width, var(--forge-border-thin, 1px));\n  --_inline-message-border-style:var(--forge-inline-message-border-style, none);\n  --_inline-message-border-color:var(--forge-inline-message-border-color, var(--forge-theme-info-container, #c7daf0));\n  --_inline-message-gap:var(--forge-inline-message-gap, var(--forge-spacing-small, 12px));\n  --_inline-message-icon-gap:var(--forge-inline-message-icon-gap, var(--_inline-message-gap));\n  --_inline-message-content-gap:var(--forge-inline-message-content-gap, var(--_inline-message-gap));\n  --_inline-message-icon-color:var(--forge-inline-message-icon-color, var(--forge-theme-on-info-container-low, #0b3768));\n}\n\n.forge-inline-message {\n  display: block;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-body1-font-weight, 400);\n  line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n  text-transform: var(--forge-typography-body1-text-transform, inherit);\n  text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n  background: var(--_inline-message-background);\n  color: var(--_inline-message-color);\n  border-radius: var(--_inline-message-shape);\n  border-width: var(--_inline-message-border-width);\n  border-style: var(--_inline-message-border-style);\n  border-color: var(--_inline-message-border-color);\n  display: flex;\n  align-items: center;\n  gap: var(--_inline-message-icon-gap);\n  box-sizing: border-box;\n  padding-inline: var(--_inline-message-padding-inline);\n  padding-block: var(--_inline-message-padding-block);\n  display: grid;\n  grid-template-columns: auto 1fr;\n  grid-template-rows: auto 1fr;\n}\n\n.forge-inline-message:not(:has(.forge-inline-message__icon)) {\n  grid-template-columns: 1fr;\n}\n\n.forge-inline-message__title {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-heading1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-heading1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading1-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-heading1-font-weight, 500);\n  line-height: var(--forge-typography-heading1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading1-line-height-scale, 1.125)));\n  letter-spacing: var(--forge-typography-heading1-letter-spacing, 0.0178571429em);\n  text-transform: var(--forge-typography-heading1-text-transform, inherit);\n  text-decoration: var(--forge-typography-heading1-text-decoration, inherit);\n}\n\n.forge-inline-message__icon {\n  color: var(--_inline-message-icon-color);\n  align-self: start;\n  grid-row: 1/span 2;\n}\n\n/**\n * @license\n * Copyright Tyler Technologies, Inc.\n * License: Apache-2.0\n */\n.forge-button {\n  --_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-primary, #3f51b5));\n  --_button-text-color:var(--forge-button-text-color, var(--_button-primary-color));\n  --_button-disabled-color:var(--forge-button-disabled-color, var(--forge-theme-surface-container, #e0e0e0));\n  --_button-padding:var(--forge-button-padding, var(--forge-spacing-medium, 16px));\n  --_button-display:var(--forge-button-display, inline-grid);\n  --_button-justify:var(--forge-button-justify, center);\n  --_button-shape:var(--forge-button-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));\n  --_button-height:var(--forge-button-height, 36px);\n  --_button-min-width:var(--forge-button-min-width, 64px);\n  --_button-spacing:var(--forge-button-spacing, var(--forge-spacing-xsmall, 8px));\n  --_button-border-width:var(--forge-button-border-width, medium);\n  --_button-border-style:var(--forge-button-border-style, none);\n  --_button-border-color:var(--forge-button-border-color, currentColor);\n  --_button-shape-start-start-radius:var(--forge-button-shape-start-start-radius, var(--_button-shape));\n  --_button-shape-start-end-radius:var(--forge-button-shape-start-end-radius, var(--_button-shape));\n  --_button-shape-end-start-radius:var(--forge-button-shape-end-start-radius, var(--_button-shape));\n  --_button-shape-end-end-radius:var(--forge-button-shape-end-end-radius, var(--_button-shape));\n  --_button-padding-block:var(--forge-button-padding-block, var(--_button-0));\n  --_button-padding-inline:var(--forge-button-padding-inline, var(--_button-padding));\n  --_button-background:var(--forge-button-background, transparent);\n  --_button-hover-background:var(--forge-button-hover-background, var(--_button-background));\n  --_button-active-background:var(--forge-button-active-background, var(--_button-background));\n  --_button-color:var(--forge-button-color, var(--_button-text-color));\n  --_button-icon-size:var(--forge-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));\n  --_button-shadow:var(--forge-button-shadow, none);\n  --_button-hover-shadow:var(--forge-button-hover-shadow, none);\n  --_button-active-shadow:var(--forge-button-active-shadow, none);\n  --_button-cursor:var(--forge-button-cursor, pointer);\n  --_button-transition-duration:var(--forge-button-transition-duration, var(--forge-animation-duration-short3, 150ms));\n  --_button-transition-timing:var(--forge-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n  --_button-text-padding-inline:var(--forge-button-text-padding-inline, var(--forge-spacing-xsmall, 8px));\n  --_button-outlined-background:var(--forge-button-outlined-background, transparent);\n  --_button-outlined-color:var(--forge-button-outlined-color, var(--_button-primary-color));\n  --_button-outlined-border-width:var(--forge-button-outlined-border-width, var(--forge-border-thin, 1px));\n  --_button-outlined-border-style:var(--forge-button-outlined-border-style, solid);\n  --_button-outlined-border-color:var(--forge-button-outlined-border-color, var(--_button-primary-color));\n  --_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-primary-container, #d1d5ed));\n  --_button-tonal-disabled-background:var(--forge-button-tonal-disabled-background, var(--_button-disabled-color));\n  --_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-primary-container, #222c62));\n  --_button-tonal-disabled-color:var(--forge-button-tonal-disabled-color, var(--_button-disabled-text-color));\n  --_button-filled-background:var(--forge-button-filled-background, var(--_button-primary-color));\n  --_button-filled-disabled-background:var(--forge-button-filled-disabled-background, var(--_button-disabled-color));\n  --_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-primary, #ffffff));\n  --_button-filled-disabled-color:var(--forge-button-filled-disabled-color, var(--_button-disabled-text-color));\n  --_button-raised-background:var(--forge-button-raised-background, var(--_button-primary-color));\n  --_button-raised-disabled-background:var(--forge-button-raised-disabled-background, var(--_button-disabled-color));\n  --_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-primary, #ffffff));\n  --_button-raised-disabled-color:var(--forge-button-raised-disabled-color, var(--_button-disabled-text-color));\n  --_button-raised-shadow:var(--forge-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));\n  --_button-raised-hover-shadow:var(--forge-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));\n  --_button-raised-active-shadow:var(--forge-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));\n  --_button-raised-disabled-shadow:var(--forge-button-raised-disabled-shadow, none);\n  --_button-link-color:var(--forge-button-link-color, var(--_button-primary-color));\n  --_button-link-text-decoration:var(--forge-button-link-text-decoration, underline);\n  --_button-link-height:var(--forge-button-link-height, auto);\n  --_button-link-padding:var(--forge-button-link-padding, 0);\n  --_button-link-line-height:var(--forge-button-link-line-height, normal);\n  --_button-link-width:var(--forge-button-link-width, auto);\n  --_button-link-hover-text-decoration:var(--forge-button-link-hover-text-decoration, none);\n  --_button-link-active-opacity:var(--forge-button-link-active-opacity, 0.65);\n  --_button-link-transition-duration:var(--forge-button-link-transition-duration, var(--forge-animation-duration-short3, 150ms));\n  --_button-link-transition-timing:var(--forge-button-link-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n  --_button-disabled-cursor:var(--forge-button-disabled-cursor, not-allowed);\n  --_button-disabled-text-color:var(--forge-button-disabled-text-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));\n  --_button-disabled-background:var(--forge-button-disabled-background, transparent);\n  --_button-disabled-border-color:var(--forge-button-disabled-border-color, var(--_button-disabled-color));\n  --_button-disabled-shadow:var(--forge-button-disabled-shadow, none);\n  --_button-dense-height:var(--forge-button-dense-height, 24px);\n  --_button-pill-shape:var(--forge-button-pill-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));\n  --_button-pill-padding-inline:var(--forge-button-pill-padding-inline, var(--forge-spacing-small, 12px));\n  --_button-focus-indicator-offset:var(--forge-button-focus-indicator-offset, 4px);\n  --_button-text-focus-indicator-offset:var(--forge-button-text-focus-indicator-offset, 0px);\n  --_button-link-focus-indicator-offset:var(--forge-button-link-focus-indicator-offset, 2px);\n  --_button-popover-icon-transition-duration:var(--forge-button-popover-icon-transition-duration, var(--forge-animation-duration-short3, 150ms));\n  --_button-popover-icon-transition-timing:var(--forge-button-popover-icon-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n  --_button-popover-icon-open-rotation:var(--forge-button-popover-icon-open-rotation, 180deg);\n}\n\n.forge-button {\n  display: var(--_button-display);\n  position: relative;\n  outline: none;\n  vertical-align: middle;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-button-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, 0.875)));\n  font-weight: var(--forge-typography-button-font-weight, 500);\n  line-height: var(--forge-typography-button-line-height, normal);\n  letter-spacing: var(--forge-typography-button-letter-spacing, 0.0714285714em);\n  text-transform: var(--forge-typography-button-text-transform, inherit);\n  text-decoration: var(--forge-typography-button-text-decoration, inherit);\n  position: relative;\n  display: var(--_button-display);\n  grid-auto-flow: column;\n  align-items: center;\n  justify-content: var(--_button-justify);\n  gap: var(--_button-spacing);\n  z-index: 0;\n  box-sizing: border-box;\n  min-inline-size: var(--_button-min-width);\n  height: var(--_button-height);\n  inline-size: 100%;\n  border-width: var(--_button-border-width);\n  border-style: var(--_button-border-style);\n  border-color: var(--_button-border-color);\n  border-start-start-radius: var(--_button-shape-start-start-radius);\n  border-start-end-radius: var(--_button-shape-start-end-radius);\n  border-end-start-radius: var(--_button-shape-end-start-radius);\n  border-end-end-radius: var(--_button-shape-end-end-radius);\n  padding-block: var(--_button-padding-block);\n  padding-inline: var(--_button-padding-inline);\n  box-shadow: var(--_button-shadow);\n  outline: none;\n  user-select: none;\n  -webkit-appearance: none;\n  vertical-align: middle;\n  text-decoration: none;\n  white-space: nowrap;\n  background: var(--_button-background);\n  color: var(--_button-color);\n  cursor: var(--_button-cursor);\n  transition-property: box-shadow, background;\n  transition-duration: var(--_button-transition-duration);\n  transition-timing-function: var(--_button-transition-timing);\n}\n\n.forge-button::-moz-focus-inner {\n  padding: 0;\n  border: 0;\n}\n\n.forge-button:hover {\n  --_button-shadow:var(--_button-hover-shadow);\n  background: var(--_button-hover-background);\n}\n\n.forge-button:active {\n  --_button-shadow:var(--_button-active-shadow);\n  background: var(--_button-active-background);\n}\n\n.forge-button {\n  position: relative;\n  inline-size: auto;\n}\n\n.forge-button:not(:disabled):not(.forge-button--link) {\n  --_state-layer-display:var(--forge-state-layer-display, flex);\n  --_state-layer-color:var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));\n  --_state-layer-hover-color:var(--forge-state-layer-hover-color, var(--_state-layer-color));\n  --_state-layer-hover-opacity:var(--forge-state-layer-hover-opacity, 0.08);\n  --_state-layer-pressed-color:var(--forge-state-layer-pressed-color, var(--_state-layer-color));\n  --_state-layer-pressed-opacity:var(--forge-state-layer-pressed-opacity, 0.12);\n  --_state-layer-hover-duration:var(--forge-state-layer-hover-duration, 15ms);\n  --_state-layer-pressed-duration:var(--forge-state-layer-pressed-duration, 105ms);\n  --_state-layer-animation-duration:var(--forge-state-layer-animation-duration, 375ms);\n}\n\n.forge-button:not(:disabled):not(.forge-button--link)::before {\n  opacity: 0;\n  position: absolute;\n  backface-visibility: hidden;\n  transform: translateZ(0);\n  background-color: var(--_state-layer-hover-color);\n  inset: 0;\n  transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;\n  --_state-layer-hover-duration:var(--forge-state-layer-hover-duration, 100ms);\n  content: "";\n  opacity: 0;\n  border-radius: inherit;\n}\n\n.forge-button:not(:disabled):not(.forge-button--link):hover::before {\n  background-color: var(--_state-layer-hover-color);\n  opacity: var(--_state-layer-hover-opacity);\n}\n\n.forge-button:not(:disabled):not(.forge-button--link):active::before {\n  opacity: var(--_state-layer-pressed-opacity);\n  transition-duration: var(--_state-layer-pressed-duration);\n  --_state-layer-pressed-opacity:var(--forge-state-layer-pressed-opacity, 0.18);\n}\n\n@keyframes forge-focus-indicator-outward-grow {\n  from {\n    outline-width: 0;\n  }\n  to {\n    outline-width: var(--_focus-indicator-active-width);\n  }\n}\n@keyframes forge-focus-indicator-outward-shrink {\n  from {\n    outline-width: var(--_focus-indicator-active-width);\n  }\n}\n@keyframes forge-focus-indicator-inward-grow {\n  from {\n    border-width: 0;\n  }\n  to {\n    border-width: var(--_focus-indicator-active-width);\n  }\n}\n@keyframes forge-focus-indicator-inward-shrink {\n  from {\n    border-width: var(--_focus-indicator-active-width);\n  }\n}\n.forge-button:not(:disabled) {\n  outline: none;\n}\n\n.forge-button:not(:disabled):focus-visible::after {\n  --_focus-indicator-display:var(--forge-focus-indicator-display, flex);\n  --_focus-indicator-width:var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));\n  --_focus-indicator-active-width:var(--forge-focus-indicator-active-width, 6px);\n  --_focus-indicator-color:var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));\n  --_focus-indicator-shape:var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));\n  --_focus-indicator-duration:var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));\n  --_focus-indicator-easing:var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));\n  --_focus-indicator-shape-start-start:var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));\n  --_focus-indicator-shape-start-end:var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));\n  --_focus-indicator-shape-end-end:var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));\n  --_focus-indicator-shape-end-start:var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));\n  --_focus-indicator-outward-offset:var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));\n  --_focus-indicator-inward-offset:var(--forge-focus-indicator-inward-offset, 0px);\n  --_focus-indicator-offset-block:var(--forge-focus-indicator-offset-block, 0);\n  --_focus-indicator-offset-inline:var(--forge-focus-indicator-offset-inline, 0);\n}\n\n.forge-button:not(:disabled):focus-visible::after {\n  animation-delay: 0s, calc(var(--_focus-indicator-duration) * 0.25);\n  animation-duration: calc(var(--_focus-indicator-duration) * 0.25), calc(var(--_focus-indicator-duration) * 0.75);\n  animation-timing-function: var(--_focus-indicator-easing);\n  box-sizing: border-box;\n  color: var(--_focus-indicator-color);\n  display: none;\n  pointer-events: none;\n  position: absolute;\n  margin-block: var(--_focus-indicator-offset-block);\n  margin-inline: var(--_focus-indicator-offset-inline);\n  animation-name: forge-focus-indicator-outward-grow, forge-focus-indicator-outward-shrink;\n  border-end-end-radius: calc(var(--_focus-indicator-shape-end-end) + var(--_focus-indicator-outward-offset));\n  border-end-start-radius: calc(var(--_focus-indicator-shape-end-start) + var(--_focus-indicator-outward-offset));\n  border-start-end-radius: calc(var(--_focus-indicator-shape-start-end) + var(--_focus-indicator-outward-offset));\n  border-start-start-radius: calc(var(--_focus-indicator-shape-start-start) + var(--_focus-indicator-outward-offset));\n  inset: calc(-1 * var(--_focus-indicator-outward-offset));\n  outline: var(--_focus-indicator-width) solid currentColor;\n  content: "";\n  display: block;\n}\n\n.forge-button:not(:disabled) {\n  --forge-focus-indicator-color: var(--_button-primary-color);\n}\n\n.forge-button:disabled {\n  cursor: var(--_button-disabled-cursor);\n  --_button-background:var(--_button-disabled-background);\n  --_button-color:var(--_button-disabled-text-color);\n  --_button-shadow:var(--_button-disabled-shadow);\n  pointer-events: none;\n  pointer-events: initial;\n}\n\n.forge-button:where(:not(.forge-button--outlined, .forge-button--tonal, .forge-button--filled, .forge-button--raised, .forge-button--link)), .forge-button--text {\n  --_button-padding-inline:var(--_button-text-padding-inline);\n}\n\n.forge-button--outlined {\n  --_button-background:var(--_button-outlined-background);\n  --_button-color:var(--_button-outlined-color);\n  --_button-border-width:var(--_button-outlined-border-width);\n  --_button-border-style:var(--_button-outlined-border-style);\n  --_button-border-color:var(--_button-outlined-border-color);\n}\n\n.forge-button--outlined:disabled {\n  --_button-border-color:var(--_button-disabled-border-color);\n}\n\n.forge-button--tonal {\n  --_button-background:var(--_button-tonal-background);\n  --_button-color:var(--_button-tonal-color);\n}\n\n.forge-button--tonal:disabled {\n  --_button-background:var(--_button-tonal-disabled-background);\n  --_button-color:var(--_button-tonal-disabled-color);\n}\n\n.forge-button--filled, .forge-button--raised {\n  --_button-background:var(--_button-filled-background);\n  --_button-color:var(--_button-filled-color);\n  --forge-state-layer-color: var(--_button-filled-color);\n}\n\n.forge-button--filled:disabled, .forge-button--raised:disabled {\n  --_button-background:var(--_button-filled-disabled-background);\n  --_button-color:var(--_button-filled-disabled-color);\n}\n\n.forge-button--raised {\n  --_button-background:var(--_button-raised-background);\n  --_button-color:var(--_button-raised-color);\n  --_button-shadow:var(--_button-raised-shadow);\n}\n\n.forge-button--raised:hover {\n  --_button-shadow:var(--_button-raised-hover-shadow);\n}\n\n.forge-button--raised:active {\n  --_button-shadow:var(--_button-raised-active-shadow);\n}\n\n.forge-button--raised:disabled {\n  --_button-background:var(--_button-raised-disabled-background);\n  --_button-color:var(--_button-raised-disabled-color);\n  --_button-shadow:var(--_button-raised-disabled-shadow);\n}\n\n.forge-button--link {\n  --_button-color:var(--_button-link-color);\n  --_button-height:var(--_button-link-height);\n  --_button-padding:var(--_button-link-padding);\n  --_button-focus-indicator-offset:var(--_button-link-focus-indicator-offset);\n  text-decoration: var(--_button-link-text-decoration);\n  line-height: var(--_button-link-line-height);\n  transition: opacity var(--_button-link-transition-duration) var(--_button-link-transition-timing);\n  inline-size: var(--_button-link-width);\n}\n\n.forge-button--link:hover {\n  text-decoration: var(--_button-link-hover-text-decoration);\n}\n\n.forge-button--link:active {\n  opacity: var(--_button-link-active-opacity);\n}\n\n.forge-button--pill {\n  --_button-shape:var(--_button-pill-shape);\n  --_button-padding-inline:var(--_button-pill-padding-inline);\n  --forge-focus-indicator-shape: var(--_button-pill-shape);\n}\n\n.forge-button {\n  --forge-icon-font-size: var(--_button-icon-size);\n}\n\n.forge-button--dense {\n  --_button-height:var(--_button-dense-height);\n}\n\n:host {\n  display: block;\n}\n\n.forge-inline-message {\n  --forge-inline-message-border-style: solid;\n}\n.forge-inline-message__title {\n  font-weight: bold;\n}\n.forge-inline-message__content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--forge-spacing-xsmall, 8px);\n  overflow-wrap: anywhere;\n}\n.forge-inline-message:not(:has(.forge-inline-message__title)) .forge-inline-message__icon {\n  align-self: center;\n}\n.forge-inline-message:not(:has(.forge-inline-message__title)) .forge-inline-message__content {\n  grid-row: 1/-1;\n  align-self: center;\n}\n\n:host([kind=info]) .forge-inline-message {\n  --forge-inline-message-background: var(--forge-theme-info-container-low, #e3edf7);\n  --forge-inline-message-color: var(--forge-theme-on-info-container-low, #0b3768);\n  --forge-inline-message-icon-color: var(--forge-theme-on-info-container-low, #0b3768);\n  --forge-inline-message-border-color: var(--forge-theme-info-container, #c7daf0);\n}\n\n:host([kind=warning]) .forge-inline-message {\n  --forge-inline-message-background: var(--forge-theme-warning-container-low, #f9e9e0);\n  --forge-inline-message-color: var(--forge-theme-on-warning-container-low, #712700);\n  --forge-inline-message-icon-color: var(--forge-theme-on-warning-container-low, #712700);\n  --forge-inline-message-border-color: var(--forge-theme-warning-container, #f4d3c2);\n}\n\n:host([kind=error]) .forge-inline-message {\n  --forge-inline-message-background: var(--forge-theme-error-container-low, #f6e0e4);\n  --forge-inline-message-color: var(--forge-theme-on-error-container-low, #5f0011);\n  --forge-inline-message-icon-color: var(--forge-theme-on-error-container-low, #5f0011);\n  --forge-inline-message-border-color: var(--forge-theme-error-container, #ecc2c9);\n}\n\n:host([kind=success]) .forge-inline-message {\n  --forge-inline-message-background: var(--forge-theme-success-container-low, #e6efe6);\n  --forge-inline-message-color: var(--forge-theme-on-success-container-low, #19441b);\n  --forge-inline-message-icon-color: var(--forge-theme-on-success-container-low, #19441b);\n  --forge-inline-message-border-color: var(--forge-theme-success-container, #cde0ce);\n}\n\n.client-message--text {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  font-family: var(--forge-typography-subheading2-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n  font-size: var(--forge-typography-subheading2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading2-font-size-scale, 1)));\n  font-weight: var(--forge-typography-subheading2-font-weight, 400);\n  line-height: var(--forge-typography-subheading2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading2-line-height-scale, 1.25)));\n  letter-spacing: var(--forge-typography-subheading2-letter-spacing, normal);\n  text-transform: var(--forge-typography-subheading2-text-transform, inherit);\n  text-decoration: var(--forge-typography-subheading2-text-decoration, inherit);\n  display: flex;\n  flex-direction: column;\n  gap: var(--forge-spacing-xxsmall, 4px);\n  padding-block: var(--forge-spacing-small, 12px);\n  color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n  font-style: italic;\n}\n\n.client-message__actions {\n  display: flex;\n  gap: var(--forge-spacing-xsmall, 8px);\n  font-style: normal;\n}\n.client-message__actions .forge-button {\n  --forge-button-outlined-color: currentColor;\n  --forge-button-outlined-border-color: currentColor;\n}';
+export {
+  styles as default
+};

package/dist/ai-client-message/index.d.ts

@@ -0,0 +1 @@
+export { AiClientMessageComponent, AiClientMessageComponentTagName } from './ai-client-message.js';

package/dist/ai-client-message/index.mjs

@@ -0,0 +1,5 @@
+import { AiClientMessageComponent, AiClientMessageComponentTagName } from "./ai-client-message.mjs";
+export {
+  AiClientMessageComponent,
+  AiClientMessageComponentTagName
+};

package/dist/ai-conversations-panel/ai-conversations-panel.d.ts

@@ -67,6 +67,7 @@ export declare class AiConversationsPanelComponent extends LitElement {
     selectedThreadId: string | null;
     showConversationRename: boolean;
     showConversationDelete: boolean;
+    loading: boolean;
     private _viewState;
     private _isSearching;
     private _searchResults;

package/dist/ai-conversations-panel/ai-conversations-panel.mjs

@@ -27,7 +27,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _searchDebounceTimeout, _deleteThreadController, _recentChatsScrollController, _searchChatsScrollController, _AiConversationsPanelComponent_instances, shouldEnableRecentPagination_get, shouldEnableSearchPagination_get, attachScrollController_fn, displayedThreads_get, handleSearch_fn, handleSearchInput_fn, handleRecentChatsLoadMore_fn, handleSearchChatsLoadMore_fn, transitionToSearch_fn, transitionToMain_fn, handleBackClick_fn, handleThreadSelect_fn, handleNewChatClick_fn, handleSearchChatsClick_fn, handleCloseClick_fn, handleMenuRename_fn, handleMenuOpen_fn, handleMenuClose_fn, handleMenuDeleteClick_fn, handleEditSave_fn, handleEditCancel_fn, _header, headerSearch_get, _chatsLabel, searchFieldSearch_get, emptyState_get, loadingMoreIndicator_get, threadList_get, threadListContainer_get, _chatActionsList;
+var _searchDebounceTimeout, _deleteThreadController, _recentChatsScrollController, _searchChatsScrollController, _AiConversationsPanelComponent_instances, shouldEnableRecentPagination_get, shouldEnableSearchPagination_get, attachScrollController_fn, displayedThreads_get, handleSearch_fn, handleSearchInput_fn, handleRecentChatsLoadMore_fn, handleSearchChatsLoadMore_fn, transitionToSearch_fn, transitionToMain_fn, handleBackClick_fn, handleThreadSelect_fn, handleNewChatClick_fn, handleSearchChatsClick_fn, handleCloseClick_fn, handleMenuRename_fn, handleMenuOpen_fn, handleMenuClose_fn, handleMenuDeleteClick_fn, handleEditSave_fn, handleEditCancel_fn, _header, headerSearch_get, _chatsLabel, searchFieldSearch_get, emptyState_get, loadingMoreIndicator_get, _loadingIndicator, threadList_get, threadListContainer_get, _chatActionsList;
 const AiConversationsPanelComponentTagName = "forge-ai-conversations-panel";
 let AiConversationsPanelComponent = class extends LitElement {
   constructor() {
@@ -38,6 +38,7 @@ let AiConversationsPanelComponent = class extends LitElement {
     this.selectedThreadId = null;
     this.showConversationRename = false;
     this.showConversationDelete = false;
+    this.loading = false;
     this._viewState = "main";
     this._isSearching = false;
     this._searchResults = [];
@@ -94,6 +95,11 @@ let AiConversationsPanelComponent = class extends LitElement {
     </div>
   `);
     __privateAdd(this, _chatsLabel, html`<div class="chats-label">Recent chats</div>`);
+    __privateAdd(this, _loadingIndicator, html`
+    <div class="loading-indicator">
+      <forge-ai-spinner size="small"></forge-ai-spinner>
+    </div>
+  `);
     __privateAdd(this, _chatActionsList, html`
     <ul class="forge-list forge-list--dense forge-list--navlist chat-actions-list" role="list">
       <li class="forge-list-item new-chat-item" role="listitem">
@@ -427,7 +433,7 @@ searchFieldSearch_get = function() {
     `;
 };
 emptyState_get = function() {
-  const message = this._viewState === "search" && this._searchQuery.trim() ? "No conversations found" : "No conversations yet";
+  const message = this._viewState === "search" && this._searchQuery.trim() ? "No chats found" : "No chats yet";
   return html`
       <div class="empty-state">
         <p>${message}</p>
@@ -445,9 +451,13 @@ loadingMoreIndicator_get = function() {
       </div>
     `;
 };
+_loadingIndicator = /* @__PURE__ */ new WeakMap();
 threadList_get = function() {
   const threads = __privateGet(this, _AiConversationsPanelComponent_instances, displayedThreads_get);
   if (threads.length === 0) {
+    if (this.loading && this._viewState === "main") {
+      return __privateGet(this, _loadingIndicator);
+    }
     return __privateGet(this, _AiConversationsPanelComponent_instances, emptyState_get);
   }
   return html`
@@ -519,6 +529,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, attribute: "show-conversation-delete" })
 ], AiConversationsPanelComponent.prototype, "showConversationDelete", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], AiConversationsPanelComponent.prototype, "loading", 2);
 __decorateClass([
   state()
 ], AiConversationsPanelComponent.prototype, "_viewState", 2);