@tylertech/forge-ai 0.13.13 → 0.14.0-dev.1

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

@@ -11,6 +11,8 @@ declare global {
         'forge-ai-threads-search-new-chat': CustomEvent;
         'forge-ai-threads-search-rename': CustomEvent<ForgeAiThreadsSearchRenameEventData>;
         'forge-ai-threads-search-delete': CustomEvent<ForgeAiThreadsSearchDeleteEventData>;
+        'forge-ai-threads-search-delete-confirm': CustomEvent<ForgeAiThreadsSearchDeleteConfirmEventData>;
+        'forge-ai-threads-search-back': CustomEvent<void>;
     }
 }
 export interface ForgeAiThreadsSearchQueryEventData {
@@ -38,16 +40,23 @@ export interface ForgeAiThreadsSearchDeleteEventData {
     onSuccess: () => void;
     onError: (error?: string) => void;
 }
+export interface ForgeAiThreadsSearchDeleteConfirmEventData {
+    thread: Thread;
+}
 export declare const AiThreadsSearchComponentTagName: keyof HTMLElementTagNameMap;
 /**
  * @tag forge-ai-threads-search
  *
+ * @slot header-actions - Slot for a persistent action pinned to the top-right of the header, alongside the "New chat" button (e.g. a "View all" button).
+ *
  * @event {CustomEvent<ForgeAiThreadsSearchQueryEventData>} forge-ai-threads-search-query - Fired when search query changes (debounced).
  * @event {CustomEvent<ForgeAiThreadsSearchLoadMoreEventData>} forge-ai-threads-search-load-more - Fired when user scrolls near bottom for pagination.
  * @event {CustomEvent<ForgeAiThreadsSearchSelectEventData>} forge-ai-threads-search-select - Fired when a thread is selected.
  * @event {CustomEvent} forge-ai-threads-search-new-chat - Fired when new chat button clicked.
  * @event {CustomEvent<ForgeAiThreadsSearchRenameEventData>} forge-ai-threads-search-rename - Fired when thread renamed. Cancelable - if prevented, call onSuccess() to commit or onError() to revert.
  * @event {CustomEvent<ForgeAiThreadsSearchDeleteEventData>} forge-ai-threads-search-delete - Fired when thread delete confirmed. Cancelable - if prevented, call onSuccess() to commit deletion or onError() to revert.
+ * @event {CustomEvent<ForgeAiThreadsSearchDeleteConfirmEventData>} forge-ai-threads-search-delete-confirm - Fired before showing the built-in delete confirmation. Cancelable - if prevented, this component shows no confirmation UI; the host must show its own and call confirmThreadDelete() once accepted.
+ * @event {CustomEvent<void>} forge-ai-threads-search-back - Fired when the back button (shown via showBackButton) is clicked.
  *
  * @description A standalone search component for conversations/threads. Can be slotted into forge-ai-threads
  * or used independently. Supports both local and external/async search patterns via event callbacks.
@@ -57,6 +66,22 @@ export declare class AiThreadsSearchComponent extends LitElement {
     #private;
     static styles: CSSResult;
     threads: Thread[];
+    /**
+     * The title text shown in the header.
+     */
+    headerTitle: string;
+    /**
+     * Whether to show the "New chat" button in the header.
+     */
+    showNewChatButton: boolean;
+    /**
+     * Whether to show a back button before the header title.
+     */
+    showBackButton: boolean;
+    /**
+     * Whether to show the search field.
+     */
+    showSearch: boolean;
     /**
      * Total number of threads available. When set to a positive number and fewer threads
      * are loaded than the total, infinite scroll is enabled. Leave at 0 (default) to disable
@@ -67,15 +92,26 @@ export declare class AiThreadsSearchComponent extends LitElement {
     emptyMessage: string;
     showThreadRename: boolean;
     showThreadDelete: boolean;
+    /**
+     * The id of the currently selected/active thread, highlighted in the list.
+     */
+    selectedThreadId: string | null;
     private _resultsContainer;
     private _searchQuery;
     private _isSearching;
     private _searchResults;
     private _editingThreadId;
     private _hiddenThreadIds;
+    private _openMenuThreadId;
     private _searchTimeout?;
     firstUpdated(): void;
     updated(changedProperties: Map<string, unknown>): void;
     disconnectedCallback(): void;
+    /**
+     * 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: Thread): void;
     render(): TemplateResult;
 }

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

@@ -1,6 +1,7 @@
 import { unsafeCSS, LitElement, html } from "lit";
 import { property, query, state, customElement } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
+import { formatRelativeTime } from "../utils.mjs";
 import { DeleteThreadController } from "../utils/delete-thread-controller.mjs";
 import { InfiniteScrollController } from "../utils/infinite-scroll-controller.mjs";
 import "../ai-thread-actions-menu/ai-thread-actions-menu.mjs";
@@ -25,48 +26,31 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 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 __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _deleteThreadController, _infiniteScrollController, _AiThreadsSearchComponent_instances, shouldEnablePagination_get, handleSearchInput_fn, performSearch_fn, loadMore_fn, handleThreadSelect_fn, handleNewChatClick_fn, handleMenuRename_fn, handleMenuDeleteClick_fn, handleEditSave_fn, handleEditCancel_fn, formatRelativeTime_fn, handleClearSearch_fn, displayedThreads_get, header_get, searchField_get, renderThreadItem_fn, resultsList_get;
+var _deleteThreadController, _infiniteScrollController, _AiThreadsSearchComponent_instances, shouldEnablePagination_get, handleSearchInput_fn, performSearch_fn, loadMore_fn, handleThreadSelect_fn, handleNewChatClick_fn, handleBackClick_fn, handleMenuRename_fn, handleMenuOpen_fn, handleMenuClose_fn, handleMenuDeleteClick_fn, confirmDelete_fn, handleEditSave_fn, handleEditCancel_fn, handleClearSearch_fn, displayedThreads_get, header_get, searchField_get, renderThreadItem_fn, resultsList_get;
 const AiThreadsSearchComponentTagName = "forge-ai-threads-search";
 let AiThreadsSearchComponent = class extends LitElement {
   constructor() {
     super(...arguments);
     __privateAdd(this, _AiThreadsSearchComponent_instances);
     this.threads = [];
+    this.headerTitle = "All chats";
+    this.showNewChatButton = true;
+    this.showBackButton = false;
+    this.showSearch = true;
     this.totalChats = 0;
     this.placeholder = "Search chats...";
     this.emptyMessage = "No chats found";
     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;
     __privateAdd(this, _deleteThreadController, new DeleteThreadController(this, {
-      onConfirm: (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
-        });
-        const dispatched = this.dispatchEvent(event);
-        if (dispatched) {
-          this._hiddenThreadIds.add(thread.id);
-          this.requestUpdate();
-        }
-      }
+      onConfirm: (thread) => __privateMethod(this, _AiThreadsSearchComponent_instances, confirmDelete_fn).call(this, thread)
     }));
     __privateAdd(this, _infiniteScrollController, new InfiniteScrollController(this, {
       onLoadMore: () => __privateMethod(this, _AiThreadsSearchComponent_instances, loadMore_fn).call(this)
@@ -93,9 +77,19 @@ let AiThreadsSearchComponent = class extends LitElement {
     super.disconnectedCallback();
     clearTimeout(this._searchTimeout);
   }
+  /**
+   * 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) {
+    __privateMethod(this, _AiThreadsSearchComponent_instances, confirmDelete_fn).call(this, thread);
+  }
   render() {
     return html`
-      <div class="threads-search-container">${__privateGet(this, _AiThreadsSearchComponent_instances, header_get)} ${__privateGet(this, _AiThreadsSearchComponent_instances, searchField_get)} ${__privateGet(this, _AiThreadsSearchComponent_instances, resultsList_get)}</div>
+      <div class="threads-search-container">
+        ${__privateGet(this, _AiThreadsSearchComponent_instances, header_get)} ${when(this.showSearch, () => __privateGet(this, _AiThreadsSearchComponent_instances, searchField_get))} ${__privateGet(this, _AiThreadsSearchComponent_instances, resultsList_get)}
+      </div>
       ${__privateGet(this, _deleteThreadController).template}
     `;
   }
@@ -180,8 +174,22 @@ handleNewChatClick_fn = function() {
   });
   this.dispatchEvent(event);
 };
+handleBackClick_fn = function() {
+  const event = new CustomEvent("forge-ai-threads-search-back", {
+    bubbles: true,
+    composed: true
+  });
+  this.dispatchEvent(event);
+};
 handleMenuRename_fn = function(e) {
   this._editingThreadId = e.detail.id;
+  this._openMenuThreadId = null;
+};
+handleMenuOpen_fn = function(e) {
+  this._openMenuThreadId = e.detail.id;
+};
+handleMenuClose_fn = function() {
+  this._openMenuThreadId = null;
 };
 handleMenuDeleteClick_fn = function(e) {
   const { id } = e.detail;
@@ -189,7 +197,43 @@ handleMenuDeleteClick_fn = function(e) {
   if (!thread) {
     return;
   }
-  __privateGet(this, _deleteThreadController).show(thread);
+  const event = new CustomEvent(
+    "forge-ai-threads-search-delete-confirm",
+    {
+      detail: { thread },
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    }
+  );
+  const dispatched = this.dispatchEvent(event);
+  if (dispatched) {
+    __privateGet(this, _deleteThreadController).show(thread);
+  }
+};
+confirmDelete_fn = function(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
+  });
+  const dispatched = this.dispatchEvent(event);
+  if (dispatched) {
+    this._hiddenThreadIds.add(thread.id);
+    this.requestUpdate();
+  }
 };
 handleEditSave_fn = function(e) {
   const { id, oldTitle, newTitle } = e.detail;
@@ -224,32 +268,6 @@ handleEditSave_fn = function(e) {
 handleEditCancel_fn = function() {
   this._editingThreadId = null;
 };
-formatRelativeTime_fn = function(dateString) {
-  const date = new Date(dateString);
-  const now = /* @__PURE__ */ new Date();
-  const diffMs = now.getTime() - date.getTime();
-  const diffMinutes = Math.floor(diffMs / (1e3 * 60));
-  const diffHours = Math.floor(diffMs / (1e3 * 60 * 60));
-  const diffDays = Math.floor(diffMs / (1e3 * 60 * 60 * 24));
-  const diffWeeks = Math.floor(diffDays / 7);
-  const diffMonths = Math.floor(diffDays / 30);
-  const diffYears = Math.floor(diffDays / 365);
-  if (diffYears >= 1) {
-    return `${diffYears}y ago`;
-  } else if (diffMonths >= 1) {
-    return `${diffMonths}mo ago`;
-  } else if (diffWeeks >= 1) {
-    return `${diffWeeks}w ago`;
-  } else if (diffDays >= 1) {
-    return `${diffDays}d ago`;
-  } else if (diffHours >= 1) {
-    return `${diffHours}h ago`;
-  } else if (diffMinutes >= 1) {
-    return `${diffMinutes}m ago`;
-  } else {
-    return "Just now";
-  }
-};
 handleClearSearch_fn = function() {
   this._searchQuery = "";
   this._searchResults = [];
@@ -263,21 +281,45 @@ displayedThreads_get = function() {
 header_get = function() {
   return html`
       <div class="header">
-        <div class="header-title">
-          <span class="title">All chats</span>
+        <div class="header-start">
+          ${when(
+    this.showBackButton,
+    () => html`
+              <button
+                class="back-button forge-icon-button forge-icon-button--medium"
+                @click=${__privateMethod(this, _AiThreadsSearchComponent_instances, handleBackClick_fn)}
+                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=${__privateMethod(this, _AiThreadsSearchComponent_instances, handleNewChatClick_fn)}>
+                <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>
-        <button class="forge-button new-chat-button" @click=${__privateMethod(this, _AiThreadsSearchComponent_instances, handleNewChatClick_fn)}>
-          <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>
       </div>
     `;
 };
 searchField_get = function() {
   return html`
-      <div class="forge-field forge-field--rounded forge-field--small search-field">
+      <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
@@ -289,7 +331,7 @@ searchField_get = function() {
           .value=${this._searchQuery}
           placeholder=${this.placeholder}
           @input=${__privateMethod(this, _AiThreadsSearchComponent_instances, handleSearchInput_fn)} />
-        ${when(this._isSearching, () => html`<forge-ai-spinner size="small"></forge-ai-spinner>`)}
+        ${when(this._isSearching, () => html`<forge-ai-spinner size="extra-small"></forge-ai-spinner>`)}
         ${when(
     this._searchQuery.length,
     () => html`
@@ -306,8 +348,12 @@ searchField_get = function() {
 };
 renderThreadItem_fn = function(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" role="listitem">
+      <li
+        class="forge-list-item ${isSelected ? "forge-list-item--selected" : ""} ${hasOpenMenu ? "forge-list-item--menu-open" : ""}"
+        role="listitem">
         ${when(
     isEditing,
     () => html`
@@ -319,8 +365,10 @@ renderThreadItem_fn = function(thread) {
             </forge-ai-edit-thread>
           `,
     () => html`
-            <button type="button" @click=${() => __privateMethod(this, _AiThreadsSearchComponent_instances, handleThreadSelect_fn).call(this, thread)}>${thread.title}</button>
-            <span class="thread-time">${__privateMethod(this, _AiThreadsSearchComponent_instances, formatRelativeTime_fn).call(this, thread.createdAt)}</span>
+            <button type="button" aria-selected=${isSelected} @click=${() => __privateMethod(this, _AiThreadsSearchComponent_instances, handleThreadSelect_fn).call(this, thread)}>
+              ${thread.title}
+            </button>
+            <span class="thread-time">${formatRelativeTime(thread.createdAt)}</span>
             ${when(
       this.showThreadRename || this.showThreadDelete,
       () => html`
@@ -330,7 +378,9 @@ renderThreadItem_fn = function(thread) {
                     ?show-rename=${this.showThreadRename}
                     ?show-delete=${this.showThreadDelete}
                     @forge-ai-thread-actions-menu-rename=${__privateMethod(this, _AiThreadsSearchComponent_instances, handleMenuRename_fn)}
-                    @forge-ai-thread-actions-menu-delete-click=${__privateMethod(this, _AiThreadsSearchComponent_instances, handleMenuDeleteClick_fn)}>
+                    @forge-ai-thread-actions-menu-delete-click=${__privateMethod(this, _AiThreadsSearchComponent_instances, handleMenuDeleteClick_fn)}
+                    @forge-ai-thread-actions-menu-open=${__privateMethod(this, _AiThreadsSearchComponent_instances, handleMenuOpen_fn)}
+                    @forge-ai-thread-actions-menu-close=${__privateMethod(this, _AiThreadsSearchComponent_instances, handleMenuClose_fn)}>
                   </forge-ai-thread-actions-menu>
                 </div>
               `
@@ -372,6 +422,18 @@ AiThreadsSearchComponent.styles = unsafeCSS(styles);
 __decorateClass([
   property({ type: Array })
 ], AiThreadsSearchComponent.prototype, "threads", 2);
+__decorateClass([
+  property({ type: String, attribute: "header-title" })
+], AiThreadsSearchComponent.prototype, "headerTitle", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-new-chat-button" })
+], AiThreadsSearchComponent.prototype, "showNewChatButton", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-back-button" })
+], AiThreadsSearchComponent.prototype, "showBackButton", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-search" })
+], AiThreadsSearchComponent.prototype, "showSearch", 2);
 __decorateClass([
   property({ type: Number, attribute: "total-chats" })
 ], AiThreadsSearchComponent.prototype, "totalChats", 2);
@@ -387,6 +449,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, attribute: "show-thread-delete" })
 ], AiThreadsSearchComponent.prototype, "showThreadDelete", 2);
+__decorateClass([
+  property({ type: String, attribute: "selected-thread-id" })
+], AiThreadsSearchComponent.prototype, "selectedThreadId", 2);
 __decorateClass([
   query(".results-container")
 ], AiThreadsSearchComponent.prototype, "_resultsContainer", 2);
@@ -405,6 +470,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], AiThreadsSearchComponent.prototype, "_hiddenThreadIds", 2);
+__decorateClass([
+  state()
+], AiThreadsSearchComponent.prototype, "_openMenuThreadId", 2);
 AiThreadsSearchComponent = __decorateClass([
   customElement(AiThreadsSearchComponentTagName)
 ], AiThreadsSearchComponent);