@tylertech/forge-ai 0.13.0 → 0.13.2

package/dist/core/resize-controller.d.ts

@@ -0,0 +1,25 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { Ref } from 'lit/directives/ref.js';
+export interface ResizeControllerOptions {
+    targetElementRef: Ref<HTMLElement>;
+    resizeHandleRef: Ref<HTMLElement>;
+    minWidth?: number;
+    maxWidth?: number;
+    defaultWidth?: number;
+    keyboardStep?: number;
+    onResize?: (width: number) => void;
+    onResizeStart?: () => void;
+    onResizeEnd?: () => void;
+}
+export declare class ResizeController implements ReactiveController {
+    #private;
+    constructor(host: ReactiveControllerHost, options: ResizeControllerOptions);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    get isResizing(): boolean;
+    get currentWidth(): number;
+    setWidth(width: number): void;
+    resetWidth(): void;
+    handlePointerDown: (event: PointerEvent) => void;
+    handleKeyDown: (event: KeyboardEvent) => void;
+}

package/dist/core/resize-controller.mjs

@@ -0,0 +1,144 @@
+const RESIZE_SCREEN_BUFFER = 100;
+class ResizeController {
+  constructor(host, options) {
+    this.#isResizing = false;
+    this.#currentWidth = 0;
+    this.#dragStartX = 0;
+    this.#dragStartWidth = 0;
+    this.handlePointerDown = (event) => {
+      if (event.button !== 0) {
+        return;
+      }
+      event.preventDefault();
+      const resizeHandle = this.#options.resizeHandleRef.value;
+      if (!resizeHandle) {
+        return;
+      }
+      resizeHandle.setPointerCapture(event.pointerId);
+      this.#dragStartX = event.clientX;
+      this.#dragStartWidth = this.#currentWidth;
+      this.#isResizing = true;
+      this.#host.requestUpdate();
+      this.#options.onResizeStart();
+      this.#addResizeListeners();
+    };
+    this.handleKeyDown = (event) => {
+      const step = this.#options.keyboardStep;
+      let delta = 0;
+      switch (event.key) {
+        case "ArrowLeft":
+          delta = step;
+          break;
+        case "ArrowRight":
+          delta = -step;
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+      const newWidth = this.#currentWidth + delta;
+      this.#currentWidth = this.#constrainWidth(newWidth);
+      this.#applyWidth();
+    };
+    this.#handlePointerMove = (event) => {
+      if (!this.#isResizing) {
+        return;
+      }
+      event.preventDefault();
+      const deltaX = this.#dragStartX - event.clientX;
+      const newWidth = this.#dragStartWidth + deltaX;
+      this.#currentWidth = this.#constrainWidth(newWidth);
+      this.#applyWidth();
+    };
+    this.#handlePointerUp = (event) => {
+      if (!this.#isResizing) {
+        return;
+      }
+      event.preventDefault();
+      const resizeHandle = this.#options.resizeHandleRef.value;
+      if (resizeHandle) {
+        resizeHandle.releasePointerCapture(event.pointerId);
+      }
+      this.#isResizing = false;
+      this.#host.requestUpdate();
+      this.#options.onResizeEnd();
+      this.#removeResizeListeners();
+    };
+    this.#host = host;
+    this.#options = {
+      minWidth: 360,
+      maxWidth: 800,
+      defaultWidth: 420,
+      keyboardStep: 20,
+      onResize: () => {
+      },
+      onResizeStart: () => {
+      },
+      onResizeEnd: () => {
+      },
+      ...options
+    };
+    this.#currentWidth = this.#options.defaultWidth;
+    host.addController(this);
+  }
+  #host;
+  #options;
+  #isResizing;
+  #currentWidth;
+  #dragStartX;
+  #dragStartWidth;
+  #resizeAbortController;
+  hostConnected() {
+  }
+  hostDisconnected() {
+    this.#cleanup();
+  }
+  get isResizing() {
+    return this.#isResizing;
+  }
+  get currentWidth() {
+    return this.#currentWidth;
+  }
+  setWidth(width) {
+    this.#currentWidth = this.#constrainWidth(width);
+    this.#applyWidth();
+  }
+  resetWidth() {
+    this.setWidth(this.#options.defaultWidth);
+  }
+  #handlePointerMove;
+  #handlePointerUp;
+  #constrainWidth(width) {
+    const availableWidth = window.innerWidth - RESIZE_SCREEN_BUFFER;
+    const effectiveMaxWidth = Math.min(this.#options.maxWidth, availableWidth);
+    return Math.max(this.#options.minWidth, Math.min(width, effectiveMaxWidth));
+  }
+  #applyWidth() {
+    this.#options.onResize(this.#currentWidth);
+    this.#host.requestUpdate();
+  }
+  #addResizeListeners() {
+    if (!this.#resizeAbortController) {
+      this.#resizeAbortController = new AbortController();
+      document.addEventListener("pointermove", this.#handlePointerMove, {
+        signal: this.#resizeAbortController.signal
+      });
+      document.addEventListener("pointerup", this.#handlePointerUp, {
+        signal: this.#resizeAbortController.signal
+      });
+    }
+  }
+  #removeResizeListeners() {
+    if (this.#resizeAbortController) {
+      this.#resizeAbortController.abort();
+      this.#resizeAbortController = void 0;
+    }
+  }
+  #cleanup() {
+    this.#removeResizeListeners();
+    this.#isResizing = false;
+  }
+}
+export {
+  ResizeController
+};

package/dist/index.d.ts

@@ -12,10 +12,15 @@ export * from './ai-chat-header';
 export * from './ai-chat-interface';
 export * from './ai-chatbot';
 export * from './ai-chatbot-launcher';
+export * from './ai-copy-button';
 export * from './ai-confirmation-prompt';
+export * from './ai-conversations-panel';
+export * from './ai-context-chip';
+export * from './ai-context-items';
 export * from './ai-dialog';
 export * from './ai-disclaimer';
 export * from './ai-dropdown-menu';
+export * from './ai-edit-thread';
 export * from './ai-embedded-chat';
 export * from './ai-empty-state';
 export * from './ai-error-message';
@@ -37,5 +42,7 @@ export * from './ai-slash-command-menu';
 export * from './ai-suggestions';
 export * from './ai-thinking-indicator';
 export * from './ai-threads';
+export * from './ai-threads-search';
+export * from './ai-thread-actions-menu';
 export * from './ai-user-message';
 export * from './ai-voice-input';

package/dist/index.mjs

@@ -28,13 +28,18 @@ import { FileUploadManager } from "./ai-chatbot/file-upload-manager.mjs";
 import { MarkdownStreamController } from "./ai-chatbot/markdown-stream-controller.mjs";
 import { generateId, renderMarkdown } from "./ai-chatbot/utils.mjs";
 import { AiChatbotLauncherComponent, AiChatbotLauncherComponentTagName } from "./ai-chatbot-launcher/ai-chatbot-launcher.mjs";
+import { AiCopyButtonComponent, AiCopyButtonComponentTagName } from "./ai-copy-button/ai-copy-button.mjs";
 import { AiConfirmationPromptComponent, AiConfirmationPromptComponentTagName } from "./ai-confirmation-prompt/ai-confirmation-prompt.mjs";
+import { AiConversationsPanelComponent, AiConversationsPanelComponentTagName } from "./ai-conversations-panel/ai-conversations-panel.mjs";
+import { AiContextChipComponent, AiContextChipComponentTagName } from "./ai-context-chip/ai-context-chip.mjs";
+import { AiContextItemsComponent, AiContextItemsComponentTagName } from "./ai-context-items/ai-context-items.mjs";
 import { AiDialogComponent, AiDialogComponentTagName } from "./ai-dialog/ai-dialog.mjs";
 import { AiDisclaimerComponent, AiDisclaimerComponentTagName } from "./ai-disclaimer/ai-disclaimer.mjs";
 import { ForgeAiDropdownMenuComponent } from "./ai-dropdown-menu/ai-dropdown-menu.mjs";
 import { ForgeAiDropdownMenuItemComponent } from "./ai-dropdown-menu/ai-dropdown-menu-item.mjs";
 import { ForgeAiDropdownMenuItemGroupComponent } from "./ai-dropdown-menu/ai-dropdown-menu-item-group.mjs";
 import { ForgeAiDropdownMenuSeparatorComponent } from "./ai-dropdown-menu/ai-dropdown-menu-separator.mjs";
+import { AiEditThreadComponent, AiEditThreadComponentTagName } from "./ai-edit-thread/ai-edit-thread.mjs";
 import { AiEmbeddedChatComponent, AiEmbeddedChatComponentTagName } from "./ai-embedded-chat/ai-embedded-chat.mjs";
 import { AiEmptyStateComponent, AiEmptyStateComponentTagName } from "./ai-empty-state/ai-empty-state.mjs";
 import { AiErrorMessageComponent, AiErrorMessageComponentTagName } from "./ai-error-message/ai-error-message.mjs";
@@ -57,6 +62,8 @@ import { AiSlashCommandMenuComponent, AiSlashCommandMenuComponentTagName } from
 import { AiSuggestionsComponent, AiSuggestionsComponentTagName } from "./ai-suggestions/ai-suggestions.mjs";
 import { AiThinkingIndicatorComponent, AiThinkingIndicatorComponentTagName } from "./ai-thinking-indicator/ai-thinking-indicator.mjs";
 import { AiThreadsComponent, AiThreadsComponentTagName } from "./ai-threads/ai-threads.mjs";
+import { AiThreadsSearchComponent, AiThreadsSearchComponentTagName } from "./ai-threads-search/ai-threads-search.mjs";
+import { AiThreadActionsMenuComponent, AiThreadActionsMenuComponentTagName } from "./ai-thread-actions-menu/ai-thread-actions-menu.mjs";
 import { AiUserMessageComponent, AiUserMessageComponentTagName } from "./ai-user-message/ai-user-message.mjs";
 import { AiVoiceInputComponent, AiVoiceInputComponentTagName } from "./ai-voice-input/ai-voice-input.mjs";
 export {
@@ -90,10 +97,20 @@ export {
   AiChatbotToolCallComponentTagName,
   AiConfirmationPromptComponent,
   AiConfirmationPromptComponentTagName,
+  AiContextChipComponent,
+  AiContextChipComponentTagName,
+  AiContextItemsComponent,
+  AiContextItemsComponentTagName,
+  AiConversationsPanelComponent,
+  AiConversationsPanelComponentTagName,
+  AiCopyButtonComponent,
+  AiCopyButtonComponentTagName,
   AiDialogComponent,
   AiDialogComponentTagName,
   AiDisclaimerComponent,
   AiDisclaimerComponentTagName,
+  AiEditThreadComponent,
+  AiEditThreadComponentTagName,
   AiEmbeddedChatComponent,
   AiEmbeddedChatComponentTagName,
   AiEmptyStateComponent,
@@ -134,8 +151,12 @@ export {
   AiSuggestionsComponentTagName,
   AiThinkingIndicatorComponent,
   AiThinkingIndicatorComponentTagName,
+  AiThreadActionsMenuComponent,
+  AiThreadActionsMenuComponentTagName,
   AiThreadsComponent,
   AiThreadsComponentTagName,
+  AiThreadsSearchComponent,
+  AiThreadsSearchComponentTagName,
   AiToolCallIndicatorComponent,
   AiToolCallIndicatorComponentTagName,
   AiUserMessageComponent,

package/dist/utils/delete-thread-controller.d.ts

@@ -0,0 +1,14 @@
+import { ReactiveController, ReactiveControllerHost, nothing, TemplateResult } from 'lit';
+import { Thread } from '../ai-threads';
+export interface DeleteThreadControllerCallbacks {
+    onConfirm: (thread: Thread) => void;
+}
+export declare class DeleteThreadController implements ReactiveController {
+    #private;
+    constructor(host: ReactiveControllerHost, callbacks: DeleteThreadControllerCallbacks);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    show(thread: Thread): Promise<void>;
+    close(): void;
+    get template(): TemplateResult | typeof nothing;
+}

package/dist/utils/delete-thread-controller.mjs

@@ -0,0 +1,80 @@
+import { nothing, html } from "lit";
+import { createRef, ref } from "lit/directives/ref.js";
+class DeleteThreadController {
+  #host;
+  #callbacks;
+  #confirmingThread = null;
+  #modalRef = createRef();
+  constructor(host, callbacks) {
+    this.#host = host;
+    this.#callbacks = callbacks;
+    host.addController(this);
+  }
+  hostConnected() {
+  }
+  hostDisconnected() {
+  }
+  async show(thread) {
+    this.#confirmingThread = thread;
+    this.#host.requestUpdate();
+    await this.#host.updateComplete;
+    this.#modalRef.value?.show();
+  }
+  close() {
+    this.#modalRef.value?.close();
+    this.#confirmingThread = null;
+    this.#host.requestUpdate();
+  }
+  #handleConfirm = () => {
+    if (!this.#confirmingThread) {
+      return;
+    }
+    this.#callbacks.onConfirm(this.#confirmingThread);
+    this.close();
+  };
+  #handleDeny = () => {
+    this.close();
+  };
+  #handleModalClose = (evt) => {
+    evt.stopPropagation();
+    this.#confirmingThread = null;
+    this.#host.requestUpdate();
+  };
+  get template() {
+    if (!this.#confirmingThread) {
+      return nothing;
+    }
+    return html`
+      <forge-ai-modal
+        ${ref(this.#modalRef)}
+        .open=${true}
+        size-strategy="fixed"
+        @forge-ai-modal-close=${this.#handleModalClose}>
+        <div class="delete-confirmation" role="alertdialog" aria-labelledby="delete-confirm-title">
+          <h2 id="delete-confirm-title" class="delete-confirmation__title">Delete chat</h2>
+          <div class="delete-confirmation__text">
+            Are you sure you want to delete "${this.#confirmingThread.title}"? This action cannot be undone.
+          </div>
+          <div class="delete-confirmation__actions">
+            <button
+              class="forge-button forge-button--outlined"
+              @click=${this.#handleDeny}
+              autofocus
+              aria-label="Cancel deletion">
+              Cancel
+            </button>
+            <button
+              class="forge-button forge-button--filled"
+              @click=${this.#handleConfirm}
+              aria-label="Confirm deletion">
+              Delete
+            </button>
+          </div>
+        </div>
+      </forge-ai-modal>
+    `;
+  }
+}
+export {
+  DeleteThreadController
+};

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { DeleteThreadController } from './delete-thread-controller';
+export { InfiniteScrollController } from './infinite-scroll-controller';
+export { KeyboardNavigationController } from './keyboard-navigation-controller';

package/dist/utils/index.mjs

@@ -0,0 +1,8 @@
+import { DeleteThreadController } from "./delete-thread-controller.mjs";
+import { InfiniteScrollController } from "./infinite-scroll-controller.mjs";
+import { KeyboardNavigationController } from "./keyboard-navigation-controller.mjs";
+export {
+  DeleteThreadController,
+  InfiniteScrollController,
+  KeyboardNavigationController
+};

package/dist/utils/infinite-scroll-controller.d.ts

@@ -0,0 +1,33 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+export interface InfiniteScrollControllerConfig {
+    /** Callback when load-more conditions met */
+    onLoadMore: () => void;
+    /** Distance from bottom to trigger load (default: 100px) */
+    scrollThreshold?: number;
+    /** Debounce delay for scroll events (default: 150ms) */
+    debounceMs?: number;
+}
+/**
+ * Reactive controller for infinite scroll functionality.
+ * Manages scroll detection, debouncing, and pagination state.
+ */
+export declare class InfiniteScrollController implements ReactiveController {
+    #private;
+    constructor(host: ReactiveControllerHost, config: InfiniteScrollControllerConfig);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /** Attach scroll listener to container element */
+    attach(container: HTMLElement): void;
+    /** Remove scroll listener from current container */
+    detach(): void;
+    /** Reset pagination state */
+    reset(): void;
+    /** Set loading state (call when starting async load) */
+    setLoadingState(isLoading: boolean): void;
+    /** Set whether more results available (false = end of list) */
+    setHasMore(hasMore: boolean): void;
+    /** Current loading state */
+    get isLoadingMore(): boolean;
+    /** Whether more results available */
+    get hasMoreResults(): boolean;
+}

package/dist/utils/infinite-scroll-controller.mjs

@@ -0,0 +1,95 @@
+class InfiniteScrollController {
+  #host;
+  #config;
+  #container = null;
+  #scrollDebounceTimeout;
+  #isLoadingMore = false;
+  #hasMoreResults = true;
+  #lastLoadScrollTop = -1;
+  constructor(host, config) {
+    this.#host = host;
+    this.#config = {
+      onLoadMore: config.onLoadMore,
+      scrollThreshold: config.scrollThreshold ?? 100,
+      debounceMs: config.debounceMs ?? 150
+    };
+    host.addController(this);
+  }
+  hostConnected() {
+  }
+  hostDisconnected() {
+    this.detach();
+    clearTimeout(this.#scrollDebounceTimeout);
+  }
+  /** Attach scroll listener to container element */
+  attach(container) {
+    if (this.#container === container) {
+      return;
+    }
+    this.detach();
+    this.#container = container;
+    this.#container.addEventListener("scroll", this.#handleScroll);
+  }
+  /** Remove scroll listener from current container */
+  detach() {
+    if (this.#container) {
+      this.#container.removeEventListener("scroll", this.#handleScroll);
+      this.#container = null;
+    }
+  }
+  /** Reset pagination state */
+  reset() {
+    this.#isLoadingMore = false;
+    this.#hasMoreResults = true;
+    this.#lastLoadScrollTop = -1;
+    clearTimeout(this.#scrollDebounceTimeout);
+    this.#host.requestUpdate();
+  }
+  /** Set loading state (call when starting async load) */
+  setLoadingState(isLoading) {
+    this.#isLoadingMore = isLoading;
+    if (!isLoading) {
+      clearTimeout(this.#scrollDebounceTimeout);
+    }
+    this.#host.requestUpdate();
+  }
+  /** Set whether more results available (false = end of list) */
+  setHasMore(hasMore) {
+    this.#hasMoreResults = hasMore;
+    this.#host.requestUpdate();
+  }
+  /** Current loading state */
+  get isLoadingMore() {
+    return this.#isLoadingMore;
+  }
+  /** Whether more results available */
+  get hasMoreResults() {
+    return this.#hasMoreResults;
+  }
+  #handleScroll = () => {
+    clearTimeout(this.#scrollDebounceTimeout);
+    this.#scrollDebounceTimeout = window.setTimeout(() => {
+      this.#checkScrollPosition();
+    }, this.#config.debounceMs);
+  };
+  #checkScrollPosition() {
+    if (!this.#hasMoreResults || this.#isLoadingMore || !this.#container) {
+      return;
+    }
+    const { scrollTop, scrollHeight, clientHeight } = this.#container;
+    const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+    if (distanceFromBottom < this.#config.scrollThreshold) {
+      if (this.#lastLoadScrollTop === scrollTop) {
+        return;
+      }
+      this.#lastLoadScrollTop = scrollTop;
+      this.#isLoadingMore = true;
+      clearTimeout(this.#scrollDebounceTimeout);
+      this.#host.requestUpdate();
+      this.#config.onLoadMore();
+    }
+  }
+}
+export {
+  InfiniteScrollController
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tylertech/forge-ai",
-  "version": "0.13.0",
+  "version": "0.13.2",
   "description": "A library of Tyler Forge™ AI chat interface web components.",
   "license": "Apache-2.0",
   "author": "Tyler Technologies, Inc.",
@@ -39,13 +39,13 @@
     "url": "git+https://github.com/tyler-technologies-oss/forge-ai.git"
   },
   "dependencies": {
-    "@ag-ui/client": "^0.0.53",
-    "@ag-ui/core": "^0.0.53",
+    "@ag-ui/client": "^0.0.57",
+    "@ag-ui/core": "^0.0.57",
     "@floating-ui/dom": "^1.7.6",
     "@lit/context": "^1.1.6",
-    "dompurify": "^3.4.2",
-    "lit": "3.3.2",
-    "marked": "^18.0.3",
+    "dompurify": "^3.4.11",
+    "lit": "3.3.3",
+    "marked": "^18.0.5",
     "remend": "^1.3.0",
     "uuid": "^14.0.0"
   },
@@ -58,19 +58,20 @@
     "@storybook/addon-links": "9.1.20",
     "@storybook/addon-themes": "9.1.20",
     "@storybook/web-components-vite": "9.1.20",
-    "@tylertech/forge": "3.14.1",
+    "@tylertech-eslint/eslint-plugin": "3.0.0",
+    "@tylertech/forge": "3.14.4",
     "@tylertech/stylelint-rules": "5.1.2",
-    "@tylertech/tyler-icons": "2.1.0",
+    "@tylertech/tyler-icons": "2.2.0",
     "@types/cssbeautify": "^0.3.5",
     "@types/dompurify": "^3.2.0",
     "@types/mocha": "10.0.10",
-    "@types/node": "25.6.0",
-    "@types/react": "^18.3.28",
-    "@types/sinon": "21.0.0",
+    "@types/node": "25.6.2",
+    "@types/react": "^18.3.31",
+    "@types/sinon": "21.0.1",
     "@ungap/structured-clone": "^1.3.1",
     "@vueless/storybook-dark-mode": "9.0.10",
     "@wc-toolkit/jsdoc-tags": "^1.2.0",
-    "@web/dev-server-esbuild": "1.0.4",
+    "@web/dev-server-esbuild": "1.0.5",
     "@web/dev-server-rollup": "0.6.4",
     "@web/test-runner": "0.20.2",
     "@web/test-runner-commands": "0.9.0",
@@ -90,12 +91,12 @@
     "remark-gfm": "4.0.1",
     "rimraf": "6.1.3",
     "sass": "1.93.3",
-    "sinon": "21.0.3",
+    "sinon": "21.1.2",
     "storybook": "9.1.20",
     "stylelint": "16.26.1",
     "stylelint-config-standard": "39.0.1",
     "typescript": "~5.9.3",
-    "vite": "7.3.2",
+    "vite": "7.3.5",
     "vite-plugin-ejs": "^1.7.0",
     "vite-plugin-full-reload": "^1.2.0",
     "vite-plugin-dts": "4.5.4",