@tylertech/forge-ai 0.14.0 → 0.15.1

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

@@ -1,4 +1,4 @@
-import { unsafeCSS, LitElement, html } from "lit";
+import { unsafeCSS, LitElement, html, nothing } from "lit";
 import { property, query, state, customElement } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import { formatRelativeTime } from "../utils.mjs";
@@ -6,6 +6,7 @@ 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";
 import "../ai-edit-thread/ai-edit-thread.mjs";
+import "../ai-error-message/ai-error-message.mjs";
 import "../ai-spinner/ai-spinner.mjs";
 import "../ai-modal/ai-modal.mjs";
 import styles from "./ai-threads-search.scss.mjs";
@@ -25,8 +26,9 @@ var __decorateClass = (decorators, target, key, kind) => {
 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 __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 _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;
+var _focusRowIndexAfterLoad, _deleteThreadController, _infiniteScrollController, _AiThreadsSearchComponent_instances, shouldEnablePagination_get, handleSearchInput_fn, performSearch_fn, handleLoadMoreClick_fn, focusRow_fn, loadMore_fn, handleThreadSelect_fn, handleNewChatClick_fn, handleBackClick_fn, handleRetryClick_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, errorState_get, compactError_get, errorPlacement_get, emptyState_get, listFooter_get, resultsList_get;
 const AiThreadsSearchComponentTagName = "forge-ai-threads-search";
 let AiThreadsSearchComponent = class extends LitElement {
   constructor() {
@@ -38,8 +40,7 @@ let AiThreadsSearchComponent = class extends LitElement {
     this.showBackButton = false;
     this.showSearch = true;
     this.totalChats = 0;
-    this.placeholder = "Search chats...";
-    this.emptyMessage = "No chats found";
+    this.placeholder = "Find a chat";
     this.showThreadRename = false;
     this.showThreadDelete = false;
     this.selectedThreadId = null;
@@ -49,6 +50,7 @@ let AiThreadsSearchComponent = class extends LitElement {
     this._editingThreadId = null;
     this._hiddenThreadIds = /* @__PURE__ */ new Set();
     this._openMenuThreadId = null;
+    __privateAdd(this, _focusRowIndexAfterLoad, null);
     __privateAdd(this, _deleteThreadController, new DeleteThreadController(this, {
       onConfirm: (thread) => __privateMethod(this, _AiThreadsSearchComponent_instances, confirmDelete_fn).call(this, thread)
     }));
@@ -85,15 +87,38 @@ let AiThreadsSearchComponent = class extends LitElement {
   confirmThreadDelete(thread) {
     __privateMethod(this, _AiThreadsSearchComponent_instances, confirmDelete_fn).call(this, thread);
   }
+  /**
+   * 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;
+    __privateSet(this, _focusRowIndexAfterLoad, null);
+    __privateGet(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() {
+    const target = this._searchInput ?? this.shadowRoot?.querySelector(".forge-list-item > button") ?? this.shadowRoot?.querySelector("button");
+    target?.focus();
+  }
   render() {
     return html`
       <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)}
+        ${__privateGet(this, _AiThreadsSearchComponent_instances, header_get)} ${when(this.showSearch, () => __privateGet(this, _AiThreadsSearchComponent_instances, searchField_get))}
+        ${when(__privateGet(this, _AiThreadsSearchComponent_instances, errorPlacement_get) === "above-list", () => __privateGet(this, _AiThreadsSearchComponent_instances, compactError_get))} ${__privateGet(this, _AiThreadsSearchComponent_instances, resultsList_get)}
       </div>
       ${__privateGet(this, _deleteThreadController).template}
     `;
   }
 };
+_focusRowIndexAfterLoad = /* @__PURE__ */ new WeakMap();
 _deleteThreadController = /* @__PURE__ */ new WeakMap();
 _infiniteScrollController = /* @__PURE__ */ new WeakMap();
 _AiThreadsSearchComponent_instances = /* @__PURE__ */ new WeakSet();
@@ -114,6 +139,7 @@ handleSearchInput_fn = function(e) {
 };
 performSearch_fn = function() {
   const searchQuery = this._searchQuery.trim();
+  __privateSet(this, _focusRowIndexAfterLoad, null);
   __privateGet(this, _infiniteScrollController).reset();
   const searchEvent = new CustomEvent("forge-ai-threads-search-query", {
     detail: {
@@ -137,11 +163,25 @@ performSearch_fn = function() {
     __privateGet(this, _infiniteScrollController).setHasMore(false);
   }
 };
+handleLoadMoreClick_fn = function() {
+  if (__privateGet(this, _infiniteScrollController).isLoadingMore) {
+    return;
+  }
+  __privateSet(this, _focusRowIndexAfterLoad, __privateGet(this, _AiThreadsSearchComponent_instances, displayedThreads_get).length);
+  __privateGet(this, _infiniteScrollController).setLoadingState(true);
+  __privateMethod(this, _AiThreadsSearchComponent_instances, loadMore_fn).call(this);
+};
+focusRow_fn = function(index) {
+  const rows = this.shadowRoot?.querySelectorAll(".forge-list-item > button") ?? [];
+  rows[index]?.focus();
+};
 loadMore_fn = function() {
   const loadMoreEvent = new CustomEvent("forge-ai-threads-search-load-more", {
     detail: {
       query: this._searchQuery,
       appendResults: (results) => {
+        const focusRowIndex = __privateGet(this, _focusRowIndexAfterLoad);
+        __privateSet(this, _focusRowIndexAfterLoad, null);
         if (results.length === 0) {
           __privateGet(this, _infiniteScrollController).setHasMore(false);
         } else {
@@ -150,6 +190,9 @@ loadMore_fn = function() {
           } else {
             this.threads = [...this.threads, ...results];
           }
+          if (focusRowIndex !== null) {
+            void this.updateComplete.then(() => __privateMethod(this, _AiThreadsSearchComponent_instances, focusRow_fn).call(this, focusRowIndex));
+          }
         }
         __privateGet(this, _infiniteScrollController).setLoadingState(false);
       }
@@ -181,6 +224,17 @@ handleBackClick_fn = function() {
   });
   this.dispatchEvent(event);
 };
+handleRetryClick_fn = function() {
+  if (this._searchQuery.trim()) {
+    __privateMethod(this, _AiThreadsSearchComponent_instances, performSearch_fn).call(this);
+    return;
+  }
+  const event = new CustomEvent("forge-ai-threads-search-retry", {
+    bubbles: true,
+    composed: true
+  });
+  this.dispatchEvent(event);
+};
 handleMenuRename_fn = function(e) {
   this._editingThreadId = e.detail.id;
   this._openMenuThreadId = null;
@@ -269,10 +323,8 @@ handleEditCancel_fn = function() {
   this._editingThreadId = null;
 };
 handleClearSearch_fn = function() {
-  this._searchQuery = "";
-  this._searchResults = [];
-  this._isSearching = false;
-  __privateGet(this, _infiniteScrollController).reset();
+  this.resetSearch();
+  this._searchInput?.focus();
 };
 displayedThreads_get = function() {
   const threads = this._searchQuery ? this._searchResults : this.threads;
@@ -326,16 +378,22 @@ searchField_get = function() {
             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"
-          .value=${this._searchQuery}
+          aria-label="Search"
           placeholder=${this.placeholder}
+          .value=${this._searchQuery}
           @input=${__privateMethod(this, _AiThreadsSearchComponent_instances, handleSearchInput_fn)} />
         ${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" @click=${__privateMethod(this, _AiThreadsSearchComponent_instances, handleClearSearch_fn)}>
+            <button
+              class="forge-icon-button forge-icon-button--small"
+              type="button"
+              aria-label="Clear search"
+              @click=${__privateMethod(this, _AiThreadsSearchComponent_instances, handleClearSearch_fn)}>
               <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" />
@@ -365,7 +423,10 @@ renderThreadItem_fn = function(thread) {
             </forge-ai-edit-thread>
           `,
     () => html`
-            <button type="button" aria-selected=${isSelected} @click=${() => __privateMethod(this, _AiThreadsSearchComponent_instances, handleThreadSelect_fn).call(this, thread)}>
+            <button
+              type="button"
+              aria-current=${isSelected ? "true" : nothing}
+              @click=${() => __privateMethod(this, _AiThreadsSearchComponent_instances, handleThreadSelect_fn).call(this, thread)}>
               ${thread.title}
             </button>
             <span class="thread-time">${formatRelativeTime(thread.createdAt)}</span>
@@ -390,31 +451,87 @@ renderThreadItem_fn = function(thread) {
       </li>
     `;
 };
+errorState_get = function() {
+  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=${__privateMethod(this, _AiThreadsSearchComponent_instances, handleRetryClick_fn)}>
+            Retry
+          </button>
+        </forge-ai-error-message>
+      </div>
+    `;
+};
+compactError_get = function() {
+  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=${__privateMethod(this, _AiThreadsSearchComponent_instances, handleRetryClick_fn)}>
+            Retry
+          </button>
+        </div>
+      </forge-ai-error-message>
+    `;
+};
+errorPlacement_get = function() {
+  if (!this.errorMessage || __privateGet(this, _AiThreadsSearchComponent_instances, displayedThreads_get).length === 0) {
+    return "none";
+  }
+  return __privateGet(this, _infiniteScrollController).isLoadingMore ? "list-footer" : "above-list";
+};
+emptyState_get = function() {
+  const message = this._searchQuery.trim() ? "No chats found" : "No chats yet";
+  return html`
+      <div class="empty-state">
+        <p>${message}</p>
+      </div>
+    `;
+};
+listFooter_get = function() {
+  if (__privateGet(this, _AiThreadsSearchComponent_instances, errorPlacement_get) === "list-footer") {
+    return __privateGet(this, _AiThreadsSearchComponent_instances, compactError_get);
+  }
+  if (__privateGet(this, _infiniteScrollController).isLoadingMore) {
+    return html`
+        <div class="loading-more-indicator">
+          <forge-ai-spinner></forge-ai-spinner>
+        </div>
+      `;
+  }
+  if (__privateGet(this, _AiThreadsSearchComponent_instances, shouldEnablePagination_get) && __privateGet(this, _infiniteScrollController).hasMoreResults) {
+    return html`
+        <div class="loading-more-indicator">
+          <button
+            type="button"
+            class="forge-button forge-button--dense load-more-button"
+            @click=${__privateMethod(this, _AiThreadsSearchComponent_instances, handleLoadMoreClick_fn)}>
+            Load more
+          </button>
+        </div>
+      `;
+  }
+  return nothing;
+};
 resultsList_get = function() {
   const displayThreads = __privateGet(this, _AiThreadsSearchComponent_instances, displayedThreads_get);
+  if (displayThreads.length === 0) {
+    return html`<div class="results-container">${this.errorMessage ? __privateGet(this, _AiThreadsSearchComponent_instances, errorState_get) : __privateGet(this, _AiThreadsSearchComponent_instances, emptyState_get)}</div>`;
+  }
   return html`
       <div class="results-container">
-        ${when(
-    displayThreads.length === 0,
-    () => html`
-            <div class="empty-state">
-              <p>${this.emptyMessage}</p>
-            </div>
-          `,
-    () => html`
-            <ul class="forge-list forge-list--dense forge-list--navlist" role="list">
-              ${displayThreads.map((thread) => __privateMethod(this, _AiThreadsSearchComponent_instances, renderThreadItem_fn).call(this, thread))}
-            </ul>
-            ${when(
-      __privateGet(this, _infiniteScrollController).isLoadingMore,
-      () => html`
-                <div class="loading-more-indicator">
-                  <forge-ai-spinner></forge-ai-spinner>
-                </div>
-              `
-    )}
-          `
-  )}
+        <ul class="forge-list forge-list--dense forge-list--navlist" role="list">
+          ${displayThreads.map((thread) => __privateMethod(this, _AiThreadsSearchComponent_instances, renderThreadItem_fn).call(this, thread))}
+        </ul>
+        ${__privateGet(this, _AiThreadsSearchComponent_instances, listFooter_get)}
       </div>
     `;
 };
@@ -441,8 +558,8 @@ __decorateClass([
   property({ type: String })
 ], AiThreadsSearchComponent.prototype, "placeholder", 2);
 __decorateClass([
-  property({ type: String, attribute: "empty-message" })
-], AiThreadsSearchComponent.prototype, "emptyMessage", 2);
+  property({ type: String, attribute: "error-message" })
+], AiThreadsSearchComponent.prototype, "errorMessage", 2);
 __decorateClass([
   property({ type: Boolean, attribute: "show-thread-rename" })
 ], AiThreadsSearchComponent.prototype, "showThreadRename", 2);
@@ -455,6 +572,9 @@ __decorateClass([
 __decorateClass([
   query(".results-container")
 ], AiThreadsSearchComponent.prototype, "_resultsContainer", 2);
+__decorateClass([
+  query("#threads-search-input")
+], AiThreadsSearchComponent.prototype, "_searchInput", 2);
 __decorateClass([
   state()
 ], AiThreadsSearchComponent.prototype, "_searchQuery", 2);