@tylertech/forge-ai 0.15.3-dev.1 → 0.16.0-dev.0

package/dist/ai-threads-search/ai-threads-search2.mjs

@@ -0,0 +1,495 @@
+import __decorate from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.mjs";
+import "../ai-modal/ai-modal2.mjs";
+import { DeleteThreadController } from "../utils/delete-thread-controller.mjs";
+import { InfiniteScrollController } from "../utils/infinite-scroll-controller.mjs";
+import "../ai-error-message/index.mjs";
+import "../ai-thread-actions-menu/index.mjs";
+import "../ai-edit-thread/index.mjs";
+import "../ai-spinner/index.mjs";
+import { formatRelativeTime } from "../utils/format.mjs";
+import ai_threads_search_default from "./ai-threads-search.mjs";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+//#region src/lib/ai-threads-search/ai-threads-search.ts
+var AiThreadsSearchComponentTagName = "forge-ai-threads-search";
+var AiThreadsSearchComponent = class AiThreadsSearchComponent extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.threads = [];
+		this.headerTitle = "All chats";
+		this.showNewChatButton = true;
+		this.showBackButton = false;
+		this.showSearch = true;
+		this.totalChats = 0;
+		this.placeholder = "Find a chat";
+		this.showThreadRename = false;
+		this.showThreadDelete = false;
+		this.selectedThreadId = null;
+		this._searchQuery = "";
+		this._isSearching = false;
+		this._searchResults = [];
+		this._editingThreadId = null;
+		this._hiddenThreadIds = /* @__PURE__ */ new Set();
+		this._openMenuThreadId = null;
+		this.#focusRowIndexAfterLoad = null;
+		this.#deleteThreadController = new DeleteThreadController(this, { onConfirm: (thread) => this.#confirmDelete(thread) });
+		this.#infiniteScrollController = new InfiniteScrollController(this, { onLoadMore: () => this.#loadMore() });
+	}
+	static {
+		this.styles = unsafeCSS(ai_threads_search_default);
+	}
+	#focusRowIndexAfterLoad;
+	#deleteThreadController;
+	#infiniteScrollController;
+	get #shouldEnablePagination() {
+		if (this.totalChats <= 0) return false;
+		return this.#displayedThreads.length < this.totalChats;
+	}
+	firstUpdated() {
+		if (this.#shouldEnablePagination && this._resultsContainer) this.#infiniteScrollController.attach(this._resultsContainer);
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("threads") || changedProperties.has("totalChats")) {
+			this.#infiniteScrollController.reset();
+			if (this.#shouldEnablePagination) {
+				if (this._resultsContainer) this.#infiniteScrollController.attach(this._resultsContainer);
+			} else this.#infiniteScrollController.detach();
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		clearTimeout(this._searchTimeout);
+	}
+	#handleSearchInput(e) {
+		const input = e.target;
+		this._searchQuery = input.value;
+		clearTimeout(this._searchTimeout);
+		this._searchTimeout = window.setTimeout(() => {
+			this.#performSearch();
+		}, 300);
+	}
+	#performSearch() {
+		const searchQuery = this._searchQuery.trim();
+		this.#focusRowIndexAfterLoad = null;
+		this.#infiniteScrollController.reset();
+		const searchEvent = new CustomEvent("forge-ai-threads-search-query", {
+			detail: {
+				query: searchQuery,
+				setResults: (results) => {
+					this._searchResults = results;
+					this._isSearching = false;
+				}
+			},
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		});
+		this.dispatchEvent(searchEvent);
+		if (searchEvent.defaultPrevented) this._isSearching = true;
+		else {
+			this._searchResults = this.threads.filter((thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()));
+			this.#infiniteScrollController.setHasMore(false);
+		}
+	}
+	#handleLoadMoreClick() {
+		if (this.#infiniteScrollController.isLoadingMore) return;
+		this.#focusRowIndexAfterLoad = this.#displayedThreads.length;
+		this.#infiniteScrollController.setLoadingState(true);
+		this.#loadMore();
+	}
+	#focusRow(index) {
+		(this.shadowRoot?.querySelectorAll(".forge-list-item > button") ?? [])[index]?.focus();
+	}
+	#loadMore() {
+		const loadMoreEvent = new CustomEvent("forge-ai-threads-search-load-more", {
+			detail: {
+				query: this._searchQuery,
+				appendResults: (results) => {
+					const focusRowIndex = this.#focusRowIndexAfterLoad;
+					this.#focusRowIndexAfterLoad = null;
+					if (results.length === 0) this.#infiniteScrollController.setHasMore(false);
+					else {
+						if (this._searchQuery) this._searchResults = [...this._searchResults, ...results];
+						else this.threads = [...this.threads, ...results];
+						if (focusRowIndex !== null) this.updateComplete.then(() => this.#focusRow(focusRowIndex));
+					}
+					this.#infiniteScrollController.setLoadingState(false);
+				}
+			},
+			bubbles: true,
+			composed: true
+		});
+		this.dispatchEvent(loadMoreEvent);
+	}
+	#handleThreadSelect(thread) {
+		const event = new CustomEvent("forge-ai-threads-search-select", {
+			detail: {
+				id: thread.id,
+				title: thread.title
+			},
+			bubbles: true,
+			composed: true
+		});
+		this.dispatchEvent(event);
+	}
+	#handleNewChatClick() {
+		const event = new CustomEvent("forge-ai-threads-search-new-chat", {
+			bubbles: true,
+			composed: true
+		});
+		this.dispatchEvent(event);
+	}
+	#handleBackClick() {
+		const event = new CustomEvent("forge-ai-threads-search-back", {
+			bubbles: true,
+			composed: true
+		});
+		this.dispatchEvent(event);
+	}
+	#handleRetryClick() {
+		if (this._searchQuery.trim()) {
+			this.#performSearch();
+			return;
+		}
+		const event = new CustomEvent("forge-ai-threads-search-retry", {
+			bubbles: true,
+			composed: true
+		});
+		this.dispatchEvent(event);
+	}
+	#handleMenuRename(e) {
+		this._editingThreadId = e.detail.id;
+		this._openMenuThreadId = null;
+	}
+	#handleMenuOpen(e) {
+		this._openMenuThreadId = e.detail.id;
+	}
+	#handleMenuClose() {
+		this._openMenuThreadId = null;
+	}
+	#handleMenuDeleteClick(e) {
+		const { id } = e.detail;
+		const thread = this.#displayedThreads.find((t) => t.id === id);
+		if (!thread) return;
+		const event = new CustomEvent("forge-ai-threads-search-delete-confirm", {
+			detail: { thread },
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		});
+		if (this.dispatchEvent(event)) this.#deleteThreadController.show(thread);
+	}
+	#confirmDelete(thread) {
+		const onSuccess = () => {
+			this._hiddenThreadIds.add(thread.id);
+			this.requestUpdate();
+		};
+		const onError = (error) => {
+			this._hiddenThreadIds.delete(thread.id);
+			this.requestUpdate();
+			if (error) console.error("Delete failed:", error);
+		};
+		const event = new CustomEvent("forge-ai-threads-search-delete", {
+			detail: {
+				id: thread.id,
+				thread,
+				onSuccess,
+				onError
+			},
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		});
+		if (this.dispatchEvent(event)) {
+			this._hiddenThreadIds.add(thread.id);
+			this.requestUpdate();
+		}
+	}
+	/**
+	* Completes a delete that a host intercepted via `forge-ai-threads-search-delete-confirm`
+	* (calling preventDefault() to show its own confirmation instead of this component's
+	* built-in one). Call once the host's own confirmation has been accepted.
+	*/
+	confirmThreadDelete(thread) {
+		this.#confirmDelete(thread);
+	}
+	#handleEditSave(e) {
+		const { id, oldTitle, newTitle } = e.detail;
+		const thread = this.#displayedThreads.find((t) => t.id === id);
+		if (!thread) return;
+		const onSuccess = () => {
+			thread.title = newTitle;
+			this.requestUpdate();
+		};
+		const onError = (error) => {
+			thread.title = oldTitle;
+			this.requestUpdate();
+			if (error) console.error("Rename failed:", error);
+		};
+		const event = new CustomEvent("forge-ai-threads-search-rename", {
+			detail: {
+				id,
+				oldTitle,
+				newTitle,
+				onSuccess,
+				onError
+			},
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		});
+		if (this.dispatchEvent(event)) {
+			thread.title = newTitle;
+			this.requestUpdate();
+		}
+		this._editingThreadId = null;
+	}
+	#handleEditCancel() {
+		this._editingThreadId = null;
+	}
+	#handleClearSearch() {
+		this.resetSearch();
+		this._searchInput?.focus();
+	}
+	/**
+	* Discards the current query and its results so the list shows every loaded chat again.
+	* Dispatches no search event and moves no focus, so a host may call it on a surface that is
+	* currently hidden (e.g. a popover that stays mounted between opens).
+	*/
+	resetSearch() {
+		clearTimeout(this._searchTimeout);
+		this._searchQuery = "";
+		this._searchResults = [];
+		this._isSearching = false;
+		this.#focusRowIndexAfterLoad = null;
+		this.#infiniteScrollController.reset();
+	}
+	/**
+	* Moves focus into the component: the search input when shown, otherwise the first chat in
+	* the list, otherwise the first header button.
+	*/
+	focus() {
+		(this._searchInput ?? this.shadowRoot?.querySelector(".forge-list-item > button") ?? this.shadowRoot?.querySelector("button"))?.focus();
+	}
+	get #displayedThreads() {
+		return (this._searchQuery ? this._searchResults : this.threads).filter((thread) => !this._hiddenThreadIds.has(thread.id));
+	}
+	get #header() {
+		return html`
+      <div class="header">
+        <div class="header-start">
+          ${when(this.showBackButton, () => html`
+              <button class="back-button forge-icon-button forge-icon-button--medium" @click=${this.#handleBackClick} aria-label="Back">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
+                  <path fill="none" d="M0 0h24v24H0z" />
+                  <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z" />
+                </svg>
+              </button>
+            `)}
+          <div class="header-title">
+            <span class="title">${this.headerTitle}</span>
+          </div>
+        </div>
+        <div class="header-end">
+          ${when(this.showNewChatButton, () => html`
+              <button class="forge-button new-chat-button" @click=${this.#handleNewChatClick}>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon" aria-hidden="true">
+                  <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+                </svg>
+                New chat
+              </button>
+            `)}
+          <slot name="header-actions"></slot>
+        </div>
+      </div>
+    `;
+	}
+	get #searchField() {
+		return html`
+      <div class="forge-field forge-field--small search-field">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon" aria-hidden="true">
+          <path fill="none" d="M0 0h24v24H0z" />
+          <path
+            d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14" />
+        </svg>
+        <input
+          id="threads-search-input"
+          type="text"
+          autocomplete="off"
+          aria-label="Search"
+          placeholder=${this.placeholder}
+          .value=${this._searchQuery}
+          @input=${this.#handleSearchInput} />
+        ${when(this._isSearching, () => html`<forge-ai-spinner size="extra-small"></forge-ai-spinner>`)}
+        ${when(this._searchQuery.length, () => html`
+            <button class="forge-icon-button forge-icon-button--small" type="button" aria-label="Clear search" @click=${this.#handleClearSearch}>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon" aria-hidden="true">
+                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+              </svg>
+            </button>
+          `)}
+      </div>
+    `;
+	}
+	#renderThreadItem(thread) {
+		const isEditing = this._editingThreadId === thread.id;
+		const hasOpenMenu = this._openMenuThreadId === thread.id;
+		const isSelected = this.selectedThreadId === thread.id;
+		return html`
+      <li class="forge-list-item ${isSelected ? "forge-list-item--selected" : ""} ${hasOpenMenu ? "forge-list-item--menu-open" : ""}" role="listitem">
+        ${when(isEditing, () => html`
+            <forge-ai-edit-thread
+              .thread=${thread}
+              .value=${thread.title}
+              @forge-ai-edit-thread-save=${this.#handleEditSave}
+              @forge-ai-edit-thread-cancel=${this.#handleEditCancel}>
+            </forge-ai-edit-thread>
+          `, () => html`
+            <button type="button" aria-current=${isSelected ? "true" : nothing} @click=${() => this.#handleThreadSelect(thread)}>${thread.title}</button>
+            <span class="thread-time">${formatRelativeTime(thread.createdAt)}</span>
+            ${when(this.showThreadRename || this.showThreadDelete, () => html`
+                <div class="thread-item-actions">
+                  <forge-ai-thread-actions-menu
+                    .thread=${thread}
+                    ?show-rename=${this.showThreadRename}
+                    ?show-delete=${this.showThreadDelete}
+                    @forge-ai-thread-actions-menu-rename=${this.#handleMenuRename}
+                    @forge-ai-thread-actions-menu-delete-click=${this.#handleMenuDeleteClick}
+                    @forge-ai-thread-actions-menu-open=${this.#handleMenuOpen}
+                    @forge-ai-thread-actions-menu-close=${this.#handleMenuClose}>
+                  </forge-ai-thread-actions-menu>
+                </div>
+              `)}
+          `)}
+      </li>
+    `;
+	}
+	get #errorState() {
+		return html`
+      <div class="error-state">
+        <forge-ai-error-message density="small">
+          <span slot="title">Error</span>
+          <p class="error-state__message">${this.errorMessage}</p>
+          <button class="forge-button forge-button--outlined forge-button--dense error-state__retry" type="button" @click=${this.#handleRetryClick}>
+            Retry
+          </button>
+        </forge-ai-error-message>
+      </div>
+    `;
+	}
+	/** The single-line variant, used when threads are already on screen and the list stays visible. */
+	get #compactError() {
+		return html`
+      <forge-ai-error-message class="compact-error" density="small">
+        <div class="compact-error__body">
+          <span>${this.errorMessage}</span>
+          <button class="forge-button forge-button--outlined forge-button--dense compact-error__retry" type="button" @click=${this.#handleRetryClick}>
+            Retry
+          </button>
+        </div>
+      </forge-ai-error-message>
+    `;
+	}
+	/**
+	* A failure that arrives while a page is in flight is a pagination failure, so it reads at the
+	* bottom of the list where the load-more spinner would have been. Any other failure - a rejected
+	* thread selection, for instance - is not tied to the end of the list, so it sits above it.
+	*/
+	get #errorPlacement() {
+		if (!this.errorMessage || this.#displayedThreads.length === 0) return "none";
+		return this.#infiniteScrollController.isLoadingMore ? "list-footer" : "above-list";
+	}
+	get #emptyState() {
+		const message = this._searchQuery.trim() ? "No chats found" : "No chats yet";
+		return html`
+      <div class="empty-state">
+        <p>${message}</p>
+      </div>
+    `;
+	}
+	get #listFooter() {
+		if (this.#errorPlacement === "list-footer") return this.#compactError;
+		if (this.#infiniteScrollController.isLoadingMore) return html`
+        <div class="loading-more-indicator">
+          <forge-ai-spinner></forge-ai-spinner>
+        </div>
+      `;
+		if (this.#shouldEnablePagination && this.#infiniteScrollController.hasMoreResults) return html`
+        <div class="loading-more-indicator">
+          <button type="button" class="forge-button forge-button--dense load-more-button" @click=${this.#handleLoadMoreClick}>Load more</button>
+        </div>
+      `;
+		return nothing;
+	}
+	get #resultsList() {
+		const displayThreads = this.#displayedThreads;
+		if (displayThreads.length === 0) return html`<div class="results-container">${this.errorMessage ? this.#errorState : this.#emptyState}</div>`;
+		return html`
+      <div class="results-container">
+        <ul class="forge-list forge-list--dense forge-list--navlist" role="list">
+          ${displayThreads.map((thread) => this.#renderThreadItem(thread))}
+        </ul>
+        ${this.#listFooter}
+      </div>
+    `;
+	}
+	render() {
+		return html`
+      <div class="threads-search-container">
+        ${this.#header} ${when(this.showSearch, () => this.#searchField)} ${when(this.#errorPlacement === "above-list", () => this.#compactError)}
+        ${this.#resultsList}
+      </div>
+      ${this.#deleteThreadController.template}
+    `;
+	}
+};
+__decorate([property({ type: Array })], AiThreadsSearchComponent.prototype, "threads", void 0);
+__decorate([property({
+	type: String,
+	attribute: "header-title"
+})], AiThreadsSearchComponent.prototype, "headerTitle", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "show-new-chat-button"
+})], AiThreadsSearchComponent.prototype, "showNewChatButton", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "show-back-button"
+})], AiThreadsSearchComponent.prototype, "showBackButton", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "show-search"
+})], AiThreadsSearchComponent.prototype, "showSearch", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "total-chats"
+})], AiThreadsSearchComponent.prototype, "totalChats", void 0);
+__decorate([property({ type: String })], AiThreadsSearchComponent.prototype, "placeholder", void 0);
+__decorate([property({
+	type: String,
+	attribute: "error-message"
+})], AiThreadsSearchComponent.prototype, "errorMessage", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "show-thread-rename"
+})], AiThreadsSearchComponent.prototype, "showThreadRename", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "show-thread-delete"
+})], AiThreadsSearchComponent.prototype, "showThreadDelete", void 0);
+__decorate([property({
+	type: String,
+	attribute: "selected-thread-id"
+})], AiThreadsSearchComponent.prototype, "selectedThreadId", void 0);
+__decorate([query(".results-container")], AiThreadsSearchComponent.prototype, "_resultsContainer", void 0);
+__decorate([query("#threads-search-input")], AiThreadsSearchComponent.prototype, "_searchInput", void 0);
+__decorate([state()], AiThreadsSearchComponent.prototype, "_searchQuery", void 0);
+__decorate([state()], AiThreadsSearchComponent.prototype, "_isSearching", void 0);
+__decorate([state()], AiThreadsSearchComponent.prototype, "_searchResults", void 0);
+__decorate([state()], AiThreadsSearchComponent.prototype, "_editingThreadId", void 0);
+__decorate([state()], AiThreadsSearchComponent.prototype, "_hiddenThreadIds", void 0);
+__decorate([state()], AiThreadsSearchComponent.prototype, "_openMenuThreadId", void 0);
+AiThreadsSearchComponent = __decorate([customElement(AiThreadsSearchComponentTagName)], AiThreadsSearchComponent);
+//#endregion
+export { AiThreadsSearchComponent, AiThreadsSearchComponentTagName };

package/dist/ai-threads-search/index.d.ts

@@ -1 +1 @@
-export * from './ai-threads-search';
+export * from './ai-threads-search.js';

package/dist/ai-threads-search/index.mjs

@@ -1,5 +1 @@
-import { AiThreadsSearchComponent, AiThreadsSearchComponentTagName } from "./ai-threads-search.mjs";
-export {
-  AiThreadsSearchComponent,
-  AiThreadsSearchComponentTagName
-};
+export { AiThreadsSearchComponent, AiThreadsSearchComponentTagName } from "./ai-threads-search2.mjs";

package/dist/ai-tool-call/ai-tool-call.d.ts

@@ -0,0 +1,21 @@
+import { LitElement, TemplateResult, nothing, PropertyValues, CSSResult } from 'lit';
+import { ToolCall, AnyToolDefinition } from '../types/index.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-ai-tool-call': AiToolCallComponent;
+    }
+}
+export declare const AiToolCallComponentTagName: keyof HTMLElementTagNameMap;
+/**
+ * @tag forge-ai-tool-call
+ *
+ * @event {CustomEvent<void>} forge-ai-message-thread-scroll-request - Fired when the rendered content changes size and the containing message thread should scroll to keep it in view.
+ */
+export declare class AiToolCallComponent extends LitElement {
+    #private;
+    static styles: CSSResult;
+    toolCall: ToolCall;
+    toolDefinition?: AnyToolDefinition;
+    updated(changedProperties: PropertyValues<this>): void;
+    render(): TemplateResult | typeof nothing;
+}

package/dist/ai-tool-call/ai-tool-call.mjs

@@ -0,0 +1,4 @@
+//#region src/lib/ai-tool-call/ai-tool-call.scss?inline
+var ai_tool_call_default = ":host {\n  display: block;\n  margin-block-end: var(--forge-spacing-small, 12px);\n}";
+//#endregion
+export { ai_tool_call_default as default };

package/dist/ai-tool-call/ai-tool-call2.mjs

@@ -0,0 +1,132 @@
+import __decorate from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.mjs";
+import { createToolCanvas, requestCanvasClose, requestCanvasOpen, resolveToolCanvasActionLabel, resolveToolCanvasIcon, resolveToolCanvasInline, resolveToolCanvasSubtitle, resolveToolCanvasTitle, toolCanvasHostContext } from "./tool-canvas.mjs";
+import { shouldShowToolRenderer } from "./utils.mjs";
+import "../ai-artifact-card/index.mjs";
+import ai_tool_call_default from "./ai-tool-call.mjs";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { ContextConsumer } from "@lit/context";
+//#region src/lib/ai-tool-call/ai-tool-call.ts
+var AiToolCallComponentTagName = "forge-ai-tool-call";
+var AiToolCallComponent = class AiToolCallComponent extends LitElement {
+	static {
+		this.styles = unsafeCSS(ai_tool_call_default);
+	}
+	#customRendererRef = createRef();
+	#renderedElement;
+	#renderedCanvas;
+	#canvasHostConsumer = new ContextConsumer(this, {
+		context: toolCanvasHostContext,
+		subscribe: true,
+		callback: () => this.requestUpdate()
+	});
+	get #shouldRenderCustom() {
+		return shouldShowToolRenderer(this.toolCall, this.toolDefinition);
+	}
+	/** Tools without a canvas config stay plain `inline` even when the host offers a canvas. */
+	get #presentation() {
+		if (!this.toolDefinition?.canvas) return "inline";
+		return this.#canvasHostConsumer.value?.presentation ?? "inline";
+	}
+	get #isOpenInCanvas() {
+		return this.#canvasHostConsumer.value?.openToolCallId === this.toolCall.id;
+	}
+	#canvasControls;
+	get #canvas() {
+		const available = this.#presentation === "inline-expandable";
+		const isOpen = this.#isOpenInCanvas;
+		if (this.#canvasControls?.available !== available || this.#canvasControls.isOpen !== isOpen) this.#canvasControls = createToolCanvas({
+			available,
+			isOpen: () => this.#isOpenInCanvas,
+			open: (options) => requestCanvasOpen(this, {
+				toolCallId: this.toolCall.id,
+				toolName: this.toolCall.name,
+				title: options?.title
+			}),
+			close: () => requestCanvasClose(this, { toolCallId: this.toolCall.id })
+		});
+		return this.#canvasControls;
+	}
+	get #showsArtifactCard() {
+		if (!this.toolDefinition || this.#presentation !== "inline-expandable") return false;
+		switch (resolveToolCanvasInline(this.toolDefinition)) {
+			case "card": return true;
+			case "card-while-open": return this.#isOpenInCanvas;
+			default: return false;
+		}
+	}
+	#artifactCard(toolDefinition) {
+		const active = this.#isOpenInCanvas;
+		const icon = resolveToolCanvasIcon(this.toolCall, toolDefinition);
+		icon?.setAttribute("slot", "icon");
+		return html`
+      <forge-ai-artifact-card
+        title-text=${resolveToolCanvasTitle(this.toolCall, toolDefinition)}
+        .subtitleText=${resolveToolCanvasSubtitle(this.toolCall, toolDefinition) ?? ""}
+        action-label=${resolveToolCanvasActionLabel(this.toolCall, toolDefinition, active)}
+        asset-id=${this.toolCall.id}
+        ?active=${active}
+        @forge-ai-artifact-card-open=${() => this.#canvas.toggle()}>
+        ${icon ?? nothing}
+      </forge-ai-artifact-card>
+    `;
+	}
+	#dispatchScrollRequest() {
+		this.dispatchEvent(new CustomEvent("forge-ai-message-thread-scroll-request", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	get #customRenderer() {
+		const toolDefinition = this.toolDefinition;
+		const renderer = toolDefinition?.renderer;
+		if (!toolDefinition || !renderer || !this.#shouldRenderCustom) return nothing;
+		if (this.#showsArtifactCard) return this.#artifactCard(toolDefinition);
+		if (renderer.elementTag || renderer.render) return html`<div ${ref(this.#customRendererRef)}></div>`;
+		return nothing;
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		const container = this.#customRendererRef.value;
+		if (!container || !this.#shouldRenderCustom) return;
+		const renderer = this.toolDefinition?.renderer;
+		const canvas = this.#canvas;
+		const mounted = container.childNodes.length > 0;
+		const changed = changedProperties.has("toolCall") || changedProperties.has("toolDefinition");
+		if (renderer?.elementTag) {
+			if (mounted && this.#renderedElement instanceof HTMLElement && this.#renderedElement.tagName.toLowerCase() === renderer.elementTag) {
+				const existing = this.#renderedElement;
+				existing.toolCall = this.toolCall;
+				existing.presentation = this.#presentation;
+				existing.canvas = canvas;
+				return;
+			}
+			const element = document.createElement(renderer.elementTag);
+			element.toolCall = this.toolCall;
+			element.presentation = this.#presentation;
+			element.canvas = canvas;
+			this.#replaceRenderedElement(container, element);
+		} else if (renderer?.render && (changed || !mounted || canvas !== this.#renderedCanvas)) {
+			this.#renderedCanvas = canvas;
+			this.#replaceRenderedElement(container, renderer.render(this.toolCall, {
+				presentation: this.#presentation,
+				canvas
+			}));
+		}
+	}
+	#replaceRenderedElement(container, element) {
+		if (this.#renderedElement && container.contains(this.#renderedElement)) container.removeChild(this.#renderedElement);
+		this.#renderedElement = element;
+		container.appendChild(element);
+		this.#dispatchScrollRequest();
+	}
+	render() {
+		return this.#customRenderer;
+	}
+};
+__decorate([property({ attribute: false })], AiToolCallComponent.prototype, "toolCall", void 0);
+__decorate([property({ attribute: false })], AiToolCallComponent.prototype, "toolDefinition", void 0);
+AiToolCallComponent = __decorate([customElement(AiToolCallComponentTagName)], AiToolCallComponent);
+//#endregion
+export { AiToolCallComponent, AiToolCallComponentTagName };

package/dist/{ai-chatbot → ai-tool-call}/create-tool-renderer.d.ts

@@ -1,4 +1,4 @@
-import { ToolRenderFunction, ToolRenderer } from './types.js';
+import { ToolRenderFunction, ToolRenderer } from '../types/index.js';
 export interface CreateToolRendererElementConfig {
     elementTag: keyof HTMLElementTagNameMap;
 }

package/dist/ai-tool-call/create-tool-renderer.mjs

@@ -0,0 +1,10 @@
+//#region src/lib/ai-tool-call/create-tool-renderer.ts
+function isElementConfig(config) {
+	return "elementTag" in config;
+}
+function createToolRenderer(config) {
+	if (isElementConfig(config)) return { elementTag: config.elementTag };
+	return { render: config.render };
+}
+//#endregion
+export { createToolRenderer };