@tylertech/forge-ai 0.13.1 → 0.13.2

package/dist/ai-thread-actions-menu/ai-thread-actions-menu.mjs

@@ -0,0 +1,136 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+import "../ai-dropdown-menu/ai-dropdown-menu.mjs";
+import "../ai-dropdown-menu/ai-dropdown-menu-item.mjs";
+import styles from "./ai-thread-actions-menu.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 __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 _AiThreadActionsMenuComponent_instances, handleMenuOpen_fn, handleMenuClose_fn, handleMenuKeyDown_fn, handleMenuSelect_fn, handleRenameClick_fn, handleDeleteClick_fn;
+const AiThreadActionsMenuComponentTagName = "forge-ai-thread-actions-menu";
+let AiThreadActionsMenuComponent = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _AiThreadActionsMenuComponent_instances);
+    this.showRename = false;
+    this.showDelete = false;
+  }
+  render() {
+    return html`
+      <forge-ai-dropdown-menu
+        variant="icon-button-squared"
+        density="small"
+        selection-mode="none"
+        popover-placement="bottom-start"
+        @keydown=${__privateMethod(this, _AiThreadActionsMenuComponent_instances, handleMenuKeyDown_fn)}
+        @forge-ai-dropdown-menu-open=${__privateMethod(this, _AiThreadActionsMenuComponent_instances, handleMenuOpen_fn)}
+        @forge-ai-dropdown-menu-close=${__privateMethod(this, _AiThreadActionsMenuComponent_instances, handleMenuClose_fn)}
+        @click=${__privateMethod(this, _AiThreadActionsMenuComponent_instances, handleMenuSelect_fn)}>
+        <slot name="trigger-icon" slot="trigger-content">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon">
+            <path
+              d="M12 16a2 2 0 0 1 2 2 2 2 0 0 1-2 2 2 2 0 0 1-2-2 2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2 2 2 0 0 1-2 2 2 2 0 0 1-2-2 2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2 2 2 0 0 1-2 2 2 2 0 0 1-2-2 2 2 0 0 1 2-2" />
+          </svg>
+        </slot>
+
+        ${when(
+      this.showRename,
+      () => html`
+            <forge-ai-dropdown-menu-item value="rename" @click=${__privateMethod(this, _AiThreadActionsMenuComponent_instances, handleRenameClick_fn)}>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" slot="start" class="forge-icon">
+                <path
+                  d="m15 16-4 4h10v-4zm-2.94-8.81L3 16.25V20h3.75l9.06-9.06zm6.65.85c.39-.39.39-1.04 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z" />
+              </svg>
+              <span>Rename</span>
+            </forge-ai-dropdown-menu-item>
+          `
+    )}
+        ${when(
+      this.showDelete,
+      () => html`
+            <forge-ai-dropdown-menu-item value="delete" @click=${__privateMethod(this, _AiThreadActionsMenuComponent_instances, handleDeleteClick_fn)}>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" slot="start" class="forge-icon">
+                <path d="M19 4h-3.5l-1-1h-5l-1 1H5v2h14M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6z" />
+              </svg>
+              <span>Delete</span>
+            </forge-ai-dropdown-menu-item>
+          `
+    )}
+      </forge-ai-dropdown-menu>
+    `;
+  }
+};
+_AiThreadActionsMenuComponent_instances = /* @__PURE__ */ new WeakSet();
+handleMenuOpen_fn = function() {
+  const event = new CustomEvent("forge-ai-thread-actions-menu-open", {
+    detail: { id: this.thread.id },
+    bubbles: true,
+    composed: true
+  });
+  this.dispatchEvent(event);
+};
+handleMenuClose_fn = function() {
+  const event = new CustomEvent("forge-ai-thread-actions-menu-close", {
+    bubbles: true,
+    composed: true
+  });
+  this.dispatchEvent(event);
+};
+handleMenuKeyDown_fn = function(evt) {
+  if (evt.key === "Escape") {
+    evt.stopPropagation();
+  }
+};
+handleMenuSelect_fn = function(evt) {
+  evt.stopPropagation();
+};
+handleRenameClick_fn = function() {
+  const event = new CustomEvent("forge-ai-thread-actions-menu-rename", {
+    detail: { id: this.thread.id },
+    bubbles: true,
+    composed: true
+  });
+  this.dispatchEvent(event);
+};
+handleDeleteClick_fn = function() {
+  const event = new CustomEvent(
+    "forge-ai-thread-actions-menu-delete-click",
+    {
+      detail: { id: this.thread.id },
+      bubbles: true,
+      composed: true
+    }
+  );
+  this.dispatchEvent(event);
+};
+AiThreadActionsMenuComponent.styles = unsafeCSS(styles);
+__decorateClass([
+  property({ type: Object })
+], AiThreadActionsMenuComponent.prototype, "thread", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-rename" })
+], AiThreadActionsMenuComponent.prototype, "showRename", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-delete" })
+], AiThreadActionsMenuComponent.prototype, "showDelete", 2);
+AiThreadActionsMenuComponent = __decorateClass([
+  customElement(AiThreadActionsMenuComponentTagName)
+], AiThreadActionsMenuComponent);
+export {
+  AiThreadActionsMenuComponent,
+  AiThreadActionsMenuComponentTagName
+};

package/dist/ai-thread-actions-menu/ai-thread-actions-menu.scss.mjs

@@ -0,0 +1,4 @@
+const styles = "/**\n * @license\n * Copyright Tyler Technologies, Inc.\n * License: Apache-2.0\n */\n.forge-icon {\n  --_icon-color:var(--forge-icon-color, currentColor);\n  --_icon-size:var(--forge-icon-size, 1em);\n  --_icon-width:var(--forge-icon-width, var(--_icon-size));\n  --_icon-height:var(--forge-icon-height, var(--_icon-size));\n  --_icon-font-size:var(--forge-icon-font-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));\n}\n\nimg.forge-icon, svg.forge-icon {\n  display: inline-block;\n  box-sizing: content-box;\n  contain: content;\n  font-size: var(--_icon-font-size);\n  display: inline-block;\n}\n\nimg.forge-icon {\n  width: var(--_icon-width);\n  height: var(--_icon-height);\n}\n\nsvg {\n  width: var(--_icon-width);\n  height: var(--_icon-height);\n  display: block;\n  fill: var(--_icon-color);\n  stroke: var(--_icon-color);\n  stroke-width: 0;\n}\n\n:host {\n  display: flex;\n}\n\nforge-ai-dropdown-menu {\n  display: flex;\n}\n\n.forge-icon {\n  color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n}";
+export {
+  styles as default
+};

package/dist/ai-thread-actions-menu/index.d.ts

@@ -0,0 +1 @@
+export * from './ai-thread-actions-menu';

package/dist/ai-thread-actions-menu/index.mjs

@@ -0,0 +1,5 @@
+import { AiThreadActionsMenuComponent, AiThreadActionsMenuComponentTagName } from "./ai-thread-actions-menu.mjs";
+export {
+  AiThreadActionsMenuComponent,
+  AiThreadActionsMenuComponentTagName
+};

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

@@ -6,48 +6,77 @@ declare global {
     interface HTMLElementEventMap {
         'forge-ai-threads-select': CustomEvent<ForgeAiThreadsSelectEventData>;
         'forge-ai-threads-new-chat': CustomEvent;
-        'forge-ai-threads-clear-history': CustomEvent;
+        'forge-ai-threads-search-chats': CustomEvent;
+        'forge-ai-threads-load-more': CustomEvent<ForgeAiThreadsLoadMoreEventData>;
+        'forge-ai-threads-rename': CustomEvent<ForgeAiThreadsRenameEventData>;
+        'forge-ai-threads-delete': CustomEvent<ForgeAiThreadsDeleteEventData>;
     }
 }
 export interface Thread {
     id: string;
     title: string;
-    time: string;
-    date: Date;
+    createdAt: string;
+    updatedAt?: string;
+    messageCount?: number;
 }
 export interface ForgeAiThreadsSelectEventData {
     id: string;
     title: string;
 }
+export interface ForgeAiThreadsLoadMoreEventData {
+    appendResults: (results: Thread[]) => void;
+}
+export interface ForgeAiThreadsRenameEventData {
+    id: string;
+    oldTitle: string;
+    newTitle: string;
+    onSuccess: () => void;
+    onError: (error?: string) => void;
+}
+export interface ForgeAiThreadsDeleteEventData {
+    id: string;
+    thread: Thread;
+    onSuccess: () => void;
+    onError: (error?: string) => void;
+}
 export declare const AiThreadsComponentTagName: keyof HTMLElementTagNameMap;
 /**
  * @tag forge-ai-threads
  *
- * @slot - Default slot for chatbot component
+ * @slot - Default slot for chatbot launcher component
  *
  * @event {CustomEvent<ForgeAiThreadsSelectEventData>} forge-ai-threads-select - Fired when a thread is selected.
  * @event {CustomEvent} forge-ai-threads-new-chat - Fired when the new chat button is clicked.
- * @event {CustomEvent} forge-ai-threads-clear-history - Fired when the clear history button is clicked.
+ * @event {CustomEvent} forge-ai-threads-search-chats - Fired when the search chats button is clicked.
+ * @event {CustomEvent<ForgeAiThreadsLoadMoreEventData>} forge-ai-threads-load-more - Fired when scrolling near bottom. Call appendResults([]) to signal end.
+ * @event {CustomEvent<ForgeAiThreadsRenameEventData>} forge-ai-threads-rename - Fired when thread renamed. Cancelable - if prevented, call onSuccess() to commit or onError() to revert.
+ * @event {CustomEvent<ForgeAiThreadsDeleteEventData>} forge-ai-threads-delete - Fired when thread delete confirmed. Cancelable - if prevented, call onSuccess() to commit deletion or onError() to revert.
  *
- * @description A form factor component that positions a slotted chatbot alongside a thread navigation drawer.
- * Manages thread list and selection while delegating chat functionality to the slotted chatbot.
- * All chatbot events bubble through unchanged.
+ * @description A form factor component that positions a slotted chatbot launcher alongside a thread navigation drawer.
+ * Manages thread list and selection while delegating chat functionality to the slotted launcher.
+ * All launcher events bubble through unchanged.
  */
 export declare class AiThreadsComponent extends LitElement {
     #private;
     static styles: CSSResult;
     /** Array of threads to display in the navigation list */
     threads: Thread[];
-    /** Current filter value for searching threads */
-    private _filterValue;
+    /**
+     * 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
+     * infinite scroll entirely. Useful when all data is loaded upfront.
+     */
+    totalChats: number;
+    showThreadRename: boolean;
+    showThreadDelete: boolean;
+    private _threadListContainer;
     /** Currently selected thread ID */
     private _selectedThreadId;
-    private _slottedChatbots;
-    private _handleFilterInput;
+    private _editingThreadId;
+    private _hiddenThreadIds;
+    private _openMenuThreadId;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
     private _handleThreadSelect;
-    private _handleNewChatClick;
-    private _handleChatbotExpand;
-    private _handleChatbotMinimize;
-    private _handleClearHistoryClick;
     render(): TemplateResult;
 }

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

@@ -1,5 +1,13 @@
-import { unsafeCSS, LitElement, html } from "lit";
-import { property, state, queryAssignedElements, customElement } from "lit/decorators.js";
+import { unsafeCSS, LitElement, html, nothing } from "lit";
+import { property, query, state, customElement } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+import { DeleteThreadController } from "../utils/delete-thread-controller.mjs";
+import { InfiniteScrollController } from "../utils/infinite-scroll-controller.mjs";
+import "../ai-icon/ai-icon.mjs";
+import "../ai-spinner/ai-spinner.mjs";
+import "../ai-thread-actions-menu/ai-thread-actions-menu.mjs";
+import "../ai-edit-thread/ai-edit-thread.mjs";
+import "../ai-modal/ai-modal.mjs";
 import styles from "./ai-threads.scss.mjs";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -17,39 +25,91 @@ 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 _AiThreadsComponent_instances, chatbot_get, filteredThreads_get, _searchField, threadList_get, threadActions_get, threadListContainer_get, newChatButton_get, drawer_get, _slotContent;
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _deleteThreadController, _infiniteScrollController, _AiThreadsComponent_instances, shouldEnablePagination_get, handleNewChatClick_fn, handleSearchChatsClick_fn, handleLoadMore_fn, handleMenuRename_fn, handleMenuOpen_fn, handleMenuClose_fn, handleMenuDeleteClick_fn, handleEditSave_fn, handleEditCancel_fn, threadList_get, _chatActionsList, _chatsLabel, loadingMoreIndicator_get, threadListContainer_get, drawer_get, _slotContent;
 const AiThreadsComponentTagName = "forge-ai-threads";
 let AiThreadsComponent = class extends LitElement {
   constructor() {
     super(...arguments);
     __privateAdd(this, _AiThreadsComponent_instances);
     this.threads = [];
-    this._filterValue = "";
+    this.totalChats = 0;
+    this.showThreadRename = false;
+    this.showThreadDelete = false;
     this._selectedThreadId = null;
-    __privateAdd(this, _searchField, html`
-    <div class="forge-field">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon">
-        <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
-        type="text"
-        id="search-threads"
-        placeholder="Search threads..."
-        .value=${this._filterValue}
-        @input=${this._handleFilterInput} />
-    </div>
-  `);
-    __privateAdd(this, _slotContent, html`
-    <slot
-      @forge-ai-chatbot-expand=${this._handleChatbotExpand}
-      @forge-ai-chatbot-minimize=${this._handleChatbotMinimize}>
-    </slot>
+    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-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();
+        }
+      }
+    }));
+    __privateAdd(this, _infiniteScrollController, new InfiniteScrollController(this, {
+      onLoadMore: () => __privateMethod(this, _AiThreadsComponent_instances, handleLoadMore_fn).call(this)
+    }));
+    __privateAdd(this, _chatActionsList, html`
+    <ul class="forge-list forge-list--dense forge-list--navlist chat-actions-list" role="list">
+      <li class="forge-list-item" role="listitem">
+        <button @click=${__privateMethod(this, _AiThreadsComponent_instances, handleNewChatClick_fn)}>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon">
+            <path
+              d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m0 14H5.2L4 17.2V4h16zm-4-7v2h-3v3h-2v-3H8V9h3V6h2v3z" />
+          </svg>
+          <span>New chat</span>
+        </button>
+      </li>
+      <li class="forge-list-item" role="listitem">
+        <button @click=${__privateMethod(this, _AiThreadsComponent_instances, handleSearchChatsClick_fn)}>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon">
+            <path
+              d="M9 6v2H2V6zm0 5v2H2v-2zm9 5v2H2v-2zm1.31-4.5c.44-.68.69-1.5.69-2.39 0-2.5-2-4.5-4.5-4.5s-4.5 2-4.5 4.5 2 4.5 4.5 4.5c.87 0 1.69-.25 2.38-.68L21 16l1.39-1.39zm-3.81.11c-1.38 0-2.5-1.11-2.5-2.5s1.12-2.5 2.5-2.5a2.5 2.5 0 0 1 0 5" />
+          </svg>
+          <span>All chats</span>
+        </button>
+      </li>
+    </ul>
   `);
+    __privateAdd(this, _chatsLabel, html`<div class="chats-label">Recent chats</div>`);
+    __privateAdd(this, _slotContent, html`<slot></slot>`);
+  }
+  firstUpdated() {
+    if (__privateGet(this, _AiThreadsComponent_instances, shouldEnablePagination_get) && this._threadListContainer) {
+      __privateGet(this, _infiniteScrollController).attach(this._threadListContainer);
+    }
   }
-  _handleFilterInput(event) {
-    this._filterValue = event.target.value;
+  updated(changedProperties) {
+    if (changedProperties.has("threads") || changedProperties.has("totalChats")) {
+      __privateGet(this, _infiniteScrollController).reset();
+      if (__privateGet(this, _AiThreadsComponent_instances, shouldEnablePagination_get)) {
+        if (this._threadListContainer) {
+          __privateGet(this, _infiniteScrollController).attach(this._threadListContainer);
+        }
+      } else {
+        __privateGet(this, _infiniteScrollController).detach();
+      }
+    }
   }
   _handleThreadSelect(thread) {
     this._selectedThreadId = thread.id;
@@ -61,102 +121,185 @@ let AiThreadsComponent = class extends LitElement {
     });
     this.dispatchEvent(event);
   }
-  _handleNewChatClick() {
-    const event = new CustomEvent("forge-ai-threads-new-chat", {
-      bubbles: true,
-      composed: true,
-      cancelable: true
-    });
-    this.dispatchEvent(event);
-  }
-  _handleChatbotExpand() {
-    if (__privateGet(this, _AiThreadsComponent_instances, chatbot_get)) {
-      __privateGet(this, _AiThreadsComponent_instances, chatbot_get).expanded = !__privateGet(this, _AiThreadsComponent_instances, chatbot_get).expanded;
-    }
-  }
-  _handleChatbotMinimize() {
-    if (__privateGet(this, _AiThreadsComponent_instances, chatbot_get)) {
-      __privateGet(this, _AiThreadsComponent_instances, chatbot_get).expanded = false;
-    }
-  }
-  _handleClearHistoryClick() {
-    const event = new CustomEvent("forge-ai-threads-clear-history", {
-      bubbles: true,
-      composed: true,
-      cancelable: true
-    });
-    this.dispatchEvent(event);
-  }
   render() {
     return html`
       <div class="threads-container">
-        <div class="left">${__privateGet(this, _AiThreadsComponent_instances, drawer_get)}</div>
-        <div class="right">${__privateGet(this, _slotContent)}</div>
+        <div class="drawer">${__privateGet(this, _AiThreadsComponent_instances, drawer_get)}</div>
+        <div class="body">${__privateGet(this, _slotContent)}</div>
       </div>
+      ${__privateGet(this, _deleteThreadController).template}
     `;
   }
 };
+_deleteThreadController = /* @__PURE__ */ new WeakMap();
+_infiniteScrollController = /* @__PURE__ */ new WeakMap();
 _AiThreadsComponent_instances = /* @__PURE__ */ new WeakSet();
-chatbot_get = function() {
-  return this._slottedChatbots[0];
+shouldEnablePagination_get = function() {
+  if (this.totalChats <= 0) {
+    return false;
+  }
+  const displayedCount = this.threads.filter((t) => !this._hiddenThreadIds.has(t.id)).length;
+  return displayedCount < this.totalChats;
 };
-filteredThreads_get = function() {
-  if (!this._filterValue.trim()) {
-    return this.threads;
+handleNewChatClick_fn = function() {
+  const event = new CustomEvent("forge-ai-threads-new-chat", {
+    bubbles: true,
+    composed: true,
+    cancelable: true
+  });
+  this.dispatchEvent(event);
+};
+handleSearchChatsClick_fn = function() {
+  const event = new CustomEvent("forge-ai-threads-search-chats", {
+    bubbles: true,
+    composed: true,
+    cancelable: true
+  });
+  this.dispatchEvent(event);
+};
+handleLoadMore_fn = function() {
+  const appendResults = (results) => {
+    if (results.length === 0) {
+      __privateGet(this, _infiniteScrollController).setHasMore(false);
+    } else {
+      this.threads = [...this.threads, ...results];
+    }
+    __privateGet(this, _infiniteScrollController).setLoadingState(false);
+  };
+  const event = new CustomEvent("forge-ai-threads-load-more", {
+    detail: { appendResults },
+    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;
+  const displayedThreads = this.threads.filter((t) => !this._hiddenThreadIds.has(t.id));
+  const thread = displayedThreads.find((t) => t.id === id);
+  if (!thread) {
+    return;
+  }
+  __privateGet(this, _deleteThreadController).show(thread);
+};
+handleEditSave_fn = function(e) {
+  const { id, oldTitle, newTitle } = e.detail;
+  const displayedThreads = this.threads.filter((t) => !this._hiddenThreadIds.has(t.id));
+  const targetThread = displayedThreads.find((t) => t.id === id);
+  if (!targetThread) {
+    return;
   }
-  return this.threads.filter((thread) => thread.title.toLowerCase().includes(this._filterValue.toLowerCase()));
+  const onSuccess = () => {
+    targetThread.title = newTitle;
+    this.requestUpdate();
+  };
+  const onError = (error) => {
+    targetThread.title = oldTitle;
+    this.requestUpdate();
+    if (error) {
+      console.error("Rename failed:", error);
+    }
+  };
+  const event = new CustomEvent("forge-ai-threads-rename", {
+    detail: { id, oldTitle, newTitle, onSuccess, onError },
+    bubbles: true,
+    composed: true,
+    cancelable: true
+  });
+  const dispatched = this.dispatchEvent(event);
+  if (dispatched) {
+    targetThread.title = newTitle;
+    this.requestUpdate();
+  }
+  this._editingThreadId = null;
+};
+handleEditCancel_fn = function() {
+  this._editingThreadId = null;
 };
-_searchField = /* @__PURE__ */ new WeakMap();
 threadList_get = function() {
+  const displayedThreads = this.threads.filter((t) => !this._hiddenThreadIds.has(t.id));
   return html`
-      <ul class="forge-list forge-list--navlist">
-        ${__privateGet(this, _AiThreadsComponent_instances, filteredThreads_get).map((thread) => {
+      <ul class="forge-list forge-list--dense forge-list--navlist" role="list">
+        ${displayedThreads.map((thread) => {
     const isSelected = this._selectedThreadId === thread.id;
+    const isEditing = this._editingThreadId === thread.id;
+    const hasOpenMenu = this._openMenuThreadId === thread.id;
     return html`
-            <li class="forge-list-item ${isSelected ? "forge-list-item--selected" : ""}">
-              <button @click=${() => this._handleThreadSelect(thread)}>
-                <span>${thread.title}</span>
-                <div class="list-item-second-line">
-                  <span>${thread.date.toLocaleDateString()}</span>
-                  <span>${thread.time}</span>
-                </div>
-              </button>
+            <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=${__privateMethod(this, _AiThreadsComponent_instances, handleEditSave_fn)}
+                    @forge-ai-edit-thread-cancel=${__privateMethod(this, _AiThreadsComponent_instances, handleEditCancel_fn)}>
+                  </forge-ai-edit-thread>
+                `,
+      () => html`
+                  <button @click=${() => this._handleThreadSelect(thread)} aria-selected=${isSelected}>
+                    <span>${thread.title}</span>
+                  </button>
+                  ${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=${__privateMethod(this, _AiThreadsComponent_instances, handleMenuRename_fn)}
+                          @forge-ai-thread-actions-menu-delete-click=${__privateMethod(this, _AiThreadsComponent_instances, handleMenuDeleteClick_fn)}
+                          @forge-ai-thread-actions-menu-open=${__privateMethod(this, _AiThreadsComponent_instances, handleMenuOpen_fn)}
+                          @forge-ai-thread-actions-menu-close=${__privateMethod(this, _AiThreadsComponent_instances, handleMenuClose_fn)}>
+                        </forge-ai-thread-actions-menu>
+                      </div>
+                    `
+      )}
+                `
+    )}
             </li>
           `;
   })}
       </ul>
     `;
 };
-threadActions_get = function() {
+_chatActionsList = /* @__PURE__ */ new WeakMap();
+_chatsLabel = /* @__PURE__ */ new WeakMap();
+loadingMoreIndicator_get = function() {
+  if (!__privateGet(this, _infiniteScrollController).isLoadingMore) {
+    return nothing;
+  }
   return html`
-      <button class="forge-button" @click=${this._handleClearHistoryClick}>
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon">
-          <path d="M19 4h-3.5l-1-1h-5l-1 1H5v2h14M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6z" />
-        </svg>
-        Clear history
-      </button>
+      <div class="loading-more-indicator">
+        <forge-ai-spinner size="small"></forge-ai-spinner>
+      </div>
     `;
 };
 threadListContainer_get = function() {
-  return html` <div class="thread-list-container">${__privateGet(this, _AiThreadsComponent_instances, threadList_get)} ${__privateGet(this, _AiThreadsComponent_instances, threadActions_get)}</div> `;
-};
-newChatButton_get = function() {
-  return html`
-      <button class="forge-button forge-button--tonal" @click=${this._handleNewChatClick}>
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon">
-          <path fill="none" d="M0 0h24v24H0z" />
-          <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z" />
-        </svg>
-        New chat
-      </button>
-    `;
+  return html` <div class="thread-list-container">${__privateGet(this, _AiThreadsComponent_instances, threadList_get)} ${__privateGet(this, _AiThreadsComponent_instances, loadingMoreIndicator_get)}</div> `;
 };
 drawer_get = function() {
+  const displayedThreads = this.threads.filter((t) => !this._hiddenThreadIds.has(t.id));
+  const hasThreads = displayedThreads.length > 0;
   return html`
-      <aside class="forge-drawer">
-        ${__privateGet(this, _searchField)} ${__privateGet(this, _AiThreadsComponent_instances, threadListContainer_get)}
-        <hr class="forge-divider" />
-        ${__privateGet(this, _AiThreadsComponent_instances, newChatButton_get)}
+      <aside class="forge-drawer" role="complementary" aria-label="Thread navigation">
+        <slot name="header"></slot>
+        ${__privateGet(this, _chatActionsList)}
+        <slot name="actions"></slot>
+        ${when(hasThreads, () => html`${__privateGet(this, _chatsLabel)} ${__privateGet(this, _AiThreadsComponent_instances, threadListContainer_get)}`)}
       </aside>
     `;
 };
@@ -166,14 +309,29 @@ __decorateClass([
   property({ type: Array })
 ], AiThreadsComponent.prototype, "threads", 2);
 __decorateClass([
-  state()
-], AiThreadsComponent.prototype, "_filterValue", 2);
+  property({ type: Number, attribute: "total-chats" })
+], AiThreadsComponent.prototype, "totalChats", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-thread-rename" })
+], AiThreadsComponent.prototype, "showThreadRename", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-thread-delete" })
+], AiThreadsComponent.prototype, "showThreadDelete", 2);
+__decorateClass([
+  query(".thread-list-container")
+], AiThreadsComponent.prototype, "_threadListContainer", 2);
 __decorateClass([
   state()
 ], AiThreadsComponent.prototype, "_selectedThreadId", 2);
 __decorateClass([
-  queryAssignedElements({ selector: "forge-ai-chatbot" })
-], AiThreadsComponent.prototype, "_slottedChatbots", 2);
+  state()
+], AiThreadsComponent.prototype, "_editingThreadId", 2);
+__decorateClass([
+  state()
+], AiThreadsComponent.prototype, "_hiddenThreadIds", 2);
+__decorateClass([
+  state()
+], AiThreadsComponent.prototype, "_openMenuThreadId", 2);
 AiThreadsComponent = __decorateClass([
   customElement(AiThreadsComponentTagName)
 ], AiThreadsComponent);