@tylertech/forge-ai 0.13.11 → 0.13.13-dev.0

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

@@ -83,7 +83,7 @@ renderTextChunk_fn = function(child) {
 };
 renderToolCall_fn = function(toolCall) {
   const toolDefinition = this.tools?.get(toolCall.name);
-  if (!toolDefinition?.renderer || toolCall.status !== "complete") {
+  if (!toolDefinition?.renderer) {
     return nothing;
   }
   return html`<forge-ai-chatbot-tool-call
@@ -167,7 +167,8 @@ thinkingIndicator_get = function() {
     return nothing;
   }
   const lastChild = this.response.children[this.response.children.length - 1];
-  if (lastChild?.type === "text" && lastChild.status === "streaming") {
+  const isThinking = this.response.status === "streaming" && this.response.isThinking === true;
+  if (!isThinking && lastChild?.type === "text" && lastChild.status === "streaming") {
     const content = typeof lastChild.content === "string" ? lastChild.content : "";
     if (content.trim().length > 0) {
       return nothing;

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-tool-call.mjs

@@ -1,6 +1,7 @@
 import { unsafeCSS, LitElement, nothing, html } from "lit";
 import { property, customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
+import { shouldShowToolRenderer } from "./utils.mjs";
 import styles from "./ai-chatbot-tool-call.scss.mjs";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -20,7 +21,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 _customRendererRef, _renderedElement, _AiChatbotToolCallComponent_instances, shouldRenderCustom_get, dispatchScrollRequest_fn, customRenderer_get;
+var _customRendererRef, _renderedElement, _AiChatbotToolCallComponent_instances, shouldRenderCustom_get, dispatchScrollRequest_fn, customRenderer_get, replaceRenderedElement_fn;
 const AiChatbotToolCallComponentTagName = "forge-ai-chatbot-tool-call";
 let AiChatbotToolCallComponent = class extends LitElement {
   constructor() {
@@ -31,25 +32,24 @@ let AiChatbotToolCallComponent = class extends LitElement {
   }
   updated(changedProperties) {
     super.updated(changedProperties);
-    if (changedProperties.has("toolCall") || changedProperties.has("toolDefinition")) {
-      const renderer = this.toolDefinition?.renderer;
-      const container = __privateGet(this, _customRendererRef).value;
-      if (container && __privateGet(this, _AiChatbotToolCallComponent_instances, shouldRenderCustom_get)) {
-        if (__privateGet(this, _renderedElement) && container.contains(__privateGet(this, _renderedElement))) {
-          container.removeChild(__privateGet(this, _renderedElement));
-        }
-        if (renderer?.elementTag) {
-          const element = document.createElement(renderer.elementTag);
-          element.toolCall = this.toolCall;
-          __privateSet(this, _renderedElement, element);
-          container.appendChild(element);
-          __privateMethod(this, _AiChatbotToolCallComponent_instances, dispatchScrollRequest_fn).call(this);
-        } else if (renderer?.render) {
-          __privateSet(this, _renderedElement, renderer.render(this.toolCall));
-          container.appendChild(__privateGet(this, _renderedElement));
-          __privateMethod(this, _AiChatbotToolCallComponent_instances, dispatchScrollRequest_fn).call(this);
-        }
+    if (!changedProperties.has("toolCall") && !changedProperties.has("toolDefinition")) {
+      return;
+    }
+    const container = __privateGet(this, _customRendererRef).value;
+    if (!container || !__privateGet(this, _AiChatbotToolCallComponent_instances, shouldRenderCustom_get)) {
+      return;
+    }
+    const renderer = this.toolDefinition?.renderer;
+    if (renderer?.elementTag) {
+      if (__privateGet(this, _renderedElement) instanceof HTMLElement && __privateGet(this, _renderedElement).tagName.toLowerCase() === renderer.elementTag) {
+        __privateGet(this, _renderedElement).toolCall = this.toolCall;
+        return;
       }
+      const element = document.createElement(renderer.elementTag);
+      element.toolCall = this.toolCall;
+      __privateMethod(this, _AiChatbotToolCallComponent_instances, replaceRenderedElement_fn).call(this, container, element);
+    } else if (renderer?.render) {
+      __privateMethod(this, _AiChatbotToolCallComponent_instances, replaceRenderedElement_fn).call(this, container, renderer.render(this.toolCall));
     }
   }
   render() {
@@ -60,14 +60,7 @@ _customRendererRef = /* @__PURE__ */ new WeakMap();
 _renderedElement = /* @__PURE__ */ new WeakMap();
 _AiChatbotToolCallComponent_instances = /* @__PURE__ */ new WeakSet();
 shouldRenderCustom_get = function() {
-  const status = this.toolCall?.status;
-  if (status === "complete") {
-    return true;
-  }
-  if (this.toolDefinition?.renderOnStart && (status === "parsing" || status === "executing")) {
-    return true;
-  }
-  return false;
+  return shouldShowToolRenderer(this.toolCall, this.toolDefinition);
 };
 dispatchScrollRequest_fn = function() {
   this.dispatchEvent(
@@ -87,6 +80,14 @@ customRenderer_get = function() {
   }
   return nothing;
 };
+replaceRenderedElement_fn = function(container, element) {
+  if (__privateGet(this, _renderedElement) && container.contains(__privateGet(this, _renderedElement))) {
+    container.removeChild(__privateGet(this, _renderedElement));
+  }
+  __privateSet(this, _renderedElement, element);
+  container.appendChild(element);
+  __privateMethod(this, _AiChatbotToolCallComponent_instances, dispatchScrollRequest_fn).call(this);
+};
 AiChatbotToolCallComponent.styles = unsafeCSS(styles);
 __decorateClass([
   property({ attribute: false })

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-chatbot/utils.d.ts

@@ -1,5 +1,16 @@
-import { ChatMessage, ContextItem, FileAttachment, ToolCall } from './types.js';
+import { ChatMessage, ContextItem, FileAttachment, ToolCall, ToolDefinition } from './types.js';
 export { renderMarkdown, renderInlineMarkdown, type RenderMarkdownOptions } from '../utils/markdown.js';
+/**
+ * Whether a tool call's renderer should currently be shown: once the call is complete,
+ * or immediately (while still parsing/executing) if the tool opted into `renderOnStart`.
+ */
+export declare function shouldShowToolRenderer(toolCall: ToolCall, toolDefinition?: ToolDefinition): boolean;
+/**
+ * Whether a tool call should be treated as settled for activity indicators (thinking
+ * indicator, tool-call summary spinner): either genuinely finished, or already showing
+ * its own renderer to the user, which makes a redundant "running" spinner misleading.
+ */
+export declare function isToolCallSettled(toolCall: ToolCall, toolDefinition?: ToolDefinition): boolean;
 /**
  * Generates a unique ID using UUID v4
  */

package/dist/ai-chatbot/utils.mjs

@@ -1,5 +1,17 @@
 import { v4 } from "uuid";
 import { renderInlineMarkdown, renderMarkdown } from "../utils/markdown.mjs";
+function shouldShowToolRenderer(toolCall, toolDefinition) {
+  if (!toolDefinition?.renderer) {
+    return false;
+  }
+  if (toolCall.status === "complete") {
+    return true;
+  }
+  return !!toolDefinition.renderOnStart && (toolCall.status === "parsing" || toolCall.status === "executing");
+}
+function isToolCallSettled(toolCall, toolDefinition) {
+  return toolCall.status === "complete" || toolCall.status === "error" || shouldShowToolRenderer(toolCall, toolDefinition);
+}
 function generateId() {
   return v4();
 }
@@ -89,6 +101,8 @@ export {
   formatChatTranscript,
   formatToolCallForExport,
   generateId,
+  isToolCallSettled,
   renderInlineMarkdown,
-  renderMarkdown
+  renderMarkdown,
+  shouldShowToolRenderer
 };

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
+};