@tylertech/forge-ai 0.15.1 → 0.15.3-dev.0

package/dist/ai-chatbot-launcher/ai-chatbot-launcher.mjs

@@ -40,7 +40,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 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 _headerRef, _gradientContainerRef, _historyButtonRef, _historyPopoverSearchRef, _historyViewSearchRef, _internals, _pendingThreadDeleteSource, _deleteThreadController, _AiChatbotLauncherComponent_instances, setViewState_fn, focusAfterUpdate_fn, transitionToConversation_fn, commitConversationTransition_fn, transitionToWelcome_fn, transitionToHistory_fn, handleHistoryBack_fn, handleHeaderClear_fn, handleHeaderInfo_fn, handleThreadRename_fn, handleEditSave_fn, handleEditCancel_fn, handleThreadNameClick_fn, handleThreadDelete_fn, handleHistoryButtonClick_fn, handleHistoryPopoverToggle_fn, handleViewAllClick_fn, handleThreadsSearchQuery_fn, handleThreadsSearchLoadMore_fn, handleThreadsSearchSelect_fn, handleThreadsSearchRetry_fn, handleThreadsSearchNewChat_fn, handleThreadsSearchRename_fn, handleThreadsSearchDelete_fn, handleThreadsSearchDeleteConfirm_fn, headingElement_get, promptTemplate_get, welcomeHeaderTemplate_get, welcomeSuggestionsTemplate_get, threadName_get, threadActionsMenu_get, conversationContentTemplate_get, historyContentTemplate_get, mainContentTemplate_get, showThreadsLoading_get, historyButtonTemplate_get, historyPopoverTemplate_get, promptSectionTemplate_get;
+var _headerRef, _gradientContainerRef, _historyButtonRef, _historyPopoverSearchRef, _historyViewSearchRef, _internals, _pendingThreadDeleteSource, _deleteThreadController, _AiChatbotLauncherComponent_instances, setViewState_fn, focusAfterUpdate_fn, transitionToConversation_fn, commitConversationTransition_fn, transitionToWelcome_fn, transitionToHistory_fn, handleHistoryBack_fn, handleHeaderClear_fn, handleHeaderInfo_fn, handleThreadRename_fn, handleEditSave_fn, handleEditCancel_fn, handleThreadNameClick_fn, handleThreadDelete_fn, handleHistoryButtonClick_fn, handleHistoryPopoverToggle_fn, handleHistoryPopoverKeydown_fn, handleViewAllClick_fn, handleThreadsSearchQuery_fn, handleThreadsSearchLoadMore_fn, handleThreadsSearchSelect_fn, handleThreadsSearchRetry_fn, handleThreadsSearchNewChat_fn, handleThreadsSearchRename_fn, handleThreadsSearchDelete_fn, handleThreadsSearchDeleteConfirm_fn, headingElement_get, promptTemplate_get, welcomeHeaderTemplate_get, welcomeSuggestionsTemplate_get, threadName_get, threadActionsMenu_get, conversationContentTemplate_get, historyContentTemplate_get, mainContentTemplate_get, showThreadsLoading_get, historyButtonTemplate_get, historyPopoverTemplate_get, promptSectionTemplate_get;
 const HISTORY_POPOVER_INSET = 48;
 const AiChatbotLauncherComponentTagName = "forge-ai-chatbot-launcher";
 let AiChatbotLauncherComponent = class extends AiChatbotBase {
@@ -315,11 +315,22 @@ handleHistoryPopoverToggle_fn = function(evt) {
     void __privateMethod(this, _AiChatbotLauncherComponent_instances, focusAfterUpdate_fn).call(this, () => __privateGet(this, _historyPopoverSearchRef).value);
     return;
   }
+  const activeElement = this.shadowRoot?.activeElement ?? null;
+  const focusInsidePopover = evt.currentTarget.contains(activeElement);
   const focusLost = this.ownerDocument.activeElement === this.ownerDocument.body;
-  if (focusLost && this._viewState !== "history") {
+  if ((focusInsidePopover || focusLost) && this._viewState !== "history") {
     __privateGet(this, _historyButtonRef).value?.focus();
   }
 };
+handleHistoryPopoverKeydown_fn = function(evt) {
+  if (evt.key !== "Escape" || evt.defaultPrevented) {
+    return;
+  }
+  evt.preventDefault();
+  evt.stopPropagation();
+  this._historyPopoverOpen = false;
+  void __privateMethod(this, _AiChatbotLauncherComponent_instances, focusAfterUpdate_fn).call(this, () => __privateGet(this, _historyButtonRef).value);
+};
 handleViewAllClick_fn = function() {
   this._historyPopoverOpen = false;
   __privateMethod(this, _AiChatbotLauncherComponent_instances, transitionToHistory_fn).call(this);
@@ -468,7 +479,6 @@ threadName_get = function() {
     isEditing,
     () => html`
             <forge-ai-edit-thread
-              density="medium"
               .thread=${{
       id: threadId,
       title: this.threadName || "",
@@ -511,7 +521,6 @@ threadActionsMenu_get = function() {
   };
   return html`
       <forge-ai-thread-actions-menu
-        density="medium"
         .thread=${thread}
         ?show-rename=${this.showThreadRename}
         ?show-delete=${this.showThreadDelete}
@@ -659,6 +668,7 @@ historyPopoverTemplate_get = function() {
         .flip=${true}
         .autoSize=${true}
         ?open=${this._historyPopoverOpen}
+        @keydown=${__privateMethod(this, _AiChatbotLauncherComponent_instances, handleHistoryPopoverKeydown_fn)}
         @forge-ai-popover-toggle=${__privateMethod(this, _AiChatbotLauncherComponent_instances, handleHistoryPopoverToggle_fn)}>
         <div class="history-popover" style=${popoverWidth ? `width: ${popoverWidth}px` : ""}>
           <forge-ai-threads-search

package/dist/ai-message-thread/ai-message-thread.d.ts

@@ -61,6 +61,7 @@ export declare class AiMessageThreadComponent extends LitElement {
     debugMode: boolean;
     autoScroll: FeatureToggle;
     private _messageThreadContainer;
+    private _messageThreadContent;
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;

package/dist/ai-message-thread/ai-message-thread.mjs

@@ -2,6 +2,7 @@ import { unsafeCSS, LitElement, html, nothing } from "lit";
 import { property, query, customElement } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { when } from "lit/directives/when.js";
+import { keyed } from "lit/directives/keyed.js";
 import { MarkdownStreamController } from "../ai-chatbot/markdown-stream-controller.mjs";
 import "../ai-assistant-response/ai-assistant-response.mjs";
 import "../ai-client-message/ai-client-message.mjs";
@@ -12,6 +13,7 @@ import "../ai-thinking-indicator/ai-thinking-indicator.mjs";
 import "../ai-user-message/ai-user-message.mjs";
 import "../ai-chatbot/ai-chatbot-tool-call.mjs";
 import "../core/tooltip/tooltip.mjs";
+import "../tools/ai-mcp-app/ai-mcp-app.mjs";
 import styles from "./ai-message-thread.scss.mjs";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -31,7 +33,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 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 _markdownController, _canAutoScroll, _resizeObserver, _AiMessageThreadComponent_instances, scheduleScroll_fn, checkScrollState_fn, _handleScroll, _handleScrollToBottomClick, scrollToBottomButton_get, handleCopy_fn, handleResend_fn, handleThumbsUp_fn, handleThumbsDown_fn, handleUserCopy_fn, handleUserResend_fn, handleUserEdit_fn, renderToolCall_fn, activeResponse_get, renderAssistantResponse_fn, emptyState_get, thinkingIndicator_get, messages_get, dispatchEvent_fn;
+var _markdownController, _canAutoScroll, _lastScrollTop, _resizeObserver, _contentResizeObserver, _AiMessageThreadComponent_instances, observe_fn, handleContentResize_fn, scheduleScroll_fn, checkScrollState_fn, _handleScroll, _handleScrollToBottomClick, scrollToBottomButton_get, handleCopy_fn, handleResend_fn, handleThumbsUp_fn, handleThumbsDown_fn, handleUserCopy_fn, handleUserResend_fn, handleUserEdit_fn, renderToolCall_fn, activeResponse_get, renderAssistantResponse_fn, emptyState_get, thinkingIndicator_get, messages_get, dispatchEvent_fn;
 const AiMessageThreadComponentTagName = "forge-ai-message-thread";
 const SCROLL_THRESHOLD = 100;
 let AiMessageThreadComponent = class extends LitElement {
@@ -45,7 +47,9 @@ let AiMessageThreadComponent = class extends LitElement {
     this.autoScroll = "on";
     __privateAdd(this, _markdownController);
     __privateAdd(this, _canAutoScroll, true);
+    __privateAdd(this, _lastScrollTop, 0);
     __privateAdd(this, _resizeObserver);
+    __privateAdd(this, _contentResizeObserver);
     __privateAdd(this, _handleScroll, () => {
       __privateMethod(this, _AiMessageThreadComponent_instances, checkScrollState_fn).call(this);
     });
@@ -57,13 +61,18 @@ let AiMessageThreadComponent = class extends LitElement {
     super.connectedCallback();
     __privateSet(this, _markdownController, new MarkdownStreamController(this));
     __privateSet(this, _resizeObserver, new ResizeObserver(() => __privateMethod(this, _AiMessageThreadComponent_instances, checkScrollState_fn).call(this)));
+    __privateSet(this, _contentResizeObserver, new ResizeObserver(() => __privateMethod(this, _AiMessageThreadComponent_instances, handleContentResize_fn).call(this)));
+    if (this.hasUpdated) {
+      __privateMethod(this, _AiMessageThreadComponent_instances, observe_fn).call(this);
+    }
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     __privateGet(this, _resizeObserver)?.disconnect();
+    __privateGet(this, _contentResizeObserver)?.disconnect();
   }
   firstUpdated() {
-    __privateGet(this, _resizeObserver)?.observe(this._messageThreadContainer);
+    __privateMethod(this, _AiMessageThreadComponent_instances, observe_fn).call(this);
   }
   updated(changedProperties) {
     super.updated(changedProperties);
@@ -95,8 +104,19 @@ let AiMessageThreadComponent = class extends LitElement {
 };
 _markdownController = /* @__PURE__ */ new WeakMap();
 _canAutoScroll = /* @__PURE__ */ new WeakMap();
+_lastScrollTop = /* @__PURE__ */ new WeakMap();
 _resizeObserver = /* @__PURE__ */ new WeakMap();
+_contentResizeObserver = /* @__PURE__ */ new WeakMap();
 _AiMessageThreadComponent_instances = /* @__PURE__ */ new WeakSet();
+observe_fn = function() {
+  __privateGet(this, _resizeObserver)?.observe(this._messageThreadContainer);
+  __privateGet(this, _contentResizeObserver)?.observe(this._messageThreadContent);
+};
+handleContentResize_fn = function() {
+  if (this.autoScroll === "on") {
+    this.scrollToBottom({ behavior: "instant" });
+  }
+};
 scheduleScroll_fn = async function() {
   await this.updateComplete;
   await new Promise(requestAnimationFrame);
@@ -108,7 +128,10 @@ checkScrollState_fn = function() {
     return;
   }
   const { scrollTop, scrollHeight, clientHeight } = container;
-  const canAutoScroll = scrollTop + clientHeight >= scrollHeight - SCROLL_THRESHOLD;
+  const isNearBottom = scrollTop + clientHeight >= scrollHeight - SCROLL_THRESHOLD;
+  const scrolledUp = scrollTop < __privateGet(this, _lastScrollTop);
+  __privateSet(this, _lastScrollTop, scrollTop);
+  const canAutoScroll = isNearBottom || __privateGet(this, _canAutoScroll) && !scrolledUp;
   if (canAutoScroll !== __privateGet(this, _canAutoScroll)) {
     __privateSet(this, _canAutoScroll, canAutoScroll);
     this.requestUpdate();
@@ -173,6 +196,9 @@ handleUserEdit_fn = function(messageId, content) {
   });
 };
 renderToolCall_fn = function(toolCall) {
+  if (toolCall.uiResource) {
+    return keyed(toolCall.id, html`<forge-ai-mcp-app .toolCall=${toolCall}></forge-ai-mcp-app>`);
+  }
   const toolDefinition = this.tools?.get(toolCall.name);
   return html`<forge-ai-chatbot-tool-call
       .toolCall=${toolCall}
@@ -231,6 +257,9 @@ messages_get = function() {
       return true;
     }
     if (item.type === "toolCall") {
+      if (item.data.uiResource) {
+        return true;
+      }
       const toolDef = this.tools?.get(item.data.name);
       return !!toolDef?.renderer;
     }
@@ -318,6 +347,9 @@ __decorateClass([
 __decorateClass([
   query(".message-thread")
 ], AiMessageThreadComponent.prototype, "_messageThreadContainer", 2);
+__decorateClass([
+  query(".message-thread-content")
+], AiMessageThreadComponent.prototype, "_messageThreadContent", 2);
 AiMessageThreadComponent = __decorateClass([
   customElement(AiMessageThreadComponentTagName)
 ], AiMessageThreadComponent);

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

@@ -1,4 +1,5 @@
-import { LitElement, TemplateResult, CSSResult } from 'lit';
+import { LitElement, PropertyValues, TemplateResult, CSSResult } from 'lit';
+import { FeatureToggle } from '../ai-chatbot';
 declare global {
     interface HTMLElementTagNameMap {
         'forge-ai-sidebar': AiSidebarComponent;
@@ -6,8 +7,12 @@ declare global {
     interface HTMLElementEventMap {
         'forge-ai-sidebar-open': CustomEvent<void>;
         'forge-ai-sidebar-close': CustomEvent<void>;
+        'forge-ai-sidebar-resize': CustomEvent<ForgeAiSidebarResizeEventData>;
     }
 }
+export interface ForgeAiSidebarResizeEventData {
+    width: number;
+}
 export declare const AiSidebarComponentTagName: keyof HTMLElementTagNameMap;
 /**
  * @tag forge-ai-sidebar
@@ -16,6 +21,7 @@ export declare const AiSidebarComponentTagName: keyof HTMLElementTagNameMap;
  *
  * @fires forge-ai-sidebar-open - Fired when the sidebar is opened
  * @fires forge-ai-sidebar-close - Fired when the sidebar is closed
+ * @fires forge-ai-sidebar-resize - Fired when a resize is committed via pointer release or keyboard step
  */
 export declare class AiSidebarComponent extends LitElement {
     #private;
@@ -25,10 +31,15 @@ export declare class AiSidebarComponent extends LitElement {
      */
     open: boolean;
     /**
-     * Enables sidebar resizing.
+     * Enables sidebar resizing. Set to `'off'` to disable and reset to the default width.
+     */
+    resizable: FeatureToggle;
+    /**
+     * The current width of the sidebar in pixels. Clamped to the min/max bounds and viewport.
+     * Resized widths are persisted per tab in sessionStorage and shared across tabs via localStorage.
+     * On load the session value is preferred, then the local value, then the default.
      */
-    resizable: boolean;
-    private _width;
+    width: number;
     /**
      * Indicates whether the sidebar is in a closing animation state.
      */
@@ -41,6 +52,7 @@ export declare class AiSidebarComponent extends LitElement {
      * Indicates whether the sidebar is being resized.
      */
     private _isResizing;
+    constructor();
     render(): TemplateResult;
     /**
      * Opens the sidebar.
@@ -54,6 +66,5 @@ export declare class AiSidebarComponent extends LitElement {
      * Toggles the sidebar open state.
      */
     toggle(): void;
-    firstUpdated(): void;
-    updated(changedProperties: Map<string, unknown>): void;
+    willUpdate(changedProperties: PropertyValues<this>): void;
 }

package/dist/ai-sidebar/ai-sidebar.mjs

@@ -5,6 +5,7 @@ import { styleMap } from "lit/directives/style-map.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { when } from "lit/directives/when.js";
 import { ResizeController } from "../core/resize-controller.mjs";
+import { readStoredNumber, writeStoredNumber, removeStoredValue } from "../utils/storage-utils.mjs";
 import styles from "./ai-sidebar.scss.mjs";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -24,18 +25,20 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 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 _resizeHandleRef, _drawerRef, _containerRef, _resizeController, _AiSidebarComponent_instances, handleContainerTransitionEnd_fn, handleDrawerTransitionEnd_fn, handleResizePointerDown_fn, handleResizeKeyDown_fn, dispatchEvent_fn;
+var _resizeHandleRef, _drawerRef, _containerRef, _resizeController, _AiSidebarComponent_instances, handleContainerTransitionEnd_fn, handleDrawerTransitionEnd_fn, handleResizePointerDown_fn, handleResizeKeyDown_fn, handleResizeCommit_fn, readPersistedWidth_fn, persistWidth_fn, clearPersistedWidth_fn, dispatchEvent_fn;
 const DEFAULT_WIDTH = 420;
 const MIN_WIDTH = 360;
 const MAX_WIDTH = 800;
+const WIDTH_STORAGE_KEY = "forge-ai-sidebar-width";
+const WIDTH_STORAGE_KINDS = ["session", "local"];
 const AiSidebarComponentTagName = "forge-ai-sidebar";
 let AiSidebarComponent = class extends LitElement {
   constructor() {
-    super(...arguments);
+    super();
     __privateAdd(this, _AiSidebarComponent_instances);
     this.open = false;
-    this.resizable = true;
-    this._width = DEFAULT_WIDTH;
+    this.resizable = "on";
+    this.width = DEFAULT_WIDTH;
     this._closing = false;
     this._containerClosing = false;
     this._isResizing = false;
@@ -43,6 +46,26 @@ let AiSidebarComponent = class extends LitElement {
     __privateAdd(this, _drawerRef, createRef());
     __privateAdd(this, _containerRef, createRef());
     __privateAdd(this, _resizeController);
+    this.width = __privateMethod(this, _AiSidebarComponent_instances, readPersistedWidth_fn).call(this) ?? DEFAULT_WIDTH;
+    __privateSet(this, _resizeController, new ResizeController(this, {
+      targetElementRef: __privateGet(this, _containerRef),
+      resizeHandleRef: __privateGet(this, _resizeHandleRef),
+      minWidth: MIN_WIDTH,
+      maxWidth: MAX_WIDTH,
+      defaultWidth: DEFAULT_WIDTH,
+      onResize: (width) => {
+        this.width = width;
+      },
+      onResizeStart: () => {
+        this._isResizing = true;
+      },
+      onResizeEnd: () => {
+        this._isResizing = false;
+      },
+      onCommit: (width) => {
+        __privateMethod(this, _AiSidebarComponent_instances, handleResizeCommit_fn).call(this, width);
+      }
+    }));
   }
   render() {
     const containerClasses = {
@@ -64,7 +87,7 @@ let AiSidebarComponent = class extends LitElement {
       "resize-handle--active": this._isResizing
     };
     const containerStyles = {
-      "--forge-drawer-width": `${this._width}px`
+      "--forge-drawer-width": `${this.width}px`
     };
     return html`
       <div
@@ -80,7 +103,7 @@ let AiSidebarComponent = class extends LitElement {
           aria-hidden=${!this.open}
           @transitionend=${__privateMethod(this, _AiSidebarComponent_instances, handleDrawerTransitionEnd_fn)}>
           ${when(
-      this.resizable,
+      this.resizable === "on",
       () => html`
               <div
                 ${ref(__privateGet(this, _resizeHandleRef))}
@@ -90,11 +113,18 @@ let AiSidebarComponent = class extends LitElement {
                 aria-label="Resize chatbot panel, use left and right arrow keys"
                 aria-valuemin="${MIN_WIDTH}"
                 aria-valuemax="${MAX_WIDTH}"
-                aria-valuenow=${this._width}
-                aria-valuetext="${this._width} pixels"
+                aria-valuenow=${this.width}
+                aria-valuetext="${this.width} pixels"
                 tabindex="0"
                 @pointerdown=${__privateMethod(this, _AiSidebarComponent_instances, handleResizePointerDown_fn)}
-                @keydown=${__privateMethod(this, _AiSidebarComponent_instances, handleResizeKeyDown_fn)}></div>
+                @keydown=${__privateMethod(this, _AiSidebarComponent_instances, handleResizeKeyDown_fn)}>
+                <span class="resize-handle__grip" aria-hidden="true">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path
+                      d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2" />
+                  </svg>
+                </span>
+              </div>
             `
     )}
           <slot></slot>
@@ -132,27 +162,15 @@ let AiSidebarComponent = class extends LitElement {
       this.show();
     }
   }
-  firstUpdated() {
-    __privateSet(this, _resizeController, new ResizeController(this, {
-      targetElementRef: __privateGet(this, _containerRef),
-      resizeHandleRef: __privateGet(this, _resizeHandleRef),
-      minWidth: MIN_WIDTH,
-      maxWidth: MAX_WIDTH,
-      defaultWidth: DEFAULT_WIDTH,
-      onResize: (width) => {
-        this._width = width;
-      },
-      onResizeStart: () => {
-        this._isResizing = true;
-      },
-      onResizeEnd: () => {
-        this._isResizing = false;
+  willUpdate(changedProperties) {
+    if (changedProperties.has("width") && this.width !== __privateGet(this, _resizeController).currentWidth) {
+      __privateGet(this, _resizeController).setWidth(this.width);
+    }
+    if (changedProperties.has("resizable") && this.resizable === "off") {
+      __privateGet(this, _resizeController).resetWidth();
+      if (this.hasUpdated) {
+        __privateMethod(this, _AiSidebarComponent_instances, clearPersistedWidth_fn).call(this);
       }
-    }));
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("resizable") && !this.resizable) {
-      this._width = DEFAULT_WIDTH;
     }
   }
 };
@@ -174,15 +192,39 @@ handleDrawerTransitionEnd_fn = function(evt) {
   }
 };
 handleResizePointerDown_fn = function(event) {
-  __privateGet(this, _resizeController)?.handlePointerDown(event);
+  __privateGet(this, _resizeController).handlePointerDown(event);
 };
 handleResizeKeyDown_fn = function(event) {
-  __privateGet(this, _resizeController)?.handleKeyDown(event);
+  __privateGet(this, _resizeController).handleKeyDown(event);
 };
-dispatchEvent_fn = function(type) {
+handleResizeCommit_fn = function(width) {
+  __privateMethod(this, _AiSidebarComponent_instances, dispatchEvent_fn).call(this, "forge-ai-sidebar-resize", { width });
+  __privateMethod(this, _AiSidebarComponent_instances, persistWidth_fn).call(this, width);
+};
+readPersistedWidth_fn = function() {
+  for (const kind of WIDTH_STORAGE_KINDS) {
+    const width = readStoredNumber({ kind, key: WIDTH_STORAGE_KEY });
+    if (width !== void 0) {
+      return width;
+    }
+  }
+  return void 0;
+};
+persistWidth_fn = function(width) {
+  for (const kind of WIDTH_STORAGE_KINDS) {
+    writeStoredNumber({ kind, key: WIDTH_STORAGE_KEY, value: width });
+  }
+};
+clearPersistedWidth_fn = function() {
+  for (const kind of WIDTH_STORAGE_KINDS) {
+    removeStoredValue({ kind, key: WIDTH_STORAGE_KEY });
+  }
+};
+dispatchEvent_fn = function(type, detail) {
   const event = new CustomEvent(type, {
     bubbles: true,
-    composed: true
+    composed: true,
+    detail
   });
   this.dispatchEvent(event);
 };
@@ -191,11 +233,11 @@ __decorateClass([
   property({ type: Boolean })
 ], AiSidebarComponent.prototype, "open", 2);
 __decorateClass([
-  property({ type: Boolean })
+  property()
 ], AiSidebarComponent.prototype, "resizable", 2);
 __decorateClass([
-  state()
-], AiSidebarComponent.prototype, "_width", 2);
+  property({ type: Number })
+], AiSidebarComponent.prototype, "width", 2);
 __decorateClass([
   state()
 ], AiSidebarComponent.prototype, "_closing", 2);

package/dist/ai-sidebar/ai-sidebar.scss.mjs

@@ -1,4 +1,4 @@
-const styles = '/**\n * @license\n * Copyright Tyler Technologies, Inc.\n * License: Apache-2.0\n */\n.forge-drawer {\n  --_drawer-background:var(--forge-drawer-background, var(--forge-theme-surface, #ffffff));\n  --_drawer-border-color:var(--forge-drawer-border-color, var(--forge-theme-outline, #e0e0e0));\n  --_drawer-width:var(--forge-drawer-width, 256px);\n  --_drawer-border-width:var(--forge-drawer-border-width, var(--forge-border-thin, 1px));\n  --_drawer-transition-duration:var(--forge-drawer-transition-duration, var(--forge-animation-duration-medium1, 250ms));\n  --_drawer-transition-easing:var(--forge-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n  --_drawer-transition-duration-close:var(--forge-drawer-transition-duration-close, var(--forge-animation-duration-short4, 200ms));\n}\n\n.forge-drawer {\n  width: var(--_drawer-width);\n  height: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: auto 1fr auto;\n  background-color: var(--_drawer-background);\n  border-color: var(--_drawer-border-color);\n  transition-property: transform;\n  transition-duration: var(--_drawer-transition-duration);\n  transition-timing-function: var(--_drawer-transition-easing);\n  border-right-width: var(--_drawer-border-width);\n  border-right-style: solid;\n}\n\n.forge-drawer--closing {\n  transform: translateX(-100%);\n  left: 0;\n  z-index: var(--forge-z-index-surface, 1);\n  position: absolute;\n  top: 0;\n  right: 0;\n  transition-duration: var(--_drawer-transition-duration-close);\n}\n\n.forge-drawer--closed {\n  transform: translateX(-100%);\n  left: 0;\n  width: 0;\n  border: none;\n}\n\n.forge-drawer--right {\n  border-left-width: var(--_drawer-border-width);\n  border-left-style: solid;\n  border-right: none;\n}\n\n.forge-drawer--right.forge-drawer--closing {\n  transform: translateX(100%);\n  right: 0;\n  left: auto;\n  z-index: var(--forge-z-index-surface, 1);\n  position: absolute;\n  top: 0;\n  right: 0;\n  transition-duration: var(--_drawer-transition-duration-close);\n}\n\n.forge-drawer--right.forge-drawer--closed {\n  transform: translateX(100%);\n  right: 0;\n  left: auto;\n  width: 0;\n  border: none;\n}\n\n.forge-drawer--mini {\n  width: var(--_mini-drawer-width);\n  z-index: var(--forge-z-index-surface, 1);\n  transition: width var(--_mini-drawer-transition-duration) var(--_mini-drawer-transition-easing);\n}\n\n:host {\n  display: block;\n  width: auto;\n  height: 100%;\n  overflow: hidden;\n}\n\n.animation-container {\n  --forge-drawer-width: 420px;\n  width: var(--forge-drawer-width);\n  height: 100%;\n  position: relative;\n  transition: width 250ms cubic-bezier(0.2, 0, 0, 1);\n  overflow: hidden;\n}\n.animation-container--closed {\n  width: 0;\n}\n.animation-container--closing {\n  width: 0;\n}\n.animation-container--open {\n  width: var(--forge-drawer-width);\n}\n.animation-container--resizing {\n  transition: none;\n}\n\n.forge-drawer {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  width: var(--forge-drawer-width);\n  height: 100%;\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n.forge-drawer--resizing {\n  user-select: none;\n  transition: none;\n}\n\n.resize-handle {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 8px;\n  height: 100%;\n  cursor: ew-resize;\n  z-index: 10;\n}\n.resize-handle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 1px;\n  background-color: var(--forge-theme-outline, #e0e0e0);\n  opacity: 0;\n  transition: all var(--forge-animation-duration-short4, 200ms) var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n.resize-handle:hover::before {\n  opacity: 0.4;\n  width: 2px;\n  background-color: var(--forge-theme-primary, #3f51b5);\n}\n.resize-handle:focus-visible {\n  outline: 2px solid var(--forge-theme-primary, #3f51b5);\n  outline-offset: -2px;\n}\n.resize-handle:focus-visible::before {\n  opacity: 0.6;\n  width: 2px;\n  background-color: var(--forge-theme-primary, #3f51b5);\n}\n.resize-handle--active::before {\n  opacity: 0.8;\n  width: 3px;\n  background-color: var(--forge-theme-primary, #3f51b5);\n}\n\n:host([resizable=false]) .resize-handle {\n  display: none;\n}';
+const styles = '/**\n * @license\n * Copyright Tyler Technologies, Inc.\n * License: Apache-2.0\n */\n.forge-drawer {\n  --_drawer-background:var(--forge-drawer-background, var(--forge-theme-surface, #ffffff));\n  --_drawer-border-color:var(--forge-drawer-border-color, var(--forge-theme-outline, #e0e0e0));\n  --_drawer-width:var(--forge-drawer-width, 256px);\n  --_drawer-border-width:var(--forge-drawer-border-width, var(--forge-border-thin, 1px));\n  --_drawer-transition-duration:var(--forge-drawer-transition-duration, var(--forge-animation-duration-medium1, 250ms));\n  --_drawer-transition-easing:var(--forge-drawer-transition-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n  --_drawer-transition-duration-close:var(--forge-drawer-transition-duration-close, var(--forge-animation-duration-short4, 200ms));\n}\n\n.forge-drawer {\n  width: var(--_drawer-width);\n  height: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: auto 1fr auto;\n  background-color: var(--_drawer-background);\n  border-color: var(--_drawer-border-color);\n  transition-property: transform;\n  transition-duration: var(--_drawer-transition-duration);\n  transition-timing-function: var(--_drawer-transition-easing);\n  border-right-width: var(--_drawer-border-width);\n  border-right-style: solid;\n}\n\n.forge-drawer--closing {\n  transform: translateX(-100%);\n  left: 0;\n  z-index: var(--forge-z-index-surface, 1);\n  position: absolute;\n  top: 0;\n  right: 0;\n  transition-duration: var(--_drawer-transition-duration-close);\n}\n\n.forge-drawer--closed {\n  transform: translateX(-100%);\n  left: 0;\n  width: 0;\n  border: none;\n}\n\n.forge-drawer--right {\n  border-left-width: var(--_drawer-border-width);\n  border-left-style: solid;\n  border-right: none;\n}\n\n.forge-drawer--right.forge-drawer--closing {\n  transform: translateX(100%);\n  right: 0;\n  left: auto;\n  z-index: var(--forge-z-index-surface, 1);\n  position: absolute;\n  top: 0;\n  right: 0;\n  transition-duration: var(--_drawer-transition-duration-close);\n}\n\n.forge-drawer--right.forge-drawer--closed {\n  transform: translateX(100%);\n  right: 0;\n  left: auto;\n  width: 0;\n  border: none;\n}\n\n.forge-drawer--mini {\n  width: var(--_mini-drawer-width);\n  z-index: var(--forge-z-index-surface, 1);\n  transition: width var(--_mini-drawer-transition-duration) var(--_mini-drawer-transition-easing);\n}\n\n:host {\n  display: block;\n  width: auto;\n  height: 100%;\n  overflow: hidden;\n}\n\n.animation-container {\n  --forge-drawer-width: 420px;\n  width: var(--forge-drawer-width);\n  height: 100%;\n  position: relative;\n  transition: width 250ms cubic-bezier(0.2, 0, 0, 1);\n  overflow: hidden;\n}\n.animation-container--closed {\n  width: 0;\n}\n.animation-container--closing {\n  width: 0;\n}\n.animation-container--open {\n  width: var(--forge-drawer-width);\n}\n.animation-container--resizing {\n  transition: none;\n}\n\n.forge-drawer {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  width: var(--forge-drawer-width);\n  height: 100%;\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n.forge-drawer--resizing {\n  user-select: none;\n  transition: none;\n}\n\n.resize-handle {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 8px;\n  height: 100%;\n  cursor: ew-resize;\n  z-index: 10;\n}\n.resize-handle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 1px;\n  background-color: var(--forge-theme-outline, #e0e0e0);\n  opacity: 0;\n  transition: all var(--forge-animation-duration-short4, 200ms) var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n.resize-handle__grip {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  translate: 0 -50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: 6px;\n  height: 32px;\n  color: var(--forge-theme-text-low, rgba(0, 0, 0, 0.38));\n  background-color: var(--forge-theme-surface, #ffffff);\n  border: 1px solid var(--forge-theme-outline, #e0e0e0);\n  border-inline-start: none;\n  border-start-end-radius: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n  border-end-end-radius: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n  pointer-events: none;\n  transition: color var(--forge-animation-duration-short4, 200ms) var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)), border-color var(--forge-animation-duration-short4, 200ms) var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n.resize-handle__grip svg {\n  flex-shrink: 0;\n  width: 12px;\n  height: 12px;\n  fill: currentColor;\n}\n.resize-handle:hover::before {\n  opacity: 0.4;\n  width: 2px;\n  background-color: var(--forge-theme-primary, #3f51b5);\n}\n.resize-handle:focus-visible {\n  outline: 2px solid var(--forge-theme-primary, #3f51b5);\n  outline-offset: -2px;\n}\n.resize-handle:focus-visible::before {\n  opacity: 0.6;\n  width: 2px;\n  background-color: var(--forge-theme-primary, #3f51b5);\n}\n.resize-handle--active::before {\n  opacity: 0.8;\n  width: 3px;\n  background-color: var(--forge-theme-primary, #3f51b5);\n}\n.resize-handle:hover .resize-handle__grip, .resize-handle:focus-visible .resize-handle__grip, .resize-handle--active .resize-handle__grip {\n  color: var(--forge-theme-primary, #3f51b5);\n  border-color: var(--forge-theme-primary, #3f51b5);\n}';
 export {
   styles as default
 };

package/dist/ai-sidebar/index.d.ts

@@ -1 +1,2 @@
 export { AiSidebarComponent, AiSidebarComponentTagName } from './ai-sidebar';
+export type { ForgeAiSidebarResizeEventData } from './ai-sidebar';

package/dist/ai-sidebar-chat/ai-sidebar-chat.d.ts

@@ -1,4 +1,5 @@
 import { LitElement, TemplateResult, CSSResult } from 'lit';
+import { FeatureToggle } from '../ai-chatbot';
 declare global {
     interface HTMLElementTagNameMap {
         'forge-ai-sidebar-chat': AiSidebarChatComponent;
@@ -8,8 +9,12 @@ declare global {
         'forge-ai-sidebar-chat-close': CustomEvent<void>;
         'forge-ai-sidebar-chat-expand': CustomEvent<void>;
         'forge-ai-sidebar-chat-collapse': CustomEvent<void>;
+        'forge-ai-sidebar-chat-resize': CustomEvent<ForgeAiSidebarChatResizeEventData>;
     }
 }
+export interface ForgeAiSidebarChatResizeEventData {
+    width: number;
+}
 export declare const AiSidebarChatComponentTagName: keyof HTMLElementTagNameMap;
 /**
  * @tag forge-ai-sidebar-chat
@@ -20,6 +25,7 @@ export declare const AiSidebarChatComponentTagName: keyof HTMLElementTagNameMap;
  * @fires forge-ai-sidebar-chat-close - Fired when the sidebar chat is closed
  * @fires forge-ai-sidebar-chat-expand - Fired when the sidebar chat is expanded to modal
  * @fires forge-ai-sidebar-chat-collapse - Fired when the sidebar chat is collapsed from modal
+ * @fires forge-ai-sidebar-chat-resize - Fired when the sidebar width is resized
  *
  * @description A form factor component that positions a slotted chatbot in a sidebar or modal.
  * Manages positioning and expand/collapse state while delegating chat functionality to the slotted chatbot.
@@ -31,7 +37,14 @@ export declare class AiSidebarChatComponent extends LitElement {
     static styles: CSSResult;
     open: boolean;
     expanded: boolean;
-    resizable: boolean;
+    /**
+     * Enables sidebar resizing. Set to `'off'` to disable.
+     */
+    resizable: FeatureToggle;
+    /**
+     * The current width of the sidebar in pixels. Retained across expand/collapse.
+     */
+    width?: number;
     render(): TemplateResult;
     show(): void;
     close(): void;

package/dist/ai-sidebar-chat/ai-sidebar-chat.mjs

@@ -1,6 +1,6 @@
 import { unsafeCSS, LitElement, html } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { createRef, ref } from "lit/directives/ref.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
 import "../ai-sidebar/ai-sidebar.mjs";
 import "../ai-modal/ai-modal.mjs";
@@ -22,7 +22,7 @@ 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 _sidebarRef, _modalRef, _slotContent, _AiSidebarChatComponent_instances, handleSidebarOpen_fn, handleSidebarClose_fn, handleFullscreenChange_fn, handleChatbotExpand_fn, handleChatbotMinimize_fn, handleModalClose_fn, dispatchEvent_fn;
+var _slotContent, _AiSidebarChatComponent_instances, handleSidebarOpen_fn, handleSidebarClose_fn, handleSidebarResize_fn, handleFullscreenChange_fn, handleChatbotExpand_fn, handleChatbotMinimize_fn, handleModalClose_fn, dispatchEvent_fn;
 const AiSidebarChatComponentTagName = "forge-ai-sidebar-chat";
 let AiSidebarChatComponent = class extends LitElement {
   constructor() {
@@ -30,9 +30,7 @@ let AiSidebarChatComponent = class extends LitElement {
     __privateAdd(this, _AiSidebarChatComponent_instances);
     this.open = false;
     this.expanded = false;
-    this.resizable = true;
-    __privateAdd(this, _sidebarRef, createRef());
-    __privateAdd(this, _modalRef, createRef());
+    this.resizable = "on";
     __privateAdd(this, _slotContent, html`
     <slot
       @forge-ai-chatbot-expand=${__privateMethod(this, _AiSidebarChatComponent_instances, handleChatbotExpand_fn)}
@@ -45,7 +43,6 @@ let AiSidebarChatComponent = class extends LitElement {
       this.expanded,
       () => html`
           <forge-ai-modal
-            ${ref(__privateGet(this, _modalRef))}
             ?open=${this.open && this.expanded}
             @forge-ai-modal-fullscreen-change=${__privateMethod(this, _AiSidebarChatComponent_instances, handleFullscreenChange_fn)}
             @forge-ai-modal-close=${__privateMethod(this, _AiSidebarChatComponent_instances, handleModalClose_fn)}>
@@ -54,11 +51,12 @@ let AiSidebarChatComponent = class extends LitElement {
         `,
       () => html`
           <forge-ai-sidebar
-            ${ref(__privateGet(this, _sidebarRef))}
             ?open=${this.open && !this.expanded}
-            ?resizable=${this.resizable}
+            resizable=${this.resizable}
+            width=${ifDefined(this.width)}
             @forge-ai-sidebar-open=${__privateMethod(this, _AiSidebarChatComponent_instances, handleSidebarOpen_fn)}
-            @forge-ai-sidebar-close=${__privateMethod(this, _AiSidebarChatComponent_instances, handleSidebarClose_fn)}>
+            @forge-ai-sidebar-close=${__privateMethod(this, _AiSidebarChatComponent_instances, handleSidebarClose_fn)}
+            @forge-ai-sidebar-resize=${__privateMethod(this, _AiSidebarChatComponent_instances, handleSidebarResize_fn)}>
             ${__privateGet(this, _slotContent)}
           </forge-ai-sidebar>
         `
@@ -97,8 +95,6 @@ let AiSidebarChatComponent = class extends LitElement {
     }
   }
 };
-_sidebarRef = /* @__PURE__ */ new WeakMap();
-_modalRef = /* @__PURE__ */ new WeakMap();
 _slotContent = /* @__PURE__ */ new WeakMap();
 _AiSidebarChatComponent_instances = /* @__PURE__ */ new WeakSet();
 handleSidebarOpen_fn = function() {
@@ -109,6 +105,10 @@ handleSidebarClose_fn = function() {
   this.open = false;
   __privateMethod(this, _AiSidebarChatComponent_instances, dispatchEvent_fn).call(this, "forge-ai-sidebar-chat-close");
 };
+handleSidebarResize_fn = function(event) {
+  this.width = event.detail.width;
+  __privateMethod(this, _AiSidebarChatComponent_instances, dispatchEvent_fn).call(this, "forge-ai-sidebar-chat-resize", { width: this.width });
+};
 handleFullscreenChange_fn = function(event) {
   const { isFullscreen } = event.detail;
   if (isFullscreen && !this.expanded) {
@@ -133,10 +133,11 @@ handleChatbotMinimize_fn = function() {
 handleModalClose_fn = function() {
   this.collapse();
 };
-dispatchEvent_fn = function(type) {
+dispatchEvent_fn = function(type, detail) {
   const event = new CustomEvent(type, {
     bubbles: true,
-    composed: true
+    composed: true,
+    detail
   });
   this.dispatchEvent(event);
 };
@@ -148,8 +149,11 @@ __decorateClass([
   property({ type: Boolean })
 ], AiSidebarChatComponent.prototype, "expanded", 2);
 __decorateClass([
-  property({ type: Boolean })
+  property()
 ], AiSidebarChatComponent.prototype, "resizable", 2);
+__decorateClass([
+  property({ type: Number })
+], AiSidebarChatComponent.prototype, "width", 2);
 AiSidebarChatComponent = __decorateClass([
   customElement(AiSidebarChatComponentTagName)
 ], AiSidebarChatComponent);